@import url('./mandarinbench-design-tokens.css');
@import url('./mandarinbench-primitives.css');

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--color-bg)}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-ui-cn);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:color var(--transition-fast) ease,background-color var(--transition-fast) ease,border-color var(--transition-fast) ease}
a:focus-visible,button:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:2px}
::selection{background:var(--selection-bg)}

.mb-landing{max-width:1440px;margin:0 auto;background:var(--color-bg);border-left:var(--border-hairline);border-right:var(--border-hairline)}

/* Nav */
.mb-landing-nav{height:68px;display:flex;align-items:center;gap:var(--space-8);padding:0 var(--space-page-1);border-bottom:var(--border-hairline);position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--color-bg) 94%,transparent);backdrop-filter:blur(12px)}
.mb-landing-brand{display:flex;align-items:center;gap:var(--space-3);min-width:max-content}
.mb-landing-brand-mark{width:30px;height:30px;display:grid;place-items:center;background:var(--color-accent);color:var(--color-paper);font-family:var(--font-ui-cn);font-size:16px;font-weight:var(--font-weight-medium)}
.mb-landing-wordmark{font-family:var(--font-heading);font-size:21px;font-weight:var(--font-weight-semibold);letter-spacing:.01em}
.mb-landing-links{display:flex;align-items:center;gap:var(--space-6);font-size:15px;color:var(--color-neutral-700)}
.mb-landing-links a:hover,.mb-footer a:hover{color:var(--color-accent)}
.mb-landing-nav-actions{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:var(--space-4)}
.mb-language-switch{display:grid;grid-template-columns:1fr 1fr;border:var(--border-hairline);height:32px}
.mb-language-switch button{appearance:none;border:0;background:transparent;padding:0 var(--space-3);font:500 12px/1 var(--font-latin);color:var(--color-neutral-700);cursor:pointer;border-right:var(--border-hairline)}
.mb-language-switch button:last-child{border-right:0}
.mb-language-switch button.is-active{background:var(--color-accent);color:var(--color-paper)}
.mb-landing-primary,.mb-landing-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--space-6);border:1px solid var(--color-accent);font-family:var(--font-heading);font-size:16px;font-weight:var(--font-weight-semibold);letter-spacing:.01em;cursor:pointer}
.mb-landing-primary{background:var(--color-accent);color:var(--color-paper)}
.mb-landing-primary:hover{background:var(--color-accent-600);border-color:var(--color-accent-600)}
.mb-landing-primary:active{background:var(--color-accent-700);border-color:var(--color-accent-700)}
.mb-landing-secondary{background:transparent;color:var(--color-text);border-color:var(--color-divider)}
.mb-landing-secondary:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.mb-landing-secondary:active{background:color-mix(in srgb,var(--color-text) 14%,transparent)}

/* Hero */
.mb-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-page-2);align-items:center;padding:var(--space-page-2-4) var(--space-page-1);border-bottom:var(--border-hairline)}
.mb-kicker,.mb-section-kicker,.mb-step-label,.mb-card-kicker{font-family:var(--font-heading);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:var(--tracking-kicker)}
.mb-kicker{font-size:12px;color:var(--color-accent-700);margin-bottom:var(--space-4)}
.mb-hero h1{margin:0;font-family:var(--font-heading);font-size:var(--type-landing-xl);line-height:1.06;letter-spacing:-.01em;font-weight:var(--font-weight-semibold);max-width:640px}
.mb-hero-copy{margin:var(--space-6) 0 0;max-width:520px;font-family:var(--font-ui-cn);font-size:17px;line-height:1.65;color:var(--color-neutral-800)}
.mb-hero-actions{display:flex;gap:var(--space-4);margin-top:var(--space-6);flex-wrap:wrap}
.mb-stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8);margin-top:40.8px;padding-top:var(--space-6);border-top:var(--border-hairline);max-width:560px}
.mb-stat strong{display:block;font-family:var(--font-heading);font-size:34px;line-height:1;font-weight:var(--font-weight-semibold)}
.mb-stat span{display:block;margin-top:var(--space-2);font-size:12px;color:var(--color-neutral-700)}

