, so they are not siblings and this has to reach through the wrapper. */ main:has(.legal) + .site-footer { margin-top: 0; } .legal__prose ul, .legal__prose ol { padding-left: 40px; } .legal__prose li { list-style: revert; } /* Links in the prose are underlined by a `` in the copy itself, so the anchor must not add a second rule under them. They are also a shade darker than the text around them rather than the accent blue. */ .legal__prose a { color: #30353b; text-decoration: none; } .legal__prose a:hover { color: var(--c-accent); } /* ----------------------------------------------------------- page banner */ /* * The plate the interior pages open with: 1296 wide — the same frame the app * section and the closing CTA use, which is wider than the 1290 container and * so sets its own width rather than living inside one — 400 tall, 20px corners, * with the heading centred on both axes over the photograph. */ .page-banner { position: relative; display: grid; place-content: center; place-items: center; max-width: 1296px; height: 400px; margin: 33px auto 0; padding-inline: 23px; border-radius: 20px; background: var(--banner-image) 0 0 / cover no-repeat; isolation: isolate; overflow: hidden; } /* The wash over the photograph. Always drawn, and transparent unless a page names a colour — the alternative, keying the rule off whether the custom property is present, needs an attribute selector that matches on the literal text of the style attribute and breaks the moment the markup is reformatted. `position: relative` above is what this is measured against; without it the wash escapes to the page and tints everything. */ .page-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--banner-overlay, transparent); } .page-banner__title { font: 600 40px/56px var(--font); letter-spacing: normal; text-align: center; color: #fff; } /* ------------------------------------------------------- gradient banner */ /* * MarketBuilder's other interior-page opener: full-bleed (not the 1296 inset * plate), white fading to the brand's periwinkle from 39% down to the bottom * edge — a photograph's replacement, not a wash over one. */ .gradient-banner { height: 400px; margin-top: 33px; padding-block: 105px 0; background: linear-gradient(#fff 39%, #93a5de 100%); } .gradient-banner__heading { font: 600 65px/91px var(--font); letter-spacing: normal; text-align: center; color: var(--c-ink); } /* A full sentence, hand-broken over two lines, rather than a one-word page title — Advertise With Us's opener. */ .gradient-banner--small .gradient-banner__heading { padding-top: 10px; font-size: 40px; line-height: 56px; } .gradient-banner__lead { margin-top: 20px; max-width: 1270px; margin-inline: auto; text-align: center; color: #6b6b6b; font-size: 17px; line-height: 29.75px; } /* ---------------------------------------------------- picture + blocks */ /* * Two 615 columns 20px apart, inset 20px inside the container so the pair spans * 1250 rather than the container's full 1290. The columns are independent: the * picture is the taller of the two and is what sets the section's height. */ .media-blocks { padding-block: 70px 60px; } .media-blocks__grid { display: grid; grid-template-columns: 615px 615px; column-gap: 20px; padding-inline: calc(var(--gutter) + 20px); align-items: start; } .media-blocks--flip .media-blocks__image { order: 2; } .media-blocks__image { width: 100%; height: auto; } /* A flat 5px everywhere — between one block and the next, and between a block's heading and its own paragraph. */ .media-blocks__block + .media-blocks__block { margin-top: 5px; } .media-blocks__block h3 { margin-bottom: 5px; font: 600 22px/28.6px var(--font); letter-spacing: normal; color: var(--c-ink); } /* Except the last, where the live page closes the gap entirely and the paragraph sits straight under its heading. Not a rounding artefact — it is 5px against the 5px every other block gets, and leaving it in walks the closing paragraph out of place. */ .media-blocks__block:last-child h3 { margin-bottom: 0; } /* -------------------------------------------------------------------- faq */ /* * "Got Questions?" — eyebrow, heading, and a centred 903px column of * collapsible questions. Two decorative shapes bleed off the right edge * behind the list; they carry no meaning, only measured loosely. */ .faq { position: relative; padding-block: 80px 125px; overflow: hidden; } /* MB opens with a gradient hero, not a photo, and closes straight into the footer with no call-to-action band — both gaps differ from SQ's. */ [data-brand="mb"] .faq { padding-block: 130px 64px; } .faq__inner { position: relative; z-index: 1; } .faq__eyebrow { margin-bottom: 8px; font: 500 16px/28px var(--font); text-align: center; color: var(--c-accent-deep); } /* MB's eyebrow is coral, not the shared accent blue, and leaves 28px to the heading below rather than SQ's 8 — a gap absent when the heading is one line, real once it's two, as MB's "Got Questions? We've Got Answers!" is. */ [data-brand="mb"] .faq__eyebrow { margin-bottom: 28px; color: #ff5f55; } [data-brand="mb"] .faq__heading { margin-bottom: 41px; } .faq__heading { max-width: 645px; margin-inline: auto; margin-bottom: 21px; font: 600 40px/56px var(--font); letter-spacing: normal; text-align: center; color: var(--c-ink); } .faq__list { max-width: 903px; margin-inline: auto; } .faq__item { margin-bottom: 10px; background: transparent; border-radius: 15px; } /* Bootstrap's `::marker` triangle, dropped in favour of the `+`/`-` below. */ .faq__question { list-style: none; } .faq__question::-webkit-details-marker { display: none; } .faq__question::marker { content: ""; } .faq__question { position: relative; padding: 15px 44px 15px 20px; font: 600 16px/24px var(--font); color: var(--c-ink); background: #fff; border-radius: 15px; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.23); cursor: pointer; } /* Closed: a plus, black, boxed 20x20 in the top-right corner. */ .faq__question::after { content: "+"; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; font-size: 20px; line-height: 20px; text-align: center; color: #000; } /* Open: the same button turns the section's blue and the question goes white; the indicator becomes a minus, thinned to a single stroke rather than the closed glyph's full-height box. */ .faq__item[open] .faq__question { background: #1962f2; color: #fff; } .faq__item[open] .faq__question::after { content: "-"; top: 45%; height: 6px; line-height: 0; color: #fff; } .faq__answer { padding: 30px; color: #6b6b6b; } /* The one MB answer that reads as a numbered list, not a line: intro paragraph, then a gap, then the list — no gap between its own items. */ .faq__answer p:has(+ ol) { margin-bottom: 20px; } .faq__answer ol { list-style-position: inside; padding-left: 0; } .faq__answer li { margin: 0; } /* MB's accordion corners are 4px, not SQ's 15. */ [data-brand="mb"] .faq__question, [data-brand="mb"] .faq__item { border-radius: 4px; } .faq__decor { position: absolute; z-index: 0; pointer-events: none; } .faq__decor--ellipse { top: -30px; right: -80px; width: 555px; height: auto; } .faq__decor--vector { top: 190px; right: 80px; width: 190px; height: auto; } /* ------------------------------------------------------------------ contact */ .contact-form { padding-block: 120px 80px; } .contact-form__inner { max-width: 727px; margin-inline: auto; } .contact-form__heading { margin-bottom: 15px; font: 600 45px/63px var(--font); letter-spacing: normal; text-align: center; color: var(--c-ink); } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 35px; } .contact-form__row input, .contact-form__form textarea { width: 100%; padding: 6px 16px; font: 400 16px/28px var(--font); color: #1f2124; background: #f2f4f8; border: 1px solid #f3eeee; border-radius: 4px; } .contact-form__row input { height: 47px; } .contact-form__form textarea { display: block; height: 104px; margin-bottom: 35px; resize: vertical; font-size: 16px; line-height: 22.4px; } .contact-form__submit { padding: 15px 25px; font: 400 15px/15px var(--font); color: #fff; background: var(--c-accent-deep); border: 0; border-radius: 3px; cursor: pointer; } /* ----------------------------------------------------------- contact split */ /* * MarketBuilder's Contact Us: a light-grey plate, two columns — heading, * lead and four icon rows on the left (565px), the form on the right * (535px), 70px between them. */ .contact-split { padding-block: 80px 80px; } /* This page's footer sits 80px below the plate, not the site-wide default 21 — set explicitly rather than left to the footer's own margin. */ main:has(.contact-split) + .site-footer { margin-top: 0; } .contact-split__plate { display: grid; grid-template-columns: 565px 535px; gap: 70px; max-width: 1270px; margin-inline: auto; padding: 80px 50px 125px; background: #f8f8f8; } .contact-split__heading { margin-top: 10px; margin-bottom: 20px; font: 600 40px/56px var(--font); letter-spacing: normal; color: var(--c-ink); } .contact-split__lead { margin-bottom: 40px; } .contact-split__rows { display: grid; gap: 20px; } .contact-split__row { display: grid; grid-template-columns: 30px 1fr; gap: 15px; align-items: start; } .contact-split__icon svg { width: 30px; height: 30px; color: var(--c-accent-deep); } .contact-split__row strong { display: block; font: 600 20px/26px var(--font); color: var(--c-ink); } .contact-split__row span span { color: #6b6b6b; } .contact-split__form { margin-top: 25px; } .contact-split__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; } .contact-split__form label { display: block; margin-bottom: 10px; font: 400 16px/28px var(--font); color: var(--c-ink); } .contact-split__form input, .contact-split__form textarea { display: block; width: 100%; padding: 1px 2px 1px 20px; font: 400 16px/28px var(--font); background: #fff; border: 1px solid #cfcfcf; border-radius: 4px; } .contact-split__form input { height: 52px; } .contact-split__form textarea { height: 112px; padding-top: 20px; margin-bottom: 38px; resize: vertical; } .contact-split__submit { display: block; width: 100%; padding: 14px 44px; font: 400 16px/28px var(--font); color: #fff; background: #1962f2; border: 0; border-radius: 4px; cursor: pointer; } /* -------------------------------------------------------------- about story */ /* * MB About Us: a 625-wide photo on the left, six headed paragraphs on the * right (595 wide, 50 between them). The text column runs to 767px against * the photo's 589, so it — not the photo — sets the section's height; the * photo is simply top-aligned within that taller column, 44px below where * the first heading starts. */ .about-story { padding-block: 80px 0; } .about-story__grid { display: grid; grid-template-columns: 625px 595px; gap: 50px; } .about-story__image { width: 100%; height: auto; margin-top: 44px; } .about-story__block { margin-top: 20px; } .about-story__block:first-child { margin-top: 0; } .about-story__block h2 { font: 600 26px/36.4px var(--font); letter-spacing: normal; color: var(--c-ink); } .about-story__block p { margin-top: 0; font: 500 15px/26.25px var(--font); color: #6b6b6b; } /* ----------------------------------------------------------- image statement */ .image-statement { padding-block: 165px 30px; } /* As a bare divider (no photo, mid-page) rather than a page-closer, this needs far less top air than the 165px the photo variant carries. */ .image-statement--divider { padding-block: 70px 0; } .image-statement--divider .image-statement__lead { margin-bottom: 0; } main:has(.image-statement) + .site-footer { margin-top: 0; } .image-statement__image { width: 100%; max-width: 1270px; height: auto; } .image-statement__text { margin-top: 35px; max-width: 1130px; margin-inline: auto; text-align: center; color: #6b6b6b; } /* -------------------------------------------------------------- pricing hero */ /* * MB Pricing's own gradient opener: same fill as gradient-banner, but the * heading is a full sentence (40px, not 65) and the section's height comes * from its content — lead, four marked points and a pill button — rather * than a fixed 400px. */ .pricing-hero { margin-top: 33px; padding-block: 10px 10px; background: linear-gradient(#fff 39%, #93a5de 100%); } .pricing-hero__heading { font: 600 40px/56px var(--font); letter-spacing: normal; text-align: center; color: var(--c-ink); } .pricing-hero__lead { margin-top: 20px; max-width: 1270px; margin-inline: auto; text-align: center; color: #6b6b6b; font-size: 17px; line-height: 29.75px; } .pricing-hero__points { margin-top: 40px; text-align: center; font-size: 17px; line-height: 28px; color: #000; } .pricing-hero__cta { display: table; margin: 20px auto 0; padding: 15px 30px; font: 500 15px/15px var(--font); color: #fff; background: #3852cc; border-radius: 30px; } .pricing-hero__cta:hover { text-decoration: none; } /* ------------------------------------------------------------- pricing tiers */ .pricing-tiers { padding-block: 42px 170px; } .pricing-tiers__heading { margin-bottom: 90px; font: 600 40px/56px var(--font); letter-spacing: normal; text-align: center; color: var(--c-ink); } .pricing-tiers__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 87px; justify-content: center; max-width: 1200px; margin-inline: auto; } .pricing-tiers__card { padding: 30px 20px; text-align: center; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 10px; } .pricing-tiers__name { font: 500 20px/28px var(--font); color: #000; } .pricing-tiers__icon { margin-top: 0; } .pricing-tiers__desc { margin-top: 20px; font: 500 14px/21px var(--font); color: #6b6b6b; } .pricing-tiers__credits { margin-top: 15px; font: 700 16px/28px var(--font); color: #000; } /* -------------------------------------------------------------- feature split */ /* * A picture beside a heading, a lead and plain bullets (no icon, no * sub-heading per point) — media-list.php's layout without its per-point * icon structure. MB Pricing's "Boost Your Win Rate!" puts the copy column * 102px lower than the picture's own top; both sides still close together * at the bottom, since the 527px picture is what sets the section's height. */ .feature-split__grid { display: grid; grid-template-columns: 559px 575px; gap: 80px; } .feature-split--flip .feature-split__image { order: 2; } .feature-split__image { width: 100%; height: auto; } .feature-split__copy { margin-top: 102px; } .feature-split__copy h2 { font: 600 40px/56px var(--font); letter-spacing: normal; color: var(--c-ink); } .feature-split__copy p { margin-top: 20px; color: #6b6b6b; } .feature-split__copy ul { margin-top: 20px; display: grid; } .feature-split__copy li { line-height: 28px; } /* -------------------------------------------------------------- process steps */ .process-steps { padding-block: 70px 58px; } .process-steps__heading { font: 600 40px/56px var(--font); letter-spacing: normal; text-align: center; color: var(--c-ink); } .process-steps__grid { margin-top: 60px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; justify-content: center; max-width: 1290px; margin-inline: auto; } .process-steps__step { text-align: center; } .process-steps__step h3 { margin-top: 15px; font: 600 22px/28.6px var(--font); letter-spacing: normal; color: var(--c-ink); } .image-statement__heading { font: 600 40px/56px var(--font); letter-spacing: normal; text-align: center; color: var(--c-ink); } .image-statement__lead { margin-top: 10px; margin-bottom: 60px; text-align: center; color: #6b6b6b; } /* -------------------------------------------------------------- feature cards */ .feature-cards { padding-block: 20px 0; } .feature-cards__grid { display: grid; grid-template-columns: 615px 615px; gap: 40px; justify-content: center; } .feature-cards__card { padding: 49px; text-align: center; background: #efefef; border-radius: 20px; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15); } .feature-cards__card h3 { margin-top: 25px; font: 600 22px/28.6px var(--font); letter-spacing: normal; color: var(--c-ink); } .feature-cards__card p { margin-top: 7px; color: #6b6b6b; } /* -------------------------------------------------------------- benefit cards */ .benefit-cards { padding-block: 20px 30px; } .benefit-cards__heading { margin-bottom: 33px; font: 600 40px/56px var(--font); letter-spacing: normal; text-align: center; color: var(--c-ink); } .benefit-cards__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .benefit-cards__card { padding: 40px 35px; background: #3852cc; border-radius: 0 0 20px 20px; box-shadow: 0 15px 30px rgba(56, 82, 204, 0.35); } .benefit-cards__card h3 { margin-top: 15px; font: 600 18px/23px var(--font); color: #fff; } .benefit-cards__card p { margin-top: 3px; font: 500 14px/24.5px var(--font); color: #fff; } /* ------------------------------------------------------------------ text cta */ .text-cta { padding-block: 0 60px; text-align: center; } .text-cta__heading { font: 600 40px/56px var(--font); letter-spacing: normal; color: var(--c-ink); } .text-cta__lead { margin-top: 20px; color: #6b6b6b; } .text-cta__btn { display: table; margin: 20px auto 0; padding: 12px 30px; font: 500 15px/15px var(--font); color: #fff; background: #3852cc; border-radius: 30px; } .text-cta__btn:hover { text-decoration: none; } /* -------------------------------------------------------------- checklist split */ .checklist-split { padding-block: 20px 0; } .checklist-split__grid { display: grid; grid-template-columns: 625px 625px; gap: 40px; align-items: center; } .checklist-split--flip .checklist-split__image { order: 2; } .checklist-split__image { width: 100%; height: auto; } .checklist-split__copy h2 { margin-bottom: 20px; font: 600 40px/56px var(--font); letter-spacing: normal; color: var(--c-ink); } .checklist-split__copy ul { display: grid; } .checklist-split__copy li { position: relative; padding-left: 26px; line-height: 28px; color: #000; } .checklist-split__copy li::before { content: ""; position: absolute; left: 0; top: 10px; width: 14px; height: 8px; border: 2px solid var(--c-accent-deep); border-top: 0; border-right: 0; transform: rotate(-45deg); } /* ---------------------------------------------------------------- info cards */ .info-cards { padding-block: 90px 0; } .info-cards__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .info-cards__card { flex: 1 1 380px; max-width: 410px; padding: 30px; text-align: center; background: #eee; } .info-cards__card h2 { font: 600 24px/33.6px var(--font); letter-spacing: normal; color: var(--c-ink); } .info-cards__card p { margin-top: 15px; color: #6b6b6b; } /* -------------------------------------------------------------- pricing table */ .pricing-table { padding-block: 90px 90px; } .pricing-table__heading { margin-bottom: 40px; font: 600 40px/56px var(--font); letter-spacing: normal; text-align: center; color: var(--c-ink); } .pricing-table__scroll { overflow-x: auto; } .pricing-table table { width: 100%; max-width: 1052px; margin-inline: auto; border-collapse: collapse; } .pricing-table th, .pricing-table td { padding: 12px 14px; font: 500 15px/28px var(--font); color: #333; text-align: center; border: 1px solid #e5e7eb; } .pricing-table tr:first-child th { font-weight: 700; background: #eaf2ff; } .pricing-table tr:first-child th:first-child { background: transparent; border: 0; } .pricing-table tr th:first-child { font-weight: 700; text-align: left; background: #fafafa; } .pricing-table__row--accent th, .pricing-table__row--accent td { color: #b45309; font-weight: 600; } .pricing-table__contact { margin-top: 40px; text-align: center; color: #333; } .pricing-table__contact a { color: var(--c-accent-deep); text-decoration: underline; } /* The clone's testimonial block sits here — a quote, an avatar, a name and title, and an "About Us" link. Every element in it measures 0x0 on the live page, so nothing paints; only its wrapper section's own space is real. Reproduced as a bare spacer rather than built, so the footer lands where the clone's does without inventing content nobody sees. */ /* 285, not the full 306: the footer's own default 21px top margin (every other page leaves it, and this page never overrides it) makes up the rest. */ .contact-form__spacer { height: 285px; } /* -------------------------------------------------------------- login card */ /* * Support Portal's only content: a 500px card, centred where a photo banner * would otherwise open the page. 26px padding top/inline; the bottom runs to * 71 rather than 26, which is what puts the card's own bottom edge on 508 and * the footer — carrying its own default 21px on top — on 578. */ .login-card-section { padding-block: 33px 49px; } .login-card { max-width: 500px; margin-inline: auto; padding: 26px 26px 71px; background: #f2f4f8; border-radius: 20px; } .login-card label { display: block; margin-bottom: 10px; font: 500 14px/28px var(--font); color: #000; } .login-card input[type="text"], .login-card input[type="password"] { display: block; width: 100%; margin-bottom: 15px; padding: 10px; font: 400 14px/28px var(--font); } .login-card__remember { margin-bottom: 15px; font: 400 16px/28px var(--font); } .login-card__remember label { display: inline; margin: 0; font: inherit; } .login-card__submit { display: block; width: 100%; padding: 15px; font: 400 14px/28px var(--font); color: #fff; background: #0275ff; border: 0; border-radius: 5px; cursor: pointer; } /* -------------------------------------------------------------- unsubscribe */ /* * "Do You Really Want To Unsubscribe?" — the only state that could be * measured against the clone; see unsubscribe-confirm.php for why the * confirmed state below it is a reasonable read rather than a pixel match. */ .unsub { padding-block: 20px 79px; } .unsub__heading { margin-bottom: 0; font: 600 20px/30px var(--font); letter-spacing: normal; color: var(--c-ink); } .unsub__lead { margin-bottom: 36px; color: #6b6b6b; } .unsub__actions { display: flex; gap: 30px; } .unsub__btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; font: 500 15px/15px var(--font); color: #fff; background: #22b14b; border-radius: 4px; } .unsub__btn:hover { text-decoration: none; } .unsub__done-heading { font: 600 40px/56px var(--font); letter-spacing: normal; color: var(--c-ink); } .unsub__done-message { margin-top: 15px; font: 500 16px/28px var(--font); color: #6b6b6b; } .unsub__done-image { margin-top: 30px; max-width: 300px; height: auto; } /* ---------------------------------------------------------- support tabs */ .support-tabs { padding-block: 58px 49px; } .support-tabs__bar { display: flex; max-width: 500px; margin: 0 auto 57px; } .support-tabs__tab { padding: 14px 44px; font: 400 16px/28px var(--font); color: #000; background: #efefef; border: 1px solid #ddd; cursor: pointer; } .support-tabs__tab[aria-selected="true"] { color: #fff; background: #0275ff; border-color: #0275ff; } .support-form { max-width: 500px; margin-inline: auto; } .support-form label { display: block; margin-bottom: 5px; font: 500 14px/28px var(--font); color: #000; } /* The live field carries a second line under the label — a note populated by the same lookup the Login tab needs, and just as unavailable here. Its 47px gap to the input is kept anyway; every other field's is 20. */ .support-form .support-form__order-label { margin-bottom: 47px; } .support-form input, .support-form textarea { display: block; width: 100%; margin-bottom: 20px; padding: 11px 15px; font: 400 16px/16px var(--font); color: #606266; background: #fff; border: 1px solid #dadbdd; border-radius: 7px; } .support-form textarea { height: 90px; resize: vertical; } .support-form__submit { padding: 8px 20px; font: 400 16px/28px var(--font); color: #fff; background: #1a7efb; border: 0; border-radius: 7px; cursor: pointer; } /* ------------------------------------------------------------------ intro */ .intro { padding-block: 90px 41px; } /* Two measured columns inside the 1290 container: the left one starts 80px in and runs 630, the right is 531 hard against the container's right edge. */ .intro__grid { display: grid; grid-template-columns: 630px 531px; gap: 49px; /* The 80px inset is measured from the container's content edge, so it has to be added to the gutter rather than replace it. */ padding-left: calc(var(--gutter) + 80px); align-items: start; } /* Unitless line-height (62.4/48 = 1.3 exactly, so this is pixel-identical to the old fixed value at desktop) so the breakpoints below, which only override font-size, don't leave a desktop-sized line-height stranded on a much smaller mobile font — see the callout/app/benefits headings for the same fix. */ .intro__lead h2 { font: 700 48px/1.3 var(--font); letter-spacing: -1.9px; color: var(--c-ink-strong); } /* Same accent rule as the hero: an underline on the closing words. */ .intro__lead h2 em { font-style: normal; padding-bottom: 2px; border-bottom: 3px solid #3d6aff; } .intro__lead p { margin-block: 20px 40px; } .intro__features { display: grid; gap: 62px; margin: 0; padding: 0; } /* * A small mark sits beside a large heading, with the blurb below spanning the * full column — not an icon tile beside a small title. The mark keeps its own * intrinsic size: the two are 47x48 and 38x38 and neither is square. */ .feature h3 { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 10px; font: 600 40px/52px var(--font); letter-spacing: -1.5px; } /* The mark carries space below it that sets the row's height (taller than the heading alone), which is what positions the blurb — and the two marks need different amounts: the first (47x48) sits 15px above its blurb, the second (38x38) only 9px, matched against the live site's rendered gap. */ .feature h3 img { margin-bottom: 15px; } .feature:nth-child(2) h3 img { margin-bottom: 9px; } /* No width here on purpose: the mark's size comes from the width/height on the tag, which differ per mark (47x48 and 38x38). A CSS width would override the attribute and snap them both to the file's intrinsic 63px. */ .feature h3 img { flex: 0 0 auto; } .feature p { margin: 0; } /* -------------------------------------------------- media + marked list */ /* * A 625 picture beside a 575 column, both inset 10px inside the container with * a 70px gutter between them. */ .media-list { padding-block: 80px 0; } .media-list__grid { display: grid; grid-template-columns: 625px 575px; column-gap: 70px; padding-inline: calc(var(--gutter) + 10px); align-items: start; } /* The same block is used with the picture on the other side further down. */ .media-list--flip .media-list__image { order: 2; } .media-list__image { width: 100%; height: auto; } /* The heading is Poppins but the lead under it is not — MarketBuilder mixes the two faces within a single block, so neither can be set on a wrapper. Every `--font-alt` below names its own element for that reason, and falls back to `--font` so SupplyQuote, which uses no Poppins at all, is unaffected. */ .media-list__copy h2 { font: 600 46px/64.4px var(--font-alt, var(--font)); letter-spacing: normal; color: var(--c-ink); } .media-list__lead { margin-top: 20px; } .media-list__points { display: grid; gap: 37px; margin: 40px 0 0; padding: 0; list-style: none; } .media-list__points li { display: grid; grid-template-columns: 56px 1fr; align-items: start; } /* No width on the mark: the sizes come from the tag and are not all the same. The text sits 3px below it, not the other way round. */ .media-list__points li > div { margin-top: 3px; } .media-list__points h3 { font: 600 17px/22.1px var(--font-alt, var(--font)); letter-spacing: normal; color: var(--c-ink); } .media-list__points p { font-family: var(--font-alt, var(--font)); font-size: 14px; line-height: 24.5px; } /* ------------------------------------------------------ prose + picture */ /* Two equal 625 columns 20px apart, inset 10px inside the container. */ .prose-media { padding-block: 120px 40px; } .prose-media__grid { display: grid; grid-template-columns: 625px 625px; column-gap: 20px; padding-inline: calc(var(--gutter) + 10px); align-items: start; } .prose-media__image { width: 100%; height: auto; } .prose-media__copy h2 { font: 600 40px/56px var(--font-alt, var(--font)); letter-spacing: normal; color: var(--c-ink); } .prose-media__copy p { margin-top: 20px; } .prose-media__copy .btn { margin-top: 40px; } /* ------------------------------------------------------- dark spotlight */ /* Full-bleed navy band: 625 of copy beside a 595 video, 60px apart. */ .spotlight { padding-block: 70px; color: #fff; background: #0a0f2d; } .spotlight__grid { display: grid; grid-template-columns: 625px 595px; column-gap: 60px; padding-inline: calc(var(--gutter) + 10px); align-items: start; } .spotlight__label { display: inline-block; margin-top: 20px; padding: 12px 24px; font: 500 15px/15px var(--font-alt, var(--font)); text-align: center; background: #1e244f; border-radius: 3px; } .spotlight h2 { margin-top: 47px; font: 700 35px/45.5px var(--font); letter-spacing: normal; color: #fff; } /* 20px above the prose and 20 below the copy column, which is what makes the band 649 tall rather than 609. The prose block had a third 20 under it too, standing in for the gap between the paragraphs before that gap was found; now that the gap is real, the padding would be counted twice. */ .spotlight__prose { margin-top: 20px; } .spotlight__copy { padding-bottom: 20px; } /* 20px between the paragraphs, not the base rule's 16. An earlier reading of this said they ran together with no gap at all; that came from measuring the wrapper, which is the only element with a box here — the live page's second paragraph is a bare run of text, so the gap belongs to the first one's margin-bottom and never showed up as a box of its own. */ .spotlight__prose p { color: #fff; } .spotlight__prose p + p { margin-top: 20px; } .spotlight__media { margin-top: 87px; } .spotlight__media video { display: block; width: 100%; aspect-ratio: 595 / 335; object-fit: cover; background: #000; } /* ------------------------------------------------------------ grey panel */ .panel-section { padding-block: 110px 0; } /* The slab is 1270 — 10px inside the container on each side. */ .panel-section .container { padding-inline: calc(var(--gutter) + 10px); } /* A very round grey slab — 70px corners — holding centred copy. */ .panel { padding: 40px 0; text-align: center; background: #eee; border-radius: 70px; } .panel__eyebrow { font: 600 28px/39.2px var(--font-alt, var(--font)); letter-spacing: normal; color: var(--c-ink); } .panel__heading { margin-top: 20px; font: 600 40px/56px var(--font-alt, var(--font)); letter-spacing: normal; color: var(--c-ink); } .panel__lead { margin-top: 20px; } .panel .btn { margin-top: 40px; } /* ------------------------------------------------------------ pill cards */ .pill-cards { padding-block: 33px 0; } /* Two 615 cards a row, 40px apart, inset 10px inside the container. Scoped under .pill-cards so it outweighs the base `ul[role=list]` reset, which would otherwise strip the padding back to zero. */ .pill-cards .pill-cards__grid { display: grid; grid-template-columns: 615px 615px; gap: 30px 40px; /* margin-inline stays auto — a plain `margin: 0` here would override the container's centring and pin the grid to the left edge. */ margin-block: 0; padding-inline: calc(var(--gutter) + 10px); list-style: none; } .pill-card { display: grid; grid-template-columns: auto 1fr; column-gap: 23px; align-items: center; padding: 20px; background: #ececec; border-radius: 80px; } /* An odd last card runs wider and sits under the pair above — but not on their centre line. On the live page it is its own section: a 753 column centred in the viewport with the card inset 20px inside it, which lands the card 10px right of where centring it in the grid would. The 20px margin reproduces that offset, because centring what is left after it splits the difference. The section also carries 4px more air above it than the row gap gives. */ .pill-card--wide { grid-column: 1 / -1; justify-self: center; width: 733px; margin-top: 4px; margin-left: 20px; } .pill-card img { flex: 0 0 auto; } .pill-card h3 { font: 600 17px/22.1px var(--font-alt, var(--font)); letter-spacing: normal; color: var(--c-ink); } .pill-card p { font-family: var(--font-alt, var(--font)); font-size: 13px; line-height: 22.75px; } /* --------------------------------------------------------------- cta bar */ /* The space below belongs to this section rather than to the footer: the live page leaves 130px between the bar and the footer, and the footer's own 21px is right for SupplyQuote's pages. */ /* 141 above the slab, not 145: the live page opens this section 81px below the cards and then pads 50 and 10, which puts the slab on 3632. */ .cta-bar-section { padding-block: 141px 109px; } .cta-bar-section .container { padding-inline: calc(var(--gutter) + 10px); } /* A 1270-wide blue slab, heading left and button hard right. */ .cta-bar { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 50px; color: #fff; background: #3852cc; border-radius: 50px; } /* 10px all round, which is what makes the slab 232 tall rather than 212. */ .cta-bar h2 { margin: 10px; font: 600 40px/56px var(--font-alt, var(--font)); letter-spacing: normal; color: #fff; } /* White button with dark type — the inverse of the page button. It carries a 1px border, invisible against its own white fill but 2px of box. */ .cta-bar__btn { flex: 0 0 auto; margin: 10px; color: #0e0e0e; background: #fff; border: 1px solid #fff; border-radius: 20px; } .cta-bar__btn:hover { background: var(--c-surface-alt); color: #0e0e0e; } /* ------------------------------------------------------------------ video */ /* No padding: on the live site the video fills its section edge to edge, and its 16:9 box alone sets the section height. */ .video-section { padding-block: 0; } .video-section .media { border-radius: 30px; overflow: hidden; } /* The file's intrinsic ratio is not exactly 16:9; pin it so the section keeps the height it has on the live site. `cover`, not the default `contain`, because that pinned ratio is the whole point: the still is 1556x835 (1.864) in a 1290x726 box (1.777), so `contain` letterboxes it to 1290x692 and centres it 17px down, while the live page — which paints it as a `cover` background behind the player, not as a poster — fills the box at 1353x726 and crops 31px off each side. That 34px of height is the entire 887px band the diff reports here. */ .video-section video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; } /* ---------------------------------------------------------------- callout */ .callout { padding-block: 30px; } /* * Badge, then heading, then the copy and its button — left to right. The * columns are measured: a 181px badge inset 140px, a 236px heading column and * a 407px text column that stops 50px short of the container's right edge. */ .callout__grid { display: grid; /* The two gaps are not equal — 196 then 80 — so they are tracks of their own rather than a shared column-gap. */ grid-template-columns: 181px 196px 236px 80px 407px; padding-inline: calc(var(--gutter) + 140px) calc(var(--gutter) + 50px); align-items: start; } .callout__badge { grid-column: 1; } .callout__head { grid-column: 3; } .callout__body { grid-column: 5; } .callout__title { margin-top: 17px; font: 600 53px/1.4 var(--font); letter-spacing: -2.3px; color: var(--c-ink-strong); } .callout__title em { font-style: normal; padding-bottom: 2px; border-bottom: 3px solid #3d6aff; } .callout__body { padding-top: 23px; } .callout__body p { margin-bottom: 10px; } .callout__badge { width: 181px; height: auto; } /* -------------------------------------------------------------------- app */ /* * A rounded card inset from the page, not a full-bleed band: 1296 wide, so 72 * either side at 1440. The page background shows above and below it. */ .app { max-width: 1296px; margin: 150px auto 0; padding-block: 42px 49px; color: #fff; border-radius: 25px; /* Anchored top-left, not centred — the artwork in the plate is off-centre and centring it shifts the whole picture. */ background: var(--app-image) 0 0 / cover no-repeat; } /* Inside the card the gutter is its own 43px, not the page container's. */ .app .container { max-width: none; padding-inline: 43px; } .app__grid { display: grid; grid-template-columns: 610px 559px; gap: 20px; align-items: start; } /* The artwork rises out of the top of the card. It is pulled up rather than given room, so it adds nothing to the card's height. */ .app__art { align-self: start; margin-top: -162px; } /* margin:0 is load-bearing — .app h2 below would otherwise give the eyebrow the heading's 20px top margin and push the whole card down. */ .app h2.app__eyebrow { margin: 0; font: 600 20px/28px var(--font); letter-spacing: normal; color: #fff; } .app h2 { margin-block: 20px 0; font: 600 53px/1.4 var(--font); letter-spacing: -2.3px; color: #fff; } .app h2 span { display: block; } .app__copy > p { margin-top: 21px; color: #fff; } /* * Button, QR and store badges share one row on the live page, and the button * sits well clear of the other two rather than being evenly spaced with them. */ .app__actions { display: flex; align-items: flex-start; gap: 20px; margin-top: 10px; } /* flex:none matters — the row is wider than its column, so the button would otherwise shrink and wrap its label onto a second line. */ .app__actions > .btn { flex: 0 0 auto; margin-top: 10px; margin-right: 112px; } .app__qr { flex: 0 0 auto; width: 144px; height: 144px; border-radius: 0; } /* The row runs wider than its column on the live page; letting the badges shrink to fit would make them 200px instead of 219. */ .app__badges { display: grid; flex: 0 0 auto; gap: 0; } .app__badges img { width: 219px; height: auto; } .app__art img { margin-inline: auto; width: min(559px, 100%); height: auto; } /* --------------------------------------------------------------- benefits */ .benefits { padding-block: 81px 90px; } /* Same 80px inset as the intro: a 481 copy column, then the pair of card columns, which are 285 and 305 — not equal. */ .benefits__grid { display: grid; grid-template-columns: 481px 609px; gap: 40px; padding-inline: calc(var(--gutter) + 80px); align-items: start; } .benefits__lead h2 { font: 600 46px/1.4 var(--font); letter-spacing: -2.3px; color: var(--c-ink-strong); } .benefits__lead h2 em { font-style: normal; padding-bottom: 2px; border-bottom: 3px solid #3d6aff; } .benefits__lead p { margin-block: 30px 50px; font-size: 17px; line-height: 29.75px; } /* fill, not cover: the live page squeezes the photo into the box rather than cropping it, and the two frame differently. */ .benefits__photo { width: 100%; aspect-ratio: 481 / 360; object-fit: fill; border-radius: 20px; } .benefits .cards { grid-template-columns: 285px 305px; gap: 22px 19px; } .benefits .card { height: 350px; padding: 20px; border-radius: 12px; box-shadow: rgb(0 0 0 / .24) 0 0 16px -4px; } /* Each mark keeps its own size — 44x44, 48x56, 51x51 and 53x53 — so the sizes come from the tag rather than from here. */ .benefits .card img { flex: 0 0 auto; } .benefits .card h3 { margin-top: 15px; font: 600 18px/23.4px var(--font); } .benefits .card p { margin-top: 12px; font-size: 16px; } /* -------------------------------------------------------------------- cta */ /* * A rounded card inset to 1296, the same frame the app section uses. Its height * is 55vh — viewport-relative, like the hero — with the content centred in it, * so padding cannot stand in for it. */ .cta { position: relative; display: grid; align-content: center; max-width: 1296px; min-height: 55vh; margin-inline: auto; padding-block: 40px; color: #fff; border-radius: 25px; background: var(--cta-image) 0 0 / cover no-repeat; isolation: isolate; overflow: hidden; } /* The photograph reads through a solid brand blue rather than sitting behind a translucent panel — multiply keeps the figures visible and the blue true. */ .cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(35 81 208); mix-blend-mode: multiply; } .cta .container { max-width: none; padding-inline: 23px; } /* The heading and body run the full width and centre their text; only the button shrinks to its content. */ .cta__inner { display: grid; justify-items: stretch; text-align: center; } .cta__inner .btn { justify-self: center; } /* 45px on a 28px line, so the words sit tighter than the type is tall; the padding is what keeps the box off them. */ .cta h2 { padding: 7px; font: 500 45px/28px var(--font); letter-spacing: normal; color: #fff; } .cta h2 em { font-style: normal; font-weight: 700; } .cta p { margin-top: 6px; color: #fff; } /* The button row is a

after the body

, so margin-top has to be stated or the base `p + p` rule adds 16px to it. */ .cta__actions { display: flex; justify-content: center; gap: 16px; margin-top: 17px; } .cta .btn { margin-top: 10px; padding-inline: 50px; } /* * The interior pages' variant: a fixed 400 plate with 20px corners rather than * the home page's 55vh card, and two buttons instead of one. The content stack * measures 28 + 30 + 56 + 40 + 49 = 203, which centred in 400 is what puts the * heading on 1661 — so the gaps here are the layout, not decoration. */ .cta--short { min-height: 0; height: 400px; border-radius: 20px; } .cta--short h2 { padding: 0; } .cta--short p { margin-top: 30px; } /* Top-aligned, not stretched: the two buttons carry different borders and so are genuinely 49 and 47 tall on the live page. */ /* The pair is not quite centred on the live page — it sits 5.6px to the right, because the two buttons are in separate columns there rather than one row. Padding one side narrows the box the row centres in, which moves the group by half of it. */ .cta--short .cta__actions { align-items: flex-start; gap: 20px; margin-top: 40px; padding-left: 11.2px; } .cta--short .cta__actions .btn { margin-top: 0; border-radius: 3px; } /* Not the page buttons' pill: these are near-square, and the pair is a filled white one beside an outlined one. */ .cta--short .btn--light { padding: 15px 60px; color: #1448d5; border: 2px solid #fff; } .cta--short .btn--ghost { padding: 15px 50px; color: #fff; background: transparent; border: 1px solid #fff; box-shadow: none; } /* ----------------------------------------------------------------- tablet */ @media (max-width: 1024px) { .intro__grid, .app__grid, .benefits__grid, .media-blocks__grid, .about-story__grid, .feature-split__grid, .feature-cards__grid, .checklist-split__grid, .media-list__grid, .prose-media__grid, .spotlight__grid, .contact-split__plate, .hero-split__grid, .pill-cards .pill-cards__grid { grid-template-columns: minmax(0, 1fr); } /* Every one of the grids above was two fixed-width tracks — column-gap doesn't apply to a single stacked column, and none of them had a row-gap of their own to fall back on. */ .media-blocks__grid, .about-story__grid, .feature-split__grid, .feature-cards__grid, .checklist-split__grid, .media-list__grid, .prose-media__grid, .spotlight__grid, .contact-split__plate, .hero-split__grid { row-gap: 32px; } /* Desktop pins badge/head/body to explicit columns 1/3/5 of a 5-track row (see base rule) so they can sit side by side with unequal gaps. Collapsing to fewer tracks without resetting that placement leaves items pinned to columns that no longer exist, which the grid then satisfies by inventing zero-width implicit tracks — the badge and body silently collapse to 0 width instead of stacking. All three need `grid-column: 1` here, not just the body. */ .callout__grid { grid-template-columns: minmax(0, 1fr); padding-inline: var(--gutter); } .callout__badge, .callout__head, .callout__body { grid-column: 1; } .intro__lead h2 { font-size: 38px; } .callout__title, .app h2 { font-size: 40px; } .benefits__lead h2, .cta h2 { font-size: 36px; } /* Button + QR + store badges shared one non-wrapping row sized for the card's full 610/559 column split — once that's a single narrow column the row needs to wrap, and the button's 112px clearance margin (meant to hold it clear of the QR code beside it) just pushes everything else off-screen instead. */ .app__actions { flex-wrap: wrap; } .app__actions > .btn { margin-right: 0; } /* The odd fifth pill card is fixed at 733px on the live page's own one-card section — harmless next to a 1290 container, not next to a narrow one. */ .pill-card--wide { width: 100%; margin-left: 0; } .media-blocks { padding-block: 56px 40px; } .contact-form { padding-block: 80px 60px; } .contact-split { padding-block: 60px; } .about-story { padding-block: 56px 0; } .image-statement { padding-block: 90px 30px; } .pricing-tiers { padding-block: 32px 100px; } .process-steps { padding-block: 56px 48px; } .feature-cards { padding-block: 56px 0; } .benefit-cards { padding-block: 64px; } .checklist-split { padding-block: 32px 0; } .info-cards { padding-block: 64px 0; } .pricing-table { padding-block: 64px; } .media-list { padding-block: 56px 0; } .prose-media { padding-block: 80px 32px; } /* Fixed-height banners with a large hard-coded heading (not one of the --t-h* tokens the rest of the page scales at these widths) — a long page title would otherwise overflow the box before wrapping helps. */ .gradient-banner { height: auto; min-height: 320px; padding-block: 72px 24px; } .gradient-banner__heading { font-size: 44px; line-height: 1.3; } .gradient-banner--small .gradient-banner__heading { font-size: 32px; line-height: 1.35; } } /* ----------------------------------------------------------------- mobile */ @media (max-width: 640px) { .callout__grid { grid-template-columns: minmax(0, 1fr); } .callout__badge { justify-self: start; width: 110px; } .benefits .cards { grid-template-columns: minmax(0, 1fr); } .feature { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; } .feature img { width: 56px; height: 56px; } .contact-form__row, .contact-split__row2 { grid-template-columns: minmax(0, 1fr); } .pricing-tiers__grid { gap: 40px; } .intro__lead h2 { font-size: 30px; } .callout__title, .app h2, .benefits__lead h2, .cta h2 { font-size: 28px; } .cta { padding-block: 72px; } .app { padding-block: 48px; } .image-statement { padding-block: 60px 24px; } .pricing-tiers { padding-block: 24px 64px; } .gradient-banner { min-height: 260px; padding-block: 56px 20px; } .gradient-banner__heading { font-size: 30px; } .gradient-banner--small .gradient-banner__heading { font-size: 24px; } .gradient-banner__lead { font-size: 15px; line-height: 1.6; } .page-banner { height: 260px; } .page-banner__title { font-size: 30px; line-height: 1.3; } }