/* ==================================================================
   /tools/youtube-playlist-length-calculator on the foundation look.
   Loaded ONLY when the 'tools-playlist-length-calculator-fnd' redesign
   switch is on for this viewer; the old page keeps its own three
   stylesheets.

   Layout unique to this page only. The first screen, the guide, the
   questions, the links and the close are the shared tool kit
   (foundation-tools.css); the input, badges, stats, tabs, segment,
   chips, slider, rows and the picture box are the foundation's and are
   NOT redrawn here.

   Same shape as the Video Length Finder: one centred column at every
   width. Paste a link, then the answer right under the bar.
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .pl3-top .fnd-tool-top__in { display: block; }
  /* The answer here is a plain card, never pinned. Relative, never
     static, so nothing layered inside it escapes the card. */
  .fnd .pl3 .pl3-out { position: relative; top: auto; }
}
.fnd .pl3 .fnd-tool-lead,
.fnd .pl3 .pl3-ask,
.fnd .pl3 .pl3-out { max-width: 760px; margin-left: auto; margin-right: auto; }
/* A wider name and line on a computer, so each takes one line. After
   the 760 above, or it loses. */
@media (min-width: 1024px) {
  .fnd .pl3 .fnd-tool-lead { max-width: 960px; }
  .fnd .pl3 .fnd-tool-lead .fnd-display { max-width: none; }
}

/* The name and its line, centred over the bar they introduce. */
.fnd .pl3 .fnd-tool-lead { text-align: center; }
.fnd .pl3 .fnd-tool-lead .fnd-display,
.fnd .pl3 .fnd-tool-lead__sub { margin-left: auto; margin-right: auto; text-align: center; }
.fnd .pl3 .fnd-tool-lead__sub { text-wrap: balance; }
.fnd .pl3 h1.fnd-display,
.fnd .pl3-qa__list summary,
.fnd.pl3-page .fnd-tool-close .fnd-btn { text-wrap: balance; }
/* Video titles from YouTube, the answers and the tool cards: no word left
   alone on a last line. */
.fnd .pl3 .fnd-row-t,
.fnd .pl3-qa__body p,
.fnd.pl3-page .fnd-tool-links p { text-wrap: pretty; }
@media (max-width: 413px) {
  .fnd .pl3 .fnd-tool-lead .fnd-display { font-size: 2.15rem; }
}
@media (max-width: 559px) {
  .fnd .pl3 .fnd-tool-lead { margin-bottom: var(--fnd-s4); }
}

/* The bar sits bare on the page like a search box: no card around it. */
.fnd .pl3 .pl3-ask { background: none; border: 0; border-radius: 0; box-shadow: none; }
.fnd .pl3 .pl3-ask > .fnd-card-body { padding: 0; }
.pl3-ask,
.pl3-out { scroll-margin-top: calc(var(--header-height, 61px) + 16px); }

/* The search bar, the same as the Video Length Finder's bar (copied, not
   shared, so no page can move another). */
