/* /public/css/pages/audit-landing.css
   Layout for the public YouTube Channel Audit landing page
   (templates/landing/channel-audit.twig). Composes the shared kit:
   .night + .night-ring (components/night.css), .button (buttons.css),
   .card (cards.css), .section-header/.home-section/.final-cta
   (landing-shared.css). This file adds LAYOUT ONLY. */

/* ══ Hero — the cockpit's public twin ══════════════════════════════════ */
.al-hero {
    position: relative;
    padding: var(--space-16) 0 var(--space-20);
    text-align: center;
    overflow: hidden;
}

/* ── Depth layer: faint grid + a soft rising growth curve ─────────────── */
.al-hero__bg,
.al-final__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.al-hero__grid {
    position: absolute;
    inset: -1px;
    background-image:
        linear-gradient(rgba(148, 163, 220, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 220, 0.055) 1px, transparent 1px);
    background-size: 46px 46px;
    /* Fade the grid out toward the bottom so it never fights the content */
    -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 78%);
    mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 78%);
}

.al-hero__graph {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 62%;
    opacity: 0.9;
}

.al-hero__stage {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}

.al-hero .night__title {
    margin: var(--space-5) auto 0;
    max-width: 640px;
}

.al-hero__sub {
    max-width: 560px;
    margin: var(--space-4) auto 0;
}

.al-hero__visual {
    position: relative;
    margin-top: var(--space-8);
}

/* The signature visual: a live audit report window that fills in on load like
   the real audit finishing, then holds still. Framed as a floating product
   window with depth. Full internal styling under "Hero report window" below. */
.al-hero__window {
    position: relative;
    z-index: 1;
    max-width: 470px;
    margin: 0 auto;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--surface-night-raised);
    border: 1px solid rgba(165, 180, 252, 0.16);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 34px 80px rgba(4, 7, 18, 0.62);
}

/* Bigger, bolder hero headline (skysnail-level presence). The real 800
   ExtraBold face (fonts.css) is what gives this its weight. */
.al-hero__title {
    font-size: clamp(2.05rem, 5vw, 3.35rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.06;
}

/* Never leave a one-word orphan on a heading or subtitle (founder rule,
   2026-07-14). balance keeps headings visually even; pretty stops body
   widows/orphans. Applied to every display line on the page. */
.al-hero__title,
.section-header__title,
.final-cta__title,
.al-proof-card__title,
.al-deep__title,
.al-learn__title,
.al-step__title { text-wrap: balance; }
.al-hero__sub,
.section-header__subtitle,
.final-cta__subtitle,
.al-deep__lead,
.al-proof-card__text,
.al-step__text { text-wrap: pretty; }

/* Soft indigo bloom behind the window so it lifts off the night surface */
.al-hero__visual::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 46%;
    width: 108%;
    height: 88%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(99, 102, 241, 0.4), transparent 72%);
    filter: blur(28px);
    opacity: 0.7;
    pointer-events: none;
}

/* The growth curve draws itself once as part of the hero reveal */
.al-hero__graph-line {
    stroke-dasharray: 2700;
    stroke-dashoffset: 2700;
    animation: al-draw 1.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}
.al-hero__graph-fill {
    opacity: 0;
    animation: al-graph-fade 1s ease 1s forwards;
}
@keyframes al-draw { to { stroke-dashoffset: 0; } }
@keyframes al-graph-fade { to { opacity: 1; } }

/* Honesty cue under the demo ring: it is decoration, not the visitor's data */
.al-hero__example {
    margin: var(--space-3) 0 0;
    font-size: var(--font-size-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--night-text-dim);
    text-align: center;
}

.al-hero__go {
    max-width: 440px;
    margin: var(--space-8) auto 0;
}

.al-hero__cta {
    width: 100%;
}

.al-hero__hint {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin: var(--space-4) 0 0;
}

/* ── Laptop and up: two columns so the CTA sits above the fold ─────────
   Words and the action on the left, the ring on the right. Mobile and
   tablet keep the centered stack (CTA already in the first screen). */
