/* ==================================================================
   /free-youtube-views, rebuilt on the foundation.
   Loaded ONLY when the 'free-youtube-views' redesign switch is on for this
   viewer; the old page keeps landing-shared.css + its own stylesheet.

   Everything here is layout unique to this page. Anything that looks like a
   component (button, card, chip, table, breadcrumb, accordion, quiet link
   list, closing band, stats band, standfirst) comes from the abstracts
   foundation files and is NOT redefined here. If a rule below starts
   redrawing a component, it belongs upstream.
   ================================================================== */

/* ------------------------------------------------------------------
   1. HERO
   The centred copy group, the two-group break, the CTA row and the quiet
   dot line are now the shared .fnd-lp-hero / .fnd-lp-title / .fnd-lp-sub /
   .fnd-lp-go / .fnd-dotline devices in foundation-devices.css, promoted
   after the cross-page pass found them identical on the watch-hours build.
   Only what stayed page-own remains below.
   ------------------------------------------------------------------ */

/* THE HIGHLIGHTED PHRASE IS LONGER THAN THE COMPONENT EXPECTS. `.fnd-display
   em` is `white-space: nowrap` so its ::after underline can never fragment,
   which assumes a short phrase ("4,000 Hours" on the reference page). This
   page's em is "Real YouTube Creators": at the display rung's 35.2px floor it
   measures about 367px, and a 375px phone offers 335px inside the wrap, so
   the last word rendered clipped at the viewport edge (measured: the line box
   ran to x=387 in a 375px viewport; the ink surface clips it, so no checker
   saw it). Under 440px the phrase is allowed to wrap and the underline is
   redrawn as a per-fragment background (box-decoration-break: clone gives
   every wrapped line its own bar), matching the component's .13em bar sitting
   just above the box bottom. Scoped to this page's own heading; the shared
   component is untouched. Recorded for the merge pass as a component gap. */
