/* Made Tech Housing v24 — WCAG 2.2 AA remediation layer, 24 October 2026. * Preserve the bright brand accent for graphics; use a contrast-safe green for TEXT. * Green text #007a3e against #fafefc >= 5:1. Avoid swapping dark-section colours. */ :root { --mt-text-green:#007a3e; --mt-brand-green:#00ad54; } /* Large accent lettering on pale canvases. */ :is(.hero,.route-hero,.why-hero,.why-model,.why-shift,.why-journey,.why-teaser,.outcome-editorial,.outcome-head,.product-hero,.product-section,.product-preview,.tomorrow-before,.tomorrow-foundation,.tomorrow-hero,.tomorrow-journeys,.tomorrow-principles,.why-section-heading,.v23-faq-section) :is(h1,h2,h3,h4) em, #pressure-intro :is(h1,h2,h3) em, #use-cases h2 em, .why-page #pressure-intro em, :where(.route-page) > .route-hero h1 em, .product-hero h1 em, .product-section h2 em {color:var(--mt-text-green)!important;} /* Important: the hero ink is drawn with a pseudo-element that has its own colour. */ .hero.sketch-motion-ready .hero-rotating::after {color:var(--mt-text-green)!important;} .hero.sketch-motion-ready .hero-rotating::before{-webkit-text-stroke:1.2px #006b35!important;} @media(prefers-reduced-motion:reduce){.hero.sketch-motion-ready .hero-rotating{color:var(--mt-text-green)!important;}} /* Navigation, active outcome link and small detail captions need 4.5:1. */ .header :is(.desktop-nav a,.solutions-toggle):is(.active,[aria-current="page"]), .desktop-nav a[aria-current="page"], .outcome-editorial .outcome-row.is-active > span, .outcome-editorial .outcome-row.is-active .micro, .route-steps .step-number, .six-capability-grid .step-number, .housing-popover a[aria-current="page"] {color:var(--mt-text-green)!important;} /* Type should reflow instead of being clipped or relying on an overflow-x:hidden patch. */ :where(main,#app) :is(h1,h2,h3,h4){max-width:100%;min-width:0;overflow-wrap:break-word;word-break:normal;} :where(main,#app) :is(.hero-copy,.route-copy,.why-hero-copy,.tomorrow-hero-copy,.why-model-grid>div,.shell,.route-steps,.outcome-head,.tomorrow-thesis-grid>div,.product-shell){min-width:0;} :where(main,#app) :is(h1,h2,h3,h4,summary,a,button,p){text-overflow:clip;} #pressure-intro .friction-head h2, .pressure-experience .friction-head h2{white-space:normal!important;} /* User spacing/zoom: animated text must not be clipped by a constrained ink mask. */ .hero .hero-rotating-outer{overflow:visible!important;max-width:100%!important;min-height:0!important;height:auto!important;} .hero .hero-rotating{width:auto!important;max-width:100%!important;overflow-wrap:anywhere;word-break:normal;text-wrap:wrap!important;} .hero.sketch-motion-ready .hero-rotating::before,.hero.sketch-motion-ready .hero-rotating::after{overflow-wrap:inherit;} :where(main) :is(.why-hero,.why-model,.why-shift,.why-now,.why-journey,.friction-head,.route-hero,.tomorrow-hero,.tomorrow-page,.tomorrow-thesis,.product-section,.outcome-editorial){min-width:0;} /* Leave feature illustrations clipped to their own holders, never clip text for layout. */ @media(max-width:980px){ .tomorrow-hero h1{margin-right:0!important;} .tomorrow-page{overflow:visible!important;} } @media(max-width:700px){ :where(main) :is(h1,h2,h3){overflow-wrap:anywhere!important;hyphens:auto;word-break:normal!important;white-space:normal!important;height:auto;max-width:100%!important;} :where(main) :is(h1,h2){font-size:clamp(34px,8.5vw,62px)!important;line-height:1.14!important;letter-spacing:-.035em!important;} .hero .hero-messages{font-size:clamp(36px,8.5vw,58px)!important;line-height:1.08!important;} .hero .hero-heading-static{white-space:normal!important;} .tomorrow-hero h1,.why-hero h1{font-size:clamp(36px,8.5vw,62px)!important;line-height:1.14!important;margin-inline:0!important;} .why-economics-heading h2,.friction-head h2,.why-model h2,.why-shift h2{font-size:clamp(34px,8.5vw,62px)!important;line-height:1.16!important;} .tomorrow-before h2,.tomorrow-foundation h2,.tomorrow-thesis h2{font-size:clamp(34px,8.5vw,62px)!important;line-height:1.16!important;} .why-economics-heading,.why-section-heading,.friction-head,.tomorrow-page .shell{min-width:0;max-width:100%;} .hero-copy,.why-hero-copy,.tomorrow-hero-copy{overflow:visible!important;max-width:100%;} .tomorrow-hero-visual img{max-width:100%!important;} } /* Never force text-bearing containers to a height that breaks text spacing. */ :where(main) :is(.tomorrow-compare h3,.tomorrow-compare p,.hero-messages,.hero-rotating-outer,.hero-rotating,.why-hero h1,.friction-head h2){height:auto!important;} /* Dynamic message can be stopped by users. The control is deliberately unobtrusive. */ .hero-animation-control{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:132px; padding:9px 18px;border:1.5px solid #397b54;background:#fafefc;color:#07522e;font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:13px;line-height:1.4;border-radius:999px;cursor:pointer;} .hero-animation-control:hover,.hero-animation-control:focus-visible{background:#075b33;color:#fff;border-color:#075b33;} .hero-animation-control-wrap{display:block;margin:14px 0 6px;} @media(prefers-reduced-motion:reduce){.hero-animation-control-wrap{display:none!important;}} /* In forced-colours mode, preserve semantics and visible focus without dependence on accent green. */ @media(forced-colors:active){ .hero-animation-control{forced-color-adjust:auto;border:2px solid ButtonText;color:ButtonText;background:ButtonFace;} :where(a,button,summary,input,select,textarea):focus-visible{outline:3px solid Highlight!important;box-shadow:none!important;} } /* v24 verification pass: avoid intrinsic 1fr grid min-size swallowing narrow text. */ .product-preview-section .section-head-short h2 em{color:var(--mt-text-green)!important;} .header .logo .logo-sub{color:var(--mt-text-green)!important;} @media(max-width:950px){ .why-hero-grid,.why-model-grid,.why-journey-layout,.why-comparison,.cx-inner{grid-template-columns:minmax(0,1fr)!important;max-width:100%;} .why-hero-grid>*,.why-model-grid>*,.why-comparison>*,.cx-inner>*{min-width:0;max-width:100%;} .why-hero-grid img,.why-model-grid img,.why-comparison img{max-width:100%!important;min-width:0!important;} } @media(max-width:700px){ .cx-inner{min-width:0!important;} .cx-content h2{max-width:100%;font-size:clamp(35px,8.4vw,58px)!important;line-height:1.15!important;white-space:normal!important;overflow-wrap:anywhere!important;} .why-hero-grid .why-hero-copy h1,.why-model-grid h2{width:100%;max-width:100%!important;} } /* Provide comfortably-sized interaction surfaces without changing visual weight. */ :where(.mt-legal nav a,.mt-footer-menus a,#mt-newsletter-form a,.film-caption a,.outcome-preview-caption a,.why-secondary-link,.why-economics-evidence a,.tomorrow-research-links a){display:inline-flex;align-items:center;min-height:28px;padding-block:5px;} /* Fallback copy is only exposed when a browser cannot play