@media (min-width: 992px) {
    .al-hero {
        text-align: left;
        padding: var(--space-12) 0 var(--space-16);
    }

    /* Two columns: the left copy is ONE tight stack (never stretched by the
       tall report card), vertically centered against it. This keeps the
       headline, subtitle and CTA reading as one block instead of drifting
       apart to match the card's height. */
    .al-hero__stage {
        max-width: 1080px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(400px, 480px);
        column-gap: var(--space-16);
        align-items: start; /* headline high + shares a top baseline with the card */
    }

    .al-hero__copy           { grid-column: 1; padding-top: var(--space-2); }
    .al-hero .night__title   { margin: var(--space-5) 0 0; max-width: none; }
    .al-hero__sub            { margin: var(--space-4) 0 0; max-width: 520px; }
    .al-hero__go             { margin: var(--space-8) 0 0; }
    .al-hero__visual         { grid-column: 2; margin: 0; justify-self: center; }
    .al-hero__window         { max-width: 480px; }

    .al-hero__hint { justify-content: flex-start; }
    .al-hero__example { text-align: center; }
}

/* Orchestrated page-load reveal: hero elements rise in sequence, then the
   growth curve draws. One reveal, no scattered motion. */
.al-hero .night__eyebrow,
.al-hero .night__title,
.al-hero__sub,
.al-hero__visual,
.al-hero__go {
    animation: al-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.al-hero .night__title { animation-delay: 70ms; }
.al-hero__sub          { animation-delay: 140ms; }
.al-hero__visual       { animation-delay: 220ms; }
.al-hero__go           { animation-delay: 300ms; }

@keyframes al-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .al-hero .night__eyebrow,
    .al-hero .night__title,
    .al-hero__sub,
    .al-hero__visual,
    .al-hero__go { animation: none; }
    .al-hero__graph-line { animation: none; stroke-dashoffset: 0; }
    .al-hero__graph-fill { animation: none; opacity: 1; }
}

/* ══ Hero report window (live) ═════════════════════════════════════════════
   Real HTML/CSS twin of the audit result. Dark header (identity + score ring)
   over a light body (findings + breakout rows). It fills in on page load like
   the real audit finishing, then holds still. JS drives the ring number; the
   body pieces cascade in via the delayed keyframes below. ─────────────────── */
.al-hw { display: block; text-align: left; }

/* ── Dark header: identity + score ─────────────────────────────────────── */
.al-hw__head {
    position: relative;
    padding: var(--space-4) var(--space-5) var(--space-5);
    background:
        radial-gradient(120% 130% at 78% -10%, rgba(52, 211, 153, 0.14) 0%, transparent 55%),
        radial-gradient(120% 120% at 12% -20%, var(--surface-night-bloom) 0%, transparent 60%);
}
.al-hw__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.22);
    border: 1px solid rgba(129, 140, 248, 0.4);
    padding: 5px 11px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
}
.al-hw__badge i { font-size: 0.65rem; }

.al-hw__id {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.al-hw__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.18);
    flex: 0 0 auto;
}
.al-hw__idmeta { flex: 1 1 auto; min-width: 0; }
.al-hw__name {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.15;
    color: var(--color-white);
    letter-spacing: -0.01em;
}
.al-hw__submeta {
    display: block;
    margin-top: 2px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--night-text-faint);
}
.al-hw__scorewrap {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
/* Compact ring for the header (the shared night-ring at a smaller scale) */
.al-hw__ring { width: 88px; height: 88px; margin: 0; }
.al-hw__ring .night-ring__n b { font-size: 1.75rem; letter-spacing: -1px; }
.al-hw__verdict {
    font-size: var(--font-size-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 4px 9px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* ── Light body: findings + breakouts ──────────────────────────────────── */
.al-hw__body {
    background: var(--color-white);
    padding: var(--space-4) var(--space-5) var(--space-5);
}
.al-hw__band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.al-hw__band-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--font-size-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--color-success-dark);
}
.al-hw__band-label i { color: var(--color-gray-700); font-size: 0.8rem; }
.al-hw__free {
    font-size: var(--font-size-xs);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--color-success-dark);
    background: var(--color-success-light);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 4px 9px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.al-hw__summary {
    margin: var(--space-3) 0 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--color-gray-800);
}
.al-hw__summary b { font-weight: 800; color: var(--color-gray-900); }

.al-hw__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--space-3);
}
.al-hw__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-600);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    padding: 5px 10px;
    border-radius: var(--radius-full);
}
.al-hw__chip .fa-video { color: var(--color-success); }
.al-hw__chip .fa-lock { color: var(--color-gray-400); }

/* Breakout card */
.al-hw__card {
    margin-top: var(--space-4);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}