.fnd .pl3-bar {
  display: flex; align-items: center; gap: var(--fnd-s2);
  background: var(--fnd-card);
  border: 1px solid var(--fnd-edge);
  border-radius: 999px;
  padding: 5px 5px 5px 20px;
  box-shadow: 0 1px 2px rgba(23, 20, 31, .05), 0 12px 28px -16px rgba(23, 20, 31, .3);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.fnd .pl3-bar:focus-within {
  border-color: var(--fnd-text);
  box-shadow: 0 0 0 3px var(--fnd-accent-soft), 0 12px 28px -16px rgba(23, 20, 31, .3);
}
.pl3-bar > .pl3-mark { flex: 0 0 auto; font-size: 15px; color: var(--fnd-text-faint); }
.fnd .pl3 .pl3-bar .fnd-input {
  flex: 1 1 auto; width: auto; min-width: 0;
  padding: 0 var(--fnd-s1);
  background: transparent; border: 0; border-radius: 0;
}
.fnd .pl3 .pl3-bar .fnd-input:focus { box-shadow: none; }
.fnd .pl3-bar .fnd-btn { flex: 0 0 auto; border-radius: 999px; white-space: nowrap; }
.fnd .pl3-bar:has(.fnd-btn:focus-visible) {
  border-color: var(--fnd-edge);
  box-shadow: 0 1px 2px rgba(23, 20, 31, .05), 0 12px 28px -16px rgba(23, 20, 31, .3);
}
.fnd .pl3 .fnd-btn[aria-busy="true"] { cursor: progress; opacity: .8; }
/* Phones: a narrower button and a 16px box (the size below which an
   iPhone zooms in on a box), so the hint shows whole. */
@media (max-width: 559px) {
  .fnd .pl3-bar { padding-left: 16px; }
  .fnd .pl3-bar .fnd-btn { padding: 0 var(--fnd-s2); }
  .fnd .pl3 .pl3-bar .fnd-input { padding: 0 2px; font-size: 16px; }
}
/* The smallest phones drop the search mark so the hint still fits. */
@media (max-width: 399px) {
  .fnd .pl3-bar { padding-left: 14px; }
  .pl3-bar > .pl3-mark { display: none; }
}
.fnd .pl3 .pl3-ask .fnd-error,
.fnd .pl3 .pl3-ask .pl3-wait { text-align: center; text-wrap: pretty; }
.fnd .pl3 .pl3-ask .pl3-wait { margin-top: var(--fnd-s2); }

/* "Try:" and two examples. The dot sits in the gap; a part that starts
   a line has its dot outside the box, where it is clipped. None after
   the key. */
.fnd .pl3 .pl3-try {
  justify-content: center; margin: var(--fnd-s1) 0 0;
  column-gap: 21px; row-gap: 0; overflow: hidden;
  color: var(--fnd-text-soft); font-size: var(--fnd-t-meta);
}
.fnd .pl3 .pl3-try > span { position: relative; display: inline-flex; align-items: center; }
.fnd .pl3 .pl3-try span + span::before {
  content: "\00b7"; position: absolute; top: 50%; left: -21px; width: 21px;
  margin: 0; transform: translateY(-50%); text-align: center; opacity: .6;
}
.fnd .pl3 .pl3-try .pl3-try__k + span::before { content: none; }
.fnd .pl3 .pl3-try__k { margin-right: -13px; }

/* ------------------------------------------------------------------
   2. THE ANSWER: the playlist, its total large, the speeds, the
   figures, part of it, then the videos or the plan.
   ------------------------------------------------------------------ */
.fnd .pl3 .pl3-out { margin-top: var(--fnd-s5); transition: opacity 160ms ease; }
/* While it looks, everything fades and waits except Start over, which
   stays live so they can cancel. */
.fnd .pl3 .pl3-out .fnd-card-body > * { transition: opacity 160ms ease; }
.fnd .pl3 .pl3-out--busy .fnd-card-body > :not(.pl3-acts),
.fnd .pl3 .pl3-out--busy .pl3-acts > .pl3-copylen,
.fnd .pl3 .pl3-out--busy .pl3-acts__more > :not(.pl3-reset) { opacity: .45; pointer-events: none; }
.pl3-out.pl3-out--in { animation: pl3-in 320ms cubic-bezier(.22, 1, .36, 1); }
@keyframes pl3-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pl3-out.pl3-out--in { animation: none; }
  .fnd .pl3 .pl3-out,
  .fnd .pl3 .pl3-out .fnd-card-body > * { transition: none; }
}

/* The example: a badge saying so, and no buttons row, so "Get total"
   stays the one main button until the answer is theirs. */
.fnd .pl3-exnote {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px var(--fnd-s2);
  margin: 0 0 var(--fnd-s4);
  font-size: var(--fnd-t-meta); line-height: 1.5; color: var(--fnd-text-soft);
}
.fnd .pl3-exnote > span:last-child { text-wrap: pretty; }
.fnd .pl3 .pl3-out:not(.pl3-out--example) .pl3-exnote,
.fnd .pl3 .pl3-out--example .pl3-acts { display: none; }

/* The playlist's name and its counts. The card body spaces every child
   after the first, and the hidden example note still counts as one, so
   the name would sit low. */
