/* BabyLiveAdvice: site styles. One file for every page (html/rules.md, Site styles).
   Migrated from the Elementor site (kit 197): the same colours, type and spacing, named by role.
   Breakpoints: desktop above 1366, laptop up to 1366, tablet up to 1024, phone up to 767. */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: "Ramillas"; src: url("fonts/tt-ramillas-trial-regular.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-latin.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-italic-latin.woff2") format("woff2"); font-weight: 100 1000; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-italic-latin.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("fonts/nunito-sans-latin.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }

/* ---------- Site styles: colours, type, spacing ---------- */
:root {
  /* Colours (site styles) */
  --main-accent-default: #8b6fa8;   /* buttons, links, accents */
  --main-accent-dark: #413a4e;      /* dark accent sections, dark buttons, link hover */
  --main-accent-light: #cfbcd5;     /* pale accent cards and lines */
  --second-accent-default: #8abdb8; /* teal of the illustrations */
  --neutral-dark: #3d434d;          /* titles */
  --neutral-medium: #2a2f36;        /* body text */
  --neutral-light: #efefef;         /* light grey sections, footer */
  --neutral-white: #ffffff;
  /* Custom colours: the source's own shades, kept as they are (migration) */
  --plum: #735b79;                  /* button outlines, "Partner With Us" */
  --deep-violet: #79569e;           /* small outline buttons */
  --lavender-background: #f8f2ff;   /* lavender sections, mobile menu */
  --off-white: #fcfaf8;             /* off-white sections, light text on purple */
  --pale-grey-background: #f8f8f8;
  --soft-grey-button: #dde1e9;      /* "Sign Up for Class" style buttons */
  --line-grey: #c7ccd4;             /* lines and field borders */
  --muted-text: #737a82;            /* secondary text */
  --pink-white: #faf5fc;
  --rose-white: #fdfbfd;
  --star-gold: #f0ad4e;

  /* Fonts */
  --title-font: "Ramillas", Georgia, serif;
  --text-font: "DM Sans", Arial, sans-serif;
  --small-font: "Inter", Arial, sans-serif;

  /* Text styles (desktop and laptop) */
  --page-title-size: 64px;   --page-title-line: 1.1;  --page-title-spacing: -3.2px;
  --section-title-size: 52px; --section-title-line: 1; --section-title-spacing: -3px;
  --widget-title-size: 40px; --widget-title-line: 1.1; --widget-title-spacing: -1.8px;
  --small-title-size: 30px;  --small-title-line: 1.1;  --small-title-spacing: -1.5px;
  --eyebrow-size: 16px;      --eyebrow-line: 1.2;
  --intro-size: 24px;
  --body-size: 17px;         --body-line: 1.5;
  --fineprint-size: 14px;
  --decorative-size: 27px;
  --button-size: 16px;

  /* Spacing and layout */
  --content-max-width: 1290px;
  --text-max-width: 850px;
  --image-and-text-max-width: 1290px;
  --page-side-gutter: 38px;
  --section-padding-default: 80px;
  --section-padding-compact: 40px;
  --section-padding-spacious: 120px;
  --gap-between-items: 30px;
  --gap-heading-to-content: 20px;
  --radius-card: 20px;
  --radius-button: 100px;
}
@media (max-width: 1024px) {
  :root {
    --page-title-size: 42px;  --page-title-spacing: -0.02em;
    --section-title-size: 36px; --section-title-spacing: -0.02em;
    --widget-title-size: 30px;
    --small-title-size: 26px;
    --eyebrow-size: 20px;
    --body-line: 1.6;
    --page-side-gutter: 20px;
  }
}
@media (max-width: 767px) {
  :root {
    --page-title-size: 48px;  --page-title-line: 1; --page-title-spacing: -2.3px;
    --section-title-size: 36px; --section-title-spacing: -1px;
    --widget-title-size: 32px; --widget-title-spacing: -1.7px;
    --small-title-size: 28px;  --small-title-spacing: -1.4px;
    --eyebrow-size: 12px;      --eyebrow-line: 1.3;
    --intro-size: 18px;
    --body-size: 16px;
    --fineprint-size: 15px;
    --decorative-size: 17px;
    --section-padding-default: 60px;
    --page-side-gutter: 20px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--neutral-light); color: var(--neutral-medium);
  font-family: var(--text-font); font-size: var(--body-size); font-weight: 400; line-height: var(--body-line);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: inline-block; vertical-align: middle; }
a { color: var(--main-accent-default); text-decoration: none; transition: color .3s; }
a:hover { color: var(--main-accent-dark); }
p { margin: 0 0 20px; }
b, strong { font-weight: 700; }
ul, ol { margin: 0 0 20px; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--neutral-dark); font-weight: 400; }
h1 { font-family: var(--title-font); font-size: var(--page-title-size); line-height: var(--page-title-line); letter-spacing: var(--page-title-spacing); }
h2 { font-family: var(--title-font); font-size: var(--section-title-size); line-height: var(--section-title-line); letter-spacing: var(--section-title-spacing); }
h3 { font-family: var(--title-font); font-size: var(--widget-title-size); line-height: var(--widget-title-line); letter-spacing: var(--widget-title-spacing); font-weight: 500; }
h4 { font-family: var(--title-font); font-size: var(--small-title-size); line-height: var(--small-title-line); letter-spacing: var(--small-title-spacing); }
h5 { font-family: var(--text-font); font-size: var(--intro-size); line-height: 1.2; font-weight: 300; }
h6 { font-family: var(--text-font); font-size: var(--eyebrow-size); line-height: var(--eyebrow-line); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
button, input, select, textarea { font: inherit; color: inherit; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.icon .fa-secondary { opacity: .4; }
.skip-link { position: absolute; left: 10px; top: -60px; z-index: 6000; padding: 10px 16px; background: var(--neutral-white); color: var(--neutral-dark); border-radius: 8px; }
.skip-link:focus { top: 10px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--main-accent-default); outline-offset: 2px; }

/* ---------- Text styles (site styles) ---------- */
.page-title-h1 { font-family: var(--title-font); font-size: var(--page-title-size); line-height: var(--page-title-line); letter-spacing: var(--page-title-spacing); font-weight: 400; color: var(--neutral-dark); }
.section-title-h2 { font-family: var(--title-font); font-size: var(--section-title-size); line-height: var(--section-title-line); letter-spacing: var(--section-title-spacing); font-weight: 400; color: var(--neutral-dark); }
.widget-title-h3 { font-family: var(--title-font); font-size: var(--widget-title-size); line-height: var(--widget-title-line); letter-spacing: var(--widget-title-spacing); font-weight: 500; color: var(--neutral-dark); }
.small-title-h4 { font-family: var(--title-font); font-size: var(--small-title-size); line-height: var(--small-title-line); letter-spacing: var(--small-title-spacing); font-weight: 400; color: var(--neutral-dark); }
.eyebrow-label { font-family: var(--text-font); font-size: var(--eyebrow-size); line-height: var(--eyebrow-line); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--neutral-dark); }
.intro-text { font-family: var(--text-font); font-size: var(--intro-size); line-height: 1.2; font-weight: 300; }
.body-text { font-family: var(--text-font); font-size: var(--body-size); line-height: var(--body-line); font-weight: 400; color: var(--neutral-medium); }
.fineprint-text { font-family: var(--small-font); font-size: var(--fineprint-size); line-height: 1.6; font-weight: 400; }
.decorative-text { font-family: var(--small-font); font-size: var(--decorative-size); line-height: 1.5; font-weight: 400; }
.button-text { font-family: var(--text-font); font-size: var(--button-size); line-height: 1; font-weight: 700; }
.accent-words { color: var(--main-accent-default); }
.centered-text { text-align: center; }

/* ---------- Sections and layout ---------- */
.page-section { position: relative; }
.content-width { width: min(var(--content-max-width), 100% - 2 * var(--page-side-gutter)); margin-inline: auto; position: relative; }
.text-width { max-width: var(--text-max-width); margin-inline: auto; }
.section-padding-default { padding-block: var(--section-padding-default); }
.section-padding-compact { padding-block: var(--section-padding-compact); }
.section-padding-spacious { padding-block: var(--section-padding-spacious); }
.white-background-section { background-color: var(--neutral-white); }
.light-background-section { background-color: var(--neutral-light); }
.off-white-background-section { background-color: var(--off-white); }
.pale-grey-background-section { background-color: var(--pale-grey-background); }
.lavender-background-section { background-color: var(--lavender-background); }
.accent-background-section { background-color: var(--main-accent-default); color: var(--off-white); }
.dark-background-section { background-color: var(--main-accent-dark); color: var(--off-white); }
.image-background-section { background-size: cover; background-position: center; }
.accent-background-section :is(h1, h2, h3, h4, h5, h6), .dark-background-section :is(h1, h2, h3, h4, h5, h6) { color: var(--off-white); }
.accent-background-section a:not(.button), .dark-background-section a:not(.button) { color: var(--main-accent-light); }
.top-line { border-top: 1px solid var(--line-grey); }
.bottom-line { border-bottom: 1px solid var(--line-grey); }
.heading-group { display: flex; flex-direction: column; align-items: center; gap: 25px; text-align: center; }
.heading-group > p { margin: -6px 0 13px; }

/* Background videos (Vimeo, muted, looping) sit behind the section's content */
.background-video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; container-type: size; }
/* A 16:9 frame that always covers the section, like Elementor's background videos */
.background-video iframe { position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); max-width: none; transform: translate(-50%, -50%); border: 0; }
.page-section > .content-width, .page-section > .section-inner { z-index: 1; }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 25px; border: 0; border-radius: var(--radius-button);
  background-color: var(--main-accent-default); color: var(--off-white); box-shadow: 0 0 10px rgba(0, 0, 0, .05);
  font-family: var(--text-font); font-size: var(--button-size); font-weight: 700; line-height: 1; text-align: center;
  cursor: pointer; transition: transform .3s, background-color .3s, color .3s;
}
.button:hover, .button:focus-visible { color: var(--off-white); }
.button.is-floating:hover, .button.is-floating:focus-visible { transform: translateY(-8px); }
.button .icon { font-size: .95em; }
.button.is-soft-grey { background-color: var(--soft-grey-button); border: 1px solid var(--plum); color: var(--neutral-medium); }
.button.is-soft-grey:hover { color: var(--neutral-medium); }
.button.is-plum { background-color: var(--plum); }
.button.is-dark { background-color: var(--main-accent-dark); }
.button.is-slate { background-color: var(--neutral-dark); }
.button.is-lilac { background-color: var(--main-accent-light); }
.button.is-lavender { background-color: var(--lavender-background); color: var(--main-accent-default); box-shadow: none; }
.button.is-lavender:hover { color: var(--main-accent-default); }
.button.is-off-white { background-color: var(--off-white); border: 1px solid var(--line-grey); color: var(--neutral-medium); }
.button.is-off-white:hover { color: var(--neutral-medium); }
.button.is-violet-outline { background-color: transparent; border: 1px solid var(--deep-violet); color: var(--deep-violet); padding: 10px 20px; font-size: 13px; }
.button.is-violet-outline:hover { color: var(--deep-violet); }
.button.is-header-size { font-size: 15px; transition-duration: .8s; }
.button-row { display: flex; gap: 30px; align-items: flex-end; }
.button-row .button { flex: 0 1 auto; }

/* ---------- Header (shared) ---------- */
.site-header { position: sticky; top: 0; z-index: 5000; margin-bottom: -200px; }
/* The header bar is see-through at the top of the page; its off-white background fades in once the page scrolls */
.site-header::before { content: ""; position: absolute; inset: 0; background-color: var(--off-white); opacity: 0; border-radius: 50px; pointer-events: none; transition: opacity .3s; }
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-inner-pages-header { margin-bottom: 0; }
.header-content {
  position: relative; max-width: 1640px; margin-inline: auto;
  display: grid; grid-template-columns: .5fr 3fr; align-items: center; gap: 5px;
  padding: 10px 25px 0;
}
.header-logo { display: block; }
.header-logo img { width: 100%; transition: transform .8s; }
.header-logo:hover img { transform: scale(1.1); }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 15px; }
.main-navigation { display: flex; justify-content: center; }
.main-menu { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; }
.main-menu > li { position: relative; padding: 0 15px; text-align: center; }
.main-menu > li > a { display: flex; align-items: center; gap: 14px; color: var(--neutral-medium); font-size: 16px; font-weight: 300; letter-spacing: -.1px; line-height: 25.5px; }
.main-menu > li > a:hover, .main-menu > li > a[aria-current="page"] { color: var(--main-accent-default); }
.main-menu > li.only-in-mobile-menu { display: none; }
.sub-menu-toggle { display: none; }
.sub-menu { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.sub-menu li { padding-bottom: 5px; font-family: var(--small-font); font-size: 13px; line-height: 20.8px; color: var(--neutral-medium); }
.sub-menu li:last-child { padding-bottom: 0; }
.sub-menu a { color: var(--neutral-medium); display: block; }
.sub-menu a:hover { color: var(--main-accent-default); }
/* The burger menu (tablet and phone) */
.menu-open-button, .menu-close-button, .mobile-menu-logo { display: none; }

@media (max-width: 1366px) {
  .header-content { padding: 25px; }
}
@media (max-width: 1024px) {
  .header-content { grid-template-columns: 1fr auto; padding: 20px; }
  .header-logo { width: 304px; }
  .header-actions > .button { display: none; }
  .menu-open-button, .menu-close-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px; border: 0; background: none; color: var(--neutral-dark); font-size: 25px; cursor: pointer; box-shadow: none; }
  .main-navigation {
    position: fixed; inset: 0; z-index: 6000; display: block; overflow-y: auto; padding: 20px 15px 40px;
    background: var(--lavender-background); visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s;
  }
  .main-navigation.is-open { visibility: visible; opacity: 1; }
  .mobile-menu-logo { display: block; width: 180px; margin: 0 0 20px 10px; }
  .menu-close-button { position: absolute; top: 25px; right: 20px; color: var(--main-accent-default); font-size: 24px; }
  .main-menu { flex-direction: column; align-items: stretch; }
  .main-menu > li { padding: 0; text-align: left; }
  .main-menu > li.only-in-mobile-menu { display: block; }
  .main-menu > li > a { display: inline-flex; padding: 12px; font-size: 20px; }
  .main-menu > li.only-in-mobile-menu > a { color: var(--main-accent-default); gap: 12px; padding-top: 22px; }
  .main-menu > li.only-in-mobile-menu > a .icon { font-size: 20px; }
  .main-menu > li.only-in-mobile-menu + li.only-in-mobile-menu > a { padding-top: 12px; }
  .main-menu > li.only-in-mobile-menu + li.only-in-mobile-menu > a .icon { font-size: 18px; }
  .sub-menu li { font-size: 15px; line-height: 24px; padding-bottom: 5px; }
  body.menu-is-open { overflow: hidden; }
}
@media (max-width: 767px) {
  .site-header { margin-bottom: 0; }
  .site-header::before { border-radius: 0; }
  .header-content { grid-template-columns: 3fr 1fr; padding: 10px 20px 0; border-radius: 20px; }
  .header-logo { width: 50%; min-width: 130px; }
}

/* ---------- Footer (shared): contact section, links and credits ---------- */
.site-footer { background: var(--neutral-light); }
.footer-contact { padding: 80px 0 40px; }
.footer-contact-grid { display: grid; grid-template-columns: 1fr 1fr; }
.footer-contact-text { display: flex; flex-direction: column; gap: 35px; padding: 70px 100px 0 0; }
.footer-contact-text > p { margin: -6px 0 11px; }
.contact-details { display: grid; gap: 25px; padding-top: 10px; }
.contact-detail { display: flex; align-items: center; gap: 30px; min-height: 60px; }
.contact-detail-icon { display: flex; align-items: center; justify-content: center; width: 45px; height: 48px; color: var(--main-accent-default); font-size: 45px; }
.contact-detail-icon .icon { width: 45px; height: 45px; }
.contact-detail-line { align-self: stretch; width: 1px; background: var(--line-grey); }
.contact-detail-label { margin: -4px 0 5px; color: var(--main-accent-default); font-size: 16px; line-height: 1.2; letter-spacing: 3px; }
.contact-detail-label a { color: inherit; }
.contact-detail p { margin: 0 0 -7px; }
.contact-form-card { display: flex; flex-direction: column; gap: 30px; padding: 70px; border-radius: 25px; background: var(--main-accent-default); box-shadow: 0 1px 20px rgba(0, 0, 0, .04); color: var(--off-white); }
.contact-form-card > p { margin: -7px 0 12px; }
.contact-form-card :is(h1, h2) { margin: -5px 0 -16px; color: var(--off-white); font-size: var(--small-title-size); line-height: var(--small-title-line); letter-spacing: var(--small-title-spacing); }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.contact-form .full-width { grid-column: 1 / -1; }
.contact-form .form-submit { margin-top: 14px; }
.form-field { position: relative; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; min-height: 59px; padding: 7px 20px; border: 1px solid var(--line-grey); border-radius: 30px;
  background: transparent; color: var(--off-white); font-size: var(--body-size); line-height: var(--body-line); appearance: none;
}
.form-field textarea { height: 118px; resize: vertical; display: block; }
.form-field select { cursor: pointer; }
.form-field select option { color: var(--neutral-dark); }
.form-field ::placeholder { color: rgba(252, 250, 248, .6); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--neutral-dark); }
.select-arrow { position: absolute; right: 12px; top: 50%; width: 11px; height: 11px; margin-top: -5px; fill: var(--off-white); pointer-events: none; }
.contact-form .button { width: 100%; padding: 20px 40px; min-height: 40px; background: var(--lavender-background); border: 1px solid var(--lavender-background); color: var(--neutral-medium); }
.form-note { grid-column: 1 / -1; margin: 0; font-size: 15px; }
.footer-links-area { padding: 40px 0; }
.footer-line { height: 1px; margin: 15px 0; background: var(--line-grey); }
.footer-columns { display: flex; gap: 20px; padding: 40px 0; }
.footer-brand { flex: 0 0 457px; display: flex; flex-direction: column; padding-right: 129px; }
.footer-brand .footer-logo img { display: block; width: 328px; }
.footer-brand p { margin: 0 0 20px; color: var(--neutral-dark); font-size: 15.3px; line-height: 1.4; font-weight: 300; }
.social-links { display: flex; gap: 17px; margin: 0; padding: 0; list-style: none; }
.social-links li { line-height: 0; }
.social-links a { display: inline-flex; width: 22px; height: 22px; color: var(--line-grey); }
.social-links svg { width: 22px; height: 22px; fill: currentColor; }
.footer-menus { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.footer-menu { display: flex; flex-direction: column; gap: 20px; padding: 10px; }
.footer-menu h2 { color: var(--main-accent-default); font-size: 22.1px; line-height: 1.1; letter-spacing: -.9px; }
.footer-menu h2.is-smaller { font-size: 20.4px; }
.footer-menu ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.footer-menu li { padding-bottom: 4px; }
.footer-menu a { color: var(--neutral-dark); font-size: 15.3px; line-height: 25.5px; }
.footer-menu a:hover { color: var(--main-accent-default); }
.footer-bottom { display: flex; flex-direction: column; gap: 20px; }
.footer-bottom-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 10px; }
.credit-links { display: flex; flex-wrap: wrap; margin: 0 -13.5px; padding: 0; list-style: none; }
.credit-links li { position: relative; margin: 0 13.5px; color: var(--neutral-dark); font-size: 13.6px; line-height: 21.8px; }
.credit-links li + li::before { content: ""; position: absolute; left: -14px; top: 50%; height: 50%; transform: translateY(-50%); border-left: 1px solid var(--neutral-medium); }
.credit-links a { color: var(--neutral-dark); }
.credit-links a:hover { color: var(--main-accent-default); }
.women-owned-badge { flex: none; width: 100px; margin-left: 218px; }
@media (max-width: 1024px) {
  .footer-contact { padding: 80px 0; }
  .footer-contact-grid { grid-template-columns: 1fr; gap: 50px; }
  .footer-contact-text { padding: 0; gap: 30px; }
  .footer-contact-text p { max-width: 512px; }
  .contact-detail-label { font-size: 20px; }
  .footer-contact .content-width { width: 100%; }
  .footer-contact-text h2 { margin: -3px 0 -9px; }
  .footer-contact-text > p { margin: -6px 0 12px; }
  .footer-links-area .content-width { width: calc(100% - 80px); }
  .footer-brand { flex-basis: 335px; padding-right: 94px; }
  .footer-brand .footer-logo img { width: 240px; }
}
@media (max-width: 767px) {
  .footer-contact { padding: 60px 0; }
  .footer-contact .content-width { width: calc(100% - 60px); }
  .contact-form-card :is(h1, h2) { margin: -5px 0 -6px; }
  .women-owned-badge { margin-left: 0; }
  .footer-links-area .content-width { width: calc(100% - 40px); }
  .footer-menu ul { gap: 2px; }
  .contact-details { gap: 35px; }
  .contact-detail { flex-direction: column; align-items: flex-start; gap: 25px; }
  .contact-detail-line { display: none; }
  .contact-detail-label { font-size: 12px; line-height: 1.3; }
  .contact-form-card { padding: 50px 30px 30px; }
  .contact-form { grid-template-columns: 1fr; }
  .footer-links-area { padding: 20px 0; }
  .footer-columns { flex-direction: column; gap: 20px; }
  .footer-brand { flex: none; padding: 0; }
  .footer-brand .footer-logo img { width: 216px; }
  .footer-brand p { font-size: 14.4px; }
  .footer-menus { grid-template-columns: 1fr; }
  .footer-menu { padding: 0; }
  .footer-menu h2 { font-size: 19.2px; }
  .footer-menu li { padding-bottom: 2px; }
  .footer-menu a { font-size: 14.4px; }
  .footer-bottom-row { flex-direction: column; align-items: flex-start; }
}