.al-hw__card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-3) var(--space-4);
}
.al-hw__idx {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--color-gray-400);
    flex: 0 0 auto;
}
.al-hw__card-ic {
    flex: 0 0 auto;
    color: var(--color-gray-900);
    font-size: 0.85rem;
}
.al-hw__card-heads { flex: 1 1 auto; min-width: 0; }
.al-hw__card-title {
    display: block;
    font-weight: 800;
    font-size: 0.9375rem;
    color: var(--color-gray-900);
    line-height: 1.2;
}
.al-hw__card-sub {
    display: block;
    margin-top: 1px;
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    line-height: 1.3;
}
.al-hw__free-pill {
    flex: 0 0 auto;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-success-dark);
    background: var(--color-success-light);
    padding: 3px 10px;
    border-radius: var(--radius-full);
}
.al-hw__chev { color: var(--color-gray-400); font-size: 0.8rem; flex: 0 0 auto; }

.al-hw__lead {
    margin: 0;
    padding: var(--space-3) var(--space-4) 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-gray-600);
    border-top: 1px solid var(--color-gray-100);
}
.al-hw__lead b { font-weight: 800; color: var(--color-gray-900); }

.al-hw__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-4);
}
.al-hw__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
}
.al-hw__thumb {
    position: relative;
    flex: 0 0 auto;
    width: 84px;
    height: 48px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-gray-200);
}
.al-hw__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.al-hw__thumb i {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: var(--color-white);
    background: rgba(15, 23, 42, 0.55);
    border-radius: 50%;
}
.al-hw__rmeta { flex: 1 1 auto; min-width: 0; }
.al-hw__vtitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-gray-900);
}
.al-hw__stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 6px;
}
.al-hw__mult {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-xs);
    font-weight: 800;
    color: var(--color-success-dark);
    background: var(--color-success-light);
    padding: 3px 8px;
    border-radius: var(--radius-full);
}
.al-hw__views {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-500);
}

/* ── The fill-in reveal: body pieces cascade after the score computes ────── */
@keyframes al-hw-in   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes al-hw-row  { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes al-hw-pop  { 0% { opacity: 0; transform: scale(0.7); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }

.al-hw__verdict,
.al-hw__band,
.al-hw__summary,
.al-hw__chip,
.al-hw__card,
.al-hw__card-head,
.al-hw__lead,
.al-hw__row,
.al-hw__mult { animation-fill-mode: both; }

/* The window frame + dark header fade in with the hero visual (~740ms). The
   body pieces begin cascading right as the white panel becomes visible, so the
   panel is never an empty box, and the whole reveal settles under ~2.1s while
   the score ring counts up alongside. */
.al-hw__band       { animation: al-hw-in 440ms cubic-bezier(0.22,1,0.36,1) 0.6s both; }
.al-hw__summary    { animation: al-hw-in 440ms cubic-bezier(0.22,1,0.36,1) 0.72s both; }
.al-hw__card       { animation: al-hw-in 440ms cubic-bezier(0.22,1,0.36,1) 0.78s both; }
.al-hw__chip:nth-child(1) { animation: al-hw-in 400ms cubic-bezier(0.22,1,0.36,1) 0.88s both; }
.al-hw__chip:nth-child(2) { animation: al-hw-in 400ms cubic-bezier(0.22,1,0.36,1) 0.98s both; }
.al-hw__lead       { animation: al-hw-in 400ms cubic-bezier(0.22,1,0.36,1) 1.02s both; }
.al-hw__row:nth-child(1) { animation: al-hw-row 460ms cubic-bezier(0.22,1,0.36,1) 1.16s both; }
.al-hw__row:nth-child(2) { animation: al-hw-row 460ms cubic-bezier(0.22,1,0.36,1) 1.36s both; }
.al-hw__row:nth-child(1) .al-hw__mult { animation: al-hw-pop 400ms cubic-bezier(0.22,1,0.36,1) 1.5s both; }
.al-hw__row:nth-child(2) .al-hw__mult { animation: al-hw-pop 400ms cubic-bezier(0.22,1,0.36,1) 1.7s both; }
.al-hw__verdict    { animation: al-hw-pop 440ms cubic-bezier(0.22,1,0.36,1) 1.15s both; }

@media (prefers-reduced-motion: reduce) {
    .al-hw__verdict,
    .al-hw__band,
    .al-hw__summary,
    .al-hw__chip,
    .al-hw__card,
    .al-hw__lead,
    .al-hw__row,
    .al-hw__mult { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 767px) {
    .al-hw__head { padding: var(--space-4) var(--space-4) var(--space-4); }
    .al-hw__body { padding: var(--space-4) var(--space-4); }
    .al-hw__name { font-size: 1.05rem; }
    .al-hw__ring { width: 74px; height: 74px; }
    .al-hw__ring .night-ring__n b { font-size: 1.45rem; }
    .al-hw__id { gap: 10px; }
    .al-hw__thumb { width: 76px; height: 44px; }
}

/* ══ Real product screenshots — the proof ══════════════════════════════ */
.al-shot {
    max-width: 880px;
    margin: 0 auto var(--space-10);
}

.al-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-lg);
}

/* The scan capture has empty night below the content and a decorative
   half-ring at the very top; crop to the middle band that tells the story */
.al-watch .al-shot img {
    aspect-ratio: 32 / 15;
    object-fit: cover;
    object-position: 50% 68%;
}

.al-shot figcaption {
    margin-top: var(--space-3);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* ══ How it works — three glanceable steps under the scan shot ═════════ */
/* ══ Live scanner — self-running "reading your channel" animation ══════ */
.al-scan {
    max-width: 760px;
    margin: 0 auto var(--space-5);
    background:
        radial-gradient(700px 300px at 50% -20%, var(--surface-night-bloom) 0%, transparent 60%),
        var(--surface-night);
    border: 1px solid var(--night-border);
    border-radius: var(--radius-2xl);
    box-shadow: 0 30px 70px rgba(4, 7, 18, 0.55);
    overflow: hidden;
}
.al-scan__chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--night-border);
}
.al-scan__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.al-scan__title {
    margin-left: 8px;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--night-text);
}
.al-scan__live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #34d399;
}
.al-scan__live i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; animation: al-pulse 1.4s ease-in-out infinite; }

