/* Theme Name: Azuri Group Theme URI: https://azurigroup.com.au Description: GeneratePress child theme Author: Azuri Group Author URI: https://azurigroup.com.au Template: generatepress Version: 0.1 */ /* The four original tokens are the design system's --color-white, --color-navy-100, --color-navy-900 and --color-blue-500 under the names this theme already used for them, so they keep their existing names and every rule referencing them is untouched. The rest of the scale below is additive: the header design (see inc/header/) needs the intermediate steps of both ramps, which until now were written as bare hex literals wherever they happened to be needed (#d6dcff in the QuadMenu dropdown rules, #7386ff repeated inline in the top bar's SVG data URIs, and so on). New work should use the tokens; the existing literals are left as they are rather than swept up in the same pass. */ :root { --medbill-white: #ffffff; --medbill-light: #f3f2f8; --medbill-dark: #141129; --medbill-primary: #7386ff; /* Blue ramp. --medbill-primary is the 500 step; 100 is the nav item and mega panel card hover fill, 200 the existing dropdown background, 300 the accent for icons and hover borders on dark, 400 the primary button's hover state. */ --medbill-blue-100: #eef0ff; --medbill-blue-200: #d6dcff; --medbill-blue-300: #acb6ff; --medbill-blue-400: #8596ff; /* Navy ramp. --medbill-light is the 100 step and --medbill-dark the 900; 200 is the standard border and the muted text colour on dark backgrounds, 600 secondary body text, 800 the raised surface used for cards sitting on a navy background. */ --medbill-navy-200: #d0cdd9; --medbill-navy-600: #545267; --medbill-navy-800: #1c1a36; /* Header metrics, single source of truth for both the header's own rules and the clearance the Flexible Content template's first section needs underneath it (see .medbill-sections > *:first-child below), which previously repeated the total as a hard-coded 140px/97px. */ --medbill-utility-bar-height: 52px; --medbill-nav-height: 76px; --medbill-header-height: calc(var(--medbill-utility-bar-height) + var(--medbill-nav-height)); /* The measure the header and footer line up to, so their contents sit on the same left and right edges as the page content between them. Page content doesn't state its own edge anywhere: it falls out of three rules in the Azuri grid that were never meant to be read together - .azuri-container's max-width and padding, .equal-height's -15px side margins, and .azuri_inner's 20px padding. The gutter below is the sum of the last two plus the container's own padding at each width: >= 1200px 0 - 15 + 20 = 5px, inside a 1280px container 1024-1199 25 - 15 + 20 = 30px, container is full width here <= 1023 25 + 0 + 0 = 25px, where the grid zeroes both its own margin and .azuri_inner's padding Anything that should align with page content uses these two rather than restating a number, so the three bands can't drift apart again. */ --medbill-container: 1280px; --medbill-gutter: 5px; } @media only screen and (max-width: 1199px) { :root { --medbill-gutter: 30px; } } @media only screen and (max-width: 1023px) { :root { --medbill-utility-bar-height: 44px; --medbill-nav-height: 64px; --medbill-gutter: 25px; } } /* Smoothly animates same-page navigation to a "#anchor" link (e.g. a flexible content row's Title Anchor field) instead of an instant jump. Covers clicks on any in-page anchor link automatically; landing on the page with the anchor already in the URL is handled separately in medbill_print_smooth_scroll_script() (functions.php), since browsers skip this preference for that initial jump-to-hash regardless. */ html { scroll-behavior: smooth; } /* The sitewide header is fixed and overlays page content rather than pushing it down, so the Flexible Content template's first section needs its own clearance or the header sits on top of it. Added to the first section's own padding-top (not a separate wrapper) so its background colour/image extends to cover the clearance area too, rather than leaving a mismatched plain gap above it. Written as one calc()'d value per spacing_top tier, stacked on top of that layout's own chosen spacing rather than replacing it, and higher specificity than the plain spacing_top_x rules so it wins whenever this happens to be the first section on the page. --medbill-clearance is the header's own height plus a small constant, so the two can't drift apart: the totals were previously hard-coded per breakpoint (140px desktop / 97px mobile) and had to be re-measured by hand every time a header row changed height. The desktop total is unchanged at 140px (128px of header + 12px); mobile grows from 97px to 120px because the new mobile header is taller than the .mobile-wrap bar it replaces. The mobile media query the values used to need is gone - --medbill-utility-bar-height and --medbill-nav-height already change at that same 1023px breakpoint, so every tier below follows automatically. */ .medbill-sections > *:first-child { --medbill-clearance: calc(var(--medbill-header-height) + 12px); padding-top: var(--medbill-clearance); } .medbill-sections > *:first-child.spacing_top_sm { padding-top: calc(var(--medbill-clearance) + 1.5rem); } .medbill-sections > *:first-child.spacing_top_md { padding-top: calc(var(--medbill-clearance) + 3rem); } .medbill-sections > *:first-child.spacing_top_lg { padding-top: calc(var(--medbill-clearance) + 5rem); } .medbill-sections > *:first-child.spacing_top_xl { padding-top: calc(var(--medbill-clearance) + 8rem); } a /*fonts*/ /* @import url("https://use.typekit.net/key2ugd.css"); */ #quadmenu .quadmenu-navbar-nav { display: block !important; } #quadmenu .quadmenu-navbar-nav > li { height: 60px !important; display: inline-block !important; } #quadmenu .quadmenu-navbar-nav > li.quadmenu-item.quadmenu-has-caret > a > .quadmenu-item-content > .quadmenu-text { padding-right: 1em !important; } @media only screen and (min-width: 1200px) { #quadmenu .quadmenu-navbar-nav li.quadmenu-item .quadmenu-item-content { padding: 8px !important; } } article#post-454 section.inner_.section3 { padding-top: 0; } /* Sitewide type scale (typography spec: see the "Typography" sheet in the design source). Sets the default size/line-height/spacing/weight for every heading level, body copy, .eyebrow, and .large paragraphs - any layout-specific selector further down this file that repeats one of these properties on the same element is a deliberate deviation (e.g. a card that zeroes out a paragraph's margin-bottom to sit flush above a button) and should be left as-is unless it's actually drifted from the scale with no such reason. h1.display is for the rare hero moment that needs to run bigger than a page's actual

- it's a size, not a heading level, so it composes with h1/h2/etc. (e.g. `

`) rather than replacing them. */ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { /* Loaded directly from Google Fonts as a variable font (see medbill_enqueue_google_fonts() in functions.php) rather than the --gp-font--dm-sans-36pt/--gp-font--dm-sans split GeneratePress's self-hosted copy used - its built-in optical-size axis renders the correct cut at any size on its own. */ font-family: "DM Sans", sans-serif; font-style: normal; color: #141129; } h1, .h1, h1.display { font-weight: 700; } h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: 600; } h1.display { font-size: 52px; line-height: 1.2; margin-bottom: 0.5em; } h1, .h1 { font-size: 48px; line-height: 1.2; margin-bottom: 0.5em; } h2, .h2 { font-size: 32px; line-height: 1.3; margin-bottom: 0.4em; } h3, .h3 { font-size: 24px; line-height: 1.3; margin-bottom: 0.2em; } h4, .h4 { font-size: 20px; line-height: 1.4; margin-bottom: 0.2em; } h5, .h5 { font-size: 18px; line-height: 1.4; margin-bottom: 0.2em; } h6, .h6 { font-size: 16px; line-height: 1.4; margin-bottom: 0.2em; } p { font-size: 16px; line-height: 1.5; margin-bottom: 1.5em; font-weight: 400; } p.large, .p-large { font-size: 20px; line-height: 1.5; margin-bottom: 1.5em; font-weight: 500; } /* .eyebrow_badge (the pill-shaped label used across every flexible layout) is this site's only real-world "eyebrow" element - bare .eyebrow doesn't appear anywhere, so it's included here for any future use of the plain spec class, but .eyebrow_badge's own font-size further down (currently 11.6px, not 10px - flagged separately) is what's actually live. */ .eyebrow { font-size: 10px; line-height: 1; margin-bottom: 0; font-weight: 400; } .main-navigation ul ul { border-radius: 10px; } body { font-family: "DM Sans", sans-serif; font-weight: 400; font-style: normal; font-size: 16px; line-height: 1.5; } .quadmenu-row { max-width: 1280px; margin-left: auto !important; margin-right: auto !important; border: 0 !important; padding-top: 60px !important; padding-bottom: 60px !important; left: 50px !important; overflow: hidden !important; } #quadmenu.quadmenu-is-horizontal .quadmenu-navbar-nav li.quadmenu-dropdown > .quadmenu-dropdown-menu.quadmenu-dropdown-stretch-dropdown { backdrop-filter: blur(21.760099px); --webkit-backdrop-filter: blur(21.760099px); -webkit-backdrop-filter: blur(21.760099px); background-color: rgba(6, 5, 15, 0.5); } ul.quadmenu-row h3 { font-weight: bold; font-size: 22px; margin-top: 20px; color: #fff; margin-bottom: 10px; } ul.quadmenu-row p { font-size: 16px; line-height: 30px; color: #d0cdd9; } #quadmenu.quadmenu-generatepress .quadmenu-navbar-nav .quadmenu-dropdown-menu .button { background-color: transparent !important; padding: 0; border-radius: 0 !important; } #quadmenu.quadmenu-generatepress .quadmenu-navbar-nav .quadmenu-dropdown-menu .button a { color: #acb6ff !important; font-weight: normal; background-image: url('data:image/svg+xml,'); background-repeat: no-repeat; background-position: center right; padding-right: 25px; } #quadmenu.quadmenu-is-horizontal .quadmenu-navbar-nav li.quadmenu-item > .quadmenu-dropdown-menu { top: 130% !important; } .menu_div { display: flex; align-items: center; margin-bottom: 30px; } .menu_div .left { display: flex; } .menu_div .left img { width: 150px; } .menu_div .right { padding-left: 24px; } .menu_div .right h3 { height: 70px; margin-bottom: 0; margin-top: 0; } section.home_, .inner_page_header, section.inner_ { position: relative; } /* Base .inner_page_header look (background, text-box typography). Moved here from the "Inner Pages Header" GenerateBlocks hook element (gp_elements post 183) so it still applies on pages using template-flexible-content.php, where that element is suppressed. */ .inner_page_header .azuri_col_12 {text-align: center;}.inner_page_header {padding-top: 200px;padding-bottom: 80px;background-color: #141129;background-repeat: no-repeat;background-size: cover;background-position: center;}@media only screen and (min-width: 781px) {.inner_page_header {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='761' viewBox='0 0 1920 761'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.5' cy='.5' r='.5' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%237386ff' stop-opacity='.435'/%3E%3Cstop offset='1' stop-color='%23141129' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='.5' cy='.5' r='.525' gradientTransform='matrix(1 0 0 .779 0 .11)' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23a5b1ff'/%3E%3Cstop offset='1' stop-color='%23141129' stop-opacity='0'/%3E%3C/radialGradient%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 41h1920v761H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath fill='%23141129' d='M0 0h1920v761H0z'/%3E%3Cg clip-path='url(%23a)' transform='translate(0 -41)'%3E%3Cellipse cx='1330.5' cy='811' rx='1330.5' ry='811' transform='translate(-947 104)' opacity='.704' fill='url(%23b)'/%3E%3Cellipse cx='862' cy='600' rx='862' ry='600' transform='translate(840 -639)' opacity='.704' fill='url(%23b)'/%3E%3Cpath d='M239.5 959.5h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm-1560-120h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm-1560-120h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm-1560-120h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm-1560-120h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm-1560-120h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm0-239.5v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V.5h-1v119h-119V.5h-1v119H0v1h119.5v119H0v1h119.5v119H0v1h119.5v119H0v1h119.5v119H0v1h119.5v119H0v1h119.5v119H0v1h119.5v119H0v1h119.5v112h1v-112h119v112h1v-112h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5H1920v-1h-119.5v-119H1920v-1h-119.5v-119H1920v-1h-119.5v-119H1920v-1h-119.5v-119H1920v-1h-119.5v-119H1920v-1h-119.5v-119H1920v-1h-119.5v-119h120v-1h-120V0Z' transform='translate(0 -118)' opacity='.209' fill='url(%23c)'/%3E%3C/g%3E%3C/svg%3E");}}@media only screen and (max-width: 780.5px) {.inner_page_header {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='1597' viewBox='0 0 390 1597'%3E%3Cdefs%3E%3CradialGradient id='a' cx='.5' cy='.5' r='.632' gradientTransform='matrix(1 0 0 .942 0 .029)' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23a5b1ff'/%3E%3Cstop offset='1' stop-color='%23141129' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='.5' cy='.5' r='.5' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%237386ff' stop-opacity='.435'/%3E%3Cstop offset='1' stop-color='%23141129' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill='%23141129' d='M0 0h390v1597H0z'/%3E%3Cg clip-path='url(%23clip-path)' transform='translate(-2596 2383)'%3E%3Cg transform='translate(2596 -2383)'%3E%3Cpath d='M170.032 681.195H85.549v-84.484h84.484Zm85.194 0h-84.484v-84.484h84.484Zm85.194 0h-84.484v-84.484h84.484Zm85.194 0H341.13v-84.484h84.484Zm85.194 0h-84.484v-84.484h84.484Zm85.194 0h-84.484v-84.484H596Zm85.193 0h-84.484v-84.484h84.484Zm85.194 0H681.9v-84.484h84.484Zm85.194 0H767.1v-84.484h84.484Zm85.194 0h-84.485v-84.484h84.484Zm85.194 0h-84.485v-84.484h84.484Zm85.194 0h-84.485v-84.484h84.484Zm85.194 0h-84.484v-84.484h84.484Zm85.194 0h-84.484v-84.484h84.484ZM170.032 596H85.549v-84.483h84.484Zm85.194 0h-84.484v-84.483h84.484Zm85.194 0h-84.484v-84.483h84.484Zm85.194 0H341.13v-84.483h84.484Zm85.194 0h-84.484v-84.483h84.484ZM596 596h-84.482v-84.483H596Zm85.193 0h-84.482v-84.483h84.484Zm85.194 0H681.9v-84.483h84.484Zm85.194 0H767.1v-84.483h84.484Zm85.194 0h-84.483v-84.483h84.484Zm85.194 0h-84.483v-84.483h84.484Zm85.194 0h-84.483v-84.483h84.484Zm85.194 0h-84.484v-84.483h84.484Zm85.194 0h-84.484v-84.483h84.484ZM170.032 510.807H85.549v-84.483h84.484Zm85.194 0h-84.484v-84.483h84.484Zm85.194 0h-84.484v-84.483h84.484Zm85.194 0H341.13v-84.483h84.484Zm85.194 0h-84.484v-84.483h84.484Zm85.194 0h-84.484v-84.483H596Zm85.193 0h-84.484v-84.483h84.484Zm85.194 0H681.9v-84.483h84.484Zm85.194 0H767.1v-84.483h84.484Zm85.194 0h-84.485v-84.483h84.484Zm85.194 0h-84.485v-84.483h84.484Zm85.194 0h-84.485v-84.483h84.484Zm85.194 0h-84.484v-84.483h84.484Zm85.194 0h-84.484v-84.483h84.484ZM170.032 425.614H85.549V341.13h84.484Zm85.194 0h-84.484V341.13h84.484Zm85.194 0h-84.484V341.13h84.484Zm85.194 0H341.13V341.13h84.484Zm85.194 0h-84.484V341.13h84.484Zm85.194 0h-84.484V341.13H596Zm85.193 0h-84.484V341.13h84.484Zm85.194 0H681.9V341.13h84.484Zm85.194 0H767.1V341.13h84.484Zm85.194 0h-84.485V341.13h84.484Zm85.194 0h-84.485V341.13h84.484Zm85.194 0h-84.485V341.13h84.484Zm85.194 0h-84.484V341.13h84.484Zm85.194 0h-84.484V341.13h84.484ZM170.032 340.42H85.549v-84.484h84.484Zm85.194 0h-84.484v-84.484h84.484Zm85.194 0h-84.484v-84.484h84.484Zm85.194 0H341.13v-84.484h84.484Zm85.194 0h-84.484v-84.484h84.484Zm85.194 0h-84.484v-84.484H596Zm85.193 0h-84.484v-84.484h84.484Zm85.194 0H681.9v-84.484h84.484Zm85.194 0H767.1v-84.484h84.484Zm85.194 0h-84.485v-84.484h84.484Zm85.194 0h-84.485v-84.484h84.484Zm85.194 0h-84.485v-84.484h84.484Zm85.194 0h-84.484v-84.484h84.484Zm85.194 0h-84.484v-84.484h84.484ZM170.032 255.226H85.549v-84.484h84.484Zm85.194 0h-84.484v-84.484h84.484Zm85.194 0h-84.484v-84.484h84.484Zm85.194 0H341.13v-84.484h84.484Zm85.194 0h-84.484v-84.484h84.484Zm85.194 0h-84.484v-84.484H596Zm85.193 0h-84.484v-84.484h84.484Zm85.194 0H681.9v-84.484h84.484Zm85.194 0H767.1v-84.484h84.484Zm85.194 0h-84.485v-84.484h84.484Zm85.194 0h-84.485v-84.484h84.484Zm85.194 0h-84.485v-84.484h84.484Zm85.194 0h-84.484v-84.484h84.484Zm85.194 0h-84.484v-84.484h84.484ZM170.032 170.032H85.549V85.549h84.484Zm85.194 0h-84.484V85.549h84.484Zm85.194 0h-84.484V85.549h84.484Zm85.194 0H341.13V85.549h84.484Zm85.194 0h-84.484V85.549h84.484Zm85.194 0h-84.484V85.549H596Zm85.193 0h-84.484V85.549h84.484Zm85.194 0H681.9V85.549h84.484Zm85.194 0H767.1V85.549h84.484Zm85.194 0h-84.485V85.549h84.484Zm85.194 0h-84.485V85.549h84.484Zm85.194 0h-84.485V85.549h84.484Zm85.194 0h-84.484V85.549h84.484Zm85.194 0h-84.484V85.549h84.484Zm0-170.032v84.839h-84.484V0h-.71v84.839h-84.484V0h-.71v84.839h-84.485V0h-.711v84.839h-84.483V0h-.71v84.839h-84.484V0h-.71v84.839H767.1V0h-.711v84.839H681.9V0h-.71v84.839h-84.479V0H596v84.839h-84.482V0h-.711v84.839h-84.483V0h-.71v84.839H341.13V0h-.71v84.839h-84.483V0h-.711v84.839h-84.484V.355h-.71v84.484H85.549V.355h-.709v84.484H0v.71h84.839v84.484H0v.711h84.839v84.483H0v.71h84.839v84.483H0v.71h84.839v84.484H0v.711h84.839v84.483H0v.71h84.839V596H0v.71h84.839v84.484H0v.711h84.839v79.513h.709v-79.512h84.484v79.513h.71v-79.513h84.484v79.159h.711v-79.159h84.483v79.159h.71v-79.159h84.484v79.159h.71v-79.159h84.484v79.159h.711v-79.159H596v79.159h.709v-79.159h84.484v79.159h.71v-79.159h84.484v79.159h.711v-79.159h84.483v79.159h.71v-79.159h84.484v79.159h.71v-79.159h84.484v79.159h.711v-79.159h84.483v79.159h.71v-79.159h84.484v79.159h.71v-79.159h84.484v79.159h.711v-79.159h84.838v-.711h-84.838v-84.484h84.838V596h-84.838v-84.483h84.838v-.71h-84.838v-84.483h84.838v-.711h-84.838V341.13h84.838v-.71h-84.838v-84.484h84.838v-.71h-84.838v-84.483h84.838v-.711h-84.838V85.549h85.193v-.71h-85.193V0Z' transform='translate(-487 -.5)' opacity='.209' fill='url(%23a)'/%3E%3Cellipse cx='570' cy='397' rx='570' ry='397' transform='translate(-140 -507)' opacity='.704' fill='url(%23b)'/%3E%3Cellipse cx='1094.5' cy='667.5' rx='1094.5' ry='667.5' transform='translate(-1221 264)' opacity='.704' fill='url(%23b)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}}.inner_page_header .text-box h1{font-size: 48px;color: #fff;}.inner_page_header .text-box h1 b {background: -webkit-linear-gradient(45deg, #D6DCFF, #7386FF);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.inner_page_header .text-box p {color: #d0cdd9;margin-bottom: 1.5em;}.inner_page_header .text-box + .button {margin-top: 26px;}@media only screen and ( min-width:240px) and (max-width:480px) {.inner_page_header .text-box h1 {font-size: 30px !important;}.inner_page_header .text-box p {font-size: 14px;line-height: 1.5em;}}@media only screen and ( min-width:240px) and (max-width:1023px) {.inner_page_header {padding-top: 120px !important;padding-bottom: 40px !important;}.inner_page_header .text-box h1 {font-size: 38px;}.inner_page_header .text-box p {padding-top: 0px;margin-bottom: 30px;}.inner_page_header .button {margin-bottom: 40px;}.inner_page_header picture {margin: 0 auto;}} /* Banner - Image (template-flexible-content.php) adds bg_x/spacing_top_x/ spacing_bottom_x classes just like every other flexible layout, but nothing previously read them here, so the Settings tab looked broken. These overrides make them work without touching the unconditional base rule above, which still has to apply as-is for the "Inner Pages Header" hook on every other page, where those classes never exist. The radial- gradient artwork is native to the dark look, so it's kept only for bg_dark. Header-clearance is handled once, generically, by .medbill-sections, so it's intentionally not duplicated in these spacing values. */ .inner_page_header.bg_white, .inner_page_header.bg_light, .inner_page_header.bg_primary { background-image: none !important; } .inner_page_header.bg_white { background-color: var(--medbill-white); } .inner_page_header.bg_light { background-color: var(--medbill-light); } .inner_page_header.bg_primary { background-color: var(--medbill-primary); } /* Gradient highlight for bold text inside any dark-background section's heading. Previously hand-copied onto .inner_page_header only, so other dark sections (e.g. Banner - Checklist) never picked it up when editors used bold in their heading. Generalised via bg_dark so every layout gets it automatically. */ section.inner_.bg_dark .text-box h1 b, section.inner_.bg_dark .text-box h2 b, .inner_page_header.bg_dark .text-box h1 b, section.inner_.bg_dark .text-box h1 strong, section.inner_.bg_dark .text-box h2 strong, .inner_page_header.bg_dark .text-box h1 strong, section.inner_.banner_checklist.bg_dark .checklist_list li b, section.inner_.banner_checklist.bg_dark .checklist_list li strong { background: -webkit-linear-gradient(#d6dcff, #7386ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .inner_page_header.bg_white .text-box h1, .inner_page_header.bg_light .text-box h1 { color: var(--medbill-dark); } .inner_page_header.bg_white .text-box h1 b, .inner_page_header.bg_light .text-box h1 b { background: -webkit-linear-gradient(45deg, var(--medbill-primary), #4959c1); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .inner_page_header.bg_white .text-box p, .inner_page_header.bg_light .text-box p { color: #545267; } .inner_page_header.spacing_top_sm { padding-top: 1.5rem; } .inner_page_header.spacing_top_md { padding-top: 3rem; } .inner_page_header.spacing_top_lg { padding-top: 5rem; } .inner_page_header.spacing_top_xl { padding-top: 8rem; } .inner_page_header.spacing_bottom_sm { padding-bottom: 1.5rem; } .inner_page_header.spacing_bottom_md { padding-bottom: 3rem; } .inner_page_header.spacing_bottom_lg { padding-bottom: 5rem; } .inner_page_header.spacing_bottom_xl { padding-bottom: 8rem; } @media only screen and (min-width: 240px) and (max-width: 1023px) { .inner_page_header.spacing_top_sm { padding-top: 1.5rem !important; } .inner_page_header.spacing_top_md { padding-top: 3rem !important; } .inner_page_header.spacing_top_lg { padding-top: 5rem !important; } .inner_page_header.spacing_top_xl { padding-top: 8rem !important; } .inner_page_header.spacing_bottom_sm { padding-bottom: 1.5rem !important; } .inner_page_header.spacing_bottom_md { padding-bottom: 3rem !important; } .inner_page_header.spacing_bottom_lg { padding-bottom: 5rem !important; } .inner_page_header.spacing_bottom_xl { padding-bottom: 8rem !important; } } .medbill-sections { width: 100%; } /* Flexible content layout: spacing/background modifiers, see template-flexible-content.php. Adjust to taste. */ section.inner_.bg_white { background-color: var(--medbill-white); } section.inner_.bg_light { background-color: var(--medbill-light); } section.inner_.bg_dark { background-color: var(--medbill-dark); color: var(--medbill-white); } section.inner_.bg_primary { background-color: var(--medbill-primary); color: var(--medbill-white); } /* Headings declare their own color globally (h1-h6 rule above), so they don't inherit the section-level color set by bg_dark/bg_primary. Force it explicitly here so any current or future flexible layout stays legible on those backgrounds. */ section.inner_.bg_dark h1, section.inner_.bg_dark h2, section.inner_.bg_dark h3, section.inner_.bg_dark h4, section.inner_.bg_dark h5, section.inner_.bg_dark h6, section.inner_.bg_dark p, section.inner_.bg_primary h1, section.inner_.bg_primary h2, section.inner_.bg_primary h3, section.inner_.bg_primary h4, section.inner_.bg_primary h5, section.inner_.bg_primary h6, .cta_form_card h1, .cta_form_card h2, .cta_form_card h3, .cta_form_card h4, .cta_form_card h5, .cta_form_card h6 { color: var(--medbill-white); } /* The site's global link colour (GeneratePress Customizer) is white, which only reads correctly on dark/primary sections. .btn_simple.second has no colour of its own and relies on that inherited default, so give it a dark colour on white/light sections too. */ section.inner_.bg_white .btn_simple.second, section.inner_.bg_light .btn_simple.second { color: var(--medbill-dark); } /* Same root cause as .btn_simple.second above: plain inline links inside WYSIWYG content (e.g. heading_and_description, card/quote text) have no colour of their own either, so they inherit that same white default and disappear on white/light sections. Excludes the styled button classes above, which already set their own colour regardless of section bg. */ section.inner_.bg_white a:not(.btn):not(.btn_simple):not(.btn_secondary), section.inner_.bg_light a:not(.btn):not(.btn_simple):not(.btn_secondary), .inner_page_header.bg_white a:not(.btn):not(.btn_simple):not(.btn_secondary), .inner_page_header.bg_light a:not(.btn):not(.btn_simple):not(.btn_secondary) { color: var(--medbill-primary); } section.inner_.spacing_top_sm { padding-top: 1.5rem; } section.inner_.spacing_top_md { padding-top: 3rem; } section.inner_.spacing_top_lg { padding-top: 5rem; } section.inner_.spacing_top_xl { padding-top: 8rem; } section.inner_.spacing_bottom_sm { padding-bottom: 1.5rem; } section.inner_.spacing_bottom_md { padding-bottom: 3rem; } section.inner_.spacing_bottom_lg { padding-bottom: 5rem; } section.inner_.spacing_bottom_xl { padding-bottom: 8rem; } /* Section alignment (Settings tab, layouts with a full-width heading text-box only): left/right keep the same max-width as centered, per explicit instruction, just anchored to one side by dropping the auto margin on that side rather than centering. Scoped to a .text-box that's a direct child of a col_12's .azuri_inner, so it targets only the main heading block and not any other .text-box elsewhere in the same section (e.g. a narrower column's own text-box, or a tab panel's body text). */ section.inner_.align_left .azuri_col_12 > .azuri_inner > .text-box, section.inner_.align_center .azuri_col_12 > .azuri_inner > .text-box, section.inner_.align_right .azuri_col_12 > .azuri_inner > .text-box { max-width: 960px; } section.inner_.align_left .azuri_col_12 > .azuri_inner > .text-box { text-align: left; margin-right: auto; } section.inner_.align_center .azuri_col_12 > .azuri_inner > .text-box { text-align: center; margin-left: auto; margin-right: auto; } section.inner_.align_right .azuri_col_12 > .azuri_inner > .text-box { text-align: right; margin-left: auto; } /* Flexible layout: Banner - Checklist (Figma node 2032:5599) */ section.inner_.banner_checklist, section.inner_.banner_cta { background-image: linear-gradient( 135deg, rgba(115, 134, 255, 0.16), rgba(255, 255, 255, 0) 60% ); } /* On bg_white the tint gradient above reads as a smudge against the plain white background rather than a hero treatment, so Banner - Checklist drops it there; the checklist card's own border/fill (see .checklist_card below) carries the visual weight instead. */ section.inner_.banner_checklist.bg_white { background-image: none; } /* Shared "dark hero" artwork for Banner - Checklist and Banner - Image when bg_dark is selected, overriding the plain tint/old artwork above with higher specificity. Defined once and reused across both since it's the same large data URI. */ section.inner_.banner_checklist.bg_dark, .inner_page_header.bg_dark { background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1921' height='1213' viewBox='0 0 1921 1213'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.5' cy='.5' r='.5' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%237386ff' stop-opacity='.435'/%3E%3Cstop offset='1' stop-color='%23141129' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='.5' cy='.5' r='.632' gradientTransform='matrix(1 0 0 .942 0 .029)' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23a5b1ff'/%3E%3Cstop offset='1' stop-color='%23141129' stop-opacity='0'/%3E%3C/radialGradient%3E%3CclipPath id='a'%3E%3Cpath fill='%23141129' d='M0 43h1921v1213H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath fill='%23141129' d='M0 0h1921v1213H0z'/%3E%3Cg clip-path='url(%23a)' transform='translate(0 -43)'%3E%3Cellipse cx='1330.5' cy='811' rx='1330.5' ry='811' transform='translate(-810 252)' opacity='.704' fill='url(%23b)'/%3E%3Cpath d='M239.5 959.5h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm-1560-120h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm-1560-120h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm-1560-120h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm-1560-120h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm-1560-120h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm-1560-120h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm120 0h-119v-119h119Zm0-239.5v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V0h-1v119.5h-119V.5h-1v119h-119V.5h-1v119H0v1h119.5v119H0v1h119.5v119H0v1h119.5v119H0v1h119.5v119H0v1h119.5v119H0v1h119.5v119H0v1h119.5v119H0v1h119.5v112h1v-112h119v112h1v-112h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5h119V1072h1V960.5H1920v-1h-119.5v-119H1920v-1h-119.5v-119H1920v-1h-119.5v-119H1920v-1h-119.5v-119H1920v-1h-119.5v-119H1920v-1h-119.5v-119H1920v-1h-119.5v-119h120v-1h-120V0Z' transform='translate(0 -166.5)' opacity='.209' fill='url(%23c)'/%3E%3Cellipse cx='862' cy='600' rx='862' ry='600' transform='translate(826 -639)' opacity='.704' fill='url(%23b)'/%3E%3C/g%3E%3C/svg%3E"); } /* Same opaque pill treatment used by .medbill-racp .hero-pill: an opaque background + border of its own, so it reads the same way regardless of which bg_color the section around it uses (no bg-specific variants needed). */ .eyebrow_badge { /* display: inline-table (not inline-flex/inline-block) so that once the text is too wide for the available space and wraps, the box shrinks to the width of its widest wrapped line instead of the full available width, while still sitting inline like inline-flex did. inline-flex/ inline-block's shrink-to-fit formula - and "width: fit-content", which resolves to that same formula - both fall back to the full available width as soon as wrapping is needed; only table auto-layout accounts for the wrap when computing its own width. */ display: inline-table; margin-bottom: 12px; border-radius: 1000px; background-color: var(--feature-color-tint, #eef0ff); border: 1px solid var(--feature-color-border, rgba(115, 134, 255, 0.3)); color: var(--feature-color, var(--medbill-primary)); /* Typography spec's plain .eyebrow is regular-weight with no margin-bottom - doesn't map onto this pill-badge treatment (bold, uppercase, tracked-out, and needs its own margin-bottom to clear whatever heading follows it in every layout that uses it), so weight/ margin are left as they are; only font-size (was 11.6px) is aligned to the spec's 10px. */ font-weight: bold; letter-spacing: 1.92px; text-transform: uppercase; font-size: 10px; line-height: 1.2em; padding: 6px 16px; } span.btn { background-color: var(--medbill-primary); color: var(--medbill-white); padding: 6px 16px; border-radius: 1000px; } /* Breadcrumb trail (Rank Math), shown above the heading via each layout's "Show Breadcrumbs" toggle on Banner - Image/Checklist/Logos. Same type styles as .eyebrow_badge, minus the pill background/border. */ .rank-math-breadcrumb { margin-bottom: 12px; } .rank-math-breadcrumb p, .rank-math-breadcrumb p:last-child { margin: 0; font-weight: bold; font-size: 12px; letter-spacing: 1.92px; text-transform: uppercase; line-height: 1.4; text-align: left; } .rank-math-breadcrumb a, .rank-math-breadcrumb .last { color: var(--medbill-primary); } .rank-math-breadcrumb a { text-decoration: none; } .rank-math-breadcrumb a:hover, .rank-math-breadcrumb a:focus { text-decoration: underline; } .rank-math-breadcrumb .separator { color: var(--medbill-primary); opacity: 0.5; margin: 0 4px; } .text-box h1 { /* Typography spec: h1 is 48px/0.5em margin-bottom - both were previously a couple of px off (50px/20px), not a deliberate deviation. */ font-size: 48px; margin-bottom: 0.5em; } section.inner_.banner_checklist .text-box p, section.inner_.banner_logos .text-box p, section.inner_.banner_cta .text-box p, section.inner_.content_text_image .text-box p, section.inner_.banner_checklist .text-box ul, section.inner_.banner_logos .text-box ul, section.inner_.banner_cta .text-box ul, section.inner_.content_text_image .text-box ul { /* Typography spec: p is 1.5em (24px) margin-bottom - was a flat 50px, sized to also cover the gap before whichever button/checklist follows the text-box, not just space between paragraphs. That gap now lives on the following .button itself instead (see .text-box + .button below), so it survives this margin-bottom shrinking back down to the spec value. Banner - Logos has no button after its text-box (a checklist follows instead), so its own pre-checklist gap is just this 24px now, tighter than the old 50px. */ margin-bottom: 1.5em; } /* Restores the extra breathing room the paragraph's own margin-bottom used to provide before a following CTA button, now that margin-bottom is the spec's smaller 24px rather than a flat 50px tuned for both purposes at once - 26px here plus the paragraph's 24px reproduces the original ~50px gap. Banner - Logos is deliberately not included: it has no button after its text-box (see above). */ section.inner_.banner_checklist .text-box + .button, section.inner_.banner_cta .text-box + .button, section.inner_.content_text_image .text-box + .button { margin-top: 26px; } /* A blockquote dropped into a banner's WYSIWYG (heading_and_description / page_title_and_description) reuses .eyebrow_badge's pill treatment - tinted background, coloured border, feature-colour text - instead of a plain quote style, so it reads as part of the same badge language as the eyebrow above it. border-radius: 1000px scales down on its own once the box is taller than a single line, same as .eyebrow_badge. The clearfix keeps a floated alignleft/alignright image (see below) inside the pill's padding instead of spilling past the bottom edge. */ section.inner_.banner_checklist .text-box blockquote, section.inner_.banner_logos .text-box blockquote, section.inner_.banner_cta .text-box blockquote, .inner_page_header .text-box blockquote { margin: 0 0 24px; padding: 10px 18px; border-radius: 1000px; background-color: var(--feature-color-tint, #eef0ff); border: 1px solid var(--feature-color-border, rgba(115, 134, 255, 0.3)); color: var(--feature-color, var(--medbill-primary)); justify-self: flex-start; font-style: normal; } section.inner_.banner_checklist .text-box blockquote::after, section.inner_.banner_logos .text-box blockquote::after, section.inner_.banner_cta .text-box blockquote::after, .inner_page_header .text-box blockquote::after { content: ""; display: table; clear: both; } section.inner_.banner_checklist .text-box blockquote p, section.inner_.banner_logos .text-box blockquote p, section.inner_.banner_cta .text-box blockquote p, .inner_page_header .text-box blockquote p { margin: 0; color: inherit; /* Same type treatment as .eyebrow_badge (bold, uppercase, tracked-out, 10px) so the quote reads as the same badge language, not a mismatched plain-paragraph size/weight sitting inside a badge-coloured pill. */ font-weight: bold; letter-spacing: 1.92px; text-transform: uppercase; font-size: 14px; line-height: 1.2em; } section.inner_.banner_checklist .text-box blockquote p + p, section.inner_.banner_logos .text-box blockquote p + p, section.inner_.banner_cta .text-box blockquote p + p, .inner_page_header .text-box blockquote p + p { margin-top: 1em; } /* Images dropped into that same blockquote keep whichever align class the WYSIWYG's image toolbar applied (alignleft/alignright/aligncenter) - the theme doesn't style these classes anywhere else on the site, so without this an aligned image would just ignore the editor's choice and render at full width. No rule for alignnone/unclassed: that's the "no alignment" case, and an img is inline by default, so a medium-sized image dropped in with no alignment picked sits inline with the quote text on its own, matching wherever the editor placed it in the WYSIWYG. */ section.inner_.banner_checklist .text-box blockquote img, section.inner_.banner_logos .text-box blockquote img, section.inner_.banner_cta .text-box blockquote img, .inner_page_header .text-box blockquote img { max-width: 100%; height: auto; vertical-align: middle; /* Opaque white backing + rounded corners so the image reads as its own chip against the tinted pill, the same way .checklist_card's logo_grid gives logos their own contrast against a coloured background, rather than the image's own edges bleeding into the tint. */ background-color: var(--medbill-white, #fff); border-radius: 4em; padding: 12px 32px; } section.inner_.banner_checklist .text-box blockquote img.alignleft, section.inner_.banner_logos .text-box blockquote img.alignleft, section.inner_.banner_cta .text-box blockquote img.alignleft, .inner_page_header .text-box blockquote img.alignleft { float: left; margin: 4px 20px 4px 0; } section.inner_.banner_checklist .text-box blockquote img.alignright, section.inner_.banner_logos .text-box blockquote img.alignright, section.inner_.banner_cta .text-box blockquote img.alignright, .inner_page_header .text-box blockquote img.alignright { float: right; margin: 4px 0 4px 20px; } section.inner_.banner_checklist .text-box blockquote img.aligncenter, section.inner_.banner_logos .text-box blockquote img.aligncenter, section.inner_.banner_cta .text-box blockquote img.aligncenter, .inner_page_header .text-box blockquote img.aligncenter { display: block; margin: 0 auto 12px; } .button-flex-wrap { display: flex !important; align-items: center; flex-wrap: wrap; gap: 16px; } .button_centered { justify-content: center; } .checklist_card { border-radius: 16px; padding: 26px; } /* Translucent overlay card reads on a dark/primary backdrop; on a white section it needs its own opaque background to stay visible (reuses .content_card's colours). On a light (lavender) section that same fill would match the section background, so it goes white there instead. */ section.inner_.bg_dark .checklist_card, section.inner_.bg_primary .checklist_card { background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); } /* Dark-scheme counterpart to the light/lavender watermark further down - same artwork family, blue-toned to read against the translucent overlay fill above. */ section.inner_.bg_dark .checklist_card, section.inner_.bg_primary .checklist_card { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='660' height='461' viewBox='0 0 660 461'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='.795' y1='-1.058' x2='.599' y2='.968' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%237385ff'/%3E%3Cstop offset='1' stop-color='%237386ff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(-940 -211)' clip-path='url(%23clip-path)'%3E%3Cpath d='M405.058 141.787C442.092 47.676 474.483 0 539.944 0c46.288 0 86.4 43.489 86.4 123.217v311.432h-81.989l2.607-310.06s.81-47.137-17.175-46.612c-11.622.339-17.607 19.234-36.124 63.81L428.865 294.1c-36.363 93.487-69.425 140.546-134.23 140.546-46.281 0-78.116-37.658-78.116-116.284l1.558-111.433s2.483-43.042-10.774-43.558c-14.1-.563-20.576 17.939-37 64.211L87.942 434.649H0l84.325-206.27C121.351 134.268 153.75 86.6 219.21 86.6c46.281 0 78.687 43.952 78.687 123.209l-1.087 101.545s-1.5 46.589 9.733 46.52c9.679-.054 14.237-10.149 27.463-41.73Z' transform='rotate(-1 11233.998 -56914.157)' opacity='.34' fill='url(%23a)'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; background-position: top; background-repeat: no-repeat; } section.inner_.bg_white .checklist_card { background-color: var(--medbill-light); border: 1px solid #d0cdd9; } section.inner_.bg_light .checklist_card { background-color: var(--medbill-white); border: 1px solid #d0cdd9; } /* Light-scheme counterpart to the bg_dark/bg_primary watermark above - same artwork family, lavender/grey toned to match this card's own bg_white/ bg_light fill. */ section.inner_.bg_white .checklist_card, section.inner_.bg_light .checklist_card { background-image: url('data:image/svg+xml,'); background-size: cover; background-position: top; background-repeat: no-repeat; } .checklist_card h3 { font-size: 24px; margin-bottom: 0.5em; } .checklist_list { list-style: none; margin: 0; padding: 0; } .checklist_list li { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .checklist_list li:last-child { margin-bottom: 0; } /* .check_icon is a real emitted per checklist_items row. The ::before below gives the same mark to a plain