/*
 * D2C campaign landing page styles — Story 4.1; reframed by Story 6.5 (v5).
 *
 * Mobile-first (NFR-2). All selectors are scoped under .ccq-landing so nothing
 * leaks into the shop SPA (shop/index.php) or the rest of the site. The sticky
 * CTA is CSS-only (no AMD build step); a body-bottom spacer equal to the CTA bar
 * height guarantees the final content is never obscured (AC #1).
 *
 * BINDING SCOPING RULE (Story 6.5, validation MAJOR-2): this file ALSO loads on
 * shop/basket.php (5_5) and the index detail fragment (5_4), whose root class is
 * the BARE .ccq-landing. Restyling an existing .ccq-landing / .ccq-landing__*
 * rule BODY silently reflows basket + detail — invisible to the landing-only
 * golden oracle. Story 6.5's campaign geometry therefore lands ONLY under NEW
 * classes or the page-scoped modifier .ccq-landing--campaign (the campaign root
 * carries both classes). No existing rule body above is modified by Story 6.5;
 * every 6.5 rule is in the clearly-marked section at the foot of this file.
 */

/* Story 5.2 (UX-DR7) / Story 6.6 (AC-6): the AA struck-anchor token
   --ccq-struck is SINGLE-SOURCED in shop.css's merged token layer. Every page
   that loads this file also loads shop.css (index, landing, basket — recon
   verified), so the var() reads below always resolve; the duplicate
   declaration this file used to carry is deleted. */

.ccq-landing {
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem 1rem 0;
    line-height: 1.5;
}

.ccq-landing__section-title {
    font-size: 1.25rem;
    margin: 1.5rem 0 0.75rem;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.ccq-landing__hero {
    text-align: center;
    padding: 1.5rem 0 1rem;
}

.ccq-landing__headline {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.ccq-landing__subhead {
    font-size: 1.1rem;
    color: #444;
    margin: 0 0 1rem;
}

.ccq-landing__props {
    list-style: none;
    padding: 0;
    margin: 0 auto 1.25rem;
    text-align: left;
    display: inline-block;
}

.ccq-landing__props li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.4rem;
}

.ccq-landing__props li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #2e7d32;
    font-weight: 700;
}

.ccq-landing__hero-cta {
    font-size: 1.05rem;
    padding: 0.65rem 1.5rem;
}

/* ── Price anchor ─────────────────────────────────────────────────────── */
.ccq-landing__price {
    text-align: center;
}

.ccq-landing__price-block {
    padding: 0.5rem 0;
}

.ccq-landing__market-price s {
    color: var(--ccq-struck);
    font-size: 1.1rem;
    margin-right: 0.5rem;
}

.ccq-landing__sale-price {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
}