/* Current stage: icon + changing title/sub + running percentage */
.al-scan__stage {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 14px;
}
.al-scan__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(140deg, var(--color-primary), var(--color-primary-light));
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
}
.al-scan__icon.is-pop { animation: sf-pop 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.al-scan__heads { flex: 1 1 auto; min-width: 0; }
.al-scan__stage-title {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.25;
}
.al-scan__stage-sub {
    font-size: var(--font-size-sm);
    color: var(--night-text-dim);
    margin-top: 2px;
}
.al-scan__pct {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--font-size-lg);
    color: var(--color-primary-light);
}

/* Per-stage feed visual. FIXED height (not min-height) so the panel never
   grows or shrinks between stages — that was reflowing the whole page. */
.al-scan__feed {
    height: 132px;
    box-sizing: content-box;
    padding: 4px 18px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sf-lines { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.sf-line {
    height: 9px;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, rgba(165,180,252,0.5), rgba(99,102,241,0.28));
    transform-origin: left center;
    animation: sf-grow 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sf-line--thin { height: 7px; background: linear-gradient(90deg, rgba(199,210,254,0.4), rgba(129,140,248,0.2)); }
.sf-themes { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.sf-themes b {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: #c7d2fe;
    background: rgba(99,102,241,0.2);
    border: 1px solid rgba(129,140,248,0.4);
    padding: 6px 13px;
    border-radius: var(--radius-full);
    animation: sf-pop 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sf-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; width: 100%; }
.sf-grid i {
    height: 30px;
    border-radius: 6px;
    background: linear-gradient(135deg, #2a3358, #171d34);
    border: 1px solid rgba(165,180,252,0.16);
    animation: sf-pop 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sf-grid i:nth-child(2){animation-delay:60ms;} .sf-grid i:nth-child(3){animation-delay:120ms;}
.sf-grid i:nth-child(4){animation-delay:180ms;} .sf-grid i:nth-child(5){animation-delay:240ms;}
.sf-grid i:nth-child(6){animation-delay:300ms;} .sf-grid i:nth-child(7){animation-delay:360ms;}
.sf-grid i:nth-child(8){animation-delay:420ms;} .sf-grid i:nth-child(9){animation-delay:480ms;}
.sf-grid i:nth-child(10){animation-delay:540ms;} .sf-grid i:nth-child(11){animation-delay:600ms;}
.sf-grid i:nth-child(12){animation-delay:660ms;}
.sf-bars { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 14px; height: 96px; }
.sf-bars i {
    width: 20px;
    border-radius: 5px 5px 2px 2px;
    background: rgba(165,180,252,0.35);
    transform-origin: bottom center;
    animation: sf-rise 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sf-bars i.sf-peak { background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary)); box-shadow: 0 4px 16px rgba(99,102,241,0.5); }
.sf-bars__base { position: absolute; left: 10%; right: 10%; top: 46%; height: 0; border-top: 1.5px dashed rgba(255,255,255,0.22); }
.sf-pulse { position: relative; width: 60px; height: 60px; }
.sf-pulse span {
    position: absolute; inset: 0; margin: auto;
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--color-primary-light);
    animation: sf-ripple 1.8s ease-out infinite;
}
.sf-pulse span:nth-child(2){animation-delay:0.6s;} .sf-pulse span:nth-child(3){animation-delay:1.2s;}
.sf-score { position: relative; width: 116px; height: 116px; }
.sf-score svg { width: 100%; height: 100%; }
.sf-score__track { stroke: rgba(255,255,255,0.1); }
.sf-score__arc { stroke: #34d399; filter: drop-shadow(0 0 8px rgba(52,211,153,0.45)); transition: stroke-dashoffset 1.3s cubic-bezier(0.22,1,0.36,1); }
.sf-score__num {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; color: #fff;
}

.al-scan__foot {
    padding: 14px 18px 18px;
    border-top: 1px solid var(--night-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Reserve two rows so the panel does not grow as chips accumulate. */
.al-scan__chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; height: 60px; overflow: hidden; }
.al-scan__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: #34d399;
    background: rgba(52,211,153,0.14);
    border: 1px solid rgba(52,211,153,0.28);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    animation: sf-pop 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.al-scan__bar { height: 6px; border-radius: var(--radius-full); background: rgba(255,255,255,0.1); overflow: hidden; }
.al-scan__bar span {
    display: block; height: 100%; width: 0;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.al-scan__note {
    max-width: 760px;
    margin: 0 auto var(--space-2);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

@keyframes al-pulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
@keyframes sf-pop { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: scale(1); } }
/* Feed lines/bars start faintly visible (not fully transparent) so no frame
   ever reads empty during the stagger. */
@keyframes sf-grow { from { opacity: 0.35; transform: scaleX(0.35); } to { opacity: 1; transform: scaleX(1); } }
@keyframes sf-rise { from { opacity: 0.35; transform: scaleY(0.25); } to { opacity: 1; transform: scaleY(1); } }
@keyframes sf-ripple { 0% { transform: scale(0.5); opacity: 0.9; } 100% { transform: scale(3.4); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .al-scan__icon.is-pop,
    .sf-line, .sf-themes b, .sf-grid i, .sf-bars i, .al-scan__chip { animation: none; }
    .sf-pulse span { animation: none; }
    .al-scan__live i { animation: none; }
}

/* ══ How it works — three glanceable steps under the scanner ═══════════ */
.al-steps {
    max-width: 1000px;
    margin: var(--space-4) auto 0;
    text-align: center;
}

.al-step__num {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: linear-gradient(140deg, var(--color-primary), var(--color-primary-light));
    color: var(--color-white);
    font-size: 1.05rem;
    margin-bottom: var(--space-4);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.28);
}

.al-step__title {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 var(--space-2);
}

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

/* ══ Trust band — the community proof, bridging the dark hero and the page ═
   A single elevated white band floating on the gray strip. On desktop it lifts
   up onto the hero's bottom edge so it reads as a premium bridge between the
   dark hero and the light page, not a flat afterthought. Honest: these are real
   consented creator faces from the community, and the number is the live count.*/
.al-trust {
    position: relative;
    background: var(--color-gray-50);
    padding: var(--space-8) 0 var(--space-6);
}

.al-trust__band {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6) var(--space-8);
    flex-wrap: wrap;
    padding: var(--space-6) var(--space-8);
    background:
        radial-gradient(460px 150px at 2% 0%, rgba(99, 102, 241, 0.06), transparent 72%),
        var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-2xl);
    box-shadow: 0 22px 48px -20px rgba(15, 23, 42, 0.30), 0 2px 6px rgba(15, 23, 42, 0.05);
}

/* ── Real creator faces, ringed, overlapping, with a soft indigo halo ─────── */
.al-trust__faces {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
.al-trust__faces::before {
    content: '';
    position: absolute;
    inset: -12px -8px;
    z-index: 0;
    background: radial-gradient(closest-side, rgba(99, 102, 241, 0.18), transparent 76%);
    filter: blur(5px);
    pointer-events: none;
}
.al-trust__face,
.al-trust__more {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid var(--color-white);
    margin-left: -15px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.20);
}
.al-trust__face {
    object-fit: cover;
    background: var(--color-gray-100);
}
.al-trust__faces > .al-trust__face:first-child { margin-left: 0; }
/* Trailing "and many more" chip in the brand indigo */
.al-trust__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--color-white);
    font-size: 0.95rem;
}

/* ── The count is the hero of the band ────────────────────────────────────── */
.al-trust__copy { position: relative; z-index: 1; text-align: left; }
.al-trust__count {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-700);
    line-height: 1.05;
}
.al-trust__count strong {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.95rem, 4.5vw, 2.5rem);
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-primary);
    margin-right: 6px;
}
.al-trust__label {
    margin: 4px 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    font-weight: 500;
}