.fnd .pl3 .pl3-out .pl3-head { margin-top: 0; }
.fnd .pl3-head__title {
  margin: 0; min-width: 0;
  font-family: var(--fnd-display-font); font-weight: 700;
  font-size: var(--fnd-t-h3-lg); line-height: 1.3; color: var(--fnd-text);
  overflow-wrap: anywhere; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pl3-head__title:focus { outline: none; }
.fnd .pl3-head__meta {
  display: flex; flex-wrap: wrap; column-gap: 21px; row-gap: 0; overflow: hidden;
  margin: 2px 0 0; font-size: var(--fnd-t-meta); color: var(--fnd-text-soft);
}
.fnd .pl3-head__meta > span { position: relative; min-width: 0; overflow-wrap: anywhere; }
.fnd .pl3-head__meta > span + span::before {
  content: "\00b7"; position: absolute; top: 0; left: -21px; width: 21px; text-align: center; opacity: .6;
}
@media (max-width: 559px) {
  .fnd .pl3 .pl3-head .pl3-head__title { font-size: var(--fnd-t-h3); }
}

/* The total: a label, then the time large enough to read at a glance,
   then the same in words, then what the faster speed saves. */
.fnd .pl3 .pl3-len { margin-top: var(--fnd-s4); }
.fnd .pl3 .pl3-len__k { margin: 0; font-size: var(--fnd-t-meta); font-weight: 600; color: var(--fnd-text-soft); }
.fnd .pl3 .pl3-len__v {
  margin: 4px 0 0;
  font-size: clamp(2.75rem, 10vw, 4.5rem); line-height: 1;
  color: var(--fnd-text); white-space: nowrap;
}
.fnd .pl3 .pl3-len__l { margin: var(--fnd-s1) 0 0; font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); text-wrap: pretty; }
.fnd .pl3 .pl3-save { margin: var(--fnd-s1) 0 0; font-size: var(--fnd-t-meta); font-weight: 600; color: var(--fnd-ok); text-wrap: pretty; }

/* The five speeds, under the total they change. */
.fnd .pl3 .pl3-speedrow {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--fnd-s2) var(--fnd-s3); margin-top: var(--fnd-s4);
}
.fnd .pl3 .pl3-speedrow__k { font-size: var(--fnd-t-meta); font-weight: 600; color: var(--fnd-text-soft); }
/* On a phone the five speeds share one row, equal width, so 2x never
   sits alone on a second line. */
@media (max-width: 559px) {
  .fnd .pl3 .pl3-speedrow { display: block; }
  .fnd .pl3 .pl3-speedrow__k { display: block; margin-bottom: var(--fnd-s2); }
  .fnd .pl3 .pl3-speed { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--fnd-s2); }
  .fnd .pl3 .pl3-speed .fnd-chip-btn { min-width: 0; padding-left: 0; padding-right: 0; justify-content: center; }
}
/* The smallest phones: a tighter gap gives 1.25x room inside its chip. */
@media (max-width: 359px) {
  .fnd .pl3 .pl3-speed { gap: 4px; }
}

/* Copy total first, the quiet buttons beside it. On a phone the main
   one takes the whole width and the rest wrap under it. */
.fnd .pl3 .pl3-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fnd-s2) var(--fnd-s4); margin-top: var(--fnd-s4); }
.pl3-acts__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--fnd-s4); }
.fnd .pl3 .pl3-copylen[data-copied="true"] { background: var(--fnd-ok); border-color: var(--fnd-ok); }
.fnd .pl3 .fnd-btn:disabled { cursor: not-allowed; opacity: .55; }
@media (max-width: 559px) {
  .fnd .pl3 .pl3-acts > .fnd-btn { flex: 1 1 100%; justify-content: center; }
  .pl3-acts__more { width: 100%; justify-content: space-between; gap: 28px var(--fnd-s4); }
}
/* Text buttons grown to a 44px tap, in the accent so they read as things
   to press. */
.fnd .pl3 .pl3-link.fnd-textbtn { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-accent-deep); white-space: nowrap; }
.fnd .pl3 .pl3-link.fnd-textbtn:hover { color: var(--fnd-text); }
.fnd .pl3 .pl3-link i { margin-right: 4px; }
.fnd .pl3 .pl3-link[data-copied="true"] { color: var(--fnd-ok); }
.fnd .pl3 .pl3-link:disabled { cursor: not-allowed; opacity: .55; }