/* ---------- Motion: soft fade-ins, like the source (Elementor entrance animations) ---------- */
.js [data-reveal] { opacity: 0; transition: opacity 1s ease, transform 1s ease; }
.js [data-reveal="fade-up"] { transform: translateY(40px); }
.js [data-reveal="fade-down"] { transform: translateY(-40px); }
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .button.is-floating:hover { transform: none; }
}

/* ---------- Line breaks in headings: a part on its own line (always, or on phones only) ---------- */
.own-line { display: block; }
@media (max-width: 767px) { .line-on-phones { display: block; } .hide-on-phones { display: none; } }

/* ---------- Header: menu pieces added by site.js, phone-menu buttons, plain sub-menu fallback ---------- */
.main-menu > li.has-sub-menu { display: flex; align-items: center; justify-content: center; gap: 14px; }
.sub-menu-toggle { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; box-shadow: none; color: var(--neutral-medium); font-size: 14px; width: 12px; cursor: pointer; transition: transform .3s; }
.has-sub-menu:hover > .sub-menu-toggle, .has-sub-menu.is-open > .sub-menu-toggle { transform: rotate(180deg); }
.mobile-menu-buttons { display: none; }
/* A plain sub-menu (what the editor's Menu screen writes) shows as a simple white drop-down */
.main-menu > .has-sub-menu > .sub-menu { position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%); min-width: 260px; padding: 20px 30px; background: var(--neutral-white); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); text-align: left; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.main-menu > .has-sub-menu:hover > .sub-menu, .main-menu > .has-sub-menu:focus-within > .sub-menu, .main-menu > .has-sub-menu.is-open > .sub-menu { opacity: 1; visibility: visible; }
@media (max-width: 1024px) {
  .main-menu > li.has-sub-menu { flex-wrap: wrap; justify-content: flex-start; gap: 0; }
  .sub-menu-toggle { width: auto; padding: 12px; font-size: 14px; }
  /* The header's two buttons, as on desktop */
  .mobile-menu-buttons { display: flex; flex-wrap: wrap; gap: 15px; padding: 22px 12px 0; }
  .main-menu > .has-sub-menu > .sub-menu { position: static; transform: none; flex-basis: 100%; display: none; padding: 20px; background: none; box-shadow: none; opacity: 1; visibility: visible; }
  .main-menu > .has-sub-menu.is-open > .sub-menu { display: flex; }
}

/* ---------- Sliders (site.js) ---------- */
[data-slider] { overflow: hidden; touch-action: pan-y; }
.slider-track { display: flex; align-items: center; will-change: transform; }
.slider-track > * { flex: none; }
.slider-dots { display: flex; justify-content: center; gap: 12px; }
.slider-dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: var(--soft-grey-button); box-shadow: none; cursor: pointer; }
.slider-dot.is-active { background: var(--main-accent-default); }
.slider-dot:hover { background: #000; }

/* ---------- Stars ---------- */
.star-rating { display: inline-flex; gap: 3px; color: #ffc400; }
.star-rating svg { width: 18px; height: 18px; fill: currentColor; }
.star-rating.is-gold { color: var(--star-gold); }
.star-rating.is-gold svg { width: 16px; height: 16px; margin: 0; }

/* ---------- Video hero (home): centred titles over a muted background video ---------- */
.video-hero { display: flex; align-items: center; min-height: 94vh; padding: 300px 0 150px; overflow: hidden; background: var(--soft-grey-button) url("images/thumb-4-1.webp") center / cover; }
.video-hero::before, .video-hero .background-video::after { content: ""; position: absolute; inset: 0; background: var(--off-white); opacity: .86; }
.video-hero::before { z-index: 0; }
.video-hero-content { z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 30px; max-width: 850px; text-align: center; }
.video-hero-title { font-size: 72px; line-height: 1.1; letter-spacing: -3.2px; text-transform: capitalize; }
.video-hero-text { margin: 0 0 20px; font-size: 20px; line-height: 1.6; font-weight: 300; letter-spacing: -.3px; color: var(--neutral-medium); }
.video-hero-text b { font-weight: 400; }
.video-hero-subtitle { max-width: 850px; margin-bottom: -20px; }
.two-equal-buttons { display: grid; grid-template-columns: repeat(2, 245px); gap: 10px; padding: 10px 0; }
.two-equal-buttons .button { width: 100%; }
.rating-line { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; font-size: 17px; line-height: 26px; }
@media (max-width: 1024px) {
  .video-hero-subtitle { max-width: 360px; }
  .video-hero-title { max-width: 360px; font-size: 45px; line-height: 1; letter-spacing: -.02em; }
}
@media (max-width: 767px) {
  /* Full screen under the see-through header, content in the middle of the screen */
  .video-hero { min-height: 100vh; min-height: 100svh; margin-top: calc(-1 * var(--header-height, 57px)); padding: calc(var(--header-height, 57px) + 30px) 30px; align-items: center; }
  .video-hero .background-video { display: none; }
  .video-hero::before { opacity: .86; }
  .video-hero-content { gap: 20px; width: 100%; }
  .video-hero-title { max-width: none; font-size: 42px; }
  .video-hero-text { font-size: 14.4px; line-height: 1.4; }
  .two-equal-buttons { grid-template-columns: 1fr; width: 100%; gap: 15px; padding: 10px; }
  .rating-line { flex-wrap: wrap; font-size: 16px; }
}

/* ---------- Logo strips (sliders of partner and insurance logos) ---------- */
.logo-strip { padding: 5px 0; }
.logo-slide { display: block; text-align: center; }
.logo-slide img { width: 100%; vertical-align: baseline; }
/* On phones the insurance logo strip stops and shows its logos in two columns (data-grid-on-phones);
   an odd last logo sits centred on its own row */
@media (max-width: 766px) {
  [data-grid-on-phones] .slider-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 25px 35px; padding: 20px; transform: none; }
  [data-grid-on-phones] .slider-track > [aria-hidden="true"] { display: none; }
  [data-grid-on-phones] .slider-track > :nth-child(odd of :not([aria-hidden])):nth-last-child(1 of :not([aria-hidden])) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 35px) / 2); }
}

/* ---------- Stacked sections: a heading group above content ---------- */
.stacked-section { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.stacked-section.is-wide-gap { gap: 70px; }
.stacked-section > * { width: 100%; }
.stacked-section > .heading-group { max-width: var(--text-max-width); }
@media (max-width: 1024px) { .stacked-section { gap: 60px; } .stacked-section.is-wide-gap { gap: 60px; } }
@media (max-width: 767px) { .stacked-section, .stacked-section.is-wide-gap { gap: 50px; } .stacked-section.is-no-gap-on-phones { gap: 0; } }
@media (max-width: 1024px) { .heading-group { gap: 30px; } }

/* ---------- Audience cards: "For Parents" and "For Care Organizations" ---------- */
.audience-cards { display: flex; gap: 30px; padding: 10px; }
.audience-card { flex: 1 1 0; display: flex; flex-direction: column; gap: 30px; padding: 47px 50px 50px; border-top: 3px solid var(--main-accent-light); border-radius: var(--radius-card); background: var(--neutral-light); transition: border .3s; }
.audience-card.is-lilac { border-top-color: var(--main-accent-default); background: var(--main-accent-light); }
.audience-card-heading { padding-bottom: 8px; }
.audience-card-icon { display: block; width: 109px; height: 109px; margin-bottom: 4px; }
.audience-card-title { margin: 8px 0 16px; }
.audience-card-title.has-subtitle { margin-bottom: 9px; }
.audience-card-subtitle { margin: 0; font-size: 18px; line-height: 1; }
.audience-card .button-row { margin-top: auto; }
@media (max-width: 1366px) { .audience-cards { width: 938px; max-width: 100%; margin-inline: auto; gap: 35px; } }
@media (max-width: 1024px) { .audience-card-icon { width: 72px; height: 72px; } }
@media (max-width: 767px) {
  .audience-cards { flex-direction: column; gap: 35px; padding: 0; }
  .audience-card { padding: 30px; }
  .audience-card-icon { width: 61px; height: 61px; }
  .audience-card-title:not(.has-subtitle) { margin-bottom: 0; }
  .audience-card .button-row { flex-direction: column; align-items: center; gap: 15px; }
  .audience-card .button-row .button { width: 100%; }
}

/* ---------- Line texture section and journey map ---------- */
.line-texture-section { overflow: hidden; }
.line-texture-section::before { content: ""; position: absolute; inset: 0; background: url("images/shutterstock-2475710077-1600x1066.webp") top center / cover; opacity: .13; pointer-events: none; }
.journey-map-inner { position: relative; max-width: 1480px; margin-inline: auto; padding: 80px 40px 0; display: flex; flex-direction: column; gap: 20px; }
.journey-map-inner > p { margin-bottom: 11px; }
.journey-map { width: 100%; }
@media (max-width: 767px) { .journey-map-inner { padding: 50px 0 0; } }

/* ---------- Insurance logos and gift card box ---------- */
.insurance-section { padding: 40px 0 80px; }
.insurance-block { display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 40px; }
.insurance-logos { width: 100%; }
.gift-card-box { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 35px 40px 40px; border: 3px dotted var(--soft-grey-button); border-radius: 30px; background: var(--pink-white); text-align: center; }
.gift-card-box img { width: 200px; }
.gift-card-box h3 { margin: 8px 0 -10px; }
.gift-card-box p { max-width: 900px; margin: 0; }
@media (max-width: 1024px) { .insurance-section { padding: 80px 0; } .gift-card-box { padding: 40px; } }
@media (max-width: 767px) { .insurance-section { padding: 60px 0; } .insurance-block { padding: 0; } .gift-card-box { padding: 40px 20px; } }

/* ---------- Video testimonials (carousel of parents' video reviews) ---------- */
.video-testimonials { display: flex; flex-direction: column; }
.video-testimonials-viewport { padding-bottom: 0; }
.video-testimonials .slider-track { align-items: stretch; }
.video-testimonial { display: flex; flex-direction: column; align-items: center; gap: 25px; text-align: center; }
.video-thumbnail { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: #000; cursor: pointer; box-shadow: none; }
.video-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.video-play-icon { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%); fill: #fff; opacity: .8; filter: drop-shadow(1px 0 6px rgba(0, 0, 0, .3)); transition: opacity .3s; }
.video-thumbnail.is-small-play .video-play-icon { width: 50px; height: 50px; fill: var(--off-white); }
.video-thumbnail:hover .video-play-icon { opacity: 1; }
.video-frame { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 20px; background: #000; }
.video-testimonial-quote { margin: 0; }
.video-testimonial-quote p { margin: 0 0 20px; font-family: var(--small-font); font-size: 14px; line-height: 1.6; }
.video-testimonial-name { margin: 8px 0 16px; color: var(--neutral-dark); font-size: var(--eyebrow-size); line-height: var(--eyebrow-line); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.video-testimonials .slider-dots { margin-top: 25px; margin-bottom: 25px; }
.centered-button { display: flex; justify-content: center; padding-top: 20px; }
@media (max-width: 767px) {
  .video-testimonial-quote p { font-size: 15px; }
  .centered-button { justify-content: flex-start; }
  .video-testimonials .centered-button { justify-content: center; }
}

/* ---------- Call to action band over a background video ---------- */
.video-call-to-action { padding: 80px 0; overflow: hidden; }
.video-call-to-action::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--off-white) 44%, rgba(0, 0, 0, 0) 100%); }
.video-call-to-action-inner { z-index: 2; display: flex; align-items: center; justify-content: center; }
.video-call-to-action-text { flex: 0 0 683px; display: flex; flex-direction: column; gap: 20px; padding: 10px; }
.video-call-to-action-buttons { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 20px; padding: 10px; }
@media (max-width: 1024px) {
  .video-call-to-action { padding: 150px 0; }
  .video-call-to-action-text { flex-basis: 500px; }
}
@media (max-width: 767px) {
  .video-call-to-action { padding: 80px 0; }
  .video-call-to-action::before { background: var(--off-white); opacity: .8; }
  .video-call-to-action-inner { flex-wrap: wrap; }
  .video-call-to-action-text { flex: 0 0 100%; text-align: center; }
  .video-call-to-action-buttons { flex-wrap: wrap; justify-content: center; gap: 10px; }
}

/* ---------- Post and plain page frame: the title area over a line texture (posts, legal pages, gift card...) ---------- */
.post-page-top { background: url("images/shutterstock-2475710077-1600x1066.webp") center top / contain no-repeat; }
.post-page-top::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(252, 250, 248, .72) 14%, var(--neutral-light) 33%); pointer-events: none; }
.post-page-top-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; padding: 270px 0 50px; }
.post-page-content > :last-child { margin-bottom: 0; }
.post-page-content > h2, .post-page-content > h3, .post-page-content > h4 { margin-bottom: 20px; }
@media (max-width: 1024px) { .post-page-top > .content-width { width: calc(100% - 80px); } }
@media (max-width: 767px) { .post-page-top > .content-width { width: calc(100% - 40px); } .post-page-top-inner { padding: 60px 0 20px; } }

/* ---------- Call to action band over the line texture: "Not Sure What You Need?" ---------- */
.line-texture-band { padding-inline: 40px; border-block: 1px solid #e0d8d0; overflow: hidden; }
.line-texture-band::before { content: ""; position: absolute; inset: -1px 0 0; background: url("images/shutterstock-2475710077-1000x667.webp") center / cover; opacity: .17; pointer-events: none; }
@media (min-width: 1025px) { .line-texture-band::before { background-attachment: fixed; } }
.line-texture-band-inner { position: relative; z-index: 1; max-width: 900px; margin-inline: auto; padding: 80px 0; display: flex; flex-direction: column; justify-content: center; gap: 30px; text-align: center; }
.line-texture-band .line-texture-band-title { margin-bottom: -30px; color: var(--off-white); }
.line-texture-band .line-texture-band-subtitle { color: var(--lavender-background); font-size: var(--widget-title-size); line-height: var(--widget-title-line); letter-spacing: var(--widget-title-spacing); font-weight: 500; }
.line-texture-band p { color: var(--neutral-white); }
.line-texture-band-buttons { display: flex; justify-content: center; align-items: flex-end; gap: 30px; }
.line-texture-band-buttons .button { transition-duration: .8s; }
@media (max-width: 767px) {
  .line-texture-band { padding-inline: 20px; }
  .line-texture-band-inner { padding: 60px 0; }
  .line-texture-band-buttons { flex-direction: column; align-items: center; gap: 15px; }
}

/* Gift card page: image beside a title */
.image-beside-title { display: flex; gap: 20px; }
.image-beside-title > * { flex: 1 1 0; display: flex; flex-direction: column; gap: 20px; }
.image-beside-title .intro-text { margin: 0; color: var(--neutral-dark); }
.image-beside-title img { width: 100%; }
@media (max-width: 767px) { .image-beside-title { flex-direction: column; } }

/* ---------- Pop-up form: a native dialog holding a purple form card ---------- */
dialog.form-dialog { width: min(600px, 100% - 40px); max-height: calc(100% - 40px); margin: auto; padding: 0; border: 0; border-radius: 25px; background: transparent; overflow: auto; }
/* The pop-up looks the same whichever section its button sits in: left-aligned, nothing inherited from there */
dialog.form-dialog { text-align: left; font-size: var(--body-size); line-height: var(--body-line); font-weight: 400; letter-spacing: normal; color: var(--neutral-medium); }
.form-dialog::backdrop { background: rgba(42, 47, 54, .6); }
body:has(dialog[open]) { overflow: hidden; }
.form-dialog-card { position: relative; }
.form-dialog-close { position: absolute; top: 20px; right: 20px; display: inline-flex; padding: 8px; border: 0; background: none; box-shadow: none; color: var(--off-white); font-size: 22px; cursor: pointer; }
.get-more-info-page .form-dialog-card { width: min(600px, 100%); margin-inline: auto; } /* the page the pop-up comes from (get-more-info.html) */
.interest-choices { min-width: 0; margin: 0; padding: 0 0 0 20px; border: 0; }
.interest-choices legend { margin-bottom: 12px; padding: 0; color: var(--off-white); font-size: var(--body-size); }
.interest-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.interest-choice { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.4; cursor: pointer; }
.interest-choice input { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--plum); }
@media (max-width: 767px) {
  .interest-choices { padding-left: 0; }
  .interest-choice-grid { grid-template-columns: 1fr; }
}

/* The Get More Info pop-up (get-more-info.html): white, its title in a purple box, a label over each field,
   one column, round check boxes, compact so it fits a laptop screen without scrolling (designer, 2026-10-22) */
