/* ==========================================================================
   Free YouTube Subscribers Landing Page — /free-youtube-subscribers
   Public-facing SEO page targeting "free youtube subscribers" keyword.
   Follows agency-landing.css / white-label-landing.css patterns.
   Uses shared component library classes (buttons, stats, faq-accordion).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO SECTION
   -------------------------------------------------------------------------- */
.fys-hero {
    padding: var(--space-16) 0 var(--space-24);
    text-align: center;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    position: relative;
    overflow: hidden;
}

.fys-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        linear-gradient(var(--color-gray-200) 1px, transparent 1px),
        linear-gradient(to right, var(--color-gray-200) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.3;
    z-index: 1;
}

.fys-hero .container {
    padding-top: 0;
    padding-bottom: 0;
}

/* Breadcrumb — uses shared .breadcrumb component (breadcrumbs.css) */
.fys-hero__breadcrumb {
    position: relative;
    z-index: 2;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.fys-hero__content {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.fys-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary);
    border: 1px solid rgba(var(--color-primary-rgb), 0.15);
    margin-bottom: var(--space-6);
}

.fys-hero__title {
    font-size: clamp(2.75rem, 7vw, 4.25rem);
    font-weight: 800;
    color: var(--color-gray-900);
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin: 0 0 var(--space-6);
}

.fys-hero__title .highlight {
    color: var(--color-primary);
}

.fys-hero__subtitle {
    font-size: var(--font-size-xl);
    color: var(--color-gray-700);
    line-height: 1.7;
    max-width: 720px;
    margin: 0 auto var(--space-8);
}

.fys-hero__cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.fys-hero__cta {
    font-size: var(--font-size-lg);
    padding: var(--space-4) var(--space-10);
    min-width: 300px;
}

.fys-hero__trust-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    margin: 0;
}

.fys-hero__trust-line span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.fys-hero__trust-line i {
    color: var(--color-success);
    font-size: var(--font-size-xs);
}

/* --------------------------------------------------------------------------
   2. TRUST BAR
   -------------------------------------------------------------------------- */
.fys-trust-bar {
    background: var(--color-gray-900);
    padding: var(--space-5) 0;
}

.fys-trust-bar__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    text-align: center;
}

.fys-trust-bar__item strong {
    display: block;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    line-height: 1;
}

.fys-trust-bar__item span {
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
}

/* --------------------------------------------------------------------------
   2b. AI SUMMARY PARAGRAPH
   -------------------------------------------------------------------------- */
.fys-summary {
    background: var(--color-white);
    padding: var(--space-8) 0 0;
}

.fys-summary__content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-10);
}

.fys-summary__heading {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin: 0 0 var(--space-3);
}

.fys-summary__text {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: var(--line-height-loose);
    margin: 0;
}

.fys-summary__updated {
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
    margin: var(--space-3) 0 0;
}

/* --------------------------------------------------------------------------
   3. HOW IT WORKS DIAGRAM
   -------------------------------------------------------------------------- */
.fys-diagram {
    background: var(--color-white);
    padding-top: var(--space-8);
}

.fys-diagram__figure {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.fys-diagram__figure img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

.fys-diagram__figure figcaption {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   4. WHAT ARE FREE YOUTUBE SUBSCRIBERS (educational)
   -------------------------------------------------------------------------- */
.fys-what {
    background: var(--color-white);
}

.fys-what__content {
    max-width: 750px;
    margin: 0 auto;
}

.fys-what__content p {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: var(--line-height-loose);
    margin-bottom: var(--space-4);
}

.fys-what__content p:last-child {
    margin-bottom: 0;
}

.fys-what__content a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: var(--font-weight-medium);
}

.fys-what__content a:hover {
    color: var(--color-primary-dark);
}

/* --------------------------------------------------------------------------
   5. DANGERS — Value Prop Cards (matches agency-why pattern)
   -------------------------------------------------------------------------- */
.fys-dangers {
    background: var(--color-gray-50);
}

.fys-dangers__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    max-width: 1000px;
    margin: 0 auto;
}

.fys-dangers__card {
    text-align: center;
    padding: var(--space-8) var(--space-6);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    transition: all 0.2s ease;
}

.fys-dangers__card:hover {
    border-color: var(--color-danger);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.fys-dangers__card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-4);
}

.fys-dangers__card-icon--red {
    background: rgba(var(--color-danger-rgb, 239, 68, 68), 0.08);
    color: var(--color-danger);
}