/* ── Honest supporting proof, as clean pill-chips (cohesive with the page) ─── */
.al-trust__tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--space-3);
}
.al-trust__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-gray-600);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    padding: 5px 11px;
    border-radius: var(--radius-full);
}
.al-trust__chip i { font-size: 0.8rem; }
.al-trust__chip .fa-youtube { color: #FF0000; }
.al-trust__chip .fa-globe { color: var(--color-primary-light); }

/* Desktop: lift the band onto the hero's bottom edge (premium bridge) */
@media (min-width: 768px) {
    .al-trust { padding: 0 0 var(--space-10); }
    .al-trust__band {
        margin-top: -46px;
        z-index: 3;
        gap: var(--space-8);
    }
}

/* Mobile: calm centered stack, no overlap onto the hero */
@media (max-width: 767px) {
    .al-trust__band {
        flex-direction: column;
        text-align: center;
        gap: var(--space-4);
        padding: var(--space-6) var(--space-5);
    }
    .al-trust__copy { text-align: center; }
    .al-trust__tokens { justify-content: center; }
    .al-trust__faces::before { inset: -8px -4px; }
}

/* ══ Section rhythm ════════════════════════════════════════════════════
   The page body is gray-50, so every light section read as one flat wash.
   Give the light sections a gentle two-tone rhythm (white / gray-50) between
   the dark hero and dark final-CTA bookends. Subtle on purpose — modern sites
   separate sections with a whisper of tone, not hard color blocks. */
.al-watch,
.al-reviews,
.al-learn { background: var(--color-white); }
.al-inside,
.al-faq { background: var(--color-gray-50); }

/* Two real, identity-removed crops from an actual audit, framed as product
   cards. The screenshot IS the visual — no invented graphics. */
.al-proof {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.al-proof-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.al-proof-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.al-proof-card__shot {
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
    overflow: hidden;
}
/* Show the real crop in full — never clip a real thumbnail */
.al-proof-card__shot img {
    display: block;
    width: 100%;
    height: auto;
}

.al-proof-card__body { padding: var(--space-5) var(--space-5) var(--space-6); }
.al-proof-card__title {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 var(--space-2);
}
.al-proof-card__text {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: var(--line-height-loose);
    margin: 0;
}

.al-proof__note {
    max-width: 1000px;
    margin: var(--space-4) auto 0;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* Single mid-page CTA at the value peak */
.al-midcta { text-align: center; margin-top: var(--space-10); }
.al-midcta__hint {
    margin: var(--space-3) 0 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-500);
}

/* Velvet rope: a dark, premium upsell card sold on the pain of guessing */
.al-deep {
    position: relative;
    max-width: 1000px;
    margin: var(--space-10) auto 0;
    padding: 1px;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(245, 196, 81, 0.55), rgba(245, 196, 81, 0.12));
}
.al-deep__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(520px 260px at 85% -10%, rgba(245, 196, 81, 0.16), transparent 60%),
        radial-gradient(520px 300px at 10% 120%, rgba(99, 102, 241, 0.22), transparent 60%);
    pointer-events: none;
}
.al-deep__inner {
    position: relative;
    z-index: 1;
    padding: var(--space-10);
    border-radius: calc(var(--radius-2xl) - 1px);
    background:
        radial-gradient(700px 320px at 50% -30%, var(--surface-night-bloom) 0%, transparent 62%),
        var(--surface-night);
}
.al-deep__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--font-size-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--color-gold-bright);
    background: rgba(245, 196, 81, 0.12);
    border: 1px solid rgba(245, 196, 81, 0.28);
    padding: 6px 13px;
    border-radius: var(--radius-full);
}
.al-deep__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.4vw, 2.15rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-white);
    margin: var(--space-5) 0 0;
    max-width: 760px;
}
.al-deep__title em { font-style: normal; color: #a5b4fc; }
.al-deep__lead {
    margin: var(--space-5) 0 var(--space-8);
    font-size: var(--font-size-lg);
    color: var(--night-text-dim);
    line-height: 1.65;
    max-width: 720px;
}
/* A hairline divider separates the pitch from the "what you get" list, and the
   list breathes: generous row and column gaps so the four points never crowd. */
.al-deep__list {
    list-style: none;
    margin: 0;
    padding: var(--space-8) 0 0;
    border-top: 1px solid var(--night-border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7) var(--space-10);
}
.al-deep__list li {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    font-size: var(--font-size-base);
    color: var(--night-text-dim);
    line-height: 1.55;
}
.al-deep__list li strong { color: var(--color-white); font-weight: 700; }
.al-deep__ic {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.22);
    border: 1px solid rgba(129, 140, 248, 0.4);
    color: #c7d2fe;
    font-size: 0.85rem;
}