.contact-form-card.is-light { gap: 14px; padding: 10px; border: 1px solid #e4e4ea; border-radius: 18px; background: var(--neutral-white); color: var(--neutral-medium); }
.is-light .info-request-head { padding: 16px 56px 16px 18px; border-radius: 12px; background: var(--main-accent-default); color: var(--neutral-white); }
.is-light .info-request-head > * { margin: 0; }
.is-light .info-request-head :is(h1, h2) { margin: 0 0 6px; color: var(--neutral-white); font-family: var(--text-font); font-size: 20px; line-height: 1.3; letter-spacing: 0; font-weight: 700; }
.is-light .info-request-head p { font-size: 14px; line-height: 1.4; }
.is-light .form-dialog-close { top: 14px; right: 14px; color: var(--neutral-white); }
.is-light .contact-form { grid-template-columns: minmax(0, 1fr); gap: 11px; padding: 0 10px 8px; }
.is-light .form-field label, .is-light .interest-choices legend { display: block; margin: 0 0 4px; padding: 0; color: var(--neutral-dark); font-size: 14px; line-height: 1.35; font-weight: 600; }
.is-light .form-field input, .is-light .form-field select, .is-light .form-field textarea { min-height: 38px; padding: 6px 16px; border-color: var(--line-grey); background: var(--neutral-white); color: var(--neutral-medium); font-size: 14px; }
.is-light .form-field textarea { height: 62px; border-radius: 14px; }
.is-light .form-field ::placeholder { color: var(--muted-text); }
.is-light .form-field select:has(option[value=""]:checked) { color: var(--muted-text); }
.is-light .form-field input:focus, .is-light .form-field select:focus, .is-light .form-field textarea:focus { border-color: var(--main-accent-default); }
.select-wrap { position: relative; display: block; }
.is-light .select-arrow { right: 16px; fill: var(--neutral-medium); }
.is-light .interest-choices { padding: 0; }
.is-light .interest-help { margin: -2px 0 8px; font-size: 12px; line-height: 1.35; color: var(--muted-text); }
.is-light .interest-choice-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
/* Its form is the client's Jotform (designer, 2026-10-28) in a frame. The frame takes the form's own height as the form
   reports it (site.js, Jotform in a frame); these heights only hold until the form has loaded */
.form-dialog-card .jotform-embed { display: block; width: 100%; height: 620px; border: 0; }
@media (max-width: 767px) { .form-dialog-card .jotform-embed { height: 860px; } }
.is-light .interest-choice { align-items: center; gap: 9px; font-size: 14px; line-height: 1.35; color: var(--neutral-medium); }
.is-light .interest-choice input { appearance: none; width: 16px; height: 16px; margin: 0; border: 1.5px solid #9aa0a8; border-radius: 50%; background: var(--neutral-white); cursor: pointer; }
.is-light .interest-choice input:checked { border-color: var(--neutral-dark); background: var(--neutral-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.is-light .interest-choice input:focus-visible { outline: 2px solid var(--main-accent-default); outline-offset: 2px; }
.is-light .contact-form .form-submit { margin-top: 2px; }
.is-light .contact-form .button { min-height: 42px; padding: 10px 30px; border-color: var(--main-accent-default); background: var(--main-accent-default); color: var(--neutral-white); }
.is-light .contact-form .button:hover, .is-light .contact-form .button:focus-visible { border-color: var(--main-accent-dark); background: var(--main-accent-dark); }
.is-light .form-note { font-size: 15px; }
@media (min-width: 768px) { /* larger screens: the short fields and the check boxes two to a row, so it fits a laptop screen */
  .is-light .contact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .is-light .interest-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
}

/* ---------- About Us and For Parents pages: title-beside-picture heroes, rounded cards, accordions,
   the journey stage panels and the reviews carousel (builder file 10).
   Reused from the other parts: .rich-text (+ .has-no-bottom-space), .icon-list (+ .has-dividers, .has-icon-gap),
   .helpful-guides-section (+ .is-pink-white) with its cards, .woven-pattern-background ---------- */
:root {
  --card-shadow-violet: rgba(120, 57, 151, .28);     /* hard shadow under the white and purple cards */
  --card-shadow-lilac: rgba(161, 129, 216, .19);     /* softer hard shadow under the other cards */
  --accordion-line-grey: #d5d8dc;                    /* accordion borders */
  --accordion-title-black: #1f2124;                  /* accordion titles and their plus/minus icons */
  --offer-card-shadow: rgba(59, 44, 109, .21);       /* class and visit cards inside the journey accordion */
  --review-card-line: #e1e8ed;                       /* review card border and divider */
  --review-date-grey: #697882;
  --carousel-arrow-grey: rgba(237, 237, 237, .9);
  --carousel-dot: #000000;
}

.pink-white-background-section { background-color: var(--pink-white); }

/* ---------- Hero: title and text beside a picture, over the line texture ---------- */
.title-beside-picture-hero { padding: 280px 0 40px; background-color: var(--neutral-light); overflow-x: clip; }
.title-beside-picture-hero::before { content: ""; position: absolute; inset: 0; background: url("images/shutterstock-2475710077.webp") 0 0 / cover; opacity: .1; pointer-events: none; }
.title-beside-picture-hero-inner { position: relative; z-index: 1; display: flex; gap: 20px; max-width: 1400px; margin-inline: auto; }
.title-beside-picture-hero-text { position: relative; z-index: 2; flex: 0 0 50%; display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; padding: 10px; }
.title-beside-picture-hero-text .eyebrow-label { margin: 0; }
.title-beside-picture-hero-paragraphs { margin-bottom: -20px; }
.title-beside-picture-hero-paragraphs p { margin: 0 0 15px; }
.hero-closing-line { margin: 0; font-family: var(--title-font); font-size: 23px; line-height: 1.1; letter-spacing: -1.2px; color: var(--plum); }
.title-beside-picture-hero-picture { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; }
.title-beside-picture-hero-picture img { display: block; width: 119%; max-width: none; margin-left: -9%; }
/* About Us: "From Our Blog", the three newest Parent Education articles as the list page's cards (50-articles),
   three to a row, photos cropped alike, then "View All Articles" (designer, 2026-10-22) */
.about-blog-section .wide-stack { gap: 30px; padding-bottom: 50px; }
.about-blog-head { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.about-blog-head > * { margin: 0; }
.about-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.about-blog-grid .post-list-card { height: 100%; background: var(--neutral-white); }
.about-blog-grid .post-list-card-image img { aspect-ratio: 3 / 2; object-fit: cover; }
.about-blog-grid .post-list-card-text { padding: 0 28px 4px; }
.about-blog-grid .post-list-card-read-more { color: var(--main-accent-default); } /* readable on the white card */
.about-blog-grid .post-list-card-read-more:hover { color: var(--plum); }
.about-blog-more { display: flex; justify-content: center; }
@media (max-width: 1024px) { .about-blog-grid { gap: 20px; } .about-blog-grid .post-list-card-text { padding: 0 20px 4px; } }
@media (max-width: 767px) {
  .about-blog-grid { grid-template-columns: minmax(0, 1fr); }
  .about-blog-section .wide-stack { padding-bottom: 20px; }
  /* Phones: no category badge, a shorter photo, a larger title (designer, 2026-10-22) */
  .about-blog-grid .post-list-card-badge { display: none; }
  .about-blog-grid .post-list-card-image img { aspect-ratio: 2 / 1; }
  .about-blog-grid .post-list-card-title { font-size: 20px; line-height: 1.35; }
}
/* About Us: "For Parents" and "Partner With Us" under the hero and Our Impact (designer, 2026-10-22); on phones one above the other, full width */
.about-buttons { flex-wrap: wrap; gap: 15px 20px; }
@media (max-width: 767px) { .about-buttons { flex-direction: column; align-items: stretch; } }
/* About Us: a photo in place of the illustration, framed like the site's other photos (rounded, violet shadow) */
.title-beside-picture-hero.has-photo .title-beside-picture-hero-picture { justify-content: center; padding: 10px 20px 20px 30px; }
.title-beside-picture-hero.has-photo .title-beside-picture-hero-picture img { width: 100%; height: auto; margin: 0; border-radius: 15px; box-shadow: 9px 9px 0 var(--photo-shadow-violet); }
@media (max-width: 1024px) {
  .title-beside-picture-hero-inner { flex-direction: column; }
  .title-beside-picture-hero-text { flex-basis: auto; }
  .title-beside-picture-hero-picture { flex-basis: auto; padding: 0; }
  .title-beside-picture-hero-picture img { width: 90%; margin: -6% 5% 0; }
  .title-beside-picture-hero.has-photo .title-beside-picture-hero-picture { padding: 20px 19px 9px 10px; }
}
@media (max-width: 767px) {
  .title-beside-picture-hero { padding: 60px 10px 30px; }
  .title-beside-picture-hero-text .eyebrow-label, .title-beside-picture-hero-text h1 { text-align: center; }
  .title-beside-picture-hero-picture img { width: 100%; margin: 0; }
  .title-beside-picture-hero.has-photo .title-beside-picture-hero-picture { padding: 20px 10px 6px; }
  .title-beside-picture-hero.has-photo .title-beside-picture-hero-picture img { box-shadow: 6px 6px 0 var(--photo-shadow-violet); }
  /* About Us on phones: the photo between the title and the paragraphs (designer, 2026-10-22) */
  .title-beside-picture-hero.has-photo .title-beside-picture-hero-text { display: contents; }
  .title-beside-picture-hero.has-photo .title-beside-picture-hero-text > * { margin-inline: 10px; }
  .title-beside-picture-hero.has-photo .title-beside-picture-hero-text > :is(.eyebrow-label, h1) { order: -1; }
  .title-beside-picture-hero.has-photo .title-beside-picture-hero-text > :not(.eyebrow-label, h1) { order: 1; }
  .title-beside-picture-hero.has-photo .title-beside-picture-hero-picture { padding: 0 10px 6px; }
}

/* ---------- Wide stacks of cards (up to 1400px) ---------- */
.wide-stack-section { padding: 10px; }
.wide-stack-section.is-spacious { padding: 40px; }
.wide-stack-section.is-text-section { margin: 40px 0; padding: 20px; }
.wide-stack { display: flex; flex-direction: column; gap: 20px; max-width: 1400px; margin-inline: auto; }
@media (max-width: 767px) {
  .wide-stack-section, .wide-stack-section.is-spacious { padding: 20px; }
  .wide-stack-section.is-text-section { margin: 0; padding: 25px 20px; }
}

/* Rounded cards with a hard offset shadow */
.rounded-card { border-radius: 10px; background-color: var(--neutral-white); box-shadow: 7px 7px 0 0 var(--card-shadow-lilac); }
.rounded-card.is-violet-shadow { box-shadow: 7px 7px 0 0 var(--card-shadow-violet); }
.rounded-card.is-pink-white { background-color: var(--pink-white); }
.rounded-card.is-off-white { background-color: var(--off-white); }
.rounded-card.is-accent { background-color: var(--main-accent-default); color: var(--rose-white); }
.rounded-card.has-space-below { margin-bottom: 40px; }

/* Card: text beside a diagram (the diagram 90% wide, on the right) */
.text-beside-diagram-card { display: flex; gap: 20px; padding: 40px; }
.text-beside-diagram-card-text { flex: 0 1 60%; min-width: 0; }
.text-beside-diagram-card-diagram { flex: 0 1 40%; min-width: 0; }
.text-beside-diagram-card-diagram img { display: block; width: 90%; margin-left: auto; }
@media (max-width: 767px) {
  .text-beside-diagram-card { flex-wrap: wrap; gap: 10px; padding: 20px; }
  .text-beside-diagram-card-text, .text-beside-diagram-card-diagram { flex-basis: 100%; }
  .text-beside-diagram-card-diagram img { width: 100%; }
}

/* Card: a photo filling one side, text on the other */
.photo-beside-text-card { display: flex; gap: 20px; }
.photo-beside-text-card-photo { position: relative; flex: 0 1 40%; border-radius: 10px; overflow: hidden; }
.photo-beside-text-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-beside-text-card-text { flex: 0 1 60%; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 40px; }
.photo-beside-text-card.is-narrow-photo .photo-beside-text-card-photo { flex-basis: 30%; border-radius: 10px 0 0 10px; }
.photo-beside-text-card.is-narrow-photo .photo-beside-text-card-photo img { object-position: 63% 0; }
.photo-beside-text-card.is-narrow-photo .photo-beside-text-card-text { flex-basis: 70%; }
@media (max-width: 1024px) {
  .photo-beside-text-card.is-narrow-photo { padding: 30px; }
  .photo-beside-text-card.is-narrow-photo .photo-beside-text-card-photo img { object-position: 0 0; }
}
@media (max-width: 767px) {
  .photo-beside-text-card, .photo-beside-text-card.is-narrow-photo { flex-wrap: wrap; gap: 10px; padding: 20px; }
  .photo-beside-text-card-photo, .photo-beside-text-card.is-narrow-photo .photo-beside-text-card-photo { flex-basis: 100%; min-height: 200px; order: -1; }
  .photo-beside-text-card-text, .photo-beside-text-card.is-narrow-photo .photo-beside-text-card-text { flex-basis: 100%; padding: 5px; }
  .photo-beside-text-card.is-narrow-photo .photo-beside-text-card-text { padding: 30px 0 0 5px; }
  .photo-beside-text-card.is-narrow-photo .photo-beside-text-card-photo { min-height: 250px; border-radius: 10px; }
  .photo-beside-text-card.is-narrow-photo.has-space-below { margin-bottom: 0; }
}

/* Card: text (70%) beside a round photo (30%) */
.text-with-round-photo-card { display: flex; gap: 20px; padding: 40px; }
.text-with-round-photo-card-text { flex: 0 0 70%; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 10px; }
.text-with-round-photo-card-photo { flex: 0 0 30%; padding: 10px; }
.text-with-round-photo-card-photo img { display: block; width: 100%; border-radius: 50%; }
@media (max-width: 1366px) {
  .text-with-round-photo-card-text { flex-basis: 817.68px; }
  .text-with-round-photo-card-photo { flex-basis: 338.32px; }
}
@media (max-width: 1024px) {
  .text-with-round-photo-card { padding: 30px; }
  .text-with-round-photo-card-text { flex: 1 1 0; }
  .text-with-round-photo-card-photo { flex-basis: 28%; }
}
@media (max-width: 767px) {
  .text-with-round-photo-card { flex-wrap: wrap; gap: 10px; padding: 20px; }
  .text-with-round-photo-card-text, .text-with-round-photo-card-photo { flex: 0 0 100%; }
  .text-with-round-photo-card.is-photo-first-on-phone .text-with-round-photo-card-photo { order: -1; }
  .text-with-round-photo-card.is-photo-first-on-phone .text-with-round-photo-card-text { padding: 0; }
}

/* Accordion with square bordered rows; the icon (plus or minus) before the title */
.bordered-accordion details > summary {
  display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--accordion-line-grey);
  color: var(--accordion-title-black); font-size: 16px; line-height: calc(var(--body-size) * var(--body-line)); cursor: pointer; list-style: none;
}
.bordered-accordion details > summary::-webkit-details-marker { display: none; }
.bordered-accordion summary svg { flex: none; width: 13px; height: 15px; fill: currentColor; }
.bordered-accordion details > summary .bordered-accordion-open-icon, .bordered-accordion details[open] > summary .bordered-accordion-closed-icon { display: none; }
.bordered-accordion details[open] > summary .bordered-accordion-open-icon { display: block; }
.bordered-accordion details > div { padding: 25px; border: 1px solid var(--accordion-line-grey); background-color: var(--pale-grey-background); }

/* Icon list variant: icons in the text colour */
.icon-list.has-text-coloured-icons .icon { color: var(--neutral-medium); }

/* Purple card with the founder's message */
.rich-text > .founder-role { margin: 8px 0 16px; color: var(--neutral-dark); }
.founder-message-card { padding: 40px; }
.founder-message-card h3, .founder-message-quote .small-title-h4 { color: var(--neutral-white); }
.founder-message-quote { margin: 0; }
.founder-message-quote > p, .founder-message-quote > footer { margin: 0 0 20px; }
.founder-message-quote > p.small-title-h4 { margin: 8px 0 16px; }
@media (max-width: 767px) { .founder-message-card { padding: 20px; } }

/* Card with centred text and stacked buttons */
.centered-call-to-action-card { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px; text-align: center; }
.centered-call-to-action-card-text { width: 800px; max-width: 100%; }
@media (max-width: 1024px) { .centered-call-to-action-card { padding: 30px; } }
@media (max-width: 767px) { .centered-call-to-action-card { padding: 30px 20px 20px; } }

/* ---------- Hero variant: a wider title column, the picture bleeding to the left behind it ---------- */
.title-beside-picture-hero.is-wide-title { padding: 280px 40px 0; }
.title-beside-picture-hero.is-wide-title .title-beside-picture-hero-inner { max-width: 1600px; }
.title-beside-picture-hero.is-wide-title .title-beside-picture-hero-text { z-index: auto; flex: 0 0 60%; justify-content: center; padding: 7% 5%; }
.title-beside-picture-hero.is-wide-title .title-beside-picture-hero-picture { flex: 0 1 52%; padding: 0; }
.title-beside-picture-hero.is-wide-title .title-beside-picture-hero-picture img { width: 160%; margin-left: -50%; pointer-events: none; }
.title-beside-picture-hero-intro { max-width: 72%; margin: 0 0 15px; }
.title-beside-picture-hero-subtitle { max-width: 850px; margin-bottom: -20px; color: var(--deep-violet); }
.title-beside-picture-hero .two-equal-buttons { padding: 20px 0 0; }
@media (max-width: 1024px) {
  .title-beside-picture-hero.is-wide-title .title-beside-picture-hero-text { flex-basis: auto; }
  .title-beside-picture-hero.is-wide-title .title-beside-picture-hero-picture { flex-basis: auto; }
  .title-beside-picture-hero.is-wide-title .title-beside-picture-hero-picture img { width: 90%; margin: -6% 5% 0; }
  .title-beside-picture-hero-subtitle { max-width: 360px; margin: -3px 0 -8px; }
}
@media (max-width: 767px) {
  .title-beside-picture-hero.is-wide-title { padding: 0; }
  .title-beside-picture-hero.is-wide-title .title-beside-picture-hero-text { padding: 50px 20px 40px; text-align: center; }
  .title-beside-picture-hero-intro { max-width: none; }
  .title-beside-picture-hero-subtitle { max-width: none; margin: 0 0 -20px; }
}

/* "How Can We Help?": a dotted box with the journey accordion */
.journey-help-section { padding: 80px 40px; border-block: 1px solid var(--sand-line); }
.journey-help-inner { position: relative; z-index: 1; max-width: 1400px; margin-inline: auto; }
.dotted-border-box { display: flex; flex-direction: column; gap: 20px; padding: 60px max(60px, calc((100% - 1176px) / 2)); border: 3px dotted var(--soft-grey-button); border-radius: 30px; background-color: var(--off-white); }
.dotted-border-box > .eyebrow-label { margin: 0; }
.journey-help-closing { align-self: center; width: 600px; max-width: 100%; padding-top: 30px; }
.two-equal-buttons.is-compact { align-self: center; grid-template-columns: repeat(2, 195px); padding: 10px 0; }
@media (max-width: 1366px) { .journey-help-section { padding: 40px; } }
@media (max-width: 1024px) {
  .journey-help-section { padding: 30px; }
  .dotted-border-box { padding: 40px max(40px, calc((100% - 1176px) / 2)); }
}
@media (max-width: 767px) {
  .journey-help-section { padding: 0 0 70px; }
  .dotted-border-box { padding: 60px 20px; }
  .two-equal-buttons.is-compact { width: calc(100% - 20px); grid-template-columns: 1fr; gap: 10px; padding: 10px 0; }
}

/* Accordion of rounded "pill" rows, the title centred with its plus/minus icon after it */
.pill-accordion { align-self: center; width: 100%; max-width: 900px; padding-top: 20px; }
.pill-accordion details:not(:last-child) { margin-bottom: 10px; }
.pill-accordion summary {
  display: flex; justify-content: center; align-items: center; gap: 10px; padding: 15px; border: 1px solid var(--accordion-line-grey); border-radius: 50px;
  background-color: var(--neutral-white); color: var(--accordion-title-black); font-size: 22.1px; font-weight: 300; letter-spacing: -.3px;
  line-height: calc(var(--body-size) * var(--body-line)); cursor: pointer; list-style: none; transition: background-color .3s, color .3s;
}
.pill-accordion summary { scroll-margin-top: calc(var(--header-height, 70px) + 10px); }
.pill-accordion summary::-webkit-details-marker { display: none; }
.pill-accordion summary:hover { background-color: var(--plum); color: var(--off-white); }
.pill-accordion details[open] > summary { background-color: var(--lavender-background); color: var(--accordion-title-black); }
.pill-accordion summary svg { flex: none; width: 13px; height: 15px; fill: currentColor; }
.pill-accordion summary .pill-accordion-open-icon, .pill-accordion details[open] > summary .pill-accordion-closed-icon { display: none; }
.pill-accordion details[open] > summary .pill-accordion-open-icon { display: block; }
@media (max-width: 767px) {
  .pill-accordion { padding-top: 30px; }
  .pill-accordion summary { padding: 10px; font-size: 19.2px; }
}

/* A stage panel inside the journey accordion */
.stage-panel { display: flex; flex-direction: column; gap: 20px; width: min(750px, 100% - 60px); margin-inline: auto; padding: 30px 0; text-align: center; }
.stage-panel.is-narrow { width: min(700px, 100% - 60px); }
.stage-panel-icon { display: block; width: 70px; margin-inline: auto; }
.stage-panel-icon.is-medium { width: 80px; }
.stage-panel-icon.is-large { width: 90px; }
.stage-panel-title { font-family: var(--text-font); font-size: 25.5px; line-height: 1.1; font-weight: 300; letter-spacing: -.1px; }
.stage-panel-text { margin: 0; }
.stage-panel-text.has-space-below { margin-bottom: 20px; }
.stage-panel-list-title { margin: 0; color: var(--neutral-dark); font-size: var(--intro-size); line-height: 1.2; font-weight: 300; }
.centered-check-list { margin: 0; padding: 0; list-style: none; }
.centered-check-list li { position: relative; display: flex; justify-content: center; align-items: center; }
.centered-check-list li:not(:last-child) { padding-bottom: 6.5px; }
.centered-check-list li:not(:first-child) { margin-top: 6.5px; }
.centered-check-list li:not(:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; width: 23%; margin-inline: auto; border-top: 1px solid var(--soft-divider-grey); }
.centered-check-list svg { flex: none; width: 14px; height: 14px; margin-right: 3.5px; fill: var(--line-grey); }
.centered-check-list span { padding-left: 5px; }
.offer-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 10px; }
.offer-card { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px; border-radius: 10px; background-color: var(--pink-white); box-shadow: 10px 10px 0 0 var(--offer-card-shadow); transition: background-color .3s, box-shadow .3s; }
.offer-card.is-lavender { background-color: var(--lavender-background); }
.offer-card:hover { background-color: var(--lavender-background); box-shadow: 0 0 10px 0 transparent; }
.offer-card-title { font-family: var(--text-font); font-size: 25.5px; line-height: 1.1; font-weight: 500; letter-spacing: -.5px; color: var(--neutral-medium); }
.offer-card p { margin: 0; font-size: 15.3px; line-height: 1.4; }
.offer-card .button { border: 1px solid var(--plum); transition-duration: .8s; }
@media (max-width: 1024px) { .offer-cards { padding: 0; } }
@media (max-width: 767px) {
  .stage-panel, .stage-panel.is-narrow { width: calc(100% - 20px); padding: 30px 0 10px; }
  .stage-panel-title, .offer-card-title { font-size: 24px; }
  .offer-cards { grid-template-columns: 1fr; }
  .offer-card p { font-size: 14.4px; }
}

/* ---------- Parent reviews: a carousel of review cards ---------- */
.review-cards-section { padding: 80px 40px; }
.review-cards-section-inner { display: flex; flex-direction: column; gap: 10px; max-width: 1290px; margin-inline: auto; }
.review-cards-subtitle { padding-bottom: 30px; color: var(--main-accent-default); }
.review-cards { position: relative; padding: 0 20px; }
.review-cards-viewport .slider-track { align-items: stretch; }
.review-card { display: flex; flex-direction: column; border: 1px solid var(--review-card-line); border-radius: 5px; background-color: var(--neutral-white); overflow: hidden; }
.review-card-date { margin: 0; padding: 15px 15px 6px; border-bottom: 1px solid var(--review-card-line); color: var(--review-date-grey); font-size: 12.5px; line-height: 1.5; }
.review-card-text { margin: 0; padding: 6px 15px 15px; }
.review-card-text p { margin: 0; font-size: 14px; line-height: 20px; }
.review-cards .slider-dots { height: 40px; padding-top: 21px; align-items: flex-start; }
.review-cards .slider-dot, .review-cards .slider-dot.is-active { background-color: var(--carousel-dot); opacity: .2; }
.review-cards .slider-dot.is-active { opacity: 1; }
.review-cards-arrow { position: absolute; top: calc((100% - 40px) / 2); z-index: 1; display: flex; width: 20px; height: 20px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--carousel-arrow-grey); transform: translateY(-50%); cursor: pointer; }
.review-cards-arrow svg { width: 20px; height: 20px; fill: currentColor; }
.review-cards-arrow.is-previous { left: 10px; }
.review-cards-arrow.is-next { right: 10px; }
.review-cards-button { padding-top: 0; }
@media (max-width: 1366px) { .review-cards-section { padding: 50px; } }
@media (max-width: 1024px) {
  .review-cards-section { padding: 80px 40px; }
  .review-cards-section-inner { gap: 60px; }
  .review-cards-section-inner > h2, .review-cards-subtitle { margin: -5px 0 -12px; }
}
@media (max-width: 767px) {
  .review-cards-section { padding: 60px 20px; }
  .review-cards-section-inner { gap: 20px; }
  .review-cards-section-inner > h2 { margin: -3px 0 -9px; }
  .review-cards-subtitle { margin: 0; padding: 0; }
  .review-cards-button { justify-content: center; }
}

/* ---------- About Us: BabyLiveAdvice on Podcasts, after In the Media (designer, 2026-10-28): the media section's
   band and title; one card per episode (the show, the episode's title, a line about it, Listen Now in a new tab) ---------- */
.podcast-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.podcast-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 35px 30px; border: 1px solid var(--line-grey); border-radius: 25px; background-color: var(--neutral-white); }
.podcast-card-icon { display: inline-flex; justify-content: center; align-items: center; width: 72px; height: 72px; margin-bottom: 6px; border-radius: 50%; background-color: var(--lavender-background); color: var(--main-accent-default); }
.podcast-card-icon svg { width: 34px; height: 34px; }
.podcast-card-show { margin: 0; color: var(--main-accent-default); font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }
.podcast-card-title { margin: 0; }
.podcast-card-text { flex-grow: 1; margin: 0 0 10px; }
@media (max-width: 1024px) { .podcast-grid { gap: 20px; } .podcast-card { padding: 30px 20px; } }
@media (max-width: 767px) { .podcast-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- For Care Organizations, Partner Resource Center, Video Explanation ---------- */
:root {
  --value-panel-shadow: rgba(114, 69, 138, .5);   /* hard purple shadow under the measurable value panel */
  --photo-shadow-violet: rgba(134, 88, 214, .5);  /* hard violet shadow beside the bedside photo */
  --photo-darkening: rgba(0, 0, 0, .37);          /* dark layer over the quote photos */
}
/* Rose-white section background (pink-white-background-section is in 10-about-and-parents.css) */
.rose-white-background-section { background-color: var(--rose-white); }

/* The source's full-width sections: 40px side padding (20px on phones), content up to 1400px */
.wide-content-width { position: relative; z-index: 1; width: min(1400px, 100% - 80px); margin-inline: auto; }
.wide-content-width.is-site-max { width: min(var(--content-max-width), 100% - 80px); }
.wide-content-width.is-extra-wide { width: min(1600px, 100% - 80px); }
@media (max-width: 767px) {
  .wide-content-width, .wide-content-width.is-site-max, .wide-content-width.is-extra-wide { width: calc(100% - 40px); }
}

.eyebrow-label.is-accent { color: var(--main-accent-default); }

/* ---------- Hero: title beside a cut-out photo, over a faint line texture ---------- */
.line-texture-section.is-faint-texture::before { background-position: left top; opacity: .1; }
.organization-hero { padding-top: 280px; }
.organization-hero-inner { position: relative; z-index: 1; max-width: 1600px; margin-inline: auto; display: flex; gap: 20px; }
.organization-hero-text { flex: 0 0 60%; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 0 8% 0 5%; }
.organization-hero-text > * { margin: 0; }
.organization-hero-text .organization-hero-intro { width: 72%; margin-bottom: 15px; }
.organization-hero-buttons { display: flex; flex-wrap: wrap; gap: 15px; }
/* "Book a Meeting" and "Receive More Information" (the Get More Info pop-up) under sections; some on phones only */
.meeting-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.meeting-buttons.is-phone-only { display: none; }
@media (max-width: 767px) {
  .meeting-buttons, .meeting-buttons.is-phone-only { display: flex; flex-direction: column; }
  .meeting-buttons .button { width: 100%; }
}
.organization-hero-image { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.organization-hero-image img { display: block; width: 108%; max-width: none; margin-left: -10%; }
@media (max-width: 1024px) {
  .organization-hero-inner { flex-direction: column; }
  .organization-hero-text { flex: none; }
  .organization-hero-image { flex: none; }
  .organization-hero-image img { width: 90%; margin: -6% 5% 0; }
  .organization-hero-text { position: relative; z-index: 1; } /* the photo rises under the buttons: they stay on top and clickable (2026-10-28) */
}
@media (max-width: 767px) {
  .organization-hero { padding-top: 50px; }
  .organization-hero-inner { gap: 0; }
  .organization-hero-image { order: -1; }
  .organization-hero-image img { width: calc((100% - 20px) * .75); margin: 10px auto 0; }
  .organization-hero-text { padding: 30px 30px 50px; text-align: center; }
  .organization-hero-text .organization-hero-intro { width: 100%; }
  .organization-hero-buttons { flex-direction: column; }
  .organization-hero-buttons .button { width: 100%; }
}

/* ---------- Soft swirl background (white section with a faint pastel swirl) ---------- */
.soft-swirl-section { padding-block: 80px; overflow: hidden; }
.soft-swirl-section::before { content: ""; position: absolute; inset: 0; background: url("images/thumb-9.webp") left top / cover; opacity: .11; pointer-events: none; }
.centered-heading-stack { display: flex; flex-direction: column; gap: 20px; }
.centered-heading-stack > h2 { max-width: 900px; align-self: center; }
/* The care-journey circle: three quarters of the width, never taller than the screen under the header
   (1.635 is the image's width / height); its height follows its width */
.care-journey-diagram { display: block; width: min(75%, calc((100vh - var(--header-height, 90px) - 60px) * 1.635)); width: min(75%, calc((100svh - var(--header-height, 90px) - 60px) * 1.635)); height: auto; margin-inline: auto; }
@media (max-width: 767px) {
  .soft-swirl-section { padding-block: 50px; }
  .care-journey-diagram { width: 100%; }
}

/* ---------- Measurable value: intro beside three audience cards, in a white panel ---------- */
.value-section-stack, .partner-cases-stack, .outcomes-stack { display: flex; flex-direction: column; gap: 20px; padding-block: 80px; }
.value-section-title { width: 70%; align-self: center; text-align: center; }
.value-panel { display: flex; padding: 15px; border-radius: 10px; background: var(--neutral-white); box-shadow: 7px 6px 0 var(--value-panel-shadow); }
.value-panel-intro { flex: 0 0 23%; display: flex; flex-direction: column; justify-content: center; gap: 15px; padding: 0 25px; text-align: center; }
.value-panel-intro > * { margin: 0; }
.round-icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin: 0 auto 8px; border-radius: 50%; background: var(--main-accent-default); color: var(--neutral-white); }
.round-icon .icon { width: 40px; height: 40px; }
.value-panel-title { font-size: 25px; line-height: 1.1; letter-spacing: -1px; font-weight: 400; color: var(--main-accent-default); }
.value-panel-text { font-size: .9em; line-height: 1.4; }
.value-panel-tagline { font-family: var(--title-font); font-size: 20px; line-height: 1.1; letter-spacing: -1px; color: var(--main-accent-default); }
.customer-type-cards { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 10px; }
.customer-type-card { --customer-type-card-line: var(--main-accent-light); --customer-type-card-top: var(--main-accent-default); --customer-type-card-check: var(--main-accent-light); --customer-type-card-model: var(--deep-violet);
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px; border: 1px solid var(--customer-type-card-line); border-radius: 10px; }
.customer-type-card.is-teal { --customer-type-card-line: var(--second-accent-default); --customer-type-card-top: var(--second-accent-default); --customer-type-card-check: var(--second-accent-default); --customer-type-card-model: var(--second-accent-default); }
.customer-type-card.is-lilac { --customer-type-card-top: var(--main-accent-light); --customer-type-card-model: var(--plum); }
.customer-type-card.has-accent-checks { --customer-type-card-check: var(--main-accent-default); }
.customer-type-card-heading { padding: 20px 20px 15px; border-radius: 10px 10px 0 0; background: var(--customer-type-card-top); color: var(--neutral-white); text-align: center; }
.customer-type-card-heading > .icon { display: block; width: 50px; height: 50px; margin-inline: auto; }
.customer-type-card-title { margin-top: 8px; color: var(--off-white); font-size: 1.5em; line-height: 1.1; letter-spacing: -1.5px; font-weight: 400; }
.customer-type-card-list { margin: 0; padding: 0 15px; list-style: none; }
.customer-type-card-list li { display: flex; align-items: flex-start; font-size: .8em; line-height: 1.2; }
.customer-type-card-list li:not(:last-child) { padding-bottom: 5px; }
.customer-type-card-list li + li { margin-top: 5px; }
.customer-type-card-list .icon { width: 12px; height: 12px; margin: 2px 3px 0 0; fill: var(--customer-type-card-check); }
.customer-type-card-list span { padding-left: 5px; }
.customer-type-card-model { margin: 0; padding: 20px 0; border-top: 1px solid var(--customer-type-card-line); color: var(--customer-type-card-model); line-height: 1; text-align: center; }
@media (max-width: 1024px) {
  .value-panel { flex-direction: column; }
  .value-panel-intro { flex: none; }
  .customer-type-cards { flex: none; gap: 5px; }
}
@media (max-width: 767px) {
  .value-section-stack, .partner-cases-stack, .outcomes-stack { padding-block: 50px; }
  .value-section-title { width: 100%; }
  .value-panel-intro { padding: 20px; }
  .customer-type-cards { grid-template-columns: 1fr; gap: 10px; padding: 0; }
  .customer-type-card-list { padding: 0 20px 20px; }
}

/* ---------- Use cases: four cards (icon, title, text, topics and a link), two to a row ---------- */
.partner-cases-intro { max-width: 800px; align-self: center; text-align: center; }
.partner-cases-intro .small-title-h4 { margin: 8px 0 16px; }
.partner-case-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 10px; }
.partner-case-card { display: flex; flex-direction: column; gap: 14px; padding: 30px; border: 1px solid var(--main-accent-light); border-radius: 15px; background: var(--neutral-white); }
.partner-case-card > * { margin: 0; }
.partner-case-icon { display: block; width: 44px; height: 44px; fill: var(--main-accent-default); }
.partner-case-title { color: var(--neutral-dark); font-family: var(--text-font); font-size: 22px; line-height: 1.2; letter-spacing: -.5px; font-weight: 700; }
.partner-case-card .partner-case-text { line-height: var(--body-line); }
.partner-case-tags { color: var(--muted-text); font-size: var(--fineprint-size); line-height: 1.4; }
.partner-case-link { margin-top: auto; padding-top: 4px; color: var(--neutral-dark); font-weight: 700; }
.partner-case-link:hover { color: var(--main-accent-default); }
.partner-case-card { position: relative; transition: border-color .2s; } /* the whole box opens the category (its link stretched over it) */
.partner-case-link::after { content: ""; position: absolute; inset: 0; border-radius: 15px; }
.partner-case-card:hover { border-color: var(--main-accent-default); }
.partner-case-card:hover .partner-case-link { color: var(--main-accent-default); }
@media (max-width: 767px) {
  .partner-case-cards { grid-template-columns: 1fr; padding: 0; }
  .partner-case-card { padding: 25px 20px; }
}

/* ---------- Text beside a photo: bedside-to-home ---------- */
.text-beside-photo { display: flex; padding-block: 80px; }
.text-beside-photo-text { flex: 0 0 55%; display: flex; flex-direction: column; gap: 20px; padding: 10px 100px 10px 0; }
.text-beside-photo-text > * { margin: 0; }
.text-beside-photo-text > .bedside-intro { margin-bottom: 5px; }
.text-beside-photo-text > .bedside-details { margin: -15px 0 -26px; }
.text-beside-photo-text > .icon-list { margin-bottom: 20px; }
.text-beside-photo-photo { position: relative; flex: 1 1 0; min-width: 0; border-radius: 15px; box-shadow: 5px 5px 0 var(--photo-shadow-violet); }
.text-beside-photo-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }
.benefit-icon-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.benefit-icon-box { padding: 15px 20px; text-align: center; }
.benefit-icon-box:nth-child(2) { border-inline: 1px solid var(--main-accent-light); }
.benefit-icon-box > .icon { display: block; width: 50px; height: 50px; margin-inline: auto; fill: var(--main-accent-default); }
.benefit-icon-box-title { margin: 12px 0 7px; color: var(--deep-violet); font-size: 1.2em; line-height: 1.1; letter-spacing: -.8px; font-weight: 400; }
.benefit-icon-box p { margin: 0; font-size: .8em; line-height: 1.3; }
@media (max-width: 1024px) {
  .text-beside-photo { flex-direction: column; width: calc(100% - 60px); padding-block: 30px; }
  .text-beside-photo-text { flex: none; }
  .text-beside-photo-photo { flex: none; min-height: 300px; }
}
@media (max-width: 767px) {
  .text-beside-photo { width: calc(100% - 40px); padding-block: 0 50px; }
  .text-beside-photo-photo { order: -1; }
  .text-beside-photo-text { padding: 50px 0 10px; }
  .benefit-icon-boxes { display: none; }
}

