/* Generated from checked-in ordered modules; do not edit. */
/* css/modules/components/iot-platform-components.css */ /* UMEC Space IoT Platform product landing, Phase 3. Approved raster backgrounds are immutable: no crop, mask, filter, wash or CSS recomposition. */ body.iot-platform-route { --iot-page-max: var(--container); --iot-page-pad: 20px; --iot-text-left: max(var(--iot-page-pad), calc((100% - var(--iot-page-max)) / 2)); --iot-text-width: min(50vw, 720px); --iot-process-text-width: min(50vw, 720px); --iot-section-head-width: min(100%, 720px); background: #f7fbfa; } body.iot-platform-route .iot-platform-page { background: #f7fbfa; color: #14312f; } body.iot-platform-route .iot-platform-page :where(h1, h2, h3, p, li, a, button, span, strong) { overflow-wrap: normal; word-break: normal; hyphens: manual; letter-spacing: 0; } .iot-platform-slide { --iot-frame-aspect: 1672 / 941; position: relative; display: grid; place-items: center; min-height: 0; padding: 0; overflow: visible; isolation: isolate; background: #f7fbfa; scroll-margin-top: 78px; } .iot-platform-frame { position: relative; width: 100%; max-width: none; aspect-ratio: var(--iot-frame-aspect); min-height: 0; height: auto; overflow: visible; } .iot-platform-bg { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; filter: none; transform: none; pointer-events: none; } .iot-platform-copy, .iot-platform-process-copy, .iot-platform-process-note, .iot-platform-final-copy { position: absolute; z-index: 1; } .iot-platform-copy { top: 13%; display: grid; gap: clamp(10px, 1.08vw, 16px); width: var(--iot-text-width); max-width: var(--iot-text-width); } .iot-platform-copy--left { left: var(--iot-text-left); } .iot-platform-copy--right { right: var(--iot-text-left); } .iot-platform-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #0f8e84; font-size: clamp(12px, 0.9vw, 14px); font-weight: 820; line-height: 1.1; text-transform: uppercase; } .iot-platform-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #18b6a8; box-shadow: 0 0 0 7px rgba(24, 182, 168, 0.14); } .iot-platform-copy h1, .iot-platform-copy h2, .iot-platform-process-copy h2, .iot-platform-section-head h2 { margin: 0; color: #102a28; font-weight: 840; line-height: 1.02; } .iot-platform-copy h1 { max-width: 100%; font-size: clamp(48px, 5.5vw, 86px); } .iot-platform-copy h2, .iot-platform-process-copy h2, .iot-platform-section-head h2 { font-size: clamp(30px, 3.1vw, 54px); } .iot-platform-copy p, .iot-platform-copy li, .iot-platform-process-copy p, .iot-platform-process-note, .iot-platform-final-copy, .iot-platform-section-head p, .iot-platform-card p { margin: 0; color: rgba(20, 49, 47, 0.78); font-size: clamp(15px, 1.05vw, 19px); line-height: 1.48; } .iot-platform-lead { max-width: 100%; color: #14312f; font-size: clamp(20px, 1.55vw, 27px) !important; line-height: 1.28 !important; font-weight: 680; } .iot-platform-audience, .iot-platform-emphasis { color: #0f615b !important; font-weight: 720; } .iot-platform-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } .iot-platform-list li { position: relative; padding-left: 18px; } .iot-platform-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 7px; height: 7px; border-radius: 999px; background: #18b6a8; } .iot-platform-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } .iot-platform-actions .btn { position: relative; z-index: 2; } .iot-platform-actions .btn-secondary { color: #0f615b; border-color: rgba(15, 97, 91, 0.24); background: rgba(255, 255, 255, 0.74); } body.iot-platform-route .iot-platform-actions .btn-primary { color: #fff; background: #0b5f59; border-color: #0b5f59; } .iot-platform-process-copy { top: 4%; left: var(--iot-text-left); width: var(--iot-process-text-width); max-width: var(--iot-process-text-width); display: grid; gap: 8px; } .iot-platform-process-copy h2 { max-width: 100%; font-size: clamp(28px, 2.35vw, 40px); line-height: 1.03; } .iot-platform-process-copy p { display: none; } .iot-platform-process-note { left: var(--iot-text-left); right: auto; bottom: 2.2%; width: var(--iot-process-text-width); max-width: var(--iot-process-text-width); font-weight: 640; } .iot-platform-final-copy { left: var(--iot-text-left); right: auto; bottom: 1.5%; width: var(--iot-process-text-width); display: grid; gap: 16px; max-width: var(--iot-process-text-width); } .iot-platform-section { position: relative; overflow: hidden; isolation: isolate; background: #f7fbfa; color: #14312f; scroll-margin-top: 78px; } .iot-platform-section-bg { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; filter: none; pointer-events: none; } .iot-platform-card-wrap { position: relative; z-index: 1; width: min(calc(100% - (var(--iot-page-pad) * 2)), var(--iot-page-max)); max-width: var(--iot-page-max); margin: 0 auto; padding-right: 0; padding-left: 0; padding-top: clamp(72px, 7vw, 104px); padding-bottom: clamp(82px, 8vw, 118px); } .iot-platform-section-head { display: grid; gap: 14px; width: var(--iot-section-head-width); max-width: var(--iot-section-head-width); margin-bottom: 34px; } .iot-platform-section-head p { max-width: 880px; } .iot-platform-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .iot-platform-card { display: flex; min-width: 0; min-height: 100%; flex-direction: column; overflow: hidden; border: 1px solid rgba(18, 138, 128, 0.16); border-radius: 8px; background: rgba(255, 255, 255, 0.86); box-shadow: 0 18px 48px rgba(21, 68, 65, 0.09); } .iot-platform-card-media { width: 100%; aspect-ratio: 16 / 9; background: #eef8f6; } .iot-platform-card-media img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: none; } .iot-platform-card-body { display: grid; gap: 11px; padding: 22px; } .iot-platform-card h3 { margin: 0; color: #102a28; font-size: clamp(19px, 1.55vw, 26px); line-height: 1.1; } .iot-platform-card p { font-size: clamp(14px, 0.95vw, 16px); line-height: 1.5; }
/* css/modules/responsive/iot-platform-responsive-max-width-1180px.css */ @media (max-width: 1180px) { body.iot-platform-route { --iot-text-width: min(58vw, 680px); --iot-process-text-width: min(58vw, 680px); --iot-section-head-width: min(100%, 680px); } } @media (max-width: 1180px) { .iot-platform-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1180px) { .iot-platform-copy { gap: 10px; } } @media (max-width: 1180px) { .iot-platform-copy h1 { font-size: clamp(43px, 5.2vw, 66px); } } @media (max-width: 1180px) { .iot-platform-copy h2, .iot-platform-process-copy h2, .iot-platform-section-head h2 { font-size: clamp(28px, 3.2vw, 42px); } } @media (max-width: 1180px) { .iot-platform-copy p, .iot-platform-copy li, .iot-platform-process-copy p, .iot-platform-process-note, .iot-platform-final-copy { font-size: 15px; line-height: 1.42; } } @media (max-width: 780px) { body.iot-platform-route { --iot-page-pad: 14px; --iot-text-width: 100%; --iot-process-text-width: 100%; --iot-section-head-width: 100%; } } @media (max-width: 780px) { .iot-platform-slide { min-height: auto; padding: 0; } } @media (max-width: 780px) { .iot-platform-frame { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; min-height: 0; aspect-ratio: auto; padding: 18px var(--container-padding, 16px); } } @media (max-width: 780px) { .iot-platform-copy, .iot-platform-process-copy, .iot-platform-process-note, .iot-platform-final-copy { position: relative; inset: auto; width: 100%; max-width: none; } } @media (max-width: 780px) { .iot-platform-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } } @media (max-width: 780px) { .iot-platform-copy, .iot-platform-process-copy { padding: 0 2px; } } @media (max-width: 780px) { .iot-platform-process-note, .iot-platform-final-copy { margin-top: 14px; } } @media (max-width: 780px) { .iot-platform-copy h1 { font-size: clamp(38px, 11vw, 54px); } } @media (max-width: 780px) { .iot-platform-copy h2, .iot-platform-process-copy h2, .iot-platform-section-head h2 { font-size: clamp(27px, 8.2vw, 38px); } } @media (max-width: 780px) { .iot-platform-lead { font-size: 18px !important; } } @media (max-width: 780px) { .iot-platform-copy p, .iot-platform-copy li, .iot-platform-process-copy p, .iot-platform-process-note, .iot-platform-final-copy, .iot-platform-section-head p { font-size: 16px; line-height: 1.42; } } @media (max-width: 780px) { .iot-platform-actions, .iot-platform-actions .btn { width: 100%; } } @media (max-width: 780px) { .iot-platform-actions { display: grid; grid-template-columns: 1fr; } } @media (max-width: 780px) { .iot-platform-card-wrap { padding-top: 54px; padding-bottom: 64px; } } @media (max-width: 780px) { .iot-platform-card-grid { grid-template-columns: 1fr; } } @media (max-width: 780px) { .iot-platform-card-body { padding: 20px; } }
/* css/modules/components/products-components-interaction.css */ .generated-cta { background: linear-gradient(180deg, rgba(238,246,255,0.82), rgba(255,255,255,0.96)); } .generated-cta-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 34px; padding: 42px; border: 1px solid rgba(31,123,255,0.15); border-radius: 28px; background: rgba(255,255,255,0.9); box-shadow: var(--shadow-soft); } .generated-cta-card > div:first-child { min-width: 0; max-width: 760px; } .generated-cta-card h2, .generated-cta-card p { max-width: 100%; } .mailto-cta { display: flex; align-items: center; justify-content: flex-end; min-width: max-content; } .mailto-cta .btn { width: fit-content; white-space: nowrap; }
/* css/modules/responsive/contact-responsive-max-width-640px-foundation.css */ .contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .contact-form label { display: grid; gap: 7px; color: #29405f; font-size: 13px; font-weight: 760; } .contact-form input, .contact-form textarea { width: 100%; min-height: 46px; padding: 12px 14px; border: 1px solid rgba(31,123,255,0.18); border-radius: 14px; color: var(--ink); background: #fff; font: inherit; } .contact-form textarea { min-height: 116px; resize: vertical; } .form-wide { grid-column: 1 / -1; } .form-consent { grid-template-columns: 20px 1fr !important; align-items: start; } .form-consent input { min-height: auto; margin-top: 2px; } .form-status { min-height: 22px; margin: 0; color: var(--blue-dark); font-weight: 760; } .contact-form.is-invalid .form-status { color: #bd1b3a; } .is-contact-modal-open { overflow: hidden; } .contact-modal[hidden] { display: none; } .contact-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: clamp(18px, 4vw, 48px); } .contact-modal__backdrop { position: absolute; inset: 0; background: rgba(6, 17, 36, 0.48); backdrop-filter: blur(10px); } .contact-modal__dialog { position: relative; width: min(720px, 100%); max-height: min(86vh, 820px); overflow: auto; padding: clamp(24px, 4vw, 38px); border: 1px solid rgba(143, 183, 237, 0.38); border-radius: 28px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 26px 80px rgba(9, 35, 75, 0.24); } .contact-modal__close { position: absolute; top: 18px; right: 18px; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(31, 123, 255, 0.16); border-radius: 50%; color: var(--ink); background: #fff; font-size: 26px; line-height: 1; cursor: pointer; } .contact-modal__head { max-width: 560px; margin-bottom: 22px; } .contact-modal__head h2 { margin: 0 0 10px; color: var(--ink); font-size: clamp(30px, 4vw, 46px); line-height: 1.04; } .contact-modal__head p:last-child { margin: 0; color: var(--text); line-height: 1.6; } .contact-modal .contact-form { display: grid; grid-template-columns: 1fr; gap: 16px; } .contact-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .contact-modal .contact-form label { display: grid; gap: 7px; color: #29405f; font-size: 13px; font-weight: 760; } .contact-modal .contact-form__consent { grid-template-columns:22px 1fr; align-items:start; gap:10px; font-weight:500; line-height:1.45; } .contact-modal .contact-form__consent input { width:20px; min-height:20px; margin:2px 0 0; } .contact-modal .contact-form__consent a { color:var(--blue-dark); } .contact-modal .contact-form input, .contact-modal .contact-form textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(31, 123, 255, 0.2); border-radius: 14px; color: var(--ink); background: #fff; font: inherit; } .contact-modal .contact-form input:focus, .contact-modal .contact-form textarea:focus, .contact-modal__close:focus-visible { outline: 3px solid rgba(31, 123, 255, 0.22); outline-offset: 2px; border-color: rgba(31, 123, 255, 0.55); } .contact-modal .contact-form textarea { min-height: 132px; resize: vertical; } .form-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; } .contact-modal .form-status { min-height: 22px; color: var(--blue-dark); } .contact-modal .form-status[data-state="error"] { color: #bd1b3a; } .contact-modal .form-status[data-state="success"] { color: #0f7a52; } .contact-form__fallback { margin: -4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; } .contact-form__fallback a { color: var(--blue-dark); font-weight: 760; } .contact-modal .btn[disabled] { cursor: wait; opacity: 0.72; } @media (max-width: 640px) { .contact-modal { align-items: end; padding: 12px; } } @media (max-width: 640px) { .contact-modal__dialog { max-height: 92vh; padding: 24px 18px; border-radius: 22px; } } @media (max-width: 640px) { .contact-form__grid { grid-template-columns: 1fr; } }
/* css/modules/components/products-components-states.css */ .generated-legal, .generated-legacy { min-height: 62svh; background: #fff; } .generated-legal-card, .generated-legacy-card { max-width: 920px; } .generated-legal-card h1, .generated-legacy-card h1 { font-size: clamp(38px, 5vw, 62px); }
/* css/modules/responsive/solutions-responsive-max-width-1100px.css */ @media (max-width: 1100px) { .solutions-hero { height: auto; min-height: auto; padding: 80px 0 86px; } }
/* css/modules/responsive/products-responsive-max-width-1100px-foundation.css */ @media (max-width: 1100px) { .solutions-hero-grid, .selector-layout, .solution-preview, .matrix-grid, .implementation-flow, .cases-overview-grid, .case-study-card, .generated-hero-grid, .generated-two-col, .generated-cta-card { grid-template-columns: 1fr; } } @media (max-width: 1100px) { .generated-card-grid, .generated-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1100px) { .mailto-cta { justify-content: flex-start; min-width: 0; } } @media (max-width: 1100px) { .implementation-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* css/modules/responsive/solutions-responsive-max-width-1100px-foundation.css */ @media (max-width: 1100px) { .solutions-map { min-height: 430px; } } @media (max-width: 1100px) { .solutions-map img { width: min(760px, 102vw); right: -18vw; } } @media (max-width: 1100px) { .matrix-copy { position: static; } } @media (max-width: 780px) { .solutions-hero { height: min(680px, calc(100svh - 84px)); min-height: 560px; padding: 44px 0 38px; } } @media (max-width: 780px) { .solutions-hero h1 { font-size: clamp(31px, 8.4vw, 38px); line-height: 1.06; } } @media (max-width: 780px) { .solutions-hero-copy p { font-size: 17px; } } @media (max-width: 780px) { .solutions-hero-actions, .implementation-cards { display: grid; grid-template-columns: 1fr; } } @media (max-width: 780px) { .solutions-map { display: none; } } @media (max-width: 780px) { .solution-rail, .solution-preview { padding: 18px; border-radius: 24px; } } @media (max-width: 780px) { .preview-media { border-radius: 18px; } } @media (max-width: 780px) { .preview-copy h3, .solutions-section-head h2, .matrix-copy h2, .implementation-copy h2 { max-width: calc(100vw - 36px); font-size: clamp(25px, 7vw, 30px); line-height: 1.08; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } } @media (max-width: 780px) { .matrix-table > div { grid-template-columns: 66px minmax(0, 1fr); gap: 10px; } } @media (max-width: 780px) { .matrix-table span { grid-column: 1; } } @media (max-width: 780px) { .matrix-table strong, .matrix-table p { grid-column: 2; } } @media (max-width: 780px) { .matrix-icon { grid-row: 1 / 4; } } @media (max-width: 780px) { .implementation-flow { gap: 28px; } } @media (max-width: 780px) { .implementation-cards img { aspect-ratio: 1.25; max-height: 330px; } }
/* css/modules/responsive/products-responsive-max-width-780px-foundation.css */ @media (max-width: 780px) { .generated-hero { min-height: auto; padding: 56px 0 64px; } } @media (max-width: 780px) { .generated-hero-copy h1, .generated-legal-card h1, .generated-legacy-card h1 { max-width: min(310px, calc(100vw - 42px)); font-size: clamp(31px, 8vw, 38px); line-height: 1.08; overflow-wrap: anywhere; word-break: break-word; } } @media (max-width: 780px) { .generated-hero-copy p { max-width: min(320px, calc(100vw - 42px)); font-size: 17px; } } @media (max-width: 780px) { .generated-hero-visual { width: min(320px, 92%); } } @media (max-width: 780px) { .generated-card-grid, .generated-three, .contact-form { grid-template-columns: 1fr; } }
/* css/modules/responsive/cases-responsive-max-width-780px.css */ @media (max-width: 780px) { .cases-proof-grid div { grid-template-columns: 72px minmax(0, 1fr); min-height: 74px; padding: 16px; border-radius: 18px; } } @media (max-width: 780px) { .cases-proof-grid strong { font-size: 34px; } } @media (max-width: 780px) { .case-study-card { gap: 16px; padding: 14px; border-radius: 22px; } } @media (max-width: 780px) { .case-study-media { border-radius: 18px; } } @media (max-width: 780px) { .case-study-media img { border-radius: 16px; } } @media (max-width: 780px) { .case-study-content { padding: 0; } } @media (max-width: 780px) { .case-study-card h3 { max-width: min(310px, calc(100vw - 58px)); font-size: clamp(22px, 6.2vw, 28px); } } @media (max-width: 780px) { .case-study-facts div { grid-template-columns: 1fr; gap: 5px; } } @media (max-width: 780px) { .case-study-facts dd, .case-study-products { max-width: min(310px, calc(100vw - 58px)); } }
/* css/modules/responsive/products-responsive-max-width-780px-content.css */ @media (max-width: 780px) { .generated-card, .generated-text, .generated-panel, .generated-link-block, .generated-legal-card, .generated-legacy-card, .generated-cta-card { padding: 20px; border-radius: 20px; } } @media (max-width: 780px) { .generated-card h3 { font-size: 20px; max-width: min(300px, calc(100vw - 70px)); } } @media (max-width: 780px) { .generated-page h2 { max-width: min(310px, calc(100vw - 54px)); overflow-wrap: anywhere; word-break: break-word; } } @media (max-width: 780px) { .generated-card p, .generated-text p, .generated-panel li, .generated-link-block a, .generated-cta-card p, .form-consent, .site-footer p, .site-footer a { max-width: min(300px, calc(100vw - 70px)); overflow-wrap: anywhere; word-break: break-word; } } @media (max-width: 780px) { .generated-page .section-head p { max-width: min(320px, calc(100vw - 42px)); overflow-wrap: anywhere; word-break: break-word; } } @media (max-width: 780px) { .generated-page *, .generated-page *::before, .generated-page *::after { min-width: 0; } }
/* css/modules/responsive/contact-responsive-max-width-780px.css */ @media (max-width: 780px) { .contact-form .btn, .contact-form input, .contact-form textarea { max-width: 100%; } }
/* css/modules/responsive/powermaster-responsive-min-width-1024px.css */ /* PowerMaster wireframe landing assembly, 2026-05-31. Meaningful images are rendered full-frame: no crop, mask, filter or overlay wash. */ body.powermaster-route .pm-wf-page { background: #05070c; color: #f4f8ff; } body.powermaster-route .pm-wf-page :where(h1, h2, h3, p, li, a, button, span, strong) { overflow-wrap: normal; word-break: normal; hyphens: manual; letter-spacing: 0; } body.powermaster-route .pm-wf-slide { --pm-frame-aspect: 1.7778958555; position: relative; display: grid; place-items: center; min-height: 0; padding: 0; background: #05070c; overflow: visible; isolation: isolate; scroll-margin-top: 78px; } body.powermaster-route .pm-wf-frame { position: relative; width: min(100vw, calc((100svh - 78px) * var(--pm-frame-aspect))); aspect-ratio: 1672 / 941; overflow: visible; } body.powermaster-route .pm-wf-bg { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 1; filter: none; transform: none; pointer-events: none; } body.powermaster-route .pm-wf-copy, body.powermaster-route .pm-wf-process-copy, body.powermaster-route .pm-wf-process-note, body.powermaster-route .pm-wf-card-layout { position: absolute; z-index: 1; } body.powermaster-route .pm-wf-copy { top: 16%; display: grid; gap: clamp(14px, 1.6vw, 22px); max-width: 42%; } body.powermaster-route .pm-wf-copy--left { left: 5.4%; width: 37%; } body.powermaster-route .pm-wf-copy--right { right: 4.2%; width: 30.5%; } body.powermaster-route .pm-wf-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #58a8ff; font-size: clamp(12px, 0.95vw, 14px); font-weight: 780; line-height: 1.1; text-transform: uppercase; } body.powermaster-route .pm-wf-kicker::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: #1f7bff; box-shadow: 0 0 0 7px rgba(31, 123, 255, 0.14); } body.powermaster-route .pm-wf-copy h1, body.powermaster-route .pm-wf-copy h2, body.powermaster-route .pm-wf-process-copy h2, body.powermaster-route .pm-wf-section-head h2 { margin: 0; color: #f7fbff; font-weight: 820; line-height: 1.03; } body.powermaster-route .pm-wf-copy h1 { font-size: clamp(48px, 5vw, 86px); } body.powermaster-route .pm-wf-copy h2, body.powermaster-route .pm-wf-process-copy h2, body.powermaster-route .pm-wf-section-head h2 { font-size: clamp(28px, 3.6vw, 58px); } body.powermaster-route .pm-wf-copy p, body.powermaster-route .pm-wf-process-copy p, body.powermaster-route .pm-wf-process-note, body.powermaster-route .pm-wf-section-head p, body.powermaster-route .pm-wf-card p { margin: 0; color: rgba(232, 242, 255, 0.88); font-size: clamp(15px, 1.22vw, 21px); line-height: 1.48; } body.powermaster-route .pm-wf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } body.powermaster-route .pm-wf-actions .btn { position: relative; z-index: 2; } body.powermaster-route .pm-wf-actions .btn-secondary { color: #eef8ff; border-color: rgba(151, 214, 255, 0.34); background: rgba(8, 18, 34, 0.74); } body.powermaster-route .pm-wf-process-copy { top: 5.6%; left: 8.2%; width: 82%; display: grid; gap: 12px; } body.powermaster-route .pm-wf-process-copy h2 { font-size: clamp(30px, 2.65vw, 50px); } body.powermaster-route .pm-wf-process-note { left: 8.2%; bottom: 13%; max-width: 940px; color: rgba(226, 239, 255, 0.82); } body.powermaster-route .pm-wf-card-layout { inset: 7% 5.4%; display: grid; grid-template-rows: auto 1fr; gap: clamp(14px, 1.7vw, 24px); } body.powermaster-route .pm-wf-section-head { display: grid; gap: 10px; max-width: min(1260px, 86%); } @media (min-width: 1024px) { body.powermaster-route .pm-wf-singleline { white-space: nowrap; } } body.powermaster-route .pm-wf-card-grid { display: grid; gap: clamp(14px, 1.6vw, 22px); align-items: stretch; } body.powermaster-route .pm-wf-card-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.powermaster-route .pm-wf-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.powermaster-route .pm-wf-card { min-width: 0; border: 1px solid rgba(134, 199, 255, 0.2); border-radius: 18px; background: rgba(10, 18, 32, 0.82); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24); } body.powermaster-route .pm-wf-card--media-left { display: grid; grid-template-columns: clamp(86px, 11vw, 138px) minmax(0, 1fr); gap: clamp(12px, 1.4vw, 20px); align-items: center; padding: clamp(14px, 1.7vw, 24px); } body.powermaster-route .pm-wf-card--media-top { display: grid; grid-template-rows: auto auto 1fr; gap: 12px; padding: clamp(12px, 1.35vw, 20px); } body.powermaster-route .pm-wf-card img { display: block; width: 100%; height: auto; max-height: clamp(82px, 12vw, 164px); object-fit: contain; object-position: center; filter: none; opacity: 1; } body.powermaster-route .pm-wf-card--media-left img { max-height: clamp(92px, 11vw, 142px); } body.powermaster-route .pm-wf-card h3 { margin: 0; color: #ffffff; font-size: clamp(18px, 1.55vw, 28px); line-height: 1.1; } body.powermaster-route .pm-wf-card p { font-size: clamp(14px, 1vw, 17px); color: rgba(222, 235, 252, 0.82); } @media (max-width: 1180px) { body.powermaster-route .pm-wf-card-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1180px) { body.powermaster-route .pm-wf-card--media-top { grid-template-columns: clamp(96px, 18vw, 160px) minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; } } @media (max-width: 1180px) { body.powermaster-route .pm-wf-card--media-top img { grid-row: 1 / span 2; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-slide { min-height: auto; padding: 18px var(--container-padding, 16px) 18px; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-frame { display: flex; flex-direction: column; width: min(100%, 560px); aspect-ratio: auto; gap: 12px; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-bg, body.powermaster-route .pm-wf-copy, body.powermaster-route .pm-wf-process-copy, body.powermaster-route .pm-wf-process-note, body.powermaster-route .pm-wf-card-layout { position: relative; inset: auto; width: 100%; max-width: none; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-copy, body.powermaster-route .pm-wf-process-copy { order: -1; padding: 0 2px; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-bg { height: auto; object-fit: contain; border-radius: 0; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-copy h1 { font-size: clamp(42px, 13vw, 70px); } } @media (max-width: 780px) { body.powermaster-route .pm-wf-copy h2, body.powermaster-route .pm-wf-process-copy h2, body.powermaster-route .pm-wf-section-head h2 { font-size: clamp(27px, 8.4vw, 40px); } } @media (max-width: 780px) { body.powermaster-route .pm-wf-slide--d .pm-wf-process-copy { gap: 8px; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-slide--d .pm-wf-process-copy h2 { font-size: clamp(25px, 7.5vw, 34px); } }
/* css/modules/responsive/powermaster-responsive-max-width-780px.css */ @media (max-width: 780px) { body.powermaster-route .pm-wf-copy p, body.powermaster-route .pm-wf-process-copy p, body.powermaster-route .pm-wf-process-note, body.powermaster-route .pm-wf-section-head p { font-size: 16px; line-height: 1.38; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-card-layout { display: grid; gap: 18px; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-section-head { max-width: none; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-card-grid--two, body.powermaster-route .pm-wf-card-grid--four { grid-template-columns: 1fr; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-card--media-left, body.powermaster-route .pm-wf-card--media-top { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; padding: 16px; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-card--media-left img, body.powermaster-route .pm-wf-card--media-top img { grid-row: 1 / span 2; max-height: 92px; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-actions { flex-direction: column; align-items: stretch; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-actions .btn { justify-content: center; width: 100%; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-slide--cards { padding-top: 12px; padding-bottom: 12px; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-slide--cards .pm-wf-frame { position: relative; min-height: 0; justify-content: flex-start; gap: 0; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-slide--cards .pm-wf-bg { position: absolute; inset: 0; order: 0; height: 100%; margin-top: 0; object-fit: fill; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-slide--cards .pm-wf-card-layout { order: 1; position: relative; z-index: 1; align-self: stretch; gap: 10px; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-slide--cards .pm-wf-section-head { gap: 7px; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-slide--cards .pm-wf-section-head h2 { font-size: clamp(23px, 6.7vw, 30px); line-height: 1.04; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-slide--cards .pm-wf-section-head p { font-size: 13px; line-height: 1.25; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-slide--cards .pm-wf-card-grid--two, body.powermaster-route .pm-wf-slide--cards .pm-wf-card-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-slide--cards .pm-wf-card--media-left, body.powermaster-route .pm-wf-slide--cards .pm-wf-card--media-top { display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 7px; align-items: center; padding: 9px; border-radius: 14px; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-slide--cards .pm-wf-card--media-left img, body.powermaster-route .pm-wf-slide--cards .pm-wf-card--media-top img { grid-row: 1 / span 2; max-height: 48px; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-slide--cards .pm-wf-card h3 { font-size: 14px; line-height: 1.08; } } @media (max-width: 780px) { body.powermaster-route .pm-wf-slide--cards .pm-wf-card p { font-size: 11px; line-height: 1.18; } }
/* css/modules/components/development-automation-components.css */ /* Development automation landing, Phase 3 integration. Source of truth: specs/product-plans/development-automation-landing-plan.md */ body.development-automation-route .dev-auto-page { background: #f3f8fe; color: #071b3a; } body.development-automation-route .dev-auto-page :where(h1, h2, h3, p, li, a, button, span, strong) { overflow-wrap: normal; word-break: normal; hyphens: manual; letter-spacing: 0; } .dev-auto-slide { --dev-auto-aspect: 1.7778958555; --dev-auto-frame-width: min(calc(100vw - 40px), 1440px, calc((100svh - 76px) * var(--dev-auto-aspect))); position: relative; display: grid; place-items: center; min-height: auto; padding: 0; overflow: clip; isolation: isolate; background: #f3f8fe; scroll-margin-top: 76px; } .dev-auto-frame { position: relative; width: var(--dev-auto-frame-width); aspect-ratio: 1672 / 941; overflow: visible; } .dev-auto-bg { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: none; opacity: 1; pointer-events: none; } .dev-auto-bg--abstract { object-fit: fill; } .dev-auto-copy, .dev-auto-process-copy, .dev-auto-process-note, .dev-auto-card-layout { position: absolute; z-index: 1; } .dev-auto-copy { top: 15%; display: grid; gap: clamp(13px, 1.35vw, 20px); } .dev-auto-copy--left { left: 5.2%; width: 38%; max-width: 620px; } .dev-auto-hero .dev-auto-copy--left { width: 34.5%; max-width: none; } .dev-auto-problem .dev-auto-copy--left { top: 12.8%; width: 34.5%; max-width: none; } .dev-auto-problem .dev-auto-copy p, .dev-auto-problem .dev-auto-list { max-width: 100%; } .dev-auto-problem .dev-auto-copy > * { min-width: 0; max-width: 100%; } .dev-auto-copy h1, .dev-auto-copy h2, .dev-auto-process-copy h2, .dev-auto-section-head h2 { margin: 0; color: #071b3a; font-weight: 820; line-height: 1.03; } .dev-auto-copy h1 { font-size: clamp(44px, 4.8vw, 82px); } .dev-auto-hero .dev-auto-copy h1 { font-size: clamp(34px, 3.3vw, 58px); } .dev-auto-hero .dev-auto-lead { font-size: clamp(15px, 1.08vw, 19px) !important; } .dev-auto-copy h2, .dev-auto-process-copy h2, .dev-auto-section-head h2 { font-size: clamp(30px, 3.25vw, 56px); } .dev-auto-copy p, .dev-auto-process-copy p, .dev-auto-process-note, .dev-auto-section-head p, .dev-auto-card p, .dev-auto-list { margin: 0; color: #29405f; font-size: clamp(15px, 1.1vw, 20px); line-height: 1.48; } .dev-auto-lead { max-width: 620px; font-size: clamp(17px, 1.35vw, 22px) !important; } .dev-auto-tags { display: flex; flex-wrap: wrap; gap: 8px; } .dev-auto-tags span { display: inline-flex; align-items: center; min-height: 32px; padding: 7px 11px; border: 1px solid rgba(31, 123, 255, 0.16); border-radius: 999px; color: #0b4cbd; background: rgba(255, 255, 255, 0.78); font-size: clamp(12px, 0.9vw, 14px); font-weight: 760; } .dev-auto-actions, .dev-auto-final-note { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .dev-auto-list { display: grid; gap: 8px; padding: 0; list-style: none; } .dev-auto-list li { position: relative; padding-left: 18px; } .dev-auto-list li::before { content: ""; position: absolute; top: 0.68em; left: 0; width: 7px; height: 7px; border-radius: 999px; background: #1f7bff; box-shadow: 0 0 0 6px rgba(31, 123, 255, 0.11); } .dev-auto-process-copy { top: 6.2%; left: 7.2%; width: 84%; display: grid; gap: 10px; } .dev-auto-process-copy p { max-width: 980px; } .dev-auto-process-note { left: 7.2%; bottom: 8.8%; max-width: 1050px; color: #38526d; } .dev-auto-final-note { right: 7.2%; bottom: 7.2%; left: 7.2%; justify-content: space-between; padding: 18px 20px; border: 1px solid rgba(31, 123, 255, 0.14); border-radius: 20px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 18px 50px rgba(35, 88, 155, 0.1); } .dev-auto-final-note p { max-width: 760px; margin: 0; color: #29405f; } .dev-auto-card-layout { inset: 6.2% 4.9%; display: grid; grid-template-rows: auto 1fr; gap: clamp(13px, 1.35vw, 20px); } .dev-auto-slide--cards { min-height: auto; padding: 0; overflow: visible; } .dev-auto-slide--cards .dev-auto-frame { width: var(--dev-auto-frame-width); aspect-ratio: auto; min-height: 0; } .dev-auto-slide--cards .dev-auto-bg { object-fit: fill; } .dev-auto-slide--cards .dev-auto-card-layout { position: relative; inset: auto; padding: 6.2% 5.2%; } .dev-auto-section-head { display: grid; gap: 8px; max-width: 1120px; } .dev-auto-section-head p { max-width: 930px; } .dev-auto-card-grid { display: grid; gap: clamp(10px, 1.1vw, 16px); align-items: stretch; } .dev-auto-card-grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dev-auto-card-grid--ten { grid-template-columns: repeat(5, minmax(0, 1fr)); } .dev-auto-card { min-width: 0; display: grid; grid-template-rows: auto auto; gap: 0; padding: 0; overflow: hidden; border: 1px solid rgba(31, 123, 255, 0.12); border-radius: 16px; background: #f7fbff; box-shadow: 0 14px 38px rgba(35, 88, 155, 0.09); } .dev-auto-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: none; object-fit: contain; object-position: center; filter: none; opacity: 1; background: #f7fbff; } .dev-auto-card > div { display: grid; align-content: start; padding: clamp(10px, 1.05vw, 16px); } .dev-auto-card h3 { margin: 0 0 5px; color: #071b3a; font-size: clamp(16px, 1.18vw, 22px); line-height: 1.12; } .dev-auto-card p { font-size: clamp(12px, 0.83vw, 15px); line-height: 1.33; } .dev-auto-card--compact { padding: 0; gap: 0; } .dev-auto-card--compact img { aspect-ratio: 4 / 3; max-height: none; } .dev-auto-card--overlay { position: relative; display: block; min-height: 0; color: #ffffff; } .dev-auto-card--overlay img { display: block; aspect-ratio: 4 / 3; object-fit: contain; }
/* css/modules/responsive/development-automation-responsive-max-width-1180px.css */ .dev-auto-card--overlay > div { position: absolute; inset: auto 0 0; display: grid; align-content: end; min-height: 46%; padding: clamp(9px, 0.85vw, 14px); color: #ffffff; background: linear-gradient(180deg, rgba(7, 27, 58, 0), rgba(7, 27, 58, 0.82) 44%, rgba(7, 27, 58, 0.94)); transform: translateY(calc(100% - 3.35em)); transition: transform 180ms ease; } .dev-auto-card--overlay h3 { color: #ffffff; } .dev-auto-card--overlay p { color: rgba(255, 255, 255, 0.92); opacity: 0; transition: opacity 180ms ease; } .dev-auto-card--overlay:hover > div, .dev-auto-card--overlay:focus > div, .dev-auto-card--overlay:focus-within > div { transform: translateY(0); } .dev-auto-card--overlay:hover p, .dev-auto-card--overlay:focus p, .dev-auto-card--overlay:focus-within p { opacity: 1; } .dev-auto-card--compact > div { padding: clamp(7px, 0.72vw, 11px); } .dev-auto-card--compact h3 { font-size: clamp(13px, 0.92vw, 17px); line-height: 1.08; } .dev-auto-card--compact p { font-size: clamp(10px, 0.69vw, 13px); line-height: 1.22; } body.development-automation-route .generated-cta { background: linear-gradient(180deg, rgba(243, 248, 254, 0.86), rgba(255, 255, 255, 0.96)), url("/assets/development-automation/asset-dev-examples-bg-01.webp") center / cover no-repeat; } @media (max-width: 1180px) { .dev-auto-card-grid--ten { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1180px) { .dev-auto-card-grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 780px) { .dev-auto-slide { --dev-auto-frame-width: min(100%, 560px); min-height: auto; padding: 0 14px; overflow: visible; } } @media (max-width: 780px) { .dev-auto-frame { display: flex; flex-direction: column; width: var(--dev-auto-frame-width); aspect-ratio: auto; gap: 12px; } } @media (max-width: 780px) { .dev-auto-bg, .dev-auto-copy, .dev-auto-process-copy, .dev-auto-process-note, .dev-auto-card-layout { position: relative; inset: auto; width: 100%; max-width: none; } } @media (max-width: 780px) { .dev-auto-copy, .dev-auto-process-copy { order: -1; gap: 10px; } } @media (max-width: 780px) { .dev-auto-bg { height: auto; object-fit: contain; } } @media (max-width: 780px) { .dev-auto-copy h1 { font-size: clamp(34px, 10vw, 48px); } } @media (max-width: 780px) { .dev-auto-hero .dev-auto-copy { gap: 6px; } } @media (max-width: 780px) { .dev-auto-hero .dev-auto-copy h1 { font-size: clamp(27px, 7.5vw, 36px); } } @media (max-width: 780px) { .dev-auto-hero .dev-auto-lead { font-size: 13px !important; line-height: 1.2; } } @media (max-width: 780px) { .dev-auto-hero .dev-auto-bg { width: 64%; margin-inline: auto; object-fit: contain; } } @media (max-width: 780px) { .dev-auto-hero .dev-auto-tags { gap: 5px; } } @media (max-width: 780px) { .dev-auto-hero .dev-auto-tags span { min-height: 24px; padding: 4px 7px; font-size: 11px; } } @media (max-width: 780px) { .dev-auto-hero .dev-auto-actions { gap: 8px; } } @media (max-width: 780px) { .dev-auto-hero .dev-auto-actions .btn { min-height: 42px; padding-block: 10px; } } @media (max-width: 780px) { .dev-auto-copy h2, .dev-auto-process-copy h2, .dev-auto-section-head h2 { font-size: clamp(24px, 7.2vw, 34px); } } @media (max-width: 780px) { .dev-auto-copy p, .dev-auto-process-copy p, .dev-auto-process-note, .dev-auto-section-head p, .dev-auto-list { font-size: 15px; line-height: 1.34; } } @media (max-width: 780px) { .dev-auto-tags span { min-height: 28px; padding: 6px 9px; font-size: 12px; } } @media (max-width: 780px) { .dev-auto-actions, .dev-auto-final-note { display: grid; grid-template-columns: 1fr; } } @media (max-width: 780px) { .dev-auto-actions .btn, .dev-auto-final-note .btn { justify-content: center; width: 100%; } } @media (max-width: 780px) { .dev-auto-final-note { padding: 14px; border-radius: 16px; } } @media (max-width: 780px) { .dev-auto-slide--cards { padding: 0 14px; } } @media (max-width: 780px) { .dev-auto-slide--cards .dev-auto-frame { position: relative; width: var(--dev-auto-frame-width); gap: 0; } } @media (max-width: 780px) { .dev-auto-slide--cards .dev-auto-bg { position: absolute; inset: 0; height: 100%; object-fit: fill; } } @media (max-width: 780px) { .dev-auto-slide--cards .dev-auto-card-layout { position: relative; z-index: 1; gap: 9px; padding: 6.2% 5.2%; } } @media (max-width: 780px) { .dev-auto-slide--cards .dev-auto-section-head { gap: 5px; } } @media (max-width: 780px) { .dev-auto-slide--cards .dev-auto-section-head h2 { font-size: clamp(22px, 6.4vw, 29px); line-height: 1.04; } } @media (max-width: 780px) { .dev-auto-slide--cards .dev-auto-section-head p { font-size: 12px; line-height: 1.24; } } @media (max-width: 780px) { .dev-auto-card-grid--six, .dev-auto-card-grid--ten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } } @media (max-width: 780px) { .dev-auto-card, .dev-auto-card--compact { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 0; align-items: stretch; padding: 0; border-radius: 13px; } } @media (max-width: 780px) { .dev-auto-card img, .dev-auto-card--compact img { grid-row: auto; width: 100%; max-height: none; aspect-ratio: 4 / 3; object-fit: contain; } } @media (max-width: 780px) { .dev-auto-card > div, .dev-auto-card--compact > div { padding: 7px 8px 8px; } } @media (max-width: 780px) { .dev-auto-card h3, .dev-auto-card--compact h3 { margin-bottom: 2px; font-size: 13px; line-height: 1.08; } } @media (max-width: 780px) { .dev-auto-card p, .dev-auto-card--compact p { font-size: 10.5px; line-height: 1.15; } } @media (max-width: 780px) { .dev-auto-slide--examples .dev-auto-card-layout { gap: 4px; padding: 6.2% 5.2%; } } @media (max-width: 780px) { .dev-auto-slide--examples .dev-auto-section-head h2 { font-size: clamp(19px, 5.4vw, 25px); line-height: 1.02; } }
/* css/modules/responsive/development-automation-responsive-max-width-780px.css */ @media (max-width: 780px) { .dev-auto-slide--examples .dev-auto-section-head p { font-size: 10.4px; line-height: 1.12; } } @media (max-width: 780px) { .dev-auto-slide--examples .dev-auto-card-grid--ten { gap: 4px; } } @media (max-width: 780px) { .dev-auto-slide--examples .dev-auto-card--compact img { aspect-ratio: 4 / 3; } } @media (max-width: 780px) { .dev-auto-slide--examples .dev-auto-card--compact > div { padding: 7px 8px 8px; } } @media (max-width: 780px) { .dev-auto-slide--examples .dev-auto-card--compact h3 { margin-bottom: 1px; font-size: 13px; line-height: 1.08; } } @media (max-width: 780px) { .dev-auto-slide--examples .dev-auto-card--compact p { font-size: 10.5px; line-height: 1.15; } }
/* css/modules/responsive/leak-control-responsive-max-width-1100px.css */ /* Leak control solution landing. Source of truth: specs/product-plans/leak-control-landing-plan.md */ body.leak-control-route .generated-page { background: #f3f8fd; } body.leak-control-route :where(h1, h2, h3, p, li, a, button, span, strong) { overflow-wrap: normal; word-break: normal; hyphens: manual; letter-spacing: 0; } .leak-hero { position: relative; min-height: calc(100svh - 76px); overflow: clip; color: #f8fbff; background: #061422; isolation: isolate; } .leak-hero-bg { position: absolute; inset: 0; z-index: -2; } .leak-hero-bg img { width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 1; filter: none; } .leak-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3, 13, 25, 0.96) 0%, rgba(3, 13, 25, 0.86) 48%, rgba(3, 13, 25, 0.46) 100%), radial-gradient(circle at 82% 26%, rgba(44, 169, 255, 0.26), transparent 30%); } .leak-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.62fr); gap: clamp(28px, 6vw, 74px); align-items: center; min-height: calc(100svh - 76px); padding: clamp(64px, 10vh, 116px) 0; } .leak-hero-copy { max-width: 780px; } .leak-hero-copy .eyebrow { color: #77c8ff; } .leak-hero-copy h1 { max-width: 760px; margin-bottom: 22px; color: #fff; font-size: clamp(40px, 4.4vw, 64px); line-height: 1; } .leak-hero-copy p { max-width: 690px; color: rgba(236, 246, 255, 0.84); } .leak-lead { font-size: clamp(18px, 1.55vw, 23px); line-height: 1.44; } .leak-cable { position: absolute; right: 7%; top: 50%; width: min(310px, 24vw); height: auto; transform: translateY(-28%); filter: drop-shadow(0 28px 42px rgba(0, 0, 0, 0.36)); } .leak-problem, .leak-pilot, .leak-benefits { background: #f4f8fc; } .leak-split, .leak-visual-grid, .leak-scope-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(360px, 1fr); gap: clamp(28px, 5vw, 62px); align-items: center; } .leak-visual-grid-reverse { grid-template-columns: minmax(360px, 1fr) minmax(0, 0.85fr); } .leak-copy h2, .leak-section-head h2 { max-width: 860px; } .leak-copy p, .leak-section-head p { max-width: 720px; } .leak-risk-grid, .leak-metrics, .leak-flow-grid, .leak-benefit-grid { display: grid; gap: 16px; } .leak-risk-grid, .leak-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .leak-risk-grid article, .leak-metrics article, .leak-flow-grid article, .leak-benefit-grid article, .leak-products { min-width: 0; padding: clamp(20px, 2.8vw, 30px); border: 1px solid rgba(31, 123, 255, 0.15); border-radius: 24px; background: rgba(255, 255, 255, 0.82); box-shadow: var(--shadow-soft); } .leak-risk-grid strong, .leak-metrics strong { display: block; margin-bottom: 8px; color: var(--ink); font-size: clamp(22px, 2.2vw, 32px); line-height: 1.05; } .leak-risk-grid span, .leak-metrics span { display: block; color: var(--muted); font-weight: 650; line-height: 1.45; } .leak-visual-section, .leak-flow, .leak-scope { background: radial-gradient(circle at 18% 16%, rgba(31, 123, 255, 0.11), transparent 26%), linear-gradient(180deg, #ffffff 0%, #eef6ff 100%); } .leak-visual, .leak-wide-visual, .leak-scope-visual { margin: 0; padding: 10px; border: 1px solid rgba(31, 123, 255, 0.14); border-radius: 28px; background: rgba(255, 255, 255, 0.86); box-shadow: var(--shadow-soft); } .leak-visual img, .leak-wide-visual img, .leak-scope-visual img { width: 100%; height: auto; border-radius: 20px; object-fit: contain; } .leak-list, .leak-steps { display: grid; gap: 10px; margin: 22px 0 0; padding-left: 20px; color: var(--text); font-size: 16px; line-height: 1.55; } .leak-section-head { max-width: 860px; margin-bottom: 34px; } .leak-flow-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .leak-flow-grid article span { display: inline-flex; margin-bottom: 18px; color: var(--blue-dark); font-size: 13px; font-weight: 840; } .leak-flow-grid article h3, .leak-benefit-grid article h3, .leak-products h3 { color: var(--ink); } .leak-flow-grid article p, .leak-benefit-grid article p { margin-bottom: 0; font-size: 15.5px; } .leak-wide-visual { margin-top: 26px; } .leak-scope { color: #f5faff; background: radial-gradient(circle at 80% 18%, rgba(62, 186, 255, 0.18), transparent 32%), linear-gradient(135deg, #061326 0%, #0b223d 58%, #071a2e 100%); } .leak-scope .leak-copy { grid-row: 1 / span 2; } .leak-scope-visual, .leak-metrics { grid-column: 2; } .leak-scope-visual { border-color: rgba(122, 196, 255, 0.22); background: rgba(255, 255, 255, 0.08); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18); } .leak-scope .eyebrow { color: #7ac4ff; } .leak-scope h2 { color: #fff; } .leak-scope p { color: rgba(233, 244, 255, 0.82); } .leak-note { padding: 14px 16px; border: 1px solid rgba(122, 196, 255, 0.22); border-radius: 18px; background: rgba(255, 255, 255, 0.06); } .leak-metrics article { border-color: rgba(122, 196, 255, 0.22); background: rgba(255, 255, 255, 0.08); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18); } .leak-metrics strong { color: #fff; font-size: clamp(30px, 4vw, 52px); } .leak-metrics span { color: rgba(231, 243, 255, 0.8); } .leak-benefit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .leak-products { margin-top: 22px; } .leak-products h3 { margin-bottom: 18px; } @media (max-width: 1100px) { .leak-hero-inner, .leak-split, .leak-visual-grid, .leak-visual-grid-reverse, .leak-scope-grid { grid-template-columns: 1fr; } } @media (max-width: 1100px) { .leak-hero-inner { min-height: auto; } } @media (max-width: 1100px) { .leak-cable { width: min(360px, 64vw); right: 4%; } } @media (max-width: 1100px) { .leak-flow-grid, .leak-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1100px) { .leak-scope .leak-copy, .leak-scope-visual, .leak-metrics { grid-column: auto; grid-row: auto; } } @media (max-width: 780px) { .leak-hero { min-height: auto; } }
/* css/modules/responsive/leak-control-responsive-max-width-780px-foundation.css */ @media (max-width: 780px) { .leak-hero::after { background: linear-gradient(180deg, rgba(3, 13, 25, 0.98) 0%, rgba(3, 13, 25, 0.9) 70%, rgba(3, 13, 25, 0.7) 100%), radial-gradient(circle at 78% 20%, rgba(44, 169, 255, 0.2), transparent 28%); } } @media (max-width: 780px) { .leak-hero-inner { padding: 64px 0 54px; gap: 28px; } } @media (max-width: 780px) { .leak-hero-copy h1 { max-width: min(340px, calc(100vw - 34px)); font-size: clamp(32px, 9vw, 40px); line-height: 1.05; } } @media (max-width: 780px) { .leak-hero-copy p, .leak-copy p, .leak-section-head p { max-width: min(340px, calc(100vw - 34px)); font-size: 16px; } } @media (max-width: 780px) { .leak-copy h2, .leak-section-head h2 { max-width: min(340px, calc(100vw - 34px)); font-size: clamp(28px, 8vw, 36px); line-height: 1.08; } } @media (max-width: 780px) { .leak-risk-grid, .leak-metrics, .leak-flow-grid, .leak-benefit-grid { grid-template-columns: 1fr; } } @media (max-width: 780px) { .leak-risk-grid article, .leak-metrics article, .leak-flow-grid article, .leak-benefit-grid article, .leak-products { padding: 20px; border-radius: 20px; } } @media (max-width: 780px) { .leak-visual, .leak-wide-visual, .leak-scope-visual { padding: 6px; border-radius: 20px; } } @media (max-width: 780px) { .leak-visual img, .leak-wide-visual img, .leak-scope-visual img { border-radius: 15px; } } @media (max-width: 780px) { .leak-cable { top: auto; right: -52px; bottom: -78px; width: min(280px, 82vw); transform: none; opacity: 0.9; } }
/* css/modules/components/askue-components.css */ /* ASKUE premium landing */ body.askue-route { background: #f4f9ff; } body.askue-route h1, body.askue-route h2, body.askue-route h3, body.askue-route p, body.askue-route li, body.askue-route a, body.askue-route span, body.askue-route button { overflow-wrap: normal; word-break: normal; hyphens: manual; } .askue-slide { position: relative; min-height: calc(100svh - 76px); isolation: isolate; overflow: hidden; display: flex; align-items: center; padding: 0; color: #071b3a; background: #eef6ff; } .askue-slide:not(.askue-card-slide) { height: auto; min-height: 0; aspect-ratio: 1672 / 941; } .askue-card-slide { height: auto; min-height: calc(100svh - 76px); overflow: visible; padding: clamp(44px, 6vw, 82px) 0; } .askue-bg { position: absolute; inset: 0; z-index: -2; display: flex; align-items: center; justify-content: center; pointer-events: none; width: 100%; height: 100%; } .askue-bg img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; object-position: center; } .askue-wf-a .askue-bg { inset: 0; } .askue-wf-b .askue-bg { inset: 0; } .askue-card-slide .askue-bg { inset: 0; width: 100%; display: block; background-position: top center; background-repeat: repeat-y; background-size: 100% auto; } .askue-card-slide .askue-bg img { width: 100%; height: auto; max-height: none; opacity: 0; } #askue-objects .askue-bg { background-image: url("/assets/solutions/askue/phase2_20260531/asset-askue-objects-bg-01.webp"); } .askue-data .askue-bg { background-image: url("/assets/solutions/askue/phase2_20260531/asset-askue-data-bg-01.webp"); } .askue-economics .askue-bg { background-image: url("/assets/solutions/askue/phase2_20260531/asset-askue-economics-bg-01.webp"); } .askue-slide::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(238, 246, 255, 0.12), rgba(238, 246, 255, 0.12)); } .askue-slide-inner { display: grid; min-height: 0; height: 100%; align-items: center; } .askue-left-safe { grid-template-columns: minmax(0, 0.40fr) minmax(0, 0.60fr); } .askue-right-safe { grid-template-columns: minmax(0, 0.60fr) minmax(0, 0.40fr); } .askue-left-safe .askue-copy { grid-column: 1; } .askue-right-safe .askue-copy { grid-column: 2; } .askue-copy { max-width: 470px; padding: clamp(16px, 1.8vw, 24px); } .askue-copy h1 { max-width: 500px; margin-bottom: 12px; font-size: clamp(32px, 3.25vw, 48px); line-height: 1.03; } .askue-copy h2, .askue-section-head h2, .askue-process-copy h2 { max-width: 720px; color: #061630; font-size: clamp(34px, 3vw, 48px); font-weight: 840; line-height: 1.08; } .askue-copy p, .askue-section-head p, .askue-process-copy p, .askue-legal { max-width: 680px; color: #071b3a; font-size: clamp(16px, 1.12vw, 18px); line-height: 1.44; } .askue-lead { color: #061630; font-weight: 760; } .askue-chip-list, .askue-note-row, .askue-pilot-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .askue-chip-list span, .askue-note-row span, .askue-pilot-grid span { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 11px; border: 1px solid rgba(31, 123, 255, 0.18); border-radius: 999px; color: #123a68; background: rgba(255, 255, 255, 0.72); font-size: 12.5px; font-weight: 760; box-shadow: 0 10px 26px rgba(15, 55, 115, 0.07); } .askue-list { display: grid; gap: 10px; margin: 16px 0 0; padding-left: 20px; color: #071b3a; font-size: clamp(16px, 1.05vw, 17.5px); line-height: 1.42; } .askue-card-section { display: grid; min-height: 0; align-content: center; gap: clamp(20px, 2.4vw, 30px); } .askue-section-head { max-width: 880px; padding: clamp(18px, 2vw, 26px); } .askue-card-slide .askue-section-head { max-width: 980px; } .askue-card-slide .eyebrow { color: #004dcb; font-size: 15px; font-weight: 900; } .askue-data .askue-section-head h2, .askue-economics .askue-section-head h2 { color: #f7fbff; } .askue-data .askue-section-head p, .askue-economics .askue-section-head p { color: #dcecff; font-weight: 620; } .askue-data .askue-section-head .eyebrow, .askue-economics .askue-section-head .eyebrow { color: #5db1ff; } .askue-card-grid { display: grid; gap: clamp(14px, 1.5vw, 20px); } .askue-card-grid--eight { grid-template-columns: repeat(4, minmax(0, 1fr)); } .askue-card-grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } .askue-card-grid--economics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .askue-card { display: flex; overflow: hidden; min-width: 0; border: 1px solid rgba(31, 123, 255, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 14px 34px rgba(15, 55, 115, 0.1); } .askue-card--image-top { flex-direction: column; } .askue-card-media { flex: 0 0 auto; min-width: 0; background: #06172a; } .askue-card--image-top .askue-card-media { aspect-ratio: 16 / 9; } .askue-card--image-top img { display: block; width: 100%; height: 100%; object-fit: contain; } .askue-card--image-left { display: grid; grid-template-columns: minmax(170px, 0.38fr) minmax(0, 0.62fr); align-items: stretch; } .askue-card--image-left .askue-card-media { min-height: 170px; } .askue-card--image-left img { display: block; width: 100%; height: 100%; object-fit: contain; } .askue-card-body { padding: 14px 14px 16px; } .askue-card h3 { margin-bottom: 6px; color: #071b3a; font-size: clamp(19px, 1.45vw, 23px); font-weight: 840; line-height: 1.14; } .askue-card p { margin-bottom: 0; color: #233f62; font-size: clamp(14.5px, 0.95vw, 16px); line-height: 1.42; } .askue-process { display: grid; align-items: stretch; } .askue-bg--process { inset: 0; width: 100%; height: 100%; align-items: center; } .askue-bg--process img { width: 100%; height: 100%; max-height: none; } .askue-process-inner { display: grid; min-height: 0; height: 100%; grid-template-rows: minmax(0, 0.30fr) minmax(0, 0.42fr) minmax(0, 0.28fr); align-content: stretch; gap: 18px; padding: clamp(28px, 4vh, 44px) 0; }
/* css/modules/features/askue-layout.css */ .askue-process-copy { align-self: start; max-width: 820px; padding: 14px 18px; } .askue-process-copy h2 { font-size: clamp(26px, 2.2vw, 34px); } .askue-note-row { grid-row: 3; align-self: end; justify-content: center; } .askue-process-detail { grid-row: 3; align-self: start; justify-self: center; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); width: min(100%, 1120px); margin: 0 auto; padding: 0 clamp(12px, 2vw, 24px); } .askue-process-detail p { margin: 0; color: #071b3a; font-size: clamp(15px, 1vw, 17px); font-weight: 620; line-height: 1.42; } .askue-process-detail--pilot { align-self: center; grid-template-columns: minmax(0, 760px); justify-content: center; width: min(100%, 820px); } .askue-pilot .askue-process-inner { grid-template-rows: minmax(0, 0.30fr) minmax(0, 0.47fr) minmax(0, 0.23fr); } .askue-pilot-grid { grid-row: 3; align-self: end; justify-content: center; margin-top: 0; } .askue-legal { grid-row: 3; align-self: end; justify-self: center; max-width: 900px; margin: 0; padding: 0 18px; color: #071b3a; font-weight: 650; } .askue-products { background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%); }
/* css/modules/features/products-layout-content.css */ .askue-products-inner { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(320px, 0.38fr); gap: 28px; align-items: center; }
/* css/modules/responsive/askue-responsive-max-width-1180px.css */ .askue-gateway-strip { display: flex; justify-content: center; align-items: flex-end; gap: 10px; } .askue-gateway-strip img { width: min(31%, 150px); height: auto; object-fit: contain; } @media (max-width: 1180px) { .askue-slide { height: auto; min-height: calc(100svh - 68px); padding: 32px 0; overflow: hidden; } } @media (max-width: 1180px) { .askue-slide:not(.askue-card-slide) { min-height: 0; aspect-ratio: 1672 / 941; padding: 0; } } @media (max-width: 1180px) { .askue-slide-inner, .askue-left-safe, .askue-right-safe { grid-template-columns: 1fr; min-height: auto; } } @media (max-width: 1180px) { .askue-left-safe .askue-copy, .askue-right-safe .askue-copy { grid-column: 1; } } @media (max-width: 1180px) { .askue-copy { max-width: 620px; } } @media (max-width: 1180px) { .askue-bg { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 1; } } @media (max-width: 1180px) { .askue-bg img, .askue-bg--process img { width: 100%; height: 100%; max-height: none; object-fit: contain; } } @media (max-width: 1180px) { .askue-process-inner { height: 100%; grid-template-rows: minmax(0, 0.34fr) minmax(0, 0.36fr) minmax(0, 0.30fr); } } @media (max-width: 1180px) { .askue-pilot .askue-process-inner { grid-template-rows: minmax(0, 0.28fr) minmax(0, 0.30fr) minmax(0, 0.32fr) minmax(0, 0.10fr); } } @media (max-width: 1180px) { .askue-process-detail { gap: 18px; } } @media (max-width: 1180px) { .askue-card-slide { height: auto; min-height: calc(100svh - 68px); overflow: visible; } } @media (max-width: 1180px) { .askue-card-grid--eight, .askue-card-grid--six { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1180px) { .askue-card-grid--economics { grid-template-columns: 1fr; } } @media (max-width: 780px) { .askue-slide { padding: 18px 0; } } @media (max-width: 780px) { .askue-slide:not(.askue-card-slide) { padding: 0; } } @media (max-width: 780px) { .askue-bg { margin-bottom: 0; } } @media (max-width: 780px) { .askue-bg img { width: 100%; height: 100%; max-height: none; } } @media (max-width: 780px) { .askue-copy h1 { margin-bottom: 14px; font-size: clamp(28px, 8vw, 36px); line-height: 1.04; } } @media (max-width: 780px) { .askue-copy h2, .askue-section-head h2, .askue-process-copy h2 { margin-bottom: 10px; font-size: clamp(24px, 7vw, 32px); line-height: 1.08; } } @media (max-width: 780px) { .askue-copy p, .askue-section-head p, .askue-process-copy p, .askue-process-detail p, .askue-legal { margin-bottom: 10px; font-size: 13.5px; line-height: 1.34; } } @media (max-width: 780px) { .askue-process-detail { grid-template-columns: 1fr; gap: 10px; padding: 0 14px; } } @media (max-width: 780px) { .askue-card-grid--eight, .askue-card-grid--six { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } } @media (max-width: 780px) { .askue-card-grid--economics { grid-template-columns: 1fr; gap: 8px; } } @media (max-width: 780px) { .askue-card--image-top img { min-height: 96px; aspect-ratio: auto; } } @media (max-width: 780px) { .askue-card--image-left { grid-template-columns: minmax(120px, 0.38fr) minmax(0, 0.62fr); } } @media (max-width: 780px) { .askue-card--image-left .askue-card-media { min-height: 128px; } } @media (max-width: 780px) { .askue-card-body { padding: 10px; } } @media (max-width: 780px) { .askue-card h3 { margin-bottom: 5px; font-size: 15px; } } @media (max-width: 780px) { .askue-card p { font-size: 12px; line-height: 1.28; } } @media (max-width: 780px) { .askue-chip-list span, .askue-note-row span, .askue-pilot-grid span { min-height: 28px; padding: 6px 9px; font-size: 11.5px; } } @media (max-width: 780px) { .askue-chip-list { gap: 7px; margin-top: 12px; } } @media (max-width: 780px) { .askue-route .hero-actions { gap: 8px; } } @media (max-width: 780px) { .askue-route .hero-actions .btn { min-height: 42px; padding: 10px 14px; font-size: 13px; } }
/* css/modules/responsive/products-responsive-max-width-780px-interaction.css */ @media (max-width: 780px) { .askue-products-inner { grid-template-columns: 1fr; } }
/* css/modules/responsive/askue-responsive-max-width-780px.css */ @media (max-width: 780px) { .askue-gateway-strip img { width: min(30%, 110px); } } @media (max-width: 480px) { .askue-hero { padding: 16px 0; } } @media (max-width: 480px) { .askue-hero .askue-bg { margin-bottom: 0; } } @media (max-width: 480px) { .askue-hero .askue-bg img { max-height: none; } } @media (max-width: 480px) { .askue-hero .askue-copy { padding: 14px; } } @media (max-width: 480px) { .askue-hero .askue-copy h1 { margin-bottom: 10px; font-size: 28px; line-height: 1.02; } } @media (max-width: 480px) { .askue-hero .askue-copy p { margin-bottom: 8px; font-size: 12.5px; line-height: 1.28; } } @media (max-width: 480px) { .askue-hero .askue-chip-list { gap: 6px; margin-top: 8px; } } @media (max-width: 480px) { .askue-hero .askue-chip-list span { min-height: 24px; padding: 4px 8px; font-size: 10.5px; } } @media (max-width: 480px) { .askue-hero .hero-actions { gap: 6px; margin-top: 8px; } } @media (max-width: 480px) { .askue-hero .hero-actions .btn { min-height: 34px; padding: 7px 10px; font-size: 11.5px; } } @media (max-width: 480px) { .askue-card-grid--eight, .askue-card-grid--six { grid-template-columns: 1fr; } } @media (max-width: 480px) { .askue-card--image-left { grid-template-columns: 1fr; } } @media (max-width: 480px) { .askue-card--image-left .askue-card-media { min-height: 160px; } }
/* css/modules/features/leak-control-layout.css */ /* Leak control Phase 3 integration. Source of truth: specs/product-plans/leak-control-asset-batch-2026-05-31.md */ body.leak-control-route .generated-page { background: #07101b; } body.leak-control-route .generated-cta { margin-top: 0; }
/* css/modules/responsive/hvac-responsive-max-width-1180px.css */ /* HVAC climate monitoring Phase 3 integration */ .hvac-route { --gr-ink: #123421; --gr-text: #294a35; --gr-muted: #5b765f; --gr-green: #208a4b; --gr-green-dark: #12663a; --gr-line: rgba(32, 138, 75, 0.2); --gr-surface: rgba(255, 255, 255, 0.9); background: #f4fbef; } .hvac-route .generated-page { background: #f4fbef; } .hvac-route .rf-slide { background: #f4fbef; } .hvac-route .rf-bg { object-fit: contain; object-position: center; filter: none; opacity: 1; } .hvac-route .rf-slide:not(.rf-card-slide) { min-height: min(calc(100vw * 941 / 1672), 100vh); } .hvac-route .rf-inner--left { grid-template-columns: minmax(0, 0.62fr) minmax(0, 0.38fr); } .hvac-route .rf-inner--right { grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr); } .hvac-route .rf-copy { max-width: min(790px, 58vw); } .hvac-route .rf-inner--right .rf-copy { max-width: min(790px, 58vw); justify-self: end; } .hvac-route .rf-copy h1 { max-width: 760px; font-size: clamp(34px, 3.85vw, 60px); line-height: 1.03; } .hvac-route .rf-copy h2, .hvac-route .rf-section-head h2 { font-size: clamp(30px, 3.05vw, 48px); line-height: 1.06; } .hvac-route .rf-copy p, .hvac-route .rf-section-head p, .hvac-route .rf-card-note { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.38; } .hvac-route .rf-copy p { margin-top: 11px; } .hvac-route .rf-card-media { aspect-ratio: 16 / 9; background: #edf8ea; } .hvac-route .rf-card-body { padding: clamp(14px, 1.3vw, 18px); } .hvac-route .rf-card h3 { font-size: clamp(17px, 1.15vw, 20px); } .hvac-route .rf-card p { font-size: 14px; line-height: 1.34; } .hvac-route .hvac-audience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hvac-route .hvac-audience-grid .rf-card:nth-child(4) { grid-column: 1 / 2; } .hvac-route .hvac-audience-grid .rf-card:nth-child(5) { grid-column: 2 / 4; } .hvac-route .hvac-final-inner { position: relative; z-index: 1; min-height: inherit; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(10px, 1.2vw, 16px); align-items: stretch; padding-top: clamp(22px, 3.4vh, 42px); padding-bottom: clamp(22px, 3.4vh, 42px); } .hvac-route .hvac-final-copy { grid-row: 1; max-width: min(900px, 64vw); align-self: start; } .hvac-route .hvac-start-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: min(960px, 72vw); margin-top: clamp(12px, 1.7vw, 20px); } .hvac-route .hvac-start-list span { min-height: 58px; display: flex; align-items: center; padding: 9px 10px; border: 1px solid rgba(32, 138, 75, 0.22); border-radius: 8px; background: rgba(255, 255, 255, 0.76); color: var(--gr-green-dark); font-size: 12.5px; font-weight: 700; line-height: 1.22; } .hvac-route .hvac-final-bottom { grid-row: 3; max-width: min(980px, 74vw); align-self: end; } .hvac-route .hvac-contact { background: #f1faed; } .hvac-route .hvac-contact .generated-cta-card { border-color: var(--gr-line); box-shadow: 0 20px 60px rgba(37, 95, 45, 0.1); } @media (max-width: 1180px) { .hvac-route .rf-copy, .hvac-route .rf-inner--right .rf-copy { max-width: min(720px, 60vw); } } @media (max-width: 1180px) { .hvac-route .hvac-audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1180px) { .hvac-route .hvac-audience-grid .rf-card:nth-child(4), .hvac-route .hvac-audience-grid .rf-card:nth-child(5) { grid-column: auto; } } @media (max-width: 1180px) { .hvac-route .hvac-start-list { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: min(820px, 66vw); } } @media (max-width: 860px) { .hvac-route .rf-inner { display: block; } } @media (max-width: 860px) { .hvac-route .rf-copy, .hvac-route .rf-inner--right .rf-copy, .hvac-route .rf-section-head { max-width: 62%; } } @media (max-width: 860px) { .hvac-route .rf-inner--right .rf-copy { margin-left: auto; } } @media (max-width: 860px) { .hvac-route .rf-copy h1 { font-size: clamp(28px, 7.4vw, 36px); } } @media (max-width: 860px) { .hvac-route .rf-copy h2, .hvac-route .rf-section-head h2 { font-size: clamp(25px, 6.5vw, 33px); } } @media (max-width: 860px) { .hvac-route .rf-copy p, .hvac-route .rf-section-head p, .hvac-route .rf-card-note { font-size: 14px; line-height: 1.3; } } @media (max-width: 860px) { .hvac-route .rf-card-grid--six, .hvac-route .hvac-audience-grid { grid-template-columns: 1fr; } } @media (max-width: 860px) { .hvac-route .hvac-final-inner { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(180px, 1fr) auto; gap: 14px; padding-top: 24px; padding-bottom: 24px; } } @media (max-width: 860px) { .hvac-route .hvac-final-copy, .hvac-route .hvac-start-list, .hvac-route .hvac-final-bottom { max-width: 100%; } } @media (max-width: 860px) { .hvac-route .hvac-start-list { grid-template-columns: 1fr; } } @media (max-width: 860px) { .hvac-route .hvac-final-bottom { margin-top: 0; } } @media (max-width: 520px) { .hvac-route .rf-copy, .hvac-route .rf-inner--right .rf-copy, .hvac-route .rf-section-head { max-width: 68%; } } @media (max-width: 520px) { .hvac-route .hvac-hero .rf-copy, .hvac-route .hvac-dispatch .rf-copy { max-width: 70%; } } @media (max-width: 520px) { .hvac-route .hvac-managed .rf-copy { max-width: 66%; margin-left: auto; } } @media (max-width: 520px) { .hvac-route .hero-actions { gap: 8px; } } @media (max-width: 520px) { .hvac-route .hero-actions .btn { min-height: 38px; padding: 10px 13px; font-size: 13px; } }
/* css/modules/responsive/wastewater-responsive-max-width-1180px.css */ /* Wastewater monitoring Phase 3 integration */ .wastewater-route { --ww-ink: #071f13; --ww-text: #021008; --ww-muted: #60796b; --ww-green: #176a40; --ww-green-dark: #073d24; --ww-blue: #0d547c; --ww-line: rgba(43, 138, 85, 0.22); --ww-surface: rgba(255, 255, 255, 0.88); background: #f4f9ef; } .wastewater-route .generated-page { background: #f4f9ef; } .wastewater-route .rf-slide { background: #f4f9ef; color: var(--ww-ink); } .wastewater-route .rf-slide:not(.rf-card-slide) { min-height: calc(100vw * 941 / 1672); } .wastewater-route .rf-bg { object-fit: fill; object-position: center; filter: none; opacity: 1; } .wastewater-route .ww-hero::after, .wastewater-route .ww-quiet-normal::after { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 0; width: min(62vw, 880px); pointer-events: none; } .wastewater-route .ww-hero::after { background: linear-gradient(90deg, rgba(244, 249, 239, 0.92) 0%, rgba(244, 249, 239, 0.72) 54%, rgba(244, 249, 239, 0) 100%); } .wastewater-route .ww-quiet-normal::after { inset: 0 0 0 auto; background: linear-gradient(270deg, rgba(244, 249, 239, 0.94) 0%, rgba(244, 249, 239, 0.78) 58%, rgba(244, 249, 239, 0) 100%); } .wastewater-route .rf-inner, .wastewater-route .rf-card-section { position: relative; z-index: 1; padding-top: clamp(24px, 4vh, 50px); padding-bottom: clamp(24px, 4vh, 50px); } .wastewater-route .rf-inner--left { grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr); } .wastewater-route .rf-inner--right { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); } .wastewater-route .rf-copy { max-width: min(760px, 58vw); } .wastewater-route .rf-inner--right .rf-copy { max-width: min(720px, 54vw); justify-self: end; } .wastewater-route .rf-copy h1, .wastewater-route .rf-copy h2, .wastewater-route .rf-section-head h2 { color: var(--ww-ink); } .wastewater-route .rf-copy h1 { max-width: 760px; font-size: clamp(34px, 3.8vw, 60px); line-height: 1.03; } .wastewater-route .rf-copy h2, .wastewater-route .rf-section-head h2 { font-size: clamp(30px, 3vw, 48px); line-height: 1.06; } .wastewater-route .rf-copy p, .wastewater-route .rf-section-head p, .wastewater-route .rf-card-note { color: var(--ww-text); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.38; } .wastewater-route .rf-copy p { margin-top: 11px; } .wastewater-route .eyebrow { color: var(--ww-green-dark); } .wastewater-route .eyebrow::before { background: var(--ww-green); box-shadow: 0 0 0 8px rgba(43, 138, 85, 0.12); } .wastewater-route .rf-accent { color: #021008 !important; font-weight: 800; } .wastewater-route .ww-offer { max-width: 680px; color: #021008; font-weight: 700; } .wastewater-route .ww-quiet-normal .rf-copy h2, .wastewater-route .ww-quiet-normal .rf-copy p, .wastewater-route .ww-quiet-normal .rf-accent { color: #021008 !important; } .wastewater-route .btn-primary { background: linear-gradient(135deg, #187a49 0%, #073d24 100%); box-shadow: 0 14px 34px rgba(43, 138, 85, 0.24); } .wastewater-route .btn-secondary { color: var(--ww-green-dark); border-color: rgba(43, 138, 85, 0.25); background: rgba(255, 255, 255, 0.78); } .wastewater-route .rf-section-head { max-width: 1040px; } .wastewater-route .rf-card { overflow: hidden; border-color: var(--ww-line); background: var(--ww-surface); box-shadow: 0 18px 44px rgba(38, 88, 50, 0.11); } .wastewater-route .rf-card-media { aspect-ratio: 16 / 9; background: #edf7ea; } .wastewater-route .rf-card-media img { width: 100%; height: 100%; object-fit: contain; } .wastewater-route .rf-card-body { padding: clamp(14px, 1.3vw, 18px); } .wastewater-route .rf-card-body span { color: #0b5d36; } .wastewater-route .rf-card h3 { color: var(--ww-ink); font-size: clamp(17px, 1.14vw, 20px); } .wastewater-route .rf-card p { color: var(--ww-text); font-size: 14px; line-height: 1.34; } .wastewater-route .rf-card p + p { margin-top: 8px; } .wastewater-route .rf-card-note { color: #062f1d; } .wastewater-route .ww-status-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .wastewater-route .ww-status-strip span, .wastewater-route .ww-start-list span { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 10px; border: 1px solid rgba(43, 138, 85, 0.22); border-radius: 8px; background: rgba(255, 255, 255, 0.78); color: var(--ww-green-dark); font-size: 13px; font-weight: 700; line-height: 1.2; } .wastewater-route .ww-final-cta { min-height: min(56.28vw, 100vh); } .wastewater-route .ww-final-inner { position: relative; z-index: 1; min-height: inherit; display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; padding-top: clamp(22px, 3.4vh, 42px); padding-bottom: clamp(22px, 3.4vh, 42px); } .wastewater-route .ww-final-copy { max-width: min(760px, 55vw); } .wastewater-route .ww-final-copy p { margin-top: 8px; line-height: 1.26; } .wastewater-route .ww-final-copy h2 { font-size: clamp(28px, 2.7vw, 44px); } .wastewater-route .ww-final-top { grid-row: 1; align-self: start; } .wastewater-route .ww-final-bottom { grid-row: 3; align-self: end; position: relative; top: 10px; } .wastewater-route .ww-start-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 16px; max-width: min(860px, 62vw); } .wastewater-route .ww-start-list span { min-height: 56px; } .wastewater-route .ww-contact { background: #f4f9ef; } .wastewater-route .generated-cta-card { border-color: var(--ww-line); box-shadow: 0 20px 60px rgba(38, 88, 50, 0.11); } .wastewater-route .ww-contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .wastewater-route .ww-contact-form label { gap: 4px; color: var(--ww-text); font-size: 12.5px; } .wastewater-route .ww-contact-form input, .wastewater-route .ww-contact-form select, .wastewater-route .ww-contact-form textarea { width: 100%; min-height: 37px; padding: 9px 10px; border: 1px solid rgba(43, 138, 85, 0.22); border-radius: 8px; background: #fff; color: var(--ww-ink); font: inherit; } .wastewater-route .ww-contact-form textarea { min-height: 62px; } .wastewater-route .ww-contact-form .form-consent { font-size: 12px; line-height: 1.25; overflow-wrap: normal; word-break: normal; hyphens: manual; } .wastewater-route .ww-contact-form button { justify-self: start; } @media (max-width: 1180px) { .wastewater-route .rf-copy, .wastewater-route .rf-inner--right .rf-copy { max-width: min(700px, 58vw); } } @media (max-width: 1180px) { .wastewater-route .rf-card-grid--six, .wastewater-route .rf-card-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1180px) { .wastewater-route .ww-start-list { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: min(720px, 58vw); } } @media (min-width: 761px) and (max-height: 820px) { .wastewater-route .ww-hero .rf-copy h1 { font-size: clamp(30px, 3.3vw, 50px); } } @media (min-width: 761px) and (max-height: 820px) { .wastewater-route .ww-hero .rf-copy p { margin-top: 8px; font-size: 14px; line-height: 1.24; } } @media (max-width: 860px) { .wastewater-route .rf-slide:not(.rf-card-slide) { min-height: min(56.28vw, 100vh); } }
/* css/modules/responsive/wastewater-responsive-max-width-860px.css */ @media (max-width: 860px) { .wastewater-route .rf-bg { object-fit: contain; } } @media (max-width: 860px) { .wastewater-route .rf-inner { display: block; } } @media (max-width: 860px) { .wastewater-route .rf-copy, .wastewater-route .rf-section-head { max-width: 64%; } } @media (max-width: 860px) { .wastewater-route .rf-inner--right .rf-copy { max-width: 62%; margin-left: auto; } } @media (max-width: 860px) { .wastewater-route .rf-copy h1 { font-size: clamp(28px, 7.4vw, 36px); } } @media (max-width: 860px) { .wastewater-route .rf-copy h2, .wastewater-route .rf-section-head h2 { font-size: clamp(25px, 6.5vw, 33px); } } @media (max-width: 860px) { .wastewater-route .rf-copy p, .wastewater-route .rf-section-head p, .wastewater-route .rf-card-note { font-size: 14px; line-height: 1.3; } } @media (max-width: 860px) { .wastewater-route .rf-card-grid--six, .wastewater-route .rf-card-grid--four { grid-template-columns: 1fr; } } @media (max-width: 860px) { .wastewater-route .ww-final-cta { min-height: 100vh; } } @media (max-width: 860px) { .wastewater-route .ww-final-inner { display: grid; padding-top: 24px; padding-bottom: 24px; } } @media (max-width: 860px) { .wastewater-route .ww-final-copy { max-width: 64%; } } @media (max-width: 860px) { .wastewater-route .ww-start-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; } } @media (max-width: 860px) { .wastewater-route .ww-contact-form { grid-template-columns: 1fr; } } @media (max-width: 520px) { .wastewater-route .rf-copy, .wastewater-route .rf-section-head { max-width: 64%; } } @media (max-width: 520px) { .wastewater-route .rf-inner--right .rf-copy { max-width: 64%; } } @media (max-width: 520px) { .wastewater-route .ww-hero .rf-copy, .wastewater-route .ww-service-dashboard .rf-copy { max-width: 58%; } } @media (max-width: 520px) { .wastewater-route .ww-final-copy { max-width: 74%; } } @media (max-width: 520px) { .wastewater-route .ww-final-top p:not(.eyebrow), .wastewater-route .ww-final-bottom p { font-size: 13px; line-height: 1.22; } } @media (max-width: 520px) { .wastewater-route .ww-start-list span { min-height: 42px; padding: 6px 8px; font-size: 11.5px; } } @media (max-width: 520px) { .wastewater-route .ww-hero .rf-copy h1 { font-size: clamp(24px, 6.4vw, 30px); line-height: 1.02; } } @media (max-width: 520px) { .wastewater-route .ww-hero .rf-copy p { margin-top: 7px; color: #021008; font-size: 12.5px; font-weight: 600; line-height: 1.2; } } @media (max-width: 520px) { .wastewater-route .ww-hero .rf-accent, .wastewater-route .ww-hero .ww-offer { color: #021008 !important; font-weight: 800; } } @media (max-width: 520px) { .wastewater-route .hero-actions { gap: 8px; } } @media (max-width: 520px) { .wastewater-route .hero-actions .btn { min-height: 38px; padding: 10px 13px; font-size: 13px; } }
/* css/modules/components/leak-control-components.css */ .leak-slide { position: relative; display: grid; align-items: start; width: 100%; min-height: auto; padding: 0; color: #edf7ff; background: #07101b; isolation: isolate; } .leak-slide-bg { position: absolute; inset: 0; z-index: -1; display: flex; align-items: stretch; justify-content: center; pointer-events: none; } .leak-slide-bg img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center center; opacity: 1; filter: none; } .leak-slide[data-background-mode="full-width"] { aspect-ratio: var(--leak-bg-aspect); } .leak-slide[data-background-mode="full-width"] > .container { min-height: 100%; } .leak-slide-bg--abstract { background: radial-gradient(circle at 16% 14%, rgba(31, 123, 255, 0.14), transparent 28%), radial-gradient(circle at 88% 20%, rgba(139, 214, 255, 0.11), transparent 32%), linear-gradient(135deg, #07101b 0%, #0c1b2b 100%); } .leak-slide--a .leak-slide-bg img { object-position: left center; } .leak-slide--b .leak-slide-bg img { object-position: center center; } .leak-slide--d .leak-slide-bg img { object-position: center center; } .leak-hero, .leak-problem, .leak-pilot, .leak-benefits, .leak-requirements, .leak-zones, .leak-flow, .leak-scope { overflow: visible; } .leak-hero { --leak-bg-aspect: 1774 / 887; } .leak-zones, .leak-flow, .leak-pilot, .leak-scope { --leak-bg-aspect: 1672 / 941; } .leak-hero::after { display: none; } .leak-hero-inner, .leak-zones-inner, .leak-pilot-inner, .leak-flow-inner, .leak-card-section { position: relative; z-index: 1; padding-top: clamp(42px, 5.8vh, 68px); padding-bottom: clamp(42px, 5.8vh, 68px); } .leak-hero-inner { min-height: auto; grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.78fr); } .leak-zones-inner { display: block; } .leak-zones-inner, .leak-pilot-inner { display: grid; align-items: center; } .leak-zones-visual { margin: 0; display: none; } .leak-zones-visual img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; } .leak-hero-copy, .leak-safe-left { max-width: min(650px, 48vw); } .leak-safe-right { width: min(560px, 42vw); margin-left: auto; } .leak-zones .leak-copy h2, .leak-pilot .leak-copy h2 { font-size: clamp(40px, 4.1vw, 64px); } .leak-zones .leak-copy p, .leak-zones .leak-copy li, .leak-pilot .leak-copy p, .leak-pilot .leak-copy li { font-size: clamp(17px, 1.25vw, 21px); line-height: 1.48; } .leak-copy .eyebrow, .leak-section-head .eyebrow { color: #8bd6ff; } .leak-copy h1, .leak-copy h2, .leak-section-head h2 { color: #fff; } .leak-copy h1 { max-width: 720px; font-size: clamp(42px, 4.2vw, 64px); line-height: 1.02; } .leak-copy h2, .leak-section-head h2 { max-width: 860px; font-size: clamp(34px, 3.5vw, 54px); line-height: 1.03; } .leak-copy p, .leak-copy li, .leak-section-head p { color: rgba(234, 246, 255, 0.82); } .leak-lead { font-size: clamp(18px, 1.55vw, 23px); } .leak-card-section { width: min(1180px, calc(100vw - 40px)); } .leak-problem, .leak-benefits, .leak-requirements { background: #07101b; } .leak-section-head { max-width: 860px; margin: 0 0 clamp(22px, 4vh, 34px); } .leak-card-grid { display: grid; gap: clamp(14px, 1.5vw, 18px); } .leak-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .leak-card { min-width: 0; display: flex; flex-direction: column; padding: 0; overflow: visible; border: 1px solid rgba(139, 214, 255, 0.2); border-radius: 8px; background: rgba(8, 22, 36, 0.78); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18); } .leak-card-media { min-width: 0; aspect-ratio: 1.12 / 1; background: rgba(5, 13, 24, 0.82); } .leak-card-media img { display: block; width: 100%; height: 100%; object-fit: contain; } .leak-card-body { min-width: 0; padding: clamp(15px, 1.5vw, 20px); } .leak-card h3 { margin: 0 0 8px; color: #fff; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.12; } .leak-card p { margin: 0; color: rgba(232, 244, 255, 0.78); font-size: 14.5px; line-height: 1.36; } .leak-list, .leak-steps { color: rgba(234, 246, 255, 0.82); } .leak-flow-inner { display: grid; min-height: 100%; grid-template-rows: auto 1fr auto; align-content: stretch; gap: clamp(14px, 2.2vh, 24px); padding-top: clamp(30px, 4vh, 44px); padding-bottom: clamp(30px, 4vh, 44px); } .leak-flow-visual { margin: 0; border: 1px solid rgba(139, 214, 255, 0.16); border-radius: 8px; background: rgba(5, 13, 24, 0.72); } .leak-flow-visual img { display: block; width: 100%; height: auto; max-height: 230px; object-fit: contain; } .leak-flow-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-self: end; } .leak-flow-grid article, .leak-metrics article, .leak-products { border: 1px solid rgba(139, 214, 255, 0.2); border-radius: 8px; background: rgba(8, 22, 36, 0.74); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18); } .leak-flow-grid article { padding: 14px; } .leak-flow-grid article h3, .leak-products h3 { color: #fff; } .leak-flow-grid article p { color: rgba(232, 244, 255, 0.78); font-size: 14px; line-height: 1.36; } .leak-scope { background: #07101b; } .leak-scope-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; min-height: 100%; gap: clamp(12px, 1.6vw, 20px); padding-top: clamp(24px, 3.2vh, 36px); padding-bottom: clamp(24px, 3.2vh, 36px); } .leak-scope-copy { grid-column: 1; grid-row: auto; max-width: 1180px; align-self: start; } .leak-scope h2 { max-width: none; white-space: nowrap; } .leak-scope-visual { display: none; grid-column: 1; height: clamp(170px, 16vw, 200px); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .leak-scope-visual img { display: block; width: 100%; height: 100%; margin: 0 auto; border-radius: 0; object-fit: contain; }
/* css/modules/features/leak-control-layout-foundation.css */ .leak-metrics { grid-column: 1; align-self: end; grid-template-columns: repeat(4, minmax(0, 1fr)); } .leak-metrics article { padding: clamp(16px, 2vw, 22px); } .leak-scope .leak-metrics article { padding: clamp(14px, 1.4vw, 18px); } .leak-metrics strong { color: #fff; font-size: clamp(27px, 3vw, 42px); } .leak-scope .leak-metrics strong { font-size: clamp(25px, 2.5vw, 36px); } .leak-metrics span { color: rgba(231, 243, 255, 0.8); } .leak-note { border-radius: 8px; } .leak-products { margin-top: clamp(14px, 2.2vh, 22px); padding: clamp(14px, 1.6vw, 20px); }
/* css/modules/features/products-layout-interaction.css */ .leak-products .generated-link-cloud a { color: #dff4ff; border-color: rgba(139, 214, 255, 0.22); background: rgba(255, 255, 255, 0.08); }
/* css/modules/responsive/leak-control-responsive-max-width-1180px.css */ @media (max-width: 1180px) { .leak-slide { min-height: auto; } } @media (max-width: 1180px) { .leak-hero-inner, .leak-zones-inner, .leak-scope-grid { grid-template-columns: 1fr; } } @media (max-width: 1180px) { .leak-hero-copy, .leak-safe-left, .leak-safe-right { width: auto; max-width: 680px; margin-left: 0; } } @media (max-width: 1180px) { .leak-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1180px) { .leak-card-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1180px) { .leak-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .leak-slide[data-background-mode="full-width"] { aspect-ratio: auto; } } @media (max-width: 900px) { .leak-scope h2 { white-space: normal; } } @media (max-width: 760px) { .leak-hero-inner, .leak-zones-inner, .leak-pilot-inner, .leak-flow-inner, .leak-card-section { padding-top: 44px; padding-bottom: 44px; } } @media (max-width: 760px) { .leak-card-section { width: calc(100vw - 28px); } } @media (max-width: 760px) { .leak-scope-visual img { max-height: none; margin-left: 0; } } @media (max-width: 760px) { .leak-slide-bg { position: absolute; inset: 0; order: initial; margin-bottom: 0; } } @media (max-width: 760px) { .leak-slide-bg img { width: 100%; height: 100%; object-position: right bottom; } } @media (max-width: 760px) { .leak-hero-copy, .leak-safe-left, .leak-safe-right, .leak-copy h1, .leak-copy h2, .leak-section-head h2, .leak-copy p, .leak-section-head p { max-width: min(100%, 350px); } } @media (max-width: 760px) { .leak-copy h1 { font-size: clamp(34px, 10vw, 43px); } } @media (max-width: 760px) { .leak-copy h2, .leak-section-head h2 { font-size: clamp(29px, 8.5vw, 38px); } } @media (max-width: 760px) { .leak-card-grid--four, .leak-flow-grid, .leak-metrics { grid-template-columns: 1fr; } } @media (max-width: 760px) { .leak-flow-inner { gap: 12px; padding-top: 18px; padding-bottom: 18px; } } @media (max-width: 760px) { .leak-flow-visual img { max-height: 120px; } } @media (max-width: 760px) { .leak-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } } @media (max-width: 760px) { .leak-flow-grid article { padding: 10px; } } @media (max-width: 760px) { .leak-flow-grid article span { font-size: 13px; } } @media (max-width: 760px) { .leak-flow-grid article h3 { font-size: 16px; line-height: 1.15; } } @media (max-width: 760px) { .leak-flow-grid article p { font-size: 14px; line-height: 1.35; } } @media (max-width: 760px) { .leak-card { display: flex; } } @media (max-width: 760px) { .leak-card-media { min-height: 0; } } @media (max-width: 760px) { .leak-card-body { padding: 14px; } } @media (max-width: 760px) { .leak-card-media img { width: 100%; } } @media (max-width: 760px) { .leak-card h3 { align-self: end; } } @media (max-width: 760px) { .leak-card p { align-self: start; } }
/* css/modules/responsive/electronics-responsive-max-width-1180px-foundation.css */ /* Electronics development landing Source of truth: specs/product-plans/electronics-development-section-contracts-2026-06-01.json */ body.electronics-development-route .electronics-development-page { background: #f5f8fb; color: var(--ink); } body.electronics-development-route .electronics-development-page :where(h1, h2, h3, p, li, a, span, strong) { overflow-wrap: normal; word-break: normal; hyphens: manual; } body.electronics-development-route .electronics-slide { position: relative; display: grid; place-items: center; padding: 0 var(--container-padding, 24px); background: #f5f8fb; isolation: isolate; } body.electronics-development-route .electronics-frame { position: relative; width: min(100%, 1392px); aspect-ratio: 1672 / 941; min-height: 0; overflow: hidden; isolation: isolate; } body.electronics-development-route .electronics-bg { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 1; filter: none; transform: none; pointer-events: none; } body.electronics-development-route .electronics-bg--abstract { object-fit: fill; } body.electronics-development-route .electronics-hero-copy, body.electronics-development-route .electronics-process-copy, body.electronics-development-route .electronics-final-copy, body.electronics-development-route .electronics-card-layout { position: absolute; z-index: 1; } body.electronics-development-route .electronics-hero-copy { left: 5.5%; top: 8%; width: 52%; display: grid; gap: clamp(10px, 1.15vw, 16px); } body.electronics-development-route .eyebrow { color: #187d83; } body.electronics-development-route .electronics-hero-copy h1 { max-width: 760px; color: #0d2630; font-size: clamp(42px, 4vw, 70px); line-height: 0.98; letter-spacing: 0; } body.electronics-development-route .electronics-hero-copy p, body.electronics-development-route .electronics-section-head p, body.electronics-development-route .electronics-process-copy p, body.electronics-development-route .electronics-final-copy p { max-width: 790px; color: #3f5965; } body.electronics-development-route .electronics-lead { color: #193842; font-size: clamp(18px, 1.35vw, 24px); line-height: 1.38; } body.electronics-development-route .electronics-hero-copy .btn, body.electronics-development-route .electronics-final-copy .btn { justify-self: start; } body.electronics-development-route .electronics-thesis { position: absolute; left: 5.5%; right: 5.5%; bottom: 5.4%; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.15vw, 16px); } body.electronics-development-route .electronics-thesis article, body.electronics-development-route .electronics-card { border: 1px solid rgba(24, 125, 131, 0.16); border-radius: 8px; background: rgba(255, 255, 255, 0.86); box-shadow: 0 18px 44px rgba(21, 58, 76, 0.12); backdrop-filter: blur(10px); } body.electronics-development-route .electronics-thesis article { padding: clamp(12px, 1.35vw, 20px); } body.electronics-development-route .electronics-thesis p { margin: 0; color: #203b46; font-size: clamp(14px, 1vw, 17px); font-weight: 720; line-height: 1.34; } body.electronics-development-route .electronics-slide--cards .electronics-frame { min-height: min(941px, calc(100svh - 76px)); height: auto; aspect-ratio: auto; } body.electronics-development-route .electronics-card-layout { inset: 6% 5.5%; display: grid; grid-template-rows: auto 1fr; gap: clamp(16px, 1.7vw, 24px); } body.electronics-development-route .electronics-section-head { display: grid; gap: 10px; max-width: 1060px; } body.electronics-development-route .electronics-section-head h2, body.electronics-development-route .electronics-process-copy h2, body.electronics-development-route .electronics-final-copy h2 { color: #0d2630; font-size: clamp(30px, 2.8vw, 52px); line-height: 1.04; letter-spacing: 0; } body.electronics-development-route .electronics-card-grid { display: grid; gap: clamp(14px, 1.35vw, 22px); align-items: stretch; } body.electronics-development-route .electronics-card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.electronics-development-route .electronics-card-grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.electronics-development-route .electronics-card { min-width: 0; overflow: hidden; display: grid; grid-template-rows: auto 1fr; } body.electronics-development-route .electronics-card-media { aspect-ratio: 1672 / 941; background: #eef5f7; } body.electronics-development-route .electronics-card-media img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; filter: none; opacity: 1; } body.electronics-development-route .electronics-card-body { display: grid; gap: 10px; padding: clamp(14px, 1.35vw, 20px); } body.electronics-development-route .electronics-card h3 { margin: 0; color: #112c36; font-size: clamp(20px, 1.45vw, 28px); line-height: 1.08; letter-spacing: 0; } body.electronics-development-route .electronics-card p { margin: 0; color: #48616b; font-size: clamp(14px, 0.95vw, 16px); line-height: 1.44; } body.electronics-development-route .electronics-process-copy { left: 5.5%; top: 6.6%; width: 82%; display: grid; gap: 12px; } body.electronics-development-route .electronics-process-copy p { max-width: 900px; font-size: clamp(17px, 1.2vw, 21px); line-height: 1.42; } body.electronics-development-route .electronics-final-copy { left: 5.5%; top: 12%; width: min(760px, 52%); display: grid; gap: clamp(12px, 1.25vw, 18px); } body.electronics-development-route .electronics-helper { color: #187d83; font-weight: 700; } @media (max-width: 1180px) { body.electronics-development-route .electronics-card-grid--three, body.electronics-development-route .electronics-card-grid--six { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1180px) { body.electronics-development-route .electronics-hero-copy { width: 58%; } } @media (max-width: 1180px) { body.electronics-development-route .electronics-hero-copy h1 { font-size: clamp(36px, 4.5vw, 56px); } } @media (max-width: 780px) { body.electronics-development-route .electronics-slide { padding: 0 12px; } } @media (max-width: 780px) { body.electronics-development-route .electronics-frame { width: min(100%, 560px); } } @media (max-width: 780px) { body.electronics-development-route .electronics-hero .electronics-frame, body.electronics-development-route .electronics-process .electronics-frame, body.electronics-development-route .electronics-final .electronics-frame { min-height: calc(100svh - 69px); aspect-ratio: auto; } } @media (max-width: 780px) { body.electronics-development-route .electronics-hero-copy { left: 5%; top: 4.2%; width: 90%; gap: 7px; } } @media (max-width: 780px) { body.electronics-development-route .electronics-hero-copy h1 { max-width: 330px; font-size: clamp(30px, 9.2vw, 38px); line-height: 1; } } @media (max-width: 780px) { body.electronics-development-route .electronics-hero-copy p { max-width: 340px; font-size: 13.5px; line-height: 1.28; } } @media (max-width: 780px) { body.electronics-development-route .electronics-lead { font-size: 15px; line-height: 1.3; } } @media (max-width: 780px) { body.electronics-development-route .electronics-hero-copy .btn { padding: 10px 14px; font-size: 13px; } } @media (max-width: 780px) { body.electronics-development-route .electronics-thesis { left: 5%; right: 5%; bottom: 3.5%; grid-template-columns: 1fr; gap: 7px; } } @media (max-width: 780px) { body.electronics-development-route .electronics-thesis article { padding: 9px 11px; } } @media (max-width: 780px) { body.electronics-development-route .electronics-thesis p { font-size: 12.5px; line-height: 1.2; } }
/* css/modules/responsive/electronics-responsive-max-width-780px.css */ @media (max-width: 780px) { body.electronics-development-route .electronics-slide--cards .electronics-frame { width: min(100%, 560px); min-height: 0; } } @media (max-width: 780px) { body.electronics-development-route .electronics-card-layout { position: relative; inset: auto; padding: 22px 12px; gap: 14px; } } @media (max-width: 780px) { body.electronics-development-route .electronics-slide--cards .electronics-bg { object-fit: fill; } } @media (max-width: 780px) { body.electronics-development-route .electronics-section-head { gap: 7px; } } @media (max-width: 780px) { body.electronics-development-route .electronics-section-head h2, body.electronics-development-route .electronics-process-copy h2, body.electronics-development-route .electronics-final-copy h2 { font-size: clamp(26px, 7.4vw, 34px); } } @media (max-width: 780px) { body.electronics-development-route .electronics-section-head p, body.electronics-development-route .electronics-process-copy p, body.electronics-development-route .electronics-final-copy p { font-size: 14.5px; line-height: 1.36; } } @media (max-width: 780px) { body.electronics-development-route .electronics-card-grid--three, body.electronics-development-route .electronics-card-grid--six { grid-template-columns: 1fr; } } @media (max-width: 780px) { body.electronics-development-route .electronics-card-body { padding: 13px; } } @media (max-width: 780px) { body.electronics-development-route .electronics-card h3 { font-size: 21px; } } @media (max-width: 780px) { body.electronics-development-route .electronics-card p { font-size: 14px; line-height: 1.38; } } @media (max-width: 780px) { body.electronics-development-route .electronics-process-copy { left: 5%; top: 4.5%; width: 90%; } } @media (max-width: 780px) { body.electronics-development-route .electronics-final-copy { left: 5%; top: 10%; width: 90%; } } @media (max-width: 780px) { body.electronics-development-route .electronics-final-copy .btn { justify-self: stretch; justify-content: center; } } @media (max-width: 420px) { body.electronics-development-route .electronics-hero-copy h1 { font-size: 29px; } } @media (max-width: 420px) { body.electronics-development-route .electronics-hero-copy p { font-size: 12.5px; } } @media (max-width: 420px) { body.electronics-development-route .electronics-lead { font-size: 13.5px; } } @media (max-width: 420px) { body.electronics-development-route .electronics-thesis p { font-size: 11.5px; } } body.electronics-development-route .electronics-slide { width: min(100%, 1392px, calc(100svh * 1672 / 941)); margin-inline: auto; padding-inline: 0; display: block; min-height: 0; overflow: visible; } body.electronics-development-route .electronics-slide:not(.electronics-slide--cards) { width: min(100%, 1392px, calc(100svh * 1672 / 941)); } body.electronics-development-route .electronics-frame { width: 100%; min-height: 0; overflow: hidden; } body.electronics-development-route .electronics-slide--cards .electronics-frame { min-height: 0; aspect-ratio: auto; } body.electronics-development-route .electronics-slide--cards .electronics-card-layout { position: relative; inset: auto; padding: clamp(36px, 4.8vw, 68px) clamp(32px, 4.4vw, 62px); } body.electronics-development-route .electronics-slide--cards .electronics-bg { object-fit: fill; } @media (max-width: 780px) { body.electronics-development-route .electronics-slide { width: min(100%, 560px); } } @media (max-width: 780px) { body.electronics-development-route .electronics-slide:not(.electronics-slide--cards) { width: min(100%, 560px); } } @media (max-width: 780px) { body.electronics-development-route .electronics-slide--cards .electronics-card-layout { padding: 18px clamp(16px, 5vw, 24px); gap: 10px; } } @media (max-width: 780px) { body.electronics-development-route .electronics-slide--cards .electronics-section-head { gap: 5px; } } @media (max-width: 780px) { body.electronics-development-route .electronics-slide--cards .electronics-section-head h2 { font-size: clamp(23px, 6.4vw, 30px); line-height: 1.02; } } @media (max-width: 780px) { body.electronics-development-route .electronics-slide--cards .electronics-section-head p { font-size: 13.5px; line-height: 1.3; } } @media (max-width: 420px) { body.electronics-development-route .electronics-slide, body.electronics-development-route .electronics-slide:not(.electronics-slide--cards) { width: 100%; } } /* Electronics full-width background override approved during Phase 3. Backgrounds fill the whole section width; content stays in a fixed inner column. */ body.electronics-development-route .electronics-slide, body.electronics-development-route .electronics-slide:not(.electronics-slide--cards) { --electronics-fixed-column: min(calc(100% - 40px), 1392px); width: 100% !important; max-width: none !important; min-height: min(56.25vw, calc(100svh - 1px)) !important; display: grid !important; place-items: center !important; margin-inline: 0 !important; padding-inline: 0 !important; overflow: clip !important; } body.electronics-development-route .electronics-frame { width: 100% !important; max-width: none !important; min-height: inherit !important; aspect-ratio: auto !important; overflow: visible !important; } body.electronics-development-route .electronics-bg { width: 100% !important; height: 100% !important; object-fit: fill !important; } body.electronics-development-route .electronics-hero-copy { left: calc((100% - var(--electronics-fixed-column)) / 2 + var(--electronics-fixed-column) * 0.055) !important; width: min(calc(var(--electronics-fixed-column) * 0.52), 760px) !important; } body.electronics-development-route .electronics-process-copy { left: calc((100% - var(--electronics-fixed-column)) / 2 + var(--electronics-fixed-column) * 0.055) !important; width: min(calc(var(--electronics-fixed-column) * 0.82), 1140px) !important; } body.electronics-development-route .electronics-final-copy { left: calc((100% - var(--electronics-fixed-column)) / 2 + var(--electronics-fixed-column) * 0.055) !important; width: min(calc(var(--electronics-fixed-column) * 0.52), 760px) !important; } body.electronics-development-route .electronics-thesis-grid { position: absolute !important; right: calc((100% - var(--electronics-fixed-column)) / 2 + var(--electronics-fixed-column) * 0.053) !important; bottom: 5.4% !important; left: calc((100% - var(--electronics-fixed-column)) / 2 + var(--electronics-fixed-column) * 0.053) !important; z-index: 1 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(10px, 1vw, 16px) !important; } body.electronics-development-route .electronics-thesis { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; display: block !important; min-width: 0 !important; padding: clamp(13px, 1.25vw, 18px) !important; border: 1px solid rgba(31, 123, 255, 0.14) !important; border-radius: 8px !important; background: rgba(255, 255, 255, 0.9) !important; box-shadow: 0 14px 38px rgba(15, 55, 115, 0.08) !important; backdrop-filter: none !important; } body.electronics-development-route .electronics-thesis h3 { margin: 0 0 6px !important; color: #071b3a !important; font-size: clamp(15px, 1.08vw, 19px) !important; line-height: 1.14 !important; } body.electronics-development-route .electronics-thesis p { margin: 0 !important; color: #29405f !important; font-size: clamp(12px, 0.82vw, 14px) !important; font-weight: 400 !important; line-height: 1.35 !important; } body.electronics-development-route .electronics-slide--cards { min-height: auto !important; overflow: visible !important; } body.electronics-development-route .electronics-slide--cards .electronics-frame { min-height: 0 !important; } body.electronics-development-route .electronics-slide--cards .electronics-card-layout { width: var(--electronics-fixed-column) !important; margin-inline: auto !important; } @media (max-width: 820px) { body.electronics-development-route .electronics-slide, body.electronics-development-route .electronics-slide:not(.electronics-slide--cards) { --electronics-fixed-column: min(calc(100% - 28px), 560px); display: block !important; min-height: 0 !important; padding-inline: 0 !important; overflow: visible !important; } } @media (max-width: 820px) { body.electronics-development-route .electronics-frame { display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 34px 14px !important; } } @media (max-width: 820px) { body.electronics-development-route .electronics-bg { position: absolute !important; inset: 0 !important; height: 100% !important; aspect-ratio: auto !important; object-fit: fill !important; } } @media (max-width: 820px) { body.electronics-development-route .electronics-hero-copy, body.electronics-development-route .electronics-process-copy, body.electronics-development-route .electronics-final-copy, body.electronics-development-route .electronics-card-layout { position: relative !important; inset: auto !important; z-index: 1 !important; width: 100% !important; max-width: none !important; } }
/* css/modules/responsive/electronics-responsive-max-width-820px-foundation.css */ @media (max-width: 820px) { body.electronics-development-route .electronics-hero-copy, body.electronics-development-route .electronics-process-copy, body.electronics-development-route .electronics-final-copy { order: 1 !important; display: grid !important; gap: 10px !important; } } @media (max-width: 820px) { body.electronics-development-route .electronics-thesis-grid { position: relative !important; inset: auto !important; order: 3 !important; grid-template-columns: 1fr !important; } } @media (max-width: 820px) { body.electronics-development-route .electronics-slide--cards .electronics-card-layout { width: 100% !important; } } @media (max-width: 820px) { body.electronics-development-route .electronics-process { min-height: calc(100svh - 1px) !important; } }
/* css/modules/responsive/software-development-responsive-max-width-1180px.css */ body.software-development-route { background: #f6f8fb; color: #132235; } body.software-development-route .generated-page { background: #f6f8fb; } body.software-development-route .software-development-page { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 34px); padding: clamp(16px, 2.4vw, 32px) 0 clamp(26px, 3vw, 48px); } body.software-development-route .btn.btn-primary { background: #0b5fb3; border-color: #0b5fb3; color: #ffffff; } body.software-development-route .btn.btn-primary:hover { background: #084f96; border-color: #084f96; } body.software-development-route .software-slide { width: min(100%, 1392px, calc(100svh * 1672 / 941)); margin-inline: auto; padding-inline: 0; } body.software-development-route .software-frame { position: relative; width: 100%; min-height: 0; aspect-ratio: 1672 / 941; overflow: hidden; border-radius: 24px; background: #ffffff; box-shadow: 0 24px 70px rgba(29, 61, 89, 0.13); isolation: isolate; } body.software-development-route .software-bg { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: fill; } body.software-development-route .software-copy, body.software-development-route .software-card-layout, body.software-development-route .software-process-list, body.software-development-route .software-final-actions { position: relative; z-index: 1; } body.software-development-route .software-copy { display: grid; gap: clamp(10px, 1vw, 16px); width: min(44%, 610px); color: #172437; } body.software-development-route .software-copy h1, body.software-development-route .software-copy h2, body.software-development-route .software-section-head h2 { margin: 0; color: #0f1d2d; letter-spacing: 0; line-height: 1.02; } body.software-development-route .software-copy h1 { font-size: clamp(43px, 4.7vw, 74px); } body.software-development-route .software-copy h2, body.software-development-route .software-section-head h2 { font-size: clamp(36px, 3.6vw, 58px); } body.software-development-route .software-copy p, body.software-development-route .software-section-head p, body.software-development-route .software-card p, body.software-development-route .software-process-list p, body.software-development-route .software-final-actions p { margin: 0; color: #37516b; letter-spacing: 0; line-height: 1.45; word-break: normal; overflow-wrap: normal; hyphens: manual; } body.software-development-route .software-copy p { font-size: clamp(15px, 1.18vw, 19px); } body.software-development-route .software-lead { color: #1f3954; font-size: clamp(17px, 1.35vw, 22px); font-weight: 650; } body.software-development-route .software-copy .btn { width: max-content; margin-top: 4px; } body.software-development-route .software-hero-copy { position: absolute; left: 5.4%; top: 10%; width: min(41.8%, 580px); } body.software-development-route .software-process-copy { position: absolute; left: 5.4%; top: 7.2%; right: 5.4%; width: auto; } body.software-development-route .software-proof-copy { position: absolute; left: 5.4%; top: 7%; width: min(42%, 590px); } body.software-development-route .software-final-copy { position: absolute; left: 5.4%; top: 7.2%; right: 5.4%; width: auto; } body.software-development-route .software-final-actions { position: absolute; left: 5.4%; bottom: 7%; z-index: 1; display: grid; gap: 14px; width: min(48%, 680px); } body.software-development-route .software-final-actions .btn { width: max-content; } body.software-development-route .software-process-copy h2, body.software-development-route .software-final-copy h2 { max-width: 100%; } body.software-development-route .software-process-text { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); width: 100%; } body.software-development-route .software-process-text p, body.software-development-route .software-final-actions p { font-size: clamp(15px, 1.12vw, 18px); } body.software-development-route .software-slide--cards { width: min(100%, 1392px); } body.software-development-route .software-slide--cards .software-frame { aspect-ratio: auto; } body.software-development-route .software-card-layout { display: grid; gap: clamp(22px, 2.7vw, 38px); padding: clamp(36px, 4.8vw, 68px) clamp(32px, 4.4vw, 62px); } body.software-development-route .software-section-head { display: grid; gap: 10px; width: min(760px, 100%); } body.software-development-route .software-section-head p { max-width: 720px; font-size: clamp(15px, 1.12vw, 18px); } body.software-development-route .software-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.7vw, 24px); } body.software-development-route .software-card { display: grid; overflow: hidden; border: 1px solid rgba(69, 109, 139, 0.16); border-radius: 8px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 12px 34px rgba(32, 72, 99, 0.09); } body.software-development-route .software-card-media { display: block; aspect-ratio: 1672 / 941; overflow: hidden; background: #eef5f8; } body.software-development-route .software-card-media img { display: block; width: 100%; height: auto; } body.software-development-route .software-card-body { display: grid; gap: 8px; padding: clamp(15px, 1.55vw, 22px); } body.software-development-route .software-card h3 { margin: 0; color: #10253a; font-size: clamp(20px, 1.45vw, 25px); line-height: 1.08; letter-spacing: 0; } body.software-development-route .software-card p { font-size: clamp(13.5px, 1vw, 16px); } body.software-development-route .software-process-list { position: absolute; left: 5.4%; right: 5.4%; bottom: 6%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } body.software-development-route .software-process-list li { display: grid; gap: 7px; min-height: 168px; padding: 15px 14px; border: 1px solid rgba(70, 117, 146, 0.17); border-radius: 8px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 10px 30px rgba(31, 75, 98, 0.09); } body.software-development-route .software-process-list span { color: #1f8a93; font-size: 13px; font-weight: 800; } body.software-development-route .software-process-list strong { color: #13283c; font-size: 16px; line-height: 1.12; } body.software-development-route .software-process-list p { font-size: 12.5px; line-height: 1.32; } body.software-development-route .software-bullets, body.software-development-route .software-topic-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } body.software-development-route .software-bullets li, body.software-development-route .software-topic-list li { color: #24415b; line-height: 1.28; } body.software-development-route .software-bullets li { padding-left: 18px; position: relative; } body.software-development-route .software-bullets li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: #20a2a4; } body.software-development-route .software-topic-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } body.software-development-route .software-topic-list li { padding: 9px 11px; border: 1px solid rgba(48, 110, 139, 0.14); border-radius: 8px; background: rgba(255, 255, 255, 0.78); font-size: 14px; font-weight: 650; } @media (max-width: 1180px) { body.software-development-route .software-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1180px) { body.software-development-route .software-process-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* css/modules/responsive/software-development-responsive-max-width-1180px-foundation.css */ @media (max-width: 1180px) { body.software-development-route .software-process-list li { min-height: 132px; } } @media (max-width: 1180px) { body.software-development-route .software-hero-copy { width: min(53.2%, 618px); } } @media (max-width: 1180px) { body.software-development-route .software-proof-copy { width: min(51%, 610px); } } @media (max-width: 1180px) { body.software-development-route .software-process-copy, body.software-development-route .software-final-copy { right: 5.4%; width: auto; } } @media (max-width: 1180px) { body.software-development-route .software-final-actions { width: min(54%, 700px); } } @media (max-width: 780px) { body.software-development-route .software-development-page { gap: 14px; padding-top: 12px; } } @media (max-width: 780px) { body.software-development-route .software-slide, body.software-development-route .software-slide:not(.software-slide--cards) { width: min(100%, 560px); } } @media (max-width: 780px) { body.software-development-route .software-frame { border-radius: 18px; } } @media (max-width: 780px) { body.software-development-route .software-hero .software-frame, body.software-development-route .software-process .software-frame, body.software-development-route .software-proof .software-frame, body.software-development-route .software-final .software-frame { min-height: calc(100svh - 70px); aspect-ratio: auto; } } @media (max-width: 780px) { body.software-development-route .software-hero-copy, body.software-development-route .software-process-copy, body.software-development-route .software-proof-copy, body.software-development-route .software-final-copy { left: 5%; top: 4.5%; width: 90%; } } @media (max-width: 780px) { body.software-development-route .software-process-copy, body.software-development-route .software-final-copy { right: auto; } } @media (max-width: 780px) { body.software-development-route .software-process-text { grid-template-columns: 1fr; width: min(100%, 360px); gap: 7px; } } @media (max-width: 780px) { body.software-development-route .software-final-actions { left: 5%; right: 5%; bottom: 4%; width: auto; gap: 8px; } } @media (max-width: 780px) { body.software-development-route .software-copy h1 { max-width: 350px; font-size: clamp(30px, 8.8vw, 38px); } } @media (max-width: 780px) { body.software-development-route .software-copy h2, body.software-development-route .software-section-head h2 { font-size: clamp(26px, 7.3vw, 34px); } } @media (max-width: 780px) { body.software-development-route .software-copy p, body.software-development-route .software-section-head p { max-width: 360px; font-size: 14px; line-height: 1.34; } } @media (max-width: 780px) { body.software-development-route .software-lead { font-size: 15px; } } @media (max-width: 780px) { body.software-development-route .software-copy .btn { justify-self: stretch; justify-content: center; width: auto; padding: 10px 14px; font-size: 13px; } } @media (max-width: 780px) { body.software-development-route .software-final-actions .btn { width: auto; justify-content: center; padding: 10px 14px; font-size: 13px; } } @media (max-width: 780px) { body.software-development-route .software-card-layout { padding: 28px clamp(16px, 5vw, 28px); } } @media (max-width: 780px) { body.software-development-route .software-card-grid { grid-template-columns: 1fr; } } @media (max-width: 780px) { body.software-development-route .software-card-body { padding: 13px; } } @media (max-width: 780px) { body.software-development-route .software-card h3 { font-size: 21px; } } @media (max-width: 780px) { body.software-development-route .software-card p { font-size: 14px; line-height: 1.38; } } @media (max-width: 780px) { body.software-development-route .software-process-list { left: 5%; right: 5%; bottom: 4%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } } @media (max-width: 780px) { body.software-development-route .software-process-list li { min-height: 0; padding: 9px 10px; } } @media (max-width: 780px) { body.software-development-route .software-process-list strong { font-size: 13px; } } @media (max-width: 780px) { body.software-development-route .software-process-list p { font-size: 11px; line-height: 1.2; } } @media (max-width: 780px) { body.software-development-route .software-bullets { gap: 6px; } } @media (max-width: 780px) { body.software-development-route .software-bullets li, body.software-development-route .software-topic-list li { font-size: 12.5px; } } @media (max-width: 420px) { body.software-development-route .software-slide, body.software-development-route .software-slide:not(.software-slide--cards) { width: 100%; } } @media (max-width: 420px) { body.software-development-route .software-copy h1 { font-size: 29px; } } @media (max-width: 420px) { body.software-development-route .software-copy p { font-size: 12.5px; } } @media (max-width: 420px) { body.software-development-route .software-process-list p { display: none; } }
/* css/modules/responsive/mqtt-responsive-max-width-1180px.css */ /* MQTT Broker product workflow. Source of truth: specs/product-plans/mqtt-broker-wireframe-plan-2026-06-02.md */ body.mqtt-broker-route { background: #f7fbff; } body.mqtt-broker-route .btn.btn-primary { background: #0a67b7; border-color: #0a67b7; color: #ffffff; } body.mqtt-broker-route .btn.btn-primary:hover { background: #075596; border-color: #075596; } body.mqtt-broker-route :where(h1,h2,h3,p,li,a,button,span,label,strong) { overflow-wrap: normal; word-break: normal; hyphens: manual; letter-spacing: 0; } body.mqtt-broker-route .mqtt-slide { position: relative; isolation: isolate; overflow: hidden; width: 100%; min-height: max(760px, calc((100vw - 15px) * 941 / 1672)); background: #f7fbff; color: #142437; } body.mqtt-broker-route .mqtt-bg { position: absolute; inset: 0 auto auto 0; z-index: -1; display: block; width: 100%; height: auto; object-fit: contain; object-position: center; pointer-events: none; } body.mqtt-broker-route .mqtt-slide--cards .mqtt-bg { inset: 0; height: 100%; object-fit: cover; } body.mqtt-broker-route .mqtt-inner { position: relative; z-index: 1; min-height: inherit; } body.mqtt-broker-route .mqtt-copy, body.mqtt-broker-route .mqtt-section-head { display: grid; gap: clamp(12px, 1.4vw, 20px); color: #142437; } body.mqtt-broker-route .mqtt-copy h1, body.mqtt-broker-route .mqtt-copy h2, body.mqtt-broker-route .mqtt-section-head h2 { margin: 0; color: #0d1f31; line-height: 1.03; } body.mqtt-broker-route .mqtt-copy h1 { max-width: 780px; font-size: clamp(43px, 5.1vw, 78px); } body.mqtt-broker-route .mqtt-copy h2, body.mqtt-broker-route .mqtt-section-head h2 { max-width: 900px; font-size: clamp(34px, 3.8vw, 58px); } body.mqtt-broker-route .mqtt-copy p, body.mqtt-broker-route .mqtt-section-head p, body.mqtt-broker-route .mqtt-card p, body.mqtt-broker-route .mqtt-process-list p, body.mqtt-broker-route .mqtt-final-points span { margin: 0; color: #3f5871; line-height: 1.45; } body.mqtt-broker-route .mqtt-copy p { max-width: 680px; font-size: clamp(15px, 1.2vw, 19px); } body.mqtt-broker-route .mqtt-lead { color: #203b56; font-size: clamp(17px, 1.4vw, 22px); font-weight: 650; } body.mqtt-broker-route .mqtt-kicker { margin: 0; color: #0d7e8a; font-size: 13px; font-weight: 820; letter-spacing: 0.08em; text-transform: uppercase; } body.mqtt-broker-route .mqtt-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } body.mqtt-broker-route .mqtt-hero-inner, body.mqtt-broker-route .mqtt-security-inner, body.mqtt-broker-route .mqtt-final-inner { display: grid; align-items: center; padding-block: clamp(70px, 7vw, 112px); } body.mqtt-broker-route .mqtt-hero-copy { width: min(58%, 780px); } body.mqtt-broker-route .mqtt-summary { position: absolute; right: 0; bottom: clamp(44px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(560px, 44%); } body.mqtt-broker-route .mqtt-summary p, body.mqtt-broker-route .mqtt-final-points p { margin: 0; border: 1px solid rgba(51, 117, 148, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.82); box-shadow: 0 12px 34px rgba(32, 72, 99, 0.08); } body.mqtt-broker-route .mqtt-summary p { padding: 14px 15px; color: #12304b; font-size: 14px; font-weight: 760; line-height: 1.18; } body.mqtt-broker-route .mqtt-slide--cards { min-height: auto; } body.mqtt-broker-route .mqtt-card-layout { position: relative; z-index: 1; display: grid; gap: clamp(24px, 3vw, 42px); padding-block: clamp(62px, 7vw, 96px); } body.mqtt-broker-route .mqtt-section-head { width: min(860px, 100%); } body.mqtt-broker-route .mqtt-section-head p { max-width: 780px; font-size: clamp(15px, 1.15vw, 18px); } body.mqtt-broker-route .mqtt-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 22px); } body.mqtt-broker-route .mqtt-card { display: grid; overflow: hidden; border: 1px solid rgba(54, 114, 145, 0.16); border-radius: 8px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 14px 34px rgba(33, 79, 106, 0.09); } body.mqtt-broker-route .mqtt-card-media { display: block; aspect-ratio: 1672 / 941; overflow: hidden; background: #eef6fb; } body.mqtt-broker-route .mqtt-card-media img { display: block; width: 100%; height: auto; } body.mqtt-broker-route .mqtt-card-body { display: grid; gap: 8px; padding: clamp(14px, 1.45vw, 20px); } body.mqtt-broker-route .mqtt-card h3 { margin: 0; color: #10263c; font-size: clamp(19px, 1.35vw, 24px); line-height: 1.1; } body.mqtt-broker-route .mqtt-card p { font-size: clamp(13.5px, 0.98vw, 16px); } body.mqtt-broker-route .mqtt-process-inner { display: grid; align-content: space-between; padding-block: clamp(56px, 6.4vw, 88px); } body.mqtt-broker-route .mqtt-process-copy { width: min(820px, 70%); } body.mqtt-broker-route .mqtt-process-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: clamp(48px, 6vw, 76px) 0 0; padding: 0; list-style: none; } body.mqtt-broker-route .mqtt-process-list li { display: grid; gap: 7px; min-height: 150px; padding: 15px 14px; border: 1px solid rgba(60, 118, 148, 0.17); border-radius: 8px; background: rgba(255, 255, 255, 0.86); box-shadow: 0 10px 28px rgba(31, 75, 98, 0.08); } body.mqtt-broker-route .mqtt-process-list span { color: #0b8990; font-size: 13px; font-weight: 830; } body.mqtt-broker-route .mqtt-process-list strong { color: #112a42; font-size: 16px; line-height: 1.12; } body.mqtt-broker-route .mqtt-process-list p { font-size: 12.7px; line-height: 1.32; } body.mqtt-broker-route .mqtt-security-copy { width: min(52%, 720px); margin-left: auto; } body.mqtt-broker-route .mqtt-bullets { display: grid; gap: 9px; margin: 2px 0 0; padding: 0; list-style: none; } body.mqtt-broker-route .mqtt-bullets li { position: relative; padding-left: 19px; color: #24415b; font-size: clamp(14px, 1.06vw, 17px); line-height: 1.32; } body.mqtt-broker-route .mqtt-bullets li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: #18a5a8; } body.mqtt-broker-route .mqtt-webhook-list li { min-height: 128px; } body.mqtt-broker-route .mqtt-final-copy { width: min(58%, 800px); } body.mqtt-broker-route .mqtt-final-points { position: absolute; right: 0; bottom: clamp(48px, 5.3vw, 80px); display: grid; gap: 10px; width: min(440px, 36%); } body.mqtt-broker-route .mqtt-final-points p { display: grid; gap: 5px; padding: 15px 16px; } body.mqtt-broker-route .mqtt-final-points strong { color: #10263c; font-size: 15px; } body.mqtt-broker-route .mqtt-final-points span { font-size: 13.5px; line-height: 1.32; } @media (max-width: 1180px) { body.mqtt-broker-route .mqtt-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1180px) { body.mqtt-broker-route .mqtt-process-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* css/modules/responsive/mqtt-responsive-max-width-1180px-foundation.css */ @media (max-width: 1180px) { body.mqtt-broker-route .mqtt-process-list li { min-height: 128px; } } @media (max-width: 1180px) { body.mqtt-broker-route .mqtt-hero-copy, body.mqtt-broker-route .mqtt-security-copy, body.mqtt-broker-route .mqtt-final-copy { width: min(66%, 760px); } } @media (max-width: 1180px) { body.mqtt-broker-route .mqtt-summary, body.mqtt-broker-route .mqtt-final-points { width: min(420px, 38%); } } @media (max-height: 820px) and (min-width: 781px) { body.mqtt-broker-route .mqtt-hero-inner, body.mqtt-broker-route .mqtt-security-inner, body.mqtt-broker-route .mqtt-final-inner, body.mqtt-broker-route .mqtt-process-inner { padding-block: 48px; } } @media (max-height: 820px) and (min-width: 781px) { body.mqtt-broker-route .mqtt-copy h1 { font-size: clamp(40px, 4.4vw, 64px); } } @media (max-height: 820px) and (min-width: 781px) { body.mqtt-broker-route .mqtt-copy h2, body.mqtt-broker-route .mqtt-section-head h2 { font-size: clamp(32px, 3.2vw, 50px); } } @media (max-height: 820px) and (min-width: 781px) { body.mqtt-broker-route .mqtt-process-list { margin-top: 30px; } } @media (max-height: 820px) and (min-width: 781px) { body.mqtt-broker-route .mqtt-process-list li, body.mqtt-broker-route .mqtt-webhook-list li { min-height: 118px; padding: 12px; } } @media (max-height: 820px) and (min-width: 781px) { body.mqtt-broker-route .mqtt-process-list p { font-size: 12px; line-height: 1.24; } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-slide { min-height: calc(100svh - 70px); } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-bg { inset: 0; height: 100%; object-fit: cover; } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-slide--cards { min-height: auto; } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-hero-inner, body.mqtt-broker-route .mqtt-security-inner, body.mqtt-broker-route .mqtt-final-inner, body.mqtt-broker-route .mqtt-process-inner { min-height: inherit; padding-block: 30px; } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-card-layout { padding-block: 34px; } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-hero-copy, body.mqtt-broker-route .mqtt-security-copy, body.mqtt-broker-route .mqtt-final-copy, body.mqtt-broker-route .mqtt-process-copy { width: min(100%, 420px); } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-copy h1 { max-width: 380px; font-size: clamp(31px, 8.5vw, 39px); } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-copy h2, body.mqtt-broker-route .mqtt-section-head h2 { font-size: clamp(26px, 7.2vw, 34px); } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-copy p, body.mqtt-broker-route .mqtt-section-head p { max-width: 390px; font-size: 14px; line-height: 1.34; } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-lead { font-size: 15px; } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-actions { display: grid; grid-template-columns: 1fr; width: min(100%, 340px); } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-actions .btn { justify-content: center; padding: 10px 14px; font-size: 13px; } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-summary, body.mqtt-broker-route .mqtt-final-points { position: relative; right: auto; bottom: auto; grid-template-columns: 1fr; width: min(100%, 380px); margin-top: 20px; } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-summary p { padding: 10px 12px; font-size: 13px; } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-card-grid { grid-template-columns: 1fr; } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-card-body { padding: 13px; } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-card h3 { font-size: 21px; } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-card p { font-size: 14px; line-height: 1.38; } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-process-list { grid-template-columns: 1fr; gap: 8px; margin-top: 18px; } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-process-list li, body.mqtt-broker-route .mqtt-webhook-list li { min-height: 0; padding: 10px 11px; } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-process-list strong { font-size: 14px; } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-process-list p { font-size: 12px; line-height: 1.25; } } @media (max-width: 780px) { body.mqtt-broker-route .mqtt-bullets li { font-size: 13px; } } @media (max-width: 420px) { body.mqtt-broker-route .mqtt-copy h1 { font-size: 30px; } } @media (max-width: 420px) { body.mqtt-broker-route .mqtt-copy p, body.mqtt-broker-route .mqtt-section-head p { font-size: 12.8px; } } @media (max-width: 420px) { body.mqtt-broker-route .mqtt-kicker { font-size: 11.5px; } }
/* css/modules/features/gomer-layout.css */ /* Go!Mer product workflow. Source of truth: .artifacts/product-plans/gomer/gomer-wireframe-plan-2026-06-02.md */ body.gomer-route { background: #f7fbff; } body.gomer-route .btn.btn-primary { background: #118dcb; border-color: #118dcb; color: #ffffff; } body.gomer-route .btn.btn-primary:hover { background: #0c74aa; border-color: #0c74aa; } body.gomer-route :where(h1,h2,h3,p,li,a,button,span,label,strong,dt,dd) { overflow-wrap: normal; word-break: normal; hyphens: manual; letter-spacing: 0; } body.gomer-route .gomer-slide { position: relative; isolation: isolate; overflow: hidden; width: 100%; min-height: max(760px, calc((100vw - 15px) * 992 / 1586)); background: #f7fbff; color: #162737; }
/* css/modules/responsive/powertracker-responsive-max-width-1180px.css */ /* PowerTracker Phase 3 integration */ body.powertracker-route { background: #f7fbff; } body.powertracker-route .btn.btn-primary { background: #0a67b7; border-color: #0a67b7; color: #ffffff; } body.powertracker-route .btn.btn-primary:hover { background: #075596; border-color: #075596; } body.powertracker-route :where(h1,h2,h3,p,li,a,button,span,strong) { overflow-wrap: normal; word-break: normal; hyphens: manual; letter-spacing: 0; } body.powertracker-route .powertracker-slide { position: relative; isolation: isolate; box-sizing: border-box; overflow: hidden; width: 100%; min-height: clamp(640px, calc(100vh - 77px), 760px); background: #f7fbff; color: #142437; } body.powertracker-route .powertracker-bg { position: absolute; inset: 0 auto auto 0; z-index: -1; display: block; width: 100%; height: 100%; object-fit: fill; object-position: center; pointer-events: none; } body.powertracker-route .powertracker-slide--cards { min-height: auto; } body.powertracker-route .powertracker-slide--cards .powertracker-bg { inset: 0; height: 100%; object-fit: fill; } body.powertracker-route .powertracker-inner { position: relative; z-index: 1; box-sizing: border-box; min-height: inherit; display: grid; align-items: center; padding-block: clamp(64px, 7vw, 108px); } body.powertracker-route .powertracker-copy, body.powertracker-route .powertracker-section-head { display: grid; gap: clamp(12px, 1.35vw, 20px); color: #142437; } body.powertracker-route .powertracker-copy h1, body.powertracker-route .powertracker-copy h2, body.powertracker-route .powertracker-section-head h2 { margin: 0; color: #0d1f31; line-height: 1.04; } body.powertracker-route .powertracker-copy h1 { max-width: 800px; font-size: clamp(42px, 4.7vw, 72px); } body.powertracker-route .powertracker-copy h2, body.powertracker-route .powertracker-section-head h2 { max-width: 900px; font-size: clamp(34px, 3.7vw, 58px); } body.powertracker-route .powertracker-copy p, body.powertracker-route .powertracker-section-head p, body.powertracker-route .powertracker-card p, body.powertracker-route .powertracker-list li, body.powertracker-route .powertracker-section-note { margin: 0; color: #3f5871; line-height: 1.45; } body.powertracker-route .powertracker-copy p { max-width: 680px; font-size: clamp(15px, 1.14vw, 19px); } body.powertracker-route .powertracker-lead { color: #203b56; font-size: clamp(17px, 1.35vw, 22px); font-weight: 680; } body.powertracker-route .powertracker-audience { color: #10263c; font-weight: 720; } body.powertracker-route .powertracker-kicker { margin: 0; color: #0d7e8a; font-size: 13px; font-weight: 820; letter-spacing: 0.08em; text-transform: uppercase; } body.powertracker-route .powertracker-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } body.powertracker-route .powertracker-copy--left { width: min(58%, 790px); } body.powertracker-route .powertracker-copy--right { width: min(57%, 760px); margin-left: auto; } body.powertracker-route .powertracker-card-layout { position: relative; z-index: 1; box-sizing: border-box; display: grid; gap: clamp(24px, 3vw, 42px); padding-block: clamp(62px, 7vw, 96px); padding-inline: clamp(24px, 4vw, 72px); } body.powertracker-route .powertracker-section-head { width: min(900px, 100%); } body.powertracker-route .powertracker-section-head p { max-width: 790px; font-size: clamp(15px, 1.15vw, 18px); } body.powertracker-route .powertracker-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 22px); } body.powertracker-route .powertracker-card { display: grid; overflow: hidden; border: 1px solid rgba(54, 114, 145, 0.16); border-radius: 8px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 14px 34px rgba(33, 79, 106, 0.09); } body.powertracker-route .powertracker-card-media { display: block; aspect-ratio: 1672 / 941; overflow: hidden; background: #eef6fb; } body.powertracker-route .powertracker-card-media img { display: block; width: 100%; height: auto; } body.powertracker-route .powertracker-card-body { display: grid; gap: 8px; padding: clamp(14px, 1.45vw, 20px); } body.powertracker-route .powertracker-card h3 { margin: 0; color: #10263c; font-size: clamp(19px, 1.35vw, 24px); line-height: 1.1; } body.powertracker-route .powertracker-card p { font-size: clamp(13.5px, 0.98vw, 16px); } body.powertracker-route .powertracker-list { display: grid; gap: 9px; margin: 2px 0 0; padding: 0; list-style: none; } body.powertracker-route .powertracker-list li { position: relative; padding-left: 19px; font-size: clamp(14px, 1.04vw, 17px); line-height: 1.35; } body.powertracker-route .powertracker-list li::before { content: ""; position: absolute; left: 0; top: 0.56em; width: 7px; height: 7px; border-radius: 50%; background: #18a5a8; } body.powertracker-route .powertracker-section-note { width: min(720px, 100%); font-size: clamp(14px, 1.05vw, 17px); font-weight: 650; } body.powertracker-route .powertracker-final-copy { width: min(62%, 820px); } @media (max-width: 1180px) { body.powertracker-route .powertracker-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1180px) { body.powertracker-route .powertracker-copy--left, body.powertracker-route .powertracker-copy--right, body.powertracker-route .powertracker-final-copy { width: min(66%, 760px); } } @media (max-height: 820px) and (min-width: 781px) { body.powertracker-route .powertracker-inner { padding-block: 46px; } } @media (max-height: 820px) and (min-width: 781px) { body.powertracker-route .powertracker-copy h1 { font-size: clamp(38px, 4.1vw, 62px); } } @media (max-height: 820px) and (min-width: 781px) { body.powertracker-route .powertracker-copy h2, body.powertracker-route .powertracker-section-head h2 { font-size: clamp(31px, 3.1vw, 48px); } } @media (max-height: 820px) and (min-width: 781px) { body.powertracker-route .powertracker-copy { gap: 11px; } } @media (max-height: 820px) and (min-width: 781px) { body.powertracker-route .powertracker-list { gap: 6px; } } @media (max-width: 780px) { body.powertracker-route .powertracker-slide { min-height: auto; background: #f7fbff; } } @media (max-width: 780px) { body.powertracker-route .powertracker-inner, body.powertracker-route .powertracker-card-layout { min-height: auto; padding-block: 34px; padding-inline: 20px; } } @media (max-width: 780px) { body.powertracker-route .powertracker-copy--left, body.powertracker-route .powertracker-copy--right, body.powertracker-route .powertracker-final-copy { width: min(100%, 430px); margin-left: 0; } } @media (max-width: 780px) { body.powertracker-route .powertracker-copy h1 { max-width: 390px; font-size: clamp(31px, 8.4vw, 39px); } } @media (max-width: 780px) { body.powertracker-route .powertracker-copy h2, body.powertracker-route .powertracker-section-head h2 { font-size: clamp(27px, 7vw, 34px); } } @media (max-width: 780px) { body.powertracker-route .powertracker-actions { align-items: stretch; flex-direction: column; } } @media (max-width: 780px) { body.powertracker-route .powertracker-actions .btn { width: 100%; justify-content: center; } } @media (max-width: 780px) { body.powertracker-route .powertracker-card-grid { grid-template-columns: 1fr; } }
/* css/modules/responsive/powertracker-responsive-max-width-780px.css */ @media (max-width: 780px) { body.powertracker-route .powertracker-card-media img { width: 100%; height: auto; } }
/* css/modules/responsive/gomer-responsive-max-width-1180px.css */ body.gomer-route .gomer-bg { position: absolute; inset: 0 auto auto 0; z-index: -1; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top; pointer-events: none; } body.gomer-route .gomer-slide--cards { min-height: auto; } body.gomer-route .gomer-slide--cards .gomer-bg { inset: 0; height: 100%; object-fit: contain; } body.gomer-route .gomer-inner { position: relative; z-index: 1; min-height: inherit; } body.gomer-route .gomer-copy, body.gomer-route .gomer-section-head { display: grid; gap: clamp(12px, 1.35vw, 20px); color: #162737; } body.gomer-route .gomer-copy h1, body.gomer-route .gomer-copy h2, body.gomer-route .gomer-section-head h2 { margin: 0; color: #10202e; line-height: 1.03; } body.gomer-route .gomer-copy h1 { max-width: 780px; font-size: clamp(42px, 5vw, 76px); } body.gomer-route .gomer-copy h2, body.gomer-route .gomer-section-head h2 { max-width: 900px; font-size: clamp(34px, 3.75vw, 58px); } body.gomer-route .gomer-copy p, body.gomer-route .gomer-section-head p, body.gomer-route .gomer-card p, body.gomer-route .gomer-spec-list dd, body.gomer-route .gomer-spec-list dt, body.gomer-route .gomer-bullets li { margin: 0; color: #42596c; line-height: 1.45; } body.gomer-route .gomer-copy p { max-width: 675px; font-size: clamp(15px, 1.15vw, 19px); } body.gomer-route .gomer-lead, body.gomer-route .gomer-audience, body.gomer-route .gomer-result { color: #203a50; font-weight: 680; } body.gomer-route .gomer-lead { font-size: clamp(17px, 1.35vw, 22px); } body.gomer-route .gomer-kicker { margin: 0; color: #0b8e9d; font-size: 13px; font-weight: 820; text-transform: uppercase; } body.gomer-route .gomer-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } body.gomer-route .gomer-hero-inner, body.gomer-route .gomer-need-inner, body.gomer-route .gomer-install-inner { display: grid; align-items: center; padding-block: clamp(64px, 6.8vw, 108px); } body.gomer-route .gomer-hero-copy, body.gomer-route .gomer-install-copy { width: min(56%, 760px); } body.gomer-route .gomer-need-copy { width: min(52%, 730px); margin-left: auto; } body.gomer-route .gomer-operation-inner { display: grid; align-content: start; padding-block: clamp(54px, 6vw, 86px); } body.gomer-route .gomer-operation-copy { width: min(820px, 70%); } body.gomer-route .gomer-operation-bottom { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; } body.gomer-route .gomer-bullets { display: grid; gap: 9px; margin: 2px 0 0; padding: 0; list-style: none; } body.gomer-route .gomer-bullets li { position: relative; padding-left: 20px; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.33; } body.gomer-route .gomer-bullets li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 7px; height: 7px; border-radius: 50%; background: #19a0a8; } body.gomer-route .gomer-card-layout { position: relative; z-index: 1; display: grid; gap: clamp(24px, 3vw, 42px); padding-block: clamp(58px, 6.7vw, 94px); } body.gomer-route .gomer-section-head { width: min(880px, 100%); } body.gomer-route .gomer-section-head p { max-width: 760px; font-size: clamp(15px, 1.13vw, 18px); } body.gomer-route .gomer-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.45vw, 22px); } body.gomer-route .gomer-card { display: grid; overflow: hidden; border: 1px solid rgba(49, 112, 134, 0.16); border-radius: 8px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 14px 34px rgba(28, 76, 94, 0.09); } body.gomer-route .gomer-card-media { display: block; aspect-ratio: 1672 / 941; overflow: hidden; background: #edf7fa; } body.gomer-route .gomer-card-media img { display: block; width: 100%; height: auto; } body.gomer-route .gomer-card-body { display: grid; gap: 8px; padding: clamp(14px, 1.45vw, 20px); } body.gomer-route .gomer-card h3 { margin: 0; color: #102431; font-size: clamp(19px, 1.3vw, 24px); line-height: 1.1; } body.gomer-route .gomer-card p { font-size: clamp(13.5px, 0.96vw, 16px); } body.gomer-route .gomer-spec-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin: 2px 0 0; } body.gomer-route .gomer-spec-list div { display: grid; gap: 3px; padding: 12px 13px; border: 1px solid rgba(35, 120, 146, 0.15); border-radius: 8px; background: rgba(255, 255, 255, 0.74); } body.gomer-route .gomer-spec-list dt { color: #0f6f88; font-size: 12px; font-weight: 820; text-transform: uppercase; } body.gomer-route .gomer-spec-list dd { font-size: 14px; font-weight: 670; } @media (max-width: 1180px) { body.gomer-route .gomer-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1180px) { body.gomer-route .gomer-hero-copy, body.gomer-route .gomer-need-copy, body.gomer-route .gomer-install-copy { width: min(64%, 740px); } } @media (max-height: 820px) and (min-width: 781px) { body.gomer-route .gomer-hero-inner, body.gomer-route .gomer-need-inner, body.gomer-route .gomer-install-inner, body.gomer-route .gomer-operation-inner { padding-block: 46px; } } @media (max-height: 820px) and (min-width: 781px) { body.gomer-route .gomer-copy h1 { font-size: clamp(39px, 4.2vw, 62px); } } @media (max-height: 820px) and (min-width: 781px) { body.gomer-route .gomer-copy h2, body.gomer-route .gomer-section-head h2 { font-size: clamp(31px, 3vw, 48px); } } @media (max-height: 820px) and (min-width: 781px) { body.gomer-route .gomer-spec-list div { padding: 9px 11px; } } @media (max-width: 780px) { body.gomer-route .gomer-slide { min-height: auto; } } @media (max-width: 780px) { body.gomer-route .gomer-bg { display: none; } } @media (max-width: 780px) { body.gomer-route .gomer-slide--cards { min-height: auto; } } @media (max-width: 780px) { body.gomer-route .gomer-hero-inner, body.gomer-route .gomer-need-inner, body.gomer-route .gomer-install-inner, body.gomer-route .gomer-operation-inner { min-height: auto; padding-block: 34px; } } @media (max-width: 780px) { body.gomer-route .gomer-card-layout { padding-block: 34px; } } @media (max-width: 780px) { body.gomer-route .gomer-hero-copy, body.gomer-route .gomer-need-copy, body.gomer-route .gomer-install-copy, body.gomer-route .gomer-operation-copy { width: min(100%, 420px); margin-left: 0; } } @media (max-width: 780px) { body.gomer-route .gomer-copy h1 { max-width: 390px; font-size: clamp(30px, 8.3vw, 39px); } } @media (max-width: 780px) { body.gomer-route .gomer-copy h2, body.gomer-route .gomer-section-head h2 { font-size: clamp(25px, 7vw, 34px); } }
/* css/modules/responsive/gomer-responsive-max-width-780px.css */ @media (max-width: 780px) { body.gomer-route .gomer-copy p, body.gomer-route .gomer-section-head p { max-width: 390px; font-size: 14px; line-height: 1.34; } } @media (max-width: 780px) { body.gomer-route .gomer-lead { font-size: 15px; } } @media (max-width: 780px) { body.gomer-route .gomer-actions { display: grid; grid-template-columns: 1fr; width: min(100%, 350px); } } @media (max-width: 780px) { body.gomer-route .gomer-actions .btn { justify-content: center; padding: 10px 14px; font-size: 13px; } } @media (max-width: 780px) { body.gomer-route .gomer-card-grid, body.gomer-route .gomer-spec-list { grid-template-columns: 1fr; } } @media (max-width: 780px) { body.gomer-route .gomer-card-body { padding: 13px; } } @media (max-width: 780px) { body.gomer-route .gomer-card h3 { font-size: 21px; } } @media (max-width: 780px) { body.gomer-route .gomer-card p, body.gomer-route .gomer-bullets li { font-size: 14px; line-height: 1.34; } } @media (max-width: 780px) { body.gomer-route .gomer-spec-list dt { font-size: 11px; } } @media (max-width: 780px) { body.gomer-route .gomer-spec-list dd { font-size: 13px; } } @media (max-width: 420px) { body.gomer-route .gomer-copy h1 { font-size: 29px; } } @media (max-width: 420px) { body.gomer-route .gomer-copy p, body.gomer-route .gomer-section-head p, body.gomer-route .gomer-card p, body.gomer-route .gomer-bullets li { font-size: 12.8px; } } @media (max-width: 420px) { body.gomer-route .gomer-kicker { font-size: 11.5px; } }
/* css/modules/responsive/gatekeeper-responsive-min-width-1181px.css */ /* GateKeeper product workflow. Source of truth: .artifacts/product-plans/gatekeeper/gatekeeper-section-contracts-2026-06-02.json */ body.gatekeeper-route { background: #f7fbff; } /* Automatic license plate access solution. Source of truth: .artifacts/product-plans/automatic-license-plate-access/automatic-license-plate-access-section-contracts-2026-08-03.json */ body.alpr-route { background: #f7fbff; } body.alpr-route .alpr-page :where(h1, h2, h3, p, li, a, button, span, strong) { overflow-wrap: normal; word-break: normal; hyphens: manual; } body.alpr-route .alpr-slide { position: relative; isolation: isolate; overflow: hidden; width: 100%; min-height: 0; aspect-ratio: 1672 / 941; background: #f7fbff; color: #142437; } body.alpr-route .alpr-bg { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; pointer-events: none; filter: none; opacity: 1; } body.alpr-route .alpr-process { aspect-ratio: 1671 / 941; } body.alpr-route .alpr-inner { position: relative; z-index: 1; display: grid; align-items: center; box-sizing: border-box; min-height: 100%; padding-block: clamp(52px, 6vw, 88px); } body.alpr-route .alpr-copy, body.alpr-route .alpr-section-head { display: grid; gap: clamp(12px, 1.4vw, 20px); } body.alpr-route .alpr-copy { width: min(61%, 790px); } body.alpr-route .alpr-right .alpr-copy { margin-left: auto; } body.alpr-route [data-landing-section="alpr-access-rules"] .alpr-copy { width: min(52%, 680px); } body.alpr-route .alpr-kicker { margin: 0; color: #0a67b7; font-size: clamp(12px, 0.95vw, 14px); font-weight: 820; line-height: 1.1; text-transform: uppercase; } body.alpr-route .alpr-copy h1, body.alpr-route .alpr-copy h2, body.alpr-route .alpr-section-head h2 { margin: 0; color: #0d1f31; font-weight: 830; line-height: 1.04; } body.alpr-route .alpr-copy h1 { max-width: 790px; font-size: clamp(42px, 4.7vw, 74px); } body.alpr-route .alpr-copy h2, body.alpr-route .alpr-section-head h2 { font-size: clamp(30px, 3vw, 54px); } body.alpr-route .alpr-copy p, body.alpr-route .alpr-process-top p, body.alpr-route .alpr-card p, body.alpr-route .alpr-list li { margin: 0; color: rgba(20, 36, 55, 0.84); font-size: clamp(15px, 1.08vw, 18px); line-height: 1.45; } body.alpr-route .alpr-lead { color: #102431; font-size: clamp(18px, 1.42vw, 24px); font-weight: 680; } body.alpr-route .alpr-result { color: #0e5d8e; font-weight: 700; } body.alpr-route .alpr-actions { display: flex; gap: 12px; margin-top: 4px; } body.alpr-route .alpr-actions .btn { white-space: nowrap; } body.alpr-route .alpr-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 18px; margin: 0; padding: 0; list-style: none; } body.alpr-route .alpr-list li { position: relative; padding-left: 18px; } body.alpr-route .alpr-list li::before { content: ""; position: absolute; top: 0.58em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #0a8fd8; } body.alpr-route .alpr-process-inner { position: relative; z-index: 1; display: grid; grid-template-rows: minmax(0, 1fr); box-sizing: border-box; min-height: 100%; padding-block: clamp(8px, 0.8vw, 14px); } body.alpr-route .alpr-process-top { align-self: start; max-width: 1160px; } body.alpr-route .alpr-process-top h2 { max-width: 900px; margin: 4px 0 0; color: #0d1f31; font-size: clamp(30px, 2.65vw, 42px); line-height: 1.04; } @media (min-width: 1181px) { body.alpr-route .alpr-process-top h2 { white-space: nowrap; } } body.alpr-route .alpr-cases { background: #eef4f8; color: #142437; }
/* css/modules/responsive/cases-responsive-max-width-1180px-foundation.css */ body.alpr-route .alpr-cases-inner { display: grid; gap: clamp(26px, 3vw, 42px); padding-block: clamp(58px, 6vw, 90px); } body.alpr-route .alpr-card-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } body.alpr-route .alpr-card { display: grid; align-content: start; overflow: hidden; border: 1px solid rgba(54, 114, 145, 0.16); border-radius: 8px; background: #fff; box-shadow: 0 12px 30px rgba(28, 76, 94, 0.08); } body.alpr-route .alpr-card-media { aspect-ratio: 1672 / 941; background: #e8f1f7; } body.alpr-route .alpr-card-media img { display: block; width: 100%; height: auto; } body.alpr-route .alpr-card-body { display: grid; gap: 8px; padding: 14px; } body.alpr-route .alpr-card h3 { margin: 0; color: #102431; font-size: clamp(16px, 1.15vw, 20px); line-height: 1.15; } body.alpr-route .alpr-card p { font-size: clamp(13px, 0.85vw, 15px); } @media (max-width: 1180px) { body.alpr-route .alpr-copy { width: min(64%, 720px); } } @media (max-width: 1180px) { body.alpr-route [data-landing-section="alpr-access-rules"] .alpr-copy { width: min(58%, 620px); } } @media (max-width: 1180px) { body.alpr-route .alpr-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-height: 820px) and (min-width: 781px) { body.alpr-route .alpr-inner { padding-block: 42px; } } @media (max-height: 820px) and (min-width: 781px) { body.alpr-route .alpr-copy h1 { font-size: clamp(38px, 4.1vw, 60px); } } @media (max-height: 820px) and (min-width: 781px) { body.alpr-route .alpr-copy h2, body.alpr-route .alpr-process-top h2 { font-size: clamp(29px, 2.8vw, 45px); } } @media (max-width: 780px) { body.alpr-route .alpr-slide { min-height: auto; aspect-ratio: auto; } } @media (max-width: 780px) { body.alpr-route .alpr-bg { display: none; } } @media (max-width: 780px) { body.alpr-route .alpr-inner, body.alpr-route .alpr-process-inner { min-height: auto; padding-block: 36px; } } @media (max-width: 780px) { body.alpr-route .alpr-copy, body.alpr-route .alpr-right .alpr-copy { width: 100%; margin-left: 0; } } @media (max-width: 780px) { body.alpr-route .alpr-copy h1 { font-size: clamp(31px, 9vw, 42px); } } @media (max-width: 780px) { body.alpr-route .alpr-copy h2, body.alpr-route .alpr-process-top h2, body.alpr-route .alpr-section-head h2 { font-size: clamp(27px, 7.5vw, 36px); } } @media (max-width: 780px) { body.alpr-route .alpr-list { grid-template-columns: 1fr; } } @media (max-width: 780px) { body.alpr-route .alpr-process-inner { display: grid; gap: 22px; } } @media (max-width: 780px) { body.alpr-route .alpr-card-grid { grid-template-columns: 1fr; } } @media (max-width: 780px) { body.alpr-route .alpr-cases-inner { padding-block: 38px; } }
/* css/modules/responsive/gatekeeper-responsive-max-width-1180px.css */ body.gatekeeper-route .gatekeeper-page :where(h1, h2, h3, p, li, a, button, span, strong) { overflow-wrap: normal; word-break: normal; hyphens: manual; letter-spacing: 0; } body.gatekeeper-route .gatekeeper-slide { position: relative; isolation: isolate; overflow: hidden; width: 100%; min-height: min(max(680px, calc((100vw - 15px) * 941 / 1672)), 100vh); background: #f7fbff; color: #142437; } body.gatekeeper-route .gatekeeper-bg { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; object-fit: fill; object-position: center; pointer-events: none; filter: none; opacity: 1; } body.gatekeeper-route .gatekeeper-slide--cards { min-height: auto; } body.gatekeeper-route .gatekeeper-slide--cards .gatekeeper-bg { inset: 0; height: 100%; object-fit: fill; } body.gatekeeper-route .gatekeeper-inner { position: relative; z-index: 1; box-sizing: border-box; min-height: inherit; } body.gatekeeper-route .gatekeeper-hero-inner, body.gatekeeper-route .gatekeeper-install-inner, body.gatekeeper-route .gatekeeper-ecosystem-inner { display: grid; align-items: center; padding-block: clamp(54px, 6vw, 90px); } body.gatekeeper-route .gatekeeper-access-inner { display: grid; align-items: stretch; grid-template-rows: minmax(0, 1fr) minmax(0, auto); padding-block: clamp(46px, 5vw, 74px); } body.gatekeeper-route .gatekeeper-card-layout { box-sizing: border-box; padding-inline: clamp(28px, 4vw, 72px); } body.gatekeeper-route .gatekeeper-copy, body.gatekeeper-route .gatekeeper-section-head { display: grid; gap: clamp(12px, 1.4vw, 20px); } body.gatekeeper-route .gatekeeper-hero-copy, body.gatekeeper-route .gatekeeper-access-copy, body.gatekeeper-route .gatekeeper-ecosystem-copy { width: min(56%, 780px); } body.gatekeeper-route .gatekeeper-access-bottom { align-self: end; width: min(48%, 620px); } body.gatekeeper-route .gatekeeper-access-copy { align-self: start; } body.gatekeeper-route .gatekeeper-install-copy { width: min(56%, 780px); margin-left: auto; } body.gatekeeper-route .gatekeeper-kicker { margin: 0; color: #0a67b7; font-size: clamp(12px, 0.95vw, 14px); font-weight: 820; line-height: 1.1; text-transform: uppercase; } body.gatekeeper-route .gatekeeper-copy h1, body.gatekeeper-route .gatekeeper-copy h2, body.gatekeeper-route .gatekeeper-section-head h2 { margin: 0; color: #0d1f31; font-weight: 830; line-height: 1.04; } body.gatekeeper-route .gatekeeper-copy h1 { max-width: 760px; font-size: clamp(43px, 5vw, 78px); } body.gatekeeper-route .gatekeeper-copy h2, body.gatekeeper-route .gatekeeper-section-head h2 { font-size: clamp(30px, 3vw, 54px); } body.gatekeeper-route .gatekeeper-copy p, body.gatekeeper-route .gatekeeper-section-head p, body.gatekeeper-route .gatekeeper-card p, body.gatekeeper-route .gatekeeper-list li { margin: 0; color: rgba(20, 36, 55, 0.82); font-size: clamp(15px, 1.12vw, 19px); line-height: 1.45; } body.gatekeeper-route .gatekeeper-lead { color: #102431; font-size: clamp(18px, 1.45vw, 24px); font-weight: 670; } body.gatekeeper-route .gatekeeper-audience, body.gatekeeper-route .gatekeeper-result { color: #0e5d8e; font-weight: 700; } body.gatekeeper-route .gatekeeper-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } body.gatekeeper-route .gatekeeper-actions .btn { position: relative; z-index: 2; } body.gatekeeper-route .gatekeeper-product-view { position: absolute; z-index: 1; right: clamp(18px, 4vw, 64px); bottom: clamp(36px, 5vw, 90px); width: clamp(120px, 16vw, 210px); height: auto; pointer-events: none; } body.gatekeeper-route .gatekeeper-card-layout { position: relative; z-index: 1; display: grid; gap: clamp(24px, 3vw, 42px); padding-block: clamp(58px, 6.8vw, 96px); } body.gatekeeper-route .gatekeeper-section-head { width: min(900px, 100%); } body.gatekeeper-route .gatekeeper-section-head p { max-width: 790px; } body.gatekeeper-route .gatekeeper-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); } body.gatekeeper-route .gatekeeper-card { display: grid; overflow: hidden; border: 1px solid rgba(54, 114, 145, 0.16); border-radius: 8px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 14px 34px rgba(28, 76, 94, 0.09); } body.gatekeeper-route .gatekeeper-card-media { display: block; aspect-ratio: 1672 / 941; overflow: hidden; background: #edf7fb; } body.gatekeeper-route .gatekeeper-card-media img { display: block; width: 100%; height: auto; } body.gatekeeper-route .gatekeeper-card-body { display: grid; gap: 8px; padding: clamp(14px, 1.45vw, 20px); } body.gatekeeper-route .gatekeeper-card h3 { margin: 0; color: #102431; font-size: clamp(19px, 1.35vw, 25px); line-height: 1.1; } body.gatekeeper-route .gatekeeper-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } body.gatekeeper-route .gatekeeper-list li { position: relative; padding-left: 20px; } body.gatekeeper-route .gatekeeper-list li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 7px; height: 7px; border-radius: 50%; background: #0a8fd8; } @media (max-width: 1180px) { body.gatekeeper-route .gatekeeper-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1180px) { body.gatekeeper-route .gatekeeper-hero-copy, body.gatekeeper-route .gatekeeper-access-copy, body.gatekeeper-route .gatekeeper-ecosystem-copy, body.gatekeeper-route .gatekeeper-install-copy { width: min(64%, 740px); } } @media (max-width: 1180px) { body.gatekeeper-route .gatekeeper-product-view { width: clamp(110px, 18vw, 180px); } } @media (max-height: 820px) and (min-width: 781px) { body.gatekeeper-route .gatekeeper-bg { height: 100%; object-fit: fill; } } @media (max-height: 820px) and (min-width: 781px) { body.gatekeeper-route .gatekeeper-hero-inner, body.gatekeeper-route .gatekeeper-install-inner, body.gatekeeper-route .gatekeeper-ecosystem-inner, body.gatekeeper-route .gatekeeper-access-inner { padding-block: 44px; } } @media (max-height: 820px) and (min-width: 781px) { body.gatekeeper-route .gatekeeper-copy h1 { font-size: clamp(38px, 4.2vw, 62px); } } @media (max-height: 820px) and (min-width: 781px) { body.gatekeeper-route .gatekeeper-copy h2, body.gatekeeper-route .gatekeeper-section-head h2 { font-size: clamp(30px, 3vw, 48px); } } @media (max-width: 780px) { body.gatekeeper-route .gatekeeper-slide { min-height: auto; } } @media (max-width: 780px) { body.gatekeeper-route .gatekeeper-bg { display: none; } } @media (max-width: 780px) { body.gatekeeper-route .gatekeeper-hero-inner, body.gatekeeper-route .gatekeeper-install-inner, body.gatekeeper-route .gatekeeper-ecosystem-inner, body.gatekeeper-route .gatekeeper-access-inner { min-height: auto; padding-block: 34px; } } @media (max-width: 780px) { body.gatekeeper-route .gatekeeper-card-layout { padding-block: 30px; } } @media (max-width: 780px) { body.gatekeeper-route .gatekeeper-hero-copy, body.gatekeeper-route .gatekeeper-access-copy, body.gatekeeper-route .gatekeeper-ecosystem-copy, body.gatekeeper-route .gatekeeper-install-copy { width: min(100%, 430px); margin-left: 0; } } @media (max-width: 780px) { body.gatekeeper-route .gatekeeper-product-view { position: relative; right: auto; bottom: auto; width: min(180px, 58vw); margin-top: 18px; justify-self: center; } }
/* css/modules/responsive/gatekeeper-responsive-max-width-780px.css */ @media (max-width: 780px) { body.gatekeeper-route .gatekeeper-copy h1 { max-width: 390px; font-size: clamp(30px, 8.2vw, 39px); } } @media (max-width: 780px) { body.gatekeeper-route .gatekeeper-copy h2, body.gatekeeper-route .gatekeeper-section-head h2 { font-size: clamp(25px, 7vw, 34px); } } @media (max-width: 780px) { body.gatekeeper-route .gatekeeper-copy p, body.gatekeeper-route .gatekeeper-section-head p, body.gatekeeper-route .gatekeeper-card p, body.gatekeeper-route .gatekeeper-list li { max-width: 410px; font-size: 14px; line-height: 1.34; } } @media (max-width: 780px) { body.gatekeeper-route .gatekeeper-lead { font-size: 15px; } } @media (max-width: 780px) { body.gatekeeper-route .gatekeeper-actions { display: grid; grid-template-columns: 1fr; width: min(100%, 350px); } } @media (max-width: 780px) { body.gatekeeper-route .gatekeeper-actions .btn { justify-content: center; padding: 10px 14px; font-size: 13px; } } @media (max-width: 780px) { body.gatekeeper-route .gatekeeper-card-grid { grid-template-columns: 1fr; } } @media (max-width: 780px) { body.gatekeeper-route .gatekeeper-card-body { padding: 13px; } } @media (max-width: 780px) { body.gatekeeper-route .gatekeeper-card h3 { font-size: 21px; } } @media (max-width: 420px) { body.gatekeeper-route .gatekeeper-copy h1 { font-size: 29px; } } @media (max-width: 420px) { body.gatekeeper-route .gatekeeper-copy p, body.gatekeeper-route .gatekeeper-section-head p, body.gatekeeper-route .gatekeeper-card p, body.gatekeeper-route .gatekeeper-list li { font-size: 12.8px; } } @media (max-width: 420px) { body.gatekeeper-route .gatekeeper-kicker { font-size: 11.5px; } }
/* css/modules/responsive/heatmaster-responsive-max-width-1180px.css */ /* HeatMaster Phase 3 integration, 2026-06-02 */ body.heatmaster-route { background: #f6f3ea; } body.heatmaster-route .heatmaster-page, body.heatmaster-route .heatmaster-page :where(h1, h2, h3, p, li, a, button, span, strong) { overflow-wrap: normal; word-break: normal; hyphens: manual; } body.heatmaster-route .heatmaster-page { background: #f6f3ea; color: #142019; } .heatmaster-slide { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; padding: 0; background: #f6f3ea; } .heatmaster-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; object-fit: fill; object-position: center; filter: none; opacity: 1; pointer-events: none; } .heatmaster-inner { position: relative; z-index: 1; min-height: 100svh; } .heatmaster-copy, .heatmaster-process-copy, .heatmaster-process-note { color: #17231b; } .heatmaster-copy { width: min(55%, 740px); padding-top: clamp(64px, 8svh, 112px); padding-bottom: clamp(56px, 8svh, 96px); } .heatmaster-copy--left { margin-right: auto; } .heatmaster-copy--right { margin-left: auto; } .heatmaster-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; color: #2f7b47; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .heatmaster-kicker::before { width: 28px; height: 2px; content: ""; background: #69a76d; } .heatmaster-copy h1, .heatmaster-copy h2, .heatmaster-process-copy h2 { max-width: 780px; margin-bottom: 18px; color: #142019; letter-spacing: 0; line-height: 1.06; } .heatmaster-copy h1 { font-size: clamp(42px, 4.8vw, 70px); } .heatmaster-copy h2, .heatmaster-process-copy h2 { font-size: clamp(34px, 3.5vw, 52px); } .heatmaster-copy h3 { margin-bottom: 10px; color: #1c3524; font-size: 17px; line-height: 1.18; } .heatmaster-copy p, .heatmaster-copy li, .heatmaster-process-copy p, .heatmaster-process-note p { color: #2c3f31; font-size: clamp(16px, 1.28vw, 19px); line-height: 1.48; } .heatmaster-lead { max-width: 720px; color: #203529; font-size: clamp(18px, 1.55vw, 23px); line-height: 1.36; } .heatmaster-copy p + p, .heatmaster-process-note p + p { margin-top: 14px; } .heatmaster-list { display: grid; gap: 8px; margin-top: 18px; padding-left: 0; list-style: none; } .heatmaster-list li { position: relative; padding-left: 22px; } .heatmaster-list li::before { position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; content: ""; background: #3f9a58; } .heatmaster-two-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); margin-top: 20px; } .heatmaster-copy--dense { width: min(55%, 760px); padding-top: clamp(44px, 6svh, 78px); } .heatmaster-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; } .heatmaster-actions .btn { white-space: normal; } body.heatmaster-route .heatmaster-actions .btn-primary { border-color: #2f7b47; background: #2f7b47; color: #ffffff; } body.heatmaster-route .heatmaster-actions .btn-secondary { border-color: rgba(47, 123, 71, 0.34); background: rgba(255, 255, 255, 0.74); color: #245d36; } .heatmaster-process-inner { display: grid; min-height: 100svh; grid-template-rows: minmax(0, 32svh) minmax(0, 35svh) minmax(0, 33svh); } .heatmaster-process-copy { align-self: end; max-width: 1120px; padding-bottom: clamp(10px, 2svh, 18px); } .heatmaster-process-copy h2 { max-width: 1120px; margin-bottom: 12px; } .heatmaster-process-copy p { max-width: 980px; } .heatmaster-process-note { grid-row: 3; align-self: start; max-width: 1160px; padding-top: clamp(12px, 2svh, 20px); } .heatmaster-final-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 22px; } .heatmaster-final-note p { max-width: 760px; } .heatmaster-final-note .heatmaster-actions { justify-content: flex-end; margin-top: 0; } @media (max-width: 1180px) { .heatmaster-copy { width: min(55%, 680px); } } @media (max-width: 1180px) { .heatmaster-copy--dense { width: min(55%, 700px); } } @media (max-width: 1180px) { .heatmaster-final-note { grid-template-columns: 1fr; } } @media (max-width: 1180px) { .heatmaster-final-note .heatmaster-actions { justify-content: flex-start; } } @media (max-width: 820px) { .heatmaster-slide, .heatmaster-inner { min-height: 100svh; } } @media (max-width: 820px) { .heatmaster-bg { object-fit: fill; } } @media (max-width: 820px) { .heatmaster-copy, .heatmaster-copy--dense { width: 61%; padding-top: clamp(30px, 5svh, 48px); padding-bottom: clamp(28px, 5svh, 44px); } } @media (max-width: 820px) { .heatmaster-copy--right { margin-left: auto; } } @media (max-width: 820px) { .heatmaster-copy h1 { font-size: clamp(30px, 8.2vw, 44px); line-height: 1.05; } } @media (max-width: 820px) { .heatmaster-copy h2, .heatmaster-process-copy h2 { font-size: clamp(25px, 6.5vw, 34px); line-height: 1.08; } } @media (max-width: 820px) { .heatmaster-copy p, .heatmaster-copy li, .heatmaster-process-copy p, .heatmaster-process-note p { font-size: clamp(13px, 3.2vw, 16px); line-height: 1.36; } } @media (max-width: 820px) { .heatmaster-lead { font-size: clamp(15px, 3.8vw, 18px); } } @media (max-width: 820px) { .heatmaster-kicker { margin-bottom: 10px; font-size: 11px; } } @media (max-width: 820px) { .heatmaster-list { gap: 5px; margin-top: 10px; } } @media (max-width: 820px) { .heatmaster-two-lists { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; } } @media (max-width: 820px) { .heatmaster-copy h3 { margin-bottom: 6px; font-size: 14px; } }
/* css/modules/responsive/heatmaster-responsive-max-width-820px.css */ @media (max-width: 820px) { .heatmaster-actions { gap: 10px; margin-top: 16px; } } @media (max-width: 820px) { .heatmaster-actions .btn { min-height: 42px; padding: 10px 14px; font-size: 13px; } } @media (max-width: 820px) { .heatmaster-process-inner { grid-template-rows: 32svh 35svh 33svh; } } @media (max-width: 820px) { .heatmaster-process-copy { max-width: 100%; padding-bottom: 8px; } } @media (max-width: 820px) { .heatmaster-process-note { padding-top: 8px; } } @media (max-width: 520px) { .heatmaster-copy, .heatmaster-copy--dense { width: 58%; } } @media (max-width: 520px) { .heatmaster-copy h1 { font-size: clamp(28px, 7.8vw, 34px); } } @media (max-width: 520px) { .heatmaster-copy h2, .heatmaster-process-copy h2 { font-size: clamp(23px, 6vw, 28px); } } @media (max-width: 520px) { .heatmaster-copy p, .heatmaster-copy li, .heatmaster-process-copy p, .heatmaster-process-note p { font-size: 12.8px; line-height: 1.32; } } @media (max-width: 520px) { .heatmaster-hero .heatmaster-copy { width: 58%; } } @media (max-width: 520px) { .heatmaster-process-inner { grid-template-rows: 32svh 35svh 33svh; } } @media (max-width: 520px) { .heatmaster-final-note .heatmaster-actions { display: grid; grid-template-columns: 1fr; } } .faq-section { background: linear-gradient(180deg, rgba(246, 250, 255, 0.74), #ffffff); } .seo-ai-summary { background: linear-gradient(180deg, #ffffff, rgba(246, 250, 255, 0.74)); } .faq-section h2 { max-width: 820px; margin-bottom: clamp(20px, 3vw, 32px); } .faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .faq-item { border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.88); box-shadow: var(--shadow-soft); } .faq-item { padding: clamp(20px, 2.4vw, 28px); } .faq-item h3 { margin: 0 0 10px; color: var(--ink); font-size: clamp(18px, 2vw, 22px); line-height: 1.2; } .faq-item p { margin: 0; color: var(--text); line-height: 1.65; } @media (max-width: 820px) { .faq-list { grid-template-columns: 1fr; } }