.fys-dangers__card-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin: 0 0 var(--space-3);
}

.fys-dangers__card-text {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: var(--line-height-loose);
    margin: 0;
}

/* --------------------------------------------------------------------------
   6. WHAT YOU ACTUALLY GET — Value Prop Cards
   -------------------------------------------------------------------------- */
.fys-why-real {
    background: var(--color-white);
}

.fys-why-real__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    max-width: 1000px;
    margin: 0 auto;
}

.fys-why-real__card {
    text-align: center;
    padding: var(--space-8) var(--space-6);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    transition: all 0.2s ease;
}

.fys-why-real__card:hover {
    border-color: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.fys-why-real__card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-4);
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary);
}

.fys-why-real__card-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin: 0 0 var(--space-3);
}

.fys-why-real__card-text {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: var(--line-height-loose);
    margin: 0;
}

/* --------------------------------------------------------------------------
   7. HOW IT WORKS — 4-Step Process (matches agency-how pattern)
   -------------------------------------------------------------------------- */
.fys-how {
    background: var(--color-gray-50);
}

.fys-how__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    max-width: 1100px;
    margin: 0 auto;
}

.fys-how__step {
    text-align: center;
    position: relative;
    padding: var(--space-8) var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    transition: all 0.2s ease;
}

.fys-how__step:hover {
    border-color: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.fys-how__step:not(:last-child)::after {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-300);
    font-size: var(--font-size-sm);
    z-index: 2;
}

.fys-how__step-number {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fys-how__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    background: rgba(var(--color-primary-rgb), 0.06);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-4);
}

.fys-how__step-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin: 0 0 var(--space-3);
}

.fys-how__step-text {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: var(--line-height-loose);
    margin: 0;
}

/* Figure below the step grid */
.fys-how__figure {
    max-width: 900px;
    margin: var(--space-12) auto 0;
    text-align: center;
}

.fys-how__figure img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-lg);
}

.fys-how__figure figcaption {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-top: var(--space-3);
}

/* Step 5 — Scale highlight card */
.fys-how__scale {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
    max-width: 800px;
    margin: var(--space-10) auto 0;
    padding: var(--space-6);
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-xl);
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.08);
}

.fys-how__scale-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
}

.fys-how__scale-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin: 0 0 var(--space-2);
}

.fys-how__scale-text {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: var(--line-height-loose);
    margin: 0;
}

.fys-how__scale-text a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: var(--font-weight-medium);
}

.fys-how__scale-text a:hover {
    color: var(--color-primary-dark);
}

/* --------------------------------------------------------------------------
   7. COMPARISON TABLE (matches agency-compare pattern)
   -------------------------------------------------------------------------- */
.fys-compare {
    background: var(--color-white);
}

.fys-compare__table-wrapper {
    max-width: 950px;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.fys-compare__table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.fys-compare__table thead th {
    padding: var(--space-4) var(--space-5);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
    border-bottom: 2px solid var(--color-gray-200);
    font-size: var(--font-size-sm);
}

.fys-compare__table thead .fys-compare__th-brand {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

.fys-compare__table tbody td,
.fys-compare__table tbody th[scope="row"] {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-gray-100);
    color: var(--color-gray-700);
    vertical-align: middle;
}

.fys-compare__table tbody tr:last-child td,
.fys-compare__table tbody tr:last-child th[scope="row"] {
    border-bottom: none;
}

.fys-compare__table tbody th[scope="row"] {
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
    text-align: left;
}

.fys-compare__table tbody .fys-compare__highlight {
    color: var(--color-success);
    font-weight: var(--font-weight-semibold);
}

.fys-compare__highlight i {
    color: var(--color-success);
    margin-right: var(--space-1);
}

/* Alternative columns — muted */
.fys-compare__table tbody td:nth-child(3),
.fys-compare__table tbody td:nth-child(4),
.fys-compare__table tbody td:last-child {
    color: var(--color-gray-500);
}

.fys-compare__table tbody td:nth-child(3) .fa-times-circle,
.fys-compare__table tbody td:nth-child(4) .fa-times-circle,
.fys-compare__table tbody td:last-child .fa-times-circle {
    color: var(--color-gray-400);
    margin-right: var(--space-1);
}

.fys-compare__table tbody td:nth-child(3) .fa-minus-circle,
.fys-compare__table tbody td:nth-child(4) .fa-minus-circle,
.fys-compare__table tbody td:last-child .fa-minus-circle {
    color: var(--color-warning);
    margin-right: var(--space-1);
}

.fys-compare__table tbody td:nth-child(3) .fa-check-circle,
.fys-compare__table tbody td:nth-child(4) .fa-check-circle,
.fys-compare__table tbody td:last-child .fa-check-circle {
    color: var(--color-success);
    margin-right: var(--space-1);
}

/* --------------------------------------------------------------------------
   8. STATS
   -------------------------------------------------------------------------- */
.fys-stats {
    text-align: center;
    background: var(--color-white);
}

.fys-stats__grid {
    justify-content: center;
    max-width: 700px;
    margin: 0 auto;
}

.fys-stats__note {
    margin-top: var(--space-6);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   9. FAQ — uses shared faq-accordion.css (faq-item, faq-icon, faq-content)
   No page-specific overrides needed.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   10. INTERNAL LINKS (matches agency-links pattern)
   -------------------------------------------------------------------------- */
.fys-links {
    background: var(--color-gray-50);
}

.fys-links__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    max-width: 1000px;
    margin: 0 auto;
}

.fys-links__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: all 0.2s ease;
}

