/* ==================================================================
   /free-youtube-likes, rebuilt on the foundation.
   Loaded ONLY when the 'free-youtube-likes' 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) comes from abstracts/foundation.css and is NOT
   redefined here. If a rule below starts redrawing a component, it belongs
   upstream. The recipe follows free-youtube-watch-hours-v2.css, the proven
   reference for this family of pages, section for section.
   ================================================================== */

/* ------------------------------------------------------------------
   1. HERO
   Drawn entirely by the shared landing kit, promoted 2026-08-09 into
   abstracts/foundation-devices.css: .fnd-lp-hero (copy group + chip gap),
   .fnd-lp-title (second display rung, 20ch), .fnd-lp-sub (56ch measure +
   the responsive group break), .fnd-lp-go (the button row) and
   .fnd-dotline (the middot trust line; the ink surface recolours it).
   Nothing page-specific remains here.
   ------------------------------------------------------------------ */

/* The four figures are `.fnd-stats`. This page only decides the band they
   sit in: its own tint section under the hero, tighter than a full
   `.fnd-sec` because a proof band is a strip, not a chapter. */
.fyl-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. */
/* Base-rule trap: `.fnd :is(p, li, ...) > a:not(.fnd-btn)` scores (0,2,2)
   and forces `color: inherit`, so a plainer selector here would leave every
   link in this paragraph the same colour as the sentence around it. (0,3,2)
   wins on its own terms. Measure the computed colour, not the rule. */
.fnd .fnd-summary-a a:not(.fnd-btn),
.fnd .fyl-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 .fnd-summary-a a:not(.fnd-btn):hover,
.fnd .fyl-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.
   ------------------------------------------------------------------ */
.fyl-head { margin-bottom: var(--fnd-s6); }
.fyl-head .fnd-chip { margin-bottom: var(--fnd-s3); }
.fnd .fyl-head .fnd-h2 { max-width: 26ch; }
.fyl-head .fnd-lede { margin-bottom: 0; }

/* ------------------------------------------------------------------
   3 + 4. THE CARD SETS
   Same skeleton on both, so the light set and the ink set read as two
   answers to the same question rather than two unrelated devices. No icon
   discs: a round tinted glyph tile is on the named list of machine-made
   tells. The title is `.fnd-card-t` and the paragraph is `.fnd-card-sub`;
   only their spacing is this page's business.
   ------------------------------------------------------------------ */
.fyl-tile .fnd-card-body { padding: var(--fnd-s5); }
.fnd .fyl-tile .fnd-card-sub { margin-top: var(--fnd-s2); }
/* The warning set's accent rule above each title comes from the shared
   `.fnd-cards--flagged` wrapper variant, and the ink card's paragraph
   colour from the shared `.fnd-card--ink .fnd-card-sub` completion, both
   in abstracts/foundation-devices.css since the 2026-08-09 promotion. */

/* ------------------------------------------------------------------
   5. 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) {
  .fyl-answers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fyl-answers .fnd-ans:nth-child(4n+1) { padding-left: var(--fnd-s5); border-left: 1px solid var(--fnd-rule); }
  .fyl-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 .fyl-answers h3.fnd-ans-a { margin-top: 0; }

/* ------------------------------------------------------------------
   6. THE FOUR STEPS
   Entirely the shared step device (.fnd-stepgrid, .fnd-stepcell,
   .fnd-stepnum in abstracts/foundation-devices.css, promoted 2026-08-09),
   including the card-t/card-sub margins and the strong colour inside a
   cell. Nothing page-specific remains here.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   7. THE COMPARISON TABLE
   The component does the work. The only page-level job is the winner tick
   weight, and the rival-column colour: the component greys column two
   because it was written for one rival beside us, and this table has
   THREE. Out of the box "Risky" under Like-for-Like would be grey while
   the identical "Risky" under Engagement Pods sat full ink, which reads as
   a judgement being passed on one of them and not the other. All three
   rival columns take the same faint ink; only ours is dark and heavy.
   --fnd-text-faint measures 5.37:1 on the card white, so this stays AA.
   ------------------------------------------------------------------ */
.fyl-compare .fnd-tbl .fnd-win { font-weight: 700; }
.fyl-compare .fnd-tbl tbody td:not(:last-child) { color: var(--fnd-text-faint); }
@media (max-width: 719px) {
  .fyl-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 old page.
   ------------------------------------------------------------------ */
.fnd .fyl-numbers__h { max-width: 28ch; margin: var(--fnd-s3) 0 var(--fnd-s7); }
.fyl-numbers__grid { display: grid; grid-template-columns: 1fr; gap: var(--fnd-s7); }
@media (min-width: 860px) {
  .fyl-numbers__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--fnd-s8); align-items: start; }
}
/* The side column and its two supporting figures are the shared
   `.fnd-figside` / `.fnd-subfig` device (abstracts/foundation-devices.css,
   promoted 2026-08-09), note styling included. Only the two-column band
   grid above is this page's business. */

/* ------------------------------------------------------------------
   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.
   ------------------------------------------------------------------ */
.fyl-qa__in { display: grid; grid-template-columns: 1fr; gap: var(--fnd-s6); }
@media (min-width: 900px) {
  .fyl-qa__in { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--fnd-s8); align-items: start; }
  .fyl-qa__side { position: sticky; top: var(--fnd-s7); }
}
.fyl-qa__side .fnd-chip { margin-bottom: var(--fnd-s3); }
.fnd .fyl-qa__side .fnd-h2 { max-width: 18ch; }
.fyl-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. */
.fyl-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. */
.fyl-qa__body { overflow: hidden; transition: height 260ms cubic-bezier(.22,1,.36,1); }
.fyl-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.
   ------------------------------------------------------------------ */
.fyl-more__list { margin-top: var(--fnd-s5); }
.fyl-more__list a { min-height: 56px; }
@media (min-width: 1000px) { .fyl-more__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------
   10b. THE PAID ROUTE
   Entirely the shared offer panel (.fnd-offer, .fnd-offer-copy,
   .fnd-offer-act, .fnd-offer-price in abstracts/foundation-devices.css,
   promoted 2026-08-09). The link underline inside its lede is styled up in
   the hero section's link rules, which still name .fyl-paid__copy; that
   class stays on the markup for exactly that rule. Nothing else
   page-specific remains here.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   THE PINNED BAR
   Bar, link, hidden mark, microlabel gap and the desktop cut-off are all
   the shared `.fnd-pinbar` / `.fnd-pinbar-link` device
   (abstracts/foundation-devices.css, promoted 2026-08-09). The element
   keeps its old id, its `.fyl-sticky-cta` class and this state class,
   because the scroll script that drives it is shared with the OLD page so
   both versions are measured on the same ruler. Only the state flip is
   this page's business, and it must load AFTER the shared base so it wins
   the tie on specificity.
   ------------------------------------------------------------------ */
.fyl-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. Between them, a real break. The shared closer is
   documented as heading, one line, one button, one note, and this page has
   exactly those four.
   ------------------------------------------------------------------ */
.fnd .fyl-close h2 { max-width: 22ch; }
.fnd .fyl-close p { margin-bottom: 0; }
.fnd .fyl-close .fnd-closer-note { margin-top: var(--fnd-s3); }
.fyl-close .fnd-ink-in > p:first-of-type { margin-top: var(--fnd-s3); }
.fyl-close .fnd-btn { margin-top: var(--fnd-s7); }