/* Shared readable type scale for the main page and all seven service pages. */
:root { --container: 1120px; --reading-color: #52647e; }
.main-page, .service-page { --container: 1120px; }
body { font-size: 16px; line-height: 1.65; }
.header-inner { max-width: 1120px; }
.site-header { height: 72px; }
.header-nav { font-size: 15px; gap: 24px; color: #52647e; }
.nav-menu { top: 48px; width: 260px; }
.nav-menu a, .mobile-nav a, .mobile-nav button { font-size: 16px; }
.brand { font-size: 26px; }
.button, .hero .button, .final-cta .button, .main-page .final-cta .button {
  font-size: 16px; line-height: 1.4; min-height: 46px; padding: 12px 24px;
}
.header-cta { font-size: 15px; min-height: 44px; padding: 10px 16px; }
.hero h1, .main-hero h1, .service-hero h1 { font-size: 54px; line-height: 1.16; }
.hero-lede, .main-hero .hero-lede, .service-hero .hero-lede {
  font-size: 18px; line-height: 1.65; color: var(--reading-color); margin-top: 16px;
}
.hero-meta, .hero-checks { font-size: 14px; line-height: 1.6; color: #5c6e86; }
.hero-checks { flex-wrap: wrap; gap: 12px 24px; }
.service-name { font-size: 28px; line-height: 1.3; }
.expanded-section, .main-page .expanded-section { padding: 38px 0; }
.philosophy-section, .main-page .philosophy-section { padding-top: 0; }
.expanded-heading { margin-bottom: 24px; }
.expanded-heading h2, .faq-section .expanded-heading h2,
.final-cta h2, .main-page .final-cta h2 { font-size: 32px; line-height: 1.35; }
.expanded-heading .eyebrow, .eyebrow { font-size: 13px; line-height: 1.6; }
.section-lead { font-size: 17px; line-height: 1.75; color: var(--reading-color); margin-top: 12px; }
.info-card, .audience-section .info-card { padding: 22px; }
.cards { gap: 18px; }
.info-card h3, .four .info-card h3, .philosophy-section h3,
.example-notes h3, .preview-actions h3 { font-size: 20px; line-height: 1.45; }
.info-card p, .four .info-card p, .philosophy-section .info-card p,
.audience-section .info-card p, .list-audience .info-card p,
.expanded-process p, .category-grid article > p, .example-notes p,
.preview-actions p { font-size: 16px; line-height: 1.75; color: var(--reading-color); }
.process-number { font-size: 14px !important; line-height: 1.5 !important; }
.expanded-process h3 { font-size: 26px; line-height: 1.4; }
.category-grid h3 { font-size: 25px; line-height: 1.45; }
.category-grid .service-links { font-size: 15px; line-height: 1.7; color: #5d6d83; }
.text-link, .catalog-card .text-link { font-size: 15px; line-height: 1.5; }
.philosophy-section .info-card { padding: 20px; gap: 6px 12px; }
.pale-surface, .main-page .pale-surface { padding: 26px; }
.catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.catalog-card { padding: 20px 18px; }
.catalog-card h3 { font-size: 19px; line-height: 1.4; min-height: 54px; }
.catalog-card p { font-size: 15px; line-height: 1.7; color: var(--reading-color); margin-top: 8px; }
.catalog-card p:nth-of-type(1) { min-height: 51px; }
.catalog-card p:nth-of-type(2) { min-height: 77px; }
.catalog-card .text-link { padding-top: 16px; }
.catalog-card > .number-dot { width: 26px; height: 26px; font-size: 13px; }
.route-card { padding: 22px; }
.route-card h3 { font-size: 19px; line-height: 1.5; }
.route-card > p { font-size: 15px; line-height: 1.7; color: var(--reading-color); }
.route-card > .symbol { float: none; margin-bottom: 10px; }
.route-services { gap: 6px; }
.route-services b { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.preview-actions article { padding: 22px; }
.preview-actions h3 { align-items: baseline; }
.preview-actions .number-dot { flex-shrink: 0; }
.preview-layout .learning-panel, .main-prepare { height: auto; }
.preview-layout .prepare-sentence, .prepare-sentence { font-size: 16px; line-height: 1.6; }
.prepare-meaning { font-size: 17px; line-height: 1.5; }
.root-label, .main-prepare .root-label { font-size: 16px; line-height: 1.5; }
.pill, .preview-layout .pill, .proof-label, .formula-tabs { font-size: 14px; line-height: 1.6; }
.alphabet-labels, .alphabet-labels .pill, .formula-caption,
.chunk-role, .hanja-definition, .hanja-example, .hanja-example .example-label,
.hanja-tile small, .contrast-panel small, .hanja-example .contrast-panel small,
.lesson-tools b, .meaning-bubbles span { font-size: 14px; line-height: 1.65; }
.alphabet-panel h4, .chunk-panel h4, .browser-panel h4 { font-size: 21px; line-height: 1.45; }
.hanja-example .contrast-panel h3, .contrast-panel h3 { font-size: 16px; line-height: 1.5; }
.story-chunks p, .syntax-line, .chunk-row .english { font-size: 18px; line-height: 1.5; }
.story-chunks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-chunks p { min-width: 0; overflow-wrap: anywhere; }
.story-chunks .tag { font-size: 13px; line-height: 1.5; }
.conversation-copy .ko { font-size: 20px; line-height: 1.5; }
.conversation-copy .en { font-size: 15px; line-height: 1.6; color: var(--reading-color); }
.related h3 { font-size: 18px; line-height: 1.5; }
.related-card b { font-size: 17px; line-height: 1.45; }
.related-card p { font-size: 14px; line-height: 1.65; color: var(--reading-color); }
.brand-statement h2, .rootflow-page .brand-statement h2 { font-size: 32px; line-height: 1.35; }
.brand-statement p, .brand-statement .qualification { font-size: 16px; line-height: 1.75; }
.service-page .brand-statement { padding: 34px 24px; }
.faq-item summary, .service-page .faq-item summary, .main-page .faq-item summary {
  padding: 16px 22px; font-size: 17px; line-height: 1.6; gap: 14px;
}
.faq-item p, .service-page .faq-item p, .main-page .faq-item p {
  padding: 0 22px 18px; font-size: 16px; line-height: 1.75; color: var(--reading-color);
}
.faq-list { gap: 10px; }
.faq-side { grid-template-columns: 230px minmax(0, 1fr); }
.final-cta, .main-page .final-cta { padding: 38px 20px; }
.site-footer { padding: 24px 0; }
.footer-inner, .footer-slogan, .footer-motto { font-size: 14px; line-height: 1.65; color: #5d6e86; }
.service-dialog { max-width: 880px; }
.dialog-header h2 { font-size: 28px; line-height: 1.4; }
.dialog-intro { font-size: 16px; line-height: 1.65; color: var(--reading-color); }
.service-card h3 { font-size: 20px; line-height: 1.4; }
.service-card p { font-size: 15px; line-height: 1.65; color: var(--reading-color); }

@media (min-width: 701px) and (max-width: 1050px) {
  .container, .service-page .container, .wordformula-page .container { width: calc(100% - 48px); }
  .header-inner { width: calc(100% - 48px); }
  .header-nav { gap: 14px; font-size: 14px; }
  .brand { font-size: 23px; }
  .header-cta { font-size: 14px; padding: 10px 12px; }
  .hero h1, .main-hero h1, .service-hero h1, .rootflow-page .service-hero h1 { font-size: 44px; line-height: 1.2; }
  .three, .four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-grid, .process-grid, .example-layout, .audience-layout,
  .list-audience .audience-layout, .preview-layout, .hanja-intro-layout { grid-template-columns: 1fr; }
  .category-grid { gap: 32px; }
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .philosophy-section .cards { grid-template-columns: 1fr; }
  .expanded-process { border: 0; padding-right: 0; }
  .preview-actions { grid-template-columns: 1fr 1fr; }
  .related { border-left: 0; padding-left: 0; }
  .hanja-example .example-visual { grid-template-columns: 1fr; }
  .hanja-example .example-notes { grid-template-columns: 1fr; }
  .chunking-example .example-visual { order: 0; transform: none; }
}

@media (max-width: 700px) {
  .site-header { height: 66px; }
  .mobile-nav.open { top: 66px; }
  .brand { font-size: 24px; }
  .hero h1, .main-hero h1, .service-hero h1 { font-size: 36px; line-height: 1.2; }
  .hero-lede, .main-hero .hero-lede, .service-hero .hero-lede { font-size: 16px; line-height: 1.7; }
  .hero-meta, .hero-checks { font-size: 14px; }
  .hero-checks { gap: 8px 14px; }
  .expanded-heading h2, .faq-section .expanded-heading h2,
  .final-cta h2, .main-page .final-cta h2 { font-size: 27px; line-height: 1.4; }
  .section-lead { font-size: 16px; }
  .expanded-section, .main-page .expanded-section { padding: 32px 0; }
  .philosophy-section, .main-page .philosophy-section { padding-top: 0; }
  .pale-surface, .main-page .pale-surface { padding: 20px; }
  .catalog-section .container { padding: 20px 14px; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .catalog-card { padding: 18px 12px; }
  .catalog-card h3 { font-size: 17px; line-height: 1.45; min-height: 0; overflow-wrap: anywhere; }
  .catalog-card p { font-size: 14px; line-height: 1.7; }
  .catalog-card p:nth-of-type(1), .catalog-card p:nth-of-type(2) { min-height: 0; }
  .catalog-card .text-link { font-size: 14px; }
  .route-services b { font-size: 14px; }
  .preview-actions article { padding: 20px 16px; }
  .philosophy-section .info-card { padding: 16px; }
  .faq-side { grid-template-columns: 1fr; }
  .faq-item summary, .service-page .faq-item summary, .main-page .faq-item summary {
    padding: 16px; font-size: 16px;
  }
  .faq-item p, .service-page .faq-item p, .main-page .faq-item p { padding: 0 16px 16px; }
  .brand-statement h2, .rootflow-page .brand-statement h2 { font-size: 28px; }
  .footer-inner { display: block; }
  .footer-left { align-items: flex-start; flex-wrap: wrap; }
  .footer-slogan { border-left: 0; padding-left: 0; }
  .dialog-header h2 { font-size: 24px; }
  .dialog-intro { font-size: 16px; }
  .service-card h3 { font-size: 18px; }
}

.service-page .service-hero .button,
.service-page .final-cta .button {
  max-width:calc(100% - 32px);
  white-space:normal;
  text-align:center;
  line-height:1.5;
}