/* ============================================================
   lipsmatch.com: styles for the hub pages (audiences, languages,
   guides, plans, partners). Load it AFTER /brand/site.css.

   Only what the existing stylesheets do not already have:
     1. .lsm-table      a real <table> for comparisons
     2. .lsm-crumbs     the visible breadcrumb trail
     3. .lsm-actions    a button row under the H1
     4. .lsm-answer     the "short answer" box under the H1
     5. .lsm-watch      tap-to-play films with sound (pages.js)
     6. .lsm-table--facts, .lsm-sources, .lsm-eyebrow, .lsm-list

   Colours come from the theme tokens in /css/main.css, so dark
   (default) and light ([color-scheme=light]) both work. Only
   sections 14 and 15 add light-theme rules. Token values, for
   reference:
                       dark       light
     --base-tint       #1C1C1C    #FFFFFF   card surface
     --st-muted        #252525    #E0DDDB   hairlines
     --st-bright       #FFFFFF    #161616   strong rule
     --t-bright        #FFFFFF    #161616   strong text
     --t-muted         #838383    #585858   body text
     --accent          #DDF160    #9F8BE7   lime / violet
   NB: html is 62.5%, so 1rem = 10px (same as lipsmatch.css).
   ============================================================ */

/* ---- 1. Comparison table ------------------------------------
   Same look as .lm-compare on /technology, but a real <table>,
   because search engines and answer engines read <table> rows and
   columns, and do not read a grid of <div>s as a table. */
.lsm-table-wrap {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  border-radius: 2.4rem;
  border: 1px solid var(--st-muted);
  background: var(--base-tint);
}
.lsm-table-wrap::-webkit-scrollbar { height: 6px; }
.lsm-table-wrap::-webkit-scrollbar-thumb { background: var(--st-bright); border-radius: 100px; }

.lsm-table {
  width: 100%;
  min-width: 64rem;            /* below this, the wrap scrolls sideways */
  border-collapse: collapse;
  font-family: var(--_font-default);
  font-size: 1.45rem;
  line-height: 1.4;
  color: var(--t-muted);
  text-align: left;
}
.lsm-table caption {
  caption-side: top;
  padding: 1.8rem 1.8rem 0;
  text-align: left;
  font-family: var(--_font-accent);
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-muted);
}
.lsm-table th,
.lsm-table td {
  padding: 1.6rem 1.8rem;
  vertical-align: top;
  border-bottom: 1px solid var(--st-muted);
}
.lsm-table th + th,
.lsm-table th + td,
.lsm-table td + td { border-left: 1px solid var(--st-muted); }
.lsm-table tbody tr:last-child > * { border-bottom: none; }

/* column heads */
.lsm-table thead th {
  font-family: var(--_font-accent);
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  color: var(--t-bright);
  background: linear-gradient(rgba(var(--accent-rgb), .04), rgba(var(--accent-rgb), .04)), var(--base-tint);
  border-bottom: 1px solid var(--st-bright);
}
/* row heads */
.lsm-table tbody th {
  font-family: var(--_font-accent);
  font-weight: var(--fw-medium);
  color: var(--t-bright);
  background: var(--base-tint);
}
/* keep the row heads in view while the table scrolls sideways */
.lsm-table tbody th,
.lsm-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

/* the Lipsmatch column (optional) */
.lsm-table .is-us {
  background: rgba(var(--accent-rgb), .07);
  color: var(--t-bright);
  font-weight: var(--fw-medium);
}
.lsm-table thead .is-us {
  background: var(--accent);
  color: #161616;
}

/* per-cell verdict icons, same scheme as .lm-compare */
.lsm-table td i { margin-right: .6rem; font-size: 1.4rem; vertical-align: -0.1em; }
.lsm-table td[data-good] { color: var(--t-bright); }
.lsm-table td[data-good] i { color: var(--accent); }
.lsm-table td[data-mid] i { color: var(--t-muted); opacity: .7; }
.lsm-table td[data-bad] i { color: #e0655f; opacity: .9; }

/* links inside a cell: bright text with an accent underline, as in prose */
.lsm-table a {
  color: var(--t-bright);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--accent-rgb), .6);
  text-underline-offset: .2em;
  transition: color .3s var(--_animbezier);
}
.no-touch .lsm-table a:hover { color: var(--accent); }

