/* ============================================================
   核心能力 — tap-driven vertical slider, one screen tall
   Additive stylesheet. Loaded after style.css.
   Reuses the site's rem scale (1rem = 5.208vw), the title gradient
   (#0066b1 -> #438e3c) and the existing page5 imagery.

   Was scroll-pinned over 450vh (100vh + 5 x 70vh). That held the reader
   hostage for four and a half screens before the page would move on, so the
   pin is gone: the section is now a single viewport and the pills switch the
   image on click. Nobody has to consume all six to get past it.

   Tuning knob on .cl below:
     --cl-ease   shared easing
   ============================================================ */

/* 需求 1 — style.css:802 gives .page5 a #fff background, and its 1.8rem
   padding-bottom then renders as a hard white slab between the wash and page6.
   Paint just that band as a fade instead: it starts on the wash's own closing
   tone (#e9eef4) and lands on the #fff that page6 actually opens with, so the
   three sections read as one continuous drift rather than three slabs.
   background-size pins the fade to the padding band — a full-height gradient
   would resolve to plain white across the whole section. */
.page5 {
    background-color: #ffffff;
    background-image: linear-gradient(180deg, #e9eef4 0%, #ffffff 100%);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 1.8rem;
}

.cl {
    --cl-count: 6;
    --cl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --cl-accent-a: #0066b1;
    --cl-accent-b: #438e3c;

    position: relative;
    width: 100%;
    /* one screen, not 450vh — scroll passes straight through */
    height: auto;
    /* keep the heading clear of the fixed 1.2rem header on anchor scrolls */
    scroll-margin-top: 1.2rem;
}

/* Name kept (the JS and markup reference it) but it no longer sticks.
   min-height rather than height so a long copy column can grow instead of
   being clipped, while the full-bleed backdrop still fills a whole screen. */
.cl_sticky {
    position: relative;
    height: auto;
    min-height: 100vh;
    /* clear the fixed 1.2rem header */
    padding-top: 1.2rem;
    /* small, so the band lands on ~1.0 screens rather than 1.06 — but not zero,
       or the copy touches the bottom edge on a short viewport */
    padding-bottom: 0.3rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* .cl_sticky is display:flex, so .cl_inner is a FLEX ITEM — `width: auto` would
   shrink-to-fit the copy column instead of filling the row, so the explicit
   100% is required. It does mean this later-loaded file beats
   `.container { width: 90% }` from base.css (media queries add no specificity),
   so the narrower breakpoints are restored by hand below. */
.cl_inner {
    width: 100%;
    align-items: center;
    justify-content: space-between;
    /* deliberately NOT positioned: .cl_stage is a descendant, and it has to
       anchor to .cl_sticky (the one-screen box) to bleed full-width. Making
       this a containing block would trap the backdrop inside the 15.6rem
       container. .cl_copy carries the z-index instead. */
}

/* ---------- left: copy + item list ---------- */

.cl_copy {
    flex: 0 0 6rem;
    max-width: 6rem;
    /* sits above the full-bleed backdrop (.cl_stage, z-index 0). Both resolve
       inside .cl_sticky, which position:sticky already makes a stacking context. */
    position: relative;
    z-index: 2;
}

.cl_head .page_title,
.cl_head .page_desc {
    text-align: left;
}

.cl_head .page_desc {
    margin-top: 0.12rem;
}

/* The wash is light (需求 1), so the heading keeps style.css's own
   #0066b1 -> #438e3c brand gradient and the subtitle stays dark — nothing to
   override here. .page_desc is left at its inherited #333. */

/* 需求 2 — the item list is a column of hugging pill buttons, after the
   reference: circular icon chip + label inside a fully-rounded capsule, each
   pill only as wide as its own label. */
.cl_list {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.18rem;
}

/* The BUTTON is just the hit area — the pill itself is .cl_item_head, so the
   description can sit outside the capsule and still be inside the button
   (which is what the JS toggles .is-active on). */
.cl_item {
    position: relative;
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* ---- the pill ---- */
.cl_item_head {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.14rem;
    padding: 0.13rem 0.34rem 0.13rem 0.13rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(0, 102, 177, 0.13);
    box-shadow: 0 0.02rem 0.08rem rgba(16, 48, 80, 0.05);
    overflow: hidden;
    transition: background-color 0.4s var(--cl-ease),
        border-color 0.4s var(--cl-ease), box-shadow 0.4s var(--cl-ease);
}

.cl_item.is-active .cl_item_head {
    background-color: #ffffff;
    border-color: rgba(0, 102, 177, 0.32);
    box-shadow: 0 0.05rem 0.18rem rgba(16, 48, 80, 0.13);
}

.cl_item:hover .cl_item_head {
    background-color: rgba(255, 255, 255, 0.86);
    border-color: rgba(0, 102, 177, 0.24);
}

/* ---- scroll progress, swept across the pill ----
   Was a vertical rail beside the list; inside a capsule it reads better as a
   left-to-right fill. closer-look.js drives this with scaleX (see setFill). */
.cl_item_rail {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background-color: transparent;
    overflow: hidden;
}

.cl_item_fill {
    display: block;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
            90deg,
            rgba(0, 102, 177, 0.17),
            rgba(67, 142, 60, 0.17)
    );
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.15s linear;
}

.cl_item_icon {
    position: relative;
    z-index: 1;
    flex: 0 0 0.44rem;
    width: 0.44rem;
    height: 0.44rem;
    border-radius: 50%;
    background-color: rgba(0, 102, 177, 0.09);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: background-color 0.4s var(--cl-ease);
}

.cl_item.is-active .cl_item_icon {
    background-color: rgba(0, 102, 177, 0.15);
}

.cl_item_icon img {
    display: block;
    width: 0.24rem;
    height: auto;
    /* icons were exported white for dark cards — darken for the light pill */
    filter: brightness(0) saturate(100%);
    opacity: 0.45;
    transition: opacity 0.4s var(--cl-ease);
}

.cl_item.is-active .cl_item_icon img {
    opacity: 0.85;
}

.cl_item_title {
    position: relative;
    z-index: 1;
    font-family: "SourceHanSansSCBold" !important;
    font-weight: bold;
    font-size: 0.26rem;
    line-height: 1.35;
    padding-left: 0;
    white-space: nowrap;
    color: #6b7885;
    transition: color 0.4s var(--cl-ease);
}

/* description reveals under the pill, only for the active item.
   Indented to line up with the pill's label rather than its left edge. */
.cl_item_desc {
    display: block;
    margin: 0;
    padding-left: 0.6rem;
    font-weight: 400;
    font-size: 0.22rem;
    line-height: 0.38rem;
    color: #52606d;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s var(--cl-ease), opacity 0.4s var(--cl-ease),
        margin-top 0.5s var(--cl-ease);
}

.cl_item.is-active .cl_item_title {
    color: #0d2233;
}

.cl_item.is-active .cl_item_desc {
    max-height: 1.6rem;
    margin-top: 0.08rem;
    opacity: 1;
}

.cl_item:hover .cl_item_title {
    color: #3d4b58;
}

.cl_item.is-active:hover .cl_item_title {
    color: #0d2233;
}

.cl_item:focus-visible {
    outline: 2px solid var(--cl-accent-a);
    outline-offset: 4px;
    border-radius: 999px;
}

/* ---------- full-bleed media stage ---------- */

/* The stage is no longer a card in the right-hand column — it is a full-bleed
   backdrop filling the whole pinned viewport, with the copy overlaid on top.
   `.cl_sticky` is position:sticky, which is a positioned ancestor, so inset:0
   resolves against its padding box and the image also covers the area behind
   the fixed 1.2rem header. */
.cl_stage {
    position: absolute;
    inset: 0;
    flex: none;
    max-width: none;
    z-index: 0;
}

/* Full-bleed means the 733x723 sources get cropped to the viewport ratio.
   `cover` + centre keeps the subject of the photo slides (13/14/16/17/18) in
   frame. 15.webp is the testimonial screenshot and is text-heavy — it cannot
   survive a 16:9 crop, so it gets `contain` on a brand-tinted backdrop below. */
.cl_frame {
    position: absolute;
    inset: 0;
    height: auto;
    width: auto;
    max-width: none;
    margin-left: 0;
    border-radius: 0;
    overflow: hidden;
    /* pale blue, so the letterboxed slide 3 and any load gap match the wash */
    background-color: #dfeaf5;
    box-shadow: none;
}

/* Legibility wash — 需求 1.
   Two stacked gradients:
     1. horizontal, heaviest over the left ~40% where the copy sits, so the
        dark type stays readable over the photo;
     2. vertical, so the band hands off cleanly to its neighbours instead of
        starting and stopping abruptly.
   The vertical stops are sampled from the real sections above and below:
   page4 ends around #f2f5f9 (near-white, cool) and page6 opens around
   #e9edf2 (pale blue-grey), so the section reads as one continuous drift. */
.cl_stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(
                100deg,
                rgba(238, 245, 252, 0.96) 0%,
                rgba(231, 241, 251, 0.93) 30%,
                rgba(224, 237, 249, 0.7) 47%,
                rgba(217, 232, 246, 0.3) 66%,
                rgba(212, 229, 245, 0.1) 84%,
                rgba(202, 222, 241, 0.24) 100%
        ),
        /* Feather ONLY at the two edges. A full-height wash here stacks on top
           of the horizontal one and bleaches the photo flat — the middle band
           has to stay clear for the image to read at all. */
        linear-gradient(
                180deg,
                rgba(242, 246, 250, 0.92) 0%,
                rgba(242, 246, 250, 0.34) 11%,
                rgba(240, 245, 250, 0) 27%,
                rgba(233, 238, 244, 0) 70%,
                rgba(233, 238, 244, 0.42) 89%,
                rgba(233, 238, 244, 0.92) 100%
        );
}

.cl_slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: scale(1.045);
    transition: opacity 0.7s var(--cl-ease), transform 0.9s var(--cl-ease);
    will-change: opacity, transform;
}