/* ---------- Proven outcomes: counters and quotes over photos ---------- */
.outcomes-section { border: 1px solid var(--neutral-light); }
.outcomes-stack > p, .outcomes-stack > h2 { margin: 0; }
.outcomes-stack > .outcomes-intro { margin-bottom: 20px; }
.outcome-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); gap: 20px; }
.outcome-counter-card { display: flex; flex-direction: column; justify-content: center; padding: 40px; border: 2px dotted var(--soft-grey-button); border-radius: 15px; }
.outcome-counter-card > *, .outcome-counter > * { margin: 0; }
.outcome-number { display: flex; color: var(--neutral-medium); font-family: var(--title-font); font-size: 54px; line-height: .7; letter-spacing: -1.4px; font-weight: 300; }
.outcome-number > span { flex: 0 0 auto; text-align: center; }
.outcome-number > .outcome-number-prefix { flex: 1 1 0; text-align: end; white-space: pre-wrap; }
.outcome-number > .outcome-number-suffix { flex: 1 1 0; text-align: start; white-space: pre-wrap; }
.outcome-name { display: block; text-align: center; color: var(--neutral-medium); font-family: var(--title-font); font-size: 1.9em; line-height: 2.5; letter-spacing: -1.1px; font-weight: 300; }
.outcome-text { font-size: .9em; line-height: 1.2; text-align: center; }
/* The short line sits just under the name (designer, 2026-10-22) */
.outcome-counter > .outcome-name { margin-top: 18px; line-height: 1.3; }
.outcome-counter-card > .outcome-text { margin-top: 6px; }
.outcome-quote-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; margin: 0; padding: 30px; border-radius: 15px; overflow: hidden; color: var(--neutral-white); }
.outcome-quote-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--photo-darkening); }
.outcome-quote-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.outcome-quote-card > blockquote, .outcome-quote-card > figcaption { position: relative; z-index: 2; margin: 0; }
.outcome-quote-card blockquote p { margin: 0; color: var(--neutral-white); font-family: var(--title-font); font-size: var(--small-title-size); line-height: var(--small-title-line); letter-spacing: var(--small-title-spacing); }
.outcome-quote-card figcaption { line-height: calc(var(--body-size) * var(--body-line)); }
@media (max-width: 767px) {
  .outcome-counter-card { gap: 0; padding: 20px; }
  .outcome-counter > .outcome-name { margin-top: 10px; }
  .outcome-number { font-size: 42px; line-height: 1.1; }
  .outcome-name { font-size: 1.2em; line-height: 1.2; text-align: center; }
  .outcome-text.has-taller-lines { line-height: 1.3; }
  /* Phones: the numbers, their names and short lines, two to a row (no quotes over photos); an odd last one centred */
  .outcome-quote-card { display: none; }
  .outcome-counter-card { justify-content: flex-start; padding: 20px 14px; } /* every number at the top, level across a row (designer, 2026-10-22) */
  .outcome-number { font-size: 34px; white-space: nowrap; } /* "2–8 hrs" on one line */
  .outcome-counter-card:nth-child(odd of .outcome-counter-card):nth-last-child(1 of .outcome-counter-card) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 20px) / 2); }
}

/* ---------- Partner testimonials: a slider of quote cards (three, two, one at a time), stars as on Parent Reviews ---------- */
.partner-testimonials-stack { display: flex; flex-direction: column; gap: 20px; padding-block: 80px; }
.partner-testimonials-stack > * { margin: 0; }
.partner-testimonials-intro { max-width: 700px; align-self: center; margin-bottom: 20px; }
.partner-testimonials-viewport .slider-track { align-items: stretch; }
.partner-testimonial-card { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 35px 30px; border: 1px solid var(--main-accent-light); border-radius: 15px; background: var(--neutral-white); text-align: center; }
.partner-testimonial-card .review-stars { margin: 0 auto; }
.partner-testimonial-card blockquote { flex: 1 1 auto; margin: 0; }
.partner-testimonial-card blockquote p { margin: 0; font-size: var(--body-size); line-height: var(--body-line); color: var(--neutral-medium); }
.partner-testimonial-card figcaption { color: var(--muted-text); } /* the name, a hyphen, then the title, on one line (designer, 2026-10-22) */
.partner-testimonial-name { font-weight: 600; color: var(--neutral-dark); }
.partner-testimonial-org { font-size: var(--fineprint-size); color: var(--muted-text); }
.partner-testimonials-section .slider-dots { margin-top: 30px; }
@media (max-width: 767px) {
  .partner-testimonials-stack { padding-block: 50px; }
  .partner-testimonial-card { padding: 30px 20px; }
}

/* ---------- From the blog: the helpful guides design (50-articles.css) on pink-white, with a stronger pattern ---------- */
.helpful-guides-section.is-pink-white { background-color: var(--pink-white); }
.helpful-guides-section.is-pink-white::before { opacity: .34; }
.helpful-guides-section.is-pink-white .helpful-guides-inner > .eyebrow-label { font-size: calc(var(--eyebrow-size) * 1.6); } /* For Parents: a bigger title (designer, 2026-10-22) */
@media (max-width: 767px) { .value-section-title { text-wrap: balance; } .value-section-title .own-line { display: inline; } } /* phones: the heading wraps naturally, no word left alone (designer, 2026-10-22) */
@media (max-width: 767px) { .helpful-guides-section.is-pink-white { padding: 0 20px; } .helpful-guides-section.is-pink-white .helpful-guides-inner > .eyebrow-label { font-size: 15px; } } /* two lines on phones */
/* For Parents: six guides as the Blog's cards (badge, date and time) in a slider, three across (two on tablets, one on phones),
   arrows on both sides and dots, swipe on touch screens; then "Need assistance?" as a wide box (designer, 2026-10-23) */
.helpful-guides-layout.has-post-cards { flex-direction: column; gap: 30px; width: 100%; max-width: var(--content-max-width); margin-inline: auto; }
.need-assistance-box.is-wide { flex-direction: row; align-items: center; justify-content: space-between; gap: 30px; padding: 30px 40px; }
.need-assistance-box.is-wide > div { display: grid; grid-template-columns: 64px 1fr; column-gap: 25px; align-items: center; }
.need-assistance-box.is-wide img { grid-row: span 2; width: 100%; }
.need-assistance-box.is-wide h3 { margin: 0 0 4px; align-self: end; }
.need-assistance-box.is-wide p { align-self: start; }
.need-assistance-box.is-wide .button { flex-shrink: 0; align-self: center; margin-top: 0; }
.guide-slider { position: relative; }
.guide-slider-viewport .slider-track { align-items: stretch; }
.guide-slider .slider-dots { margin-top: 25px; }
.guide-slider-arrow {
  position: absolute; top: calc((100% - 31px) / 2); z-index: 1; display: flex; justify-content: center; align-items: center; width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--line-grey); border-radius: 50%; background: var(--neutral-white); box-shadow: 3px 3px 0 0 var(--guide-card-shadow);
  color: var(--main-accent-default); transform: translateY(-50%); cursor: pointer; transition: background-color .3s, color .3s;
}
.guide-slider-arrow:hover, .guide-slider-arrow:focus-visible { background: var(--main-accent-default); color: var(--neutral-white); }
.guide-slider-arrow svg { width: 18px; height: 18px; fill: currentColor; }
.guide-slider-arrow.is-previous { left: -23px; }
.guide-slider-arrow.is-next { right: -23px; }
@media (max-width: 767px) { .guide-slider-arrow { top: calc((100vw - 40px) / 3); width: 40px; height: 40px; } .guide-slider-arrow.is-previous { left: -12px; } .guide-slider-arrow.is-next { right: -12px; } } /* phones: on the photo's middle, off the title */
@media (max-width: 767px) {
  .need-assistance-box.is-wide { flex-direction: column; align-items: stretch; gap: 10px; padding: 30px; }
  .need-assistance-box.is-wide > div { display: block; }
  .need-assistance-box.is-wide img { width: 18%; }
  .need-assistance-box.is-wide h3 { margin: 8px 0 7px; }
  .need-assistance-box.is-wide .button { align-self: flex-start; margin-top: 10px; }
}

/* ---------- Icon lists (50-articles.css) with violet checks: tight, or small text ---------- */
.icon-list.has-violet-checks .icon { width: 14px; height: 14px; margin-right: 3.5px; font-size: 14px; color: var(--deep-violet); }
.icon-list.has-violet-checks li:hover .icon + span { color: inherit; }
.icon-list.is-tight li { font-size: .9em; line-height: calc(var(--body-size) * var(--body-line)); }
.icon-list.is-tight li + li { margin-top: 2px; }
.icon-list.is-tight li:not(:last-child) { padding-bottom: 2px; }
.icon-list.is-small-and-close li { font-size: .8em; line-height: 1.3; }
.icon-list.is-small-and-close li + li { margin-top: 4.5px; }
.icon-list.is-small-and-close li:not(:last-child) { padding-bottom: 4.5px; }