/* Blueprint frame */
.mb-blueprint{position:relative;border:var(--border-hairline);background:transparent}
.mb-reg{position:absolute;width:11px;height:11px;z-index:2;pointer-events:none}
.mb-reg::before,.mb-reg::after{content:"";position:absolute;background:color-mix(in srgb,var(--color-text) 55%,transparent)}
.mb-reg::before{width:1px;height:11px;left:5px;top:0}.mb-reg::after{height:1px;width:11px;left:0;top:5px}
.mb-reg.tl{left:-6px;top:-6px}.mb-reg.tr{right:-6px;top:-6px}.mb-reg.bl{left:-6px;bottom:-6px}.mb-reg.br{right:-6px;bottom:-6px}

/* Real worksheet example */
.mb-worksheet-frame{padding:var(--space-8);background:var(--color-surface)}
.mb-worksheet-sheet{width:min(100%,620px);margin:0 auto;background:var(--color-paper);padding:40.8px 44px;box-shadow:var(--shadow-lg);font-family:var(--font-paper-cn);color:var(--color-text)}
.mb-paper-head{display:flex;justify-content:space-between;gap:var(--space-6);align-items:flex-start;border-bottom:1.5px solid var(--color-text);padding-bottom:var(--space-4)}
.mb-paper-title h3{margin:0;font-size:26px;line-height:1.15;font-weight:600}.mb-paper-title p{margin:var(--space-1) 0 0;font-family:var(--font-latin);font-size:11px;color:var(--color-neutral-600)}
.mb-paper-meta{font-family:var(--font-latin);font-size:10px;line-height:1.6;text-align:right;color:var(--color-neutral-600)}
.mb-paper-block{padding:var(--space-6) 0;border-bottom:1px solid var(--color-neutral-300)}
.mb-paper-block:last-of-type{border-bottom:0}
.mb-paper-block-head{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);font-size:15px;font-weight:600}.mb-paper-block-head span{font-family:var(--font-heading);font-size:11px;color:var(--color-accent-700);letter-spacing:.08em}
.mb-vocab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3) var(--space-6)}
.mb-vocab-item{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-3);align-items:baseline}.mb-vocab-hanzi{font-size:21px}.mb-vocab-detail{font-family:var(--font-latin);font-size:10px;color:var(--color-neutral-700);line-height:1.45}.mb-vocab-detail b{font-weight:500;color:var(--color-text)}
.mb-match-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);align-items:center;font-size:13px}.mb-match-grid .line{width:48px;border-top:1px solid var(--color-neutral-400)}
.mb-tianzi-caption{margin-top:var(--space-6);font:500 11px/1 var(--font-latin);color:var(--color-neutral-600)}
.mb-tianzi-row{display:flex;gap:var(--space-3);margin-top:var(--space-3)}
.mb-tianzi{position:relative;width:64px;height:64px;border:1px solid var(--color-neutral-400);display:grid;place-items:center;font-family:var(--font-paper-cn);font-size:34px;color:var(--color-neutral-400)}
.mb-tianzi::before,.mb-tianzi::after{content:"";position:absolute;background:var(--color-neutral-300)}
.mb-tianzi::before{left:50%;top:0;width:1px;height:100%}.mb-tianzi::after{left:0;top:50%;height:1px;width:100%}

/* Three-step band */
.mb-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40.8px;padding:40.8px var(--space-page-1);background:var(--color-accent-900);color:var(--color-bg)}
.mb-step{min-width:0}
.mb-step-label{font-size:12px;color:var(--color-accent-300)}
.mb-step h3{margin:var(--space-3) 0 0;font-family:var(--font-heading);font-size:26px;font-weight:var(--font-weight-semibold)}
.mb-step p{margin:var(--space-3) 0 0;font-size:14px;line-height:1.7;color:var(--color-accent-200)}