/* Two columns fit a phone, so they never scroll sideways. */
.lsm-table:not(:has(tr > :nth-child(3))) { min-width: 0; }

/* a visible hint, only where the table is wider than the screen */
.lsm-table-hint {
  display: none;
  margin: 1rem 0 0;
  font-size: 1.3rem;
  color: var(--t-muted);
}
@media (max-width: 767px) {
  .lsm-table { font-size: 1.35rem; }
  .lsm-table th,
  .lsm-table td { padding: 1.3rem 1.3rem; }
  .lsm-table-hint { display: block; }
}

/* ---- 2. Breadcrumb trail ------------------------------------
   Sits in the headline sidebar where the "<- Home" line is on the
   existing pages, with the same type (t-xsmall t-muted). */
.lsm-crumbs p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .6rem;
}
.lsm-crumbs__sep { opacity: .6; }

/* ---- 3. Button row under the H1 ------------------------------
   Stacks full width on phones, so a long label never clips inside
   .btn-caption (see the .lm-cta__actions note in lipsmatch.css). */
.lsm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 3.2rem;
}
@media only screen and (max-width: 767px) {
  .lsm-actions { flex-direction: column; align-items: stretch; }
  .lsm-actions .btn { width: 100%; flex-shrink: 0; }
}

/* ---- 4. Short answer box -------------------------------------
   The 40 to 60 word direct answer for a question page. One accent
   rule on the left, no card, so it reads as part of the headline. */
.lsm-answer {
  max-width: 64rem;
  margin-top: 3.2rem;
  padding: .2rem 0 .2rem 2.2rem;
  border-left: 2px solid var(--accent);
}
.lsm-answer__label {
  margin: 0 0 .8rem;
  font-family: var(--_font-accent);
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.lsm-answer p.lsm-answer__text {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.55;
  color: var(--t-bright);
}
@media only screen and (max-width: 767px) {
  .lsm-answer p.lsm-answer__text { font-size: 1.7rem; }
}

/* ---- 5. Tap-to-play films ------------------------------------
   Only the length loads before a tap (preload="metadata"). pages.js picks
   the hd or sd file, plays one film at a time, and stops a film at
   data-end (for films that end before their end card). */
.lsm-watch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem;
}
.lsm-watch__item { margin: 0; }
.lsm-watch__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 2.4rem;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid var(--st-muted);
}
.lsm-watch__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0a0a0a;
}
.lsm-watch__lang {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 2;
  padding: .45rem 1rem;
  border-radius: 100px;
  font-family: var(--_font-accent);
  font-size: 1.2rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(10, 10, 10, .62);
  pointer-events: none;
}
.lsm-watch__cap { padding: 1.4rem .4rem 0; }
.lsm-watch__tag {
  display: inline-block;
  margin-bottom: .6rem;
  font-family: var(--_font-accent);
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.lsm-watch__cap p { margin: 0; font-size: 1.6rem; line-height: 1.5; color: var(--t-muted); }
.lsm-watch__note { margin: 2rem 0 0; font-size: 1.5rem; color: var(--t-muted); }
@media only screen and (max-width: 767px) {
  .lsm-watch { grid-template-columns: 1fr; gap: 2.8rem; }
  .lsm-watch__media { border-radius: 1.6rem; }
}

/* ---- 6. Small parts ------------------------------------------ */
/* Key facts: two columns, no sideways scroll. */
.lsm-table--facts { min-width: 0; }
.lsm-table--facts tbody th { width: 34%; }
@media (max-width: 767px) {
  .lsm-table--facts tbody th,
  .lsm-table:not(:has(tr > :nth-child(3))) tbody th { width: 40%; position: static; }
  .lsm-table--facts + .lsm-table-hint,
  .lsm-table-wrap:has(.lsm-table--facts) + .lsm-table-hint,
  .lsm-table-wrap:not(:has(tr > :nth-child(3))) + .lsm-table-hint { display: none; }
}
/* A readable small label (the copied "Explore related" one was 7.5px). */
.lsm-eyebrow {
  margin: 0 0 1.2rem;
  font-family: var(--_font-accent);
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-muted);
}
.lsm-sources {
  margin: 0;
  padding-left: 1.8em;
  list-style: decimal;
  font-size: 1.45rem;
  line-height: 1.6;
  color: var(--t-muted);
}
.lsm-sources li { margin-bottom: .5rem; }
.lsm-sources a { color: var(--t-muted); text-decoration: underline; text-underline-offset: .2em; }
.lsm-sources a:hover { color: var(--t-bright); }
.lsm-list li { margin-bottom: .9rem; }