/* ---------- Partner Resource Center: the request access form in a dotted box ---------- */
.request-access-area { display: flex; flex-direction: column; gap: 20px; }
.dotted-form-box { display: flex; flex-direction: column; gap: 20px; padding: 40px; border: 2px dotted var(--neutral-medium); border-radius: 15px; }
.dotted-form-box > h2 { margin: 0; }
.request-access-form { line-height: calc(var(--body-size) * var(--body-line)); }
.request-access-field, .request-access-choices, .request-access-agreement { margin: 0 0 10px; }
.request-access-field input {
  display: block; width: 100%; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line-grey); border-radius: 0;
  background: var(--neutral-white); color: var(--neutral-dark); font-size: var(--body-size); line-height: inherit;
}
.request-access-field input:focus { outline: none; border-color: var(--neutral-dark); }
.request-access-choices { min-width: 0; padding: 0; border: 0; }
.request-access-choices > legend { margin-bottom: 10px; padding: 0; }
.request-access-choice { display: block; }
.request-access-form input[type="checkbox"] { margin: 0; accent-color: var(--neutral-dark); }
.request-access-choice label, .request-access-agreement label { color: var(--muted-text); font-family: "Nunito Sans", Arial, sans-serif; font-size: 19px; line-height: 1; font-weight: 500; text-transform: capitalize; }
.request-access-submit { width: 100%; min-height: 40px; color: var(--neutral-white); }
.request-access-submit:hover { color: var(--neutral-white); }
.request-access-form .form-note { margin-top: 10px; }
@media (max-width: 767px) { .dotted-form-box { padding: 30px; } }

/* ---------- Video Explanation: a wide video between two titles ---------- */
.video-with-titles { display: flex; flex-direction: column; gap: 20px; padding: 10px; }
@media (max-width: 767px) { .video-with-titles { padding-inline: 0; } }
.wide-video-embed { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ---------- Parent reviews, legal pages, thank you and 404 (builder: reviews and legal) ---------- */
:root {
  --review-board-card-grey: #f6f6f8;                   /* written review cards */
  --soft-plum-shadow: rgba(149, 124, 165, .25);  /* hard shadow under the reviews board */
  --divider-grey: #d5d8dc;                       /* line under the video list header */
  --sand-line: #e0d8d0;                          /* thin line under the media section */
  --video-black: #000000;                        /* video player before the video loads, list toggle arrow */
}

/* Parent reviews: title, then a white board with the written reviews in four columns (newest first, read
   down each column), each with its stars as rated, the parent's first name and last initial, and the month */
.reviews-page-inner { display: flex; flex-direction: column; gap: 20px; padding: 280px 10px 130px; }
.reviews-page-intro { margin: 0 0 45px; }
.reviews-board { padding: 40px; border-radius: 15px; background: var(--neutral-white); box-shadow: 9px 9px 0 0 var(--soft-plum-shadow); }
.review-board-list { columns: 4; column-gap: 20px; }
.review-board-card { break-inside: avoid; margin-bottom: 12px; padding: 15px; border-radius: 25px; background: var(--review-board-card-grey); text-align: center; }
.review-board-card > * { margin-inline: 2.5%; }
/* Five stars, the gold part as wide as the rating (data-rating) */
.review-stars { position: relative; display: block; width: 100px; height: 17px; margin: 1px auto 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23dcdce3' d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'/%3E%3C/svg%3E") 0 0 / 20px 17px repeat-x; }
.review-stars::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23f8ae0d' d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'/%3E%3C/svg%3E") 0 0 / 20px 17px repeat-x; }
.review-stars[data-rating="4.5"]::before { width: 90%; }
.review-stars[data-rating="4.2"]::before { width: 84%; }
.review-stars[data-rating="4"]::before { width: 80%; }
.review-stars[data-rating="3.5"]::before { width: 70%; }
.review-stars[data-rating="3"]::before { width: 60%; }
.review-board-card-text { margin-block: 0; font-size: 16px; line-height: 24px; color: var(--neutral-medium); }
.review-board-card-text p { margin: 0; }
.review-board-card-text p + p { margin-top: 12px; }
/* A long review shows its first lines and a + to open the rest (designer, 2026-10-22); without scripts it shows in full */
.js .review-board-card.is-collapsible:not(.is-open) .review-board-card-text { max-height: 168px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.review-expand { display: none; }
.js .review-expand { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 10px auto 0; padding: 0; border: 1px solid var(--main-accent-default); border-radius: 50%; background: var(--neutral-white); color: var(--main-accent-default); font-size: 22px; line-height: 1; cursor: pointer; }
.review-expand:hover { background: var(--main-accent-default); color: var(--neutral-white); }
.review-board-card-name { margin-block: 20px 0; font-size: var(--body-size); line-height: var(--body-line); font-weight: 600; color: var(--neutral-dark); }
.review-board-card-date { margin-block: 2px 0; font-size: var(--fineprint-size); line-height: var(--body-line); font-weight: 500; color: var(--neutral-medium); }
@media (max-width: 1366px) {
  .reviews-page-inner { padding-bottom: 50px; }
}
@media (max-width: 1024px) {
  .reviews-page-top .reviews-page-inner { width: calc(100% - 80px); }
  .review-board-list { columns: 2; }
}
@media (max-width: 767px) {
  .reviews-page-top .reviews-page-inner { width: calc(100% - 40px); padding: 60px 0 20px; }
  .reviews-page-inner > h1, .reviews-page-intro { text-align: left; }
  .reviews-board { padding: 10px; }
  .review-board-list { columns: 1; }
}

/* A section over a faint woven pattern (the old site's pattern image at low opacity) */
.woven-pattern-background { overflow: hidden; }
.woven-pattern-background::before { content: ""; position: absolute; inset: 0; background: url("images/dental-model779.webp"); opacity: .17; pointer-events: none; }
@media (min-width: 1367px) { .woven-pattern-background::before { background-attachment: fixed; } }

/* "BabyLiveAdvice in the Media": a video list beside a player */
.media-section { padding-inline: 40px; border-bottom: 1px solid var(--sand-line); }
.media-section-inner { position: relative; z-index: 1; max-width: 1400px; margin-inline: auto; padding: 60px 0 70px; display: flex; flex-direction: column; justify-content: center; gap: 30px; }
.media-section-inner > h2 { margin-bottom: 20px; }
.video-playlist { display: flex; height: 540px; }
.video-playlist-list { display: flex; flex-direction: column; flex: 0 0 33%; width: 33%; height: 100%; background: var(--neutral-light); }
.video-playlist-header { display: flex; justify-content: space-between; flex: none; min-height: 56px; padding: 0 16px; border-bottom: 1px solid var(--divider-grey); background: var(--neutral-light); }
.video-playlist-title { margin: auto 0; padding: 10px 0; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.1; font-weight: 700; letter-spacing: 0; color: var(--neutral-dark); }
.video-playlist-header-end { display: inline-flex; flex-shrink: 0; }
.video-playlist-count { align-self: flex-start; flex-shrink: 0; padding-top: 18px; font-size: 14px; line-height: 20px; color: var(--neutral-medium); }
.video-playlist-toggle { display: none; margin: auto 0 auto 8px; padding: 0 4px; border: 0; background: none; box-shadow: none; color: var(--video-black); cursor: pointer; }
.video-playlist-toggle svg { display: block; width: 8px; height: 16px; overflow: hidden; fill: currentColor; transition: transform .3s; }
.video-playlist-toggle[aria-expanded="false"] svg { transform: rotate(-180deg); }
.video-playlist-items-area { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.video-playlist-items-area::before, .video-playlist-items-area::after { content: ""; position: absolute; left: 0; right: 0; height: 98px; pointer-events: none; opacity: 0; }
.video-playlist-items-area::before { top: 0; background: linear-gradient(0deg, transparent, var(--neutral-light)); }
.video-playlist-items-area::after { bottom: 0; background: linear-gradient(180deg, transparent, var(--neutral-light)); }
.video-playlist-items-area.has-more-above::before, .video-playlist-items-area.has-more-below::after { opacity: 1; }
.video-playlist-items { height: 100%; margin: 0; padding: 0; overflow: auto; list-style: none; }
.video-playlist-item {
  display: flex; align-items: center; width: 100%; height: 55px; padding: 0 16px; border: 0; border-radius: 0; box-shadow: none;
  background: var(--neutral-light); color: var(--neutral-dark); font-size: 16px; line-height: 16px; font-weight: 700; text-align: left; cursor: pointer;
}
.video-playlist-item span { flex: 1 1 auto; min-width: 0; margin: 0 8px; overflow: hidden; white-space: nowrap; }
.video-playlist-play-icon { flex: none; width: 12px; height: 12px; fill: var(--neutral-white); }
.video-playlist-item:hover, .video-playlist-item.is-active { background: var(--muted-text); color: var(--rose-white); }
.video-playlist-item:focus-visible { outline-offset: -2px; }
.video-playlist-player { flex: 1 1 auto; height: 100%; min-width: 0; background: var(--video-black); }
.video-playlist-player iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 767px) {
  .media-section { padding-inline: 20px; }
  .media-section-inner { padding: 50px 0 70px; }
  .video-playlist { flex-direction: column-reverse; }
  .video-playlist-player { flex: 0 0 38%; height: 38%; }
  .video-playlist-list { flex: 0 0 62%; width: auto; height: 62%; }
  .video-playlist-header { min-height: 48px; }
  .video-playlist-title { margin: auto 0; }
  .video-playlist-count { margin: 0 6px; padding-top: 14px; }
  .video-playlist-toggle { display: inline-flex; }
  .video-playlist-items { max-height: 248px; }
}
@media (prefers-reduced-motion: reduce) { .video-playlist-toggle svg { transition: none; } }
@media (min-width: 768px) { .video-playlist-items-area[hidden] { display: block; } }

/* Text that keeps the old site's (WordPress) spacing: Privacy Policy, Terms and Conditions, Thank You.
   Headings 8px above and 16px below, 28px between a list and the heading after it, and the paragraph
   space kept after the last paragraph */
.post-page-content.is-wordpress-text-spacing > :is(h2, h3, h4) { margin: 8px 0 16px; }
.post-page-content.is-wordpress-text-spacing > ul + :is(h2, h3, h4) { margin-top: 28px; }
.post-page-content.is-wordpress-text-spacing > p:last-child { margin-bottom: 20px; }

/* A link shown in the text colour (accent colour on hover): "Go Back Home" on Thank You */
.text-colour-link { color: var(--neutral-medium); }
.text-colour-link:hover { color: var(--main-accent-default); }

/* 404 page: centred "404 ERROR", title and a link home (the space above is kept where the old page had an image) */
.page-not-found { padding: 311px 40px 120px; }
.page-not-found-content { max-width: var(--content-max-width); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 35px; }
.page-not-found-label { margin: -1px 0 -4px; }
.page-not-found-content > h1 { margin: -7px 0; }
.page-not-found-home-link { display: inline-flex; align-items: center; gap: 5px; margin: -2px 0 0; color: var(--neutral-medium); font-size: 15px; line-height: 1; font-weight: 800; }
.page-not-found-home-link:hover { color: var(--main-accent-default); }
.page-not-found-home-link .icon { font-size: 15px; }
@media (max-width: 1024px) {
  .page-not-found { padding-top: 242px; }
  .page-not-found-content > h1 { margin: -7px 0 -5px; }
}
@media (max-width: 767px) {
  .page-not-found { padding: 101px 40px 40px; }
  .page-not-found-content > h1 { margin: -6px 0 -4px; }
}

/* ---------- Service pages (services/*): one design for the six service pages ----------
   A hero with a round photo beside the title, white cards, photo-and-text rows, icon lists,
   step accordions and text toggles, a split card, an FAQ card and a closing call to action.
   Reused from the other parts: .post-card, .post-card-row, .post-card-column, .rich-text (and its
   .has-pulled-up-bottom, .has-no-bottom-space), .icon-list, .has-dividers (50-articles); .split-card-text,
   .split-card-image (60-case-studies, which also uses .post-card.split-card). */
:root {
  --accordion-line-grey: #d5d8dc;   /* borders of the step accordions */
  --accordion-title-black: #1f2124; /* step accordion titles and icons */
}

.rich-text > .intro-text { letter-spacing: normal; }
.rich-text.has-flush-lists > :is(ul, ol) { margin-bottom: 0; }
/* Headings that keep the extra space the editor's empty lines gave them */
.rich-text > .has-wide-top-margin { margin-top: 16px; }
.rich-text > .has-wide-bottom-margin { margin-bottom: 20px; }

/* Hero: a round photo beside the page title */
.service-hero { padding: 250px 40px 20px; }
.service-hero-inner { display: flex; max-width: var(--content-max-width); margin-inline: auto; }
.service-hero-photo { flex: 0 0 27%; padding: 10px; }
.service-hero-photo img { width: 90%; border-radius: 50%; vertical-align: top; }
.service-hero-text { flex: 0 0 73%; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 10px; }
.service-hero-intro { margin: 0 0 15px; font-size: calc(var(--body-size) * 1.2); line-height: 1.4; font-weight: 300; }
.service-hero-intro.is-regular-weight { font-weight: 400; }

/* Bands of white cards: 10px from the window edge, 1290px at most */
.card-band { padding: 10px; }
.card-band > * { max-width: var(--content-max-width); margin-inline: auto; }
.post-card-column.is-round-photo-column { flex: 0 0 25%; justify-content: space-between; }
.centered-card-text { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 900px; margin-inline: auto; text-align: center; }

/* Side by side: a photo (or a card) beside text, 45% and 55% */
.side-by-side { display: flex; max-width: var(--content-max-width); margin-inline: auto; }
.side-by-side.is-centered { justify-content: center; align-items: center; }
.side-media { flex: 0 1 45%; display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: 10px; }
.side-text { flex: 0 1 55%; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.card-band .side-text { gap: 20px; padding: 5%; }
.card-band .side-text.is-flush-top { padding-top: 0; }
.image-and-text-row { padding: 0 40px 40px; }
.image-and-text-row .side-text { gap: 10px; padding-left: 5%; }
.tall-photo { width: 100%; height: 650px; object-fit: cover; }
.tall-photo.is-top-aligned { object-position: center top; }
.side-media.is-spread { justify-content: space-around; }
.round-photo { width: 100%; border-radius: 50%; }
.map-image, .diagram-image { width: 100%; }
.round-photo.is-two-thirds { width: 67%; align-self: center; }

/* A map with a short violet caption under it */
.map-caption { width: 70%; align-self: flex-end; margin: -20px 0 0; text-align: center; color: var(--deep-violet); }

/* The partner logos card: an animated hospital icon above a logo slider */
.side-by-side > .logo-card { flex: 0 1 45%; min-width: 0; }
.logo-card-icon { width: 24%; align-self: center; }
.logo-card-slider { width: 100%; min-width: 0; }

/* Partner logos in four columns */
.logo-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 41px; align-items: start; justify-items: center; }
.logo-gallery img { max-width: 100%; }

/* Icon lists: purple checks or arrows; small Inter text with a little more space between items */
.icon-list.has-purple-icons .icon { width: 14px; height: 14px; margin-right: 10.5px; color: var(--main-accent-default); }
.icon-list.is-fineprint { font-family: var(--small-font); font-size: var(--fineprint-size); line-height: 1.6; }
.icon-list.is-fineprint li + li { margin-top: 10.5px; }
.icon-list.is-fineprint li:not(:last-child) { padding-bottom: 10.5px; }
.icon-list-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 10px; text-align: left; }

/* A small purple note with an icon, at the foot of a photo column */
.photo-note { display: flex; align-items: flex-start; gap: 15px; padding-bottom: 10%; color: var(--main-accent-default); }
.photo-note .icon { font-size: 29px; }
.photo-note .icon.is-wide { width: 1.25em; margin-inline: -.125em; }
.photo-note p { margin: 0; font-size: .8em; line-height: 1.5; }

/* Step accordion: bordered steps, one open at a time */
.step-accordion { display: flex; flex-direction: column; }
.step-accordion-item > summary {
  display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--accordion-line-grey);
  color: var(--accordion-title-black); font-size: 16px; line-height: calc(var(--body-size) * var(--body-line)); cursor: pointer; list-style: none;
}
.step-accordion-answer { padding: 20px; border: 1px solid var(--accordion-line-grey); }
/* Text toggle: a small purple title that opens a paragraph */
.text-toggle > summary {
  display: flex; align-items: center; gap: 10px; padding-bottom: 10px;
  color: var(--main-accent-default); font-size: 16px; line-height: calc(var(--body-size) * var(--body-line)); cursor: pointer; list-style: none;
}
.text-toggle > summary:hover, .text-toggle[open] > summary { color: var(--accordion-title-black); }
.text-toggle-answer { padding: 20px; background-color: var(--off-white); }
:is(.step-accordion-item, .text-toggle) > summary::-webkit-details-marker { display: none; }
:is(.step-accordion-item, .text-toggle) > summary .icon { width: auto; height: 15px; }
:is(.step-accordion-item, .text-toggle)[open] > summary .accordion-closed-icon,
:is(.step-accordion-item, .text-toggle):not([open]) > summary .accordion-open-icon { display: none; }

/* Split card: text beside a photo that fills the card's side (the case studies' split card, on a post card) */
.post-card.split-card { flex-direction: row; gap: 20px; padding: 0; }
.card-band .split-card-image { padding: 10px; } /* the photo's padding only shares out the width like the source's columns */

/* FAQ card: a photo beside the questions on lavender */
.post-card.faq-card { padding: 0; }
.faq-card-inner { display: flex; gap: 20px; background-color: var(--lavender-background); }
.faq-card-inner > .split-card-image { flex-basis: 30%; }
.faq-card-inner > .split-card-image img { object-position: center top; }
.faq-card-text { flex: 0 1 70%; display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: 40px; }
.rich-text > .faq-question { margin: 0 0 20px; font-family: var(--text-font); font-size: var(--body-size); line-height: var(--body-line); font-weight: 700; letter-spacing: normal; color: var(--neutral-medium); }

/* Closing call to action: centred title, text and button */
.closing-call-to-action { padding: 40px 40px 85px; }
.closing-call-to-action-inner { display: flex; flex-direction: column; gap: 20px; max-width: 1170px; margin-inline: auto; text-align: center; }
.closing-call-to-action .button-row { justify-content: center; }

@media (max-width: 1024px) {
  .post-card.split-card, .post-card.faq-card { padding: 30px; }
}
@media (max-width: 767px) {
  .service-hero { padding: 30px 20px 20px; }
  .service-hero.has-roomy-phone-top { padding-top: 100px; }
  .service-hero-inner, .side-by-side, .faq-card-inner { flex-wrap: wrap; }
  .service-hero-photo, .service-hero-text, .side-media, .side-text, .side-by-side > .logo-card, .post-card-column.is-round-photo-column { flex-basis: 100%; }
  .service-hero-photo { padding-inline: 0; }
  .service-hero-photo img { width: 100%; }
  /* Every box 20px from the screen's edges, as on the other pages */
  .card-band { padding-inline: 20px; }
  .side-media { padding-inline: 0; }
  .image-and-text-row .side-text { padding-left: 0; }
  .service-hero-text { text-align: center; }
  .service-hero-intro { font-size: var(--body-size); }
  .photo-note { flex-direction: column; }
  .map-caption { width: 100%; align-self: center; }
  .image-and-text-row { padding: 20px; }
  .image-and-text-row .side-text.is-evenly-padded-on-phone { padding: 10px 0; }
  .tall-photo { height: 250px; border-radius: 10px; object-position: center top; }
  .tall-photo.is-left-aligned-on-phone { object-position: left center; }
  .tall-photo.is-full-height-on-phone { height: 650px; border-radius: 0; object-position: center; }
  .icon-list-columns, .logo-gallery { grid-template-columns: 1fr; }
  .post-card.split-card, .post-card.faq-card { padding: 20px; }
  .post-card.split-card { flex-direction: column; gap: 10px; }
  .card-band .split-card-image, .card-band .split-card-image.is-rounded-left { min-height: 250px; border-radius: 10px; }
  .faq-card-inner { gap: 10px; }
  .faq-card-inner > .split-card-image, .faq-card-text { flex: none; width: 100%; }
  .faq-card-text { padding: 20px; }
  .closing-call-to-action { padding: 20px; }
}

/* ---------- Articles (blog posts) and post lists ---------- */
:root {
  --soft-divider-grey: #dddddd;          /* thin lines between list items */
  --post-card-shadow: rgba(161, 129, 216, .19); /* the lilac shadow under post cards */
  --guide-card-shadow: rgba(205, 192, 213, .25);
  --guide-card-hover-shadow: rgba(148, 111, 175, .41);
  --sand-line: #e0d8d0;                  /* sand-coloured section borders */
  --post-list-excerpt-grey: #777777;     /* post list: excerpt text */
  --post-list-date-grey: #adadad;        /* post list: date and time */
  --accordion-border-grey: #d5d8dc;      /* accordion borders */
  --post-list-line-grey: #eaeaea;        /* post list: line above the date */
}

/* Blog posts use the post frame (00-base); below desktop the source's frame ends 40px under the post */
@media (max-width: 1366px) and (min-width: 768px) {
  .post-page-top.is-blog-post > .post-page-top-inner { padding-bottom: 40px; }
}

/* Title area of a post: category label, title and a short introduction */
.post-title-area { display: flex; flex-direction: column; gap: 20px; }
.post-title-area .eyebrow-label { margin: 0; }
.post-intro-text { width: 80%; margin: 0; }
@media (max-width: 767px) { .post-intro-text { width: 100%; } }

/* Formatted text (paragraphs, headings and lists written together) */
.rich-text > :is(h2, h3, h4, h5, h6) { margin: 8px 0 16px; }
.rich-text > p { margin: 0 0 20px; }
.rich-text > ul, .rich-text > ol { margin: 0; padding-left: 40px; }

/* Post cards: the white boxes that hold each part of a post */
.post-card-stack { display: flex; flex-direction: column; }
.post-card {
  position: relative; display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; padding: 40px;
  background-color: var(--neutral-white); border-radius: 10px; box-shadow: 7px 7px 0 0 var(--post-card-shadow);
}
.post-card.is-pink-white { background-color: var(--pink-white); }
.post-card.is-lavender { background-color: var(--lavender-background); }
.post-card.is-off-white { background-color: var(--off-white); }
.post-card-row { display: flex; gap: 20px; }
.post-card-column { display: flex; flex-direction: column; gap: 20px; padding: 10px; min-width: 0; }
.post-card-column.is-main { flex: 1 1 0; }
.post-card-column.is-image-column { flex: 0 0 20%; align-items: center; }
.post-card-column.is-image-column img { width: 75%; }
.post-card-column.is-image-column img.is-smaller { width: 65%; }
@media (max-width: 1366px) { .post-card-column.is-image-column { flex-basis: 228.328px; } }
@media (max-width: 1024px) {
  .post-card { padding: 30px; }
  .post-card-column.is-image-column { flex-basis: 28%; }
}
@media (max-width: 767px) {
  .post-card { padding: 20px; }
  .post-card-row { flex-wrap: wrap; gap: 10px; }
  .post-card-column, .post-card-column.is-image-column { flex: 1 1 100%; }
  .post-card-column.is-image-column { align-items: flex-start; }
  .post-card-column.is-image-column img, .post-card-column.is-image-column img.is-smaller { width: 50%; }
  .post-card-column.is-image-column img.stays-full-width { width: 100%; }
}
.post-card-subtitle { font-family: var(--text-font); font-size: var(--intro-size); line-height: 1.2; font-weight: 300; letter-spacing: normal; color: var(--neutral-dark); }
/* A post body boxed in its own frame: inset below desktop widths */
.post-card-stack.is-boxed { gap: 40px; padding-bottom: 50px; }
.post-card-stack.is-boxed > .post-card { margin-bottom: 0; }
@media (max-width: 1366px) { .post-card-stack.is-boxed { padding: 40px; } }
@media (max-width: 767px) { .post-card-stack.is-boxed { padding: 60px 0 20px; } }

/* Text blocks: trailing space removed, pulled up, fixed widths */
.rich-text.has-no-bottom-space { margin-bottom: -20px; }
.rich-text.has-pulled-up-bottom { margin-bottom: -10px; }
.rich-text.is-pulled-up-30 { margin-bottom: -30px; }
.is-800-wide { width: 800px; max-width: 100%; }
.is-700-wide { width: 700px; max-width: 100%; }
.is-full-width { width: 100%; }
.is-950-wide { width: 950px; max-width: 100%; }
.post-card.has-no-gap { gap: 0; }
.post-card.is-centered { align-items: center; }

/* Image columns: round photos aligned to the start */
.post-card-column.is-image-column.is-start { align-items: flex-start; }
.post-card-column.is-image-column img.is-round { width: 100%; border-radius: 50%; }

/* Text beside a round photo, in one row */
.text-beside-circle-photo { display: flex; gap: 40px; padding: 10px; width: 100%; }
.text-beside-circle-photo-text { flex: 0 0 65.756%; }
.circle-photo { flex: 0 1 35%; min-width: 0; height: 350px; object-fit: cover; clip-path: circle(closest-side); }
.text-beside-circle-photo.has-small-photo .text-beside-circle-photo-text { flex-basis: 76%; }
.text-beside-circle-photo.has-small-photo .circle-photo { flex-basis: 21%; height: 221px; }
.rich-text.is-airy { line-height: 1.6em; }
.rich-text.is-extra-airy { line-height: 1.7em; }
.is-900-wide { width: 900px; max-width: 100%; }
/* Small grey note under a call to action */
.small-print-note { width: 600px; max-width: 100%; padding-top: 20px; color: var(--muted-text); font-size: .8em; line-height: 1.3em; text-align: center; }

/* Two buttons side by side, divided by a thin line */
.two-button-row { display: flex; flex-wrap: wrap; width: 985px; max-width: 100%; margin: 0 auto; padding: 10px; }
.two-button-row > div { flex: 0 0 50%; display: flex; flex-direction: column; align-items: center; padding: 10px; }
.two-button-row > div:first-child { border-right: 1px solid var(--soft-grey-button); }

/* Split cards: text beside a photo that fills its side of the card */
.post-card.is-split { padding: 0; }
@media (max-width: 1024px) { .post-card.is-split { padding: 30px; } }
@media (max-width: 767px) { .post-card.is-split { padding: 20px; } }
.post-card.is-split > .post-card-row { flex: 1 1 auto; }
.post-card-column.is-text-beside-photo { flex: 0 1 60%; padding: 40px; }
.post-card-column.is-text-beside-photo.is-wider { flex-basis: 70%; }
.post-card-photo { position: relative; flex: 0 1 40%; min-width: 0; overflow: hidden; }
.post-card-photo.is-narrow { flex-basis: 30%; }
.post-card-photo.is-right-side { border-radius: 0 10px 10px 0; }
.post-card-photo.is-left-side { border-radius: 10px 0 0 10px; }
.post-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-card-photo img.is-left-focus { object-position: 0% 50%; }
.post-card-photo img.is-top-focus { object-position: 50% 0%; }

/* A label followed by short bold words divided by thin lines ("Keep Track of: Time | Feeding ...") */
.labelled-inline-list { display: flex; gap: 10px; }
.labelled-inline-list-label { font-family: var(--title-font); font-size: 1.1em; line-height: 1.1; letter-spacing: -.6px; font-weight: 400; align-self: flex-start; }
.inline-divided-list { display: flex; flex-wrap: wrap; margin: 0 -15.5px; padding: 0; list-style: none; font-weight: 700; }
.inline-divided-list li { position: relative; margin: 0 15.5px; }
.inline-divided-list li:not(:last-child)::after { content: ""; position: absolute; top: 0; right: -15.5px; height: 100%; border-left: 1px solid var(--soft-divider-grey); }

/* Three short tips side by side, each under a big letter (A, B, C) */
.lettered-tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; font-size: .9em; line-height: 1.3em; }
.lettered-tips-grid > * { padding-right: 40px; }
.lettered-tips-grid > :not(:last-child) { border-right: 1px solid var(--neutral-light); }

