/*
 * Mountain² Workshop · mobile reading layout
 *
 * This is a separate phone composition, not a scaled desktop canvas.
 * It is intentionally loaded only at <=767px.  The desktop/tablet rules in
 * each page remain the source of truth at 768px and above.
 */

@media (max-width: 767px) {
  :root { --mobile-gutter: 15px; --mobile-radius: 18px; }

  html {
    min-width: 0 !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    font-size: 14px;
  }

  *, *::before, *::after { box-sizing: border-box; }
  img, svg, video, canvas { max-width: 100%; }
  button, input, select, textarea { max-width: 100%; font: inherit; }

  h1, h2, h3, h4, p, li, a, span, strong, small {
    min-width: 0;
    max-width: 100%;
  }

  /* Keep Chinese words readable.  Headings balance naturally instead of
     forcing one/two-character orphan lines with overflow-wrap:anywhere. */
  h1, h2, h3, h4 {
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-break: strict;
    text-wrap: balance;
  }
  p, li { word-break: normal !important; overflow-wrap: break-word; }

  .wrap {
    width: min(calc(100% - (var(--mobile-gutter) * 2)), 620px) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  /* Shared public header: compact, tappable, and never part of page flow. */
  .global-site-header {
    inset: 10px 0 auto !important;
    width: 100% !important;
    height: 58px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  .global-site-header .site-header-inner,
  .global-site-header .header-inner,
  .global-site-header .global-inner {
    width: min(calc(100% - 30px), 620px) !important;
    height: 58px !important;
    min-height: 58px !important;
    gap: 8px !important;
  }
  .global-site-header .workshop-brand-top,
  .global-site-header .brand-link,
  .global-site-header .global-brand {
    flex: 0 1 auto !important;
    width: min(132px, 40vw) !important;
  }
  .global-site-header .workshop-brand-top img,
  .global-site-header .brand-logo,
  .global-site-header .global-brand img { width: min(132px, 40vw) !important; height: auto !important; }
  .global-site-header .menu-toggle,
  .global-site-header .global-menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin-left: auto;
    padding: 8px 12px !important;
    border: 1px solid rgba(255,250,240,.28) !important;
    border-radius: 999px !important;
    color: #fffaf0;
    background: rgba(25,23,19,.62);
    cursor: pointer;
    white-space: nowrap;
  }
  .global-site-header .top-links,
  .global-site-header .main-nav,
  .global-site-header .global-nav {
    position: absolute !important;
    top: 60px !important;
    right: 0 !important;
    left: 0 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    border: 1px solid rgba(255,250,240,.18) !important;
    border-radius: 18px !important;
    background: rgba(25,23,19,.97) !important;
    box-shadow: 0 18px 38px rgba(25,23,19,.38);
  }
  .global-site-header .top-links.is-open,
  .global-site-header .main-nav.is-open,
  .global-site-header .global-nav.is-open { display: flex !important; }
  .global-site-header .top-links a,
  .global-site-header .top-links .nav-contact,
  .global-site-header .main-nav a,
  .global-site-header .main-nav .nav-contact,
  .global-site-header .global-nav a,
  .global-site-header .global-nav .nav-contact {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 42px;
    padding: 11px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,250,240,.1) !important;
    border-radius: 0 !important;
    color: rgba(255,250,240,.82) !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    white-space: nowrap;
    text-decoration: none;
    transform: none !important;
  }
  .global-site-header .top-links > :last-child,
  .global-site-header .main-nav > :last-child,
  .global-site-header .global-nav > :last-child { border-bottom: 0 !important; }
  .global-site-header .top-links a:hover,
  .global-site-header .top-links a:focus-visible,
  .global-site-header .top-links [aria-current="page"],
  .global-site-header .main-nav a:hover,
  .global-site-header .main-nav a:focus-visible,
  .global-site-header .main-nav [aria-current="page"],
  .global-site-header .global-nav a:hover,
  .global-site-header .global-nav a:focus-visible,
  .global-site-header .global-nav [aria-current="page"] {
    padding-left: 10px !important;
    border-radius: 8px !important;
    color: #191713 !important;
    background: #efd79f !important;
  }

  /* Chapter rail becomes a wrapped button row, never a hidden horizontal
     scrollbar. */
  .section-nav, .nav {
    position: sticky !important;
    top: 62px !important;
    z-index: 30 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 5px var(--mobile-gutter) !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  .section-nav-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 620px !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }
  .section-nav a, .nav a {
    flex: 0 1 auto !important;
    min-height: 32px;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  /* Independent carousel flow: copy, actions, indicators and proof rail are
     consecutive blocks so the rail cannot cover the buttons. */
  .hero.hero-carousel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .hero.hero-carousel .hero-grid {
    display: block !important;
    width: min(calc(100% - 30px), 620px) !important;
    min-height: 0 !important;
    padding: 94px 0 24px !important;
  }
  .hero.hero-carousel .hero-copy { width: 100% !important; max-width: none !important; }
  .hero.hero-carousel .hero-copy h1,
  .hero.hero-carousel .hero-copy h1 em {
    max-width: 100% !important;
    font-size: clamp(30px, 8.6vw, 42px) !important;
    line-height: 1.13 !important;
    letter-spacing: -.04em !important;
  }
  .hero.hero-carousel .hero-lead { font-size: 14px !important; line-height: 1.55 !important; }
  .hero.hero-carousel .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin-top: 18px !important;
  }
  .hero.hero-carousel .hero-actions > * {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 44px !important;
    position: relative !important;
    z-index: 4 !important;
  }
  .hero.hero-carousel .hero-slide-nav {
    position: relative !important;
    inset: auto !important;
    width: min(calc(100% - 30px), 620px) !important;
    margin: 0 auto 10px !important;
    justify-content: flex-end !important;
  }
  .hero.hero-carousel .hero-bottom {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 2 !important;
  }
  .hero.hero-carousel .hero-bottom-inner {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
  .hero.hero-carousel .hero-bottom-inner span {
    min-width: 0;
    padding: 11px 8px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    text-align: center;
  }

  /* Shared hero/section rhythm. */
  .hero:not(.hero-carousel), .detail-hero {
    min-height: 0 !important;
    padding: 92px 0 44px !important;
  }
  .hero:not(.hero-carousel) .hero-grid, .detail-hero-grid {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .hero:not(.hero-carousel) h1, .detail-hero h1 {
    max-width: 100% !important;
    margin: 14px 0 15px !important;
    font-size: clamp(29px, 8.8vw, 42px) !important;
    line-height: 1.14 !important;
    letter-spacing: -.04em !important;
  }
  .hero-lead, .detail-lead, .lead {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
  .hero-actions, .detail-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin-top: 18px !important;
  }
  .hero-actions > *, .detail-actions > * { width: 100% !important; min-height: 44px !important; }

  .section, .business-section { padding: 64px 0 !important; }
  .section-heading, .section-head, .heading, .relationship-head {
    display: block !important;
    margin-bottom: 26px !important;
  }
  .section-index, .index { margin-bottom: 8px; font-size: 14px !important; }
  .section-heading h2, .section-head h2, .heading h2,
  .business-copy h2, .foundation-copy h2, .process-intro h2,
  .roles-intro h2, .closing h2 {
    max-width: 100% !important;
    margin: 7px 0 10px !important;
    font-size: clamp(25px, 7.4vw, 34px) !important;
    line-height: 1.22 !important;
    letter-spacing: -.035em !important;
  }
  .section-heading p, .section-head p, .heading p, .business-copy > p {
    max-width: 100% !important;
    margin-bottom: 0;
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  /* Evidence / two-column sections become an intentional vertical story. */
  .proof-layout, .business-grid, .foundation-layout, .process-layout,
  .roles-layout, .faq-layout, .value-grid, .path-panels, .path-choice-grid,
  .bonus-layout, .reports, .related-list, .detail-proof-grid, .tool-grid,
  .system-grid, .closing-inner { grid-template-columns: 1fr !important; }
  .proof-feature { display: block !important; }
  .proof-feature-image img, .business-visual img, .foundation-visual img,
  .foundation-visual, .hero-card-photo img {
    width: 100% !important;
    height: auto !important;
    max-height: 58vw !important;
    object-fit: cover;
  }
  .proof-feature-copy { padding: 18px 0 0 !important; }
  .proof-feature-copy h3 { font-size: clamp(21px, 6vw, 28px) !important; line-height: 1.25 !important; }
  .path-choice-grid { gap: 9px !important; }
  .path-choice, .path-panel { min-width: 0 !important; padding: 18px !important; border-radius: var(--mobile-radius) !important; }
  .path-choice strong, .path-panel-intro h3 { font-size: 21px !important; line-height: 1.25 !important; }
  .path-list { margin-top: 12px !important; }

  /* Method = four compact rows, not four tall desktop cards. */
  .method-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .method-card {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 1px 10px !important;
    min-height: 0 !important;
    padding: 13px 14px !important;
    border-radius: 15px !important;
  }
  .method-card > span { grid-row: 1 / span 2; width: 32px !important; height: 32px !important; }
  .method-card h3 { margin: 0 !important; font-size: 18px !important; line-height: 1.25 !important; }
  .method-card p { margin: 1px 0 0 !important; font-size: 12px !important; line-height: 1.45 !important; }
  .course-strip { margin-top: 14px !important; padding: 15px !important; }
  .course-days { grid-template-columns: 1fr !important; gap: 5px !important; }

  /* Takeaway = compact metric cards.  The package card spans the first row;
     the three supporting metrics form a tidy two-column rhythm. */
  .takeaway-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
  .takeaway-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 15px !important;
    border-radius: 15px !important;
  }
  .takeaway-card-main { grid-column: 1 / -1 !important; min-height: 0 !important; }
  .takeaway-card:last-child { grid-column: 1 / -1 !important; }
  .takeaway-card small { font-size: 10px !important; letter-spacing: .14em !important; }
  .takeaway-card strong { margin: 12px 0 3px !important; font-size: clamp(32px, 10vw, 44px) !important; line-height: .98 !important; }
  .takeaway-card h3 { margin: 0 0 4px !important; font-size: 18px !important; line-height: 1.2 !important; }
  .takeaway-card p { margin: 0 !important; font-size: 12px !important; line-height: 1.45 !important; }
  .takeaway-card a { margin-top: 7px !important; font-size: 12px !important; }

  /* Intro course page: rows stay information-dense and the saving badge is a
     relationship marker between the two comparison cards. */
  .chips { gap: 6px !important; margin-top: 18px !important; }
  .chip { padding: 7px 10px !important; font-size: 11px !important; }
  .price { padding: 22px 18px !important; border-radius: 20px !important; }
  .price-main { margin: 14px 0 12px !important; }
  .price-num { font-size: clamp(58px, 18vw, 84px) !important; }
  .price-bottom { gap: 10px !important; margin-top: 18px !important; padding-top: 16px !important; }
  .price-bottom strong { font-size: 17px !important; }
  .timeline { margin-left: 0 !important; gap: 8px !important; }
  .timeline::before { display: none !important; }
  .course {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 4px 10px !important;
    min-height: 0 !important;
    padding: 13px 14px !important;
    border-radius: 14px !important;
  }
  .course .num { width: 32px !important; height: 32px !important; font-size: 12px !important; }
  .course > div:nth-child(2) { align-self: center; }
  .course small { font-size: 9px !important; }
  .course h3 { margin: 2px 0 0 !important; font-size: 17px !important; line-height: 1.25 !important; }
  .course ul { grid-column: 1 / -1 !important; grid-template-columns: 1fr 1fr !important; gap: 3px 10px !important; margin-top: 5px !important; font-size: 11px !important; line-height: 1.4 !important; }
  .course li { padding-left: 10px !important; }
  .course .delivery { grid-column: 1 / -1 !important; justify-self: start !important; min-width: 0 !important; padding: 5px 8px !important; font-size: 10px !important; }
  .course .delivery b { display: inline !important; margin-right: 3px; font-size: 12px !important; }
  .bonus-layout { gap: 12px !important; }
  .bonus-lead { min-height: 0 !important; padding: 20px !important; border-radius: 20px !important; }
  .bonus-lead h3 { margin: 18px 0 !important; font-size: clamp(30px, 8vw, 38px) !important; line-height: 1.15 !important; }
  .bonus-value b { font-size: 30px !important; }
  .bonus-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .bonus { display: block !important; min-height: 0 !important; padding: 13px !important; border-radius: 13px !important; }
  .bonus .icon { width: 30px !important; height: 30px !important; margin-bottom: 8px; }
  .bonus h3 { font-size: 14px !important; line-height: 1.25 !important; }
  .bonus p, .bonus b { font-size: 11px !important; line-height: 1.45 !important; }
  .reports { grid-template-columns: 1fr !important; gap: 8px !important; }
  .report { padding: 13px 14px !important; }
  .value-grid { gap: 20px !important; }
  .ratio { width: min(210px, 64vw) !important; justify-self: center !important; }
  .ledger .row { grid-template-columns: 1fr auto !important; gap: 4px 8px !important; padding: 11px 0 !important; }
  .ledger .row span { grid-column: 1 / -1 !important; font-size: 11px !important; }
  .ledger .row strong { grid-column: 2 !important; grid-row: 1 !important; font-size: 15px !important; }
  .total { align-items: flex-start !important; flex-direction: column !important; gap: 6px !important; }

  /* Intro header has three independent controls.  Keep them in one compact
     row so the return link is always visible and never creates page spill. */
  .top { padding: 17px 0 0 !important; }
  .top-inner { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 6px !important; flex-wrap: nowrap !important; }
  .top-logo { flex: 0 1 auto !important; width: min(145px, 39vw) !important; }
  .top-note { display: none !important; }
  .intro-contact-header, .back-home { flex: 0 0 auto !important; min-height: 32px !important; padding: 7px 8px !important; font-size: 10px !important; line-height: 1.2 !important; }
  .intro-contact-header { margin-left: auto; }
  .compare { overflow: hidden !important; }
  .ratio, .ratio-inner { overflow: hidden !important; }

  .compare, .compare-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; }
  .compare-card, .compare-grid .compare-card { min-width: 0 !important; padding: 20px 16px !important; border-radius: 20px !important; }
  .compare .bad, .compare-grid .compare-card-muted { order: 1 !important; }
  .compare .save, .compare-grid .compare-save {
    position: relative !important;
    inset: auto !important;
    order: 2 !important;
    width: 88px !important;
    height: 88px !important;
    margin: -12px auto !important;
    padding: 9px !important;
    border-width: 4px !important;
    transform: rotate(-5deg) !important;
    z-index: 3 !important;
  }
  .compare .good, .compare-grid .compare-card-good { order: 3 !important; }
  .compare-card h3 { margin: 7px 0 15px !important; font-size: clamp(25px, 7.4vw, 32px) !important; line-height: 1.15 !important; }
  .compare-card ul { gap: 7px !important; }
  .compare-card li { grid-template-columns: 15px minmax(0, 1fr) !important; gap: 7px !important; font-size: 12px !important; line-height: 1.45 !important; }
  .compare-cost { align-items: flex-start !important; flex-direction: column !important; gap: 3px !important; margin-top: 18px !important; padding-top: 15px !important; }
  .compare-cost b, .cost b { font-size: clamp(27px, 8.5vw, 38px) !important; }

  /* Corporate page / public detail blocks. */
  .mode-card, .system-card, .fit-card, .process-step, .role-row, .faq-item {
    min-width: 0 !important;
    padding: 17px !important;
    border-radius: 16px !important;
  }
  .modes-grid, .delivery-wrap, .faq-grid { grid-template-columns: 1fr !important; gap: 9px !important; }
  .mode-card { min-height: 0 !important; }
  .mode-card h3 { margin: 15px 0 7px !important; font-size: 22px !important; line-height: 1.2 !important; }
  .mode-card > p, .system-card p, .process-step p, .role-row p { font-size: 12px !important; line-height: 1.5 !important; }
  .mode-points { gap: 5px !important; }
  .quick-strip, .quick-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 7px !important; }
  .quick-item { min-width: 0 !important; padding: 12px !important; }

  /* Reports: cards become a two-column dashboard; tables retain a local
     scroller so the page itself never widens beyond the phone. */
  body.report-page, body.report-index { min-width: 0 !important; font-size: 13px !important; }
  body.report-page .report-brandbar__inner, body.report-index .hub-brandbar,
  body.report-index .hub-hero, body.report-index .hub-main,
  body.report-index .hub-footer__inner, body.report-page > main,
  body.report-weekly main.shell, .shell {
    width: min(calc(100% - 28px), 680px) !important;
    max-width: 100% !important;
  }
  body.report-page .report-brandbar__inner, body.report-index .hub-brandbar { min-height: 66px !important; }
  body.report-index .hub-cover { min-height: 0 !important; padding-top: 70px !important; padding-bottom: 24px !important; }
  body.report-index .hub-hero { min-height: 0 !important; padding: 28px 0 0 !important; }
  body.report-page .cover { min-height: 0 !important; padding: 88px 14px 42px !important; }
  body.report-page .cover-title, body.report-weekly .cover h1,
  body.report-index .hub-hero h1, .cover h1 {
    max-width: 100% !important;
    font-size: clamp(25px, 7.6vw, 38px) !important;
    line-height: 1.16 !important;
  }
  body.report-page .cover-sub, body.report-index .hub-hero__lead { font-size: 13px !important; line-height: 1.55 !important; }
  body.report-page .cover-stats, body.report-weekly .overview-grid,
  body.report-page .kpi-grid, body.report-page .mem-kpis,
  body.report-page .concl-grid,
  body.report-weekly .margin-metrics, body.report-weekly .member-summary,
  body.report-weekly .inline-summary, body.report-index .report-grid,
  .overview-grid, .topic-grid, .result-grid, .first-level-charts,
  .menu-grid, .margin-layout { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }

  /* Weekly reports: keep the judgment cards readable on phones.  The shared
     two-column fallback above is useful for compact dashboards, but it makes
     the "本周判断" cards too narrow (often only two Chinese characters
     per line).  Stack them at full width and let each card use its own layout. */
  body.report-weekly .conclusions {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.report-weekly .result-grid,
  body.report-weekly .first-level-charts,
  body.report-weekly .menu-grid,
  body.report-weekly .margin-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.report-weekly .conclusion,
  body.report-weekly .conclusion > * {
    min-width: 0 !important;
  }

  body.report-weekly .analysis-section,
  body.report-weekly .result-card {
    padding-inline: 10px !important;
  }

  body.report-weekly .chart-box,
  body.report-weekly .menu-block .chart-box {
    width: 100% !important;
    min-width: 0 !important;
    padding: 6px !important;
  }

  body.report-weekly .first-level-charts > .chart-box > .chart,
  body.report-weekly .menu-block .chart {
    width: 100% !important;
    min-width: 0 !important;
    height: 224px !important;
  }

  body.report-weekly .menu-block h4 {
    margin-bottom: 6px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  body.report-page .tabs, body.report-index .hub-nav { width: 100% !important; max-width: none !important; margin: 0 auto 18px !important; flex-wrap: wrap !important; gap: 4px !important; overflow: visible !important; border-radius: 14px !important; }
  body.report-page .tab-btn, body.report-index .hub-nav a { flex: 1 1 auto !important; min-height: 34px !important; padding: 7px 8px !important; font-size: 10px !important; white-space: nowrap; }
  body.report-page .chapter, body.report-index .report-card, body.report-index .catalog,
  body.report-weekly .analysis-section, body.report-weekly .result-card { min-width: 0 !important; padding: 15px 12px !important; border-radius: 15px !important; }
  body.report-page .ch-head, body.report-index .hub-section__head { display: block !important; margin-bottom: 16px !important; }
  body.report-page .ch-head h2, body.report-index .hub-section__head h2 { font-size: clamp(22px, 6.8vw, 32px) !important; }
  body.report-page .kpi-card, body.report-page .mk, body.report-weekly .kpi { min-width: 0 !important; padding: 11px !important; }
  body.report-page .kpi-val, body.report-page .mk-v, body.report-weekly .kpi-value, .kpi-value { font-size: clamp(20px, 6.6vw, 29px) !important; }
  body.report-page .table-wrap, body.report-weekly .concrete-table, .table-wrap { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  body.report-page .chart-box > div[style*="height"], .chart-box > div[style*="height"] { height: 240px !important; }
  body.report-page .chart-box, body.report-weekly .chart-box, .chart-box { min-height: 0 !important; }
  .cover { min-height: 0 !important; padding: 76px 14px 36px !important; }
  body.report-page table, body.report-weekly table, .table-wrap table { min-width: 580px !important; font-size: 11px !important; }
  body.report-page table th, body.report-page table td, body.report-weekly table th, body.report-weekly table td { padding: 7px 8px !important; }
  body.report-index .hub-main { padding: 34px 0 54px !important; }
  body.report-index .report-card { min-height: 0 !important; }

  /* Workbench: content is a vertical mobile workspace while tables scroll in
     their own frame.  Internal pages keep their existing no-global-nav rule. */
  body.editorial-control { min-width: 0 !important; font-size: 13px !important; }
  body.editorial-control .app-shell { min-width: 0 !important; padding-top: 0 !important; }
  body.editorial-control .topbar { min-height: 58px !important; height: auto !important; padding: 9px 12px !important; gap: 7px !important; }
  body.editorial-control .content-wrap { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 14px 12px 38px !important; }
  body.editorial-control .page-head, body.editorial-control .page-head-copy,
  body.editorial-control .toolbar, body.editorial-control .toolbar-left,
  body.editorial-control .toolbar-right, body.editorial-control .head-actions,
  body.editorial-control .period-tools { min-width: 0 !important; max-width: 100% !important; flex-wrap: wrap !important; }
  body.editorial-control .page-head { display: flex !important; flex-direction: column !important; gap: 9px !important; }
  body.editorial-control .page-title { font-size: clamp(20px, 6.2vw, 28px) !important; line-height: 1.25 !important; }
  body.editorial-control .card { min-width: 0 !important; max-width: 100% !important; padding: 12px !important; border-radius: 13px !important; }
  body.editorial-control .grid-4, body.editorial-control .grid-3,
  body.editorial-control .grid-2, body.editorial-control .report-tags,
  body.editorial-control .report-center-grid, body.editorial-control .report-reading-grid,
  body.editorial-control .knowledge-layout, body.editorial-control .library-category-grid,
  body.editorial-control .library-card-grid, body.editorial-control .finance-upload-guide,
  body.editorial-control .finance-store-summary-grid, body.editorial-control .finance-health-columns,
  body.editorial-control .finance-detail-grid, body.editorial-control .member-share-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  body.editorial-control .toolbar, body.editorial-control .toolbar-left, body.editorial-control .toolbar-right { align-items: stretch !important; gap: 7px !important; }
  body.editorial-control .toolbar .field, body.editorial-control .toolbar .select,
  body.editorial-control .search-field, body.editorial-control .period-selects,
  body.editorial-control .period-selects .period-select { width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; }
  body.editorial-control .subnav { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; overflow: visible !important; }
  body.editorial-control .subnav button { flex: 1 1 auto !important; min-width: max-content !important; padding: 7px 8px !important; font-size: 11px !important; }
  body.editorial-control .table-wrap, body.editorial-control .report-frame,
  body.editorial-control .recon-table, body.editorial-control .concrete-table { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; }
  body.editorial-control table { min-width: 580px !important; font-size: 11px !important; }

  /* Mobile reading logic: these blocks are deliberately re-composed for a
     narrow screen instead of simply shrinking the desktop grid. */
  :where(section[id], nav[id], footer[id]) { scroll-margin-top: 88px !important; }

  /* Education paths read as choice → matching answer → next choice → answer. */
  .dark-section .wrap.section:has(.path-choice-grid) {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .dark-section .wrap.section:has(.path-choice-grid) .path-choice-grid,
  .dark-section .wrap.section:has(.path-choice-grid) .path-panels {
    display: contents !important;
  }
  .dark-section .wrap.section:has(.path-choice-grid) .section-heading { order: 0 !important; }
  .dark-section .wrap.section:has(.path-choice-grid) .path-choice-open { order: 1 !important; }
  .dark-section .wrap.section:has(.path-choice-grid) #path-open { order: 2 !important; }
  .dark-section .wrap.section:has(.path-choice-grid) .path-choice-upgrade { order: 3 !important; }
  .dark-section .wrap.section:has(.path-choice-grid) #path-upgrade { order: 4 !important; }
  .dark-section .wrap.section:has(.path-choice-grid) .path-choice,
  .dark-section .wrap.section:has(.path-choice-grid) .path-panel {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 10px !important;
  }
  .dark-section .wrap.section:has(.path-choice-grid) .path-choice {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 3px 10px !important;
    min-height: 0 !important;
    padding: 13px 15px !important;
    border-radius: 14px !important;
  }
  .dark-section .wrap.section:has(.path-choice-grid) .path-choice span { grid-column: 1 / -1 !important; font-size: 9px !important; }
  .dark-section .wrap.section:has(.path-choice-grid) .path-choice strong { font-size: 19px !important; line-height: 1.15 !important; }
  .dark-section .wrap.section:has(.path-choice-grid) .path-choice em { justify-self: end !important; font-size: 11px !important; white-space: nowrap !important; }
  .dark-section .wrap.section:has(.path-choice-grid) .path-panel {
    padding: 17px !important;
    border-radius: 16px !important;
  }
  .dark-section .wrap.section:has(.path-choice-grid) .path-panel-intro span { font-size: 9px !important; letter-spacing: .13em !important; }
  .dark-section .wrap.section:has(.path-choice-grid) .path-panel-intro h3 { margin: 10px 0 6px !important; font-size: 23px !important; line-height: 1.22 !important; }
  .dark-section .wrap.section:has(.path-choice-grid) .path-panel-intro p { margin: 0 !important; font-size: 12px !important; line-height: 1.45 !important; }
  .dark-section .wrap.section:has(.path-choice-grid) .path-panel-cta { display: inline-flex !important; width: auto !important; max-width: 100% !important; margin-top: 11px !important; padding: 7px 10px !important; font-size: 11px !important; white-space: nowrap !important; }
  .dark-section .wrap.section:has(.path-choice-grid) .path-list { margin-top: 13px !important; }
  .dark-section .wrap.section:has(.path-choice-grid) .path-row { min-height: 0 !important; padding: 10px 0 !important; gap: 8px !important; }
  .dark-section .wrap.section:has(.path-choice-grid) .path-row h4 { font-size: 16px !important; line-height: 1.25 !important; }
  .dark-section .wrap.section:has(.path-choice-grid) .path-row p { margin-top: 3px !important; font-size: 11px !important; line-height: 1.4 !important; }

  /* Two hero actions remain a single, tappable row on phones. */
  .hero.hero-carousel .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .hero.hero-carousel .hero-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 8px 7px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* The comparison cards share one visual rhythm; the saving badge sits
     between them rather than becoming a third oversized card. */
  .compare-grid .compare-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: clamp(360px, 92vw, 400px) !important;
    height: auto !important;
  }
  .compare-grid .compare-card .compare-cost { margin-top: 18px !important; }

  /* Report directory cards need a single-column reading sequence on phones.
     The desktop three-column grid otherwise leaves the metric/link block too
     narrow, which creates clipped labels and one- or two-character wraps. */
  body.report-index .report-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body.report-index .report-card {
    min-height: 0 !important;
    padding: 18px !important;
  }
  body.report-index .report-card__top { gap: 8px !important; }
  body.report-index .report-card__type { font-size: 10px !important; letter-spacing: .12em !important; }
  body.report-index .report-card__badge { padding: 4px 8px !important; font-size: 10px !important; white-space: nowrap !important; }
  body.report-index .report-card h3 { max-width: 100% !important; margin: 24px 0 8px !important; font-size: clamp(24px, 8vw, 32px) !important; line-height: 1.16 !important; }
  body.report-index .report-card p { font-size: 12px !important; line-height: 1.4 !important; }
  body.report-index .report-card__metric { gap: 8px !important; padding-top: 18px !important; }
  body.report-index .report-card__metric strong { font-size: clamp(26px, 8vw, 34px) !important; }
  body.report-index .report-card__metric span,
  body.report-index .report-card__link { font-size: 11px !important; line-height: 1.25 !important; }

  /* Home page: one-row service CTA, centered navigation, compact proof grid. */
  body:has(.business-section) .hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
  }
  body:has(.business-section) .hero-actions .button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  body:has(.business-section) .hero-actions .hero-micro {
    min-width: max-content !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  body:has(.business-section) .section-nav-inner { justify-content: center !important; }
  body:has(.business-section) .proof-inner {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: min(calc(100% - 28px), 620px) !important;
    margin-inline: auto !important;
  }
  body:has(.business-section) .proof-intro { grid-column: 1 / -1 !important; padding: 15px 0 11px !important; text-align: center !important; }
  body:has(.business-section) .proof-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; padding: 10px 8px !important; text-align: center !important; border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  body:has(.business-section) .proof-item:nth-child(2),
  body:has(.business-section) .proof-item:nth-child(4) { border-right: 1px solid var(--line) !important; }
  body:has(.business-section) .proof-item:nth-child(4),
  body:has(.business-section) .proof-item:nth-child(5) { border-bottom: 0 !important; }
  body:has(.business-section) .proof-item b { font-size: 15px !important; white-space: nowrap !important; }
  body:has(.business-section) .proof-item span { width: 100% !important; margin-top: 4px !important; font-size: 10px !important; line-height: 1.35 !important; white-space: normal !important; word-break: keep-all !important; }

  /* Home visual windows keep their dashboard/report content inside the image
     frame and turn the frame into a short, readable mobile card. */
  body:has(.business-section) .business-visual:has(.data-window),
  body:has(.business-section) .business-visual:has(.report-window) {
    display: flex !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
  }
  body:has(.business-section) .business-visual:has(.data-window) > img,
  body:has(.business-section) .business-visual:has(.report-window) > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
  }
  body:has(.business-section) .business-visual .data-window,
  body:has(.business-section) .business-visual .report-window {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
  }
  body:has(.business-section) .data-window-top,
  body:has(.business-section) .report-window-top { font-size: 9px !important; }
  body:has(.business-section) .data-window-title,
  body:has(.business-section) .report-window h3 { margin: 18px 0 11px !important; font-size: 21px !important; line-height: 1.2 !important; }
  body:has(.business-section) .data-cards { gap: 7px !important; }
  body:has(.business-section) .data-cards div { min-height: 58px !important; padding: 9px !important; }
  body:has(.business-section) .data-cards span { font-size: 10px !important; }
  body:has(.business-section) .data-cards strong { margin-top: 4px !important; font-size: 12px !important; line-height: 1.25 !important; }
  body:has(.business-section) .report-window p { font-size: 11px !important; }
  body:has(.business-section) .report-table { margin-top: 14px !important; }
  body:has(.business-section) .report-row { grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; padding: 8px 0 !important; font-size: 11px !important; }
  body:has(.business-section) .business-visual:not(:has(.data-window)):not(:has(.report-window)) { min-height: 0 !important; aspect-ratio: 4 / 3 !important; }
  body:has(.business-section) .business-visual:not(:has(.data-window)):not(:has(.report-window)) img { min-height: 0 !important; height: 100% !important; }

  /* Relationship flow becomes a compact two-by-two result map. */
  body:has(.business-section) .relationship-head { gap: 10px !important; }
  body:has(.business-section) .flow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; }
  body:has(.business-section) .flow-step,
  body:has(.business-section) .flow-step + .flow-step { min-height: 0 !important; padding: 15px 12px !important; border-right: 1px solid var(--line-dark) !important; }
  body:has(.business-section) .flow-step:nth-child(2n) { border-right: 0 !important; }
  body:has(.business-section) .flow-step:nth-child(n+3) { border-top: 1px solid var(--line-dark) !important; }
  body:has(.business-section) .flow-step::after { top: 14px !important; right: 9px !important; font-size: 15px !important; }
  body:has(.business-section) .flow-step h3 { margin: 15px 0 4px !important; font-size: 18px !important; line-height: 1.2 !important; }
  body:has(.business-section) .flow-step p { font-size: 11px !important; line-height: 1.4 !important; }
  body:has(.business-section) .footer-inner,
  body:has(.business-section) .footer-bottom { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 12px !important; }
  body:has(.business-section) .footer-note { margin-top: 0 !important; text-align: center !important; }
  body:has(.business-section) .footer-links { justify-content: center !important; flex-wrap: wrap !important; gap: 8px 14px !important; }

  /* Partnership page: centered quick judgement, compact mode cards and a
     genuinely centered foundation image/list. */
  body:has(.mode-card) { font-family: Inter, "Avenir Next", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important; }
  body:has(.mode-card) h1,
  body:has(.mode-card) h2,
  body:has(.mode-card) h3,
  body:has(.mode-card) h4 { font-family: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif !important; }
  body:has(.mode-card) .hero-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  body:has(.mode-card) .hero-actions > * { width: 100% !important; min-width: 0 !important; min-height: 42px !important; padding: 8px 10px !important; font-size: 12px !important; line-height: 1.2 !important; white-space: nowrap !important; }
  body:has(.mode-card) .quick-strip { display: block !important; width: 100% !important; }
  body:has(.mode-card) .quick-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; width: min(calc(100% - 28px), 620px) !important; margin-inline: auto !important; }
  body:has(.mode-card) .quick-intro { grid-column: 1 / -1 !important; padding: 14px 0 10px !important; text-align: center !important; }
  body:has(.mode-card) .quick-item { min-width: 0 !important; padding: 11px 8px !important; text-align: center !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
  body:has(.mode-card) .quick-item:last-child { grid-column: 1 / -1 !important; border-right: 0 !important; }
  body:has(.mode-card) .quick-item b { display: block !important; font-size: 10px !important; }
  body:has(.mode-card) .quick-item span { display: block !important; margin-top: 3px !important; font-size: 12px !important; line-height: 1.3 !important; }
  body:has(.mode-card) .modes-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  body:has(.mode-card) .mode-card { display: flex !important; min-height: 0 !important; height: auto !important; padding: 18px !important; }
  body:has(.mode-card) .mode-card h3 { margin: 14px 0 6px !important; font-family: "Songti SC", "STSong", "Noto Serif CJK SC", SimSun, serif !important; font-weight: 700 !important; font-size: 24px !important; line-height: 1.18 !important; }
  body:has(.mode-card) .mode-card > p { font-size: 13px !important; line-height: 1.48 !important; }
  body:has(.mode-card) .mode-points { gap: 5px !important; margin: 13px 0 0 !important; }
  body:has(.mode-card) .mode-points li { padding-left: 14px !important; font-size: 13px !important; line-height: 1.42 !important; }
  body:has(.mode-card) .mode-footer { gap: 8px !important; margin-top: 13px !important; padding-top: 12px !important; }
  body:has(.mode-card) .mode-tags { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; }
  body:has(.mode-card) .mode-tags span { padding: 5px 8px !important; font-size: 11px !important; white-space: nowrap !important; }
  body:has(.mode-card) .foundation-layout { display: grid !important; grid-template-columns: 1fr !important; gap: 22px !important; width: min(calc(100% - 28px), 620px) !important; margin-inline: auto !important; }
  body:has(.mode-card) .foundation-visual { width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 4 / 3 !important; margin: 0 !important; border-radius: 18px !important; overflow: hidden !important; }
  body:has(.mode-card) .foundation-visual img { width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; object-fit: cover !important; object-position: center !important; }
  body:has(.mode-card) .foundation-copy { width: 100% !important; max-width: none !important; }
  body:has(.mode-card) .foundation-copy h2 { font-size: clamp(27px, 7.6vw, 38px) !important; line-height: 1.2 !important; }
  body:has(.mode-card) .foundation-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 16px !important; margin-top: 18px !important; }
  body:has(.mode-card) .foundation-list > div { display: block !important; min-width: 0 !important; padding: 12px 0 !important; }
  body:has(.mode-card) .foundation-list b { display: block !important; margin-bottom: 5px !important; }
  body:has(.mode-card) .foundation-list strong { display: block !important; white-space: normal !important; font-size: 17px !important; line-height: 1.25 !important; }
  body:has(.mode-card) .foundation-list span { display: block !important; margin-top: 4px !important; font-size: 12px !important; line-height: 1.45 !important; }
  body:has(.mode-card) .site-footer .footer-top,
  body:has(.mode-card) .site-footer .footer-bottom { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 12px !important; }
  body:has(.mode-card) .footer-related { justify-content: center !important; flex-wrap: wrap !important; gap: 8px 14px !important; }

  /* Cross-page density pass: on a phone a card is a reading unit, not a
     desktop panel with empty vertical ballast.  Keep a clear hierarchy but
     pull title, copy, list and label into one compact rhythm. */
  .section, .business-section { padding-top: 48px !important; padding-bottom: 48px !important; }
  .section-heading, .section-head, .heading, .relationship-head { margin-bottom: 20px !important; }
  .section-heading p, .section-head p, .heading p, .business-copy > p,
  .process-intro p, .roles-intro p, .foundation-copy > p, .fit-note,
  .mode-note, .chapter-lead, .delivery-note, .process-foot { line-height: 1.5 !important; }
  .section-heading h2, .section-head h2, .heading h2,
  .business-copy h2, .foundation-copy h2, .process-intro h2,
  .roles-intro h2, .closing h2 { line-height: 1.16 !important; }

  /* Corp project path: seven steps share one compact vertical rhythm. */
  body:has(.process-step) .section { padding-top: 44px !important; padding-bottom: 44px !important; }
  body:has(.process-step) .process-layout { gap: 18px !important; }
  body:has(.process-step) .process-intro h2 { font-size: clamp(27px, 7.4vw, 37px) !important; line-height: 1.14 !important; }
  body:has(.process-step) .process-intro p { margin-top: 10px !important; font-size: 13px !important; line-height: 1.45 !important; }
  body:has(.process-step) .process-step { gap: 8px 10px !important; padding: 12px 0 !important; }
  body:has(.process-step) .process-step h3 { font-size: 17px !important; line-height: 1.2 !important; }
  body:has(.process-step) .process-step p { margin-top: 3px !important; font-size: 12px !important; line-height: 1.4 !important; }
  body:has(.process-step) .process-role { margin-top: -2px !important; font-size: 10px !important; line-height: 1.2 !important; }
  body:has(.process-step) .process-foot { margin-top: 16px !important; padding: 10px 12px !important; font-size: 12px !important; }

  /* The same compact rules apply to other corp information blocks. */
  body:has(.mode-card) .mode-card { padding: 15px !important; }
  body:has(.mode-card) .mode-card h3 { margin-top: 11px !important; }
  body:has(.mode-card) .mode-points { margin-top: 10px !important; }
  body:has(.mode-card) .mode-points li { line-height: 1.35 !important; }
  body:has(.mode-card) .mode-footer { margin-top: 10px !important; padding-top: 10px !important; }
  body:has(.mode-card) .fit-card { padding: 14px !important; }
  body:has(.mode-card) .fit-card h3 { margin-bottom: 9px !important; font-size: 19px !important; line-height: 1.2 !important; }
  body:has(.mode-card) .fit-card ul { gap: 7px !important; }
  body:has(.mode-card) .fit-card li { font-size: 13px !important; line-height: 1.4 !important; }
  body:has(.mode-card) .role-row { padding: 12px 0 !important; }
  body:has(.mode-card) .role-row span { font-size: 12px !important; line-height: 1.4 !important; }
  body:has(.mode-card) .system-card { padding: 14px !important; }
  body:has(.mode-card) .system-card h4 { margin-bottom: 6px !important; font-size: 16px !important; line-height: 1.25 !important; }
  body:has(.mode-card) .system-card ul { gap: 3px !important; font-size: 12px !important; line-height: 1.35 !important; }

  /* Keep the same rhythm in education and report cards when their content is
     short; long tables/charts still retain their own local scrolling. */
  .method-card, .takeaway-card, .path-choice, .path-panel, .fit-card { line-height: 1.45 !important; }
  .method-card p, .takeaway-card p, .path-panel p { line-height: 1.4 !important; }
  body.report-page .chapter, body.report-index .report-card,
  body.report-weekly .analysis-section, body.report-weekly .result-card { line-height: 1.45 !important; }
  body.report-page .kpi-card, body.report-page .mk, body.report-weekly .kpi { line-height: 1.4 !important; }

  /* 320px: preserve a little breathing room without creating orphan lines. */
  @media (max-width: 340px) {
    :root { --mobile-gutter: 12px; }
    .hero.hero-carousel .hero-grid { width: calc(100% - 24px) !important; padding-top: 88px !important; }
    .hero.hero-carousel .hero-copy h1, .hero:not(.hero-carousel) h1, .detail-hero h1 { font-size: 28px !important; }
    .section-heading h2, .section-head h2, .heading h2 { font-size: 24px !important; }
    .takeaway-grid, .bonus-grid { grid-template-columns: 1fr !important; }
    .takeaway-card-main, .takeaway-card:last-child { grid-column: auto !important; }
    .course ul { grid-template-columns: 1fr !important; }
    .quick-strip, .quick-inner { grid-template-columns: 1fr !important; }
    .top-logo { width: 126px !important; }
    .intro-contact-header, .back-home { padding-inline: 6px !important; font-size: 9px !important; }
  }

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