/* ==================================================================
   /free-youtube-subscribers, rebuilt on the foundation.
   Loaded ONLY when the 'free-youtube-subscribers' 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, answer sheet, stats band) comes from
   abstracts/foundation*.css and is NOT redefined here. If a rule below
   starts redrawing a component, it belongs upstream.
   ================================================================== */

/* ------------------------------------------------------------------
   1. HERO
   One centred column. The headline is long (it carries the exact phrase
   people search for and is not shortened), so it uses the SECOND display
   rung and a wider measure than .fnd-display's 14ch, which would strand a
   word on its own line several times over.

   THE HERO IS TWO GROUPS, NOT SIX THINGS, the lesson the watch-hours hero
   paid for three founder looks to learn. What the page is (chip, headline,
   explanation) sits tight together. What to do about it (the two buttons,
   the reassurance under them) sits tight together. Between those two groups
   goes a gap big enough that the eye reads a break rather than another
   item.
   ------------------------------------------------------------------ */
.fys-hero__copy { text-align: center; }
.fys-hero__copy .fnd-chip { margin-bottom: var(--fnd-s4); }

.fnd .fys-hero__title {
  font-size: var(--fnd-t-display-2);
  max-width: 21ch;
  margin: 0 auto var(--fnd-s4);
  /* Balance keeps the phone stack reading as phrases rather than leaving a
     stranded word on the last line. The H1 itself is locked copy. */
  text-wrap: balance;
}
/* THE HIGHLIGHT IS THREE WORDS AND THE COMPONENT ASSUMES ONE OR TWO.
   `.fnd-display em` pins itself with `white-space: nowrap` so its absolute
   ::after bar underlines a single unbroken line. "Real Creator
   Collaborations" is the phrase the old page highlighted (locked copy), and
   at 375px it cannot fit one line at the display rung, so the nowrap CLIPPED
   it off the right edge while the scroll check stayed green. The fix: let
   this page's em wrap, drop the absolute bar (across a wrapped box it paints
   one misplaced rectangle), and draw the underline as an inline background
   that every line fragment repaints for itself. On one line this renders the
   same bar the component draws; on two lines each gets its own. Raise a
   wrap-safe em underline upstream before the next page highlights a phrase. */
.fnd .fys-hero__title em {
  white-space: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: linear-gradient(to top, transparent 0.05em, var(--fnd-accent) 0.05em, var(--fnd-accent) 0.18em, transparent 0.18em);
}
.fnd .fys-hero__title em::after { content: none; }
/* Narrower than the wrap, and the gap under it is the group break. A wide
   centred paragraph under a wide headline reads as a second block of
   content; at 56ch it reads as the caption to the headline, which is its
   job. */
.fys-hero__sub {
  max-width: 56ch;
  margin: 0 auto var(--fnd-s7);
  font-size: var(--fnd-t-lede);
  line-height: 1.7;
}
/* The group break grows with the screen. 62px between the message and the
   action is right on a desktop and is most of a phone screen; 34 on a phone
   still reads as a break against the 20px inside the groups and keeps both
   buttons on the first screen. The break is a ratio, not a number. */
@media (min-width: 768px) { .fys-hero__sub { margin-bottom: var(--fnd-s8); } }
@media (max-width: 767px) { .fys-hero__sub { margin-bottom: var(--fnd-s6); } }

.fys-hero__go {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--fnd-s3);
}

/* THE THREE PROMISES ARE ONE QUIET LINE, not three marks. Accent ticks here
   would out-shout the buttons they sit under, and the accent means "this
   one won": the hero already spends it once on the highlighted words in the
   headline. The words are unchanged; middots between them come from CSS and
   never enter the page text. */
.fys-hero__trust {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center;
  gap: 0;
  margin: var(--fnd-s4) 0 0;
  font-size: var(--fnd-t-meta);
  color: var(--fnd-on-ink-faint);
}
.fys-hero__trust span + span::before {
  content: "\00b7";
  margin: 0 10px;
  opacity: .6;
}

/* 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. */
.fys-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.
   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 link in these paragraphs the same colour as the
   sentence around it. Three classes beat two on their own terms. */