/* A bullet list in two columns */
.two-column-list { width: 82%; columns: 2; column-gap: 10px; }
.two-column-list > ul { margin-bottom: 0; }
.two-column-list.keeps-two-columns { column-gap: normal; }

/* A short centred violet line */
.short-violet-divider { width: 35%; margin: 15px auto; border: 0; border-top: 1px solid var(--deep-violet); }

/* A single bold link line */
.bold-link { margin: 0; font-weight: 700; }
.bold-link a { display: block; }
@media (min-width: 768px) { .post-card.is-compact-bottom { padding-bottom: 30px; } }
.post-card-column.is-image-column img.is-97-percent-wide { width: 97%; }
.post-card-column.is-image-column img.is-90-percent-wide { width: 90%; }
.post-card-photo img.is-top-focus-slightly-right { object-position: 63% 0; }
.post-card-photo img.is-top-focus-more-right { object-position: 71% 0; }
.two-column-list.is-narrow-list { width: 42%; }

/* Short tips in a row, each a small label over a line of text */
.everyday-care-tips { display: flex; gap: 20px; }
.everyday-care-tip { flex: 0 1 auto; min-width: 0; }
.everyday-care-tip > div { padding: 5%; text-align: center; }
.everyday-care-tip h3 { margin: 8px 0 7px; }
.everyday-care-tip p { margin: 0; font-size: .9em; line-height: 1.2em; }

/* Headings and lines with extra space above, accent text */
.has-space-above { padding-top: 20px; }
.has-more-space-above { padding-top: 40px; }
@media (min-width: 1025px) { .post-card.has-35-padding { padding: 35px; } }
.post-card-row.has-no-gap { gap: 0; }
.post-card-subtitle.is-accent-colour { margin: 0; color: var(--main-accent-default); }
@media (min-width: 1025px) { .post-card.has-extra-bottom-padding { padding-bottom: 60px; } }
.post-card-row.is-lavender-row { background-color: var(--lavender-background); }
.icon-list.has-narrow-icon-gap .icon { margin-right: 5px; }
.two-column-list.is-small-text-list { width: 87%; column-gap: 5px; font-size: .9em; line-height: 1.5em; }

/* A note in a lavender box with a thick lilac line on its left */
.highlighted-note { margin-top: 20px; padding: 30px; border-left: 10px solid var(--main-accent-light); border-radius: 10px; background-color: var(--lavender-background); font-size: .9em; line-height: 1.4em; }

/* Three white boxes in a row, each with a picture, a title and a short text (labor stages, pump types) */
.feature-box-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 10px; }
.feature-box { display: flex; flex-direction: column; padding: 40px; border-radius: 10px; background-color: var(--neutral-white); text-align: center; }
.feature-box.has-percent-padding { padding: 10%; }
.feature-box.has-more-top-padding { padding: 60px 40px 30px; }
.feature-box h3 { margin: 8px 0 18px; font-size: 1.5em; line-height: 1.1; letter-spacing: -.4px; transition: color .3s; }
.feature-box:hover h3 { color: var(--main-accent-default); }
.feature-box p { margin: 0; font-size: .75em; line-height: 1.5em; }
.feature-box-icon { display: block; height: 89px; width: auto; margin: 0 auto 10px; }
.feature-box-photo { display: block; margin: 0 auto 23px; transition: transform .3s; }
.feature-box:hover .feature-box-photo { transform: translateY(-8px); }
.feature-box-photo.is-narrow-photo { width: 29%; }
.feature-box-photo.is-medium-photo { width: 55%; }
.feature-box-photo.is-wide-photo { width: 61%; margin-bottom: 21px; }
.feature-box-photo.is-wide-photo + h3 { margin-bottom: 16px; }

/* Table of contents: a pink box listing the post's sections; the list opens from its header */
.table-of-contents { margin: 10px 10px 30px; border-radius: 10px; background-color: var(--pink-white); }
.table-of-contents-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; cursor: pointer; }
.table-of-contents-header .eyebrow-label { color: var(--neutral-medium); }
.table-of-contents-toggle { display: inline-flex; padding: 0; border: 0; background: none; box-shadow: none; color: var(--neutral-medium); font-size: 17px; cursor: pointer; }
.table-of-contents-toggle .icon { width: 17px; height: 17px; }
.table-of-contents:not(.is-open) .table-of-contents-icon-open, .table-of-contents.is-open .table-of-contents-icon-closed { display: none; }
.table-of-contents-list { margin: 0; padding: 20px; list-style: none; }
.table-of-contents-list li { margin-bottom: 8.5px; }
.table-of-contents-list a { color: var(--neutral-medium); }
.table-of-contents-list a:hover { color: var(--main-accent-default); }

/* Check lists: a small grey check at the top of each item */
.icon-list.has-check-icons li, .icon-list.has-check-icons a { align-items: flex-start; }
.icon-list.has-check-icons .icon { width: 14px; height: 14px; margin: 4px 10.5px 0 0; color: var(--muted-text); }
.icon-list.has-check-icons.has-dark-icons .icon { color: inherit; }
.icon-list.has-check-icons.has-larger-icons .icon { width: 16px; height: 16px; margin-right: 11px; }
.icon-list.is-text-link-list a { display: flex; color: var(--neutral-medium); }

/* Image column with a short tip pushed to the bottom */
.post-card-column.is-image-column.is-spread { justify-content: space-between; }
.tip-with-icon { display: flex; gap: 10px; padding-bottom: 10%; color: var(--main-accent-default); }
.tip-with-icon.has-no-bottom-padding { padding-bottom: 0; }
.tip-with-icon > .icon { width: 24px; height: 24px; font-size: 24px; }
.tip-with-icon h3 { margin: 8px 0 4px; color: inherit; font-size: 1.1em; line-height: 1.1em; letter-spacing: -.8px; font-weight: 400; }
.tip-with-icon p { margin: 0; font-size: .8em; line-height: 1.3em; font-weight: 300; }
.gentle-reminder { width: 82%; padding-top: 40px; }
.gentle-reminder h3 { margin: 8px 0 9px; font-size: 1.4em; line-height: 1.1em; letter-spacing: -.7px; font-weight: 400; }
.gentle-reminder p { margin: 0; font-size: .9em; line-height: 1.4em; font-weight: 300; }
.has-small-space-above { margin-top: 10px; }
.large-centered-text { width: 970px; max-width: 100%; font-size: 1.3em; line-height: 1.5em; font-weight: 300; text-align: center; }
.table-of-contents.is-flush { margin: 0 0 20px; }
@media (max-width: 767px) { .table-of-contents { margin-inline: 0; } }
.text-beside-circle-photo.has-wider-text .text-beside-circle-photo-text { flex-basis: 68.445%; }

/* A simple accordion: each title opens its panel (several can be open) */
.simple-accordion details { display: flex; flex-direction: column; }
.simple-accordion summary { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--accordion-border-grey); color: var(--main-accent-default); font-size: 1.1em; line-height: calc(var(--body-size) * var(--body-line)); font-weight: 700; cursor: pointer; list-style: none; }
.simple-accordion summary::-webkit-details-marker { display: none; }
.simple-accordion summary .icon { width: 13px; height: 15px; }
.simple-accordion details[open] .accordion-icon-closed, .simple-accordion details:not([open]) .accordion-icon-open { display: none; }
.simple-accordion-panel { display: flex; flex-direction: column; gap: 20px; padding: 20px; border: 1px solid var(--accordion-border-grey); background-color: var(--neutral-light); }
.simple-accordion-panel .rich-text > :last-child { margin-bottom: 0; }

/* Two calls to action side by side, each with a line drawing, a title and a button */
.two-call-to-action-columns { display: flex; flex-wrap: wrap; padding: 10px; }
.call-to-action-column { flex: 0 0 50%; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 5%; text-align: center; }
.call-to-action-column:first-child { border-right: 1px solid var(--soft-grey-button); }
.call-to-action-column img { height: 146px; width: auto; margin-bottom: 8px; }
.call-to-action-column h2 { width: 100%; }

@media (max-width: 767px) {
  .post-card-column.is-image-column img.is-97-percent-wide { width: 100%; }
  .post-card-column.is-image-column img.is-90-percent-wide { width: 100%; }
  .post-card-column.has-phone-padding-0 { padding: 0; }
  .two-column-list.is-small-text-list { width: 87%; }
  .post-card-column.has-phone-padding-20 { padding: 20px; }
  .two-column-list.is-narrow-list { width: 100%; }
  .post-card.has-bottom-space-on-phone { padding-bottom: 40px; }
  .post-card.has-phone-padding-top-30 { padding: 30px 20px 20px; }
  .post-card.has-phone-padding-30-20 { padding: 30px 20px; }
  .post-card-column.has-phone-padding-5 { padding: 5px; }
  .post-card-column.has-phone-padding-10 { padding: 10px; }
  .post-card-column.has-phone-padding-top-30 { padding: 30px 0 0 5px; }
  .post-card-column.is-text-beside-photo { flex: 1 1 100%; }
  .post-card-photo, .post-card-photo.is-narrow { flex: 1 1 100%; min-height: 250px; }
  .post-card-photo.is-right-side, .post-card-photo.is-left-side { border-radius: 10px; }
  .post-card-photo.has-round-phone-corners { border-radius: 20px; }
  .text-beside-circle-photo { flex-direction: column; gap: 20px; }
  .labelled-inline-list { flex-wrap: wrap; }
  .text-beside-circle-photo-text { flex: none; width: 100%; }
  .circle-photo { flex: none; width: 100%; height: 270px; }
  .circle-photo.is-first-on-phone { order: -1; }
  .text-beside-circle-photo.has-no-phone-padding { padding: 0; }
  .text-beside-circle-photo.has-wider-text .text-beside-circle-photo-text { flex-basis: auto; }
  .is-hidden-on-phone { display: none; }
  .circle-photo.is-narrower-on-phone { width: 90%; align-self: center; }
  .post-card.has-phone-padding-30 { padding: 30px; }
  .post-card-column.is-image-column.has-centered-phone-image { padding: 0; align-items: center; }
  .post-card-column.is-image-column.has-centered-phone-image img { width: 90%; }
  .text-beside-circle-photo.has-small-photo .circle-photo { flex-basis: auto; height: 270px; }
  .text-beside-circle-photo.has-small-photo .text-beside-circle-photo-text { flex-basis: auto; }
  .two-button-row.has-no-phone-padding, .two-button-row.is-tight-on-phone { padding: 0; }
  .two-button-row.is-tight-on-phone { gap: 10px; }
  .two-button-row.is-tight-on-phone > div { padding: 0; }
  .post-card-column.has-phone-padding-top-30-only { padding: 30px 0 0; }
  .post-card-column.has-phone-padding-20-5-50 { padding: 20px 5px 50px; }
  .two-button-row > div { flex-basis: 100%; }
  .two-button-row > div:first-child { border-right: 0; }
  .post-card-column.has-phone-padding-30-0 { padding: 30px 0; }
  .lettered-tips-grid { grid-template-columns: 1fr; }
  .everyday-care-tips { flex-wrap: wrap; gap: 10px; }
  .feature-box-grid { grid-template-columns: 1fr; padding: 0; }
  .feature-box, .feature-box.has-percent-padding, .feature-box.has-more-top-padding { padding: 15%; }
  .feature-box h3, .feature-box-photo.is-wide-photo + h3 { margin-bottom: 12px; }
  .feature-box-icon { height: 70px; }
  .call-to-action-column { flex-basis: 100%; }
  .two-column-list { width: 100%; }
  .two-column-list:not(.keeps-two-columns) { columns: 1; }
  .short-violet-divider { width: 100%; margin: 2px auto; }
}

/* Lists with a small icon before each item, optionally divided by thin lines */
.icon-list { margin: 0; padding: 0; list-style: none; }
.icon-list li { position: relative; display: flex; align-items: center; }
.icon-list li + li { margin-top: 9.5px; }
.icon-list li:not(:last-child) { padding-bottom: 9.5px; }
.icon-list.has-dividers li:not(:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--soft-divider-grey); }
.icon-list .icon { width: 1.25em; font-size: 14px; }
.icon-list.is-bold-link-list a { display: flex; align-items: center; font-weight: 700; }
.icon-list .icon + span { padding-left: 5px; transition: color .3s; }
.icon-list li:hover .icon + span { color: var(--main-accent-default); }
.icon-list.has-small-dots .icon { font-size: 7px; margin-right: 7px; }
.icon-list.has-icon-gap .icon { margin-right: 7px; }
.icon-list.is-centered-list { width: 790px; max-width: 100%; text-align: center; }
.icon-list.is-centered-list li { justify-content: center; }

/* ---------- Helpful guides: cards linking to the other guides, beside a "Book a Visit" box ---------- */
.helpful-guides-section { padding: 0 40px; border-bottom: 1px solid var(--sand-line); background-color: var(--off-white); overflow: hidden; }
.helpful-guides-section::before { content: ""; position: absolute; inset: 0; background: url("images/dental-model779.webp"); opacity: .17; pointer-events: none; }
@media (min-width: 1367px) { .helpful-guides-section::before { background-attachment: fixed; } }
.helpful-guides-inner { position: relative; max-width: 1400px; margin-inline: auto; display: flex; flex-direction: column; justify-content: center; gap: 30px; padding: 60px 0 70px; }
.helpful-guides-inner > .eyebrow-label { margin: 0; text-align: center; }
.helpful-guides-layout { display: flex; gap: 20px; }
.helpful-guides-grid { flex: 0 0 65%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 20px; }
.helpful-guide-card {
  display: flex; flex-direction: column; justify-content: space-around; gap: 20px; padding: 30px;
  background-color: var(--neutral-white); border-radius: 15px; box-shadow: 5px 5px 0 0 var(--guide-card-shadow); transition: box-shadow .3s;
}
.helpful-guide-card:first-child { gap: 10px; }
.helpful-guide-card:hover { box-shadow: 7px 7px 0 0 var(--guide-card-hover-shadow); }
.helpful-guide-card h3 { font-weight: 400; font-size: 1.3em; line-height: 1; letter-spacing: -.9px; }
.helpful-guide-card p { margin: 0; font-size: .8em; line-height: calc(var(--body-size) * var(--body-line)); }
.helpful-guide-card .icon-list a { display: flex; align-items: center; font-size: .8em; line-height: calc(var(--body-size) * var(--body-line)); }
.helpful-guide-card .icon-list .icon { width: 18px; color: var(--main-accent-default); }
.need-assistance-box {
  flex: 1 1 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: 10px; padding: 40px;
  background-color: var(--lavender-background); border-radius: 15px; box-shadow: 5px 5px 0 0 rgba(116, 102, 145, .15); transition: background-color .3s, box-shadow .3s;
}
.need-assistance-box:hover { background-color: var(--neutral-white); box-shadow: 5px 5px 0 0 rgba(175, 159, 199, .5); }
.need-assistance-box img { display: inline-block; vertical-align: baseline; width: 18%; }
.need-assistance-box h3 { margin: 8px 0 7px; }
.need-assistance-box p { margin: 0; }
.need-assistance-box .button { align-self: flex-start; margin-top: 10px; }
@media (max-width: 1024px) {
  .helpful-guides-layout { flex-direction: column; }
  .helpful-guides-grid { flex-basis: auto; }
}
@media (max-width: 767px) {
  .helpful-guides-section { padding: 0 20px; }
  .helpful-guides-inner { padding: 50px 0 70px; }
  .helpful-guides-grid { grid-template-columns: 1fr; }
}

