/* Shared type scale. A local family renders Vietnamese and English consistently. */
:root {
  --font-ui: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: var(--font-ui);
  --sans: var(--font-ui);
  --serif: var(--font-heading);
  --font-body: var(--font-ui);
  --passport-serif: var(--font-heading);
}
html body { font-family: var(--font-ui); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select, textarea { font-family: var(--font-ui); }
html[data-ui='studio'] body { font-family: var(--font-ui) !important; }
html[data-ui='studio'] :is(button,input,select,textarea) { font-family: var(--font-ui); }
:is(.startup-page,.policy-page) :is(h1,h2,h3,h4), html[data-ui='studio'] :is(h1,h2,h3,h4,.page-title,.section-title,.sidebar-logo-name) {
  font-family: var(--font-heading) !important; font-weight: 600; line-height: 1.35; letter-spacing: -.025em;
}
.startup-page .hero h1 { font-size: clamp(36px,4vw,56px); font-weight: 700; line-height: 1.2; letter-spacing: -.035em; }
.startup-page .hero h1 em { font-style: normal; font-weight: inherit; white-space: normal; }
.startup-page :is(.hero-copy,.hero-visual) { min-width: 0; }
.startup-page .hero-description { font-size: 17px; line-height: 1.8; max-width: 520px; }
:is(.startup-page,.policy-page) .brand { font-family: var(--font-ui); font-size: 21px; font-weight: 700; letter-spacing: -.025em; }
.startup-page .brand small { font-size: 12px; line-height: 1.5; letter-spacing: .06em; }
.startup-page .site-nav { font-size: 14px; gap: 18px; }
.startup-page .site-header .button-small { font-size: 14px; }
.startup-page :is(.eyebrow,.section-label,.purchase-grid article > span) { font-size: 13px; font-weight: 600; letter-spacing: .06em; line-height: 1.6; }
.startup-page :is(.learning-details h2,.audience-section h2,.transparency-section h2) { font-size: clamp(28px,3vw,38px); }
.startup-page :is(.detail-grid h3,.purchase-grid h3,.audience-grid h3,.transparency-grid h3,.privacy-summary h3,.policy-callout h3,.policy-resources h3) { font-size: 21px; }
.startup-page :is(.detail-grid p,.detail-grid li,.purchase-grid p,.audience-grid p,.privacy-summary p,.policy-callout p,.service-facts > div,.policy-resource-card span) { font-size: 15px; line-height: 1.8; }
.startup-page :is(.quiet-note,.small-note,.plan-equivalent,.plan-footnote,.comparison-note,.pricing-notes,.motion-preferences p,.policy-resources-language,.policy-resource-card b) { font-size: 14px; line-height: 1.7; }
.startup-page .plan-card h3 { font-size: 28px; }
.startup-page .plan-price { font-weight: 700; font-size: clamp(32px,3.5vw,44px); letter-spacing: -.035em; }
.startup-page .comparison-table caption { font-size: 22px; font-weight: 600; }
.startup-page .comparison-table { font-size: 14px; }
.startup-page .policy-resource-card strong { font-size: 17px; line-height: 1.55; }

/* Navigation, controls and secondary copy use a readable 13/14/16px scale. */
html[data-ui='studio'] .page-title { font-size: clamp(26px,2.4vw,34px); }
html[data-ui='studio'] :is(.page-sub,.page-subtitle,.page-description,.exam-hero .page-sub,.learning-header p) { font-size: 15px; line-height: 1.75; }
html[data-ui='studio'] :is(.btn,.btn-sm,.sidebar .sidebar-link,.app-search-button,.account-badge,.learning-primary-action,.learning-secondary-action,.course-link) { font-size: 14px; }
html[data-ui='studio'] .sidebar .sidebar-link { min-height: 44px; line-height: 1.5; }
html[data-ui='studio'] .sidebar .sidebar-logo-name { font-size: 17px; }
html[data-ui='studio'] :is(.sidebar-section-label,.sidebar-stat-label,.sidebar-stat-value,.file-sync-badge,.app-breadcrumb,.dashboard-date,.learning-stat small,.learning-section-head > p,.course-tag,.theme-toggle-copy b,.theme-toggle-copy small) { font-size: 13px; letter-spacing: 0; line-height: 1.6; }
html[data-ui='studio'] :is(.sidebar-logo-sub,.learning-eyebrow,.learning-focus-label) { display: none; }
html[data-ui='studio'] :is(.course-card > span:not([class]),.learning-focus-copy > p,.pricing-faq p,.studio-discovery small) { font-size: 15px; line-height: 1.75; }
html[data-ui='studio'] :is(.learning-section-head h2,.section-title,.coach-section-head h2) { font-size: 21px; }
html[data-ui='studio'] :is(.course-card > strong,.learning-level-grid .passport-gate h3) { font-size: 17px; }
html[data-ui='studio'] :is(.learning-level-grid .passport-gate p,.learning-level-grid .passport-gate small,.learning-focus-progress small,.learning-focus-progress p,.learning-focus-progress p b,.public-footer,.skill-card-footer,.ielts-skill-grid small,.feature-search-results small,.feature-search-count,.feature-search-hint) { font-size: 13px; line-height: 1.65; }
html[data-ui='studio'] .learning-task-grid .departure-row > span:nth-child(2) b { font-size: 15px !important; }
html[data-ui='studio'] .learning-task-grid .departure-row > span:nth-child(2) small { font-size: 13px !important; }
html[data-ui='studio'] :is(.main-wrapper,.modal) :is(input:not([type='checkbox']):not([type='radio']),select,textarea) { font-size: 16px; }
html[data-ui='studio'] :is(.coach-plan-copy span,.coach-history-item small,.coach-kpi small,.coach-chip,.coach-mistake-item small,.coach-part-row,.toeic-cat-count,.toeic-full-test-note,.toeic-full-test-header p,.toeic-full-test-clock small,.toeic-full-test-instruction span,.toeic-full-test-nav-part h3,.toeic-reading-context-image figcaption,.auth-field-hint,.auth-session-note,.account-check span) { font-size: 14px; line-height: 1.65; }
/* Module styles contain older 9-12px copy; these semantic rules keep it legible. */
html[data-ui='studio'] :is(.main-wrapper,.modal) small { font-size: 13px !important; line-height: 1.65; }
html[data-ui='studio'] .main-wrapper p { font-size: 15px !important; line-height: 1.75; }
html[data-ui='studio'] .main-wrapper label { font-size: 14px; line-height: 1.6; }
html[data-ui='studio'] :is(.btn,.btn-sm) { font-size: 14px !important; }
html[data-ui='studio'] :is(.orbit-action-label,.passport-gate-stamp,.pwa-install-status,.pwa-reminder-status,.pwa-privacy-note,.study-studio-status,.study-plan-note-field,.english-practice-saved,.exam-details-hint,.toeic-content-disclaimer,.exam-category-label,.ielts-practice-availability,.hero-stat-label,.sidebar-header-title,.tenses-subtitle,.theory-section-badge,.formula-type-chip) { font-size: 13px; line-height: 1.6; letter-spacing: 0; }
html[data-ui='studio'] :is(.bp-eyebrow,.bp-stages-kicker,.study-studio-kicker,.english-practice-kicker,.ielts-eyebrow,.pwa-settings-kicker) { display: none; }
html[data-ui='studio'] :is(.learning-level-grid .passport-gate-stamp,.learning-level-grid .passport-gate > span,.bp-stage-progress > span,.bp-progress-card > div:not(.bp-progress-ring) span,.study-plan-empty b,.ielts-practice-stats span,.vf-hero-stats span,.vf-verb-forms span,.english-practice-token) { font-size: 13px; line-height: 1.65; }

/* At the thread's edges, scrolling continues to the surrounding page.
   The welcome view grows with its cards; conversations keep an inner scroll. */
.flow-chat { font-family: var(--font-ui); font-size: 15px; line-height: 1.65; }
.flow-chat .flow-chat-brand { font-family: var(--font-ui); font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.flow-chat .flow-brand-coach { font-weight: 500; }
.flow-chat .flow-chat-topbar { padding: 18px 24px; min-height: 76px; flex-wrap: wrap; }
.flow-chat .flow-chat-topbar h2 { font-size: 21px; font-weight: 600; line-height: 1.35; letter-spacing: -.025em; }
.flow-chat .flow-chat-thread { overscroll-behavior-y: auto; padding: 28px 24px; }
.flow-chat .flow-chat-thread:has(.flow-welcome:not([hidden])) { height: auto; min-height: 0; max-height: none; overflow-y: visible; }
.flow-chat .flow-welcome { max-width: 600px; }
.flow-chat .flow-welcome h3 { font-family: var(--font-heading); font-size: clamp(24px,2.2vw,30px); font-weight: 600; line-height: 1.4; letter-spacing: -.025em; margin: 12px 0; }
.flow-chat .flow-welcome p { font-size: 15px; line-height: 1.75; color: #53645a; }
.flow-chat :is(.flow-service-status,.flow-goal-bar,.flow-goal-bar select,.flow-quota) { font-size: 13px; color: #53645a; }
.flow-chat .flow-goal-bar { flex-wrap: wrap; padding: 12px 24px; }
.flow-chat .flow-mode-heading { font-size: 13px; padding-top: 22px; }
.flow-chat :is(.flow-mode-list small,.flow-sidebar-bottom p,.flow-sidebar-bottom #claude-api-plan,.flow-sidebar-bottom a) { font-size: 13px; line-height: 1.6; color: #53645a; }
.flow-chat :is(.flow-new-chat,.flow-mode-list b,.flow-suggestions b) { font-size: 14px; font-weight: 600; }
.flow-chat .flow-mode-list button { min-width: 0; }
.flow-chat .flow-suggestions { margin-top: 20px; gap: 10px; }
.flow-chat .flow-suggestions button { padding: 14px; }
.flow-chat .flow-suggestions span { font-size: 13px; line-height: 1.6; color: #53645a; }
.flow-chat .flow-input-shell textarea { font-size: 16px; line-height: 1.65; min-height: 96px; overscroll-behavior-y: auto; }
.flow-chat .flow-input-shell textarea::placeholder { color: #637267; }
.flow-chat .flow-send { font-size: 14px; font-weight: 600; min-height: 40px; padding: 8px 14px; }
.flow-chat :is(.flow-compose-tools,.flow-input-help,.flow-send-notice,.flow-privacy-note,.flow-response-note) { font-size: 13px; line-height: 1.65; color: #53645a; }
.flow-chat .flow-compose-tools { flex-wrap: wrap; }
.flow-chat .flow-message-content { font-size: 16px; line-height: 1.8; }
.flow-chat .flow-message-label { font-size: 13px; }
.flow-chat .flow-feedback-section h3 { font-family: var(--font-heading); font-size: 16px; font-weight: 600; }
.flow-chat .flow-error-list p { font-size: 15px; line-height: 1.75; }
@media (max-width: 600px) {
  .startup-page .brand { font-size: 18px; }
  .startup-page .brand small { font-size: 12px; }
  .startup-page .hero h1 { font-size: clamp(32px,8vw,42px); }
  .startup-page .hero-description { font-size: 16px; }
  .flow-chat .flow-chat-topbar,.flow-chat .flow-chat-thread { padding: 20px 16px; }
  .flow-chat .flow-goal-bar { padding: 12px 16px; gap: 8px; }
  .flow-chat .flow-goal-bar select { max-width: min(225px,100%); }
  .flow-chat .flow-quota { margin-left: 0; white-space: normal; }
  .flow-chat button.flow-new-chat { font-size: 0; }
  .flow-chat .flow-mode-list b { font-size: 13px; }
  .flow-chat .flow-mode-list button { padding: 10px 4px; }
  .flow-chat .flow-welcome h3 { font-size: 24px; }
  .flow-chat .flow-welcome p br { display: none; }
  .flow-chat .flow-suggestions { grid-template-columns: 1fr; }
  .flow-chat .flow-message-content { margin-left: 0; }
}
/* Keep icon slots stable while their font loads (or when browsing offline). */
:where(html[data-ui='studio']) .material-icons { display: inline-block; width: 1em; min-width: 1em; overflow: hidden; white-space: nowrap; flex-shrink: 0; vertical-align: middle; }
@media (max-width: 600px) {
  html[data-ui='studio'] .coach-settings { grid-template-columns: minmax(0,1fr); }
  html[data-ui='studio'] .coach-settings .form-group { min-width: 0; }
  html[data-ui='studio'] .coach-settings :is(input,select) { width: 100%; min-width: 0; max-width: 100%; }
  html[data-ui='studio'] .coach-main-grid { grid-template-columns: minmax(0,1fr); }
  html[data-ui='studio'] .coach-main-grid > .card { min-width: 0; }
  html[data-ui='studio'] .coach-section-head { flex-wrap: wrap; }
  html[data-ui='studio'] .coach-section-head h2 { font-size: 18px; }
  html[data-ui='studio'] .main-wrapper .page { min-width: 0; }
}