.ccq-landing__price-note,
.ccq-landing__price-pending {
    color: #555;
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

/* ── Bundle ladder ────────────────────────────────────────────────────── */
.ccq-landing__ladder-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ccq-landing__ladder-tier {
    /* F9: the interactive row lives on the inner .ccq-landing__ladder-link <a>.
       The <li> is a plain container; the display-only fallback row (no tierurl)
       restores the original flex layout via :not(:has(a)) below. */
    margin-bottom: 0.6rem;
    list-style: none;
}

/* F9 (Option B): each ladder tier is a link into its own product checkout.
   The whole row is the tap target; hover/focus give it a clear "this is
   clickable" affordance so "Choose the option that fits your family" is true. */
.ccq-landing__ladder-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ccq-landing__ladder-link:hover,
.ccq-landing__ladder-link:focus-visible {
    border-color: #2e7d32;
    background-color: #f2f8f3;
    box-shadow: 0 1px 4px rgba(46, 125, 50, 0.18);
    text-decoration: none;
    color: inherit;
}

.ccq-landing__ladder-link:focus-visible {
    outline: 2px solid #2e7d32;
    outline-offset: 2px;
}

/* The "Choose" affordance chip — pushes to the far right, after the price. */
.ccq-landing__ladder-choose {
    flex: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2e7d32;
    white-space: nowrap;
}

.ccq-landing__ladder-choose::after {
    content: " \2192"; /* → */
}

/* Display-only fallback: a tier with no route keeps the original flat row. */
.ccq-landing__ladder-tier:not(:has(.ccq-landing__ladder-link)) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.ccq-landing__ladder-price {
    flex: 1 1 auto;
    text-align: right;
}

.ccq-landing__ladder-market {
    color: var(--ccq-struck);
    margin-right: 0.4rem;
    font-size: 0.9rem;
}

.ccq-landing__ladder-pending {
    color: #555;
    font-style: italic;
}

/* ── Testimonials ─────────────────────────────────────────────────────── */
.ccq-landing__testimonials {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ccq-landing__testimonial {
    background: #f7f7f7;
    border-left: 3px solid #2e7d32;
    border-radius: 6px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
}

.ccq-landing__quote {
    margin: 0 0 0.4rem;
    font-style: italic;
}

.ccq-landing__cite {
    font-size: 0.85rem;
    color: #666;
    font-style: normal;
}

/* ── See what you'll get: real anonymised sample previews ─────────────── */
/* Two previews side by side from 768px, stacked below it. The frame is a plain
   white card so the report's own navy/green branding carries the section. */
.ccq-landing__samples {
    margin: 2.5rem 0;
}

.ccq-landing__samples-intro {
    text-align: center;
    color: #555;
    margin: 0 0 1.4rem;
}

.ccq-landing__samples-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .ccq-landing__samples-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

.ccq-landing__sample {
    margin: 0;
}

.ccq-landing__sample-frame {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.ccq-landing__sample-img {
    display: block;
    width: 100%;
    height: auto;
}

.ccq-landing__sample-caption {
    text-align: center;
    color: #555;
    font-size: 0.9rem;
    margin-top: 0.6rem;
}

/* Secondary affordance: outlined, so it never competes with the buy CTA. */
.ccq-landing__samples-download {
    text-align: center;
    margin: 1.5rem 0 0;
}

.ccq-landing__samples-dl {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border: 2px solid #2e7d32;
    border-radius: 8px;
    color: #2e7d32;
    background: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.ccq-landing__samples-dl:hover,
.ccq-landing__samples-dl:focus {
    background: #2e7d32;
    color: #fff;
    text-decoration: none;
}

.ccq-landing__samples-dl:focus-visible {
    outline: 3px solid #2e7d32;
    outline-offset: 2px;
}

.ccq-landing__samples-note {
    text-align: center;
    color: #666;
    font-size: 0.82rem;
    font-style: italic;
    margin: 0.9rem 0 0;
}

/* ── Money-back badge ─────────────────────────────────────────────────── */
.ccq-landing__guarantee {
    text-align: center;
    margin: 1.5rem 0;
}

.ccq-landing__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border: 2px solid #2e7d32;
    border-radius: 999px;
    color: #2e7d32;
    font-weight: 600;
    text-decoration: none;
}

.ccq-landing__badge:hover {
    background: #2e7d32;
    color: #fff;
}

.ccq-landing__badge-icon {
    font-weight: 700;
}

/* ── Sticky CTA (mobile-first, CSS-only) ──────────────────────────────── */
/* The spacer reserves AT LEAST the height of the fixed bar so the last section is
   never hidden behind it. The bar on mobile is: 0.75rem top pad + ~0.7rem×2 button
   pad + ~1.05rem button line-height + 0.75rem bottom pad + iOS safe-area. We set a
   conservative 80px base (comfortably above the ~63px real bar) AND add the same
   env(safe-area-inset-bottom) the bar's padding-bottom uses, so the spacer tracks a
   home-indicator device too. Verified non-obscuring at a 375px column. */
.ccq-landing {
    --ccq-cta-height: 80px;
}

.ccq-landing__cta-spacer {
    height: calc(var(--ccq-cta-height) + env(safe-area-inset-bottom, 0px));
}

.ccq-landing__sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: center;
    /* Respect iOS safe-area so the bar clears the home indicator. */
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

.ccq-landing__sticky-btn {
    width: 100%;
    max-width: 480px;
    font-size: 1.05rem;
    padding: 0.7rem 1rem;
}

/* On wider viewports the funnel is the same, but centre the CTA bar content. */
@media (min-width: 768px) {
    .ccq-landing {
        --ccq-cta-height: 76px;
    }
    .ccq-landing__headline {
        font-size: 2.1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STORY 6.5 — campaign reframing (FR-38). Scoped to .ccq-landing--campaign or
   NEW classes ONLY, so the shared basket (5_5) + detail (5_4) surfaces — which
   load this file under the bare .ccq-landing root — are never reflowed. No rule
   above this banner is modified. Colours reuse the palette already declared in
   this file (surface-alt #f7f7f7, border-soft #e0e0e0, green #2e7d32, text
   #1a1a1a/#444/#555/#666, struck --ccq-struck); the sub-AA greys the 5_2
   sweep bans are never introduced. All amounts are frozen
   context values — this file styles, it never computes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wider banded well on the campaign surface only (DESIGN.md L1 — the 720px
   column stays for basket/detail; same specificity, this rule is later so it
   wins for the campaign root). */
.ccq-landing--campaign {
    /* Story 6.6 (AC-4/E6-OQ2): the campaign body joins the shared 1280px store
       well — the token lives in shop.css's merged layer, loaded on every page
       that loads this file. */
    max-width: var(--ccq-store-well);
    padding: 0 1rem;
}

.ccq-landing--campaign .ccq-landing__how,
.ccq-landing--campaign .ccq-landing__wayfind,
.ccq-landing--campaign .ccq-landing__crosssell,
.ccq-landing--campaign .ccq-landing__proof {
    margin: 0 0 1.75rem;
}

/* ── Hero: left-aligned, price + CTA + guarantee absorbed; 2-col ≥768 ─────── */
.ccq-landing--campaign .ccq-landing__hero {
    text-align: left;
    padding: 1.5rem 0;
}
.ccq-landing--campaign .ccq-landing__hero .ccq-landing__price {
    text-align: left;
}
.ccq-landing__hero-copy {
    min-width: 0;
}
.ccq-landing__hero-kicker {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #2e7d32;
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}
.ccq-landing--campaign .ccq-landing__props {
    margin: 0 0 1.25rem;
    display: block;
}
.ccq-landing--campaign .ccq-landing__hero-price {
    margin: 0.5rem 0 1rem;
}
.ccq-landing__hero-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.ccq-landing__hero-howlink {
    font-weight: 600;
}
.ccq-landing--campaign .ccq-landing__hero-badge {
    margin-top: 0.25rem;
}
.ccq-landing__hero-media {
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
}
.ccq-landing__hero-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
/* Mobile: hero image hidden ≤640 — the funnel spine wins the fold (Task-0.3). */
@media (max-width: 640px) {
    .ccq-landing--campaign .ccq-landing__hero-media {
        display: none;
    }
    /* SM-C5 fold fix (orchestrator browser pass, 375x812 CDP-measured): with the
       source order kicker>H1>subhead>props>price>actions, the price landed at
       y=824 and the CTA at y=960 — BOTH below the 812px fold. The funnel spine
       wins over chrome (EXPERIENCE epic6 rule): at mobile widths the hero-copy
       becomes a flex column and the price + actions jump ABOVE the props, with
       tightened rhythm. Desktop (>640) keeps the source order. */
    .ccq-landing--campaign .ccq-landing__hero-copy {
        display: flex;
        flex-direction: column;
    }
    .ccq-landing--campaign .ccq-landing__hero-copy > .ccq-landing__hero-kicker { order: 1; }
    .ccq-landing--campaign .ccq-landing__hero-copy > .ccq-landing__headline    { order: 2; }
    .ccq-landing--campaign .ccq-landing__hero-copy > .ccq-landing__subhead     { order: 3; }
    .ccq-landing--campaign .ccq-landing__hero-copy > .ccq-landing__price       { order: 4; }
    .ccq-landing--campaign .ccq-landing__hero-copy > .ccq-landing__hero-actions{ order: 5; }
    .ccq-landing--campaign .ccq-landing__hero-copy > .ccq-landing__props       { order: 6; }
    .ccq-landing--campaign .ccq-landing__hero-copy > .ccq-landing__hero-badge  { order: 7; }
    .ccq-landing--campaign .ccq-landing__headline { font-size: 1.375rem; margin-bottom: 0.5rem; }
    .ccq-landing--campaign .ccq-landing__subhead  { margin-bottom: 0.5rem; }
    .ccq-landing--campaign .ccq-landing__hero-price { margin: 0.25rem 0 0.5rem; }
    .ccq-landing--campaign .ccq-landing__props { margin: 0.75rem 0 0.5rem; }
    /* Review BLOCKER fix (Edge Hunter, CDP hit-tested): the always-visible fixed
       sticky bar occupies y≈738–812 at 375x812; the reordered hero CTA painted
       79% under it and the how-link 100% under it — both non-clickable at first
       paint. The hero CTA must clear the bar entirely: tightened rhythm above
       plus the how-link hidden at mobile (the binding MOBILE mockup omits it —
       the recorded Task-0 call), and the hero keeps clear space equal to the
       bar height so no hero control can ever paint under the fixed bar. */
    .ccq-landing--campaign .ccq-landing__hero { padding: 0.5rem 0 1.25rem; }
    .ccq-landing--campaign .ccq-landing__hero-kicker { margin-bottom: 0.25rem; }
    .ccq-landing--campaign .ccq-landing__subhead { font-size: 0.95rem; }
    .ccq-landing--campaign .ccq-landing__hero-howlink { display: none; }
}
@media (min-width: 768px) {
    .ccq-landing--campaign .ccq-landing__hero {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 2.5rem;
        align-items: center;
    }
}

/* ── How it works (3 steps) ──────────────────────────────────────────────── */
.ccq-landing__how {
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 2rem 1.25rem;
}
.ccq-landing__how-title {
    text-align: center;
    margin-top: 0;
}
/* Story 6.6 (AC-5): the grid declarations moved to the shared 3-up utility in
   shop.css (ccq-store__grid ccq-store__grid--3up, added beside this class in
   the template — extend-don't-rename). Only non-grid properties remain here. */
.ccq-landing__how-steps {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}
.ccq-landing__how-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}
.ccq-landing__how-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #2e7d32;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ccq-landing__how-step-title {
    font-weight: 700;
    font-size: 1.05rem;
}
.ccq-landing__how-step-body {
    color: #555;
}
/* (Story 6.6: the former 768px 3-column step for .ccq-landing__how-steps is
   carried by the shared shop.css utility ccq-store__grid--3up.) */

/* ── Wayfinding band: step one of three ──────────────────────────────────── */
.ccq-landing__wayfind {
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.75rem 1.25rem;
}
.ccq-landing__wayfind-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.ccq-landing__wayfind-kicker {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #666;
}
.ccq-landing__wayfind-title {
    margin: 0.15rem 0 0;
}
.ccq-landing__wayfind-browse {
    font-weight: 700;
    white-space: nowrap;
}
/* Story 6.6 (AC-5): the grid declarations moved to the shared 3-up utility in
   shop.css (ccq-store__grid ccq-store__grid--3up, added beside this class in
   the template — extend-don't-rename). Only non-grid properties remain here. */
.ccq-landing__wayfind-tiles {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ccq-landing__wayfind-tile {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 0.9rem 1rem;
}
.ccq-landing__wayfind-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2e7d32;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ccq-landing__wayfind-tile-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.ccq-landing__wayfind-name {
    font-weight: 800;
    font-size: 1rem;
}
.ccq-landing__wayfind-promise {
    font-size: 0.88rem;
    color: #555;
}
.ccq-landing__wayfind-count {
    font-size: 0.8rem;
    color: #666;
}
.ccq-landing__topics {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.ccq-landing__topics::-webkit-scrollbar {
    display: none;
}
.ccq-landing__topics-label {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: #666;
    white-space: nowrap;
}
.ccq-landing__topics-row {
    display: flex;
    gap: 0.5rem;
}
.ccq-landing__topic-chip {
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 600;
    color: #444;
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 6px 13px;
    border-radius: 999px;
    text-decoration: none;
}
.ccq-landing__topic-chip:hover,
.ccq-landing__topic-chip:focus-visible {
    border-color: #2e7d32;
    color: #2e7d32;
}
/* (Story 6.6: the former 768px 3-column step for .ccq-landing__wayfind-tiles
   is carried by the shared shop.css utility ccq-store__grid--3up.) */

/* ── Course cross-sell strip ─────────────────────────────────────────────── */
.ccq-landing__crosssell {
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.75rem 1.25rem;
}
.ccq-landing__crosssell-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.ccq-landing__crosssell-head .ccq-landing__section-title {
    margin: 0;
}
.ccq-landing__crosssell-browse {
    font-weight: 600;
    white-space: nowrap;
}
.ccq-landing__crosssell-sub {
    color: #555;
    margin: 0.4rem 0 1.25rem;
}
.ccq-landing__crosssell-grid {
    margin: 0;
}
.ccq-landing__crosssell-foot {
    text-align: center;
    margin-top: 1.5rem;
}

/* ── Guarantee strip (restyled — additive over the base __guarantee rule,
   never modifying it; the campaign scope re-lays it out as a two-part strip) ─ */
.ccq-landing--campaign .ccq-landing__guarantee {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    text-align: left;
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
}
.ccq-landing__guarantee-copy {
    max-width: 60ch;
}
.ccq-landing__guarantee-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 0.4rem;
}
.ccq-landing__guarantee-body {
    color: #555;
    margin: 0;
}
.ccq-landing__guarantee-cta {
    white-space: nowrap;
}

/* ── Enriched sticky CTA (EXPERIENCE :56): name + price left / CTA right at
   ≥768; on mobile the info collapses and the bar stays CTA-only — IDENTICAL to
   today's sticky, so --ccq-cta-height is unchanged (button-driven height). ── */
.ccq-landing__sticky-info {
    display: none;
}
@media (min-width: 768px) {
    .ccq-landing--campaign .ccq-landing__sticky-cta {
        justify-content: space-between;
    }
    .ccq-landing__sticky-info {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    .ccq-landing__sticky-name {
        font-weight: 700;
        font-size: 1.05rem;
    }
    .ccq-landing__sticky-price {
        font-weight: 800;
        font-size: 1.2rem;
    }
    .ccq-landing__sticky-guarantee {
        color: #2e7d32;
        font-weight: 600;
        font-size: 0.85rem;
    }
    .ccq-landing--campaign .ccq-landing__sticky-btn {
        width: auto;
    }
}