/* ---------- Post lists (category pages, the Blog): the posts' title area over the line texture, no video (designer, 2026-10-23),
   then the posts as cards in two columns ---------- */
.post-page-top.is-post-list > .post-page-top-inner { gap: 50px; }
.post-list-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px 40px; align-items: start; }
.post-list-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-grey); border-radius: 25px; background-color: var(--neutral-light); }
.post-list-card-image { position: relative; display: block; margin-bottom: 20px; }
.post-list-card-image img { display: block; width: 100%; }
.post-list-card-image::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(0deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 75%); transition: opacity .3s ease-out; }
.post-list-card:hover .post-list-card-image::after { opacity: .5; }
.post-list-card-badge { position: absolute; top: 0; left: 0; margin: 1px; padding: .6em 1.2em; background-color: var(--main-accent-default); color: var(--neutral-light); font-size: 17px; font-weight: 700; line-height: 1; text-transform: uppercase; }
.post-list-card-text { flex-grow: 1; margin-top: 10px; padding: 0 40px; }
.post-list-card-image + .post-list-card-badge + .post-list-card-text { margin-top: 0; padding-top: 10px; }
.post-list-card-title { margin: 0 0 8px; font-family: var(--text-font); font-size: var(--body-size); line-height: var(--body-line); font-weight: 400; letter-spacing: normal; }
.post-list-card-excerpt { margin: 0 0 25px; font-family: var(--small-font); font-size: var(--fineprint-size); line-height: 1.6; color: var(--post-list-excerpt-grey); }
.post-list-card-read-more { display: inline-block; margin-bottom: 20px; color: var(--soft-grey-button); font-size: 16px; font-weight: 700; line-height: 1; text-transform: uppercase; }
.post-list-card-read-more:hover { color: var(--main-accent-default); }
.post-list-card-date { margin: 0; padding: 10px 40px; border-top: 1px solid var(--post-list-line-grey); font-family: var(--small-font); font-size: var(--fineprint-size); line-height: 1.6; color: var(--post-list-date-grey); }
.post-list-card-date span + span::before { content: "•"; margin: 0 5px; }
/* Parent Education: three to a row like a blog, cards the same height, photos cropped alike (designer, 2026-10-22) */
.post-list-grid.is-three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px; align-items: stretch; }
:is(.post-list-grid.is-three-up, .guide-slider) .post-list-card-image img { aspect-ratio: 3 / 2; object-fit: cover; }
:is(.post-list-grid.is-three-up, .guide-slider) .post-list-card-badge { font-size: 14px; }
:is(.post-list-grid.is-three-up, .guide-slider) .post-list-card-text { padding: 0 28px; }
:is(.post-list-grid.is-three-up, .guide-slider) .post-list-card-date { padding: 10px 28px; }
:is(.post-list-grid.is-three-up, .guide-slider) .post-list-card-read-more { color: var(--main-accent-default); } /* readable, as on About Us */
:is(.post-list-grid.is-three-up, .guide-slider) .post-list-card-read-more:hover { color: var(--plum); }
.is-post-list + [data-section="better-support"] { padding: 0 0 40px; } /* as wide as the posts above */
.is-post-list + [data-section="better-support"] .wide-stack { width: min(var(--content-max-width), 100% - 2 * var(--page-side-gutter)); max-width: none; }
@media (max-width: 1024px) { .is-post-list + [data-section="better-support"] { padding-bottom: 30px; } .is-post-list + [data-section="better-support"] .wide-stack { width: calc(100% - 80px); } }
@media (max-width: 767px) { .is-post-list + [data-section="better-support"] { padding-bottom: 20px; } .is-post-list + [data-section="better-support"] .wide-stack { width: calc(100% - 40px); } }
@media (max-width: 1024px) { .post-list-grid.is-three-up { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; } :is(.post-list-grid.is-three-up, .guide-slider) .post-list-card-text { padding: 0 20px; } :is(.post-list-grid.is-three-up, .guide-slider) .post-list-card-date { padding: 10px 20px; } }
@media (max-width: 767px) { .post-list-grid.is-three-up { grid-template-columns: minmax(0, 1fr); } }
/* Call to action on a dark band: "Call Us Today!" */
.call-us-band { margin-top: 3%; padding: 0 8%; }
.call-us-band-inner { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; max-width: 700px; min-height: 405px; margin-inline: auto; text-align: center; }
.call-us-band-title { width: 100%; font-size: 78px; line-height: 1; letter-spacing: -4px; }
.call-us-band .button:hover, .call-us-band .button:focus-visible { background-color: var(--muted-text); }
@media (max-width: 1024px) {
  .post-list-grid { row-gap: 71px; }
  .call-us-band { padding: 0 5%; }
  .call-us-band-inner { max-width: none; min-height: 0; padding: 8%; }
  .call-us-band-title { font-size: 45px; line-height: 1.1; letter-spacing: -.02em; }
}
@media (max-width: 767px) {
  .post-page-top.is-post-list > .post-page-top-inner { gap: 30px; }
  .post-list-grid { grid-template-columns: 1fr; gap: 30px; }
  .post-list-card-title { margin-bottom: 9px; }
  .call-us-band-inner { gap: 20px; }
  .call-us-band-title { font-size: 32px; }
}

/* ---------- Case studies (the "Case Use" posts): one shared post design ----------
   Reuses the post frame (00-base), the post cards, rich text and icon lists (50-articles) and the split card
   (.post-card.split-card, 40-services). Variants of shared classes for these posts are scoped to .case-study-post. */
:root {
  --warning-red: #cc0202; /* "before" list icons */
  --gain-teal: #5b9599;   /* "with BabyLiveAdvice" list icons */
}

/* The post: title area and cards over the line texture, which fades into the light grey further down */
.case-study-post { position: relative; padding-bottom: 50px; background: url("images/shutterstock-2475710077-1600x1066.webp") center top / contain; }
.case-study-post::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(252, 250, 248, .72) 14%, var(--neutral-light) 33%); pointer-events: none; }
.case-study-post .post-page-top { background: none; }
.case-study-post .post-page-top::before { content: none; }
.case-study-post .post-page-top-inner { padding-bottom: 20px; }
.case-study-eyebrow { margin: 0; }
.case-study-post .eyebrow-label b { font-weight: 900; }
.case-study-body { position: relative; z-index: 1; }
.case-study-post .case-study-body > .post-card:last-child { margin-bottom: 40px; }

/* Cards (post cards) */
.case-study-post .post-card.is-pale-grey { background-color: var(--pale-grey-background); }
.case-study-post .post-card.is-centered { align-items: center; text-align: center; }
.case-study-post .is-roomy { gap: 30px; }
/* Grids whose first two rows share one height (the rest size to their content) */
.case-study-post .has-two-equal-rows { grid-template-rows: repeat(2, 1fr); }
/* A centred column inside a card, at most 700 to 1000px wide */
.centered-column { display: flex; flex-direction: column; gap: 20px; width: 100%; margin-inline: auto; }
.centered-column.is-700-wide { max-width: 700px; }
.centered-column.is-800-wide { max-width: 800px; }
.centered-column.is-850-wide { max-width: 850px; }
.centered-column.is-1000-wide { max-width: 1000px; }

/* Rich text inside the cards */
.case-study-post .rich-text > ul { margin-bottom: 0; }
.case-study-post .rich-text > .eyebrow-label { margin: 8px 0 16px; }
.case-study-post .rich-text.is-800-wide { width: 100%; max-width: 800px; margin-inline: auto; }
.case-study-post .rich-text.is-900-wide { width: 100%; max-width: 900px; margin-inline: auto; }
.case-study-post .rich-text.is-80-percent-wide { width: 80%; margin-inline: auto; }
.case-study-post .rich-text.is-close-to-next { margin-bottom: -25px; }
.case-study-post .rich-text.is-flush-with-next { margin-bottom: -20px; }
.case-study-post .rich-text.is-closer-to-next { margin-bottom: -30px; }
.case-study-post .rich-text.is-small-list { font-size: .9em; line-height: 1.5; }
@media (max-width: 767px) { .case-study-post .rich-text.is-close-to-next.is-reset-on-phone { margin-bottom: 0; } }
.case-study-post .post-card.is-centered > .intro-line { max-width: 560px; }
.key-question-follow-up { max-width: 850px; }
.centered-button-row { display: flex; justify-content: center; }

/* Title beside a logo (the first card) */
.title-beside-logo { display: flex; }
.title-beside-logo-text { flex: 0 0 64.711%; display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.title-beside-logo-image { flex: 0 0 36%; padding: 10px; text-align: right; }
.title-beside-logo-image img { width: 89%; }
@media (min-width: 1367px) {
  .title-beside-logo.is-wide-text > .title-beside-logo-text { flex-basis: 70%; }
  .title-beside-logo.is-wide-text > .title-beside-logo-image { flex-basis: 30%; }
}
.title-beside-logo.is-wide-text > .title-beside-logo-image { text-align: left; }
.title-beside-logo.is-wide-text > .title-beside-logo-image img { width: 100%; }

/* Open section: no card, just the spacing of one (the key question) */
.open-section { display: flex; flex-direction: column; gap: 20px; padding: 40px; }

/* Split card: text beside a photo that fills its side (.post-card.split-card, shared with 40-services) */
.case-study-post .post-card.split-card { flex-direction: row; gap: 20px; padding: 0; }
.split-card-text { flex: 0 1 60%; display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: 40px; }
.split-card-text.is-wide { flex-basis: 97%; }
.split-card-image { position: relative; flex: 0 1 40%; overflow: hidden; border-radius: 0 10px 10px 0; }
.split-card-image.is-rounded-left { border-radius: 10px 0 0 10px; }
.split-card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Counters: big numbers with a label */
.stat-counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.stat-counters.has-space-below { padding-bottom: 30px; }
.stat-counter { padding: 5px; }
.stat-counter-number { margin: 0; color: var(--neutral-dark); font-family: var(--text-font); font-size: 2.4em; font-weight: 500; line-height: 1; letter-spacing: -.7px; }
.stat-counter-label { margin: 0; color: var(--neutral-dark); font-family: var(--title-font); font-size: 18px; line-height: 1.4; letter-spacing: -.8px; }

/* Stat row: a counter and short figures side by side */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.stat-figure { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.stat-figure-value { margin: 0; color: var(--neutral-dark); font-family: var(--text-font); font-size: 1.8em; font-weight: 800; line-height: .9; letter-spacing: -1.6px; }
.stat-figure-label { margin: 0; color: var(--neutral-medium); font-family: var(--title-font); font-size: 18px; line-height: 1; letter-spacing: -.8px; }

/* Key question: an icon, a label and a large purple question or statement */
.key-question { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; }
.key-question-icon { display: block; height: 50px; margin-bottom: 15px; color: var(--main-accent-default); font-size: 50px; line-height: 1; }
.key-question .eyebrow-label { margin: 8px 0 16px; }
.key-question-text { margin: 0; color: var(--main-accent-default); font-family: var(--title-font); font-size: 2.4em; font-weight: 300; line-height: 1.1; letter-spacing: -2.5px; }

/* Icon lists in these posts: centered, with small purple checks or "before / after" icons */
.case-study-post .icon-list.is-centered li { justify-content: center; text-align: center; }
.case-study-post .icon-list.is-centered.is-small-checks { width: 400px; max-width: 100%; margin-inline: auto; }
.case-study-post .icon-list.is-small-checks:not(.is-centered) { width: auto; margin-inline: 0; }
.case-study-post .icon-list.is-small-checks li + li { margin-top: 5.5px; }
.case-study-post .icon-list.is-small-checks li:not(:last-child) { padding-bottom: 5.5px; }
.case-study-post .icon-list.is-small-checks .icon { width: 12px; margin-right: 7px; font-size: 12px; color: var(--main-accent-default); }
.case-study-post .icon-list.is-small-checks span { font-size: .9em; line-height: calc(var(--body-size) * var(--body-line)); }
.case-study-post .icon-list.is-comparison li + li { margin-top: 5px; }
.case-study-post .icon-list.is-comparison li:not(:last-child) { padding-bottom: 5px; }
.case-study-post .icon-list.is-comparison .icon { width: 18px; margin-right: 9px; font-size: 18px; }
.case-study-post .icon-list.is-warning .icon { color: var(--warning-red); }
.case-study-post .icon-list.is-gain .icon { color: var(--gain-teal); }
.case-study-post .icon-list.is-comparison li:hover .icon + span { color: inherit; }

/* Partner logos in a white rounded box */
.partner-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 20px; width: 100%; padding: 20px max(20px, (100% - 976px) / 2); border-radius: 15px; background: var(--neutral-white); }
.partner-logos img { width: 50%; margin-inline: auto; }
.partner-logos img.is-wide-logo { width: 62%; }
.partner-logos img.is-compact-logo { width: 153px; }

/* Pathway: the steps of a patient or data pathway in a pale grey band */
.pathway-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 30px; margin: 0; padding: 20px; border-radius: 15px; background: var(--pale-grey-background); list-style: none; }
.pathway-boxes.is-four-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pathway-boxes li { margin: 8px 0 16px; color: var(--main-accent-default); font-family: var(--title-font); font-size: 19px; font-weight: 300; line-height: 1.2; letter-spacing: -.7px; text-align: center; }

/* Two small white cards side by side */
.mini-card-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mini-card { padding: 20px; border-radius: 10px; background: var(--neutral-white); box-shadow: 7px 7px 0 0 var(--post-card-shadow); }

/* Purple icon boxes: an icon, a purple title and a short text (services) */
.purple-icon-boxes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px; padding: 20px; }
.purple-icon-box { display: flex; flex-direction: column; gap: 18px; }
.purple-icon-box-icon { display: block; height: 50px; color: var(--main-accent-default); font-size: 50px; line-height: 1; }
.purple-icon-box-icon img { width: 50px; height: 50px; vertical-align: top; }
.purple-icon-box-title { margin: 8px 0 7px; color: var(--main-accent-default); font-family: var(--title-font); font-size: 22px; font-weight: 300; line-height: 1.2; letter-spacing: -.5px; }
.purple-icon-box p { margin: 0; font-size: .8em; line-height: 1.3; }

/* Step boxes: numbered steps in a lavender band */
.step-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; width: 100%; margin: 0; padding: 20px; border-radius: 15px; background: var(--lavender-background); list-style: none; }
.step-box { padding: 20px 20px 25px; border-radius: 10px; background: var(--rose-white); text-align: center; }
.step-box-title { margin: 8px 0 6px; color: var(--main-accent-default); font-family: var(--title-font); font-size: 25px; font-weight: 300; line-height: 1.2; letter-spacing: -.7px; }
.step-box p { margin: 0; color: var(--neutral-dark); font-size: 15px; line-height: 1.3; }

/* Comparison: "before" and "after" columns of short lists */
.comparison-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px max(10px, (100% - 989px) / 2); }
.comparison-column { display: flex; flex-direction: column; gap: 20px; padding: 30px 0; background: var(--pale-grey-background); }
.comparison-column h4 { text-align: center; }

/* Centered icon features (two by two) */
.centered-icon-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; width: 100%; max-width: 833px; margin-inline: auto; padding: 20px; }
.centered-icon-feature { display: flex; flex-direction: column; align-items: center; text-align: center; }
.centered-icon-feature-icon { display: block; height: 50px; margin-bottom: 15px; color: var(--main-accent-default); font-size: 50px; line-height: 1; }
.centered-icon-feature-icon .icon { width: auto; }
.centered-icon-feature-title { margin: 8px 0 16px; color: var(--neutral-dark); font-family: var(--title-font); font-size: 26px; font-weight: 300; line-height: 1.2; letter-spacing: -.9px; }
.centered-icon-feature p { margin: 0; font-size: .9em; line-height: 1.3; }

/* Impact highlights: purple titles with short texts in a pale grey box */
.impact-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; padding: 20px; border-radius: 15px; background: var(--pale-grey-background); }
.impact-highlight-title { margin: 8px 0 6px; color: var(--main-accent-default); font-family: var(--title-font); font-size: 19px; font-weight: 300; line-height: 1.2; letter-spacing: -.7px; }
.impact-highlights p { margin: 0; color: var(--neutral-dark); font-size: 13px; line-height: 1.3; }

/* Phase cards: white cards with a label, a title and a check list */
.phase-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 10px; }
.phase-card { display: flex; flex-direction: column; gap: 20px; padding: 40px; border-radius: 15px; background: var(--neutral-white); }
.phase-card .phase-card-label { margin: 0 0 -5px; font-size: .8em; }
.phase-cards.is-two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.phase-card-note { font-size: .9em; line-height: 1.4; }

/* Journey diagram: a wide illustration centred in its card */
.journey-diagram { align-self: center; width: 80%; padding: 45px 0 40px; text-align: center; }
.journey-diagram img { width: 80%; border-radius: 15px; }

/* Bordered grid: cells divided by thin lines */
.bordered-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 10px; }
.bordered-grid.is-three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bordered-grid-cell { padding: 25px; font-size: .9em; line-height: 1.2; }
.bordered-grid-cell.has-line-right { border-right: 1px solid var(--soft-grey-button); }
.bordered-grid-cell.has-line-below { border-bottom: 1px solid var(--soft-grey-button); }

/* Numbered steps: a grey line icon, a purple title and a short text */
.numbered-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 0; padding: 10px; list-style: none; }
.numbered-step { text-align: center; }
.numbered-step-icon { display: block; width: auto; height: 49px; margin: 0 auto 16px; opacity: .62; }
.numbered-step-title { margin: 8px 0 16px; color: var(--main-accent-default); font-family: var(--title-font); font-size: 19px; font-weight: 300; line-height: 1.2; letter-spacing: -.7px; }
.numbered-step p { margin: 0; color: var(--neutral-dark); font-size: 13px; line-height: 1.3; }
.numbered-steps.is-five-columns { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Titled text grid: short purple titles with a line of text, optionally on a pale grey panel */
.titled-text-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin: 0; padding: 20px; list-style: none; }
.titled-text-grid.is-grey-panel { border-radius: 15px; background: var(--pale-grey-background); }
.titled-text-grid.is-centered { text-align: center; }
.titled-text-title { margin: 8px 0 16px; color: var(--main-accent-default); font-family: var(--title-font); font-size: 19px; font-weight: 300; line-height: 1.2; letter-spacing: -.7px; }
.titled-text-grid p { margin: 0; color: var(--neutral-dark); font-size: 13px; line-height: 1.3; }

/* Mini card grid: small white cards in rows */
.case-study-post .mini-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 10px; }
.case-study-post .mini-card-grid.is-three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-study-post .mini-card-grid.is-five-columns { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.mini-card.is-spacious { padding: 30px; }

/* Statement with an icon beside it */
.statement-with-icon { display: flex; align-items: flex-start; gap: 15px; }
.statement-icon { flex: none; height: 50px; color: var(--main-accent-default); font-size: 50px; line-height: 1; }
.statement-with-icon p { margin: 0; color: var(--neutral-dark); font-family: var(--title-font); font-size: 1.8em; font-weight: 300; line-height: 1.1; letter-spacing: -2px; }

/* Value strip: small white cards with an icon, a label and a line of text */
.value-strip-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding: 10px; }
.value-strip-card { display: flex; flex-direction: column; gap: 20px; padding: 30px; border-radius: 10px; background: var(--neutral-white); box-shadow: 7px 7px 0 0 var(--post-card-shadow); }
.value-strip-card-icon { display: block; height: 52px; color: var(--main-accent-default); font-size: 50px; line-height: 1; }
.value-strip-card-icon .icon { width: auto; }