.fnd .fys-what__prose a:not(.fnd-btn),
.fnd .fys-step5__text a:not(.fnd-btn),
.fnd .fys-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 .fys-what__prose a:not(.fnd-btn):hover,
.fnd .fys-step5__text a:not(.fnd-btn):hover,
.fnd .fys-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. This page's ledes run longer than
   the watch-hours page's one-liners (three of them are full paragraphs);
   the component's own 56ch cap keeps them readable, so no width is decided
   here.
   ------------------------------------------------------------------ */
.fys-head { margin-bottom: var(--fnd-s6); }
.fys-head .fnd-chip { margin-bottom: var(--fnd-s3); }
.fnd .fys-head .fnd-h2 { max-width: 26ch; }
.fys-head .fnd-lede { margin-bottom: 0; }

/* ------------------------------------------------------------------
   4. THE CREDIT CYCLE DIAGRAM
   The picture carries the argument, so the section holds nothing else. The
   image is capped below its natural 800px: at full wrap width a diagram
   reads as a poster, at 680 it reads as a figure inside an article. The
   caption is the quiet line under it, centred with the image.
   ------------------------------------------------------------------ */
.fys-diagram__figure { margin: 0; text-align: center; }
.fys-diagram__figure img {
  max-width: min(100%, 680px);
  height: auto;
}
.fys-diagram__figure figcaption {
  margin: var(--fnd-s3) auto 0;
  max-width: 58ch;
  font-size: var(--fnd-t-meta);
  color: var(--fnd-text-faint);
  line-height: 1.55;
}

/* ------------------------------------------------------------------
   5. WHAT ARE FREE YOUTUBE SUBSCRIBERS
   Three paragraphs of prose at a reading measure, then the three
   definitions on the shared answer sheet. The prose measure is 72ch, wider
   than a lede because these are body paragraphs doing an article's work,
   not captions.
   ------------------------------------------------------------------ */
.fys-what__prose p {
  max-width: 72ch;
  font-size: var(--fnd-t-body);
  line-height: 1.7;
  color: var(--fnd-text-soft);
  margin: 0 0 var(--fnd-s4);
}
.fys-what__prose p:last-child { margin-bottom: 0; }

/* The definitions keep their <dl> semantics (the action's speakable
   selector points at `.fys-definitions dd`), dressed as the answer sheet.
   The shared grid is cut for four answers; this set has three, so the
   columns and the left-edge rules are re-cut to match, exactly as the
   watch-hours page did for its three claims. */
@media (min-width: 1000px) {
  .fys-definitions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fys-definitions .fnd-ans:nth-child(4n+1) { padding-left: var(--fnd-s5); border-left: 1px solid var(--fnd-rule); }
  .fys-definitions .fnd-ans:nth-child(3n+1) { padding-left: 0; border-left: 0; }
}
/* dl/dt/dd carry user-agent margins that the shared recipe, written for
   spans, never had to reset. Without this the dd indents 40px and the set
   reads as broken. */
.fys-definitions { margin-bottom: 0; }
.fys-definitions dt.fnd-ans-a { margin-top: 0; }
.fys-definitions dd.fnd-ans-d { margin: 0; }

/* ------------------------------------------------------------------
   6 + 7. THE CARD SETS
   Same skeleton on both, so the ink warning set and the light value 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`, the paragraph is `.fnd-card-sub`; only this
   section's padding and the gap between them are this page's business. */
.fys-tile .fnd-card-body { padding: var(--fnd-s5); }
.fnd .fys-tile .fnd-card-sub { margin-top: var(--fnd-s2); }
/* Scoped by the SECTION, not by `.fnd-card--ink`: naming the shared variant
   here would read as this page redefining a component it does not own. The
   card set in this one section is the ink one; nothing else needs to know. */
.fys-dangers .fnd-card-sub { color: var(--fnd-on-ink-soft); }

/* The warning set gets one quiet mark above the title. It is a rule, not a
   red disc: our own rules keep error styling off anything that is not an
   error the reader just caused. */
.fys-dangers .fnd-card-t::before {
  content: ""; display: block; width: 26px; height: 2px; border-radius: 2px;
  background: var(--fnd-accent); margin-bottom: var(--fnd-s3);
}

/* ------------------------------------------------------------------
   8. THE FIVE STEPS
   The numeral leads on the first four, because the only thing a reader
   needs from this section before reading it is that it is an order. The
   fifth step's own title says "Step 5", so it takes the full width under
   the picture with no numeral: a 5 beside "Step 5" says it twice.
   ------------------------------------------------------------------ */