/* ---- 7. Headline: the answer beside a film -------------------
   The site's own pages follow the H1 with a film. These pages give
   a 40 to 90 word answer first, so it sits on the left at reading
   size, with the page's finished film (or the proof numbers) on the
   right. Stacks below 1200px. */
.lsm-hero {
  display: grid;
  gap: 3.2rem;
  margin-top: 3.2rem;
}
@media only screen and (min-width: 1200px) {
  .lsm-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 6.4rem;
    align-items: start;
  }
}
.lsm-hero p.lsm-hero__lede {
  margin: 0;
  max-width: 64rem;
  font-family: var(--_font-accent);
  font-size: 2.1rem;
  line-height: 1.55;
  color: var(--t-bright);
  text-wrap: pretty;
}
@media only screen and (min-width: 1600px) {
  .lsm-hero p.lsm-hero__lede { font-size: 2.3rem; }
}
@media only screen and (max-width: 767px) {
  .lsm-hero p.lsm-hero__lede { font-size: 1.85rem; }
}
.lsm-hero .lsm-actions { margin-top: 2.8rem; }
.lsm-hero__aside { margin: 0; }
.lsm-hero__aside .lsm-watch__cap p { font-size: 1.45rem; }

/* The proof numbers, for pages with no film of their own. */
.lsm-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--st-muted);
  border-radius: 2.4rem;
  background: var(--base-tint);
  overflow: hidden;
}
.lsm-hero__stat {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 2.6rem 2.4rem;
}
.lsm-hero__stat:nth-child(odd) { border-right: 1px solid var(--st-muted); }
.lsm-hero__stat:nth-child(-n+2) { border-bottom: 1px solid var(--st-muted); }
.lsm-hero__num {
  font: normal var(--fw-medium) 4.4rem/1 var(--_font-accent);
  color: var(--t-bright);
}
.lsm-hero__num em {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.lsm-hero__label { font-size: 1.45rem; color: var(--t-muted); }

/* The eyebrow: the page name always starts its own line, and long
   names wrap evenly, so no word is left alone on a line. */
.lsm-eyebrow-name { display: block; text-wrap: balance; }

/* A table's caption repeats the section heading right above it, so
   it is kept for screen readers and search engines only. */
.lsm-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- 8. Index: numbered rows, in labelled groups -------------
   The hub pages and the "related pages" sections. Every row shows
   what the page is for, on phones too. */
.lsm-index__group + .lsm-index__group { margin-top: 5.6rem; }
.lsm-index__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  margin-bottom: 1.4rem;
}
.lsm-index__head .lsm-eyebrow { margin: 0; color: var(--accent); }
.lsm-index__count { margin: 0; font-size: 1.4rem; color: var(--t-muted); }
.lsm-index__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--st-muted);
}
.lsm-index__row a {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr) minmax(0, 1fr) 4.8rem;
  align-items: center;
  column-gap: 2.4rem;
  padding: 2.4rem 1.2rem;
  border-bottom: 1px solid var(--st-muted);
  color: inherit;
  text-decoration: none;
  transition: background-color .3s var(--_animbezier);
}
.lsm-index__num {
  font: normal var(--fw-medium) 1.4rem/1 var(--_font-accent);
  letter-spacing: .1em;
  color: var(--t-muted);
}
.lsm-index .lsm-index__title {
  margin: 0;
  font-size: 2.8rem;
  line-height: 1.15;
}
/* Native script names stay upright: the serif italic has no Indic
   letters, so the browser would slant a fallback font instead. */