@media (max-width: 1366px) {
  .case-study-post { padding-bottom: 40px; }
  .case-study-body.content-width { width: calc(100% - 80px); }
  .title-beside-logo-text { flex-basis: 801.68px; }
  .title-beside-logo-image { flex-basis: 228.33px; }
}
@media (max-width: 1024px) {
  .case-study-post .post-card.split-card { padding: 30px; }
  .mini-card { padding: 30px; }
  .title-beside-logo-text { flex: 1 1 0; }
  .title-beside-logo-image { flex-basis: 28%; }
  .comparison-column { padding: 30px; }
}
@media (max-width: 767px) {
  .case-study-post { padding-bottom: 20px; }
  .case-study-body.content-width { width: calc(100% - 40px); }
  .case-study-post .post-card.split-card { flex-direction: column; gap: 10px; padding: 20px; }
  .split-card-text, .split-card-text.is-wide { flex: none; padding: 0; }
  .mini-card { padding: 20px; }
  .split-card > .split-card-image { flex: none; }
  .case-study-post .split-card-image { min-height: 250px; }
  .split-card-image img.is-top-on-phone { object-position: center top; }
  .title-beside-logo { flex-direction: column; gap: 10px; }
  .title-beside-logo-text { flex: none; }
  .title-beside-logo-image { order: -1; flex: none; padding: 0 0 20px; text-align: left; }
  .title-beside-logo-image img { width: 50%; }
  .title-beside-logo.is-wide-text > .title-beside-logo-image { padding: 10px; }
  .title-beside-logo.has-flush-logo-on-phone > .title-beside-logo-image { padding: 0 0 30px; }
  .title-beside-logo.is-wide-text > .title-beside-logo-image img { width: 100%; }
  .stat-counters, .mini-card-pair, .impact-highlights, .centered-icon-features, .comparison-columns { grid-template-columns: 1fr; }
  .key-question-text { font-size: 2em; letter-spacing: -1.3px; }
  .partner-logos { grid-template-columns: 1fr; padding: 25px; }
  .pathway-boxes, .pathway-boxes.is-four-steps { grid-template-columns: 1fr; }
  .purple-icon-boxes { grid-template-columns: 1fr; padding: 0; }
  .step-boxes { grid-template-columns: 1fr; gap: 20px; padding: 0; }
  .comparison-column { padding: 20px; }
  .value-strip-cards { grid-template-columns: 1fr; padding: 0; }
  .value-strip-card { padding: 20px; }
  .stat-row, .phase-cards, .bordered-grid, .bordered-grid.is-three-columns, .numbered-steps, .numbered-steps.is-five-columns, .titled-text-grid, .phase-cards.is-two-columns { grid-template-columns: 1fr; }
  .case-study-post .mini-card-grid, .case-study-post .mini-card-grid.is-three-columns, .case-study-post .mini-card-grid.is-five-columns { grid-template-columns: 1fr; padding: 0; }
  .open-section { padding: 0; }
  .open-section.has-margin-below-on-phone { margin-bottom: 40px; }
  .phase-cards { padding: 0; }
  .titled-text-grid:not(.is-grey-panel) { padding: 0; }
  .phase-card { padding: 25px; }
  .bordered-grid.is-compact-on-phone { padding: 0; }
  .bordered-grid.is-compact-on-phone .bordered-grid-cell { padding: 10px; }
  .mini-card.is-spacious { padding: 20px; }
  .case-study-post .rich-text.is-80-percent-wide.is-full-width-on-phone { width: 100%; }
  .statement-with-icon { flex-direction: column; }
  .statement-with-icon p { font-size: 2em; letter-spacing: -1.3px; }
}

/* ---------- A long post in the post frame: the Medicaid Health Plan service post ----------
   The frame's title section and a long stack of cards share one background: the line texture, repeating,
   fading into the light grey (like .case-study-post in 60-case-studies). Reused: the post frame (00-base),
   .post-title-area, .post-intro-text, .post-card (+ .is-pink-white, .is-lavender, .is-centered), .rich-text
   (+ .has-no-bottom-space, .has-pulled-up-bottom), .icon-list, .has-dividers, .post-card-subtitle (50-articles);
   .post-card.split-card, .icon-list-columns (40-services); .split-card-text, .split-card-image, .key-question,
   .mini-card, .centered-column, .centered-button-row (60-case-studies). Variants the case studies scope to
   their posts are defined here without a scope, with the same names. */
:root {
  --list-icon-black: #000000; /* the black checks of plain check lists */
}

/* The frame: title section and cards over one background */
.long-post-frame { position: relative; padding-bottom: 50px; background: url("images/shutterstock-2475710077-1600x1066.webp") center top / contain; }
.long-post-frame::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(252, 250, 248, .72) 14%, var(--neutral-light) 33%); pointer-events: none; }
.long-post-frame > .post-page-top { background: none; }
.long-post-frame > .post-page-top::before { content: none; }
.long-post-frame > .post-page-top > .post-page-top-inner { padding-bottom: 20px; }
.long-post-body { position: relative; z-index: 1; }
@media (max-width: 1366px) { .long-post-frame { padding-bottom: 40px; } }
@media (max-width: 1024px) { .long-post-body { width: calc(100% - 80px); } }
@media (max-width: 767px) {
  .long-post-frame { padding-bottom: 20px; }
  .long-post-body { width: calc(100% - 40px); }
  .long-post-frame .split-card-image { min-height: 250px; }
}

/* Card variants (the case studies have the same ones, scoped to their posts) */
.post-card.is-pale-grey { background-color: var(--pale-grey-background); }
.post-card.is-roomy { gap: 30px; }
.rich-text.is-close-to-next { margin-bottom: -25px; }
.rich-text.has-pulled-up-top { margin-top: -10px; }
.rich-text.is-900-wide { width: 100%; max-width: 900px; margin-inline: auto; }
.rich-text.has-tight-lists > ul { margin-bottom: 0; }
.rich-text > .post-card-subtitle { margin: 8px 0 16px; }
.post-card-subtitle.is-regular-weight { font-weight: 400; }
.eyebrow-label.is-heavy { font-weight: 900; }
.is-600-wide { width: 600px; max-width: 100%; }

/* A logo at the top of a split card's text */
.split-card-logo { width: 40%; }
@media (max-width: 767px) { .split-card-logo { width: 50%; } }

/* A centred block on the page background (no card): a key question, text and tiles */
.centered-feature-block { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 1080px; margin-inline: auto; padding: 40px; }
.feature-tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; padding: 10px; }
.feature-tile { display: flex; flex-direction: column; gap: 10px; padding: 30px; border-radius: 15px; background-color: var(--neutral-white); }
.feature-tile-icon { display: block; width: 50px; height: 50px; margin-bottom: 7.6px; fill: var(--main-accent-default); }
.feature-tile-text { font-size: .9em; line-height: 1.4em; }
@media (max-width: 767px) {
  .centered-feature-block { padding: 0 0 40px; }
  .feature-tile-grid { grid-template-columns: 1fr; padding: 0; }
  .feature-tile { padding: 25px; }
}

/* Icon lists: centred, black or purple checks, item spacing, small checks, inline */
.icon-list.is-centered li { justify-content: center; text-align: center; }
.icon-list.has-black-icons .icon { color: var(--list-icon-black); }
.icon-list.has-accent-icons .icon { color: var(--main-accent-default); }
.icon-list.has-text-colored-icons .icon { color: var(--neutral-medium); }
.icon-list.has-no-item-space li + li { margin-top: 0; }
.icon-list.has-no-item-space li:not(:last-child) { padding-bottom: 0; }
.icon-list.has-medium-item-space li + li { margin-top: 8px; }
.icon-list.has-medium-item-space li:not(:last-child) { padding-bottom: 8px; }
.icon-list.is-static li:hover > span { color: inherit; }
.icon-list.is-shrink-wrapped { width: fit-content; max-width: 100%; margin-block: 10px; }
.icon-list.is-small-checks { width: 400px; max-width: 100%; margin-inline: auto; }
.icon-list.is-small-checks li + li { margin-top: 5.5px; }
.icon-list.is-small-checks li:not(:last-child) { padding-bottom: 5.5px; }
.icon-list.is-small-checks .icon { width: 12px; margin-right: 7px; font-size: 12px; color: var(--main-accent-default); }
.icon-list.is-small-checks span { font-size: .9em; line-height: calc(var(--body-size) * var(--body-line)); }
.icon-list.is-inline { display: flex; flex-wrap: wrap; margin-inline: -18.5px; }
.icon-list.is-inline li { margin: 0 18.5px; padding: 0; }
.icon-list.is-inline li > span:first-child { padding-left: 0; }
.icon-list.is-inline.has-close-items { margin-inline: -5px; line-height: 1.5; }
.icon-list.is-inline.has-close-items li { margin: 0 5px; }
@media (max-width: 767px) { .icon-list.has-bottom-space-on-phone { padding-bottom: 20px; } }
.inline-list-strip { display: grid; justify-items: center; align-items: center; padding: 20px; border-radius: 15px; background-color: var(--pale-grey-background); }
/* Two lists side by side, the first a little narrower */
.icon-list-columns.is-uneven { grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); width: 100%; max-width: 833px; margin-inline: auto; text-align: center; }
@media (max-width: 767px) { .icon-list-columns.is-uneven { grid-template-columns: 1fr; } }

/* Icon boxes: a purple icon above a title and a short text, in a centred grid of three */
.icon-box-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; width: 100%; max-width: 948px; margin-inline: auto; padding: 10px; }
.icon-box { display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; }
.icon-box > .icon { width: auto; height: 50px; color: var(--main-accent-default); }
.icon-box-title { margin: 8px 0 16px; }
.icon-box-text { margin: 0; font-size: 15px; line-height: 21px; }
.icon-box-grid.is-compact { gap: 20px; max-width: 1133px; }
.icon-box-grid.is-compact .icon-box { gap: 13px; }
.icon-box-grid.is-compact .icon-box > .icon { height: 38px; }
.icon-box-grid.is-compact .icon-box-title { margin: 8px 0 4px; font-size: 1.4em; line-height: 1.1; letter-spacing: -.6px; font-weight: 400; }
.icon-box-grid.is-compact .icon-box-text { font-size: .9em; line-height: calc(var(--body-size) * var(--body-line)); }
@media (max-width: 767px) { .icon-box-grid { grid-template-columns: 1fr; } }

/* Line icon features: a faded line icon above a small purple title and a short text, four across */
.line-icon-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; padding: 20px; }
.line-icon-feature img { display: block; width: auto; height: 49px; margin-bottom: 16px; opacity: .62; }
.line-icon-feature img.is-smaller { height: 47px; }
.line-icon-feature-title { margin: 8px 0 16px; font-family: var(--title-font); font-size: 19px; line-height: 1.2; letter-spacing: -.7px; font-weight: 300; color: var(--main-accent-default); }
.line-icon-feature-text { margin: 0; font-size: 13px; line-height: 1.3; color: var(--neutral-dark); }
@media (max-width: 767px) {
  .line-icon-features { grid-template-columns: 1fr; }
  .line-icon-feature { text-align: center; }
  .line-icon-feature img { margin-inline: auto; }
}

/* Mini cards (60-case-studies) in a grid of three or four */
.mini-card-grid { display: grid; gap: 25px; padding: 10px; }
.mini-card-grid.is-four-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mini-card-grid.is-three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mini-card.is-centered-content { display: flex; flex-direction: column; justify-content: center; align-items: center; }
@media (max-width: 767px) {
  .mini-card-grid.is-four-columns, .mini-card-grid.is-three-columns { grid-template-columns: 1fr; }
  .mini-card-grid { padding: 0; }
}

/* ---------- Use cases (/case/): a category page listing its examples, and one example per page ----------
   Reuses the case-study frame and width (60-case-studies: title over the line texture, .case-study-body),
   the guides' hero and post cards (50-articles) and "Book a Meeting / Receive More Information" (.meeting-buttons,
   20-organizations). Easy to read: the numbered parts in one white box, one column (Outcomes: tiles), larger text;
   results as large numbers, the document's tables as rows, tiles or a split bar. */

/* Top: the title (a title beside a photo stays possible: .use-case-hero without .is-text-only) */
.use-case-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 50px; }
.use-case-hero.is-text-only { grid-template-columns: minmax(0, 1fr); }
.use-case-hero-text { display: flex; flex-direction: column; gap: 20px; }
.use-case-hero-text > * { margin: 0; }
.use-case-hero.is-text-only .use-case-hero-text { max-width: 80%; } /* designer, 2026-10-19 */
/* The breadcrumb in the text colour; it names the category, so there is no eyebrow line (designer, 2026-10-19) */
.use-case-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fineprint-size); color: var(--neutral-medium); }
.use-case-breadcrumb a { color: var(--neutral-medium); }
.use-case-breadcrumb a:hover { color: var(--main-accent-default); }
.use-case-lead { font-size: var(--intro-size); line-height: 1.4; font-weight: 300; color: var(--neutral-dark); }
.use-case-partner { font-size: var(--fineprint-size); font-weight: 600; letter-spacing: .3px; color: var(--neutral-medium); }

/* One white box holds the numbered parts */
.post-card.use-case-sheet { gap: 70px; padding: 60px; }

/* Numbered parts: the number beside the title, a line under them, then text, then a list or a box below */
.use-case-step { display: flex; flex-direction: column; gap: 24px; }
.use-case-step > * { margin: 0; }
.use-case-step-head { display: flex; align-items: baseline; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line-grey); }
.use-case-step-head > * { margin: 0; }
.use-case-step-number { font-family: var(--title-font); font-size: 44px; line-height: 1; letter-spacing: -1px; color: var(--main-accent-default); opacity: .5; }
.use-case-columns { display: flex; flex-direction: column; gap: 24px; }
.use-case-column { display: flex; flex-direction: column; gap: 20px; }
.use-case-text > p { margin: 0 0 16px; font-size: 18px; line-height: 1.65; }
.use-case-text > p:last-child { margin-bottom: 0; }
/* The example's photo, wide, under the Challenge's first paragraph (designer, 2026-10-19) */
.use-case-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; object-position: center 22%; border-radius: 15px; }
.use-case-photo.is-upper-middle img { object-position: center 37%; } /* for photos whose subject sits higher or lower */
.use-case-photo.is-middle img { object-position: center 48%; } /* for photos whose subject sits mid-height */

/* Lists: a violet check, the lead words in bold */
.use-case-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.use-case-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.6; }
.use-case-list .icon { flex: none; width: 15px; height: 15px; margin-top: 6px; fill: var(--main-accent-default); }
.use-case-list strong { font-weight: 700; color: var(--neutral-dark); }
.use-case-note { margin: 0; font-size: var(--body-size); line-height: 1.6; color: var(--muted-text); }

/* The business question and the bottom line: a tinted box */
.use-case-callout { display: flex; flex-direction: column; gap: 8px; padding: 26px 30px; border-left: 4px solid var(--main-accent-default); border-radius: 0 10px 10px 0; background: var(--lavender-background); }
.use-case-callout > * { margin: 0; }
.use-case-callout .eyebrow-label { color: var(--main-accent-default); }
.use-case-callout-text { font-family: var(--title-font); font-size: 25px; line-height: 1.3; letter-spacing: -.5px; color: var(--neutral-dark); }

/* Outcomes: tiles with a large title and a check beside it, three to a row (a last row of two shares the width) */
.use-case-highlights { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.use-case-highlight { grid-column: span 2; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 15px; background: var(--pink-white); }
.use-case-highlight:nth-child(3n+1):nth-last-child(2), .use-case-highlight:nth-child(3n+2):nth-last-child(1) { grid-column: span 3; }
.use-case-highlight > * { margin: 0; }
.use-case-highlight-title { display: flex; align-items: flex-start; gap: 12px; font-family: var(--title-font); font-size: 30px; line-height: 1.1; letter-spacing: -1px; font-weight: 400; color: var(--main-accent-default); }
.use-case-highlight-title .icon { width: .75em; height: .75em; margin-top: .175em; fill: var(--main-accent-default); } /* a check beside the title, level with its first line */
.use-case-highlight p { font-size: 17px; line-height: 1.6; }

/* Results: a large number over a short label, side by side (a single one keeps a tile's width) */
.use-case-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.use-case-stats:has(> :only-child) { grid-template-columns: minmax(0, 380px); }
.use-case-stat { display: flex; flex-direction: column; gap: 8px; padding: 26px 28px; border-radius: 15px; background: var(--pink-white); }
.use-case-stat > * { margin: 0; }
.use-case-stat-number { font-family: var(--title-font); font-size: 46px; line-height: 1; letter-spacing: -1.5px; color: var(--main-accent-default); }
.use-case-stat-label { font-size: 16px; line-height: 1.45; color: var(--neutral-dark); }

/* A two-column table from the document: the label beside its value, a line under each row */
.use-case-rows { margin: 0; border-top: 1px solid var(--line-grey); }
.use-case-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 6px 30px; padding: 16px 0; border-bottom: 1px solid var(--line-grey); font-size: 17px; line-height: 1.6; }
.use-case-row dt { font-weight: 700; color: var(--neutral-dark); }
.use-case-row dd { margin: 0; }

/* A split of one amount (BayWell: 52% / 48% of collected reimbursement): a bar in proportion, each share under its part */
.use-case-split { display: grid; grid-template-columns: 52fr 48fr; gap: 0 4px; }
.use-case-split-part { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.use-case-split-part > * { margin: 0; }
.use-case-split-bar { height: 16px; margin-bottom: 10px; border-radius: 8px 0 0 8px; background: var(--main-accent-default); }
.use-case-split-part + .use-case-split-part .use-case-split-bar { border-radius: 0 8px 8px 0; background: var(--main-accent-light); }
.use-case-split-part + .use-case-split-part { padding-left: 16px; }
.use-case-split-title { font-weight: 700; color: var(--neutral-dark); }
.use-case-split-part .use-case-stat-label { color: var(--neutral-medium); }

/* A journey in steps (MHS member journey): each step in a pill, an arrow between them */
.use-case-journey { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin: 0; padding: 0; list-style: none; }
.use-case-journey li { display: flex; align-items: center; gap: 8px; }
.use-case-journey li + li::before { content: "\2192"; color: var(--main-accent-default); }
.use-case-journey span { padding: 6px 14px; border-radius: 30px; background: var(--lavender-background); color: var(--main-accent-default); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }

/* Closing: the call to action, then back to the category */
.use-case-closing { align-items: center; gap: 24px; text-align: center; }
.use-case-closing > h2 { margin: 0; }
.use-case-back { font-size: var(--fineprint-size); font-weight: 600; color: var(--main-accent-default); }
.use-case-back:hover { color: var(--plum); }
.post-card.use-case-closing.is-plain { background: none; box-shadow: none; } /* category pages: no box behind it (designer, 2026-10-19) */
.use-case-closing-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; }

/* Category page (the guides' hero, 50-articles): its examples listed by organization name, a line between them */
.use-case-index li:first-child a { padding-top: 0; }
.use-case-index li:last-child a { padding-bottom: 0; }
.post-page-top.use-case-category { background-size: cover; } /* a short page: the line texture covers it, full width (designer, 2026-10-19) */
.post-page-top.use-case-category::before { background: linear-gradient(180deg, rgba(252, 250, 248, .72) 75%, var(--neutral-light)); }
.use-case-index { margin: 0; padding: 0; list-style: none; }
.use-case-index li + li { border-top: 1px solid var(--line-grey); }
.use-case-index a { display: flex; align-items: center; gap: 24px; padding: 18px 0; color: var(--neutral-dark); font-size: 20px; font-weight: 600; line-height: 1.35; }
.use-case-index a:hover { color: var(--main-accent-default); }
.use-case-index-logo { flex: none; width: 150px; height: 64px; object-fit: contain; object-position: left center; } /* the organization's logo, where the site has it */
.use-case-index-name { flex: 1 1 auto; min-width: 0; }
.use-case-index-arrow { flex: none; color: var(--main-accent-default); }

@media (max-width: 1024px) {
  .use-case-hero { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .post-card.use-case-sheet { gap: 60px; padding: 30px; }
  .use-case-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .use-case-highlight, .use-case-highlight:nth-child(3n+1):nth-last-child(2), .use-case-highlight:nth-child(3n+2):nth-last-child(1) { grid-column: span 1; }
  .use-case-highlight:nth-child(odd):last-child { grid-column: span 2; }
}
@media (max-width: 767px) {
  .use-case-hero.is-text-only .use-case-hero-text { max-width: none; }
  .post-card.use-case-sheet { gap: 50px; padding: 20px; }
  .use-case-step-head { padding-bottom: 14px; }
  .use-case-photo img { aspect-ratio: 11 / 5; }
  .use-case-step-number { font-size: 36px; }
  .use-case-text > p { font-size: 17px; }
  .use-case-list li, .use-case-highlight p { font-size: 16px; }
  .use-case-callout { padding: 20px; }
  .use-case-callout-text { font-size: 21px; }
  .use-case-highlights { grid-template-columns: minmax(0, 1fr); }
  .use-case-highlight, .use-case-highlight:nth-child(odd):last-child { grid-column: auto; padding: 22px 20px; }
  .use-case-highlight-title { font-size: 26px; }
  .use-case-index a { gap: 16px; padding: 16px 0; font-size: 18px; }
  .use-case-index-logo { width: 90px; height: 44px; }
  .use-case-stat { padding: 22px 20px; }
  .use-case-stat-number { font-size: 40px; }
  .use-case-row { grid-template-columns: minmax(0, 1fr); font-size: 16px; }
  .use-case-split-part + .use-case-split-part { padding-left: 10px; }
  .use-case-split .use-case-stat-number { font-size: 36px; }
  .use-case-split .use-case-stat-label, .use-case-split-title { font-size: 15px; line-height: 1.45; }
}

/* Accessibility options button (Sean, 2026-10-19): a placeholder in the lower-right corner of every
   page, in the main accent colour, with a shadow in case the page behind is the same colour. No action
   yet: it will open Deck's shared accessibility widget (TODO.md, Accessibility popup). */
.o360-a11y {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--main-accent-default);
  color: var(--neutral-white, #ffffff);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.o360-a11y svg { display: block; width: 28px; height: 28px; }
.o360-a11y:focus-visible { outline: 3px solid var(--neutral-dark, #1a1a1a); outline-offset: 3px; }
@media (max-width: 767px) { .o360-a11y { right: 16px; bottom: 16px; } }
@media print { .o360-a11y { display: none; } }