/* Cloud & Vermilion: original visual family, shared by public and learning pages.
   Decorative art never sits behind assessment questions or lesson text. */
:root { --dragon-cream:#fcf6ed; --dragon-red:#a44035; --dragon-gold:#c59856; --dragon-line:#eadccd; }
.landing-body { background:#fcf9f3; color:#3e302b; }
.landing-body .site-header { max-width:1320px; width:calc(100% - 64px); height:85px; padding:12px 28px; margin:22px auto 0; background:#fffdf6ed; border:1px solid #eaddcf; border-radius:25px; box-shadow:0 8px 35px #8b4e2710; gap:24px; }
.landing-body .site-header .brand { font-size:20px; }
.landing-body .brand-mark { border-radius:10px; background:#9c3b32; box-shadow:none; }
.landing-body .site-header nav a { color:#715f53; font-size:12px; }
.landing-body .site-header nav a:hover,.landing-body .site-header nav [aria-current] { color:#9c3b32; }
.landing-body .button { border-radius:12px; box-shadow:0 5px 15px #84362c10; }
.landing-body .site-header>.button { background:#9c3b32; color:#fff9f1; border:0; font-size:11px; padding:12px 18px; }
.landing-body .city-hero { position:relative; isolation:isolate; display:block; max-width:1440px; width:calc(100% - 32px); min-height:680px; margin:-48px auto 0; padding:120px 6% 105px; border-radius:34px; overflow:hidden; background:#f9eddf; }
.landing-body .city-hero .hero-copy { max-width:560px; padding:25px 0; z-index:2; }
.landing-body .city-hero h1 { font-size:clamp(45px,4.2vw,60px); color:#4b2923; line-height:1.1; letter-spacing:-.045em; }
.landing-body .city-hero .city-eyebrow { max-width:390px; font-size:9px; line-height:1.8; margin-bottom:20px; color:#93493b; letter-spacing:.06em; }
.landing-body .city-hero .lead { max-width:410px; font-size:14px; line-height:1.9; color:#735a4c; margin-block:21px 25px; }
.landing-body .city-hero .hero-actions { gap:18px; }
.landing-body .city-hero .hero-actions .button { font-size:12px; }
.landing-body .city-hero .hero-actions .text-link { font-size:11px; color:#724433; }
.landing-body .hero-phrase { font-size:30px; color:#a33d33; }
.landing-body .rotating-line { max-width:370px; }
.landing-body .motion-toggle { background:#fff8ed94; border-color:#bfa085; color:#884838; }
.landing-body .city-hero .trust-list { font-size:10px; color:#775a48; }
.dragon-scene { position:absolute; z-index:0; inset:0; margin:0; }
.dragon-scene>img { width:100%; height:100%; object-fit:contain; object-position:bottom right; padding-top:50px; }
.dragon-scene::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#fbf0e3 0%,#fbf0e3f5 23%,#fbf0e3a1 39%,#fbf0e300 56%),linear-gradient(0deg,#fbf1e6 0%,transparent 20%); pointer-events:none; }
.dragon-scene figcaption { position:absolute; z-index:1; right:6%; bottom:85px; display:flex; gap:15px; align-items:center; padding:16px 20px; max-width:400px; background:#fff9eddb; backdrop-filter:blur(12px); border:1px solid #ffffffc9; border-radius:18px; box-shadow:0 8px 30px #8d46201a; }
.dragon-scene figcaption>[lang] { font-size:24px; color:#a3523c; white-space:nowrap; font-family:var(--font-hanzi); }
.dragon-scene figcaption>span+span { font-size:11px; color:#775139; border-left:1px solid #dcc3a7; padding-left:15px; }
.dragon-scene figcaption small { display:block; font-size:7px; letter-spacing:.07em; margin-top:5px; color:#9e7858; }
.discovery-dock { position:relative; z-index:3; display:grid; grid-template-columns:.85fr repeat(3,1fr); gap:0; max-width:1200px; margin:-48px auto 0; width:calc(100% - 110px); padding:24px 28px; border-radius:22px; border:1px solid #fff; background:#fffdf6ef; box-shadow:0 14px 35px #8b4e2712; backdrop-filter:blur(16px); }
.discovery-dock>div { padding-right:20px; }
.dock-label { font-size:8px; letter-spacing:.14em; color:#a57252; display:block; margin-bottom:8px; }
.discovery-dock>div>strong { font:500 20px/1.3 var(--font-display); color:#5b372b; }
.discovery-dock>a { display:flex; align-items:center; gap:12px; padding:8px 18px; text-decoration:none; border-left:1px solid #ede0d0; color:#754634; transition:background .2s; }
.discovery-dock>a:hover { background:#f5e8d9; border-radius:12px; }
.discovery-dock>a>span:last-child { margin-left:auto; }
.dock-icon { flex-shrink:0; display:grid; place-items:center; width:37px; height:42px; border:1px solid #d6b491; border-radius:12px 12px 4px 4px; font:22px var(--font-hanzi); color:#a04c37; background:#f9eddb; }
.discovery-dock small { display:block; font-size:7px; letter-spacing:.06em; color:#79583f; margin-bottom:6px; }
.discovery-dock a strong { display:block; font-size:12px; font-weight:500; }
.landing-body .city-strip { max-width:1160px; margin:34px auto 0; width:calc(100% - 110px); border:0; padding:15px 0 25px; color:#8c705b; }
.landing-body .city-strip>span { font-size:24px; color:#a78050; }
.landing-body .city-strip p { font-size:12px; }
.landing-body .city-strip .text-link { color:#98533e; font-size:11px; }
.landing-body .section { max-width:1280px; width:calc(100% - 48px); margin-inline:auto; padding:70px 40px; }
.landing-body .why-mandarin { background:#f4eddf; border:1px solid #ecdfcc; border-radius:30px; }
.landing-body .tutor-preview-section { border-radius:30px; background:#f0eade; }
.landing-body .section h2,.landing-body .price-section h2 { color:#50362b; }
.landing-body .eyebrow { color:#874c32; letter-spacing:.12em; }
.journey-facts { display:grid; grid-template-columns:1fr 1fr 1.3fr 1.7fr; gap:20px; padding:0 0 48px; margin-bottom:48px; border-bottom:1px solid #e9ddcf; }
.journey-facts>div>strong { font:500 44px/1.2 var(--font-display); color:#9c4134; letter-spacing:-.04em; }
.journey-facts>div>strong>span { font:11px var(--font-body); margin-left:6px; color:#72533d; }
.journey-facts>div>p { font-size:11px; color:#705b4b; margin:10px 0 0; }
.journey-facts>p { border-left:1px solid #e7d9c6; padding-left:30px; align-self:center; font-size:13px; line-height:1.9; color:#72533d; margin:0; }
.landing-body .why-sources summary { color:#515c4a; }
.journey-facts>p>strong { color:#6b4834; font-weight:500; }
.landing-body .why-grid { gap:18px; }
.landing-body .why-grid article { padding:29px; border:1px solid #ebddcb; background:#f5ead9; border-radius:22px; position:relative; overflow:hidden; }
.landing-body .why-grid article:nth-child(2) { background:#f6e1d5; }
.landing-body .why-grid article:nth-child(3) { background:#e9eee6; }
.landing-body .why-grid article::after { content:'语'; position:absolute; right:-7px; bottom:-28px; font:130px var(--font-hanzi); color:#98633c0d; pointer-events:none; }
.landing-body .why-grid h3 { position:relative; font-size:21px; margin:22px 0 13px; color:#65422f; }
.landing-body .why-grid p { font-size:13px; }
.landing-body .why-goal { font-size:10px; border-top:1px solid #b48c632c; }
.landing-body .why-start { border-radius:16px; border:1px solid #e9ddcd; background:#fffdf7; padding:23px 28px; }
.landing-body .lesson-preview { position:relative; gap:70px; background:radial-gradient(ellipse at 0 50%,#efe1cc85,transparent 55%); border-radius:32px; }
.landing-body .lesson-preview .hero-card { border:1px solid #ddc5a9; border-radius:24px; box-shadow:0 20px 55px #78522b0d; transform:rotate(1deg); }
.landing-body .sample-top { background:#f3e6d1; border-color:#e6d2b6; color:#53564e; }
.landing-body .sample-steps { background:#fbf5e8; }
.landing-body .path-grid { gap:18px; }
.landing-body .path-card { border:1px solid #ead9c5; border-radius:22px; background:#fffaf0; overflow:hidden; }
.landing-body .path-card:nth-child(2) { background:#f7e9dc; }
.landing-body .path-card:nth-child(3) { background:#eeeee2; }
.landing-body .path-card.dark { background:#7b342e; color:#fff8e9; border-color:#7b342e; }
.landing-body .path-card.dark :is(h3,p,li,.week,.level-badge) { color:#fff1d9; }
.landing-body .path-card .level-badge { color:#84552e; }
.landing-body .features { border-radius:32px; background:#f3eadc; padding-inline:40px; }
.landing-body .feature-grid { gap:18px; }
.landing-body .feature-grid article { padding:25px; border:0; background:#fffaf1; border-radius:20px; }
.landing-body .feature-grid article>span { color:#a34b37; background:#f3dfc4; width:53px; height:53px; display:grid; place-items:center; border-radius:16px; }
.landing-body .feature-grid h3 { font-size:19px; line-height:1.5; }
.landing-body .coach-card,.landing-body .price-card { border-radius:24px; border-color:#e4d1b9; background:#fffaf2; box-shadow:0 12px 45px #8b593010; }
.landing-body .price-card { border-top:5px solid #ad543d; }
.landing-body .price-card,.landing-body .price-card :is(.price,p,li,small) { color:#72533d; }
.landing-body .price-card>span { color:#84552e; }
.landing-body .price-card .price { color:#9d4934; }
.landing-body .price-card .button { background:#a44035; color:#fff7e9; }
.landing-body .price-card li::before { color:#b58049; }
.landing-body .motion-toggle[hidden] { display:none; }
.landing-body .faq-list details { background:#fffdf8; border:1px solid #e9ddcc; border-radius:14px; margin-bottom:10px; padding:4px 19px; }
.landing-body .landing-next,.landing-body .final-invitation { background:linear-gradient(90deg,#f5e5d3 0%,#f5e5d3f0 45%,#f5e5d333 100%),url('images/landing/dragon-clouds-v1.png') right 44%/cover; border:1px solid #e5cdb3; border-radius:28px; padding:40px; }
.landing-body .landing-next h2,.landing-body .final-invitation h2 { max-width:550px; color:#783c2e; }
.landing-body footer { border-top:1px solid #e6d4be; max-width:1280px; margin:35px auto 0; color:#705846; }
/* Pricing carries the same world; all plan limits and payment status stay explicit. */
.price-page .price-hero { margin-top:34px; padding:48px; background:radial-gradient(ellipse at 0 20%,#f5e6ce,transparent 70%),#fbf4e9; border:1px solid #ecddc8; border-radius:30px; gap:55px; }
.price-page .price-hero h1 { color:#53382b; }
.price-page .price-hero h1 em { color:#a74a36; }
.price-page .price-lead { font-size:14px; color:#846a56; }
.price-page .city-ticket { display:flex; flex-direction:column; position:relative; padding:0; border:1px solid #e6d1b2; border-radius:20px; overflow:hidden; background:#fff9ed; }
.price-page .city-ticket img { width:100%; height:255px; object-fit:cover; object-position:right 34%; border-radius:0; }
.price-page .city-ticket>div { position:absolute; bottom:0; left:0; right:0; padding:17px 22px; background:linear-gradient(0deg,#fff5e4f5,#fff5e4d9,transparent); }
.price-page .city-ticket>div>[lang] { color:#9c4b32; font-size:23px; }
.price-page .city-ticket p { color:#6c4f35; }
.price-page .program-pass { border-radius:24px; background:#783a30; color:#fff5e5; border:1px solid #d8b789; box-shadow:0 18px 40px #9c643016; }
.price-page .pass-stamp { color:#edc796; border-color:#cb9d64; border-radius:10px; }
.price-page .price-facts { border:1px solid #e6d5bd; border-radius:20px; background:#f8eddd; margin-top:28px; padding:26px; }
.price-page .price-facts strong { color:#9c4b35; }
.price-page .included-item,.price-page .level-summary-grid>article { border-radius:22px; background:#fffaf1; border:1px solid #e9d7bd; padding:27px; }
.price-page .readiness-section { background:#7e3931; color:#f9ead1; border-radius:32px; max-width:1280px; margin-inline:auto; }
.price-page .readiness-section :is(h2,h3,p,.eyebrow,.text-link) { color:#fff0da; }
.price-page .readiness-steps li { border-color:#ffffff25; }
.price-page .readiness-steps li>span { color:#f4d49c; }
.price-page .stories-empty { border-radius:20px; border:1px dashed #d6b98f; background:#fbf3e7; }
/* Sign-in: illustrative welcome next to a quiet, readable form. */
.login-body { background:#f4eadc; padding:18px; }
.login-body .login-shell { max-width:1440px; margin:auto; border:1px solid #e5d2b9; border-radius:28px; overflow:hidden; min-height:calc(100vh - 36px); }
.login-body .login-brand-panel { background:#f7e8d5; color:#663d2c; position:relative; overflow:hidden; padding:38px 46px 290px; gap:70px; justify-content:flex-start; }
.login-body .login-brand-panel::before,.login-body .login-brand-panel::after { display:none; }
.login-body .login-brand-panel .brand { color:#763c2c; position:relative; z-index:2; }
.login-body .login-brand-panel .brand-mark { background:#a14635; color:#fff7e8; border-radius:10px; }
.login-body .login-welcome-copy h1 { color:#6d3528; font-size:43px; }
.login-body .login-welcome-copy .eyebrow { color:#a76b43; font-size:9px; }
.login-body #login-course-intro { color:#82634b; font-size:13px; }
.login-body .login-benefits { margin-top:22px; }
.login-body .login-benefits li { border-color:#bc90652c; padding:10px 0; }
.login-body .login-benefits strong { color:#6b4631; }
.login-body .login-benefits p { color:#8a6b51; font-size:11px; }
.login-body .login-benefits li>span { color:#ac6d3e; }
.login-body .login-city-note { position:absolute; inset:auto 0 0; height:290px; display:block; }
.login-body .login-city-note img { width:100%; height:100%; object-fit:cover; object-position:right 41%; border-radius:0; mask-image:linear-gradient(transparent,#000 18%); }
.login-body .login-city-note blockquote { position:absolute; bottom:15px; left:30px; padding:14px 19px; background:#fff8e6df; backdrop-filter:blur(8px); border-radius:14px; color:#9b5135; font-size:20px; }
.login-body .login-city-note blockquote small { color:#8a6749; }
.login-body .login-form-panel { background:#fffcf6; }
.login-body .login-card input { border:1px solid #dcc6ac; border-radius:10px; padding:13px; background:#fffaf1; }
.login-body .login-card .password-field input { padding-right:75px; }
.login-body .login-card :is(.button,.login-methods button) { border-radius:10px; }
.login-body .login-card h2 { color:#5e362a; }
.login-body .login-card:before { color:#a96a40; }
/* Course and assessment pages inherit a restrained version, never image-backed questions. */
.placement-body,.hsk3-body,.secure-body { background:#faf4ea; }
.placement-body .placement-header,.hsk3-body .h3-header,.secure-body .secure-header { background:#fffaf2; border-color:#e4d2b9; }
.placement-body .placement-page-heading { padding:27px 190px 27px 29px; background:linear-gradient(90deg,#f8e9d5 55%,#f8e9d580 72%,transparent),url('images/landing/dragon-clouds-v1.png') right center/cover; border:1px solid #e8d2b4; border-radius:22px; }
.placement-body .placement-page-heading h1 { color:#6c3b2c; }
.placement-body #placement-workspace { border-radius:20px; }
.placement-body .onboarding-steps [aria-current] { color:#994c32; }
.hsk3-body .h3-sidebar { margin:16px 0 16px 16px; border:0; border-radius:22px; background:#7b352e; color:#fff2dc; }
.hsk3-body .h3-sidebar :is(.eyebrow,small,.h3-draft,.local-note,a) { color:#edcdb3; }
.hsk3-body .h3-sidebar nav a:hover,.hsk3-body .h3-sidebar nav a[aria-current] { background:#fff4e5; color:#7b352e; border-radius:10px; }
.hsk3-body .h3-course-mark>span { color:#edc48e; border-color:#c79161; border-radius:8px; }
.hsk3-body .h3-hero { background:linear-gradient(90deg,#fff8ed 50%,#fff8ed99 74%,#fff8ed20),url('images/landing/dragon-clouds-v1.png') right center/cover; border-color:#e1c39b; }
.hsk3-body .h3-seal { visibility:hidden; }
.hsk3-body .h3-card,.hsk3-body .h3-metrics>div,.hsk3-body .h3-chapter { border-radius:18px; border-color:#e6d5be; }
.secure-body { color:#51372c; }
.secure-body .secure-shell>h1 { color:#783e2e; }
.secure-body .secure-header { position:relative; overflow:hidden; }
.secure-body .secure-header::before { content:''; position:absolute; pointer-events:none; right:15%; top:-45px; width:180px; height:160px; background:url('images/landing/dragon-clouds-v1.png') 70% 25%/cover; opacity:.2; mask-image:radial-gradient(ellipse,#000,transparent 70%); }
.secure-body .secure-header>* { position:relative; }
.secure-body .secure-card { border-radius:20px; background:#fffdf8; border-color:#e5d1b6; }
.secure-body .secure-options [aria-pressed=true] { background:#f2deca; border-color:#a46a42; }
.secure-body .secure-pill { background:#f2e1ca; color:#8b5333; }
.learn-body:not(.placement-body) .sidebar-program { position:relative; overflow:hidden; }
.learn-body:not(.placement-body) .sidebar-program::after { content:''; position:absolute; pointer-events:none; width:110px; height:110px; right:-25px; bottom:-25px; background:url('images/landing/dragon-clouds-v1.png') 67% 20%/cover; opacity:.12; mask-image:radial-gradient(#000,transparent 72%); }
.landing-body :focus-visible,.login-body :focus-visible { outline:3px solid #b77538; outline-offset:4px; }
@media(max-width:1100px) {
  .landing-body .city-hero .hero-copy { max-width:460px; }
  .dragon-scene>img { object-position:60% center; }
  .dragon-scene figcaption { right:4%; bottom:75px; max-width:310px; padding:14px; }
  .dragon-scene figcaption>[lang] { font-size:21px; }
  .discovery-dock { padding:22px; width:calc(100% - 70px); }
  .discovery-dock>a { padding-inline:12px; gap:8px; }
  .dock-icon { display:none; }
  .price-page .price-hero { padding:32px; gap:30px; }
  .login-body .login-brand-panel { padding-inline:30px; }
  .login-body .login-welcome-copy h1 { font-size:36px; }
}
@media(max-width:860px) {
  .landing-body .site-header { width:calc(100% - 40px); margin-top:16px; height:75px; padding:12px 20px; border-radius:20px; gap:15px; }
  .landing-body .site-header nav { top:calc(100% + 8px); left:0; right:0; padding:18px 22px; background:#fffaf1; border:1px solid #e3cbb0; border-radius:18px; box-shadow:0 12px 28px #7541251c; }
  .landing-body .city-hero { padding:95px 6% 60px; min-height:920px; }
  .landing-body .city-hero .hero-copy { max-width:520px; padding-top:15px; }
  .dragon-scene>img { position:absolute; bottom:0; height:540px; padding:0; object-fit:cover; object-position:right center; }
  .dragon-scene::after { background:linear-gradient(0deg,#fbf1e6 0%,transparent 9%,transparent 33%,#f9eddf 58%); }
  .dragon-scene figcaption { bottom:65px; }
  .discovery-dock { width:calc(100% - 60px); grid-template-columns:repeat(3,1fr); padding:20px 12px; }
  .discovery-dock>div { display:none; }
  .discovery-dock>a:first-of-type { border-left:0; }
  .journey-facts { grid-template-columns:repeat(3,1fr); }
  .journey-facts>p { grid-column:1/-1; border:0; padding:0; }
  .landing-body .lesson-preview { gap:35px; }
  .price-page .price-hero { width:calc(100% - 40px); }
}
@media(max-width:800px) {
  .login-body { padding:12px; }
  .login-body .login-shell { border-radius:22px; min-height:calc(100vh - 24px); }
  .login-body .login-form-panel { min-height:calc(100vh - 24px); position:relative; overflow:hidden; padding-top:140px; background:linear-gradient(0deg,#fffcf6 78%,#fffcf600),url('images/landing/dragon-clouds-v1.png') right top/100% auto no-repeat,#fffcf6; }
  .login-body .login-card { position:relative; }
  .login-body .login-mobile-welcome { color:#956344; border-color:#bd8751; }
  .login-body .mobile-mark { border-radius:10px; }
}
@media(max-width:600px) {
  .landing-body .site-header { width:calc(100% - 28px); padding:10px 13px; gap:8px; height:70px; }
  .landing-body .site-header .brand { font-size:16px; gap:8px; }
  .landing-body .site-header .brand-mark { width:30px; height:34px; font-size:22px; }
  .landing-body .site-header>.button { font-size:10px; padding:10px 12px; min-height:40px; }
  .landing-body .landing-menu-toggle { font-size:11px; margin-left:auto; padding:6px; }
  .landing-body .city-hero { width:calc(100% - 16px); border-radius:26px; padding:95px 22px 50px; min-height:915px; }
  .landing-body .city-hero h1 { font-size:43px; }
  .landing-body .hero-phrase { font-size:27px; }
  .landing-body .city-hero .city-eyebrow { font-size:8px; max-width:260px; margin-bottom:16px; }
  .landing-body .city-hero .lead { font-size:13px; line-height:1.85; margin-block:18px 23px; }
  .landing-body .city-hero .hero-actions { gap:16px; }
  .landing-body .city-hero .trust-list { font-size:9px; gap:9px 14px; }
  .dragon-scene>img { height:405px; }
  .dragon-scene::after { background:linear-gradient(0deg,#fbf1e6 0%,transparent 12%,transparent 29%,#f9eddf 44%); }
  .dragon-scene figcaption { left:20px; right:20px; bottom:55px; max-width:none; padding:13px; }
  .dragon-scene figcaption>span+span { font-size:9px; padding-left:11px; }
  .dragon-scene figcaption>[lang] { font-size:19px; }
  .dragon-scene figcaption small { font-size:6px; }
  .discovery-dock { width:calc(100% - 40px); padding:12px 10px; border-radius:17px; margin-top:-25px; gap:0; }
  .discovery-dock>a { padding:8px; display:block; }
  .discovery-dock a strong { font-size:10px; line-height:1.5; }
  .discovery-dock small { font-size:6px; line-height:1.6; }
  .discovery-dock>a>span:last-child { display:none; }
  .landing-body .city-strip { width:auto; margin:24px; gap:12px; }
  .landing-body .section { width:calc(100% - 24px); padding:44px 20px; }
  .journey-facts { gap:15px; margin-bottom:32px; padding-bottom:28px; }
  .journey-facts>div>strong { font-size:32px; }
  .journey-facts>div>p { font-size:9px; line-height:1.7; }
  .journey-facts>p { font-size:12px; margin-top:10px; }
  .landing-body .why-grid article { padding:24px; }
  .landing-body .why-start { padding:22px; }
  .landing-body .features { margin:12px; padding-inline:20px; border-radius:25px; }
  .landing-body .feature-grid article { padding:23px; }
  .landing-body .lesson-preview .hero-card { transform:none; }
  .landing-body .landing-next,.landing-body .final-invitation { padding:28px; margin-inline:20px; background:linear-gradient(90deg,#f5e5d3f5,#f5e5d3d9),url('images/landing/dragon-clouds-v1.png') right center/cover; }
  .price-page .price-hero { padding:27px 22px; width:calc(100% - 28px); border-radius:24px; margin-top:24px; gap:30px; }
  .price-page .price-hero h1 { font-size:42px; }
  .price-page .price-lead { font-size:13px; }
  .price-page .city-ticket img { height:240px; }
  .price-page .program-pass { padding:26px 22px; }
  .price-page .price-facts { padding:20px; }
  .price-page .readiness-section { margin-inline:12px; border-radius:24px; }
  .placement-body .placement-page-heading { padding:25px 22px 130px; background:linear-gradient(180deg,#f8e9d5 46%,#f8e9d580 75%,transparent),url('images/landing/dragon-clouds-v1.png') right bottom/cover; }
  .placement-body .placement-page-heading h1 { font-size:29px; }
  .hsk3-body .h3-sidebar { margin:0; border-radius:0 0 22px 22px; }
  .hsk3-body .h3-hero { background:linear-gradient(90deg,#fff8edfa,#fff8eddf),url('images/landing/dragon-clouds-v1.png') right center/cover; }
}
@media(prefers-reduced-motion:reduce) { .discovery-dock>a { transition:none; } }
/* Keep artwork below, rather than behind, every line of mobile hero copy. */
@media(max-width:860px) {
  .landing-body .city-hero { display:flex; flex-direction:column; align-items:stretch; min-height:0; padding-bottom:0; }
  .landing-body .city-hero .hero-copy { padding-bottom:28px; }
  .dragon-scene { position:relative; inset:auto; flex:none; width:calc(100% + 12vw); height:440px; margin:0 -6vw; }
  .dragon-scene>img { height:100%; }
  .dragon-scene::after { background:linear-gradient(0deg,#fbf1e6 0%,transparent 17%,transparent 78%,#f9eddf 100%); }
}
@media(max-width:600px) {
  .dragon-scene { width:calc(100% + 44px); margin:0 -22px; height:370px; }
  .dragon-scene figcaption { bottom:40px; }
  .landing-body .hero-phrase { min-height:2.6em; }
}

/* Persistent navigation, with space for anchor headings beneath it. */
html:has(.landing-body) { scroll-padding-top:125px; }
.landing-body .site-header { position:sticky; top:14px; z-index:80; backdrop-filter:blur(18px); transition:background .25s ease,box-shadow .25s ease,border-color .25s ease; }
.landing-body .site-header.is-scrolled { background:#fffdf6f5; border-color:#dcc4a6; box-shadow:0 10px 30px #663b2626; }
.landing-body .site-header nav { max-height:calc(100dvh - 120px); overflow-y:auto; overscroll-behavior:contain; }
.landing-body .site-header nav a { position:relative; }
.landing-body .site-header nav a::after { content:''; position:absolute; left:0; right:0; bottom:5px; height:1px; background:#b26043; transform:scaleX(0); transform-origin:left; transition:transform .22s ease; }
.landing-body .site-header nav a:hover::after,.landing-body .site-header nav a:focus-visible::after { transform:scaleX(1); }
.landing-body :is(.path-card,.why-grid article,.feature-grid article,.included-item,.level-summary-grid article) { transition:translate .25s ease,box-shadow .25s ease,border-color .25s ease; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .landing-body:not(.motion-paused) :is(.path-card,.why-grid article,.feature-grid article,.included-item,.level-summary-grid article):hover { translate:0 -5px; box-shadow:0 14px 28px #8e55321a; border-color:#c99b69; }
}
.landing-body.motion-ready .dragon-scene>img { animation:dragon-drift 9s ease-in-out infinite; transform-origin:75% 60%; }
.landing-body.motion-ready .dragon-scene figcaption { animation:cloud-note-drift 7s ease-in-out infinite; }
.landing-body.motion-ready .city-ticket img { animation:dragon-ticket-drift 12s ease-in-out infinite; }
.landing-body.motion-paused :is(.dragon-scene>img,.dragon-scene figcaption,.city-ticket img),
.landing-body.motion-inactive :is(.dragon-scene>img,.dragon-scene figcaption,.city-ticket img) { animation-play-state:paused; }
.page-motion-toggle { position:fixed; z-index:70; right:20px; bottom:18px; min-height:38px; padding:9px 14px; border:1px solid #dfc8ac; border-radius:24px; background:#fffaf0f2; backdrop-filter:blur(12px); color:#804a34; box-shadow:0 4px 18px #7c472417; font:500 10px/1.5 var(--font-body); cursor:pointer; }
.page-motion-toggle:hover { background:#f4e6d4; }
.page-motion-toggle[hidden] { display:none; }
@keyframes dragon-drift { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-7px) scale(1.012); } }
@keyframes cloud-note-drift { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@keyframes dragon-ticket-drift { 0%,100% { transform:scale(1); } 50% { transform:scale(1.035); } }
@media(max-width:860px) {
  html:has(.landing-body) { scroll-padding-top:110px; }
  .landing-body .site-header { top:10px; }
  .page-motion-toggle { right:12px; bottom:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .landing-body :is(.dragon-scene>img,.dragon-scene figcaption,.city-ticket img) { animation:none!important; transform:none; }
  .landing-body .site-header,.landing-body .site-header nav a::after { transition:none; }
}

/* Surface polish: remove legacy table/grid rules behind rounded public cards.
   Form controls, focus outlines and the learning workspace are not affected. */
.landing-body { --surface-shadow:0 8px 30px #603b2210; --surface-radius:24px; }
.landing-body :is(.path-grid,.feature-grid,.why-grid,.included-grid,.level-summary-grid) { border:0; gap:24px; }
.landing-body :is(.why-mandarin,.features,.tutor-preview-section,.landing-next,.final-invitation) { border:0; }
.landing-body :is(.path-card,.why-grid article,.feature-grid article),
.price-page :is(.included-item,.level-summary-grid>article) { border:0; border-radius:var(--surface-radius); box-shadow:var(--surface-shadow); }
.landing-body .path-card { padding:30px; }
.landing-body .why-grid article { padding:30px; display:flex; flex-direction:column; }
.landing-body .why-grid h3 { line-height:1.4; }
.landing-body .feature-grid article { padding:28px; }
.landing-body .why-goal { border:0; margin-top:auto; padding-top:24px; min-height:61px; }
.landing-body .why-start { border:0; border-radius:20px; box-shadow:0 5px 22px #603b2208; margin-top:28px; }
.landing-body .journey-facts { border:0; padding-bottom:28px; margin-bottom:40px; }
.landing-body .journey-facts>p { border:0; }
.landing-body :is(.lesson-preview .hero-card,.coach-card,.price-card) { border:0; border-radius:var(--surface-radius); box-shadow:0 15px 45px #603b2212; }
.landing-body .lesson-preview .hero-card { transform:none; }
.landing-body :is(.sample-top,.sample-steps,.sample-explanation,.coach-head,.price-card ul) { border:0; }
.landing-body .sample-explanation { background:#f5efe4; padding:20px; border-radius:14px; }
.landing-body .sample-steps { padding-block:22px; }
.landing-body .coach-head { padding-bottom:8px; }
.landing-body .price-card { padding:36px; }
.landing-body .faq-list details { border:0; border-radius:18px; box-shadow:0 4px 18px #603b2209; padding:6px 24px; margin-bottom:14px; }
.landing-body .faq-list { border:0; }
.landing-body .faq-list details[open] { background:#fffaf1; box-shadow:0 8px 26px #603b2210; }
.landing-body .faq-list summary { padding-block:19px; line-height:1.6; }
.landing-body footer { border:0; padding-top:44px; padding-bottom:50px; }
.landing-body .discovery-dock { border:0; gap:10px; }
.landing-body .discovery-dock>a { border:0; border-radius:14px; }
.landing-body .dock-icon { border:0; border-radius:12px; }
.landing-body .dragon-scene figcaption { border:0; box-shadow:0 10px 28px #75422012; }
.landing-body .dragon-scene figcaption>span+span { border:0; }
.price-page .price-hero { border:0; box-shadow:0 10px 36px #603b2208; }
.price-page .program-pass { border:0; border-radius:28px; box-shadow:0 20px 48px #6f302924; }
.price-page :is(.pass-top,.pass-divider) { border:0; }
.price-page .pass-divider { margin:28px 0 0; height:0; }
.price-page .pass-divider::before,.price-page .pass-divider::after { display:none; }
.price-page .pass-top { padding-bottom:4px; }
.price-page .pass-stamp { border:0; background:#ffffff0c; border-radius:10px; }
.price-page .city-ticket { border:0; box-shadow:var(--surface-shadow); }
.price-page .price-facts { border:0; gap:24px; padding:30px; border-radius:24px; background:#f6ecde; }
.price-page .price-facts>div:nth-child(n) { border:0; padding:0; }
.price-page .included-grid { align-items:stretch; }
.price-page .included-item { padding:30px; }
.price-page :is(.mini-lesson,.audio-illustration,.review-note) { border:0; border-radius:16px; padding:22px; margin-top:24px; }
.price-page .mini-lesson { background:#f4eee4; }
.price-page .mini-lesson small { border:0; padding-top:6px; }
.price-page .review-note { background:#f5eadd; }
.price-page .included-boundary { border:0; padding:0; margin-top:24px; max-width:90ch; }
.price-page .readiness-section { border:0; margin-block:20px; }
.price-page .readiness-steps { display:grid; gap:16px; }
.price-page .readiness-steps li { border:0; border-radius:18px; background:#ffffff08; padding:22px 24px; }
.price-page .stories-section { background:transparent; }
.price-page :is(.stories-empty,.story-card) { border:0; border-radius:24px; background:#fffaf1; box-shadow:var(--surface-shadow); }
.price-page .level-summary-grid { border:0; }
.price-page .level-summary-grid>article { padding:30px; }
.price-page .level-summary-grid .level-status { border:0; background:#f1e5d2; border-radius:20px; padding:6px 11px; }
.price-page .level-upcoming .level-status { color:#53564e; }
.price-page .tiny-rule { display:none; }
.price-page .final-invitation .eyebrow { color:#9a593d; }
.price-page .final-invitation p:not(.eyebrow) { color:#72513c; }
@media(min-width:861px) {
  .landing-body .why-grid h3 { min-height:2.8em; }
  .price-page .included-item>p { min-height:5.7em; }
}
@media(max-width:860px) {
  .landing-body :is(.path-grid,.feature-grid,.why-grid,.included-grid,.level-summary-grid) { gap:18px; }
  .landing-body .discovery-dock { gap:4px; }
}
@media(max-width:600px) {
  .landing-body :is(.path-card,.why-grid article,.feature-grid article,.price-card),
  .price-page :is(.included-item,.level-summary-grid>article) { padding:24px; border-radius:20px; }
  .landing-body .faq-list details { padding:4px 19px; }
  .landing-body .journey-facts { margin-bottom:28px; padding-bottom:10px; }
  .price-page .price-facts { padding:24px; gap:24px 18px; }
  .price-page .readiness-steps li { padding:20px; }
}