.lsm-index__native {
  margin-left: .6rem;
  font-family: var(--_font-accent);
  font-style: normal;
  font-weight: var(--fw-regular);
  font-synthesis: none;
  color: var(--accent);
}
.lsm-index p.lsm-index__text {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--t-muted);
}
.lsm-index__arrow {
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  border: 1px solid var(--st-muted);
  border-radius: 50%;
  color: var(--t-bright);
  font-size: 1.6rem;
  transition: background-color .3s var(--_animbezier), color .3s var(--_animbezier), border-color .3s var(--_animbezier);
}
.no-touch .lsm-index__row a:hover { background-color: rgba(var(--accent-rgb), .05); }
.no-touch .lsm-index__row a:hover .lsm-index__num { color: var(--accent); }
.no-touch .lsm-index__row a:hover .lsm-index__arrow {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #161616;
}
/* Below 992px: number, then title over text, then the arrow. */
@media only screen and (max-width: 991px) {
  .lsm-index__row a {
    grid-template-columns: 3.6rem minmax(0, 1fr) 4rem;
    grid-template-areas: "num title arrow" "num text arrow";
    row-gap: .6rem;
    column-gap: 1.6rem;
    padding: 2rem .4rem;
  }
  .lsm-index__num { grid-area: num; align-self: start; padding-top: .6rem; }
  .lsm-index .lsm-index__title { grid-area: title; font-size: 2.2rem; }
  .lsm-index p.lsm-index__text { grid-area: text; font-size: 1.5rem; }
  .lsm-index__arrow { grid-area: arrow; width: 4rem; height: 4rem; }
}

/* Lists: the same face, size and grey as the paragraphs around them,
   with the bold lead in bright text and the bullet or number in accent. */
.mxd-block__content ul.lsm-list,
.mxd-block__content ol.lsm-list {
  font-family: var(--_font-accent);
  font-size: 1.8rem;
  line-height: 1.6;
}
.mxd-block__content ul.lsm-list { list-style: disc outside; }
.mxd-block__content ol.lsm-list { list-style: decimal outside; }
.mxd-block__content ul.lsm-list li,
.mxd-block__content ol.lsm-list li {
  padding-left: .3em;
  margin-bottom: 1.2rem;
  color: var(--t-medium);
}
.mxd-block__content ul.lsm-list li:last-child,
.mxd-block__content ol.lsm-list li:last-child { margin-bottom: 0; }
.mxd-block__content .lsm-list li::marker { color: var(--accent); }
.lsm-list li strong { color: var(--t-bright); font-weight: var(--fw-medium); }
@media only screen and (min-width: 1600px) {
  .mxd-block__content ul.lsm-list,
  .mxd-block__content ol.lsm-list { font-size: 2.2rem; }
}

/* ---- 9. Reading sections ------------------------------------
   The site's big lead size (2.5rem, 3rem from 1600px) is made for one
   line under a headline. Long answer-first sections read better a
   step smaller, with room under the heading. */
h2.lsm-prose__title { margin-bottom: 2.8rem; }
p.lsm-lead {
  font-size: 2.1rem;
  line-height: 1.55;
  text-wrap: pretty;
}
@media only screen and (min-width: 1600px) {
  p.lsm-lead { font-size: 2.3rem; }
}
@media only screen and (max-width: 767px) {
  h2.lsm-prose__title { margin-bottom: 2rem; }
  p.lsm-lead { font-size: 1.85rem; }
}

/* ---- 10. One film, several languages --------------------------
   For clips the flip player does not have (the Succession scene):
   one player with a button per language, never two side by side. */
.lsm-switch { max-width: 88rem; margin: 0 auto; }
.lsm-switch__langs {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 1.6rem;
}
.lsm-switch__btn {
  padding: .9rem 1.8rem;
  border: 1px solid var(--st-muted);
  border-radius: 100px;
  background: transparent;
  font: normal var(--fw-medium) 1.5rem/1 var(--_font-accent);
  color: var(--t-muted);
  cursor: pointer;
  transition: color .3s var(--_animbezier), background-color .3s var(--_animbezier), border-color .3s var(--_animbezier);
}
.lsm-switch__btn.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #161616;
}
.no-touch .lsm-switch__btn:not(.is-on):hover { color: var(--t-bright); border-color: var(--t-muted); }
.lsm-switch__cap { margin: 1.4rem 0 0; font-size: 1.5rem; line-height: 1.5; color: var(--t-muted); }