.cl_slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Slide 3 is the app-review screenshot — dense small type top to bottom, so a
   16:9 `cover` crop would cut reviews off. Fit it whole and anchor it right of
   the copy column instead; the dark stage background fills the left. */
#cl-panel-3 img {
    object-fit: contain;
    object-position: right center;
}

.cl_slide.is-active {
    opacity: 1;
    transform: scale(1);
}

/* step counter — now bottom-right of the viewport, lined up with the
   container's right edge on wide screens, above the scrim */
.cl_counter {
    position: absolute;
    right: max(0.34rem, calc((100% - 15.6rem) / 2));
    bottom: 0.45rem;
    z-index: 2;
    display: flex;
    align-items: baseline;
    color: #22405c;
    font-size: 0.22rem;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.65);
}

.cl_counter_now {
    font-family: "SourceHanSansSCBold" !important;
    font-weight: bold;
    font-size: 0.34rem;
    line-height: 1;
}

.cl_counter_sep {
    margin: 0 0.06rem;
    font-style: normal;
    opacity: 0.7;
}

.cl_counter_all {
    opacity: 0.7;
}

/* Restore base.css's narrower container. Only the copy shrinks — the backdrop
   is anchored to .cl_sticky, so it stays full-bleed at every width. */
@media (max-width: 1250px) {
    .cl_inner {
        width: 90%;
    }
}