/* The four figures: the shared stat strip. On the smallest phones it
   stays two by two, a step smaller, rather than four rows tall. */
@media (max-width: 399px) {
  .fnd .pl3 .pl3-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fnd .pl3 .pl3-stats .fnd-stat { padding: var(--fnd-s3); }
  .fnd .pl3 .pl3-stats .fnd-stat-n { font-size: 22px; }
}

/* A band inside the answer, so its heading is a step smaller than the
   playlist's. */
.fnd .pl3 .pl3-box { margin-top: var(--fnd-s5); }
.fnd .pl3 .pl3-box .fnd-tool-h3 { margin: 0; font-size: var(--fnd-t-h3); }
.fnd .pl3 .pl3-box .fnd-help { margin: 4px 0 var(--fnd-s3); text-wrap: pretty; }

/* Part of it: two number boxes side by side, then "All videos". */
.pl3-range__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--fnd-s3); }
.pl3-range__f { flex: 0 1 160px; min-width: 0; }
.fnd .pl3 .pl3-range__f .fnd-label { display: block; margin-bottom: var(--fnd-s1); }
.fnd .pl3 .pl3-range__f .fnd-input { width: 100%; font-variant-numeric: tabular-nums; }
@media (max-width: 559px) {
  .pl3-range__f { flex: 1 1 0; }
  .fnd .pl3 .pl3-range__f .fnd-input { font-size: 16px; }
  .fnd .pl3 .pl3-all { flex: 1 1 100%; justify-content: flex-start; }
}

/* The videos or the plan: the shared tab strip, a little closer to what
   it switches. */
.fnd .pl3 .pl3-tabs { margin-bottom: var(--fnd-s3); }

/* The list's count and its order on one line; on a phone the order
   takes its own line and its three buttons share it equally. */
.pl3-listbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--fnd-s2) var(--fnd-s3);
}
.fnd .pl3 .pl3-count { margin: 0; font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); }
.pl3-sortrow { display: flex; align-items: center; gap: var(--fnd-s2); min-width: 0; }
.fnd .pl3 .pl3-sort__k { font-size: var(--fnd-t-meta); font-weight: 600; color: var(--fnd-text-soft); }
@media (max-width: 559px) {
  .fnd .pl3 .pl3-count { flex: 1 1 100%; }
  .pl3-sortrow { flex: 1 1 100%; }
  .fnd .pl3 .pl3-sort { flex: 1 1 auto; display: flex; width: auto; }
  .fnd .pl3 .pl3-sort button { flex: 1 1 0; min-width: 0; padding: 0 var(--fnd-s2); }
}
@media (max-width: 399px) {
  .fnd .pl3 .pl3-sort__k { display: none; }
}

/* Rows: the shared list row, the picture, and the time at the chosen
   speed at the end. On a phone the time moves onto the picture's corner,
   where YouTube shows it, so the title keeps the width. */
