/* ================================================================== /free-youtube-watch-hours, rebuilt on the foundation. Loaded ONLY when the 'free-youtube-watch-hours' 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. ================================================================== */ /* ------------------------------------------------------------------ 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 four times over. ------------------------------------------------------------------ */ /* THE HERO IS THE SHARED LANDING KIT since 2026-08-09. The two-groups reasoning (what the page is, tight; what to do, tight; a real break between), the 56ch sub measure, the phone-size group break and the quiet dot line all moved to foundation-devices.css when the devices gate caught five sibling pages carrying private copies of these exact rules: .fnd-lp-hero, .fnd-lp-title, .fnd-lp-sub, .fnd-lp-go, .fnd-dotline. Nothing here overrides them; this page IS the shared recipe. */ /* 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. */ .fywh-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 have left every link in this paragraph the same colour as the sentence around it. (0,3,2) wins on its own terms. */ .fnd .fnd-summary-a a:not(.fnd-btn), .fnd .fywh-paid__copy .fnd-lede a:not(.fnd-btn), .fnd .fywh-close__alt 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 .fywh-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. ------------------------------------------------------------------ */ .fywh-head { margin-bottom: var(--fnd-s6); } .fywh-head .fnd-chip { margin-bottom: var(--fnd-s3); } .fnd .fywh-head .fnd-h2 { max-width: 26ch; } .fywh-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`. This page had re-declared it character for character, twice, under two names. */ .fywh-tile .fnd-card-body { padding: var(--fnd-s5); } /* The paragraph is `.fnd-card-sub`. It was declared here and AGAIN as `.fywh-step__p` sixty lines down, with the same four values under a second name, which is exactly the within-file duplicate the devices gate exists to catch. It caught it. */ .fnd .fywh-tile .fnd-card-sub { margin-top: var(--fnd-s2); } /* The warning set's accent rule and the ink card's paragraph colour are the shared .fnd-cards--flagged and .fnd-card--ink completions in foundation-devices.css since 2026-08-09. */ /* ------------------------------------------------------------------ 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) { .fywh-answers { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fywh-answers .fnd-ans:nth-child(4n+1) { padding-left: var(--fnd-s5); border-left: 1px solid var(--fnd-rule); } .fywh-answers .fnd-ans:nth-child(3n+1) { padding-left: 0; border-left: 0; } } /* .fnd-ans-a is a in the shared recipe and an

here, so the heading reset has to be undone rather than inherited. */ .fnd .fywh-answers h3.fnd-ans-a { margin-top: 0; } /* ------------------------------------------------------------------ 6. THE FOUR STEPS The numeral leads, because the only thing a reader needs from this section before reading it is that it is an order. ------------------------------------------------------------------ */ /* The numeral-led step grid is the shared .fnd-stepgrid / .fnd-stepcell / .fnd-stepnum since 2026-08-09; this page's rules were the original and moved verbatim. */ /* ------------------------------------------------------------------ 7. THE COMPARISON TABLE The component does the work. The only page-level job is the winner tick, which must not wrap away from its words, and the phone layout where the winning column loses its background and needs the tick to carry it. ------------------------------------------------------------------ */ .fywh-compare .fnd-tbl .fnd-win { font-weight: 700; } /* THE COMPONENT GREYS COLUMN TWO, because it was written for one rival beside us. This table has THREE, so out of the box "Violation" under Buying Hours was grey and the identical "Violation" under View Bots 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. */ .fywh-compare .fnd-tbl tbody td:not(:last-child) { color: var(--fnd-text-faint); } @media (max-width: 719px) { .fywh-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. ------------------------------------------------------------------ */ .fnd .fywh-numbers__h { max-width: 28ch; margin: var(--fnd-s3) 0 var(--fnd-s7); } .fywh-numbers__grid { display: grid; grid-template-columns: 1fr; gap: var(--fnd-s7); } @media (min-width: 860px) { .fywh-numbers__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--fnd-s8); align-items: start; } } /* The supporting figures are the shared .fnd-figside / .fnd-subfig since 2026-08-09. The grid that places the hero figure beside them stays this page's own, above. */ /* ------------------------------------------------------------------ 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: there, opening an answer grew one column and left a hole beside it. ------------------------------------------------------------------ */ .fywh-qa__in { display: grid; grid-template-columns: 1fr; gap: var(--fnd-s6); } @media (min-width: 900px) { .fywh-qa__in { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--fnd-s8); align-items: start; } .fywh-qa__side { position: sticky; top: var(--fnd-s7); } } .fywh-qa__side .fnd-chip { margin-bottom: var(--fnd-s3); } .fnd .fywh-qa__side .fnd-h2 { max-width: 18ch; } .fywh-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. */ .fywh-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. */ .fywh-qa__body { overflow: hidden; transition: height 260ms cubic-bezier(.22,1,.36,1); } .fywh-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. ------------------------------------------------------------------ */ .fywh-more__list { margin-top: var(--fnd-s5); } .fywh-more__list a { min-height: 56px; } @media (min-width: 1000px) { .fywh-more__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ------------------------------------------------------------------ 10b. THE PAID ROUTE ------------------------------------------------------------------ */ /* The offer panel is the shared .fnd-offer family since 2026-08-09. .fywh-paid__copy stays on the copy element only as the hook for the prose-link colour rules above. */ /* ------------------------------------------------------------------ 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. ------------------------------------------------------------------ */ /* The pinned bar is the shared .fnd-pinbar since 2026-08-09. The page keeps its id, its legacy class and this state class, because the scroll script shared with the OLD page toggles exactly this name so both versions are measured on the same ruler. */ .fywh-sticky-cta--visible { transform: translateY(0); pointer-events: auto; } /* ------------------------------------------------------------------ 11. THE CLOSE ------------------------------------------------------------------ */ /* SAME FAULT AS THE HERO, same fix. Measured, the five stacked elements sat 13, 14, 26 and 0 pixels apart: no grouping, so it read as a list rather than a closing argument. Now it is two groups. 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. This page had put a fifth element, a different offer, between the line and the button, so the last thing a reader met before the primary action was an alternative to it. That paragraph now sits after the note. */ .fnd .fywh-close h2 { max-width: 22ch; } .fnd .fywh-close p { margin-bottom: 0; } .fnd .fywh-close .fnd-closer-note { margin-top: var(--fnd-s3); } .fywh-close .fnd-ink-in > p:first-of-type { margin-top: var(--fnd-s3); } .fywh-close .fnd-btn { margin-top: var(--fnd-s7); } .fywh-close .fywh-close__alt { font-size: var(--fnd-t-meta); color: var(--fnd-on-ink-faint); max-width: 46ch; margin: var(--fnd-s6) auto 0; padding-top: var(--fnd-s5); border-top: 1px solid var(--fnd-on-ink-rule); } /* Matched to the specificity of the accent-deep rule above, which is (0,3,1). Written plainly it was (0,2,1) and lost, and the link rendered #443CC4 on the ink closer at 2.34:1. The fix for one over-specific base rule had quietly broken a second thing three hundred lines away, which is the argument for measuring the computed colour rather than reading the rule. */ .fnd .fywh-close .fywh-close__alt a:not(.fnd-btn) { color: #fff; }