.fys-links__item:hover {
    border-color: var(--color-primary-light);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.fys-links__item i {
    color: var(--color-primary);
    font-size: var(--font-size-base);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   11. FINAL CTA — sub-text
   -------------------------------------------------------------------------- */
.fys-final-cta__sub {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin: 0;
}

/* --------------------------------------------------------------------------
   12. STICKY MOBILE CTA BAR
   -------------------------------------------------------------------------- */
.fys-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    transform: translateY(100%);
    transition: transform 200ms ease;
    pointer-events: none;
}

.fys-sticky-cta--visible {
    transform: translateY(0);
    pointer-events: auto;
}

.fys-sticky-cta__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--font-size-base);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
}

.fys-sticky-cta__link:hover {
    background: var(--color-primary-dark);
    color: #fff;
}

.fys-sticky-cta__sub {
    font-size: var(--font-size-sm);
    opacity: 0.85;
    font-weight: 400;
}

/* Hide sticky bar on desktop */
@media (min-width: 768px) {
    .fys-sticky-cta {
        display: none;
    }
}

/* Small mobile — hide sub text */
@media (max-width: 420px) {
    .fys-sticky-cta__sub {
        display: none;
    }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet */
@media (max-width: 1023px) {
    .fys-how__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }

    .fys-how__step:not(:last-child)::after {
        display: none;
    }

    .fys-links__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fys-why-real__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fys-why-real__card:last-child {
        grid-column: 1 / -1;
        max-width: 500px;
        margin: 0 auto;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .fys-hero {
        padding: calc(72px + var(--space-6)) 0 var(--space-12);
    }

    .fys-hero__subtitle {
        font-size: var(--font-size-lg);
    }

    .fys-hero__cta {
        width: 100%;
        min-width: unset;
    }

    .fys-hero__trust-line {
        flex-direction: column;
        gap: var(--space-2);
    }

    .fys-trust-bar__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .fys-trust-bar__item strong {
        font-size: var(--font-size-2xl);
    }

    .fys-dangers__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .fys-dangers__card {
        padding: var(--space-6) var(--space-5);
    }

    .fys-how__grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .fys-how__step:not(:last-child)::after {
        display: none;
    }

    .fys-how__step {
        padding: var(--space-6) var(--space-5);
    }

    .fys-how__scale {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-4);
    }

    .fys-why-real__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .fys-why-real__card:last-child {
        max-width: unset;
    }

    .fys-why-real__card {
        padding: var(--space-6) var(--space-5);
    }

    .fys-compare__table {
        font-size: var(--font-size-xs);
    }

    .fys-compare__table thead th,
    .fys-compare__table tbody td,
    .fys-compare__table tbody th[scope="row"] {
        padding: var(--space-3) var(--space-3);
    }

    .fys-links__grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   DEFINITION LIST — AEO/GEO markup for "what is X" queries
   -------------------------------------------------------------------------- */
.fys-definitions {
    margin-top: var(--space-8);
    padding: var(--space-6);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
}

.fys-definitions dt {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--font-size-base);
    color: var(--color-gray-900);
    margin-top: var(--space-4);
}

.fys-definitions dt:first-child {
    margin-top: 0;
}

.fys-definitions dd {
    margin: var(--space-1) 0 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
}

