/* Purchase guide: Design A components. The previous landing-page sheet is intentionally not loaded. */ #my_home.design-a main #content.da-my-home-content { display: block; width: 100%; padding: 0 0 82px; overflow: hidden; background: #fff; color: #202020; font-size: 17px; line-height: 1.9; } #my_home.design-a main .da-my-home-content *, #my_home.design-a main .da-my-home-content *::before, #my_home.design-a main .da-my-home-content *::after { box-sizing: border-box; } #my_home.design-a main .da-my-home-content .mh-container { width: min(100% - 30px, 1280px); margin: 0 auto; } #my_home.design-a main .da-my-home-content img { display: block; max-width: 100%; height: auto; } #my_home.design-a main .da-my-home-content figure, #my_home.design-a main .da-my-home-content ul, #my_home.design-a main .da-my-home-content ol { margin: 0; } #my_home.design-a main .da-my-home-content p { margin: 0 0 18px; font-size: inherit; line-height: 1.9; } #my_home.design-a main .da-my-home-content p:last-child { margin-bottom: 0; } #my_home.design-a main .da-my-home-content h2, #my_home.design-a main .da-my-home-content h3, #my_home.design-a main .da-my-home-content h4 { width: auto; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: #202020; font-weight: 800; line-height: 1.45; letter-spacing: .02em; text-align: inherit; } #my_home.design-a main .da-my-home-content h2::before, #my_home.design-a main .da-my-home-content h2::after, #my_home.design-a main .da-my-home-content h3::before, #my_home.design-a main .da-my-home-content h3::after, #my_home.design-a main .da-my-home-content h4::before, #my_home.design-a main .da-my-home-content h4::after { display: none; } #my_home.design-a main .da-my-home-content h2::first-letter, #my_home.design-a main .da-my-home-content h3::first-letter, #my_home.design-a main .da-my-home-content h4::first-letter { color: inherit; } #my_home.design-a main .da-my-home-content strong, #my_home.design-a main .da-my-home-content em { font-style: normal; } #my_home.design-a main .da-my-home-content a { transition: opacity .2s ease; } #my_home.design-a main .da-my-home-content a:hover { opacity: .78; } #my_home.design-a main .da-my-home-content :is(a,button,summary):focus-visible { outline: 3px solid #ef4353; outline-offset: 3px; } /* Existing consultation choices use the finished guide's pill buttons and cards. */ #my_home.design-a main .mh-hero__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; list-style: none; } #my_home.design-a main .mh-hero__tags li { width: auto; padding: 5px 16px; border: 1px solid #e6be00; border-radius: 999px; background: #fffdf7; font-size: 15px; font-weight: 700; } #my_home.design-a main .mh-hero__actions, #my_home.design-a main .mh-mid-cta__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 26px auto 0; } #my_home.design-a main .mh-button, #my_home.design-a main .mh-line-button, #my_home.design-a main .mh-inline-button { display: inline-flex; justify-content: center; align-items: center; min-height: 52px; padding: 12px 25px; border-radius: 999px; background: #ef4353; box-shadow: 0 5px 0 rgba(167,35,50,.15); color: #fff; font-size: 16px; font-weight: 800; line-height: 1.4; text-align: center; text-decoration: none; } #my_home.design-a main .mh-button--line, #my_home.design-a main .mh-line-button { background: #1e2b3a; box-shadow: 0 5px 0 rgba(30,43,58,.13); } #my_home.design-a main .mh-scroll { display: inline-block; margin-top: 25px; color: #5a4800; font: 800 12px/1.2 Arial,sans-serif; letter-spacing: .2em; } /* Shared Design A headings, section bands, and card surfaces. */ #my_home.design-a main .mh-solution, #my_home.design-a main .mh-mid-cta, #my_home.design-a main .mh-contact-form { background: #fffdf7; } #my_home.design-a main .da-my-home-content :is(.mh-section-title,.mh-story-heading,.mh-solution__headline-grid,.mh-contact-guide__copy,.mh-future__copy) > .mh-section-title__en, #my_home.design-a main .da-my-home-content .mh-story-heading > span, #my_home.design-a main .da-my-home-content .mh-section-title__en { margin: 0 0 10px; color: #dc9130; font: 800 12px/1.4 Arial,sans-serif; letter-spacing: .25em; } #my_home.design-a main .da-my-home-content .mh-section-title, #my_home.design-a main .da-my-home-content .mh-story-heading { margin: 0 auto 35px; text-align: center; } #my_home.design-a main .da-my-home-content :is(.mh-section-title h3,.mh-story-heading h3,.mh-worries h3,.mh-solution h3,.mh-contact-guide h3,.mh-mid-cta h3,.mh-future h3) { display: inline-block; max-width: 100%; margin: 0 0 20px; padding: 12px 30px 14px; border-radius: 999px; background: #ffd100; box-shadow: 0 5px 0 rgba(184,143,0,.12); font-size: 34px; line-height: 1.4; text-align: center; } #my_home.design-a main .da-my-home-content .mh-section-title > p:last-child { max-width: 940px; margin: 0 auto; text-align: left; } #my_home.design-a main .da-my-home-content :is(.mh-problem h4,.mh-concerns h5,.mh-path-card h4,.mh-support-card h4,.mh-more-questions__list-title) { font-size: 22px; line-height: 1.45; } #my_home.design-a main .da-my-home-content :is(.mh-reasons__list > li,.mh-path-card,.mh-support-card,.mh-problem,.mh-message,.mh-line-examples p,.mh-more-questions__list-wrap,.mh-faq details,.mh-form-placeholder) { min-width: 0; padding: 30px !important; border: 2px solid #f0c800; border-radius: 18px; background: #fff; box-shadow: 0 5px 0 rgba(44,35,7,.05); } /* Search concerns and the one-window answer. */ #my_home.design-a main .mh-worries .mh-container { text-align: center; } #my_home.design-a main .mh-worries__stage { width: min(100%,550px); margin: 0 auto 18px; } #my_home.design-a main .mh-worries__stage img { width: 100%; max-height: 390px; object-fit: contain; } #my_home.design-a main .mh-worries__lead { max-width: 860px; margin: 0 auto !important; text-align: left; } #my_home.design-a main .mh-search-story__intro { display: grid; grid-template-columns: minmax(0,280px) minmax(0,1fr); align-items: center; gap: 32px; margin-bottom: 32px; } #my_home.design-a main .mh-portal-person img { width: 100%; max-height: 260px; object-fit: contain; } #my_home.design-a main .mh-search-story__copy { padding: 30px; border: 1px solid #f2dfa0; border-radius: 18px; background: #fff; } #my_home.design-a main .mh-search-story__label { font-size: 20px !important; font-weight: 800; } #my_home.design-a main .mh-portals { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; } #my_home.design-a main .mh-portals li { padding: 5px 13px; border-radius: 999px; background: #fff7d4; font-size: 15px; font-weight: 700; } #my_home.design-a main .mh-search-story__copy > p:last-child { margin-top: 15px; } #my_home.design-a main .mh-problem { padding: 38px !important; text-align: center; } #my_home.design-a main .mh-problem__kicker { color: #ef4353; font-weight: 800; } #my_home.design-a main .mh-problem__explain-wrap { display: flex; align-items: center; gap: 20px; max-width: 930px; margin: 22px auto 28px; text-align: left; } #my_home.design-a main .mh-problem__person { flex: 0 0 190px; width: 190px; object-fit: contain; } #my_home.design-a main .mh-problem__explain-copy p { margin-bottom: 10px; } #my_home.design-a main .mh-concerns { max-width: 970px; margin: 0 auto; padding: 25px; border-radius: 14px; background: #fffdf1; text-align: left; } #my_home.design-a main .mh-concerns h5 { margin-bottom: 15px; } #my_home.design-a main .mh-concerns ul, #my_home.design-a main .mh-path-card ul, #my_home.design-a main .mh-more-questions__list-wrap ul { display: grid; gap: 8px; padding: 0; list-style: none; } #my_home.design-a main .mh-concerns li, #my_home.design-a main .mh-path-card li, #my_home.design-a main .mh-more-questions__list-wrap li { position: relative; padding-left: 22px; font-size: 17px; line-height: 1.7; } #my_home.design-a main .mh-concerns li::before, #my_home.design-a main .mh-path-card li::before, #my_home.design-a main .mh-more-questions__list-wrap li::before { content: ""; position: absolute; top: .65em; left: 0; width: 9px; height: 9px; border: 2px solid #ef4353; border-radius: 50%; } #my_home.design-a main .mh-solution__headline { text-align: center; } #my_home.design-a main .mh-solution__headline-grid { display: flex; align-items: center; justify-content: center; gap: 34px; } #my_home.design-a main .mh-solution__representative { width: 225px; max-height: 250px; object-fit: contain; } #my_home.design-a main .mh-solution__promise { font-size: 22px !important; font-weight: 700; } #my_home.design-a main .mh-solution__body { padding-top: 22px; text-align: center; } #my_home.design-a main .mh-solution__lead { max-width: 1000px; margin: 0 auto 30px !important; text-align: left; } #my_home.design-a main .mh-solution__diagram { width: min(100%,720px); margin: 0 auto 22px !important; padding: 15px; border: 2px solid #f0c800; border-radius: 18px; background: #fff; } #my_home.design-a main .mh-solution__diagram img { width: 100%; max-height: 650px; object-fit: contain; } #my_home.design-a main .mh-solution__diagram figcaption { display: grid; gap: 4px; padding: 15px 5px 3px; font-size: 14px; } #my_home.design-a main .mh-solution__caption-main { font-size: 19px; } #my_home.design-a main .mh-text-link { display: inline-block; color: #b72d3b; font-weight: 800; text-decoration: underline; } /* Reasons, two purchase situations, and contact options. */ #my_home.design-a main .mh-reasons__layout { position: relative; } #my_home.design-a main .mh-reasons__list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; padding: 0; list-style: none; } #my_home.design-a main .mh-reasons__list li { text-align: center; } #my_home.design-a main .mh-reasons__list li > span { display: block; margin: 0 0 10px; color: #ef4353; font: 900 26px/1 Arial,sans-serif; } #my_home.design-a main .mh-reasons__list h4 { margin-bottom: 15px; font-size: 20px; } #my_home.design-a main .mh-reasons__list p { text-align: left; } #my_home.design-a main .mh-reasons__photo { width: 190px; margin: 30px auto 0 !important; } #my_home.design-a main .mh-message { display: flex; align-items: center; gap: 24px; max-width: 900px; margin: 0 auto 43px; } #my_home.design-a main .mh-message img { width: 200px; border-radius: 12px; } #my_home.design-a main .mh-message__label { color: #ef4353; font-size: 15px !important; font-weight: 800; } #my_home.design-a main .mh-path-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; } #my_home.design-a main .mh-path-card { text-align: center; } #my_home.design-a main .mh-path-card:first-child { border-color: #36b875; } #my_home.design-a main .mh-path-card__number { display: inline-block; margin-bottom: 12px !important; padding: 6px 16px; border-radius: 999px; background: #ffd100; font-size: 13px !important; font-weight: 800; letter-spacing: .12em; } #my_home.design-a main .mh-path-card:first-child .mh-path-card__number { background: #36b875; color: #fff; } #my_home.design-a main .mh-path-card h4 { margin-bottom: 15px; } #my_home.design-a main .mh-path-card > p:not(.mh-path-card__number), #my_home.design-a main .mh-path-card ul { text-align: left; } #my_home.design-a main .mh-path-card__note { padding: 12px 16px; border-radius: 10px; background: #fff7d4; } #my_home.design-a main .mh-contact-guide > .mh-container { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 38px; } #my_home.design-a main .mh-contact-guide__art { display: flex; align-items: center; gap: 18px; } #my_home.design-a main .mh-contact-guide__visual { flex: 0 0 220px; } #my_home.design-a main .mh-contact-guide__visual img { width: 220px; border-radius: 16px; } #my_home.design-a main .mh-contact-guide__bubble { padding: 18px; border: 1px solid #ecd26c; border-radius: 14px; background: #fff; } #my_home.design-a main .mh-contact-guide__step, #my_home.design-a main .mh-phone-guide__step { color: #ef4353; font-weight: 800; } #my_home.design-a main .mh-contact-guide h3 { border-radius: 20px; } #my_home.design-a main .mh-line-examples { display: grid; gap: 12px; } #my_home.design-a main .mh-line-examples p { margin: 0; padding: 15px 18px !important; font-size: 16px; } #my_home.design-a main .mh-line-examples span { display: block; color: #b72d3b; font-weight: 800; } #my_home.design-a main .mh-contact-guide__copy > .mh-line-button { margin: 20px 0 12px; } #my_home.design-a main .mh-contact-guide__small { font-size: 14px !important; } #my_home.design-a main .mh-phone-guide { max-width: 850px; margin: 45px auto 0; padding: 25px 0; border-top: 1px solid #eadb9b; text-align: center; } #my_home.design-a main .mh-phone-guide__card, #my_home.design-a main .mh-contact-form__phone { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding: 13px 20px; border: 1px solid #ecd26c; border-radius: 999px; background: #fff; } #my_home.design-a main .mh-phone-guide__card a, #my_home.design-a main .mh-contact-form__phone a { color: #ef4353; font-size: 24px; font-weight: 900; } #my_home.design-a main .mh-phone-guide__card small, #my_home.design-a main .mh-contact-form__phone small { font-size: 13px; } #my_home.design-a main .mh-phone-guide p:last-child { margin-top: 15px; } #my_home.design-a main .mh-mid-cta { text-align: center; } #my_home.design-a main .mh-mid-cta h3 { border-radius: 23px !important; } /* Questions, support cards, and answers. */ #my_home.design-a main .mh-more-questions__layout { display: grid; grid-template-columns: minmax(0,270px) minmax(0,1fr); align-items: center; gap: 36px; } #my_home.design-a main .mh-more-questions__image img { max-height: 350px; object-fit: contain; } #my_home.design-a main .mh-more-questions__list-title { margin-bottom: 17px; } #my_home.design-a main .mh-more-questions__closing { max-width: 1000px; margin: 25px auto 0 !important; } #my_home.design-a main .mh-support__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; } #my_home.design-a main .mh-support-card { display: grid; grid-template-columns: minmax(0,180px) minmax(0,1fr); align-items: center; gap: 22px; } #my_home.design-a main .mh-support-card__image, #my_home.design-a main .mh-faq__image { display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: zoom-in; } #my_home.design-a main .mh-support-card__image img { width: 100%; height: 165px; object-fit: cover; border-radius: 12px; } #my_home.design-a main .mh-support-card__number { color: #ef4353; font-size: 13px !important; font-weight: 800; letter-spacing: .12em; } #my_home.design-a main .mh-support-card h4 { margin-bottom: 10px; } #my_home.design-a main .mh-faq__list { display: grid; gap: 16px; max-width: 1100px; margin: 0 auto; } #my_home.design-a main .mh-faq details { padding: 0 !important; } #my_home.design-a main .mh-faq summary { position: relative; padding: 22px 54px 22px 25px; cursor: pointer; font-size: 19px; font-weight: 800; line-height: 1.55; list-style: none; } #my_home.design-a main .mh-faq summary::-webkit-details-marker { display: none; } #my_home.design-a main .mh-faq summary::after { content: "+"; position: absolute; top: 50%; right: 23px; transform: translateY(-50%); color: #ef4353; font-size: 30px; line-height: 1; } #my_home.design-a main .mh-faq details[open] summary::after { content: "−"; } #my_home.design-a main .mh-faq summary span { display: inline-block; margin-right: 12px; color: #ef4353; } #my_home.design-a main .mh-faq__answer { display: flex; gap: 15px; padding: 22px 25px 28px; border-top: 1px solid #f0dfa4; background: #fffdf7; } #my_home.design-a main .mh-faq__answer > span { flex: 0 0 auto; color: #ef4353; font-weight: 800; } #my_home.design-a main .mh-faq__answer > :not(span) { min-width: 0; } #my_home.design-a main .mh-faq__answer p { margin: 0; } #my_home.design-a main .mh-faq__answer .mh-inline-button { margin-top: 18px; } #my_home.design-a main .mh-faq__figure { max-width: 600px; margin: 20px auto 0 !important; } #my_home.design-a main .mh-faq__image img { width: 100%; border-radius: 12px; } #my_home.design-a main .mh-faq-flow-mobile { display: grid; gap: 12px; max-width: 600px; margin: 20px 0; padding: 18px; border: 1px solid #ecd26c; border-radius: 14px; background: #fff; text-align: center; } #my_home.design-a main .mh-faq-flow-mobile__sources { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 0; list-style: none; } #my_home.design-a main .mh-faq-flow-mobile__sources li { padding: 9px; border-radius: 8px; background: #fff7d4; font-size: 14px; } #my_home.design-a main .mh-faq-flow-mobile__arrow, #my_home.design-a main .mh-faq-flow-mobile__result { padding: 9px; border-radius: 8px; background: #ffd100; font-weight: 800; } #my_home.design-a main .mh-faq-flow-mobile__arrow b { display: block; } #my_home.design-a main .mh-faq-flow-mobile__check { display: grid; gap: 4px; padding: 8px; border: 1px dashed #e5c454; border-radius: 8px; } #my_home.design-a main .mh-faq-flow-mobile__original { font-size: 14px; } #my_home.design-a main .mh-faq-flow-mobile__sr { position: static; width: auto; height: auto; overflow: visible; } /* Closing content and the existing placeholder for a future purchase form. */ #my_home.design-a main .mh-future { text-align: center; } #my_home.design-a main .mh-future__copy > p:last-child { margin: 0 auto 30px; font-size: 22px; font-weight: 700; } #my_home.design-a main .mh-future__gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; } #my_home.design-a main .mh-future__gallery img { width: 100%; aspect-ratio: 1.3; object-fit: cover; border: 2px solid #f0c800; border-radius: 16px; } #my_home.design-a main .mh-closing__layout { display: flex; align-items: center; gap: 35px; max-width: 950px; } #my_home.design-a main .mh-closing__photo { flex: 0 0 280px; } #my_home.design-a main .mh-closing__photo img { border-radius: 16px; } #my_home.design-a main .mh-closing h3 { margin-bottom: 18px; font-size: 26px; } #my_home.design-a main .mh-closing__name { font-weight: 800; } #my_home.design-a main .mh-closing__name span { display: block; font-size: 14px; font-weight: 400; } #my_home.design-a main .mh-closing .mh-inline-button { margin-top: 8px; } #my_home.design-a main .mh-form-placeholder { max-width: 920px; margin: 0 auto 28px; text-align: center; } #my_home.design-a main .mh-form-placeholder span { display: block; color: #dc9130; font: 800 12px/1.3 Arial,sans-serif; letter-spacing: .25em; } #my_home.design-a main .mh-form-placeholder strong { display: block; margin: 8px 0; font-size: 24px; } #my_home.design-a main .mh-mailform :is(#d_en1240790859,#d_en1262055277,#d_en1240791078) { text-align: left; } #my_home.design-a main .mh-contact-form__alternatives { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; } /* Image expansion is retained from the current page script. */ #my_home.design-a main .mh-lightbox { display: none; position: fixed; z-index: 99999; inset: 90px 0 0; align-items: center; justify-content: center; padding: 40px; } #my_home.design-a main .mh-lightbox.is-open { display: flex; } #my_home.design-a main .mh-lightbox__backdrop { position: absolute; inset: 0; background: rgba(16,20,25,.88); } #my_home.design-a main .mh-lightbox__close { position: absolute; z-index: 2; top: 15px; right: 20px; width: 45px; height: 45px; border: 0; border-radius: 50%; background: #fff; color: #202020; font-size: 30px; cursor: pointer; } #my_home.design-a main .mh-lightbox figure { position: relative; z-index: 1; max-width: min(90vw,1000px); max-height: 90vh; text-align: center; } #my_home.design-a main .mh-lightbox figure img { max-height: 80vh; margin: 0 auto; object-fit: contain; } #my_home.design-a main .mh-lightbox figcaption { padding-top: 10px; color: #fff; font-size: 14px; } @media screen and (max-width: 750px) { #my_home.design-a main #content.da-my-home-content { padding-bottom: 48px; font-size: 14px; } #my_home.design-a main .da-my-home-content > section { padding: 48px 0; } #my_home.design-a main .da-my-home-content > .mh-hero { padding: 45px 0 32px; } #my_home.design-a main .mh-hero h2 { font-size: clamp(30px,8vw,39px); } #my_home.design-a main .mh-hero h2 em { display: inline-block; white-space: nowrap; } #my_home.design-a main .mh-hero__tags li { font-size: 13px; } #my_home.design-a main .mh-hero__visual-frame { gap: 12px; padding: 12px; } #my_home.design-a main .mh-hero__visual-crop { flex-basis: 92px; } #my_home.design-a main .mh-hero__visual-crop img { width: 92px; height: 92px; } #my_home.design-a main .mh-hero__visual-caption { font-size: 12px; } #my_home.design-a main .mh-hero__visual-caption strong { font-size: 15px; } #my_home.design-a main .mh-breadcrumb li, #my_home.design-a main .mh-breadcrumb a { font-size: 13px; } #my_home.design-a main .da-my-home-content :is(.mh-section-title h3,.mh-story-heading h3,.mh-worries h3,.mh-solution h3,.mh-contact-guide h3,.mh-mid-cta h3,.mh-future h3) { padding: 10px 18px 12px; border-radius: 22px; font-size: 25px; } #my_home.design-a main .da-my-home-content :is(.mh-problem h4,.mh-concerns h5,.mh-path-card h4,.mh-support-card h4,.mh-more-questions__list-title) { font-size: 19px; } #my_home.design-a main .da-my-home-content :is(.mh-reasons__list > li,.mh-path-card,.mh-support-card,.mh-problem,.mh-message,.mh-line-examples p,.mh-more-questions__list-wrap,.mh-faq details,.mh-form-placeholder) { padding: 20px !important; } #my_home.design-a main .mh-worries__stage img { max-height: 260px; } #my_home.design-a main .mh-search-story__intro, #my_home.design-a main .mh-more-questions__layout { grid-template-columns: minmax(0,1fr); gap: 15px; } #my_home.design-a main .mh-portal-person, #my_home.design-a main .mh-more-questions__image { width: min(100%,270px); margin: 0 auto; } #my_home.design-a main .mh-search-story__copy { padding: 20px; } #my_home.design-a main .mh-problem__explain-wrap { display: block; } #my_home.design-a main .mh-problem__person { width: 155px; margin: 0 auto 15px; } #my_home.design-a main .mh-concerns { padding: 18px; } #my_home.design-a main .mh-concerns li, #my_home.design-a main .mh-path-card li, #my_home.design-a main .mh-more-questions__list-wrap li { font-size: 14px; } #my_home.design-a main .mh-solution__headline-grid { flex-direction: column; gap: 10px; } #my_home.design-a main .mh-solution__representative { width: 180px; } #my_home.design-a main .mh-solution__promise { font-size: 17px !important; } #my_home.design-a main .mh-solution__diagram img { max-height: none; } #my_home.design-a main .mh-reasons__list, #my_home.design-a main .mh-path-grid, #my_home.design-a main .mh-support__grid, #my_home.design-a main .mh-future__gallery { grid-template-columns: minmax(0,1fr); gap: 17px; } #my_home.design-a main .mh-message, #my_home.design-a main .mh-closing__layout { display: block; } #my_home.design-a main .mh-message img { width: 160px; margin: 0 auto 15px; } #my_home.design-a main .mh-contact-guide > .mh-container { grid-template-columns: minmax(0,1fr); gap: 30px; } #my_home.design-a main .mh-contact-guide__art { display: block; text-align: center; } #my_home.design-a main .mh-contact-guide__visual { width: 180px; margin: 0 auto 15px; } #my_home.design-a main .mh-contact-guide__visual img { width: 100%; } #my_home.design-a main .mh-phone-guide__card, #my_home.design-a main .mh-contact-form__phone { border-radius: 16px; } #my_home.design-a main .mh-support-card { grid-template-columns: minmax(0,1fr); gap: 16px; } #my_home.design-a main .mh-support-card__image { max-width: 230px; margin: 0 auto; } #my_home.design-a main .mh-support-card__image img { height: 170px; } #my_home.design-a main .mh-faq summary { padding: 18px 45px 18px 18px; font-size: 16px; } #my_home.design-a main .mh-faq__answer { padding: 18px; } #my_home.design-a main .mh-faq-flow-mobile__sources { grid-template-columns: minmax(0,1fr); } #my_home.design-a main .mh-future__gallery { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; } #my_home.design-a main .mh-closing__photo { width: 190px; margin: 0 auto 20px; } #my_home.design-a main .mh-closing h3 { font-size: 21px; } #my_home.design-a main .mh-lightbox { padding: 20px; } #my_home.design-a main .mh-lightbox { top: 60px; } #my_home.design-a main .mh-sp { display: inline; } #my_home.design-a main .mh-pc { display: none; } } /* Responsive supplied artwork for the revised P12 content blocks. */ #my_home.design-a main .mh-replacement-picture { display: block; width: 100%; margin: 0 auto; text-align: center; } #my_home.design-a main .mh-replacement-picture img { display: block; width: 100%; height: auto; margin: 0 auto; } @media screen and (min-width: 751px) { #my_home.design-a main .mh-sp { display: none; } } /* The page now follows the finished v4 page structure directly. */ #my_home.design-a main #content.da-my-home-content { display: block; padding-bottom: 82px; } #my_home.design-a main #top_info h2 { max-width: 1160px; margin: 0 auto; font-size: 52px; font-weight: 900; } #my_home.design-a main #top_info h2 span { display: inline-block; font-size: .62em; line-height: 1.5; white-space: nowrap; } #my_home.design-a main #content > .da-home-body { width: min(100%,1310px); margin: 0 auto; padding: 0 15px; } #my_home.design-a main .da-home-hero-copy { max-width: 980px; margin: 0 auto 42px; padding: 20px 30px 0; text-align: center; } #my_home.design-a main .da-home-hero-copy__kicker { margin-bottom: 9px; color: #d98a22; font-size: 14px; font-weight: 800; letter-spacing: .06em; } #my_home.design-a main .da-home-hero-copy__headline { margin-bottom: 14px; font-size: 27px; font-weight: 800; line-height: 1.5; } #my_home.design-a main .da-home-hero-copy__headline em { color: var(--da-red); } #my_home.design-a main .da-home-hero-copy > p:last-child { margin-bottom: 0; font-size: 17px; line-height: 1.85; } #my_home.design-a main .da-home-intro { position: relative; margin-bottom: 0; padding: 45px 50px 42px; text-align: center; } #my_home.design-a main .da-home-intro h3 { margin-bottom: 12px; font-size: 30px; } #my_home.design-a main .da-home-intro > p { font-size: 17px; } #my_home.design-a main .da-home-intro__image { width: min(100%,280px); margin: 24px auto 0; } #my_home.design-a main .da-home-intro__image img { width: 100%; max-height: 230px; object-fit: contain; } #my_home.design-a main .da-home-intro .mh-scroll { margin-top: 12px; } #my_home.design-a main .mh-worries__panel { max-width: 1120px; text-align: left; } #my_home.design-a main .mh-worries__panel .mh-worries__stage { flex: 0 0 285px; width: auto; margin: 0; } #my_home.design-a main .mh-worries__panel .mh-worries__stage img { width: 100%; height: 190px; max-height: none; object-fit: contain; } #my_home.design-a main .mh-worries__panel .mh-worries__lead { margin: 0 !important; } #my_home.design-a main .da-home-body > section.da-home-section { padding: 68px 0 73px; text-align: center; } #my_home.design-a main .da-home-body > section.da-home-section::before { display: none; } #my_home.design-a main .da-home-body > section.da-home-section:nth-of-type(even) { box-shadow: 0 0 0 100vmax var(--da-cream); clip-path: inset(0 -100vmax); } #my_home.design-a main .da-home-section h3, #my_home.design-a main .da-home-section .mh-section-title h3, #my_home.design-a main .da-home-section .mh-story-heading h3 { display: block; margin: 0 0 30px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 34px; line-height: 1.35; text-align: center; } #my_home.design-a main .da-home-section h3 > .txt { display: inline-block; max-width: 100%; padding: 12px 32px 14px; border-radius: 999px; background: var(--da-yellow); box-shadow: 0 5px 0 rgba(184,143,0,.12); } #my_home.design-a main .da-home-section h3 > .txt::before, #my_home.design-a main .da-home-section h3 > .txt::after { display: none; } #my_home.design-a main .da-home-section .mh-section-title { margin-bottom: 35px; } #my_home.design-a main .da-home-section .mh-section-title h3 { margin-bottom: 0; } #my_home.design-a main .da-home-section .mh-section-title > p:last-child { margin: 20px auto 0; } #my_home.design-a main .da-home-section .mh-problem h4, #my_home.design-a main .da-home-section .mh-path-card h4, #my_home.design-a main .da-home-section .mh-support-card h4 { margin-bottom: 14px; font-size: 22px; line-height: 1.45; } #my_home.design-a main .da-home-section .mh-concerns h5 { margin-bottom: 16px; padding: 0; border: 0; background: none; color: #202020; font-size: 21px; line-height: 1.4; } #my_home.design-a main .da-home-section .mh-reasons__list h4 { margin-bottom: 15px; font-size: 20px; } #my_home.design-a main .da-home-section .mh-more-questions__list-title { margin-bottom: 17px; font-size: 21px; } #my_home.design-a main .da-home-section .mh-closing h3 { text-align: left; } #my_home.design-a main .da-home-section .mh-mid-cta h3 { text-align: center; } @media screen and (max-width: 750px) { #my_home.design-a main #top_info { height: 300px; } #my_home.design-a main #top_info h2 { padding: 0 8px; font-size: clamp(29px,8vw,38px); } #my_home.design-a main #top_info h2 span { font-size: clamp(15px,4.8vw,23px); } #my_home.design-a main .da-home-hero-copy { margin-bottom: 30px; padding: 8px 15px 0; } #my_home.design-a main .da-home-hero-copy__kicker { font-size: 12px; } #my_home.design-a main .da-home-hero-copy__headline { font-size: 21px; } #my_home.design-a main .da-home-hero-copy > p:last-child { font-size: 14px; } #my_home.design-a main .da-home-intro { padding: 30px 20px 34px; } #my_home.design-a main .da-home-intro h3 { font-size: 24px; } #my_home.design-a main .da-home-intro > p { font-size: 14px; } #my_home.design-a main .da-home-intro__image { width: 200px; } #my_home.design-a main .da-home-intro__image img { max-height: 180px; } #my_home.design-a main .mh-worries__panel { display: block; } #my_home.design-a main .mh-worries__panel .mh-worries__stage { width: min(100%,240px); margin: 0 auto 16px; } #my_home.design-a main .mh-worries__panel .mh-worries__stage img { height: 170px; } #my_home.design-a main .da-home-body > section.da-home-section { padding: 45px 0 52px; } #my_home.design-a main .da-home-section h3, #my_home.design-a main .da-home-section .mh-section-title h3, #my_home.design-a main .da-home-section .mh-story-heading h3 { font-size: 25px; } #my_home.design-a main .da-home-section h3 > .txt { padding: 10px 18px 12px; border-radius: 22px; } #my_home.design-a main .da-home-section .mh-problem h4, #my_home.design-a main .da-home-section .mh-path-card h4, #my_home.design-a main .da-home-section .mh-support-card h4 { font-size: 19px; } #my_home.design-a main .da-home-section .mh-concerns h5 { font-size: 18px; } } /* Adjustments from the my-home review sheet. Keep these rules on this page. */ #my_home.design-a main #top_info::after { content: "Home"; display: block; position: absolute; left: max(18px, calc((100vw - 1280px)/2)); bottom: 12px; width: auto; height: auto; color: rgba(255,255,255,.7); background: none; font: 700 104px/1 Georgia,serif; pointer-events: none; } #my_home.design-a main .da-home-hero-copy__headline { font-size: 34px; line-height: 1.4; } #my_home.design-a main .da-home-hero-copy > p:last-child { font-size: 18px; } #my_home.design-a main .da-home-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,360px); align-items: center; column-gap: 40px; row-gap: 0; text-align: left; } #my_home.design-a main .da-home-intro::before { grid-column: 1 / -1; text-align: left; } #my_home.design-a main .da-home-intro__copy { min-width: 0; } #my_home.design-a main .da-home-intro h3 { font-size: 34px; } #my_home.design-a main .da-home-intro .mh-hero__tags, #my_home.design-a main .da-home-intro .mh-hero__actions { justify-content: flex-start; } #my_home.design-a main .da-home-intro .mh-hero__actions { margin-left: 0; } #my_home.design-a main .da-home-intro__image { grid-column: 2; grid-row: 2; width: 100%; margin: 0; } #my_home.design-a main .da-home-intro__image img { width: 100%; max-height: none; } #my_home.design-a main .da-home-intro .mh-scroll { grid-column: 1 / -1; margin-top: 18px; text-align: center; } #my_home.design-a main .mh-worries__panel .mh-worries__stage { flex: 0 0 350px; } #my_home.design-a main .mh-worries__panel .mh-worries__stage img { height: auto; max-height: none; } #my_home.design-a main .mh-search-story__intro { grid-template-columns: minmax(0,48%) minmax(0,1fr); gap: 32px; padding: 26px; border-radius: 22px; background: #eff9ff; } #my_home.design-a main .mh-portal-person { min-width: 0; padding: 20px; border-radius: 20px; background: #fff; } #my_home.design-a main .mh-portal-person img { width: 100%; max-height: none; } #my_home.design-a main .mh-search-story__copy { padding: 0; border: 0; background: transparent; } #my_home.design-a main .mh-search-story__label { width: fit-content; max-width: 100%; margin: 0 auto 18px !important; padding: 10px 18px; border: 1px solid #ec8f4a; border-radius: 16px; background: #fff; color: #b85b1a; text-align: center; } #my_home.design-a main .mh-portals { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } #my_home.design-a main .mh-portals li { padding: 12px; border: 1px solid #dce7ed; border-radius: 12px; background: #fff; text-align: center; } #my_home.design-a main .mh-problem__explain-wrap { max-width: 1030px; padding: 25px; border: 1px solid #e9cc6b; border-radius: 17px; background: #fff; } #my_home.design-a main .mh-problem__person { flex-basis: 210px; width: 210px; } #my_home.design-a main .mh-concerns { max-width: 1030px; padding: 26px; border-top: 5px solid #ffd100; border-radius: 14px; background: #fff; box-shadow: 0 7px 20px rgba(14,34,63,.08); } #my_home.design-a main .mh-concerns ul { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 30px; } #my_home.design-a main .mh-concerns li { padding-left: 26px; } #my_home.design-a main .mh-concerns li::before { content: "✓"; top: .3em; width: 17px; height: 17px; border: 0; border-radius: 50%; background: #ffd100; color: #fff; font-size: 12px; font-weight: 800; line-height: 17px; text-align: center; } @media screen and (max-width: 750px) { #my_home.design-a main #top_info::after { left: 12px; bottom: 8px; font-size: 62px; } #my_home.design-a main .da-home-hero-copy__headline { font-size: 25px; } #my_home.design-a main .da-home-hero-copy > p:last-child { font-size: 15px; } #my_home.design-a main .da-home-intro { grid-template-columns: minmax(0,1fr); gap: 16px; text-align: center; } #my_home.design-a main .da-home-intro::before { grid-column: 1; text-align: center; } #my_home.design-a main .da-home-intro h3 { font-size: 25px; } #my_home.design-a main .da-home-intro .mh-hero__tags, #my_home.design-a main .da-home-intro .mh-hero__actions { justify-content: center; } #my_home.design-a main .da-home-intro__image { grid-column: 1; grid-row: auto; width: min(100%,310px); margin: 0 auto; } #my_home.design-a main .da-home-intro__image img { max-height: none; } #my_home.design-a main .da-home-intro .mh-scroll { grid-column: 1; } #my_home.design-a main .mh-worries__panel .mh-worries__stage { width: min(100%,320px); } #my_home.design-a main .mh-worries__panel .mh-worries__stage img { height: auto; max-height: none; } #my_home.design-a main .mh-search-story__intro { grid-template-columns: minmax(0,1fr); gap: 20px; padding: 18px; } #my_home.design-a main .mh-portal-person { width: 100%; padding: 12px; } #my_home.design-a main .mh-search-story__label { font-size: 17px !important; } #my_home.design-a main .mh-portals li { padding: 9px 5px; font-size: 13px; } #my_home.design-a main .mh-problem__explain-wrap { padding: 18px; } #my_home.design-a main .mh-problem__person { width: 170px; } #my_home.design-a main .mh-concerns { padding: 20px; } #my_home.design-a main .mh-concerns ul { grid-template-columns: minmax(0,1fr); gap: 9px; } } /* Second review: retain the page copy and apply the requested layout refinements. */ #my_home.design-a main .mh-solution__diagram { width: min(100%,1180px); } #my_home.design-a main .mh-solution__diagram-images { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; } #my_home.design-a main .mh-solution__diagram-images img { width: 100%; max-height: none; height: auto; border: 1px solid #eadba5; border-radius: 10px; object-fit: contain; } #my_home.design-a main .mh-reasons__list p { font-size: 17px !important; line-height: 1.85 !important; } #my_home.design-a main .mh-reasons__list > li { padding: 28px !important; } #my_home.design-a main .mh-two-paths .mh-section-title h3 > .txt, #my_home.design-a main .mh-more-questions .mh-section-title h3 > .txt, #my_home.design-a main .mh-support .mh-section-title h3 > .txt { white-space: nowrap; } #my_home.design-a main .mh-two-paths .mh-section-title h3 { font-size: 29px; } #my_home.design-a main .mh-more-questions .mh-section-title h3 { font-size: 30px; } #my_home.design-a main .mh-support .mh-section-title h3 { font-size: 32px; } #my_home.design-a main .mh-contact-guide > .mh-container { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 44px; } #my_home.design-a main .mh-contact-guide__copy { grid-column: 1; grid-row: 1; text-align: left; } #my_home.design-a main .mh-contact-guide__art { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: center; gap: 15px; } #my_home.design-a main .mh-contact-guide__visual { flex: none; width: min(100%,330px); margin: 0 auto; } #my_home.design-a main .mh-contact-guide__visual img { width: 100%; } #my_home.design-a main .mh-contact-guide__bubble { width: min(100%,440px); margin: 0 auto; text-align: left; } #my_home.design-a main .mh-contact-guide .mh-line-examples p { text-align: left; } #my_home.design-a main .mh-contact-guide__copy > .mh-line-button { width: min(100%,600px); background: #00a65a; box-shadow: 0 5px 0 rgba(0,116,62,.15); } #my_home.design-a main .mh-contact-guide__copy > .mh-line-button span { display: inline-grid; place-items: center; min-width: 50px; height: 34px; margin-right: 14px; border-radius: 10px; background: #fff; color: #00a65a; } #my_home.design-a main .mh-mid-cta__buttons .mh-button--accent { background: #ff1f22; } #my_home.design-a main .mh-mid-cta__buttons .mh-button--line { background: #00a65a; box-shadow: 0 5px 0 rgba(0,116,62,.15); } #my_home.design-a main .mh-more-questions__layout { grid-template-columns: minmax(0,370px) minmax(0,1fr); gap: 40px; } #my_home.design-a main .mh-more-questions__image img { width: 100%; max-height: none; } #my_home.design-a main .mh-more-questions__list-wrap { text-align: left; } #my_home.design-a main .mh-more-questions__list-wrap li { text-align: left; } #my_home.design-a main .mh-support__grid { grid-template-columns: minmax(0,1fr); max-width: 1180px; margin: 0 auto; gap: 20px; } #my_home.design-a main .mh-support-card { grid-template-columns: minmax(0,340px) minmax(0,1fr); align-items: center; gap: 30px; } #my_home.design-a main .mh-support-card__image img { width: 100%; height: auto; aspect-ratio: 1440 / 785; object-fit: contain; } #my_home.design-a main .mh-support-card__body { text-align: left; } #my_home.design-a main .mh-faq summary { text-align: left; } #my_home.design-a main .mh-future__copy > p:last-child { max-width: none; font-size: 26px; font-weight: 900; white-space: nowrap; } #my_home.design-a main .mh-future__copy > p:last-child em { color: inherit; font-weight: 900; } #my_home.design-a main .mh-closing__layout { max-width: 1120px; gap: 45px; padding: 44px; border-radius: 24px; background: #fff4c5; } #my_home.design-a main .mh-closing__photo { flex: 0 0 300px; } #my_home.design-a main .mh-closing__copy { min-width: 0; flex: 1; text-align: center; } #my_home.design-a main .mh-closing h3 { width: 100%; margin-bottom: 22px; font-size: 27px; text-align: center; } #my_home.design-a main .mh-closing h3 > .txt { display: block; padding: 0; border-radius: 0; background: none; box-shadow: none; } #my_home.design-a main .mh-closing__name { text-align: center; } @media screen and (max-width: 750px) { #my_home.design-a main .mh-solution__diagram-images { grid-template-columns: minmax(0,1fr); gap: 12px; } #my_home.design-a main .mh-solution__diagram-images img[aria-hidden="true"] { display: none; } #my_home.design-a main .mh-reasons__list p { font-size: 14px !important; } #my_home.design-a main .mh-two-paths .mh-section-title h3 > .txt, #my_home.design-a main .mh-more-questions .mh-section-title h3 > .txt, #my_home.design-a main .mh-support .mh-section-title h3 > .txt { white-space: normal; } #my_home.design-a main .mh-two-paths .mh-section-title h3, #my_home.design-a main .mh-more-questions .mh-section-title h3, #my_home.design-a main .mh-support .mh-section-title h3 { font-size: 25px; } #my_home.design-a main .mh-contact-guide > .mh-container { grid-template-columns: minmax(0,1fr); gap: 25px; } #my_home.design-a main .mh-contact-guide__copy, #my_home.design-a main .mh-contact-guide__art { grid-column: 1; grid-row: auto; } #my_home.design-a main .mh-contact-guide__copy { order: 1; text-align: center; } #my_home.design-a main .mh-contact-guide__art { order: 2; } #my_home.design-a main .mh-contact-guide.da-home-section h3 { font-size: 22px; } #my_home.design-a main .mh-contact-guide__visual { width: min(100%,280px); } #my_home.design-a main .mh-contact-guide__copy > .mh-line-button { width: 100%; } #my_home.design-a main .mh-mid-cta__buttons .mh-button { width: 100%; } #my_home.design-a main .mh-more-questions__layout { grid-template-columns: minmax(0,1fr); gap: 20px; } #my_home.design-a main .mh-more-questions__image { width: min(100%,320px); margin: 0 auto; } #my_home.design-a main .mh-support-card { grid-template-columns: minmax(0,1fr); } #my_home.design-a main .mh-support-card__image { width: min(100%,300px); max-width: 300px; margin: 0 auto; } #my_home.design-a main .mh-support-card__image img { height: auto; } #my_home.design-a main .mh-future__copy > p:last-child { font-size: 20px; white-space: normal; } #my_home.design-a main .mh-closing__layout { padding: 26px 18px; } #my_home.design-a main .mh-closing__photo { width: min(100%,220px); margin: 0 auto 20px; } #my_home.design-a main .mh-closing h3 { font-size: 21px; } } @media screen and (max-width: 360px) { #my_home.design-a main .mh-contact-guide.da-home-section h3 { font-size: 18px; } } /* P12 opening revision: illustrated purchase guide, contact bars and a two-row contents menu. */ #my_home.design-a main .mh-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; } #my_home.design-a main .mh-p12-opening { padding: 36px 0 66px; text-align: center; } #my_home.design-a main .da-my-home-content .mh-p12-opening__visual { width: min(100% - 30px, 1000px); aspect-ratio: 10 / 9; margin: 0 auto; overflow: hidden; } #my_home.design-a main .mh-p12-opening__visual img { display: block; width: 100%; height: auto; } #my_home.design-a main .mh-p12-contact { width: min(100% - 40px, 610px); margin: 24px auto 0; border: 2px solid #202020; background: #fff; font-weight: 800; line-height: 1.35; } #my_home.design-a main .mh-p12-contact a { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 54px; padding: 10px 18px; color: #fff; text-decoration: none; } #my_home.design-a main .mh-p12-contact__purchase { background: #ed1014; font-size: 19px; } #my_home.design-a main .mh-p12-contact__line { border-top: 2px solid #202020; background: #19bf33; font-size: 19px; } #my_home.design-a main .mh-p12-contact__phone { flex-direction: column; gap: 1px !important; min-height: 64px !important; border-top: 2px solid #202020; color: #111 !important; background: #fff; } #my_home.design-a main .mh-p12-contact__phone strong { font-size: 18px; } #my_home.design-a main .mh-p12-contact__phone span { font-size: 13px; } #my_home.design-a main .mh-p12-toc { width: min(100%, 980px); margin: 48px auto 0; padding: 30px 34px 34px; border: 1px solid #ecd16f; border-radius: 18px; background: #fffaf0; } #my_home.design-a main .mh-p12-toc h3 { margin: 0 0 22px; color: #112c51; font-size: 28px; font-weight: 900; line-height: 1.3; letter-spacing: .08em; } #my_home.design-a main .mh-p12-toc h3::after { content: ""; display: block; width: 44px; height: 4px; margin: 11px auto 0; border-radius: 999px; background: #ffd100; } #my_home.design-a main .mh-p12-toc ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; padding: 0; list-style: none; } #my_home.design-a main .mh-p12-toc li { min-width: 0; } #my_home.design-a main .mh-p12-toc a { display: flex; align-items: center; min-height: 58px; padding: 10px 13px; border: 1px solid #ead99c; border-radius: 10px; color: #112c51; background: #fff; font-size: 15px; font-weight: 800; line-height: 1.45; text-align: left; text-decoration: none; } #my_home.design-a main .mh-p12-toc a span { flex: 0 0 auto; margin-right: 9px; color: #e78a20; font: 900 12px/1 Arial, sans-serif; } #my_home.design-a main .mh-p12-toc a::after { content: "↓"; flex: 0 0 auto; margin-left: auto; color: #d39d00; } @media screen and (max-width: 750px) { #my_home.design-a main .mh-p12-opening { padding: 18px 0 46px; } #my_home.design-a main .mh-p12-opening__visual { width: min(100% - 30px, 1000px); } #my_home.design-a main .mh-p12-contact { width: min(100% - 16px, 560px); margin-top: 16px; } #my_home.design-a main .mh-p12-contact a { gap: 7px; min-height: 47px; padding: 8px 7px; } #my_home.design-a main .mh-p12-contact__purchase, #my_home.design-a main .mh-p12-contact__line { font-size: clamp(12px, 3.5vw, 16px); } #my_home.design-a main .mh-p12-contact__phone { min-height: 58px !important; } #my_home.design-a main .mh-p12-contact__phone strong { font-size: 16px; } #my_home.design-a main .mh-p12-contact__phone span { font-size: 11px; } #my_home.design-a main .mh-p12-toc { width: calc(100% - 8px); margin-top: 34px; padding: 24px 14px; } #my_home.design-a main .mh-p12-toc h3 { font-size: 24px; } #my_home.design-a main .mh-p12-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } #my_home.design-a main .mh-p12-toc a { min-height: 60px; padding: 9px; font-size: 13px; } #my_home.design-a main .mh-p12-toc a span { margin-right: 6px; font-size: 10px; } } /* Third review: make the introductory heading and image proportions match the income-property page. */ #my_home.design-a main .da-my-home-content .da-home-hero-copy__headline { font-size: clamp(38px, 4.5vw, 57.6px); line-height: 1.3; } #my_home.design-a main .da-home-hero-copy__headline em { white-space: nowrap; } #my_home.design-a main .da-my-home-content .da-home-intro { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 36px; padding: 38px 48px; } #my_home.design-a main .da-my-home-content .da-home-intro__image { width: 100%; max-width: none; } @media screen and (max-width: 750px) { #my_home.design-a main .da-my-home-content .da-home-hero-copy__headline { font-size: clamp(28px, 7.2vw, 34px); line-height: 1.4; } #my_home.design-a main .da-my-home-content .da-home-intro { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 30px 20px; } #my_home.design-a main .da-my-home-content .da-home-intro__image { width: min(100%, 440px); margin: 0 auto; } } /* P12 seventh revision: stack the questions and add the mortgage support section. */ #my_home.design-a main .mh-more-questions__layout--p12 { display: block; width: min(100%, 1000px); margin: 0 auto; text-align: center; } #my_home.design-a main .da-my-home-content .mh-more-questions__layout--p12 > .mh-more-questions__list-title { display: block; width: min(92%, 720px); margin: 0 auto 30px; padding: 13px 24px 15px; border-radius: 999px; background: #ffd100; box-shadow: 0 5px 0 rgba(184,143,0,.15); color: #202020; font-size: 22px; font-weight: 900; line-height: 1.35; text-align: center; } #my_home.design-a main .mh-more-questions__layout--p12 > .mh-more-questions__list-wrap { width: 100%; margin: 0 auto; text-align: left; } #my_home.design-a main .mh-more-questions__layout--p12 .mh-question-list { gap: 10px; } #my_home.design-a main .da-my-home-content .mh-more-questions__layout--p12 > .mh-more-questions__image { width: min(100%, 1000px); margin: 36px auto 0; } #my_home.design-a main .mh-more-questions__layout--p12 > .mh-more-questions__image img { width: 100%; max-height: none; margin: 0 auto; object-fit: contain; } #my_home.design-a main .mh-loan-support > .mh-container { width: min(100% - 30px, 1000px); margin-right: auto; margin-left: auto; } #my_home.design-a main .mh-loan-support__headline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 36%); align-items: center; width: 100%; margin: 0 auto 38px; overflow: hidden; border: 1px solid #e9cc6b; border-radius: 17px; background: #fff; box-shadow: 0 5px 0 rgba(44,35,7,.05); } #my_home.design-a main .da-my-home-content .mh-loan-support__headline > h3 { display: block; margin: 0; padding: 28px 32px; color: #173764; font-size: clamp(27px, 3vw, 39px); font-weight: 900; line-height: 1.35; text-align: center; } #my_home.design-a main .mh-loan-support__headline > img { width: 100%; height: 100%; max-height: 300px; object-fit: cover; object-position: 50% 33%; } #my_home.design-a main .mh-loan-support__copy { width: 100%; margin: 0 auto 38px; padding: 34px 38px; border: 1px solid #e9cc6b; border-radius: 17px; background: #fff; box-shadow: 0 5px 0 rgba(44,35,7,.05); text-align: left; } #my_home.design-a main .mh-loan-support__copy p { font-weight: 600; line-height: 1.75; } #my_home.design-a main .mh-loan-support__visual { display: block; width: min(100%, 1000px); margin: 0 auto; padding: 0; border: 0; background: transparent; cursor: zoom-in; } #my_home.design-a main .mh-loan-support__visual img { display: block; width: 100%; height: auto; margin: 0 auto; } @media screen and (max-width: 750px) { #my_home.design-a main .da-my-home-content .mh-more-questions__layout--p12 > .mh-more-questions__list-title { width: calc(100% - 12px); margin-bottom: 22px; padding: 12px 10px 14px; border-radius: 22px; font-size: 19px; } #my_home.design-a main .mh-more-questions__layout--p12 > .mh-more-questions__list-wrap { padding: 22px !important; } #my_home.design-a main .da-my-home-content .mh-more-questions__layout--p12 > .mh-more-questions__image { width: min(100%, 520px); margin-top: 26px; } #my_home.design-a main .mh-loan-support > .mh-container { width: min(100% - 30px, 520px); } #my_home.design-a main .mh-loan-support__headline { grid-template-columns: minmax(0, 1fr); margin-bottom: 28px; } #my_home.design-a main .da-my-home-content .mh-loan-support__headline > h3 { padding: 24px 18px; font-size: 24px; } #my_home.design-a main .mh-loan-support__headline > img { width: min(100%, 290px); height: auto; max-height: none; margin: 0 auto; } #my_home.design-a main .mh-loan-support__copy { margin-bottom: 28px; padding: 22px; } #my_home.design-a main .mh-loan-support__copy p { font-size: 15px; } #my_home.design-a main .mh-loan-support__visual { width: min(100%, 520px); } } /* P12 sixth revision: rebuild the free-call guide and the following heading. */ #my_home.design-a main .mh-phone-guide { width: 100%; max-width: none; margin: 62px auto 0; padding: 0; border-top: 0; text-align: center; } #my_home.design-a main .mh-phone-guide > .mh-container { width: min(100% - 30px, 1160px); margin: 0 auto; } #my_home.design-a main .da-my-home-content .mh-phone-guide__title { display: block; width: min(92%, 720px); margin: 0 auto 32px; padding: 14px 24px 16px; border-radius: 999px; background: #ffd100; box-shadow: 0 5px 0 rgba(184,143,0,.15); color: #15365d; font-size: clamp(22px, 2.3vw, 30px); font-weight: 900; line-height: 1.28; text-align: center; } #my_home.design-a main .mh-phone-guide__title span { display: inline-block; } #my_home.design-a main .mh-phone-guide__intro { width: min(100%, 1000px); margin: 0 auto 42px !important; padding: 28px 34px; border: 1px solid #e9cc6b; border-radius: 17px; background: #fff; box-shadow: 0 5px 0 rgba(44,35,7,.05); font-size: 20px !important; font-weight: 700; line-height: 1.55 !important; text-align: center; } #my_home.design-a main .mh-phone-guide__intro a { color: inherit; font-weight: 900; text-decoration: none; white-space: nowrap; } #my_home.design-a main .mh-phone-guide__cta { position: relative; width: min(100%, 1000px); margin: 0 auto; padding: 52px 54px 48px; overflow: hidden; background: linear-gradient(rgba(255,209,0,.9),rgba(255,209,0,.9)), url(../images/bg_cta.jpg) center / cover no-repeat; text-align: center; } #my_home.design-a main .mh-phone-guide__cta-head { position: relative; z-index: 1; } #my_home.design-a main .da-my-home-content .mh-phone-guide__cta-head > p { margin: 0 !important; color: #111; font-size: clamp(25px, 3.2vw, 43px); font-weight: 900; line-height: 1.15; text-align: center; } #my_home.design-a main .mh-phone-guide__cta-head > p strong { color: #fff; } #my_home.design-a main .mh-phone-guide__cta-head > p span { display: inline-block; } #my_home.design-a main .mh-phone-guide__cta-head > small { display: block; margin-top: 8px; color: #111; font-size: 14px; font-weight: 800; line-height: 1.4; } #my_home.design-a main .mh-phone-guide__cta-panel { position: relative; z-index: 1; width: min(100%, 820px); margin: 62px auto 0; padding: 60px 36px 0; background: #fff; } #my_home.design-a main .mh-phone-guide__purchase { position: absolute; top: 0; left: 50%; display: flex; justify-content: center; align-items: center; width: min(calc(100% - 90px), 690px); min-height: 58px; padding: 12px 24px; border: 3px solid #111; border-radius: 9px; background: #ef120e; color: #fff; font-size: 22px; font-weight: 900; line-height: 1.3; text-decoration: none; transform: translate(-50%,-50%); } #my_home.design-a main .mh-phone-guide__purchase::after { content: "無料"; position: absolute; top: -26px; right: 14%; padding: 2px 5px; border: 1px solid #111; background: #fff; color: #111; font-size: 12px; line-height: 1.2; } #my_home.design-a main .mh-phone-guide__contacts { display: flex; align-items: center; justify-content: center; gap: 22px; min-width: 0; } #my_home.design-a main .mh-phone-guide__tel { position: relative; display: block; min-width: 0; padding-left: 48px; color: #111; text-align: left; text-decoration: none; } #my_home.design-a main .mh-phone-guide__tel::before { content: ""; position: absolute; top: 4px; left: 0; width: 38px; aspect-ratio: 73 / 47; background: url(../images/ic_tel2.png) center / contain no-repeat; } #my_home.design-a main .mh-phone-guide__tel strong { display: block; font: 900 clamp(25px, 3.2vw, 42px)/1 Arial,sans-serif; white-space: nowrap; } #my_home.design-a main .mh-phone-guide__tel small { display: block; margin-top: 5px; color: #111; font-size: 12px; font-weight: 800; line-height: 1.35; } #my_home.design-a main .mh-phone-guide__line { position: relative; display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 12px 24px 12px 64px; border-radius: 999px; background: #22b440; color: #fff; font-size: 16px; font-weight: 800; line-height: 1.35; text-decoration: none; white-space: nowrap; } #my_home.design-a main .mh-phone-guide__line::before { content: ""; position: absolute; top: 50%; left: 20px; width: 34px; aspect-ratio: 70 / 67; background: url(../images/ic_line2.png) center / contain no-repeat; transform: translateY(-50%); } #my_home.design-a main .mh-phone-guide__brand { display: flex; align-items: flex-end; justify-content: center; gap: 14px; min-height: 142px; margin-top: 18px; } #my_home.design-a main .mh-phone-guide__brand img:first-child { width: min(48%, 300px); height: auto; } #my_home.design-a main .mh-phone-guide__brand img:last-child { width: 126px; height: auto; align-self: flex-end; } #my_home.design-a main .mh-more-questions__heading--p12 { width: min(100%, 1000px); margin-bottom: 34px; } #my_home.design-a main .da-my-home-content .mh-more-questions__heading--p12 > h3 { display: block; width: 100%; margin: 0 auto 24px; padding: 25px 24px 28px; border: 1px solid #e9cc6b; border-radius: 17px; background: #fff; box-shadow: 0 5px 0 rgba(44,35,7,.05); color: #173764; font-size: clamp(25px, 3vw, 38px); line-height: 1.25; text-align: center; } #my_home.design-a main .da-my-home-content .mh-more-questions__heading--p12 > p:last-child { max-width: 1000px; text-align: left; } @media screen and (max-width: 750px) { #my_home.design-a main .mh-phone-guide { margin-top: 48px; } #my_home.design-a main .mh-phone-guide > .mh-container { width: min(100% - 30px, 520px); } #my_home.design-a main .da-my-home-content .mh-phone-guide__title { width: calc(100% - 12px); margin-bottom: 22px; padding: 12px 10px 14px; border-radius: 22px; font-size: clamp(19px, 5.8vw, 24px); } #my_home.design-a main .mh-phone-guide__intro { margin-bottom: 30px !important; padding: 20px 16px; font-size: 15px !important; } #my_home.design-a main .mh-phone-guide__cta { width: 100%; padding: 34px 14px 28px; } #my_home.design-a main .da-my-home-content .mh-phone-guide__cta-head > p { font-size: clamp(23px, 7.2vw, 32px); } #my_home.design-a main .mh-phone-guide__cta-head > small { font-size: 12px; } #my_home.design-a main .mh-phone-guide__cta-panel { margin-top: 50px; padding: 48px 14px 0; } #my_home.design-a main .mh-phone-guide__purchase { width: calc(100% - 30px); min-height: 52px; padding: 10px 14px; font-size: 17px; } #my_home.design-a main .mh-phone-guide__purchase::after { top: -23px; right: 8%; } #my_home.design-a main .mh-phone-guide__contacts { flex-direction: column; gap: 14px; } #my_home.design-a main .mh-phone-guide__tel { padding-left: 39px; } #my_home.design-a main .mh-phone-guide__tel::before { width: 31px; } #my_home.design-a main .mh-phone-guide__tel strong { font-size: clamp(24px, 8.4vw, 34px); } #my_home.design-a main .mh-phone-guide__tel small { font-size: 11px; } #my_home.design-a main .mh-phone-guide__line { min-height: 54px; padding: 11px 20px 11px 58px; font-size: 14px; } #my_home.design-a main .mh-phone-guide__line::before { left: 18px; width: 32px; } #my_home.design-a main .mh-phone-guide__brand { min-height: 116px; gap: 7px; } #my_home.design-a main .mh-phone-guide__brand img:first-child { width: min(61%, 250px); } #my_home.design-a main .mh-phone-guide__brand img:last-child { width: 90px; } #my_home.design-a main .mh-more-questions__heading--p12 { width: min(100%, 520px); margin-bottom: 28px; } #my_home.design-a main .da-my-home-content .mh-more-questions__heading--p12 > h3 { margin-bottom: 20px; padding: 20px 13px 22px; font-size: clamp(21px, 6.4vw, 27px); } } /* Fourth review: keep only the yellow heading, with the illustration above the copy. */ #my_home.design-a main .da-home-body > section.mh-worries.da-home-section:nth-of-type(even) { box-shadow: none; clip-path: none; } #my_home.design-a main .mh-worries__panel { display: flex; flex-direction: column; align-items: center; gap: 24px; } #my_home.design-a main .mh-worries__panel .mh-worries__stage { flex: none; width: min(100%, 460px); margin: 0 !important; } #my_home.design-a main .mh-worries__panel .mh-worries__stage img { width: 100%; height: auto; max-height: none; } #my_home.design-a main .mh-worries__panel .da-copy { width: 100%; max-width: 900px; } #my_home.design-a main .mh-worries__panel .mh-worries__lead { max-width: none; text-align: center; } @media screen and (max-width: 750px) { #my_home.design-a main .mh-worries__panel { gap: 16px; } #my_home.design-a main .mh-worries__panel .mh-worries__stage { width: min(100%, 280px); margin: 0 auto !important; } } /* Fifth review: remove only the duplicate heading fill and the outer story border. */ #my_home.design-a main .da-my-home-content #worries > .mh-container > h3 { display: block; padding: 0; border-radius: 0; background: transparent; box-shadow: none; } #my_home.design-a main #search-story #problem.mh-problem { border: 0; } /* Sixth review: group the solution message and show the two distinct comparison panels. */ #my_home.design-a main .mh-solution__headline-grid { display: block; max-width: 1120px; text-align: center; } #my_home.design-a main .da-my-home-content .mh-solution__headline-grid > h3 { display: block; padding: 0; border-radius: 0; background: transparent; box-shadow: none; } #my_home.design-a main .mh-solution__message { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: center; gap: 34px; margin: 24px auto 0; padding: 35px; border-radius: 18px; background: #fff9ed; } #my_home.design-a main .mh-solution__message-copy { min-width: 0; } #my_home.design-a main .mh-solution__message .mh-solution__promise { margin: 0 auto 22px; font-size: 22px !important; line-height: 1.6; text-align: center; } #my_home.design-a main .mh-solution__message .mh-solution__lead { max-width: none; margin: 0 !important; font-size: 17px; text-align: left; } #my_home.design-a main .mh-solution__message .mh-solution__representative { width: 100%; max-width: 340px; max-height: none; margin: 0 auto; border-radius: 12px; } #my_home.design-a main .mh-solution__body { padding-top: 35px; } #my_home.design-a main .mh-solution__diagram-images { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } #my_home.design-a main .mh-solution__diagram-images img { height: 100%; aspect-ratio: 558 / 404; object-fit: contain; object-position: top; } @media screen and (max-width: 750px) { #my_home.design-a main .mh-solution__message { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; } #my_home.design-a main .mh-solution__message .mh-solution__promise { font-size: 17px !important; } #my_home.design-a main .mh-solution__message .mh-solution__lead { font-size: 14px; } #my_home.design-a main .mh-solution__message .mh-solution__representative { max-width: 280px; } #my_home.design-a main .mh-solution__diagram-images { grid-template-columns: minmax(0, 1fr); } #my_home.design-a main .mh-solution__diagram-images img { height: auto; aspect-ratio: auto; } } /* Seventh review: remove the separate portrait and enlarge the photo beside the message. */ #my_home.design-a main .mh-two-paths__message > img { flex: 0 0 300px; width: 300px; } #my_home.design-a main .mh-two-paths__message .mh-message__bubble, #my_home.design-a main .mh-two-paths__message .mh-message__bubble p { text-align: left; } /* Eighth review: one heading surface, paired examples, and a larger LINE screen. */ #my_home.design-a main .da-my-home-content .mh-contact-guide h3 { display: block; padding: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 30px; } #my_home.design-a main .mh-contact-guide h3 > .txt { white-space: nowrap; } #my_home.design-a main .mh-contact-guide .mh-line-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } #my_home.design-a main .da-my-home-content .mh-contact-guide .mh-line-examples p { padding: 18px !important; border: 1px solid #ecd26c; border-radius: 14px; } #my_home.design-a main .mh-contact-guide__visual { width: min(100%, 495px); } @media screen and (max-width: 750px) { #my_home.design-a main .mh-two-paths__message > img { width: min(100%, 240px); margin: 0 auto 18px; } #my_home.design-a main .da-my-home-content .mh-contact-guide h3 { font-size: 18px; } #my_home.design-a main .mh-contact-guide .mh-line-examples { grid-template-columns: minmax(0, 1fr); } #my_home.design-a main .mh-contact-guide__visual { width: min(100%, 350px); aspect-ratio: 11 / 14; overflow: hidden; } #my_home.design-a main .mh-contact-guide__visual img { width: 127.27%; max-width: none; transform: translateX(-10.71%); } } @media screen and (max-width: 360px) { #my_home.design-a main .da-my-home-content .mh-contact-guide h3 { font-size: 16px; } } /* Ninth and tenth reviews: larger support illustrations and one FAQ diagram per viewport. */ #my_home.design-a main .mh-support-card { grid-template-columns: minmax(0, min(46%, 510px)) minmax(0, 1fr); } #my_home.design-a main .mh-support-card__image img { height: auto; aspect-ratio: 1440 / 785; object-fit: contain; } @media screen and (min-width: 751px) { #my_home.design-a main #faq-q1 .mh-faq-flow-mobile { display: none; } } @media screen and (max-width: 750px) { #my_home.design-a main .mh-support-card { grid-template-columns: minmax(0, 1fr); } #my_home.design-a main .mh-support-card__image { width: 100%; max-width: 450px; } #my_home.design-a main #faq-q1 .mh-faq__image { display: none; } } /* Keep these two headline pills single-line on desktop; remove the vision pill's duplicate outer fill. */ #my_home.design-a main .da-my-home-content .mh-future__copy > h3 { display: block; padding: 0; border-radius: 0; background: transparent; box-shadow: none; } @media screen and (min-width: 751px) { #my_home.design-a main .mh-solution__headline-grid > h3 br, #my_home.design-a main .mh-future__copy > h3 br { display: none; } #my_home.design-a main .mh-solution__headline-grid > h3 > .txt, #my_home.design-a main .mh-future__copy > h3 > .txt { white-space: nowrap; } #my_home.design-a main .da-my-home-content .mh-future__copy > h3 { font-size: clamp(20px, 2.35vw, 30px); } } @media screen and (max-width: 750px) { #my_home.design-a main .da-my-home-content .mh-future__copy > h3 { font-size: clamp(18px, 5.5vw, 23px); } #my_home.design-a main .mh-future__copy > h3 > .txt { padding-inline: 12px; } } /* P12 second revision: simplify the opening story and emphasize the supplied diagrams. */ #my_home.design-a main .da-my-home-content .mh-p12-worries-visual { width: min(100%, 690px); margin: 0 auto; } #my_home.design-a main .da-my-home-content :is(#worries,#search-story,#why-imotto,#how-to-start,#support,#faq) { scroll-margin-top: 115px; } #my_home.design-a main .da-my-home-content .mh-p12-worries-visual img { display: block; width: 100%; height: auto; } #my_home.design-a main .da-my-home-content .mh-story-heading .mh-p12-search-title { margin-bottom: 28px; color: #15365d; font-size: clamp(30px, 3.1vw, 43px); letter-spacing: .04em; } #my_home.design-a main .da-my-home-content .mh-story-heading .mh-p12-search-title > .txt { padding: 0; border-radius: 0; background: transparent; box-shadow: none; } #my_home.design-a main .mh-p12-search-visual { position: relative; width: min(100%, 760px); margin: 0 auto 66px; } #my_home.design-a main .mh-p12-search-visual img { display: block; width: 100%; height: auto; } #my_home.design-a main .mh-p12-search-visual p { position: absolute; top: 14%; right: 0; width: 31%; margin: 0; padding: 18px 10px; border: 3px solid #21120d; border-radius: 48% 52% 48% 52%; background: #fff; color: #28201d; font-size: 20px; font-weight: 700; line-height: 1.45; transform: rotate(-2deg); } #my_home.design-a main .mh-p12-search-visual p::after { content: ""; position: absolute; left: -20px; bottom: 10px; width: 30px; height: 24px; border-left: 3px solid #21120d; border-bottom: 3px solid #21120d; background: #fff; transform: skew(-28deg) rotate(-10deg); } #my_home.design-a main .mh-p12-search-visual p strong { font-weight: 900; } #my_home.design-a main #search-story #problem.mh-problem { max-width: 1120px; padding: 0; background: transparent; } #my_home.design-a main #search-story #problem .mh-p12-problem-intro { margin: 0 0 28px; color: #15365d; font-size: clamp(30px, 3.1vw, 43px); font-weight: 800; letter-spacing: .04em; } #my_home.design-a main .mh-p12-problem-visual { width: min(100%, 900px); margin: 0 auto 34px; } #my_home.design-a main .mh-p12-problem-visual img { display: block; width: 100%; height: auto; } #my_home.design-a main #search-story #problem .mh-p12-problem-heading { margin: clamp(44px, 5vw, 72px) auto 30px; color: #15365d; font-size: clamp(28px, 3vw, 41px); line-height: 1.35; } #my_home.design-a main #search-story #problem .mh-problem__explain-wrap { max-width: 830px; margin: 0 auto 34px; } #my_home.design-a main #search-story #problem .mh-concerns { max-width: 930px; margin-inline: auto; padding-top: 78px; } #my_home.design-a main #search-story #problem .mh-concerns h5 { position: absolute; top: 0; left: 50%; width: min(92%, 680px); margin: 0; padding: 13px 24px 15px; border-radius: 999px; background: #ffd100; box-shadow: 0 5px 0 rgba(184,143,0,.15); color: #15365d; font-size: clamp(22px, 2.3vw, 32px); font-weight: 900; line-height: 1.25; transform: translateX(-50%); } #my_home.design-a main #search-story #problem .mh-concerns { position: relative; } @media screen and (max-width: 750px) { #my_home.design-a main .da-my-home-content .mh-p12-worries-visual { width: min(100%, 480px); } #my_home.design-a main .da-my-home-content .mh-story-heading .mh-p12-search-title { margin-bottom: 18px; font-size: clamp(22px, 7vw, 29px); } #my_home.design-a main .mh-p12-search-visual { width: min(100%, 520px); margin-bottom: 44px; } #my_home.design-a main .mh-p12-search-visual p { top: 8%; right: 0; width: 39%; padding: 10px 5px; border-width: 2px; font-size: clamp(11px, 3.2vw, 14px); } #my_home.design-a main .mh-p12-search-visual p::after { left: -12px; bottom: 5px; width: 19px; height: 15px; border-width: 0 0 2px 2px; } #my_home.design-a main #search-story #problem .mh-p12-problem-intro { margin-bottom: 20px; font-size: clamp(22px, 7vw, 29px); } #my_home.design-a main .mh-p12-problem-visual { margin-bottom: 24px; } #my_home.design-a main #search-story #problem .mh-p12-problem-heading { margin-bottom: 22px; font-size: clamp(21px, 6vw, 27px); } #my_home.design-a main #search-story #problem .mh-problem__explain-wrap { margin-bottom: 26px; } #my_home.design-a main .da-my-home-content :is(#worries,#search-story,#why-imotto,#how-to-start,#support,#faq) { scroll-margin-top: 68px; } #my_home.design-a main #search-story #problem .mh-concerns { padding-top: 22px; } #my_home.design-a main #search-story #problem .mh-concerns h5 { position: relative; top: auto; left: auto; width: calc(100% - 12px); margin: -48px auto 22px; padding: 12px 10px 14px; font-size: clamp(19px, 5.8vw, 24px); transform: none; } } /* P12 third revision: center the added story and continue with the supplied consultation visuals. */ #my_home.design-a main .da-my-home-content :is(#worries, #search-story) > .mh-container { text-align: center; } #my_home.design-a main .da-my-home-content .mh-story-heading { width: 100%; margin-inline: auto; text-align: center; } #my_home.design-a main .da-my-home-content .mh-story-heading .mh-p12-search-title { display: block; width: 100%; margin-inline: auto; text-align: center; } #my_home.design-a main .da-my-home-content #search-story #problem.mh-problem { width: min(100%, 1120px); margin-inline: auto; text-align: center; } #my_home.design-a main .da-my-home-content :is(.mh-p12-problem-intro, .mh-p12-problem-heading) { width: 100%; margin-inline: auto; text-align: center; } #my_home.design-a main .mh-p12-concerns-title { display: block; width: min(92%, 680px); margin: 0 auto 24px; padding: 13px 24px 15px; border-radius: 999px; background: #ffd100; box-shadow: 0 5px 0 rgba(184,143,0,.15); color: #15365d; font-size: clamp(22px, 2.3vw, 32px); font-weight: 900; line-height: 1.25; text-align: center; } #my_home.design-a main #search-story #problem .mh-concerns { position: static; margin-inline: auto; padding-top: 26px; } #my_home.design-a main .mh-solution__headline-grid { margin-inline: auto; } #my_home.design-a main .da-my-home-content .mh-p12-solution-question { width: min(100%, 760px); margin: 0 auto 38px; } #my_home.design-a main .mh-p12-solution-question img, #my_home.design-a main .mh-p12-solution-visual img { display: block; width: 100%; height: auto; } #my_home.design-a main .da-my-home-content .mh-p12-solution-visual { width: min(100%, 1000px); margin: 0 auto 24px; } @media screen and (max-width: 750px) { #my_home.design-a main .mh-p12-concerns-title { width: calc(100% - 12px); margin-bottom: 20px; padding: 12px 10px 14px; border-radius: 22px; font-size: clamp(19px, 5.8vw, 24px); } #my_home.design-a main #search-story #problem .mh-concerns { padding-top: 20px; } #my_home.design-a main .da-my-home-content .mh-p12-solution-question { width: min(100%, 520px); margin-bottom: 28px; } } /* P12 fourth revision: keep supplied visuals centered and continue the revised consultation flow. */ #my_home.design-a main .da-my-home-content .mh-p12-problem-visual { margin-right: auto !important; margin-left: auto !important; } #my_home.design-a main .da-my-home-content .mh-p12-problem-visual img { margin-right: auto; margin-left: auto; } #my_home.design-a main .mh-p12-inline-faq { width: 100%; margin: 52px auto 0; padding: 48px 0 58px; background: repeating-linear-gradient(-45deg, #fffdf7 0, #fffdf7 8px, #fff4c5 8px, #fff4c5 11px); text-align: center; } #my_home.design-a main .mh-p12-inline-faq > .mh-container, #my_home.design-a main .mh-p12-inline-faq .mh-faq__list { margin-right: auto; margin-left: auto; } #my_home.design-a main .mh-p12-inline-faq__title { width: 100%; margin: 0 auto 26px; text-align: center; } #my_home.design-a main .mh-p12-inline-faq__title h3 { margin-right: auto; margin-left: auto; } #my_home.design-a main .mh-p12-undecided { width: min(100%, 1080px); margin: 52px auto 0; text-align: center; } #my_home.design-a main .mh-p12-undecided > h4 { display: block; width: min(92%, 680px); margin: 0 auto 26px; padding: 13px 24px 15px; border-radius: 999px; background: #ffd100; box-shadow: 0 5px 0 rgba(184,143,0,.15); color: #15365d; font-size: clamp(22px, 2.3vw, 30px); font-weight: 900; line-height: 1.35; text-align: center; } #my_home.design-a main .mh-p12-undecided__copy { width: min(100%, 1000px); margin: 0 auto; padding: 28px 32px; border: 1px solid #e9cc6b; border-radius: 17px; background: #fff; box-shadow: 0 5px 0 rgba(44,35,7,.05); text-align: left; } #my_home.design-a main .mh-p12-undecided__copy p:last-child { margin-top: 12px; padding: 12px 16px; border-radius: 10px; background: #fff7d4; } #my_home.design-a main .da-my-home-content .mh-p12-undecided__visual { width: min(100%, 960px); margin: 34px auto 0 !important; } #my_home.design-a main .mh-p12-undecided__visual img { display: block; width: 100%; height: auto; margin: 0 auto; } @media screen and (max-width: 750px) { #my_home.design-a main .mh-p12-inline-faq { margin-top: 34px; padding: 38px 0 42px; } #my_home.design-a main .mh-p12-inline-faq__title { margin-bottom: 20px; } #my_home.design-a main .mh-p12-undecided { margin-top: 36px; } #my_home.design-a main .mh-p12-undecided > h4 { width: calc(100% - 12px); margin-bottom: 20px; padding: 12px 10px 14px; border-radius: 22px; font-size: clamp(19px, 5.8vw, 24px); } #my_home.design-a main .mh-p12-undecided__copy { padding: 20px; } #my_home.design-a main .da-my-home-content .mh-p12-undecided__visual { width: min(100%, 520px); margin-top: 24px !important; } } /* P12 fifth revision: rebuild the LINE consultation section from the supplied layout. */ #my_home.design-a main .mh-contact-guide > .mh-container.mh-p12-line-contact { display: block; width: min(100% - 30px, 1160px); margin-right: auto; margin-left: auto; text-align: center; } #my_home.design-a main .mh-p12-line-contact__copy { width: min(100%, 1040px); margin: 0 auto; text-align: center; } #my_home.design-a main .da-my-home-content .mh-contact-guide .mh-p12-line-contact__copy > h3 { display: block; width: min(92%, 720px); margin: 0 auto 32px; padding: 14px 24px 16px; border-radius: 999px; background: #ffd100; box-shadow: 0 5px 0 rgba(184,143,0,.15); color: #15365d; font-size: clamp(22px, 2.3vw, 30px); font-weight: 900; line-height: 1.35; text-align: center; } #my_home.design-a main .mh-p12-line-contact__copy > h3 > .txt { white-space: normal; } #my_home.design-a main .mh-p12-line-contact__intro { width: min(100%, 1000px); margin: 0 auto 34px; padding: 30px 34px; border: 1px solid #e9cc6b; border-radius: 17px; background: #fff; box-shadow: 0 5px 0 rgba(44,35,7,.05); text-align: left; } #my_home.design-a main .mh-p12-line-contact__checklist { width: min(100%, 1000px); margin: 0 auto 28px; text-align: left; } #my_home.design-a main .mh-p12-line-contact__checklist h4 { margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid #dc9130; color: #dc7d19; font-size: 22px; } #my_home.design-a main .mh-p12-line-contact__checklist ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 38px; width: 100%; margin: 0; padding: 0; list-style: none; } #my_home.design-a main .mh-p12-line-contact__checklist li { position: relative; padding-left: 24px; } #my_home.design-a main .mh-p12-line-contact__checklist li::before { content: "✓"; position: absolute; top: .35em; left: 0; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #ffd100; color: #fff; font-size: 11px; font-weight: 900; line-height: 1; } #my_home.design-a main .mh-p12-line-contact__copy > .mh-line-button { display: flex; width: min(100%, 1000px); margin: 0 auto; background: #00a65a; box-shadow: 0 5px 0 rgba(0,116,62,.15); } #my_home.design-a main .mh-p12-line-contact__copy > .mh-line-button span { display: inline-grid; place-items: center; min-width: 50px; height: 34px; margin-right: 14px; border-radius: 10px; background: #fff; color: #00a65a; } #my_home.design-a main .mh-p12-line-contact__visual { display: grid; grid-template-columns: minmax(0, 580px) minmax(0, 360px); align-items: center; justify-content: center; gap: 28px; width: min(100%, 1000px); margin: 52px auto 0; text-align: center; } #my_home.design-a main .da-my-home-content .mh-p12-line-contact__visual figure { width: min(100%, 580px); margin: 0 auto !important; } #my_home.design-a main .mh-p12-line-contact__visual img { display: block; width: 100%; height: auto; margin: 0 auto; } #my_home.design-a main .mh-p12-line-contact__visual > p { position: relative; margin: 0; padding: 24px; border: 3px solid #15365d; border-radius: 26px; background: #fff; font-size: 18px; font-weight: 700; line-height: 1.75; text-align: left; } #my_home.design-a main .mh-p12-line-contact__visual > p::before { content: ""; position: absolute; top: 48%; left: -24px; width: 38px; height: 30px; border-left: 3px solid #15365d; border-bottom: 3px solid #15365d; background: #fff; transform: skewX(-38deg) rotate(32deg); } @media screen and (max-width: 750px) { #my_home.design-a main .mh-contact-guide > .mh-container.mh-p12-line-contact { width: min(100% - 30px, 520px); } #my_home.design-a main .da-my-home-content .mh-contact-guide .mh-p12-line-contact__copy > h3 { width: calc(100% - 12px); margin-bottom: 22px; padding: 12px 10px 14px; border-radius: 22px; font-size: clamp(19px, 5.8vw, 24px); } #my_home.design-a main .mh-p12-line-contact__intro { margin-bottom: 28px; padding: 20px; } #my_home.design-a main .mh-p12-line-contact__checklist { margin-bottom: 24px; } #my_home.design-a main .mh-p12-line-contact__checklist h4 { font-size: 19px; } #my_home.design-a main .mh-p12-line-contact__checklist ul { grid-template-columns: minmax(0, 1fr); gap: 9px; } #my_home.design-a main .mh-p12-line-contact__visual { grid-template-columns: minmax(0, 1fr); gap: 22px; width: min(100%, 520px); margin-top: 36px; } #my_home.design-a main .da-my-home-content .mh-p12-line-contact__visual figure { width: min(100%, 360px); } #my_home.design-a main .mh-p12-line-contact__visual > p { width: min(100%, 400px); margin: 0 auto; padding: 20px; border-width: 2px; font-size: 15px; } #my_home.design-a main .mh-p12-line-contact__visual > p::before { top: -17px; left: 50%; width: 26px; height: 22px; border-width: 2px; transform: translateX(-50%) skewX(-25deg) rotate(118deg); } } /* Keep the free-call title on the shared yellow heading surface. */ #my_home.design-a main .da-my-home-content .mh-contact-guide .mh-phone-guide__title { display: block; width: min(92%, 720px); margin: 0 auto 32px; padding: 14px 24px 16px; border-radius: 999px; background: #ffd100; box-shadow: 0 5px 0 rgba(184,143,0,.15); color: #15365d; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.28; text-align: center; } #my_home.design-a main .da-my-home-content .mh-more-questions__heading--p12 > h3 > .txt { padding: 0; border-radius: 0; background: transparent; box-shadow: none; } @media screen and (max-width: 750px) { #my_home.design-a main .da-my-home-content .mh-contact-guide .mh-phone-guide__title { width: calc(100% - 12px); margin-bottom: 22px; padding: 12px 10px 14px; border-radius: 22px; font-size: clamp(19px, 5.8vw, 24px); } #my_home.design-a main .da-my-home-content .mh-more-questions__heading--p12 > h3 { font-size: 22px; } } /* P12 eighth revision: present the four purchase supports as full-width stories. */ #my_home.design-a main .mh-support--p12 > .mh-container { width: min(100% - 30px, 1000px); margin-right: auto; margin-left: auto; } #my_home.design-a main .mh-support--p12__heading { width: 100%; margin: 0 auto 44px; padding: 34px 30px 38px; border: 1px solid #e9cc6b; border-radius: 17px; background: #fff; box-shadow: 0 5px 0 rgba(44,35,7,.05); text-align: center; } #my_home.design-a main .da-my-home-content .mh-support--p12__heading > h3 { display: block; margin: 0; color: #173764; font-size: clamp(28px, 3vw, 40px); font-weight: 900; line-height: 1.3; text-align: center; } #my_home.design-a main .mh-support--p12__stack { display: grid; gap: 58px; width: 100%; margin: 0 auto; } #my_home.design-a main .mh-support-panel { width: 100%; margin: 0 auto; text-align: center; } #my_home.design-a main .da-my-home-content .mh-support-panel > h4 { display: block; width: min(92%, 760px); margin: 0 auto 30px; padding: 13px 24px 15px; border-radius: 999px; background: #ffd100; box-shadow: 0 5px 0 rgba(184,143,0,.15); color: #202020; font-size: 23px; font-weight: 900; line-height: 1.35; text-align: center; } #my_home.design-a main .mh-support-panel__image { display: block; width: 100%; margin: 0 auto; padding: 0; border: 0; background: transparent; cursor: zoom-in; } #my_home.design-a main .mh-support-panel__image img { display: block; width: 100%; height: auto; margin: 0 auto; } #my_home.design-a main .mh-support-panel__body { width: 100%; margin: 28px auto 0; padding: 30px 34px; border: 1px solid #e9cc6b; border-radius: 17px; background: #fff; box-shadow: 0 5px 0 rgba(44,35,7,.05); text-align: left; } #my_home.design-a main .mh-support-panel__body p { font-weight: 600; line-height: 1.75; } @media screen and (max-width: 750px) { #my_home.design-a main .mh-support--p12 > .mh-container { width: min(100% - 30px, 520px); } #my_home.design-a main .mh-support--p12__heading { margin-bottom: 34px; padding: 26px 18px 29px; } #my_home.design-a main .da-my-home-content .mh-support--p12__heading > h3 { font-size: 24px; } #my_home.design-a main .mh-support--p12__stack { gap: 46px; } #my_home.design-a main .da-my-home-content .mh-support-panel > h4 { width: calc(100% - 12px); margin-bottom: 22px; padding: 12px 10px 14px; border-radius: 22px; font-size: 19px; } #my_home.design-a main .mh-support-panel__body { margin-top: 22px; padding: 22px; } #my_home.design-a main .mh-support-panel__body p { font-size: 15px; } } /* Updated 12-item table of contents anchors. */ #my_home.design-a main .da-my-home-content :is(#problem,#all-properties,#why-imotto,#how-to-start,#more-questions,#loan-support,#support,#future,#president,#faq,#line-contact,#purchase-contact) { scroll-margin-top: 115px; } @media screen and (max-width: 750px) { #my_home.design-a main .mh-p12-toc ol { grid-template-columns: minmax(0, 1fr); } #my_home.design-a main .mh-p12-toc a { min-height: 54px; padding: 10px 12px; font-size: 14px; } #my_home.design-a main .da-my-home-content :is(#problem,#all-properties,#why-imotto,#how-to-start,#more-questions,#loan-support,#support,#future,#president,#faq,#line-contact,#purchase-contact) { scroll-margin-top: 68px; } } /* P12 ninth revision: calm vision layout and clean LINE speech balloon. */ #my_home.design-a main .mh-future { padding-block: 84px; } #my_home.design-a main .mh-future__copy { width: min(100%, 700px); margin: 0 auto 46px; text-align: center; } #my_home.design-a main .da-my-home-content .mh-future__copy > h3 { display: block; margin: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; color: #173764; font-size: clamp(27px, 2.35vw, 34px); font-weight: 900; line-height: 1.35; } #my_home.design-a main .mh-future__copy > h3 > .txt { display: block; padding: 0; border-radius: 0; background: transparent; box-shadow: none; white-space: normal; } #my_home.design-a main .mh-future__copy > h3 br { display: initial; } #my_home.design-a main .mh-future__copy > h3 strong { color: #173764; font-weight: 900; } #my_home.design-a main .mh-future__gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; width: min(100%, 760px); margin: 0 auto; } #my_home.design-a main .mh-future__gallery img { display: block; width: 100%; height: auto; aspect-ratio: auto; margin: 0 auto; border: 0; border-radius: 0; object-fit: contain; } #my_home.design-a main .mh-p12-line-contact__visual > p { font-size: 16px; line-height: 1.75; } #my_home.design-a main .mh-p12-line-contact__visual > p::before, #my_home.design-a main .mh-p12-line-contact__visual > p::after { content: ""; position: absolute; top: 50%; left: auto; width: 0; height: 0; border-style: solid; transform: translateY(-50%); } #my_home.design-a main .mh-p12-line-contact__visual > p::before { right: 100%; border-width: 16px 21px 16px 0; border-color: transparent #15365d transparent transparent; } #my_home.design-a main .mh-p12-line-contact__visual > p::after { right: calc(100% - 4px); border-width: 12px 17px 12px 0; border-color: transparent #fff transparent transparent; } @media screen and (max-width: 750px) { #my_home.design-a main .mh-future { padding-block: 58px; } #my_home.design-a main .mh-future__copy { width: min(100%, 350px); margin-bottom: 32px; } #my_home.design-a main .da-my-home-content .mh-future__copy > h3 { font-size: clamp(23px, 6.2vw, 28px); line-height: 1.4; } #my_home.design-a main .mh-future__gallery { gap: 18px; width: 100%; } #my_home.design-a main .mh-p12-line-contact__visual > p { font-size: 14px; line-height: 1.75; } #my_home.design-a main .mh-p12-line-contact__visual > p::before, #my_home.design-a main .mh-p12-line-contact__visual > p::after { top: auto; left: 50%; right: auto; transform: translateX(-50%); } #my_home.design-a main .mh-p12-line-contact__visual > p::before { bottom: 100%; border-width: 0 15px 18px; border-color: transparent transparent #15365d; } #my_home.design-a main .mh-p12-line-contact__visual > p::after { bottom: calc(100% - 4px); border-width: 0 11px 14px; border-color: transparent transparent #fff; } } /* P12 tenth revision: FAQ jump, LINE cleanup, and future story panels. */ #my_home.design-a main .mh-p12-solution-question--consultation { width: min(100%, 900px); margin-bottom: 42px; } #my_home.design-a main .mh-all-properties-faq-link { margin-top: 38px; text-align: center; } #my_home.design-a main .mh-president-link { margin-top: 38px; text-align: center; } #my_home.design-a main .mh-faq-jump-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 18px; width: min(100%, 780px); min-height: 76px; padding: 17px 78px 18px 34px; border: 3px solid #f0c400; border-radius: 999px; background: linear-gradient(135deg, #fffef6, #fff6c4); box-shadow: 0 7px 0 rgba(184,143,0,.15), 0 12px 28px rgba(112,82,0,.09); color: #173764; font-size: clamp(19px, 2vw, 25px); font-weight: 900; line-height: 1.4; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } #my_home.design-a main .mh-faq-jump-button:hover { transform: translateY(-3px); box-shadow: 0 10px 0 rgba(184,143,0,.14), 0 15px 30px rgba(112,82,0,.1); } #my_home.design-a main .mh-faq-jump-button b { position: absolute; top: 50%; right: 22px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #f28a22; color: #fff; font-size: 23px; line-height: 1; transform: translateY(-50%); } #my_home.design-a main #faq-q1 { scroll-margin-top: 110px; } #my_home.design-a main .mh-p12-line-contact__copy > h3 > .txt { display: inline; padding: 0; border-radius: 0; background: transparent; box-shadow: none; } #my_home.design-a main .mh-line-contact-title__line { display: block; } #my_home.design-a main .mh-p12-line-contact__checklist li { font-size: 16px; font-weight: 400; line-height: 1.75; } #my_home.design-a main .mh-future-story-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; width: min(100%, 1000px); margin: 42px auto 0; } #my_home.design-a main .mh-future-story-gallery img { display: block; width: 100%; height: auto; margin: 0 auto; } @media screen and (max-width: 750px) { #my_home.design-a main .mh-p12-solution-question--consultation { width: min(100%, 520px); margin-bottom: 26px; } #my_home.design-a main .mh-all-properties-faq-link { margin-top: 28px; } #my_home.design-a main .mh-president-link { margin-top: 28px; } #my_home.design-a main .mh-faq-jump-button { min-height: 68px; padding: 13px 58px 14px 18px; border-width: 2px; border-radius: 20px; font-size: clamp(16px, 4.5vw, 19px); } #my_home.design-a main .mh-faq-jump-button b { right: 14px; width: 34px; height: 34px; font-size: 19px; } #my_home.design-a main #faq-q1 { scroll-margin-top: 74px; } #my_home.design-a main .mh-p12-line-contact__checklist li { font-size: 14px; line-height: 1.75; } #my_home.design-a main .mh-future-story-gallery { gap: 18px; margin-top: 24px; } } /* P12 eleventh revision: supplied search and LINE visuals. */ #my_home.design-a main .mh-p12-line-contact__visual--replacement { display: block; width: min(100%, 1000px); margin: 52px auto 0; } #my_home.design-a main .mh-p12-line-contact__visual--replacement picture, #my_home.design-a main .mh-p12-line-contact__visual--replacement img { display: block; width: 100%; height: auto; margin: 0 auto; } @media screen and (max-width: 750px) { #my_home.design-a main .mh-p12-line-contact__visual--replacement { width: 100%; margin-top: 36px; } }