/* Reading sizes shared across desktop and mobile; decorative device labels retain their scale. */
:root { --reading-muted: #5d6c5b; }
html { scroll-padding-top: calc(var(--section-nav-height, 64px) + 16px); }
.section-nav { background: var(--paper); z-index: 50; isolation: isolate; }
body { font-size: 16px; }
.hero-desc, .about-body > p:not(.lead), .advantages-grid p,
.solution-copy > p, .scene-detail > p, .mode-for, .mode-card ul,
.process-grid p, .faq-list details > p, .contact > div > p {
  font-size: 16px;
  line-height: 1.9;
}
.hero-desc, .about-body > p:not(.lead), .advantages-grid p,
.solution-copy > p, .scene-detail > p, .process-grid p,
.faq-list details > p, .contact > div > p { color: var(--reading-muted); }
.section-side { font-size: 15px; color: var(--reading-muted); }
.section-kicker, .eyebrow { font-size: 12px; }
.desktop-nav, .header-contact, .section-nav a { font-size: 14px; }
.button, .text-link, .mode-link, .copy-button { font-size: 15px; }
.hero-caption, .hero-foot { font-size: 12px; color: var(--reading-muted); }
.brand small { font-size: 10px; }
.image-topline { font-size: 10px; letter-spacing: 1px; }
.image-label { font-size: 16px; bottom: 43px; }
.image-label small { font-size: 10px; letter-spacing: 1px; color: var(--reading-muted); }
.image-disclaimer { font-size: 12px; }
.facts small { font-size: 13px; color: var(--reading-muted); }
.facts strong > span { font-size: 13px; }
.adv-tag { font-size: 12px; }
.adv-top > span { font-size: 12px; color: var(--reading-muted); }
.solution-tabs button { font-size: 17px; }
.solution-tabs button > span { font-size: 12px; }
.stage-caption, .scene-image-label { font-size: 11px; letter-spacing: 1px; }
.stage-note { font-size: 12px; color: var(--reading-muted); padding-inline: 12px; }
.solution-copy .pill { font-size: 11px; letter-spacing: 1px; }
.chip-row span { font-size: 12px; color: var(--reading-muted); }
.solution-copy dl { font-size: 14px; }
.solution-copy dt { color: var(--reading-muted); }
.solution-copy .small-note, .small-note { font-size: 13px; color: var(--reading-muted); }
.scene-overlay > span { font-size: 11px; }
.scene-overlay p { font-size: 15px; }
.scene-choice strong { font-size: 18px; }
.scene-choice small { font-size: 13px; color: var(--reading-muted); }
.scene-index { font-size: 12px; color: var(--reading-muted); }
.mode-number { font-size: 11px; letter-spacing: 1px; }
.mode-badge { font-size: 12px; }
.mode-card li { line-height: 1.85; }
.cooperation-note { font-size: 13px; line-height: 1.9; color: #b7c8ad; }
.step-number { font-size: 14px; }
.process-grid h3 { font-size: 18px; }
.faq-list summary { font-size: 16px; }
.contact-label, .address { font-size: 15px; }
.address small { font-size: 13px; color: var(--reading-muted); }
.footer { font-size: 12px; color: var(--reading-muted); }
.footer-brand > span { font-size: 10px; }
.dialog h2 + p, .mode-details p { font-size: 15px; line-height: 1.9; color: var(--reading-muted); }
.mode-details strong { font-size: 16px; }
.call-card small { font-size: 13px; color: var(--reading-muted); }
.dialog-footnote, .dialog .small-note { font-size: 13px; color: var(--reading-muted); }
.dialog .button { font-size: 15px; }
.toast { font-size: 14px; }

@media (max-width: 1100px) and (min-width: 761px) {
  .cooperation-grid { gap: 14px; }
  .mode-card { padding-inline: 20px; }
  .mode-top { flex-wrap: wrap; gap: 8px; }
  .mode-for, .mode-card ul { font-size: 15px; }
  .hero-actions { gap: 18px; }
  .section-nav nav { gap: 30px; }
}

@media (max-width: 760px) {
  .brand small { font-size: 9px; letter-spacing: 1.6px; }
  .header-contact { font-size: 14px; gap: 12px; }
  .eyebrow { font-size: 12px; letter-spacing: 1px; }
  .hero-actions { flex-wrap: wrap; gap: 14px 18px; }
  .hero-actions .button, .hero-actions .text-link { font-size: 14px; }
  .hero-actions .button { gap: 14px; padding-inline: 16px; }
  .image-label { font-size: 15px; bottom: 36px; padding-inline: 12px; gap: 8px; }
  .image-label small { font-size: 10px; letter-spacing: .5px; }
  .image-topline { font-size: 10px; letter-spacing: 0; }
  .image-topline > span:last-child { display: none; }
  .image-plus { display: none; }
  .hero-foot { font-size: 12px; gap: 12px; align-items: flex-start; }
  .hero-foot > a { flex-shrink: 0; }
  .section-nav nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; width: 100%; padding: 7px 18px; overflow: visible; }
  .section-nav a { font-size: 14px; padding: 9px 4px; text-align: center; }
  .section-kicker { font-size: 11px; letter-spacing: 1.2px; }
  .about-body .lead { font-size: 19px; }
  .facts small { font-size: 12px; line-height: 1.7; }
  .facts strong > span { font-size: 12px; }
  .advantages-grid article { grid-template-columns: 36px 1fr; gap: 0 15px; }
  .advantages-grid h3 { font-size: 18px; }
  .solution-tabs button { font-size: 16px; gap: 10px; }
  .solution-copy dl > div { gap: 14px; }
  .solution-copy .text-link, .scene-detail > .text-link, .faq .text-link { font-size: 15px; }
  .scene-choice { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .scene-index { display: none; }
  .scene-choice strong { font-size: 17px; }
  .scene-choice small { font-size: 13px; line-height: 1.75; }
  .scene-arrow { grid-column: 2; }
  .scene-overlay p { font-size: 15px; }
  .mode-for, .mode-card ul { font-size: 16px; }
  .mode-link { font-size: 15px; }
  .process-grid h3 { font-size: 18px; }
  .faq-list summary { font-size: 16px; align-items: flex-start; }
  .faq-list summary span { flex-shrink: 0; }
  .contact .button { font-size: 15px; }
  .footer { font-size: 12px; gap: 16px; }
  .footer > a:last-child { margin-left: 0; }
  .mobile-dock { gap: 14px; padding-inline: 18px; }
  .dock-products { font-size: 12px; }
  .dock-cooperation { font-size: 15px; margin-left: 0; }
  .mobile-dock .button { font-size: 15px; min-height: 48px; }
  .dialog-inner { padding-inline: 25px; }
  .dialog-close { width: 44px; height: 44px; top: 5px; right: 6px; }
}