/* Readability pass: keep the original copy, components, photography and order.
   Target LP text explicitly so the miniature client-area UI keeps its scale. */
html[data-readability='enhanced'] {
  --reading-body: 16px;
  --reading-header-height: 64px;
  --reading-muted: #4d6054;
  scroll-padding-top: calc(var(--reading-header-height) + 28px);
}
html[data-readability='enhanced'] .reference-kicker {
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: .02em;
  text-wrap: pretty;
}
html[data-readability='enhanced'] :is(.reference-section-head, .reference-portal-title) h2 {
  text-wrap: balance;
  white-space: normal;
}
html[data-readability='enhanced'] .reference-hero-copy > p:not(.reference-kicker) {
  max-width: 36rem;
  font-size: 17px;
  line-height: 1.7;
  text-wrap: pretty;
}
html[data-readability='enhanced'] :is(.reference-hero-copy, .reference-final) small {
  max-width: 40rem;
  font-size: 13px;
  line-height: 1.65;
  color: #f2f7f4;
}
html[data-readability='enhanced'] .reference-hero-points li {
  min-height: 58px;
  font-size: 14px;
  line-height: 1.5;
}
html[data-readability='enhanced'] .reference-button:not(.header-cta) {
  min-height: 50px;
  padding: 14px 24px;
  font-size: 16px;
  line-height: 1.4;
}
html[data-readability='enhanced'] .mobile-menu nav > a {font-size: 16px;}
html[data-readability='enhanced'] .reference-ticker span {
  font-size: 13px;
  letter-spacing: .01em;
}
html[data-readability='enhanced'] .reference-showcase-panel {background: rgba(255, 255, 255, .97);}
html[data-readability='enhanced'] .reference-showcase-panel .status-chip {font-size: 13px;}
html[data-readability='enhanced'] .reference-showcase-panel h3 {
  font-size: clamp(24px, 2.2vw, 28px);
  line-height: 1.3;
}
html[data-readability='enhanced'] .reference-showcase-panel p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--reading-muted);
}
html[data-readability='enhanced'] .reference-steps-grid h3 {
  font-size: 22px;
  line-height: 1.3;
}
html[data-readability='enhanced'] .reference-steps-grid p {
  max-width: 31ch;
  margin: 10px 12px 0;
  font-size: var(--reading-body);
  line-height: 1.7;
  color: var(--reading-muted);
  text-wrap: pretty;
}
html[data-readability='enhanced'] .reference-steps-grid li {align-content: start;}
html[data-readability='enhanced'] .reference-portal-simple .reference-included h3 {
  font-size: 24px;
  line-height: 1.3;
}
html[data-readability='enhanced'] .reference-portal-simple .reference-included li {
  gap: 10px;
  padding: 18px 14px;
}
html[data-readability='enhanced'] .reference-portal-simple .reference-included li > span {
  min-width: 0;
  flex: 1;
  gap: 7px;
}
html[data-readability='enhanced'] .reference-portal-simple .reference-included li strong {
  font-size: 17px;
  line-height: 1.4;
}
html[data-readability='enhanced'] .reference-portal-simple .reference-included li small {
  font-size: 15px;
  line-height: 1.6;
  color: var(--reading-muted);
}
html[data-readability='enhanced'] .reference-boundary-lead {
  font-size: var(--reading-body);
  line-height: 1.7;
}
html[data-readability='enhanced'] .reference-boundary-patient strong {font-size: 18px; line-height: 1.4;}
html[data-readability='enhanced'] .reference-boundary-patient p,
html[data-readability='enhanced'] .boundary-role-card p {font-size: 16px; line-height: 1.7;}
html[data-readability='enhanced'] .reference-boundary-patient div > span,
html[data-readability='enhanced'] :is(.boundary-role-number, .boundary-role-label, .boundary-separator span) {
  font-size: 12px;
  line-height: 1.5;
}
html[data-readability='enhanced'] .boundary-role-top {grid-template-columns: auto minmax(0, 1fr) auto;}
html[data-readability='enhanced'] .boundary-role-label {width: fit-content; max-width: 100%;}
html[data-readability='enhanced'] .boundary-role-card h3 {line-height: 1.2;}
html[data-readability='enhanced'] .reference-faq-list summary {line-height: 1.4;}
html[data-readability='enhanced'] .reference-faq-list :is(.faq-answer, details > p) {
  max-width: 68ch;
  font-size: var(--reading-body);
  line-height: 1.8;
  color: var(--reading-muted);
}
html[data-readability='enhanced'] .reference-faq-list .faq-answer p + p {margin-top: 1em;}
html[data-readability='enhanced'] .faq-source-link {font-size: 14px;}
html[data-readability='enhanced'] .reference-whatsapp h2 + p {
  font-size: var(--reading-body);
  line-height: 1.7;
  color: var(--reading-muted);
}
html[data-readability='enhanced'] .reference-whatsapp small {
  font-size: 13px;
  line-height: 1.7;
  color: var(--reading-muted);
}
html[data-readability='enhanced'] .reference-footer p {
  font-size: 13px;
  line-height: 1.7;
  color: #e8ede1;
}
html[data-readability='enhanced'] .reference-footer .footer-legal {max-width: 88ch;}
html[data-readability='enhanced'] .reference-footer .copyright {font-size: 12px; color: #d4e1d8;}
html[data-readability='enhanced'] .reference-footer nav :is(a, button) {
  min-height: 44px;
  font-size: 13px;
  line-height: 1.5;
}
@media (min-width: 768px) {
  html[data-readability='enhanced'] {--reading-body: 18px; --reading-header-height: 80px;}
  html[data-readability='enhanced'] .reference-hero-copy > p:not(.reference-kicker) {font-size: 19px;}
}
@media (min-width: 768px) and (max-width: 1100px) {
  html[data-readability='enhanced'] .reference-portal {height: auto; padding-bottom: 64px;}
  html[data-readability='enhanced'] .reference-portal-grid.reference-portal-simple {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 32px;
  }
  html[data-readability='enhanced'] .reference-footer .footer-top {grid-template-columns: 1fr; gap: 32px;}
  html[data-readability='enhanced'] .reference-footer nav {justify-content: start; gap: 12px 24px;}
}
@media (max-width: 1100px) {
  html[data-readability='enhanced'] .reference-portal-simple .reference-included ul {grid-template-columns: 1fr;}
}
@media (max-width: 767px) {
  html[data-readability='enhanced'] .reference-hero {padding-bottom: 40px;}
  html[data-readability='enhanced'] .reference-steps-grid {gap: 40px;}
  html[data-readability='enhanced'] .reference-portal-simple .reference-included {padding: 22px 18px;}
  html[data-readability='enhanced'] .reference-faq-list .faq-answer,
  html[data-readability='enhanced'] .reference-faq-list details > p {margin-right: 4px;}
  html[data-readability='enhanced'] .reference-footer nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
  }
  html[data-readability='enhanced'] .reference-footer nav :is(a, button) {width: auto; min-width: 0;}
}
@media (max-width: 359px) {
  html[data-readability='enhanced'] .reference-hero h1 {font-size: 36px; line-height: 1.12;}
}

