/* ==========================================================================
   /lasik-second-opinion/ - Google Ads landing page variant (B).
   Scoped under .lso so nothing here can reach the control page at
   /before-lasik/, which uses the bl- prefix.
   ========================================================================== */

.lso {
  --lso-navy: #071a33;
  --lso-blue: #173f68;
  --lso-teal: #2f7d78;
  --lso-teal-dark: #23635f;
  --lso-mint: #dcefed;
  --lso-coral: #d66f68;
  --lso-coral-dark: #b5514a;
  --lso-cream: #f7f3ec;
  --lso-ink: #172434;
  --lso-muted: #5d6977;
  --lso-line: #d9e0e5;
  background: #fff;
  color: var(--lso-ink);
  font-family: "Josefin Sans", sans-serif;
  overflow: hidden;
}

.lso *,
.lso *::before,
.lso *::after {
  box-sizing: border-box;
}

.lso h1,
.lso h2,
.lso h3,
.lso h4 {
  color: inherit;
  font-family: "Montserrat", sans-serif;
  text-transform: none;
}

.lso p {
  color: inherit;
}

.lso-container {
  margin: 0 auto;
  max-width: 1120px;
  padding: 0 24px;
  width: 100%;
}

.lso-narrow {
  max-width: 840px;
}

.lso-eyebrow {
  color: var(--lso-teal-dark) !important;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.lso-h2 {
  font-size: clamp(1.85rem, 3.8vw, 2.95rem);
  letter-spacing: -0.04em;
  line-height: 1.12;
  margin: 0 0 18px;
}

.lso-h3 {
  font-size: clamp(1.15rem, 2vw, 1.42rem);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 12px;
}

.lso-lead {
  color: var(--lso-muted) !important;
  font-size: 1.14rem;
  line-height: 1.7;
  margin: 0 0 8px;
  max-width: 720px;
}

.lso-source {
  color: var(--lso-muted) !important;
  font-size: 0.87rem;
  line-height: 1.6;
  margin: 22px 0 0;
}

.lso-source a,
.lso-body a {
  color: var(--lso-teal-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lso-source a:hover,
.lso-body a:hover {
  color: var(--lso-teal);
}

/* --------------------------------------------------------------- buttons */

.lso-button {
  align-items: center;
  border: 2px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-family: "Montserrat", sans-serif;
  font-size: 0.94rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1.2;
  min-height: 52px;
  padding: 14px 24px;
  text-align: center;
  text-decoration: none !important;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.lso-button:hover {
  transform: translateY(-2px);
}

.lso-button-primary {
  background: var(--lso-coral);
  color: #fff !important;
}

.lso-button-primary:hover {
  background: var(--lso-coral-dark);
  color: #fff !important;
}

.lso-button-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff !important;
}

.lso-button-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff !important;
}

.lso-button-teal {
  background: var(--lso-teal);
  color: #fff !important;
}

.lso-button-teal:hover {
  background: var(--lso-teal-dark);
  color: #fff !important;
}

/* ------------------------------------------------------------------ hero */

.lso-hero {
  background:
    radial-gradient(circle at 88% 12%, rgba(47, 125, 120, 0.38), transparent 34%),
    radial-gradient(circle at 8% 82%, rgba(214, 111, 104, 0.20), transparent 30%),
    var(--lso-navy);
  color: #fff;
  padding: 150px 0 96px;
  position: relative;
}

.lso-hero::after {
  background: linear-gradient(90deg, var(--lso-coral), #e7ae72, var(--lso-teal));
  bottom: 0;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
}

.lso-hero .lso-eyebrow {
  color: #9ed9d3 !important;
}

.lso-hero-title {
  color: #fff;
  font-size: clamp(2.1rem, 5.6vw, 4rem);
  letter-spacing: -0.055em;
  line-height: 1.03;
  margin: 0 0 26px;
  max-width: 20ch;
}

.lso-hero-title em {
  color: #9ed9d3;
  font-style: normal;
}

.lso-hero-sub {
  color: rgba(255, 255, 255, 0.84) !important;
  font-size: 1.22rem;
  line-height: 1.65;
  margin: 0 0 18px;
  max-width: 60ch;
}

.lso-hero-sub strong {
  color: #fff;
}

.lso-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.lso-trust {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  gap: 18px 34px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 46px;
  padding-top: 28px;
}

.lso-trust-item {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
  padding-left: 28px;
  position: relative;
}

.lso-trust-item::before {
  color: #9ed9d3;
  content: "\2713";
  font-weight: 700;
  left: 4px;
  position: absolute;
  top: 0;
}

.lso-trust-item strong {
  color: #fff;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------------- sections */

.lso-section {
  padding: 92px 0;
}

.lso-section--cream {
  background: var(--lso-cream);
}

.lso-section--mint {
  background: #eaf3f1;
}

.lso-section--navy {
  background:
    radial-gradient(circle at 90% 10%, rgba(47, 125, 120, 0.30), transparent 32%),
    var(--lso-navy);
  color: #fff;
}

.lso-section--navy .lso-eyebrow {
  color: #9ed9d3 !important;
}

.lso-section--navy .lso-lead {
  color: rgba(255, 255, 255, 0.76) !important;
}

.lso-section--navy .lso-source {
  color: rgba(255, 255, 255, 0.62) !important;
}

.lso-section--navy .lso-source a {
  color: #9ed9d3;
}

.lso-section-head {
  margin-bottom: 42px;
  max-width: 780px;
}

/* ------------------------------------------------- act 1: the dot figure */

.lso-figure {
  align-items: center;
  display: grid;
  gap: 52px;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
}

.lso-dotgrid {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(10, 1fr);
  margin: 0;
  max-width: 320px;
}

.lso-dot {
  aspect-ratio: 1;
  border-radius: 50%;
  display: block;
  width: 100%;
}

.lso-dot--on {
  background: var(--lso-teal);
}

.lso-dot--off {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(93, 105, 119, 0.34);
}

.reveal-on .lso-dotgrid .lso-dot {
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 380ms ease, transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
  /* transition-delay is set per dot from the page script. */
}

.reveal-on .lso-dotgrid.is-visible .lso-dot {
  opacity: 1;
  transform: scale(1);
}

.lso-figure-caption {
  color: var(--lso-muted) !important;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 18px 0 0;
  max-width: 320px;
}

.lso-bignum {
  color: var(--lso-teal-dark) !important;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(3.4rem, 8vw, 5.2rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.9;
  margin: 0 0 6px;
}

.lso-bignum-label {
  color: var(--lso-ink) !important;
  font-family: "Montserrat", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 20px;
}

.lso-pullquote {
  border-left: 5px solid var(--lso-coral);
  margin: 30px 0 0;
  padding: 4px 0 4px 22px;
}

.lso-pullquote p {
  font-size: 1.22rem;
  font-style: italic;
  line-height: 1.55;
  margin: 0 0 10px;
}

.lso-pullquote cite {
  color: var(--lso-muted) !important;
  display: block;
  font-size: 0.86rem;
  font-style: normal;
  line-height: 1.5;
}

/* Counter-fact panel. Deliberately given equal visual weight so the section
   reads as an honest account of the study rather than a selective quote. */
.lso-balance {
  background: #fff;
  border: 1px solid var(--lso-line);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(23, 36, 52, 0.06);
  margin-top: 38px;
  padding: 28px 30px;
}

.lso-balance h3 {
  font-size: 1.08rem;
  margin: 0 0 12px;
}

.lso-balance p {
  color: var(--lso-muted) !important;
  line-height: 1.65;
  margin: 0 0 12px;
}

.lso-balance p:last-child {
  margin-bottom: 0;
}

.lso-balance strong {
  color: var(--lso-ink);
}

/* --------------------------------------------------- cards, stats, lists */

.lso-grid-2 {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lso-grid-3 {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lso-card {
  background: #fff;
  border: 1px solid var(--lso-line);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(23, 36, 52, 0.06);
  padding: 28px 26px;
}

.lso-card p {
  color: var(--lso-muted) !important;
  line-height: 1.6;
  margin: 0;
}

.lso-card p + p {
  margin-top: 12px;
}

.lso-stat-value {
  color: var(--lso-coral-dark) !important;
  font-family: "Montserrat", sans-serif;
  font-size: 2.7rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 0 0 10px;
}

.lso-stat-caption {
  color: var(--lso-ink) !important;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 10px !important;
}

.lso-meter {
  background: rgba(93, 105, 119, 0.16);
  border-radius: 999px;
  height: 8px;
  margin-top: 16px;
  overflow: hidden;
}

.lso-meter span {
  background: var(--lso-coral);
  border-radius: 999px;
  display: block;
  height: 100%;
  width: var(--portion, 0%);
}

.reveal-on [data-reveal] .lso-meter span {
  transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 120ms;
  width: 0;
}

.reveal-on [data-reveal].is-visible .lso-meter span {
  width: var(--portion, 0%);
}

.lso-warnlist {
  display: grid;
  gap: 12px 30px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.lso-warnlist li {
  line-height: 1.55;
  padding-left: 30px;
  position: relative;
}

.lso-warnlist li::before {
  color: var(--lso-coral);
  content: "!";
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  left: 8px;
  position: absolute;
}

.lso-panel {
  background: #fff;
  border-left: 6px solid var(--lso-coral);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
  color: var(--lso-ink);
  padding: 30px 32px;
}

.lso-panel h3 {
  margin: 0 0 18px;
}

/* --------------------------------------------------------------- sliders */

.lso-slider-wrap {
  background: #0a1329;
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}

.lso-slider-wrap .before-after-slider {
  margin: 0;
  width: 100%;
}

.lso-slider-caption {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 14px !important;
}

.lso-slider-note {
  color: var(--lso-muted) !important;
  font-size: 0.84rem;
  line-height: 1.5;
  margin: 12px 0 0;
}

/* -------------------------------------------------------- FDA docket act */

.lso-comments {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 8px;
}

.lso-comment {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 20px;
}

.lso-comment blockquote {
  border: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  line-height: 1.62;
  margin: 0 0 16px;
  padding: 0;
  quotes: none;
}

.lso-comment blockquote p {
  margin: 0;
}

.lso-comment a {
  color: #9ed9d3;
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: auto;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lso-comment a:hover {
  color: #fff;
}

/* ----------------------------------------------------- the survey blocks */

.lso-ask {
  background: var(--lso-cream);
  padding: 64px 0;
}

.lso-ask[hidden] {
  display: none !important;
}

.lso-ask--mint {
  background: #eaf3f1;
}

.lso .bl-intent-card {
  background: #fff;
  border: 1px solid #cddfdc;
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(23, 36, 52, 0.10);
  padding: 34px 38px;
}

.lso .bl-intent-card h2 {
  color: var(--lso-navy);
  font-size: clamp(1.5rem, 3.4vw, 2.15rem);
  letter-spacing: -0.035em;
  line-height: 1.16;
  margin: 0 0 10px;
}

.lso .bl-intent-card > div > p:not(.lso-eyebrow):not(.va-intent-privacy) {
  color: var(--lso-muted) !important;
  line-height: 1.6;
  margin: 0;
}

.lso .va-intent-options {
  gap: 12px;
  margin-top: 24px;
}

.lso .va-intent-choice {
  border-radius: 12px;
  font-size: 0.88rem;
  min-height: 62px;
  padding: 12px 16px;
}

.lso .va-intent-privacy {
  margin-top: 16px;
}

.lso .va-intent-complete h3 {
  color: var(--lso-teal-dark);
  font-size: 1.3rem;
}

.lso .va-intent-complete p {
  color: var(--lso-muted) !important;
}

/* ----------------------------------------------------------------- close */

.lso-close {
  background: var(--lso-teal);
  color: #fff;
  padding: 78px 0;
  text-align: center;
}

.lso-close h2 {
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -0.04em;
  margin: 0 auto 16px;
  max-width: 20ch;
}

.lso-close p {
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 1.08rem;
  line-height: 1.65;
  margin: 0 auto 26px;
  max-width: 66ch;
}

.lso-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}

.lso-links a {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  color: #fff !important;
  font-family: "Montserrat", sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 11px 18px;
  text-decoration: none !important;
}

.lso-links a:hover {
  background: #fff;
  color: var(--lso-teal-dark) !important;
}

.lso-disclaimer {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.8rem !important;
  margin: 30px auto 0 !important;
  max-width: 70ch;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 991px) {
  .lso-figure {
    gap: 34px;
    grid-template-columns: 1fr;
  }

  .lso-dotgrid,
  .lso-figure-caption {
    max-width: 300px;
  }

  .lso-trust {
    grid-template-columns: 1fr;
  }

  .lso-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .lso-hero {
    padding: 128px 0 72px;
  }

  .lso-section {
    padding: 64px 0;
  }

  .lso-ask {
    padding: 48px 0;
  }

  .lso-grid-2,
  .lso-comments,
  .lso-warnlist {
    grid-template-columns: 1fr;
  }

  .lso .bl-intent-card {
    padding: 26px 22px;
  }

  .lso-panel {
    padding: 24px 22px;
  }
}

@media (max-width: 575px) {
  .lso-container {
    padding: 0 18px;
  }

  .lso-hero-actions,
  .lso-hero-actions .lso-button {
    width: 100%;
  }

  .lso-dotgrid {
    gap: 6px;
  }

  .lso-slider-wrap {
    padding: 12px;
  }

  .lso .va-intent-options {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lso-button,
  .lso-button:hover {
    transform: none;
    transition: none;
  }

  .reveal-on .lso-dotgrid .lso-dot,
  .reveal-on [data-reveal] .lso-meter span {
    opacity: 1;
    transform: none;
    transition: none;
    width: var(--portion, 0%);
  }
}

/* ==========================================================================
   Context corrections
   ========================================================================== */

/* The dot grid is not itself a [data-reveal] element - its wrapper is - so the
   is-visible class lands on the parent. Key the dot animation off that. */
.reveal-on [data-reveal].is-visible .lso-dotgrid .lso-dot {
  opacity: 1;
  transform: scale(1);
}

/* .lso-panel is a white card that sits inside a navy section, so the navy
   section's white text rules have to be undone for everything inside it. */
.lso-section--navy .lso-panel .lso-source {
  color: var(--lso-muted) !important;
}

.lso-section--navy .lso-panel .lso-source a,
.lso-section--navy .lso-panel .lso-body a,
.lso-section--navy .lso-panel .lso-warnlist a,
.lso-section--navy .lso-panel .lso-pullquote cite a {
  color: var(--lso-teal-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lso-section--navy .lso-panel .lso-source a:hover,
.lso-section--navy .lso-panel .lso-body a:hover,
.lso-section--navy .lso-panel .lso-warnlist a:hover,
.lso-section--navy .lso-panel .lso-pullquote cite a:hover {
  color: var(--lso-teal);
}

.lso-panel .lso-body {
  color: var(--lso-muted);
}

.lso-pullquote cite a {
  color: var(--lso-teal-dark);
  font-weight: 700;
}

/* .lso-card p zeroes margins, which would otherwise collapse the source note
   against the paragraph above it. */
.lso-card .lso-source {
  margin-top: 18px;
}

.lso-card .lso-source a {
  color: var(--lso-teal-dark);
}

/* ---------------------------------- act 1: satisfaction breakdown figure */

/* One dot per surgeon who had the procedure (67), coloured by how they rated
   their own result. Exactly proportional, unlike a stacked bar where the two
   single-surgeon categories would collapse to hairlines. */
.lso-satfigure {
  align-items: center;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  margin: 22px 0 24px;
}

.lso-satgrid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(10, 1fr);
  max-width: 250px;
}

.lso-satdot {
  aspect-ratio: 1;
  border-radius: 50%;
  display: block;
  width: 100%;
}

.lso-satdot--full,
.lso-satkey--full {
  background: var(--lso-teal);
}

.lso-satdot--mostly,
.lso-satkey--mostly {
  background: #e0a33e;
}

.lso-satdot--neutral,
.lso-satkey--neutral {
  background: #98a2ad;
}

.lso-satdot--bad,
.lso-satkey--bad {
  background: #cf4436;
}

.lso-satlegend {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lso-satlegend li {
  align-items: baseline;
  color: var(--lso-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.94rem;
  gap: 8px;
  line-height: 1.5;
  padding: 7px 0;
}

.lso-satlegend li + li {
  border-top: 1px solid var(--lso-line);
}

.lso-satkey {
  border-radius: 50%;
  flex: 0 0 auto;
  height: 11px;
  position: relative;
  top: 1px;
  width: 11px;
}

.lso-satlegend strong {
  color: var(--lso-ink);
  font-family: "Montserrat", sans-serif;
  min-width: 22px;
}

.lso-satlegend span:not(.lso-satkey) {
  color: var(--lso-muted);
  font-size: 0.84rem;
  margin-left: auto;
}

@media (max-width: 767px) {
  .lso-satfigure {
    gap: 20px;
    grid-template-columns: 1fr;
  }

  .lso-satgrid {
    max-width: 220px;
  }
}

/* Body links inside the balance panel would otherwise fall back to the theme's
   default link colour, which is low contrast on the panel's white ground. */
.lso-balance a {
  color: var(--lso-teal-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lso-balance a:hover {
  color: var(--lso-teal);
}

/* Remaining body-copy link contexts. Without these they fall back to the
   theme's default link colour, which reads as a different design language. */
.lso-slider-note a,
.lso-card p a,
.lso-lead a {
  color: var(--lso-teal-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lso-slider-note a:hover,
.lso-card p a:hover,
.lso-lead a:hover {
  color: var(--lso-teal);
}

/* Inside navy sections the same links sit on a dark ground. */
.lso-section--navy .lso-lead a {
  color: #9ed9d3;
}

.lso-section--navy .lso-lead a:hover {
  color: #fff;
}

/* ------------------------------------------------ slider fullscreen button */

/* The theme parks .fullscreen-btn at top-right (z-index 10), the same corner
   as the AFTER label (z-index 4), so the button hides the label. The
   before/after labels carry the whole comparison on this page, so move the
   button to the opposite corner. Scoped to .lso, leaving the placement on
   /10-reasons-to-avoid-lasik/ and /risks/ untouched; the modal's cloned copy
   is outside .lso and stays hidden by the theme's own rule. */
.lso .before-after-slider .fullscreen-btn {
  bottom: 10px;
  top: auto;
}

@media (max-width: 575px) {
  .lso .before-after-slider .fullscreen-btn {
    font-size: 12px;
    padding: 8px 11px;
  }
}

/* ------------------------------------------------------ heading typography */

/* Two-sentence display headings break at the sentence boundary at every
   width, rather than orphaning the first word or two of the second sentence
   onto the previous line. Each sentence still wraps naturally inside its own
   block, so this stays responsive instead of hardcoding a <br>. */
.lso-sentence {
  display: block;
}

/* Keep the pair reading as one heading rather than two stacked lines. */
.lso-hero-title .lso-sentence + .lso-sentence,
.lso-h2 .lso-sentence + .lso-sentence {
  margin-top: 0.06em;
}

/* The 780px cap on .lso-section-head was doing double duty: constraining the
   lead paragraph's measure (which already caps itself at 720px) and squeezing
   the display headings into runt last lines. Give headings the wider measure
   they can carry; the lead keeps its own. */
.lso-section-head {
  max-width: 980px;
}

/* The accent phrase is the payoff of the headline, so keep it whole on its own
   line instead of stranding a single coloured word at the end of the previous
   one. Gated by width: below this the clause before it ("It just doesn't
   measure") no longer fits on one line either, so blocking the accent would
   move the widow onto "measure" and add a line rather than fix anything. */
@media (min-width: 480px) {
  .lso-hero-title em {
    display: block;
  }
}

/* At phone widths the opening sentence broke before its last word, so the
   first thing you read was an orphaned "real." on line two. The sentence
   measures about 12.3x its own font-size in Montserrat 600 at this tracking,
   and its line box is the viewport minus the 18px of container padding either
   side, so this takes the largest size that still keeps it on one line (about
   30px on a 412px phone, 25px on a 360px one) and never exceeds the 2.1rem the
   clamp already sets. Balancing is the safety net for the second sentence,
   which is too long to fit on one line at any readable size here. */
@media (max-width: 575px) {
  .lso-hero-title {
    font-size: min(2.1rem, calc((100vw - 44px) / 12.4));
    text-wrap: balance;
  }
}