/* Shared finishing rules. Loaded after the legacy theme reset. */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow-x: visible; }
body > article { flex: 1 0 auto; }
body > header, body > footer, body > section { flex-shrink: 0; }
img { max-width: 100%; height: auto; }
a:focus-visible, button:focus-visible { outline: 3px solid #5264cb; outline-offset: 4px; }
button { font-family: inherit; }
[hidden] { display: none !important; }
html { scroll-padding-top: 95px; }
body.menu-open { overflow: hidden; }

/* A fixed-height header with a separate disclosure navigation on smaller screens. */
.header-morix { flex-shrink: 0; }
.header-logo a { display: flex; align-items: center; height: 100%; }
.header-logo img { display: block; max-width: none; height: 100%; width: auto; }
.header-menu-toggle, .mobile-menu, .menu-backdrop { display: none; }
@media (min-width: 1025px) and (max-width: 1200px) {
  .header-container { padding-left: 24px; column-gap: 24px; grid-template-columns: auto minmax(0, 1fr) 180px; }
  .header-logo { height: 27px; }
  .header-nav { gap: 20px; }
  .header-nav .nav-item { font-size: 14px; letter-spacing: .5px; }
}
@media (max-width: 1024px) {
  .header-container { grid-template-columns: minmax(0, 1fr) 64px 104px; grid-template-rows: 75px; column-gap: 8px; padding-left: 20px; }
  .header-logo { grid-column: 1; grid-row: 1; height: 26px; justify-self: start; }
  .header-nav, .header-contact-link { display: none; }
  .header-buttons { grid-column: 3; grid-row: 1; }
  .header-menu-toggle { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; min-height: 60px; width: 64px; padding: 6px 0; border: 0; color: #24328f; background: transparent; cursor: pointer; }
  .menu-toggle-label { font-size: 11px; line-height: 1.2; font-weight: 500; white-space: nowrap; }
  .menu-icon { position: relative; width: 25px; height: 19px; display: block; }
  .menu-icon span { position: absolute; left: 0; width: 25px; height: 2px; background: currentColor; transition: transform .15s, opacity .15s; }
  .menu-icon span:nth-child(1) { top: 0; }
  .menu-icon span:nth-child(2) { top: 8px; }
  .menu-icon span:nth-child(3) { top: 16px; }
  [aria-expanded="true"] .menu-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  [aria-expanded="true"] .menu-icon span:nth-child(2) { opacity: 0; }
  [aria-expanded="true"] .menu-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .header-download { flex-direction: column; gap: 4px; font-size: 12px; line-height: 1.3; }
  .header-download-icon { width: 20px; height: 24px; }
  .header-download-label span { display: block; text-align: center; }
  .mobile-menu { position: fixed; display: flex; flex-direction: column; top: 75px; left: 0; right: 0; max-height: calc(100dvh - 75px); overflow-y: auto; padding: 16px max(24px, calc((100% - 720px) / 2)) 28px; background: #fff; box-sizing: border-box; box-shadow: 0 12px 24px #00000012; z-index: 2; }
  .mobile-menu > a { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 4px; border-bottom: 1px solid #e5e7ed; box-sizing: border-box; font-size: 16px; line-height: 1.5; font-weight: 600; color: #303030; }
  .mobile-menu > .mobile-menu-contact { color: #002bad; }
  .menu-backdrop { display: block; position: fixed; inset: 75px 0 0; width: 100%; height: calc(100dvh - 75px); padding: 0; border: 0; background: #11182766; z-index: 1; }
}
@media (max-width: 360px) {
  .header-container { padding-left: 12px; grid-template-columns: minmax(0, 1fr) 56px 96px; column-gap: 6px; }
  .header-logo { height: 24px; }
  .header-menu-toggle { width: 56px; }
}

/* Footer links wrap as complete labels; short pages still fill the screen. */
.footer-morix { margin-top: auto; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 24px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 40px; font-size: 13px; line-height: 1.6; letter-spacing: .3px; white-space: nowrap; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 600px) {
  .footer-links { flex-direction: column; gap: 0; }
  .footer-links a { min-height: 44px; font-size: 14px; }
  .footer-content { gap: 20px; }
}

/* Articles, long headings and diagrams share the same readable content rhythm. */
.single, .archive { padding-top: 32px; }
.single .content_inner img { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.single h1 { line-height: 1.55; overflow-wrap: anywhere; }
.breadcrumb_list { align-items: flex-start; gap: 0; }
.breadcrumb_list li { min-width: 0; line-height: 1.7; align-items: baseline; }
.breadcrumb_list li:not(:last-child) { flex-shrink: 0; white-space: nowrap; }
.breadcrumb_list li:last-child { overflow-wrap: anywhere; }
.breadcrumb_list li::before { flex: 0 0 5px; align-self: baseline; }
.page .content_inner h2 { line-height: 1.55; text-wrap: balance; }
.page .content_inner h2::before { top: .3em; transform: none; height: 1em; border-radius: 3px; width: 5px; }
.page .content_inner > :first-child { margin-top: 0; }
.page .content_inner { margin-top: 16px; }
.function-figure { margin: 24px 0 40px; }
.function-figure > a { display: block; text-align: center; }
.function-figure img { display: block; margin-inline: auto; }
.image-zoom-label { display: inline-block; margin-top: 12px; color: #002bad; font-size: 13px; text-decoration: underline; }
.ocr-note, .page .content_inner .ocr-note { margin: 16px 0 0; font-size: 13px; color: #555; line-height: 1.8; }
.archive .post_list { margin-top: 32px; }
@media (max-width: 768px) {
  .page h1 { font-size: clamp(23px, 5.6vw, 28px); line-height: 1.5; }
  .page .eyecatch h1 { width: calc(100% - 32px); }
  .page .content { padding: 28px 0 48px; }
  .page .content_inner { margin-top: 16px; }
  .page .content_inner h2 { font-size: 23px; margin: 36px 0 20px; padding-left: 16px; }
  .page .content_inner h3 { font-size: 19px; margin: 28px 0 16px; }
  .page .content_inner p { line-height: 1.85; }
  .single, .archive { padding-top: 24px; }
  .single h1 { font-size: 24px; }
  .single .content { padding-top: 28px; }
  .breadcrumb { font-size: 12px; }
  .breadcrumb_list li::before { margin-inline: 6px; }
  .recruit-page .content_inner table, .recruit-page .content_inner tbody, .recruit-page .content_inner tr { display: block; width: 100%; }
  .recruit-page .content_inner table th, .recruit-page .content_inner table td { display: block; width: auto; min-width: 0; padding: 0; text-align: left; }
  .recruit-page .content_inner table tr { box-sizing: border-box; padding: 20px 4px; border-bottom: 1px solid #d5d5d5; }
  .recruit-page .content_inner table th { margin-bottom: 8px; border: 0; color: #24328f; }
  .recruit-page .content_inner table td { border: 0; line-height: 1.85; }
}

/* TOP: readable awards at every breakpoint and natural text flow on phones. */
.hero-simple .hero-award-card { box-sizing: border-box; min-width: 0; }
.hero-simple .hero-award-text { font-size: 13px; line-height: 1.65; }
@media (min-width: 769px) and (max-width: 1279px) {
  .hero-simple { padding: 72px 0; }
  .hero-simple-container { grid-template-columns: 1fr; gap: 36px; }
  .hero-simple-text { max-width: 800px; }
  .hero-simple-awards { max-width: 720px; }
}
@media (max-width: 768px) {
  .hero-simple { padding: 44px 0; }
  .hero-simple-container { gap: 28px; }
  .hero-simple-title { line-height: 1.65; }
  .hero-simple-description { letter-spacing: .2px; line-height: 1.95; }
  .hero-simple-awards { display: grid; grid-template-columns: 1fr; max-width: none; gap: 10px; }
  .hero-simple .hero-award-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 18px; border-radius: 6px; background-image: none; border-color: #e9e9df; }
  .hero-simple .hero-award-image { width: 64px; max-width: none; }
  .hero-simple .hero-award-text { font-size: 12px; text-align: left; letter-spacing: 0; }
  .hero-simple .hero-award-text br { display: none; }
  .hero-simple .hero-award-card:nth-child(2) .hero-award-text { max-width: 240px; }
  .sme-title, .section-title { font-size: 23px; line-height: 1.6; letter-spacing: .3px; }
  .sme-description p, .product-section .product-description p { text-align: left; letter-spacing: .2px; line-height: 1.9; }
  .feature-cards { gap: 24px; margin-bottom: 36px; }
  .feature-card { width: 100%; max-width: 480px; padding: 26px 24px; gap: 16px; }
  .feature-card-desc { line-height: 1.9; }
  .feature-card-title { font-size: 19px; line-height: 1.6; text-wrap: balance; }
  .feature-card-title br, .product-section .section-title br { display: initial; }
  .feature-card-icon { width: 80px; height: 76px; }
  .feature-card-icon img { max-width: 76px; max-height: 70px; }
  .news-item { padding: 18px 0; }
  .news-item a { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0; }
  .news-text { font-size: 15px; line-height: 1.75; }
  .news-date { font-size: 13px; }
  .product-hero-catch { text-wrap: balance; line-height: 1.7; }
  .product-hero-keywords { gap: 8px; }
  .product-hero-keywords .keyword-label { letter-spacing: 0; }
  .system-section .price-table th, .system-section .price-table td { letter-spacing: .2px; font-weight: 500; }
}
@media (min-width: 560px) and (max-width: 768px) {
  .hero-simple-awards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-simple .hero-award-card { display: flex; padding: 18px 12px; }
  .hero-simple .hero-award-text { text-align: center; }
}

/* Completion and error pages: clear return action, consistent vertical spacing. */
.thanks-page { display: flex; align-items: center; padding-block: 64px; box-sizing: border-box; }
.contact-thanks { padding-top: 0; }
.contact-thanks h1 { font-size: 28px; line-height: 1.6; text-align: center; margin-bottom: 24px; }
.contact-thanks p { line-height: 1.9; }
.contact-thanks p:last-of-type { margin-bottom: 0; }
.contact-thanks .thanks-back { margin-top: 32px; }
.return-link { display: inline-flex; min-height: 50px; min-width: 200px; align-items: center; justify-content: center; border: 1px solid #002bad; border-radius: 30px; color: #002bad; font-weight: 700; }
.return-link:hover { background: #002bad; color: white; }
@media (max-width: 768px) {
  .thanks-page { padding-block: 48px; }
  .contact-thanks h1 { font-size: 24px; text-wrap: balance; }
  .contact-thanks p { text-align: left; }
  .contact-thanks .thanks-back { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* WorkGear hero: outlined text and artwork exported together from Figma. */
.product-hero-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 518px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.product-hero-badges > li { min-width: 0; aspect-ratio: 166 / 169; }
.product-hero-badges img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 480px) {
  .product-hero-badges { gap: 4px; }
}

/* Keep the desktop action beside the copy; on phones follow the product details. */
.product-hero-cta--mobile { display: none; }
@media (max-width: 768px) {
  .product-hero-cta--desktop { display: none; }
  .product-hero-cta--mobile { display: flex; align-self: center; }
}