/* Question types */
.mb-question-types{padding:var(--space-page-2) var(--space-page-1);border-bottom:var(--border-hairline)}
.mb-section-head{display:flex;align-items:baseline;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-8)}
.mb-section-head h2{margin:0;font-family:var(--font-heading);font-size:38px;line-height:1.1;font-weight:var(--font-weight-semibold)}
.mb-section-head span{font-size:14px;color:var(--color-neutral-700)}
.mb-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6)}
.mb-type-card{min-height:180px;padding:var(--space-6);transition:background-color var(--transition-fast) ease,border-color var(--transition-fast) ease}
.mb-type-card:hover{background:var(--color-accent-100);border-color:var(--color-accent)}
.mb-card-kicker{font-size:10px;color:var(--color-accent);margin-bottom:var(--space-3)}
.mb-type-card h3{margin:0;font-family:var(--font-heading);font-size:20px;font-weight:var(--font-weight-semibold)}
.mb-type-card p{margin:var(--space-3) 0 0;font-size:13px;line-height:1.65;color:color-mix(in srgb,var(--color-text) 80%,transparent)}
.mb-mini-spec{margin-top:var(--space-6);border-top:var(--border-hairline);padding-top:var(--space-3);font:500 10px/1.45 var(--font-latin);color:var(--color-neutral-600)}

/* CTA and footer */
.mb-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-page-1);padding:var(--space-page-2) var(--space-page-1);border-bottom:var(--border-hairline)}
.mb-cta h2{margin:0;font-family:var(--font-heading);font-size:38px;line-height:1.08;font-weight:var(--font-weight-semibold)}
.mb-cta p{margin:var(--space-3) 0 0;font-size:15px;color:var(--color-neutral-800)}
.mb-cta .mb-landing-primary{font-size:17px;min-height:48px;padding:0 var(--space-8);flex:none}
.mb-footer{display:flex;align-items:center;gap:var(--space-6);padding:var(--space-6) var(--space-page-1);font-size:12px;color:var(--color-neutral-600)}
.mb-footer .spacer{margin-left:auto}

@media (max-width:900px){
  .mb-landing-nav{padding:0 var(--space-6)}
  .mb-landing-links{display:none}
  .mb-hero{grid-template-columns:1fr;gap:var(--space-page-1-5);padding:var(--space-page-2) var(--space-6)}
  .mb-hero h1{font-size:44px}
  .mb-worksheet-frame{max-width:720px;margin:0 auto;width:100%}
  .mb-steps{grid-template-columns:1fr;gap:var(--space-page-1);padding:var(--space-page-1-5) var(--space-6)}
  .mb-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mb-question-types,.mb-cta{padding-left:var(--space-6);padding-right:var(--space-6)}
  .mb-cta{align-items:flex-start;flex-direction:column}.mb-cta .mb-landing-primary{align-self:flex-start}
  .mb-footer{padding-left:var(--space-6);padding-right:var(--space-6);flex-wrap:wrap}
}

@media (max-width:620px){
  .mb-landing{border-left:0;border-right:0}
  .mb-landing-nav{height:60px;padding:0 var(--space-6);gap:var(--space-3)}
  .mb-landing-wordmark{font-size:18px}.mb-landing-brand-mark{width:28px;height:28px}
  .mb-landing-nav-actions{margin-left:auto}
  .mb-language-switch{display:grid;height:32px}
  .mb-language-switch button{padding:0 var(--space-2)}
  .mb-hero{padding:var(--space-page-1-5) var(--space-6);gap:var(--space-page-1)}
  .mb-hero h1{font-size:36px}.mb-hero-copy{font-size:15px}.mb-hero-actions{display:grid;grid-template-columns:1fr}.mb-landing-primary,.mb-landing-secondary{width:100%}
  .mb-stat-row{gap:var(--space-4)}.mb-stat strong{font-size:28px}.mb-stat span{font-size:10px}
  .mb-worksheet-frame{padding:var(--space-4)}.mb-worksheet-sheet{padding:var(--space-8) var(--space-6)}
  .mb-vocab-grid{grid-template-columns:1fr}.mb-match-grid{grid-template-columns:1fr auto 1fr}.mb-match-grid .line{width:24px}.mb-tianzi{width:54px;height:54px}
  .mb-steps,.mb-question-types,.mb-cta{padding-left:var(--space-6);padding-right:var(--space-6)}
  .mb-card-grid{grid-template-columns:1fr}.mb-section-head h2,.mb-cta h2{font-size:32px}.mb-type-card{min-height:150px}
  .mb-footer{gap:var(--space-4)}.mb-footer .spacer{display:none;width:100%;margin:0}
}

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