.fys-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-top: 1px solid var(--fnd-rule);
}
@media (min-width: 700px)  { .fys-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .fys-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fys-step { padding: var(--fnd-s5) 0; border-bottom: 1px solid var(--fnd-rule); }
@media (min-width: 700px) {
  .fys-step { padding-right: var(--fnd-s5); }
  .fys-step:nth-child(2n) { padding-left: var(--fnd-s5); border-left: 1px solid var(--fnd-rule); }
}
@media (min-width: 1000px) {
  .fys-step { padding-left: var(--fnd-s5); border-left: 1px solid var(--fnd-rule); }
  .fys-step:nth-child(2n) { padding-left: var(--fnd-s5); }
  .fys-step:first-child { padding-left: 0; border-left: 0; }
}
.fys-step__n {
  display: block;
  font-family: var(--fnd-display-font); font-weight: 800;
  font-size: 34px; line-height: 1; letter-spacing: -.04em;
  color: var(--fnd-accent-deep);
  margin-bottom: var(--fnd-s3);
  font-variant-numeric: tabular-nums;
}
/* Also `.fnd-card-t`; only the margin under it is this page's business. */
.fnd .fys-step__h { margin: 0 0 var(--fnd-s2); }
/* Also `.fnd-card-sub`. */
.fnd .fys-step .fnd-card-sub { margin-top: var(--fnd-s2); }
.fys-step .fnd-card-sub strong { color: var(--fnd-text); font-weight: 600; }

/* The Collab Board picture sits between the numbered grid and the fifth
   step, where the old page put it. A screenshot gets a hairline and the
   shared radius so it reads as a framed exhibit, not a stray image; the
   frame fixes nothing about the picture itself. */
.fys-how__figure { margin: var(--fnd-s7) 0 0; }
.fys-how__figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--fnd-rule);
  border-radius: var(--fnd-r);
  background: var(--fnd-card);
}
.fys-how__figure figcaption {
  margin-top: var(--fnd-s3);
  font-size: var(--fnd-t-meta);
  color: var(--fnd-text-faint);
  line-height: 1.55;
}

/* The fifth step closes the section full width, in the same hairline
   language as the grid above it, at a reading measure. It is the payoff
   sentence of the whole section; the emphasis inside it is carried by the
   copy's own <strong>, not by a tinted box. */
.fys-step5 {
  margin-top: var(--fnd-s7);
  padding: var(--fnd-s5) 0;
  border-top: 1px solid var(--fnd-rule);
  border-bottom: 1px solid var(--fnd-rule);
}
.fnd .fys-step5__h { margin: 0 0 var(--fnd-s2); }
.fnd .fys-step5 .fnd-card-sub { margin-top: var(--fnd-s2); max-width: 78ch; }
.fys-step5 .fnd-card-sub strong { color: var(--fnd-text); font-weight: 600; }

/* ------------------------------------------------------------------
   9. THE COMPARISON TABLE
   The component does the work. The only page-level jobs are the winner
   tick's weight and the rival columns' colour: the component greys column
   two because it was written for one rival beside us, and this table has
   THREE, so out of the box "Never" under Sub4Sub was grey and the identical
   "Never" under Buying Subscribers was 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. */
.fys-compare .fnd-tbl .fnd-win { font-weight: 700; }
.fys-compare .fnd-tbl tbody td:not(:last-child) { color: var(--fnd-text-faint); }
@media (max-width: 639px) {
  /* On the phone the winning column loses its background and needs its ink
     back to carry the row. */
  .fys-compare .fnd-tbl tbody td:last-child { color: var(--fnd-text); }
}

/* ------------------------------------------------------------------
   10. 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 makes the strongest one borrow the weakest one's
   doubt. This section also carries a lede the watch-hours band did not
   have; it sits under the heading at the lede's own measure, then the grid
   breaks below it.
   ------------------------------------------------------------------ */