/* Mobile first view: one clear reading path, from the headline to its CTA.
   The original header and every content element remain in place. */
@media (max-width: 767px) {
  html[data-readability='enhanced']:not([data-preview]) .reference-hero {
    min-height: 0;
    padding: 28px 20px 32px;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-hero::before {
    background: linear-gradient(180deg, rgba(var(--forest-rgb), .9), rgba(var(--forest-rgb), .85) 45%, rgba(var(--forest-rgb), .96));
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-hero-copy {padding-top: 0;}
  html[data-readability='enhanced']:not([data-preview]) .reference-hero .reference-kicker {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .01em;
    text-wrap: balance;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-hero h1 {
    max-width: none;
    margin-top: 16px;
    font-size: clamp(32px, 9vw, 40px);
    line-height: 1.15;
    letter-spacing: -.045em;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-hero-copy > p:not(.reference-kicker) {
    margin-top: 20px;
    line-height: 1.65;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-hero .reference-hero-cta {
    display: flex;
    width: 100%;
    min-height: 56px;
    justify-content: center;
    margin-top: 24px;
    padding: 16px 24px;
    text-align: center;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-hero-copy small {
    margin-top: 12px;
    line-height: 1.6;
    text-align: center;
    text-wrap: balance;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-hero-points {margin-top: 28px;}
}

/* Mobile reading rhythm beyond the hero. Keep each existing component and
   let its text determine the height; the device illustration has its own scale. */
@media (max-width: 767px) {
  html[data-readability='enhanced']:not([data-preview]) {--reading-body: 17px;}
  html[data-readability='enhanced']:not([data-preview]) :is(.reference-showcase, .reference-steps, .reference-portal, .reference-boundary, .reference-faq) {
    padding: 60px 20px;
  }
  html[data-readability='enhanced']:not([data-preview]) :is(.reference-section-head h2, .reference-portal-title h2, .reference-boundary-intro h2, .reference-final h2, .reference-whatsapp h2) {
    margin-top: 12px;
    font-size: clamp(30px, 8.2vw, 34px);
    line-height: 1.2;
    letter-spacing: -.035em;
    text-wrap: balance;
  }
  html[data-readability='enhanced']:not([data-preview]) #support-title br {display: none;}
  html[data-readability='enhanced']:not([data-preview]) :is(.reference-showcase-panel h3, .reference-steps-grid h3, .reference-portal-simple .reference-included h3, .boundary-role-card h3) {
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -.02em;
    text-wrap: balance;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-showcase .reference-showcase-panel h3 {
    font-size: clamp(22px, 5.8vw, 24px);
  }
  html[data-readability='enhanced']:not([data-preview]) :is(.reference-showcase-panel p, .reference-boundary-patient p, .boundary-role-card p) {
    font-size: var(--reading-body);
    line-height: 1.7;
    text-wrap: pretty;
  }

  /* Keep the photograph behind the card while allowing longer, larger copy. */
  html[data-readability='enhanced']:not([data-preview]) .reference-showcase-media {
    display: grid;
    height: auto;
    min-height: 540px;
    margin-top: 32px;
    padding: 220px 12px 12px;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-showcase-media > img {
    position: absolute;
    inset: 0;
    height: 100%;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-showcase-panel {
    position: relative;
    inset: auto;
    align-self: end;
    padding: 20px;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-steps-grid {
    gap: 36px;
    margin-top: 36px;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-steps-grid li > b {font-size: 13px; line-height: 1.2;}
  html[data-readability='enhanced']:not([data-preview]) .reference-steps-grid p {
    max-width: 32ch;
    margin: 10px 0 0;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-steps-cta {margin-top: 32px;}
  html[data-readability='enhanced']:not([data-preview]) .reference-portal-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    margin-top: 32px;
  }
  html[data-readability='enhanced']:not([data-preview]) .iphone-preview {width: min(350px, calc(100vw - 20px));}
  html[data-readability='enhanced']:not([data-preview]) .reference-portal-simple .reference-included {padding: 24px 16px;}
  html[data-readability='enhanced']:not([data-preview]) .reference-portal-simple .reference-included li strong {font-size: 18px;}
  html[data-readability='enhanced']:not([data-preview]) .reference-portal-simple .reference-included li small {
    font-size: 16px;
    line-height: 1.65;
    text-wrap: pretty;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-boundary-layout {gap: 32px;}
  html[data-readability='enhanced']:not([data-preview]) .reference-boundary-lead {margin-top: 20px; text-wrap: pretty;}
  html[data-readability='enhanced']:not([data-preview]) .reference-boundary-patient {
    gap: 14px;
    margin-top: 24px;
    padding: 20px;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-boundary-patient > div {gap: 6px;}
  html[data-readability='enhanced']:not([data-preview]) .reference-boundary-patient strong {font-size: 19px; text-wrap: pretty;}
  html[data-readability='enhanced']:not([data-preview]) .boundary-role-card {padding: 24px 20px;}
  html[data-readability='enhanced']:not([data-preview]) .boundary-role-top {gap: 8px;}
  html[data-readability='enhanced']:not([data-preview]) :is(.boundary-role-number, .boundary-role-label, .reference-boundary-patient div > span) {font-size: 13px;}
  html[data-readability='enhanced']:not([data-preview]) .boundary-role-label {padding-inline: 10px;}

  html[data-readability='enhanced']:not([data-preview]) .reference-faq .reference-section-head h2 {font-size: 34px;}
  html[data-readability='enhanced']:not([data-preview]) .reference-faq-list {margin-top: 32px;}
  html[data-readability='enhanced']:not([data-preview]) .reference-faq-list summary {
    gap: 12px;
    padding: 22px 0;
    font-size: 21px;
    line-height: 1.4;
    text-wrap: balance;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-faq-list :is(.faq-answer, details > p) {
    margin: 0 0 24px;
    line-height: 1.75;
    text-wrap: pretty;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-faq-list .faq-answer ul {
    padding-left: 1.25em;
    list-style: disc;
  }
  html[data-readability='enhanced']:not([data-preview]) .faq-source-link {
    min-height: 44px;
    padding-block: 10px;
    font-size: 15px;
  }
  html[data-readability='enhanced']:not([data-preview]) :is(.reference-steps-cta, .reference-final .reference-button, .reference-whatsapp-button) {
    width: 100%;
    min-height: 56px;
    padding: 16px 20px;
    white-space: normal;
    text-align: center;
  }
  html[data-readability='enhanced']:not([data-preview]) :is(.reference-hero-cta, .reference-steps-cta, .reference-final .reference-button) {
    text-wrap: balance;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-final {padding-block: 40px;}
  html[data-readability='enhanced']:not([data-preview]) :is(.reference-final small, .reference-whatsapp small) {
    font-size: 14px;
    line-height: 1.7;
    text-wrap: pretty;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-whatsapp h2 + p {margin-top: 20px; text-wrap: pretty;}
  html[data-readability='enhanced']:not([data-preview]) .reference-whatsapp small {margin-top: 16px;}
  html[data-readability='enhanced']:not([data-preview]) .reference-footer {padding: 40px 20px;}
  html[data-readability='enhanced']:not([data-preview]) .reference-footer p {
    font-size: 14px;
    line-height: 1.75;
    text-wrap: pretty;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-footer nav {
    margin-top: 28px;
    gap: 8px 16px;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-footer nav :is(a, button) {font-size: 14px;}
  html[data-readability='enhanced']:not([data-preview]) .reference-footer .footer-legal {margin-top: 28px;}
  html[data-readability='enhanced']:not([data-preview]) .reference-footer .copyright {margin-top: 24px; font-size: 13px;}
}

/* Desktop reading pass for the original LP. Preserve the mobile and Glass
   layouts, and let the portal grow enough to show the full device example. */
@media (min-width: 768px) {
  html[data-readability='enhanced']:not([data-preview]) :is(.reference-kicker, .reference-ticker span) {font-size: 14px;}
  html[data-readability='enhanced']:not([data-preview]) :is(.reference-showcase, .reference-steps, .reference-boundary, .reference-faq) {
    padding-block: 80px;
  }
  html[data-readability='enhanced']:not([data-preview]) :is(.reference-showcase-panel p, .reference-boundary-patient p, .boundary-role-card p) {
    font-size: var(--reading-body);
    text-wrap: pretty;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-steps-grid {margin-top: 48px;}
  html[data-readability='enhanced']:not([data-preview]) .reference-steps-grid h3 {font-size: 24px; text-wrap: balance;}
  html[data-readability='enhanced']:not([data-preview]) .reference-steps-grid li > b {font-size: 13px; line-height: 1.2;}
  html[data-readability='enhanced']:not([data-preview]) .reference-steps-cta {margin-top: 40px;}

  html[data-readability='enhanced']:not([data-preview]) .reference-portal {
    height: auto;
    padding-block: 48px 80px;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-portal-grid.reference-portal-simple {margin-top: 48px;}
  html[data-readability='enhanced']:not([data-preview]) .reference-portal-simple .iphone-preview {width: min(100%, 360px);}
  html[data-readability='enhanced']:not([data-preview]) .reference-portal-simple .reference-included li strong {font-size: 18px;}
  html[data-readability='enhanced']:not([data-preview]) .reference-portal-simple .reference-included li small {
    font-size: 16px;
    line-height: 1.65;
    text-wrap: pretty;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-boundary-patient strong {font-size: 20px; text-wrap: pretty;}
  html[data-readability='enhanced']:not([data-preview]) .reference-boundary-lead {text-wrap: balance;}
  html[data-readability='enhanced']:not([data-preview]) .reference-boundary-intro h2 {text-wrap: balance;}
  html[data-readability='enhanced']:not([data-preview]) .reference-boundary-intro h2 br {display: none;}
  html[data-readability='enhanced']:not([data-preview]) .reference-boundary-intro h2 em {display: block; text-wrap: balance;}
  html[data-readability='enhanced']:not([data-preview]) .reference-boundary-patient div > span,
  html[data-readability='enhanced']:not([data-preview]) :is(.boundary-role-number, .boundary-role-label, .boundary-separator span) {font-size: 13px;}

  html[data-readability='enhanced']:not([data-preview]) .reference-faq-list :is(.faq-answer, details > p) {text-wrap: pretty;}
  html[data-readability='enhanced']:not([data-preview]) .reference-faq-list .faq-answer ul {
    padding-left: 1.25em;
    list-style: disc;
  }
  html[data-readability='enhanced']:not([data-preview]) .faq-source-link {
    min-height: 44px;
    padding-block: 8px;
    font-size: 15px;
  }
  html[data-readability='enhanced']:not([data-preview]) :is(.reference-hero-copy small, .reference-final small, .reference-whatsapp small, .reference-footer p) {
    font-size: 14px;
    line-height: 1.7;
    text-wrap: pretty;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-final small {
    width: min(100%, 300px);
    text-wrap: balance;
  }
  html[data-readability='enhanced']:not([data-preview]) .reference-final h2 {text-wrap: balance;}
  html[data-readability='enhanced']:not([data-preview]) .reference-whatsapp h2 + p {text-wrap: balance;}
  html[data-readability='enhanced']:not([data-preview]) .reference-whatsapp small {margin-top: 16px; text-wrap: balance;}
  html[data-readability='enhanced']:not([data-preview]) .reference-footer nav :is(a, button) {font-size: 15px;}
  html[data-readability='enhanced']:not([data-preview]) .reference-footer .copyright {font-size: 13px;}
}