@media (max-width: 439px) {
  .fnd .fyv-hero__title em { white-space: normal; }
  .fnd .fyv-hero__title em::after { content: none; }
  .fnd .fyv-hero__title em {
    background-image: linear-gradient(var(--fnd-accent), var(--fnd-accent));
    background-repeat: no-repeat;
    background-size: 100% .13em;
    background-position: 0 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

/* The four figures are `.fnd-stats`. This page only decides the band they
   sit in: its own tint strip under the hero, tighter than a full `.fnd-sec`
   because a proof band is a strip, not a chapter. */
.fyv-figs { padding-top: var(--fnd-s7); padding-bottom: var(--fnd-s7); }

/* Links inside running text are underlined, because colour alone is not a
   distinction a colour-blind reader can use. They keep the paragraph's own
   weight: bolding them as well turns a dense paragraph into a row of
   shouting fragments with the actual sentence whispering between them.
   Same base-rule trap as the breadcrumb: `.fnd :is(p, li, ...) > a:not(.fnd-btn)`
   scores (0,2,2) and forces `color: inherit`, so a plainer selector here
   would leave every one of these links the same colour as the sentence
   around it. Three classes win on their own terms. */
.fnd .fyv-what__content a:not(.fnd-btn),
.fnd .fyv-step5 .fnd-card-sub a:not(.fnd-btn),
.fnd .fyv-paid__copy .fnd-lede a:not(.fnd-btn) {
  color: var(--fnd-accent-deep);
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.fnd .fyv-what__content a:not(.fnd-btn):hover,
.fnd .fyv-step5 .fnd-card-sub a:not(.fnd-btn):hover,
.fnd .fyv-paid__copy .fnd-lede a:not(.fnd-btn):hover { text-decoration-thickness: 2px; }

/* ------------------------------------------------------------------
   SECTION HEADS
   One shape for every section: chip, heading, one line. Nothing is centred
   except the hero and the closer, because a page of centred paragraphs
   gives the eye no left edge to run down.
   ------------------------------------------------------------------ */
.fyv-head { margin-bottom: var(--fnd-s6); }
.fyv-head .fnd-chip { margin-bottom: var(--fnd-s3); }
.fnd .fyv-head .fnd-h2 { max-width: 26ch; }
.fyv-head .fnd-lede { margin-bottom: 0; max-width: 62ch; }

/* ------------------------------------------------------------------
   3. WHAT ARE FREE YOUTUBE VIEWS
   Honest prose at a reading measure. The section head carries the answer
   in its lede; these three paragraphs are the article passage under it.
   68ch is the widest comfortable measure for 17px running text.
   ------------------------------------------------------------------ */
.fyv-what__content { max-width: 68ch; }
.fyv-what__content p {
  margin: 0;
  font-size: var(--fnd-t-body);
  line-height: 1.75;
  color: var(--fnd-text-soft);
}
/* The container owns the rhythm, not the children: one rule decides every
   gap between paragraphs, so none of them can land flush by accident. */
.fyv-what__content > * + * { margin-top: var(--fnd-s4); }

/* ------------------------------------------------------------------
   4. THE WARNING CARDS
   The title is `.fnd-card-t`, the paragraph `.fnd-card-sub`; only the
   padding and the quiet mark above the title are this page's business.
   No icon discs: a round tinted glyph tile is on the named list of
   machine-made tells.
   ------------------------------------------------------------------ */
/* The accent rule above each warning title and the on-ink paragraph colour
   are now the shared .fnd-cards--flagged device (and .fnd-card--ink's own
   paragraph colour) in foundation-devices.css. Only this section's card
   padding stays page-own. */
.fyv-tile .fnd-card-body { padding: var(--fnd-s5); }
.fnd .fyv-tile .fnd-card-sub { margin-top: var(--fnd-s2); }

/* ------------------------------------------------------------------
   5. THE FOUR STEPS + STEP FIVE
   The numeral-led hairline grid is now the shared .fnd-stepgrid /
   .fnd-stepcell / .fnd-stepnum device in foundation-devices.css. Only the
   fifth step stays page-own: no other page has a step that names itself.
   ------------------------------------------------------------------ */

/* STEP FIVE IS THE PAYOFF and runs full width under the grid. Its heading
   already names itself "Step 5", so a leading numeral would read "5 Step 5:"
   and it wears the shared .fnd-cards--flagged accent dash instead, the same
   quiet mark the warning cards carry, because it is the one step the other
   four exist for. Only its width and rhythm are page-own. */
.fyv-step5 {
  padding-top: var(--fnd-s6);
  max-width: 68ch;
}
.fnd .fyv-step5__h { margin: 0 0 var(--fnd-s2); }
.fnd .fyv-step5 .fnd-card-sub { margin-top: var(--fnd-s2); }
.fyv-step5 .fnd-card-sub strong { color: var(--fnd-text); font-weight: 600; }

/* ------------------------------------------------------------------
   6. THE ANSWER SHEET
   Three claims, so the shared 4-column grid is overridden to three and the
   left-edge rules are re-cut to match. Without the nth-child override the
   dividers land at the wrong columns and the set reads as broken.
   ------------------------------------------------------------------ */
@media (min-width: 1000px) {
  .fyv-answers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fyv-answers .fnd-ans:nth-child(4n+1) { padding-left: var(--fnd-s5); border-left: 1px solid var(--fnd-rule); }
  .fyv-answers .fnd-ans:nth-child(3n+1) { padding-left: 0; border-left: 0; }
}
/* .fnd-ans-a is a <span> in the shared recipe and an <h3> here, so the
   heading reset has to be undone rather than inherited. */
.fnd .fyv-answers h3.fnd-ans-a { margin-top: 0; }

/* ------------------------------------------------------------------
   7. THE COMPARISON TABLE
   The component does the work. The only page-level jobs: the winner tick
   must not lose its weight, and the three rival columns must take the SAME
   faint ink. The component greys only column two, because it was written
   for one rival beside us; with three rivals that reads as a judgement
   passed on one of them and not the others. --fnd-text-faint measures
   5.37:1 on the card white, so this stays AA.
   ------------------------------------------------------------------ */
.fyv-compare .fnd-tbl .fnd-win { font-weight: 700; }
.fyv-compare .fnd-tbl tbody td:not(:last-child) { color: var(--fnd-text-faint); }
@media (max-width: 719px) {
  .fyv-compare .fnd-tbl tbody td:last-child { color: var(--fnd-text); }
}

/* ------------------------------------------------------------------
   8. REAL NUMBERS
   ONE hero figure. The creator count is the strongest true thing here, so
   it takes the display size and the other two support it. Giving all three
   the same size is what made the strongest one borrow the weakest one's
   doubt on the page being re-skinned.
   ------------------------------------------------------------------ */
/* The supporting figures beside the hero number are now the shared
   .fnd-figside / .fnd-subfig device in foundation-devices.css. Only the
   heading measure and the two-column band grid stay page-own. */
.fnd .fyv-numbers__h { max-width: 28ch; margin: var(--fnd-s3) 0 var(--fnd-s7); }
.fyv-numbers__grid { display: grid; grid-template-columns: 1fr; gap: var(--fnd-s7); }
@media (min-width: 860px) {
  .fyv-numbers__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--fnd-s8); align-items: start; }
}

/* ------------------------------------------------------------------
   9. QUESTIONS
   One column of questions beside a heading block that never changes height.
   This is NOT the two-column accordion that was built and reverted on the
   homepage: there, opening an answer grew one column and left a hole
   beside it.
   ------------------------------------------------------------------ */
.fyv-qa__in { display: grid; grid-template-columns: 1fr; gap: var(--fnd-s6); }
@media (min-width: 900px) {
  .fyv-qa__in { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--fnd-s8); align-items: start; }
  .fyv-qa__side { position: sticky; top: var(--fnd-s7); }
}
.fyv-qa__side .fnd-chip { margin-bottom: var(--fnd-s3); }
.fnd .fyv-qa__side .fnd-h2 { max-width: 18ch; }
.fyv-qa__side .fnd-lede { margin-bottom: 0; }
/* The list fills its column: the shared recipe centres itself at 840px,
   which is right for a full-width block and wrong beside a heading column. */