.fnd .fys-numbers__h { max-width: 28ch; margin: var(--fnd-s3) 0 var(--fnd-s3); }
.fys-numbers__lede { margin-bottom: var(--fnd-s7); }
.fys-numbers__grid { display: grid; grid-template-columns: 1fr; gap: var(--fnd-s7); }
@media (min-width: 860px) {
  .fys-numbers__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--fnd-s8); align-items: start; }
}
.fys-numbers__side { display: grid; gap: var(--fnd-s5); }
.fys-numbers__item {
  padding-top: var(--fnd-s4);
  border-top: 1px solid var(--fnd-on-ink-rule);
}
.fys-numbers__item strong {
  display: block;
  font-family: var(--fnd-display-font); font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1; letter-spacing: -.03em;
  color: var(--fnd-on-ink); font-variant-numeric: tabular-nums;
}
.fys-numbers__item span {
  display: block; margin-top: 7px;
  font-size: var(--fnd-t-meta); color: var(--fnd-on-ink-faint);
}
.fys-numbers__side .fnd-note { margin-top: 0; max-width: 46ch; }

/* ------------------------------------------------------------------
   11. 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: there, opening an answer grew one column and left a hole
   beside it.
   ------------------------------------------------------------------ */
.fys-qa__in { display: grid; grid-template-columns: 1fr; gap: var(--fnd-s6); }
@media (min-width: 900px) {
  .fys-qa__in { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--fnd-s8); align-items: start; }
  .fys-qa__side { position: sticky; top: var(--fnd-s7); }
}
.fys-qa__side .fnd-chip { margin-bottom: var(--fnd-s3); }
.fnd .fys-qa__side .fnd-h2 { max-width: 18ch; }
.fys-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. */
.fys-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. */
.fys-qa__body { overflow: hidden; transition: height 260ms cubic-bezier(.22,1,.36,1); }
.fys-qa__body p { margin: -4px 0 26px; }

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

/* ------------------------------------------------------------------
   13. THE PAID ROUTE
   ------------------------------------------------------------------ */
.fys-paid__body {
  display: grid; grid-template-columns: 1fr; gap: var(--fnd-s6);
  padding: var(--fnd-s6);
}
@media (min-width: 768px) {
  .fys-paid__body { grid-template-columns: minmax(0, 1fr) auto; gap: var(--fnd-s8); align-items: center; padding: var(--fnd-s7); }
}
.fys-paid__copy .fnd-chip { margin-bottom: var(--fnd-s3); }
.fnd .fys-paid__copy .fnd-h2 { max-width: 22ch; }
.fys-paid__copy .fnd-lede { margin-bottom: 0; }
.fys-paid__act { display: flex; flex-direction: column; align-items: flex-start; gap: var(--fnd-s3); }
@media (min-width: 768px) { .fys-paid__act { align-items: center; } }
.fys-paid__price {
  margin: 0;
  font-size: var(--fnd-t-meta); color: var(--fnd-text-faint);
}
.fys-paid__price strong {
  font-family: var(--fnd-display-font); font-weight: 800;
  font-size: 32px; letter-spacing: -.03em; color: var(--fnd-text);
  margin-left: 4px;
}

/* ------------------------------------------------------------------
   THE PINNED BAR
   Same id, classes and scroll script as the old page so the two versions
   are measured on the same ruler. Phones only: on desktop the hero button
   is still on screen for most of the fold and a fixed bar would eat the
   page.
   ------------------------------------------------------------------ */
.fys-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(22, 20, 26, .94);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .12);
  transform: translateY(110%);
  transition: transform 240ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.fys-sticky-cta--visible { transform: translateY(0); pointer-events: auto; }
.fys-sticky-cta__link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 54px; padding: 8px 20px;
  border-radius: 999px; background: #fff; color: var(--fnd-ink);
  font-family: var(--fnd-display-font); font-weight: 700; font-size: 16px;
  text-decoration: none; text-align: center;
}
/* The Google mark sits beside the label, not above the two-line stack, so
   the inline-flex default of .fnd-btn cannot be borrowed here. */
.fys-sticky-cta__link svg { display: none; }
/* The sub-line is `.fnd-microlabel`; only its gap is this page's business. */
.fys-sticky-cta__link .fnd-microlabel { margin-top: 2px; }
@media (min-width: 900px) { .fys-sticky-cta { display: none; } }

/* ------------------------------------------------------------------
   14. THE CLOSE
   Two groups, the same shape 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 between them goes a real break.
   ------------------------------------------------------------------ */
.fnd .fys-close h2 { max-width: 22ch; }
.fnd .fys-close p { margin-bottom: 0; }
.fnd .fys-close .fnd-closer-note { margin-top: var(--fnd-s3); }
.fys-close .fnd-ink-in > p:first-of-type { margin-top: var(--fnd-s3); }
.fys-close .fnd-btn { margin-top: var(--fnd-s7); }