/* ══ Reviews — verbatim creator wall (masonry) ═════════════════════════ */
.al-reviews__wall {
    max-width: 1040px;
    margin: 0 auto;
    column-count: 3;
    column-gap: var(--space-5);
}

.al-review {
    position: relative;
    break-inside: avoid;
    margin: 0 0 var(--space-5);
    padding: var(--space-6) var(--space-5) var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.al-review:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.al-review__mark {
    position: absolute;
    top: 6px;
    left: 16px;
    font-family: var(--font-display);
    font-size: 3.4rem;
    line-height: 1;
    color: var(--color-primary-soft);
    pointer-events: none;
}

.al-review__quote {
    position: relative;
    margin: 0 0 var(--space-5);
    font-size: var(--font-size-base);
    line-height: var(--line-height-loose);
    color: var(--color-gray-800);
}
.al-review__quote mark {
    background: none;
    color: var(--color-primary-dark);
    font-weight: 700;
}

.al-review__by {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-100);
}
.al-review__avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--font-size-base);
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.28);
}
/* Real creator avatar (from the consented corpus, same as /reviews) */
.al-review__avatar-img {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
}
.al-review__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.al-review__name {
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--color-gray-900);
    line-height: 1.2;
}
.al-review__role {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-500);
}
.al-review__role i { color: #ff0000; margin-right: 4px; }

.al-reviews__more { text-align: center; margin-top: var(--space-8); }

/* ══ Final CTA depth + emphasis ════════════════════════════════════════ */
.al-final { position: relative; overflow: hidden; }
.al-final .final-cta__content { position: relative; z-index: 1; }
/* Match the hero's dramatic ExtraBold so the open and close are one bookend */
.al-final .final-cta__title {
    font-size: clamp(2.6rem, 7vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.03;
}
.al-final .final-cta__title em {
    font-style: normal;
    color: #a5b4fc;
}

/* ══ Answer zone panels — designed with the same care as every section ══ */
.al-learn__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    max-width: 1040px;
    margin: 0 auto;
    /* Equal-height panels so the shorter one does not leave a floating white
       gap beneath it (both stretch to the taller panel's height). */
    align-items: stretch;
}
.al-learn__grid .al-learn__block {
    max-width: none;
    margin: 0;
}
.al-learn__panel {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
}
.al-learn__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-4);
    padding: 5px 12px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border-radius: var(--radius-full);
}
.al-learn__eyebrow i { font-size: 0.72rem; }