.fnd .pl3 .pl3-rows { margin-top: var(--fnd-s3); }
.fnd .pl3 .pl3-rows .fnd-row { grid-template-columns: 104px minmax(0, 1fr) auto; }
.fnd .pl3 .pl3-rows .fnd-row-end { grid-column: 3; grid-row: auto; }
.fnd .pl3 .pl3-rows .fnd-row-end:empty { display: none; }
.fnd .pl3 .pl3-rows .fnd-media-tag { display: none; }
@media (max-width: 559px) {
  .fnd .pl3 .pl3-rows .fnd-row { grid-template-columns: 84px minmax(0, 1fr); }
  .fnd .pl3 .pl3-rows .fnd-row-end { display: none; }
  .fnd .pl3 .pl3-rows .fnd-media-tag { display: block; right: 4px; bottom: 4px; padding: 1px 5px; }
}
/* The narrowest phones get a third line, so a title is more than a few words. */
@media (max-width: 399px) {
  .fnd .pl3 .pl3-rows .fnd-row-t { -webkit-line-clamp: 3; }
}
.fnd .pl3 .pl3-rows .pl3-sofar { white-space: nowrap; }
.fnd .pl3 .pl3-rows .fnd-row-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fnd .pl3 .pl3-rows .fnd-media--empty { display: flex; align-items: center; justify-content: center; color: var(--fnd-text-faint); }
/* Whole words wrap; only a word wider than the row is broken. */
.fnd .pl3 .pl3-rows .fnd-row-t,
.fnd .pl3 .pl3-rows .fnd-row-meta > span { min-width: 0; overflow-wrap: break-word; word-break: normal; }
/* The title link reaches a 24px tap without moving a line. */
.fnd .pl3 .pl3-rows .fnd-row-t a { padding: 2px 0; }
.fnd .pl3 .pl3-rows .fnd-row-meta { gap: 2px 0; column-gap: 21px; overflow: hidden; }
.fnd .pl3 .pl3-rows .fnd-row-meta > span { position: relative; }
.fnd .pl3 .pl3-rows .fnd-row-meta > span + span::before {
  content: "\00b7"; position: absolute; top: 0; left: -21px; width: 21px; text-align: center; opacity: .6;
}
/* The time at the chosen speed: the figure the list is for. */
.fnd .pl3 .pl3-end {
  font-family: var(--fnd-display-font); font-weight: 700; font-size: var(--fnd-t-sm);
  color: var(--fnd-text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fnd .pl3 .pl3-more { width: 100%; justify-content: center; margin-top: var(--fnd-s3); }

/* The plan: the time each day on the shared slider, the days as chips. */
.pl3-plan { display: grid; gap: var(--fnd-s4); }
.fnd .pl3 .pl3-plan__k {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--fnd-s2);
  margin: 0 0 var(--fnd-s1);
}
.fnd .pl3 .pl3-plan__k .fnd-label { margin: 0; }
.fnd .pl3 .pl3-hours-v {
  font-family: var(--fnd-display-font); font-weight: 700; font-size: var(--fnd-t-sm);
  color: var(--fnd-text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fnd .pl3 .pl3-hours { display: block; height: 44px; }
/* Seven full day names do not fit a phone's line: an even grid, so a
   day left over sits in its column rather than stretched. */
@media (max-width: 767px) {
  .fnd .pl3 .pl3-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .fnd .pl3 .pl3-days .fnd-chip-btn { min-width: 0; padding-left: 0; padding-right: 0; justify-content: center; }
}
.fnd .pl3 .pl3-finish {
  margin: var(--fnd-s5) 0 0;
  font-family: var(--fnd-display-font); font-weight: 700;
  font-size: var(--fnd-t-h3); line-height: 1.35; color: var(--fnd-text); text-wrap: pretty;
}
.fnd .pl3 .pl3-finish:empty { display: none; }
.fnd .pl3 .pl3-finish__sub { display: block; margin-top: 2px; font-family: var(--fnd-body-font); font-weight: 400; font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); }

/* The calendar. No shared part draws one yet: promote this to the
   foundation when a second page needs it. Months side by side on a
   computer, stacked on a phone. */
.pl3-cal {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--fnd-s4); margin-top: var(--fnd-s4);
}
.pl3-cal:empty { display: none; }
.fnd .pl3 .pl3-cal__t {
  margin: 0 0 var(--fnd-s2);
  font-family: var(--fnd-display-font); font-weight: 700; font-size: var(--fnd-t-sm); color: var(--fnd-text);
}
.pl3-cal__g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.fnd .pl3 .pl3-cal__h { padding: 2px 0 4px; font-size: 12px; font-weight: 600; color: var(--fnd-text-faint); text-align: center; }
.fnd .pl3 .pl3-cal__d {
  aspect-ratio: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 8px;
  font-size: var(--fnd-t-meta); line-height: 1.1; color: var(--fnd-text-faint);
  font-variant-numeric: tabular-nums;
}
.fnd .pl3 .pl3-cal__d--watch { background: var(--fnd-accent-soft); color: var(--fnd-text); font-weight: 600; }
.fnd .pl3 .pl3-cal__d--end { background: var(--fnd-ink); color: var(--fnd-on-ink); font-weight: 700; }
.fnd .pl3 .pl3-cal__d--today { box-shadow: inset 0 0 0 2px var(--fnd-text); }
.fnd .pl3 .pl3-cal__d--end.pl3-cal__d--today { box-shadow: inset 0 0 0 2px var(--fnd-on-ink); }
.pl3-cal__d--off { visibility: hidden; }
.fnd .pl3 .pl3-cal__n { font-size: 12px; font-weight: 600; opacity: .8; }
.fnd .pl3 .pl3-calkey { margin: var(--fnd-s3) 0 0; text-wrap: pretty; }
.fnd .pl3 .pl3-cal-more { margin-top: var(--fnd-s2); }

/* Day by day: the shared rows with no picture, the day's time at the
   end (under the text on a phone, as the foundation does). */
.fnd .pl3 .pl3-daily { margin-top: var(--fnd-s4); }
.fnd .pl3 .pl3-daily:empty { display: none; }
.fnd .pl3 .pl3-daily .fnd-row-t { -webkit-line-clamp: 1; }
.fnd .pl3 .pl3-daily .fnd-row--more .fnd-row-t { font-weight: 400; color: var(--fnd-text-soft); }
.fnd .pl3 .pl3-cap { margin: var(--fnd-s3) 0 0; text-wrap: pretty; }

/* The next step: under the answer, once it is theirs. */
.fnd .pl3 .pl3-next {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--fnd-s3) var(--fnd-s4);
  margin-top: var(--fnd-s5); padding-top: var(--fnd-s4);
  border-top: 1px solid var(--fnd-rule);
}
.pl3-next__t { flex: 1 1 300px; min-width: 0; }
.fnd .pl3 .pl3-next .fnd-tool-h3 { margin: 0; font-size: var(--fnd-t-h3); text-wrap: balance; }
.fnd .pl3 .pl3-next__t .fnd-help { margin: 4px 0 0; text-wrap: pretty; }
.pl3-next__go { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fnd .pl3 .pl3-next__hint { margin: 0; }
@media (max-width: 559px) {
  .pl3-next__go { flex: 1 1 100%; }
  .fnd .pl3 .pl3-next__go .fnd-btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------------
   3. THE GUIDE
   ------------------------------------------------------------------ */
.fnd .pl3-guide .fnd-tool-read .fnd-h2 {
  margin-top: var(--fnd-s8);
  max-width: 24ch;
  scroll-margin-top: calc(var(--header-height, 61px) + var(--fnd-s4));
}
.pl3-guide .fnd-tool-read .fnd-h2:focus { outline: none; }
.fnd .pl3-guide .fnd-toc li > a:not(.fnd-btn) { text-wrap: pretty; }
@media (max-width: 767px) {
  .fnd .pl3-guide .fnd-tool-read .fnd-h2 { margin-top: var(--fnd-s7); }
}
/* A link inside a sentence grows to a 44px press without moving the text. */
.fnd .pl3-guide .fnd-tool-read p a:not(.fnd-btn),
.fnd .pl3-guide .fnd-tool-read li a:not(.fnd-btn),
.fnd .pl3-qa__list p a:not(.fnd-btn) { padding-block: 13px; }
.fnd .pl3-guide .fnd-tbl + p,
.fnd .pl3-guide .pl3-steps + p { margin-top: var(--fnd-s3); }

/* The steps: the shared numbered heads, a paragraph under each. */
.pl3-steps { list-style: none; margin: var(--fnd-s4) 0 0; padding: 0; }
.pl3-steps li + li { margin-top: var(--fnd-s5); }
.pl3-steps .fnd-numhead { margin-bottom: var(--fnd-s2); }
.fnd .pl3-steps .fnd-numhead__t { font-size: var(--fnd-t-h3); }
.pl3-steps p { margin: 0; padding-left: calc(32px + var(--fnd-s3)); }
@media (max-width: 559px) {
  .pl3-steps p { padding-left: 0; }
}

/* The speed table holds figures: the shared data table as it is, the
   speed in bold. */
.fnd .pl3-guide .pl3-tbl-speed td:first-child { font-weight: 600; }

/* Anything hidden stays hidden, whatever a shared part sets its display
   to (a text button is inline-flex, a help line is block). */
.fnd .pl3 [hidden] { display: none !important; }