/* 11. The flip stage's voice note on a phone. The shared player keeps it on
   one line, which is wider than a phone screen, so here it may wrap, in even
   lines. */
@media (max-width: 767px) {
  .ls-showcase__mount .ls-voice-note {
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
    border-radius: 1.6rem;
    text-wrap: balance;
  }
}
/* The section intro above each flip stage already says what the film is
   and what each button plays, so the player's own sentence is not shown.
   The voice note stays. */
.ls-showcase__mount .ls-caption__text { display: none; }

/* 12. Ways to work with us, on the /for/ hub: offer cards, set apart from
   the numbered index of pages above them. The first card is the usual start. */
.lsm-ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}
@media only screen and (max-width: 991px) {
  .lsm-ways { grid-template-columns: minmax(0, 1fr); }
}
.lsm-way {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 3.2rem 2.8rem;
  border: 1px solid var(--st-muted);
  border-radius: 2.4rem;
  background: var(--base-tint);
  color: inherit;
  text-decoration: none;
  transition: border-color .3s var(--_animbezier), background-color .3s var(--_animbezier);
}
.lsm-way.is-first {
  border-color: rgba(var(--accent-rgb), .45);
  background: rgba(var(--accent-rgb), .06);
}
.lsm-way__icon { font-size: 3.2rem; line-height: 1; color: var(--accent); }
.lsm-way__title { margin: .8rem 0 0; font: normal var(--fw-medium) 3rem/1.1 var(--_font-accent); color: var(--t-bright); }
.lsm-way__text { flex: 1; margin: 0; font-size: 1.6rem; line-height: 1.5; color: var(--t-muted); }
.lsm-way__cta {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.2rem;
  font: normal var(--fw-medium) 1.6rem/1 var(--_font-accent);
  color: var(--t-bright);
}
.lsm-way.is-first .lsm-way__cta { color: var(--accent); }
.no-touch .lsm-way:hover { border-color: var(--t-muted); }
.no-touch .lsm-way.is-first:hover { border-color: var(--accent); }

/* 13. Keep the page width the same when the scrollbar appears. The loader
   hides the scrollbar while it runs; when it comes back the page got a few
   pixels narrower, and a headline that just fit dropped a word to a new line. */
html { scrollbar-gutter: stable; }

/* 14. Light theme: small accent text on the cream page. The pale violet is
   about 2.7:1 there, so links, labels and step numbers take a darker violet
   (about 5:1). Fills, rules and the large italic headline words keep the
   brand violet, and so does everything on the dark closing band. */
[color-scheme=light] :is(
  .mxd-block__content p a:not([class]),
  .mxd-block__content li a:not([class]),
  .mxd-accordion__text a:not([class]),
  .lsm-table a,
  .lsm-list li,
  .lsm-answer__label,
  .lsm-index__head .lsm-eyebrow,
  .lsm-index__native,
  .lsm-way__cta,
  .lsm-watch__tag,
  .lm-chip--more,
  .ls-process__eyebrow,
  .ls-step__num
) {
  --accent: #6b55c9;
  --accent-rgb: 107, 85, 201;
}

/* 15. The closing band is dark in both themes, so its main button keeps the
   light pill it has in the dark theme. */
[color-scheme=light] .lm-cta .btn-opposite {
  --base-opp: var(--base-opp--dark);
  --t-opp-bright: var(--t-opp-bright--dark);
}

/* 16. Card grids: the column count follows the number of cards, so a
   grid never ends with one card alone on its last row.
   4 cards: 2 + 2, then 4 in a row from 1200px.
   5 cards: 3 + 2 on a 6-track grid, then 5 in a row from 1400px.
   6 cards: 2 + 2 + 2, then 3 + 3 from 992px. */
