/* ==========================================================================
   claude-polish-home · r1.5 (2026-10-31, after code review)
   Homepage-only polish layer. Loaded from layout/theme.html inside
   {{#if request.page_type == `index`}} so no other page is affected.
   Roll back: remove the <link> line in layout/theme.html (this file can stay).
   Selectors use section ids because the home components ship inline <style>
   blocks later in the document.
   ========================================================================== */

/* --- 1 · Vietnamese display type ------------------------------------------
   Stacked diacritics (Ố Ậ Ề Ộ) touch the line above at 1.02–1.12. */
html[lang^="vi"] #ms-fitment h2,
html[lang^="vi"] #ms-series h2,
html[lang^="vi"] #ms-about h2,
html[lang^="vi"] #ms-who-we-are h2,
html[lang^="vi"] .ms-home .ms-system h2,
html[lang^="vi"] .ms-home .ms-contact-cta h2,
html[lang^="vi"] #ms-lines .ms-lines__title.msb-dsp {
  line-height: 1.16 !important;
}
html[lang^="vi"] .ms-home .ms-system .ms-dot-title { line-height: 1.08 !important; }

/* --- 2 · "Who we are" joins the section system ---------------------------- */
#ms-who-we-are.ms-r20-about {
  background:
    linear-gradient(color-mix(in srgb, var(--b-indigo) 65%, transparent), color-mix(in srgb, var(--b-indigo) 65%, transparent)),
    var(--msb-asphalt, none),
    var(--b-indigo);
  border-top: 1px solid rgba(243, 237, 226, .12);
}
#ms-who-we-are.ms-r20-about h2 {
  font-family: var(--b-display) !important;
  text-transform: uppercase;
  letter-spacing: -.004em;
}
#ms-who-we-are.ms-r20-about .ms-r20-about__why {
  font-family: var(--b-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: var(--b-acid) !important;
}

/* --- 3 · Controller cards: blueprint at rest, photo on reveal ---------------
   At rest the card showed only the model number; the outline drawing now sits
   behind it so every card reads as a product before hover / scroll reveal. */
#ms-series .ms-intl-feature[data-bg-reveal-state="model"] .ms-intl-outline,
#ms-series .ms-intl-feature:not([data-bg-reveal-state]):not(.is-revealed) .ms-intl-outline {
  opacity: .28 !important;
}

/* --- 4 · Footer: same type system and grid as the page above -------------- */
.ms-support-footer .page-width {
  --claude-gutter: clamp(16px, 3.34vw, 64px);
  max-width: calc(1536px + 2 * var(--claude-gutter));
  padding-inline: var(--claude-gutter);
}
.ms-contact-footer,
.ms-contact-footer :is(h2, p, a, span, li, small, strong) {
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
.ms-contact-footer h2 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: #DFFF3A !important;
}
.ms-contact-footer p,
.ms-contact-footer nav a { font-size: 14px !important; line-height: 1.7 !important; letter-spacing: 0 !important; }
.ms-contact-footer nav a { transition: color .2s ease; }
.ms-contact-footer nav a:is(:hover, :focus-visible) { color: #DFFF3A !important; }
.ms-directory-footer a {
  font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}
.ms-directory-footer a:is(:hover, :focus-visible) { color: #DFFF3A !important; }

/* --- 5 · Hero calls to action: legible on desktop -------------------------
   The hero board is drawn in design px and scaled by --k (≈0.86 on a 1920×840
   window), so the button label rendered at ~10px. Dividing by --k keeps the
   on-screen size at 13px or more. Desktop layout only. */
#msb[data-lay="d"] .msb__cta > :is(a, button) {
  font-size: max(13.5px, calc(13px / var(--k, 1))) !important;
}

/* --- 6 · Contact close: the conversion point gets a real button ------------ */
.ms-home .ms-contact-cta .ms-contact-cta__actions {
  gap: 16px !important;
  align-items: center;
  flex-wrap: wrap;
}
.ms-home .ms-contact-cta .ms-contact-cta__actions .ms-wa-enquiry {
  min-height: 64px !important;
  padding: 0 40px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}
.ms-home .ms-contact-cta .ms-contact-cta__actions .ms-wa-enquiry:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  box-shadow: 0 10px 0 -4px rgba(223, 255, 58, .28);
}
@media (max-width: 599px) {
  .ms-home .ms-contact-cta .ms-contact-cta__actions .ms-wa-enquiry { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-home .ms-contact-cta .ms-contact-cta__actions .ms-wa-enquiry { transition: none !important; }
  .ms-home .ms-contact-cta .ms-contact-cta__actions .ms-wa-enquiry:is(:hover, :focus-visible) { transform: none; }
}

/* --- 7 · Controller cards: one card fits one desktop screen ----------------
   1:1 visuals made each card ~650px + footer, so spec, model and CTA never
   shared a 900px viewport. 5:4 keeps the art size and cuts the section ~13%. */
@media (min-width: 901px) {
  #ms-series .ms-card__visual { aspect-ratio: 5 / 4 !important; }
}

/* --- 8 · Spec strip: five facts on one row (no orphan cell) -------------- */
@media (min-width: 1100px) {
  .ms-home .tp-evidence--home .tp-evidence__list { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}