.fyv-qa__list { max-width: none; margin: 0; }
/* The animated wrapper. Horizontal padding is identical open and shut:
   padding only the open row slides every answer sideways and reads as the
   page being unsure of itself. */
.fyv-qa__body { overflow: hidden; transition: height 260ms cubic-bezier(.22,1,.36,1); }
.fyv-qa__body p { margin: -4px 0 26px; }

/* ------------------------------------------------------------------
   10. MORE WAYS TO GROW
   The quiet link list. Fourteen names, no descriptions, so the rows are
   shorter than the shared 64px and the set does not run half a screen tall.
   ------------------------------------------------------------------ */
.fyv-more__list { margin-top: var(--fnd-s5); }
.fyv-more__list a { min-height: 56px; }
@media (min-width: 1000px) { .fyv-more__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------
   10b. THE PAID ROUTE
   The offer panel is now the shared .fnd-offer / -copy / -act / -price
   device in foundation-devices.css. The button keeps its place before the
   price in the markup (the order the old body reads in); nothing about the
   panel stays page-own except the in-copy link colours above.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   THE PINNED BAR
   The bar and its link are now the shared .fnd-pinbar / .fnd-pinbar-link
   device in foundation-devices.css. The id, the legacy class and this
   `--visible` state class stay page-own exactly as they are, because the
   scroll script shared with the OLD page toggles them, so both versions
   are measured on the same ruler. This rule loads after the bundle, so it
   outranks the component's resting transform at equal specificity.
   ------------------------------------------------------------------ */
.fyv-sticky-cta--visible { transform: translateY(0); pointer-events: auto; }

/* ------------------------------------------------------------------
   11. THE CLOSE
   Two groups, same as the hero: what we are saying (the heading and the
   line under it) sits tight, what to do (the button and the reassurance
   under it) sits tight, and a real break sits between them.
   ------------------------------------------------------------------ */
.fnd .fyv-close h2 { max-width: 22ch; }
.fnd .fyv-close p { margin-bottom: 0; }
.fnd .fyv-close .fnd-closer-note { margin-top: var(--fnd-s3); }
.fyv-close .fnd-ink-in > p:first-of-type { margin-top: var(--fnd-s3); }
.fyv-close .fnd-btn { margin-top: var(--fnd-s7); }