/* Ter Bron — refinements on top of the handoff styles (Oct 2026). */
.hero .hero-sub { max-width: 34rem; margin: 1.25rem 0 0; font-size: 1.125rem; line-height: 1.55; color: var(--white); opacity: .88; }
@media (max-width: 760px) { .hero .hero-sub { font-size: 1rem; } }

/* Four metrics instead of three */
.product-metrics.metrics-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.product-metrics.metrics-4 dd { font-size: clamp(3rem,5.2vw,5rem); }
.product-metrics.metrics-4 dd.metric-word { font-size: clamp(2rem,3.4vw,3.25rem); line-height: 1.15; }
.product-metrics.metrics-4 dd.metric-context, .product-metrics.metrics-4 dd.metric-context { font-size: .875rem; font-weight: 400; letter-spacing: 0; line-height: 1.5; }
@media (max-width: 1000px) { .product-metrics.metrics-4 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) { .product-metrics.metrics-4 { grid-template-columns: 1fr; } .product-metrics.metrics-4 dd { font-size: 3.5rem; } .product-metrics.metrics-4 dd.metric-word { font-size: clamp(2rem,7vw,3rem); } .product-metrics.metrics-4 dd.metric-context { font-size: .875rem; } }

.capability-facts { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .75rem; max-width: 70ch; }
.capability-facts li { padding-left: 1.25rem; position: relative; line-height: 1.6; }
.capability-facts li::before { content: ""; position: absolute; left: 0; top: .6em; width: .5rem; height: .5rem; background: var(--lime); }

/* Where MANTIS fits */
.fit-section { background: var(--paper); color: var(--ink); }
.fit-section h2 { font-size: clamp(2.25rem,4vw,3.75rem); line-height: 1.06; letter-spacing: -.04em; margin: 0 0 1rem; }
.fit-lead { font-size: 1.25rem; line-height: 1.5; font-weight: 600; margin: 0 0 2.5rem; max-width: 40ch; }
.fit-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; margin-bottom: 2.5rem; }
.fit-col { background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--line); padding: 1.5rem; }
.fit-col h3 { font-size: 1.125rem; margin: 0 0 1rem; }
.fit-col ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .6rem; line-height: 1.5; }
.fit-yes { border-top-color: var(--lime); }
.fit-maybe { border-top-color: #8fa3ad; }
.fit-no { border-top-color: var(--navy); }
@media (max-width: 900px) { .fit-grid { grid-template-columns: 1fr; } }

/* Next unit: present, but smaller than the unit sold today */
.next-product { padding-block: clamp(48px,6vw,80px); }
.next-product h2 { font-size: clamp(1.75rem,2.8vw,2.75rem); }
.next-product-number { font-size: clamp(3.5rem,7vw,6rem); margin: 1.25rem 0 .5rem; }
@media (max-width: 760px) { .next-product-number { font-size: clamp(3.5rem,16vw,5rem); } }

/* Language switcher */
.lang-switch { position: relative; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; }
.lang-switch summary { list-style: none; cursor: pointer; padding: 6px 10px; border: 1px solid #4a5a63; color: #e8eef0; min-height: 32px; display: flex; align-items: center; gap: 6px; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.lang-switch[open] summary { border-color: var(--lime); }
.lang-switch ul { position: absolute; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px 0; list-style: none; background: var(--deep); border: 1px solid #31414a; min-width: 200px; z-index: 40; box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.lang-switch li a { display: block; padding: 9px 16px; color: #e8eef0; font-weight: 500; letter-spacing: 0; }
.lang-switch li a:hover, .lang-switch li a:focus-visible { background: var(--panel); }
.lang-switch li a[aria-current] { color: var(--lime); }
.mobile-langs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; margin-top: 8px; border-top: 1px solid #31414a; }
.mobile-nav .mobile-langs a, .mobile-nav .mobile-langs a:last-child { font-size: .8125rem; font-weight: 600; padding: 6px 10px; border: 1px solid #4a5a63; color: #e8eef0; }
.mobile-nav .mobile-langs a[aria-current] { border-color: var(--lime); color: var(--lime); }
@media (max-width: 760px) { .lang-switch { display: none; } }

/* Right-to-left (Arabic) */
@media (min-width: 761px) {
  [dir="rtl"] .hero-image { left: 0; right: auto; }
  [dir="rtl"] .hero-shade { transform: scaleX(-1); }
  [dir="rtl"] .lang-switch ul { right: auto; left: 0; }
}
[dir="rtl"] .product-metrics dd:not(.metric-context),
[dir="rtl"] .next-product-number { direction: ltr; unicode-bidi: isolate; text-align: right; }
[dir="rtl"] .capability-facts li { padding-left: 0; padding-right: 1.25rem; }
[dir="rtl"] .capability-facts li::before { left: auto; right: 0; }
[dir="rtl"] .fit-col ul { padding-left: 0; padding-right: 1.1rem; }

/* Malayalam: self-hosted Noto Sans Malayalam (SIL OFL), used only for Malayalam glyphs */
@font-face { font-family: "Noto Sans Malayalam"; src: url("assets/fonts/noto-sans-malayalam-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0D00-0D7F, U+200C-200D, U+25CC; }
:root:lang(ml) { --font-sans: "Roboto", "Noto Sans Malayalam", system-ui, sans-serif; }
:lang(ml) body { line-height: 1.65; }
:lang(ml) h1, :lang(ml) h2, :lang(ml) h3 { line-height: 1.3; letter-spacing: 0; }
:lang(ml) h1, :lang(ml) h2, :lang(ml) h3 { overflow-wrap: anywhere; }
@media (max-width: 760px) { :lang(ml) h2 { font-size: clamp(1.6rem, 7vw, 2.25rem); } :lang(ml) .hero h1 .hero-title-line { font-size: clamp(1.6rem, 7.4vw, 2.4rem); } }

/* Flags in the language switcher */
.lang-switch .flag, .mobile-langs .flag { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.18); flex: 0 0 auto; }
.lang-switch li a { display: flex; align-items: center; gap: 10px; }
.mobile-nav .mobile-langs a { display: inline-flex; align-items: center; gap: 8px; }
.fit-grid--two { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width: 900px) { .fit-grid--two { grid-template-columns: 1fr; } }