/* ══ Answer zone (search and AI engines) — below the final CTA ═════════ */

.al-learn__block {
    max-width: 720px;
    margin: 0 auto var(--space-10);
}
.al-learn__block:last-child { margin-bottom: 0; }

.al-learn__title {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 var(--space-3);
}

.al-learn__text {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: var(--line-height-loose);
    margin: 0;
}
.al-learn__text + .al-learn__text {
    margin-top: var(--space-3);
}

.al-learn__kicker {
    margin: var(--space-5) 0 0;
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-gray-900);
}

/* ── Score scale: where channels land on the 0 to 100 range ──────────── */
.al-scale {
    margin-top: var(--space-8);
}

.al-scale__track {
    position: relative;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--color-gray-100);
}

.al-scale__band {
    position: absolute;
    left: 40%;
    width: 40%;
    top: 0;
    bottom: 0;
    border-radius: var(--radius-full);
    background: var(--surface-indigo-light);
}

.al-scale__marker {
    position: absolute;
    left: 65%;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--color-success);
    border: 3px solid var(--color-white);
    box-shadow: var(--shadow-md);
}

.al-scale__chip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: var(--color-gray-900);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}

.al-scale__labels {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    font-weight: 600;
}
.al-scale__labels span:nth-child(2) { text-align: center; }