@media (max-width: 767px) {
    .fys-definitions {
        padding: var(--space-4);
    }
}

/* Small mobile */
@media (max-width: 374px) {
    .fys-trust-bar__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==================================================================
   MOBILE APP-GRADE REBUILD (<=767px) — /design pass 2026-05-19
   Scoped to .fys-page ONLY. Desktop and every other page that shares
   landing-shared.css are untouched (no shared-file edits). Ports the
   founder-accepted homepage mobile playbook to this higher-traffic
   SEO landing page: left-align the whole page (the centered marketing
   layout was the #1 "web page, not an app" tell — the only already-
   native sections were the left-aligned ones), tighten section
   rhythm, lightweight uppercase eyebrows, two-tone hero breaking at
   the line, balanced 2x2 hairline trust panel (matches the sibling
   homepage), native sticky-first-column comparison table with a
   visible scroll affordance (was clipped to 3 of 5 columns on mobile
   with no swipe cue), and a fix for the sticky-CTA / language-switcher
   collision. CSS-only: no DOM/copy/SEO/desktop change; the existing
   sticky-CTA JS behaviour is preserved.
   ================================================================== */
@keyframes fysFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 767px) {

  /* ---- P0 safety: never allow horizontal scroll; 16px page edges ---- */
  .fys-page { overflow-x: hidden; }
  .fys-page .container { padding-left: 16px; padding-right: 16px; }

  /* Tactile depress on every tap target (native feel) */
  .fys-page .button:active,
  .fys-page .fys-hero__cta:active,
  .fys-page .hero-cta-row__secondary:active,
  .fys-page .fys-links__item:active,
  .fys-page .fys-sticky-cta__link:active {
    transform: scale(0.985);
    transition: transform 80ms ease;
  }

  /* ---- Section rhythm: the single biggest length win ---- */
  .fys-page .home-section { padding: 30px 0; }
  .fys-page .section-header {
    text-align: left;
    max-width: none;
    margin: 0 0 18px;
  }
  /* eyebrow pill -> lightweight uppercase label */
  .fys-page .section-header__tag,
  .fys-page .fys-hero__tag {
    display: inline-flex;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 8px;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .fys-page .section-header__title {
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
  }
  .fys-page .section-header__subtitle {
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    max-width: none;
  }

  /* ---- Hero: app-grade left-aligned statement (was centered, the
     clamp() min was ~44px so the H1 ate the whole first viewport) ---- */
  .fys-page .fys-hero {
    padding: 22px 0 28px;
    text-align: left;
  }
  .fys-page .fys-hero::before { background-size: 32px 32px; opacity: 0.22; }
  .fys-page .fys-hero__breadcrumb {
    justify-content: flex-start;
    margin-bottom: 12px;
  }
  .fys-page .fys-hero__content { max-width: none; }
  .fys-page .fys-hero__title {
    font-size: 1.9rem;
    line-height: 1.14;
    letter-spacing: -0.03em;
    margin: 0 0 14px;
  }
  /* two-tone headline must switch colour at a line boundary */
  .fys-page .fys-hero__title .highlight {
    display: block;
    margin-top: 2px;
  }
  .fys-page .fys-hero__subtitle {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 22px;
    max-width: none;
    color: var(--color-slate-600);
  }
  .fys-page .fys-hero__cta-group { align-items: stretch; gap: 12px; }
  .fys-page .hero-cta-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .fys-page .fys-hero__cta,
  .fys-page .hero-cta-row__secondary {
    width: 100%;
    min-width: 0;
    font-size: 16px;
    padding: 16px 20px;
    box-sizing: border-box;
  }
  /* Pin the solid primary CTA across every state — btn is an <a>, so
     the global a:hover{color:primary-dark} in typography.css would
     repaint the white label indigo-on-indigo on hover. */
  .fys-page .fys-hero__cta,
  .fys-page .fys-hero__cta:link,
  .fys-page .fys-hero__cta:visited,
  .fys-page .fys-hero__cta:hover,
  .fys-page .fys-hero__cta:focus,
  .fys-page .fys-hero__cta:focus-visible,
  .fys-page .fys-hero__cta:active,
  .fys-page .final-cta__buttons .button--primary,
  .fys-page .final-cta__buttons .button--primary:link,
  .fys-page .final-cta__buttons .button--primary:visited,
  .fys-page .final-cta__buttons .button--primary:hover,
  .fys-page .final-cta__buttons .button--primary:focus,
  .fys-page .final-cta__buttons .button--primary:focus-visible,
  .fys-page .final-cta__buttons .button--primary:active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
  }
  .fys-page .fys-hero__cta:hover,
  .fys-page .fys-hero__cta:focus-visible,
  .fys-page .final-cta__buttons .button--primary:hover,
  .fys-page .final-cta__buttons .button--primary:focus-visible {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
  }
  .fys-page .fys-hero__cta i,
  .fys-page .final-cta__buttons .button--primary i { color: inherit; }
  /* Outline secondary: pin too (it is an <a>) */
  .fys-page .hero-cta-row__secondary,
  .fys-page .hero-cta-row__secondary:link,
  .fys-page .hero-cta-row__secondary:visited {
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
  }
  .fys-page .hero-cta-row__secondary:hover,
  .fys-page .hero-cta-row__secondary:focus-visible {
    background: var(--color-primary);
    color: var(--color-white);
  }
  .fys-page .fys-hero__trust-line {
    align-items: flex-start;
    text-align: left;
    margin-top: 14px;
  }

  /* ---- Trust bar: balanced 2x2 hairline proof panel (matches the
     sibling homepage). First stat is the hero number. ---- */
  .fys-page .fys-trust-bar { padding: 24px 0; }
  .fys-page .fys-trust-bar__grid { gap: 0; }
  .fys-page .fys-trust-bar__item {
    padding: 16px 8px;
  }
  .fys-page .fys-trust-bar__item:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
  .fys-page .fys-trust-bar__item:nth-child(1),
  .fys-page .fys-trust-bar__item:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .fys-page .fys-trust-bar__item strong {
    font-size: 1.6rem;
    margin-bottom: 6px;
  }
  .fys-page .fys-trust-bar__item:first-child strong { font-size: 1.95rem; }
  .fys-page .fys-trust-bar__item span {
    font-size: 10px;
    letter-spacing: 0.06em;
    line-height: 1.3;
  }

  /* ---- Summary card: left-align (was centered body text — an AI/web
     tell + a readability cost on a long paragraph) ---- */
  .fys-page .fys-summary { padding-top: 30px; }
  .fys-page .fys-summary__content {
    text-align: left;
    max-width: none;
    padding: 18px 16px;
  }
  .fys-page .fys-summary__heading { font-size: 1.15rem; }
  .fys-page .fys-summary__text { font-size: 14px; line-height: 1.6; }

  /* ---- Educational copy + definitions: left, tightened ---- */
  .fys-page .fys-what__content p { font-size: 14px; line-height: 1.65; }
  .fys-page .fys-definitions { padding: 16px; }

  /* ---- Card families: left-align, tighten, unified soft two-layer
     shadow (kills the centered-card web tell across the whole page) ---- */
  .fys-page .fys-dangers__grid,
  .fys-page .fys-why-real__grid { gap: 12px; }
  .fys-page .fys-dangers__card,
  .fys-page .fys-why-real__card,
  .fys-page .fys-how__step {
    text-align: left;
    padding: 18px 16px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08),
                0 1px 2px rgba(15, 23, 42, 0.04);
  }
  .fys-page .fys-dangers__card-icon,
  .fys-page .fys-why-real__card-icon,
  .fys-page .fys-how__icon {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    margin-bottom: 14px;
    box-shadow: none;
  }
  .fys-page .fys-dangers__card-title,
  .fys-page .fys-why-real__card-title,
  .fys-page .fys-how__step-title { font-size: 1.05rem; }
  .fys-page .fys-dangers__card-text,
  .fys-page .fys-why-real__card-text,
  .fys-page .fys-how__step-text { font-size: 14px; line-height: 1.55; }

  /* Step number: floating top-CENTER badge -> clean top-left marker */
  .fys-page .fys-how__step-number {
    left: 16px;
    transform: none;
  }

  /* Step 5 scale card: left-align (mobile base forced it centered) */
  .fys-page .fys-how__scale {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
    padding: 18px 16px;
  }
  .fys-page .fys-how__scale-title { font-size: 1.05rem; }
  .fys-page .fys-how__scale-text { font-size: 14px; line-height: 1.6; }
  .fys-page .fys-how__figure { margin-top: 22px; }
  .fys-page .fys-how__figure figcaption,
  .fys-page .fys-diagram__figure figcaption { font-size: 13px; }

  /* ---- Comparison table: was a 650px table in an auto-scroll wrapper
     with NO scroll cue, so mobile users saw 3 of 5 columns clipped and
     read it as broken. Native fix (no DOM change, SEO preserved):
     freeze the row-label column, anchor the CollabPals column, and
     surface a visible indigo scrollbar so "swipe to compare" is
     obvious. ---- */
  .fys-page .fys-compare__table-wrapper {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-gray-100);
    padding-bottom: 6px;
  }
  .fys-page .fys-compare__table-wrapper::-webkit-scrollbar { height: 5px; }
  .fys-page .fys-compare__table-wrapper::-webkit-scrollbar-track {
    background: var(--color-gray-100);
    border-radius: 999px;
  }
  .fys-page .fys-compare__table-wrapper::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 999px;
  }
  .fys-page .fys-compare__table { min-width: 560px; }
  .fys-page .fys-compare__table thead th:first-child,
  .fys-page .fys-compare__table tbody th[scope="row"] {
    position: sticky;
    left: 0;
    background: var(--color-white);
    z-index: 1;
    box-shadow: 1px 0 0 var(--color-gray-200);
  }
  .fys-page .fys-compare__table thead .fys-compare__th-brand {
    background: rgba(var(--color-primary-rgb), 0.05);
  }

  /* ---- Stats section: left-align header/note (rows are the shared
     .stat component and already read fine) ---- */
  .fys-page .fys-stats { text-align: left; }
  .fys-page .fys-stats__grid { justify-content: flex-start; }
  .fys-page .fys-stats__note {
    text-align: left;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    font-size: 13px;
  }

  /* ---- Internal links: tighten to a clean native row list ---- */
  .fys-page .fys-links__grid { gap: 10px; }
  .fys-page .fys-links__item {
    padding: 14px 16px;
    border-radius: 14px;
  }

  /* ---- Paid upsell (velvet-rope to paid — conversion priority #1):
     keep the dark hierarchy moment, left-align the copy ---- */
  .fys-page .paid-upsell__inner,
  .fys-page .paid-upsell__content { text-align: left; }
  .fys-page .paid-upsell__cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* ---- Final CTA: tighten + clear the sticky bar ---- */
  .fys-page .final-cta { padding: 36px 0 104px; }
  .fys-page .final-cta__title { font-size: 1.75rem; }
  .fys-page .final-cta__subtitle { font-size: 15px; line-height: 1.6; }

  /* ---- Sticky CTA polish: safe-area inset + crisper lift shadow ---- */
  .fys-page .fys-sticky-cta__link {
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.12);
  }

  /* ---- Crisper, less laggy reveal on mobile ---- */
  .fys-page .reveal { transition-duration: 0.45s; }

  /* ---- Hero entrance stagger (reduced-motion handled below) ---- */
  .fys-page .fys-hero__content { animation: fysFadeUp 440ms cubic-bezier(0.22, 1, 0.36, 1) both; }
}