/* ---------- mobile / tablet ---------- */

@media (max-width: 992px) {
    /* The unpinning that used to live here now applies at every width, so this
       block only carries what is genuinely phone-specific: stacked layout and
       larger touch sizing. */
    .cl_sticky {
        padding-bottom: 0.8rem;
        display: block;
    }

    .cl_inner {
        display: block;
    }

    .cl_copy {
        flex: none;
        max-width: none;
        width: 100%;
    }

    /* stays a full-bleed backdrop; the copy overlays it exactly as on desktop */
    .cl_stage {
        position: absolute;
        inset: 0;
        margin-top: 0;
        width: auto;
        max-width: none;
    }

    .cl_frame {
        position: absolute;
        inset: 0;
        height: auto;
        aspect-ratio: auto;
    }

    /* the copy spans the full width at this breakpoint, so the wash has to
       run top-to-bottom rather than left-to-right, and it has to be denser —
       there is no clear right-hand strip for the photo to breathe in */
    .cl_stage::after {
        background-image: linear-gradient(
                180deg,
                rgba(240, 246, 252, 0.94) 0%,
                rgba(232, 241, 250, 0.9) 45%,
                rgba(226, 236, 246, 0.86) 76%,
                rgba(230, 236, 243, 0.9) 100%
        );
    }

    /* `contain` anchored right only makes sense beside a left copy column */
    #cl-panel-3 img {
        object-fit: cover;
        object-position: top center;
    }

    .cl_counter {
        right: 0.4rem;
        bottom: 0.4rem;
    }

    .cl_head {
        margin-bottom: 0.4rem;
    }

    .cl_list {
        margin-top: 0.3rem;
    }

    /* the pill carries its own padding now — the button is only the hit area */
    .cl_item {
        padding: 0;
    }

    .cl_item_head {
        padding: 0.14rem 0.34rem 0.14rem 0.14rem;
        gap: 0.16rem;
    }

    .cl_item_icon {
        flex-basis: 0.52rem;
        width: 0.52rem;
        height: 0.52rem;
    }

    .cl_item_icon img {
        width: 0.28rem;
    }

    .cl_item_title {
        font-size: 0.3rem;
    }

    .cl_item_desc {
        padding-left: 0.2rem;
    }

    .cl_item_desc {
        font-size: 0.26rem;
        line-height: 0.44rem;
    }

    .cl_item.is-active .cl_item_desc {
        max-height: 2.4rem;
    }
}

/* The old aspect-ratio fallbacks are gone: .cl_frame is now inset:0 on an
   absolutely positioned stage, so its size comes from .cl_sticky and no
   aspect-ratio support is required at any breakpoint. */

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .cl_slide,
    .cl_item_icon,
    .cl_item_title,
    .cl_item_desc,
    .cl_item_fill {
        transition-duration: 0.01ms !important;
    }

    .cl_slide {
        transform: none !important;
    }
}