/* Application shell and responsive rules shared by all JS-rendered routes. */
html { background: #fff; }
html[data-theme="dark"] { background: #09090b; }
body { margin: 0; }
#app { min-width: 0; min-height: 100svh; }
.app-status { min-height: 70svh; padding: 24px; display: grid; place-content: center; gap: 12px; text-align: center; color: #1d1d1f; font: 16px/1.6 system-ui, sans-serif; }
html[data-theme="dark"] .app-status { color: #f5f5f7; }
.app-status p { margin: 0; }
.app-status button, .route-notice button { padding: 10px 20px; border: 0; border-radius: 999px; background: #0071e3; color: #fff; font: inherit; cursor: pointer; }
.route-notice { position: fixed; z-index: 200; top: 64px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 20px; border: 1px solid #d5d5da; border-radius: 18px; background: #fff; color: #1d1d1f; box-shadow: 0 10px 35px #0002; font: 14px/1.5 system-ui, sans-serif; }
.route-notice button { margin-left: 12px; }
.no-script { padding: 24px; font: 16px/1.6 system-ui, sans-serif; }

/* Typography follows the content column instead of the screen's width alone. */
#app h1 { --heading-base: clamp(2rem, 5.6vw, 5rem); }
#app h2 { --heading-base: clamp(1.5rem, 3.5vw, 3.5rem); }
#app :is(h1, h2) { width: 100%; font-size: var(--heading-size, var(--heading-base)); line-height: 1.18; letter-spacing: -.035em; max-width: 100%; min-width: 0; text-wrap: balance; overflow-wrap: anywhere; }
#app .heading-line { display: block; white-space: nowrap; color: inherit; }
#app .heading-line em { display: inline; }
#app .manifesto h2 > .heading-line { color: inherit; }
#app h2[data-adaptive="natural"], #app h1[data-adaptive="natural"] { text-wrap: balance; }
#app :is(p, h3, b, small, li) { overflow-wrap: anywhere; }
#app :is(.section-head, .manifesto-grid, .trust-copy, .contact-grid, .about, .error-layout) > * { min-width: 0; }
#app :is(.product-intro, .product-row, .services-wrap, .process, .about, .contact, .site-footer, .product-section) { content-visibility: visible; contain-intrinsic-size: none; }
#app :is(.section, .product-section) { padding-block: clamp(64px, 8vw, 120px); }
#app .product-shell { width: min(1240px, calc(100% - clamp(32px, 5vw, 80px))); }
#app .hero-copy { width: min(100%, 1080px); }
#app .product-copy { width: 100%; }
#app .product-hero-copy { width: min(100%, 1080px); max-width: 1080px; }
#app .section-heading { max-width: min(100%, 1040px); }
#app .product-hero { min-height: auto; padding-block: clamp(64px, 7vw, 104px) 56px; }
#app .hero { min-height: auto; padding-top: clamp(64px, 7vw, 108px); }
#app .section-head { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(24px, 5vw, 64px); }
#app .manifesto-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 5vw, 72px); }
#app .trust-copy { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 72px); }
#app .about { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: clamp(24px, 5vw, 64px); padding: clamp(32px, 6vw, 80px); min-height: 0; }
#app .contact-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); padding: clamp(28px, 5vw, 72px); min-height: 0; }
#app .error-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); }
#app .error-copy h1 { --heading-base: clamp(2rem, 4.8vw, 4.5rem); }
#app :is(.hero-actions, .product-hero-actions, .footer-links, .footer-contact-list) { flex-wrap: wrap; }
#app .product-button { max-width: 100%; text-align: center; }
#app .product-kicker { overflow-wrap: anywhere; }
#app .product-footer { margin-top: clamp(40px, 7vw, 96px); }
#app .site-footer { padding-top: clamp(32px, 4vw, 56px); }
#app .back-to-top { bottom: max(60px, env(safe-area-inset-bottom)); }

/* The same compact menu also handles long translated navigation at wide sizes. */
#app .site-header.is-compact { grid-template-columns: 1fr auto auto; gap: 8px; }
#app .site-header.is-compact .desktop-nav, #app .site-header.is-compact .header-cta { display: none; }
#app .site-header.is-compact .mobile-menu { display: block; }
#app .mobile-menu summary { width: 34px; height: 34px; display: grid; place-content: center; gap: 5px; list-style: none; border: 1px solid var(--line); border-radius: 50%; background: var(--glass-fill-strong); cursor: pointer; }
#app .mobile-menu summary::-webkit-details-marker { display: none; }
#app .mobile-menu summary span { width: 17px; height: 1px; background: var(--ink); }
#app .mobile-menu[open] summary span:first-child { transform: translateY(3px) rotate(45deg); }
#app .mobile-menu[open] summary span:last-child { transform: translateY(-3px) rotate(-45deg); }
#app .mobile-menu nav { position: fixed; top: 48px; inset-inline: 0; padding: 16px 24px 24px; display: grid; background: var(--white); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px #0002; }
#app .mobile-menu nav a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 17px; }

@media (max-width: 1180px) {
  #app .site-header { grid-template-columns: 1fr auto auto; gap: 8px; }
  #app .desktop-nav, #app .header-cta { display: none; }
  #app .mobile-menu { display: block; justify-self: end; }
  #app .product-brand-name { display: none; }
  #app .process-steps, #app .about-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  #app .error-layout { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  #app :is(.section-head, .manifesto-grid, .trust-copy, .about, .contact-grid) { grid-template-columns: 1fr; }
  #app .section-head > p { max-width: 680px; }
  #app .contact-actions, #app .contact-directory { width: 100%; }
  #app .about-mark { width: min(52vw, 240px); }
  #app .hero-system { margin-top: 24px; }
}
@media (max-width: 560px) {
  #app h1 { --heading-base: clamp(2rem, 8.8vw, 3rem); }
  #app h2 { --heading-base: clamp(1.5rem, 6.7vw, 2.1rem); }
  #app .site-header { grid-template-columns: minmax(24px, 1fr) auto 34px; padding-inline: 12px; gap: 6px; }
  #app .brand > span:nth-child(2) { display: none; }
  #app .header-actions { gap: 4px; }
  #app .preference-control select { width: auto; max-width: 74px; color: var(--ink); }
  #app .theme-control select { max-width: 82px; }
  #app .product-hero { padding-top: 56px; }
  #app :is(.hero-lead, .product-hero-lead) { font-size: clamp(16px, 4.5vw, 19px); line-height: 1.65; }
  #app :is(.process-steps, .about-principles, .footer-contact-list) { grid-template-columns: 1fr; }
  #app .contact-partners { grid-template-columns: 1fr; }
  #app .product-row { padding-inline: 20px; }
  #app .cta-panel { padding-inline: 24px; }
  #app .trust-panel { padding-inline: 24px; }
  #app .error-main { padding-block: 40px 56px; }
}