/* The global floating language switcher (fixed bottom-right, z 5000)
   overlapped the sticky CTA. Lift it ONLY while the JS-toggled bar is
   actually visible, so the first 200px of scroll (bar hidden) is
   unaffected. :has() is baseline-supported; if unsupported the rule is
   simply ignored (no regression vs the pre-existing overlap). */
@media (max-width: 767px) {
  body.fys-page:has(.fys-sticky-cta--visible) .lang-switcher { bottom: 84px; }
}

/* ==================================================================
   ELEVATION PASS (<=767px) — /design 2026-05-19 (pass 2)
   Builds ON the 2026-05-19 mobile rebuild above; supersedes ONLY the
   comparison-table rules, lightens the secondary hero CTA, and
   tightens the airy dead-bands. Hero, trust panel, card families,
   sticky-CTA and the language-switcher fix from pass 1 are untouched.
   Scoped to .fys-page; no desktop, shared-file, DOM or copy change.
   ================================================================== */
@media (max-width: 767px) {

  /* ---- 1. COMPARISON TABLE v2 — NO-SWIPE STACKED MATRIX ----
     The pass-1 sticky-column + horizontal-scroll table still clipped
     two of five columns on first paint and read as broken. This keeps
     the full <table> in the DOM (SEO intact, zero markup change) but
     renders it as a single vertical stack with NO horizontal scroll:
       - <thead> -> a colour-keyed 4-up legend pinned at the top of the
         stack (a global `html { overflow-x: hidden }` rule makes true
         position:sticky impossible from page CSS without touching every
         page, so the legend is a fixed-order key instead). CollabPals
         is the indigo chip; the order never changes card to card.
       - each <tbody> row -> a card: attribute label on top, then the
         four values in a fixed 4-up grid in the same order as the
         legend. CollabPals is the indigo-keyed, tinted winner column
         down all seven cards, so the conversion-critical column needs
         no legend lookup at all (green tick + tint identify it).
     Google-Translate-safe: every label is real DOM text (no ::before
     content strings). */

  /* Kill the pass-1 scroll wrapper + indigo scrollbar — no swipe */
  .fys-page .fys-compare__table-wrapper {
    overflow: visible;
    padding-bottom: 0;
    scrollbar-width: auto;
  }
  .fys-page .fys-compare__table-wrapper::-webkit-scrollbar { height: 0; }

  .fys-page .fys-compare__table {
    display: block;
    width: 100%;
    min-width: 0;
    font-size: 12px;
  }
  .fys-page .fys-compare__table thead,
  .fys-page .fys-compare__table tbody { display: block; }

  /* thead -> colour-keyed legend (fixed-order column key atop the stack) */
  .fys-page .fys-compare__table thead tr {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    background: var(--color-white);
    padding: 10px 14px;
    margin: 0 0 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08),
                0 1px 2px rgba(15, 23, 42, 0.04);
    border: 1px solid var(--color-gray-100);
    border-radius: 14px;
  }
  .fys-page .fys-compare__table thead th:first-child { display: none; }
  .fys-page .fys-compare__table thead th {
    position: static;
    padding: 7px 4px;
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    color: var(--color-gray-600);
    background: var(--color-gray-100);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fys-page .fys-compare__table thead .fys-compare__th-brand {
    color: var(--color-white);
    background: var(--color-primary);
  }

  /* each tbody row -> stacked attribute card */
  .fys-page .fys-compare__table tbody tr {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 6px;
    row-gap: 0;
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08),
                0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 14px;
    margin-bottom: 10px;
  }
  .fys-page .fys-compare__table tbody tr:last-child { margin-bottom: 0; }

  /* attribute label = card title, spans the full 4-up width */
  .fys-page .fys-compare__table tbody th[scope="row"] {
    position: static;
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    padding: 0 0 10px;
    margin: 0;
    border: none;
    box-shadow: none;
    background: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-gray-900);
    text-align: left;
  }

  /* the four value cells: equal 4-up, aligned under the legend */
  .fys-page .fys-compare__table tbody td {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 3px;
    padding: 9px 4px;
    min-height: 56px;
    border: none;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.25;
    background: var(--color-gray-50);
  }
  .fys-page .fys-compare__table tbody td i {
    margin: 0;
    font-size: 15px;
  }
  /* CollabPals = the winner column: indigo-keyed tint, kept green tick */
  .fys-page .fys-compare__table tbody td.fys-compare__highlight {
    background: rgba(var(--color-primary-rgb), 0.08);
    font-weight: 700;
  }

  /* ---- 2. Secondary hero CTA: demote so the filled primary owns the
     fold. It still links to the paid path (kept fully tappable) but no
     longer visually rivals "Connect YouTube Channel (Free)". ---- */
  .fys-page .hero-cta-row__secondary,
  .fys-page .hero-cta-row__secondary:link,
  .fys-page .hero-cta-row__secondary:visited {
    background: transparent;
    color: var(--color-slate-600);
    border: 1px solid var(--color-gray-200);
    font-size: 15px;
    font-weight: 600;
    padding: 13px 20px;
  }
  .fys-page .hero-cta-row__secondary:hover,
  .fys-page .hero-cta-row__secondary:focus-visible {
    background: var(--color-gray-50);
    color: var(--color-primary);
    border-color: var(--color-gray-300);
  }
  .fys-page .hero-cta-row__secondary i { color: var(--color-primary); }

  /* ---- 3. Tighter native section rhythm: pass-1 left 30/40px
     dead-bands between short sections (read as an unfinished web page
     on a phone). Pull the cadence to an app-grade ~24px. ---- */
  .fys-page .home-section { padding: 24px 0; }
  .fys-page .section-header { margin-bottom: 14px; }
  .fys-page .paid-upsell { padding: 26px 0; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .fys-page .fys-hero__content { animation: none; }
  .fys-page .reveal { transition-duration: 0.2s; }
}