@media only screen and (min-width: 768px) {
  :is(.ls-features:not(.ls-features--campaign):not(.ls-features--trio), .ls-steps):has(> :nth-child(4):last-child),
  :is(.ls-features:not(.ls-features--campaign):not(.ls-features--trio), .ls-steps):has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :is(.ls-features:not(.ls-features--campaign):not(.ls-features--trio), .ls-steps):has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  :is(.ls-features:not(.ls-features--campaign):not(.ls-features--trio), .ls-steps):has(> :nth-child(5):last-child) > * {
    grid-column: span 2;
  }
  :is(.ls-features:not(.ls-features--campaign):not(.ls-features--trio), .ls-steps):has(> :nth-child(5):last-child) > :nth-child(n+4) {
    grid-column: span 3;
  }
  /* a card title moves to the next line whole; it is split only when one
     word is wider than the card */
  .ls-feature__num { hyphens: manual; -webkit-hyphens: manual; }
}
@media only screen and (min-width: 992px) {
  :is(.ls-features:not(.ls-features--campaign):not(.ls-features--trio), .ls-steps):has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 1200px) {
  :is(.ls-features:not(.ls-features--campaign):not(.ls-features--trio), .ls-steps):has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 1400px) {
  :is(.ls-features:not(.ls-features--campaign):not(.ls-features--trio), .ls-steps):has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  :is(.ls-features:not(.ls-features--campaign):not(.ls-features--trio), .ls-steps):has(> :nth-child(5):last-child) > *,
  :is(.ls-features:not(.ls-features--campaign):not(.ls-features--trio), .ls-steps):has(> :nth-child(5):last-child) > :nth-child(n+4) {
    grid-column: auto;
  }
}

/* 17. Headlines wrap in even lines, so no word sits alone on the last
   line. A headline over 45 characters (.lsm-h1--long, set by the build)
   is a size smaller, so the first screen still shows the start of the
   answer. On a short laptop screen the H1 also follows the screen height.
   Tall screens keep the full size. */
h1.inner-headline__title,
.mxd-page-content h2,
.ls-step__title,
.ls-feature__num,
.lsm-way__title { text-wrap: balance; }
@media only screen and (max-width: 767px) {
  h1.inner-headline__title { font-size: clamp(3.6rem, 11.2vw, 4.8rem); }
  h1.inner-headline__title.lsm-h1--long { font-size: clamp(3.4rem, 9.6vw, 4.4rem); }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  h1.inner-headline__title.lsm-h1--long { font-size: clamp(5.6rem, 7vw, 7rem); }
}
@media only screen and (min-width: 1200px) {
  h1.inner-headline__title { font-size: min(10rem, 11vh); }
  h1.inner-headline__title.lsm-h1--long { font-size: min(8.4rem, 9.4vh); }
}
@media only screen and (min-width: 1600px) {
  h1.inner-headline__title { font-size: min(12rem, 11vh); }
  h1.inner-headline__title.lsm-h1--long { font-size: min(10rem, 9.4vh); }
}

/* 18. Reading width: running text stops at about 70 characters a line.
   Headings, the lead line, tables and card grids keep the full column. */
.mxd-block__content .mxd-block__paragraph > p:not(.lsm-lead),
.mxd-block__content > p:has(+ .lsm-list),
.mxd-block__content > .lsm-list { max-width: 38em; }

/* 19. "Explore related": the links start under their label. */
[data-ie-section="explore-related"] .mxd-article__tags { justify-content: flex-start; }

/* 20. The flip stage on these pages: the section intro already says what
   to tap, so the player's own note is not repeated. On a stage scoped to
   one language, the film picker's language prompt and counts are hidden. */
.ls-showcase__mount[data-ls-quiet] .ls-voice-note { display: none; }
.ls-showcase__mount[data-ls-langs]:not([data-ls-langs*=","]) .ls-suite__binsub,
.ls-showcase__mount[data-ls-langs]:not([data-ls-langs*=","]) .ls-case-tab__meta { display: none; }

/* 21. FAQ questions are h3 under the section's h2 (an outline that screen
   readers and answer engines can follow), with the look of the theme's h6. */
.mxd-accordion__title h3 {
  font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent);
  color: var(--t-bright);
  margin: 0;
}
@media only screen and (min-width: 1200px) {
  .mxd-accordion__title h3 { font-size: 3rem; }
}