/* Corporate page mobile pass (2026-10-29, corp_mobile.py + assets/js/corp-mobile.js).
   Look follows the homepage learner-type strip (2px ink border, 14px radius, cream card, 3px ink shadow) and the
   quiz's four colours. Phones (<768px): proof band, swipe rows, folded sections, sticky action bar.
   Desktop keeps its grids; the folded sections stay open there and keep the heading-left / text-right layout. */

/* 1. Proof band under the hero */
.cm-proof{margin:26px 0 0;padding:14px 14px 16px;border:2px solid #1C1B29;border-radius:14px;background:#FBF7EF;box-shadow:0 3px 0 #1C1B29;max-width:760px}
.case-intro>.cm-proof{grid-column:1/-1}
.cm-proof__label{margin:0 0 10px;font-size:12px;line-height:1.4;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.cm-proof__logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cm-proof__logos li{display:flex;align-items:center;justify-content:center;height:52px;padding:6px 8px;background:#fff;border:1px solid var(--line);border-radius:10px;min-width:0}
.cm-proof__logos img{display:block;width:auto;height:auto;max-width:100%;max-height:26px;object-fit:contain}
.cm-proof__logos img.cm-logo-garden{max-height:38px}
.cm-proof__logos img.cm-logo-cshk{max-height:34px}
.cm-proof__quote{display:flex;gap:10px;margin:14px 0 0;padding:12px 0 0;border-top:1px dashed #c9c5b8}
.cm-proof__mark{flex:none;font-family:Georgia,serif;font-size:46px;line-height:.9;color:var(--accent)}
.cm-proof__quote blockquote{margin:0;font-size:17px;line-height:1.5;font-weight:600;letter-spacing:-.01em}
.cm-proof__quote .quote-gloss{margin:4px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}
.cm-proof__quote figcaption{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:12px;line-height:1.5;color:var(--muted)}
.cm-proof__quote figcaption .quote-logo{margin-left:0;height:30px;width:auto;max-width:140px}
.cm-proof__date{display:block}

/* 2. Swipe rows: controls only on phones */
.cm-rail{display:none}

/* 3. Folded sections: on desktop they read exactly as before (heading left, text right, always open) */
.cm-fold{display:flow-root}
.cm-fold>summary{list-style:none}
.cm-fold>summary::-webkit-details-marker{display:none}
.cm-fold__icon{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border:2px solid #1C1B29;border-radius:10px;background:#0E9F8B}
.cm-fold__icon[data-c="#6E56CF"]{background:#6E56CF}
.cm-fold__icon[data-c="#E08A00"]{background:#E08A00}
.cm-fold__icon[data-c="#E84A5A"]{background:#E84A5A}
.cm-fold__head h2{margin:0}
.cm-fold__line{display:block}
.cm-fold__head .pb-kicker{display:block}

/* 5. Sticky bar: phones only */
.cm-sticky{display:none}

@media(min-width:768px){
 .cm-folds .cm-fold-sec{display:block}
 .cm-fold>summary{float:left;width:min(260px,26%);cursor:default;pointer-events:none}
 .cm-fold__icon{margin-bottom:16px}
 .cm-fold__line,.cm-fold__plus{display:none}
 .cm-fold>div{margin-left:calc(min(260px,26%) + 48px)}
}

@media(max-width:767px){
 /* logos legible on phones (coordinator review): 2 rows of 4, the band runs 10px wider than the text column, each wide logo >= 72px */
 .cm-proof{margin:22px -10px 0;padding:10px 8px 14px}
 .cm-proof__label{margin-inline:4px}
 .cm-proof__logos{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
 .cm-proof__logos li{height:58px;padding:3px 2px}
 .cm-proof__logos img{max-height:40px}
 .cm-proof__logos img.cm-logo-garden{max-height:46px}
 .cm-proof__quote{margin-inline:4px}
 .cm-proof__quote blockquote{font-size:16px}
 .cm-proof__quote .quote-gloss{font-size:13px}
 .cm-proof__quote figcaption .quote-logo{height:26px}

 /* 2. Swipe rows: one card plus a peek of the next; native momentum + snap, keyboard via the focusable region */
 .cm-track{display:flex!important;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;
  margin-inline:-20px;padding:4px 20px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .cm-track::-webkit-scrollbar{display:none}
 /* the section grid is 1fr (= minmax(auto,1fr)): without min-width:0 the swipe row would widen the page */
 .case-section>div:has(>.cm-track),.case-section>div{min-width:0}
 .cm-track:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
 .case-voices.cm-track{margin-top:18px;max-width:none;align-items:flex-start}
 .case-voices.cm-track>.feedback-card{flex:0 0 84%;scroll-snap-align:start;margin:0}
 .case-index-grid.cm-track>.case-index-card{flex:0 0 80%;scroll-snap-align:start}
 .tier-grid.cm-track{margin-top:16px}
 .tier-grid.cm-track>.tier-card{flex:0 0 80%;scroll-snap-align:start;display:flex;flex-direction:column}
 .tier-grid.cm-track>.tier-card>a{margin-top:auto;align-self:flex-start}
 .tiers .cm-rail{margin-bottom:18px}
 /* testimonial cards in the row: smaller quote mark, source and logo stacked so the name does not wrap word by word */
 .cm-track>.feedback-card{padding:20px 18px}
 .cm-track>.feedback-card .quote-mark{font-size:60px;height:40px;margin-top:4px}
 .cm-track>.feedback-card blockquote{font-size:16px;line-height:1.6}
 .cm-track>.feedback-card figcaption{flex-wrap:wrap;gap:10px;padding-top:16px}
 .cm-track>.feedback-card figcaption .quote-logo{margin-left:0}
 .service-page .faq summary{padding:12px 0;min-height:52px}
 /* hero facts: same four rows, tighter */
 .case-intro .case-facts>div{padding:10px 0;line-height:1.6}
 .cm-rail{display:flex;align-items:center;gap:12px;margin-top:6px}
 .cm-rail[hidden]{display:none}
 .cm-rail__btn{flex:none;width:44px;height:44px;border:2px solid #1C1B29;border-radius:50%;background:#FBF7EF;color:#1C1B29;font:700 18px/1 var(--body,sans-serif);box-shadow:0 2px 0 #1C1B29;cursor:pointer}
 .cm-rail__btn:disabled{opacity:.35;box-shadow:none;cursor:default}
 .cm-rail__dots{flex:1;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-width:0}
 .cm-rail__dots i{width:7px;height:7px;border-radius:50%;background:#c9c5b8;transition:width .2s,background .2s}
 .cm-rail__dots i.is-on{width:20px;border-radius:4px;background:#1C1B29}
 .cm-rail__count{flex:none;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted);min-width:3.2em;text-align:right}
 #cases .section-heading{margin-bottom:18px}

 /* 3. Folded sections: one tappable card each (icon, heading, one line, +) */
 .cm-folds{padding-top:10px}
 .cm-folds .case-section.cm-fold-sec{display:block;padding:6px 0;border-top:0}
 .cm-fold>summary{display:flex;align-items:center;gap:12px;padding:12px;border:2px solid #1C1B29;border-radius:14px;background:#FBF7EF;box-shadow:0 3px 0 #1C1B29;cursor:pointer;-webkit-tap-highlight-color:transparent}
 .cm-fold>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
 .cm-fold__head{flex:1;min-width:0}
 .cm-folds .cm-fold__head h2{font-size:17px;line-height:1.35}
 .cm-fold__line{margin-top:3px;font-size:13px;line-height:1.5;color:var(--muted)}
 .cm-folds .cm-fold__head .pb-kicker{margin:0 0 2px;font-size:11px;letter-spacing:.08em}
 /* Tiers: same text, tighter on phones */
 .tiers .tier-card{padding:16px 16px 12px}
 .tiers .tier-card p,.tiers .tier-funding p{line-height:1.7}
 html[lang^=zh] .cm-fold__line{word-break:keep-all;overflow-wrap:anywhere}
 .cm-fold__plus{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:#1C1B29;transition:transform .2s}
 .cm-fold__plus::before,.cm-fold__plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:#fff;border-radius:1px}
 .cm-fold__plus::after{transform:rotate(90deg)}
 .cm-fold[open]>summary .cm-fold__plus{transform:rotate(45deg)}
 .cm-fold[open]>summary{margin-bottom:18px}
 .cm-fold>div{padding:0 2px 14px}

 /* 5. Sticky bar: shown by the script once the hero buttons have scrolled away; hidden near the forms and while typing */
 .cm-sticky{position:fixed;left:0;right:0;bottom:0;z-index:57;display:flex;align-items:center;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:rgba(250,249,246,.97);border-top:2px solid #1C1B29;box-shadow:0 -4px 16px rgba(24,32,37,.08);
  transform:translateY(110%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
 .cm-sticky.is-on{transform:none;visibility:visible;transition:transform .22s ease}
 .cm-sticky a,.cm-sticky button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:46px;border-radius:12px;font:600 15px/1.2 var(--body,sans-serif);text-decoration:none;white-space:nowrap}
 .cm-sticky__wa{flex:1;padding:0 10px;background:var(--accent);color:#fff;border:2px solid #1C1B29}
 .cm-sticky__talk{flex:1.2;padding:0 10px;background:#FBF7EF;color:#1C1B29;border:2px solid #1C1B29}
 .cm-sticky__voice{flex:none;width:48px;padding:0;background:#fff;color:#1C1B29;border:2px solid #1C1B29;cursor:pointer}
 .cm-sticky__voice .vp-bars{margin:0}
 /* One floating element only: the bar replaces the voice launcher on these pages */
 html:has(.cm-sticky) .vp-launcher,html.cm-has-sticky .vp-launcher{display:none!important}
 html:has(.cm-sticky) body,html.cm-has-sticky body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
 html.vp-open .cm-sticky{display:none}
}
@media(max-width:360px){
 .cm-sticky a,.cm-sticky button{font-size:14px}
 .cm-sticky__wa svg{display:none}
}
@media(prefers-reduced-motion:reduce){
 .cm-sticky,.cm-sticky.is-on,.cm-fold__plus,.cm-rail__dots i{transition:none}
}
@media print{.cm-sticky,.cm-rail{display:none!important}.cm-fold>div{display:block}}