/* ── The three growth-killers ─────────────────────────────────────────── */
.al-reasons {
    margin-top: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.al-reason {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

.al-reason__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(79, 70, 229, 0.1);
    color: var(--color-primary);
}

.al-reason__body {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: var(--line-height-base);
}
.al-reason__body strong {
    color: var(--color-gray-900);
}

/* ══ FAQ ═══════════════════════════════════════════════════════════════ */
.al-faq__list {
    max-width: 800px;
    margin: 0 auto;
}

.al-faq .faq-item__content {
    padding: var(--space-4);
    color: var(--color-gray-600);
    line-height: var(--line-height-loose);
}
.al-faq .faq-item__content p { margin: 0; }

/* ══ Final CTA on the night surface ════════════════════════════════════ */
/* .final-cta (landing-shared) declares its own background-color after the
   bundle; pin the night base so the bookend is token-true. */
.final-cta.night {
    background-color: var(--surface-night);
}

.final-cta .night__eyebrow {
    margin-bottom: var(--space-5);
}

.final-cta .night__hint {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin: 0;
}

/* Tighter vertical rhythm through the lower half so it matches the confident
   top (the default .home-section padding leaves too much dead air here). */
.al-inside { padding-bottom: var(--space-16); }
.al-reviews,
.al-faq { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.al-learn { padding-top: var(--space-16); }

/* ══ Tablet ════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .al-reviews__wall { column-count: 2; }
    .al-learn__grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ══ Mobile ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .al-hero {
        padding: var(--space-10) 0 var(--space-12);
    }

    .al-hero__sub {
        font-size: var(--font-size-base);
    }

    .al-hero__visual {
        margin-top: var(--space-6);
    }

    .al-hero__go {
        margin-top: var(--space-6);
    }

    .al-hero__hint {
        gap: var(--space-3);
    }

    .al-step__num {
        top: var(--space-3);
        left: var(--space-3);
    }

    /* Real-screenshot cards + deep panel → single column */
    .al-proof { grid-template-columns: 1fr; gap: var(--space-4); }
    .al-deep { margin-top: var(--space-6); }
    .al-deep__inner { padding: var(--space-7); }
    .al-deep__list { grid-template-columns: 1fr; gap: var(--space-5); padding-top: var(--space-6); }

    /* Tighten the lower-half rhythm further on small screens */
    .al-inside { padding-bottom: var(--space-10); }
    .al-reviews,
    .al-faq { padding-top: var(--space-10); padding-bottom: var(--space-10); }
    .al-learn { padding-top: var(--space-10); }

    /* Score-scale caption reads cleaner (no awkward mid-phrase wrap) */
    .al-scale__labels { font-size: var(--font-size-xs); gap: var(--space-2); }
    .al-scale__labels span:nth-child(2) { max-width: 62%; }

    /* Reviews → single column */
    .al-reviews__wall { column-count: 1; }
    .al-review { margin-bottom: var(--space-3); padding: var(--space-5) var(--space-4) var(--space-4); }

    /* SEO panels → tighter padding */
    .al-learn__panel { padding: var(--space-5); }

    /* Scan showcase: the source is a wide 1280px capture, so a full-width
       crop shrinks its interior text to an unreadable blur at 375px. Frame a
       taller, tighter portrait crop of the central column (headline + rolling
       titles + progress) so the product moment stays legible on a phone. */
    .al-watch .al-shot img {
        aspect-ratio: 343 / 468;
        object-position: 50% 40%;
    }
}