/* ==========================================================================
   MYCRED — Application / Eligibility Page Styles  (v2 redesign)
   Builds on the global system in styles.css
   ========================================================================== */

/* highlighted hero phrase — monochrome (CRED palette, no gold) */
.apply-hero .text-gold {
    background: linear-gradient(120deg, #d1d1d6, #f4f4f5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ==========================================================================
   APPLY HERO — light split layout with media card
   ========================================================================== */
.apply-hero {
    position: relative;
    padding: calc(var(--nav-h) + 64px) 0 76px;
    background: linear-gradient(180deg, #f7f8fa 0%, #ffffff 100%);
    overflow: hidden;
}

.apply-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(16, 25, 43, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 25, 43, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(56rem 32rem at 50% 0%, #000 25%, transparent 78%);
    mask-image: radial-gradient(56rem 32rem at 50% 0%, #000 25%, transparent 78%);
    pointer-events: none;
}

/* apply-loan runs its hero clean — no grid graphic behind it. (This file is
   shared with apply-new and check-eligibility, which keep theirs.) */
.loan-page .apply-hero::before { display: none; }

/* ==========================================================================
   BALANCE TRANSFER HERO — full viewport, looping video behind centred content

   Deliberately NOT the .fullscreen variant: that one is tuned for
   check-eligibility (left-aligned content, its own badge/trust-point treatment,
   and a video transform that crops a watermark out of that specific clip).
   Reusing it here would undo this page's centred layout.
   ========================================================================== */
.bt-hero {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: calc(var(--nav-h) + 48px) 0 64px;
    background: var(--bg-deep);
}

.bt-hero::before { display: none; }              /* nothing patterned over the video */
.bt-hero .container { position: relative; z-index: 1; }

/* this clip needs no cropping, so drop the shared scale/translate */
.bt-hero .apply-hero-video-bg video { transform: none; }

/* the shared overlay is a left-to-right gradient built for left-aligned text;
   centred text needs an even wash instead, darkest at the foot where the
   trust points and CTA sit */
.bt-hero .apply-hero-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .66) 45%, rgba(0, 0, 0, .82) 100%);
}

/* type sits on moving footage — lift it clear */
.bt-hero h1 { color: #fff; }
.bt-hero .apply-hero-subtitle { color: rgba(255, 255, 255, .8); }
.bt-hero .trust-point { color: rgba(255, 255, 255, .85); }
.bt-hero .trust-point i { color: rgba(255, 255, 255, .6); }
.bt-hero .apply-offer-badge {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: none;
}

/* ==========================================================================
   BALANCE TRANSFER BENEFITS — headline figures over a hairline-divided row,
   then the plain-language wins underneath.
   ========================================================================== */
.bt-benefits {
    background: var(--bg);
    padding: 72px 0 64px;
}

.bt-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-bottom: 44px;
}

.bt-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4px 22px;
    border-left: 1px solid var(--line);
}
.bt-stat:first-child { border-left: 0; }

.bt-stat-num {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    line-height: 1.04;
    letter-spacing: -.02em;
    color: var(--ink);
}
.bt-stat-num sup {
    font-size: .42em;
    top: -.7em;
    margin-left: 2px;
    color: var(--muted);
}

.bt-stat-label {
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}

.bt-benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 12px;
}

.bt-benefit {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: .92rem;
    line-height: 1.45;
    color: var(--ink-2);
    transition: border-color .2s ease, transform .2s ease;
}
.bt-benefit:hover { border-color: var(--line-2); transform: translateY(-2px); }

.bt-benefit i {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: var(--chip);
    color: var(--on-chip);
    font-size: .82rem;
}

/* the asterisk the headline figures carry */
.bt-note {
    margin-top: 26px;
    font-size: .74rem;
    line-height: 1.6;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 768px) {
    .bt-benefits { padding: 56px 0 48px; }
    .bt-stat-row { gap: 26px 0; margin-bottom: 32px; }
    .bt-stat { padding: 0 10px; }
    .bt-benefit { padding: 16px; font-size: .88rem; }
}

@media (max-width: 560px) {
    /* three across is too tight on a phone — stack to a 1-col hairline list */
    .bt-stat-row { grid-template-columns: 1fr; }
    .bt-stat {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        text-align: left;
        gap: 16px;
        padding: 14px 0;
        border-left: 0;
        border-bottom: 1px solid var(--line);
    }
    .bt-stat:last-child { border-bottom: 0; }
    .bt-stat-num { font-size: 1.75rem; }
    .bt-stat-label { margin-top: 0; text-align: right; }
}

.apply-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.06fr .94fr;
    gap: 56px;
    align-items: center;
}

.apply-hero-inner.single { grid-template-columns: 1fr; text-align: center; }
.apply-hero-inner.single .apply-hero-content { max-width: 640px; margin: 0 auto; }
.apply-hero-inner.single .apply-trust-points { justify-content: center; }
.apply-hero-inner.single .hero-cta-row { justify-content: center; }
/* the subtitle carries its own max-width, so without auto side margins it sits
   flush left inside the centred content block — its text then reads ~60px off
   centre against the heading and CTA above/below it. */
.apply-hero-inner.single .apply-hero-subtitle { margin-left: auto; margin-right: auto; }

.apply-offer-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid rgba(242, 167, 27, .4);
    box-shadow: var(--shadow-sm);
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 10px 18px;
    border-radius: 0;
    margin-bottom: 24px;
}

.apply-offer-badge i { color: var(--gold); }

.apply-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4.2vw, 3.2rem);
    font-weight: 400;
    margin-bottom: 20px;
}

.apply-hero-subtitle {
    font-size: 1.05rem;
    color: var(--body);
    max-width: 520px;
    margin-bottom: 30px;
}

.apply-trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-bottom: 34px;
}

.trust-point {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink-2);
}

.trust-point i { color: var(--green); }

.hero-cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

/* Small quick-option chips under the hero CTA. Deliberately compact — they all
   route to the form for now and will be split into dedicated flows later. */
.bt-hero-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.apply-hero-inner.single .bt-hero-options { justify-content: center; }
.bt-option-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    padding: 8px 14px;
    border-radius: 999px;
    transition: background .2s ease, border-color .2s ease;
}
.bt-option-chip:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(242, 167, 27, .6);
}
.bt-option-chip i { color: var(--gold); font-size: .82rem; }

.airpods-free-tag,
.hero-gift-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    padding: 11px 18px;
    border-radius: 0;
}

/* ---------- Full-screen hero variant (check-eligibility) ---------- */
.apply-hero.fullscreen {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: calc(var(--nav-h) + 48px) 0 64px;
    background: var(--bg-deep);
    text-align: left;
}

.apply-hero.fullscreen::before { display: none; }

.apply-hero-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--bg-deep);
    overflow: hidden;
}

/* zoomed in and pushed toward the bottom-right so the Gemini watermark in that
   corner is cropped off; any gap it opens on the left hides under the black wash */
.apply-hero-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.36) translate(11%, 6%);
    transform-origin: center center;
}

/* solid black on the left blending into the video on the right */
.apply-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #000 0%, #000 22%, rgba(0, 0, 0, .82) 42%, rgba(0, 0, 0, .4) 66%, rgba(0, 0, 0, .08) 88%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.apply-hero.fullscreen .container { position: relative; z-index: 1; }

.apply-hero.fullscreen .apply-hero-content {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* CRED-style hero content: mono kicker → big lowercase serif headline →
   quiet body → minimal monochrome micro-labels */
.apply-hero.fullscreen .hero-kicker {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    margin-bottom: 28px;
}
.apply-hero.fullscreen .hero-kicker::before {
    content: "";
    width: 30px;
    height: 1px;
    margin-right: 16px;
    background: rgba(255, 255, 255, .4);
    flex-shrink: 0;
}

.apply-hero.fullscreen h1 {
    color: #fff;
    font-size: clamp(2.5rem, 5.2vw, 3.9rem);
    line-height: 1.06;
    letter-spacing: -.022em;
    text-wrap: balance;
    margin-bottom: 24px;
}

.apply-hero.fullscreen .apply-hero-subtitle {
    color: rgba(255, 255, 255, .72);
    font-size: 1.06rem;
    max-width: 500px;
    margin-bottom: 34px;
}
.apply-hero.fullscreen .apply-hero-subtitle strong { color: rgba(255, 255, 255, .92); font-weight: 600; }

.apply-hero.fullscreen .apply-trust-points { gap: 10px 20px; margin-bottom: 38px; }

.apply-hero.fullscreen .trust-point {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .68);
}
.apply-hero.fullscreen .trust-point i { color: rgba(255, 255, 255, .5); font-size: .78rem; }

.apply-hero.fullscreen .hero-gift-tag {
    font-family: var(--font-mono);
    font-weight: 400;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
}
.apply-hero.fullscreen .hero-gift-tag i { color: rgba(255, 255, 255, .6); }

/* refined welcome-gift tag (fullscreen hero) */
.apply-hero.fullscreen .apply-offer-badge {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 26px;
    color: #fff;
}

.apply-hero.fullscreen .apply-offer-badge i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(242, 167, 27, .16);
    border: 1px solid rgba(242, 167, 27, .5);
    color: var(--gold);
    font-size: .82rem;
}

.offer-badge-main {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .96rem;
    letter-spacing: .01em;
    color: #fff;
}

.offer-badge-sep {
    width: 1px;
    height: 15px;
    background: rgba(255, 255, 255, .28);
}

.offer-badge-sub {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(242, 167, 27, .92);
}

/* media card (gift / product video) */
.apply-hero-media { position: relative; }

.apply-hero-media .media-frame {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    background: var(--bg-deep);
    aspect-ratio: 4 / 4.3;
}

.apply-hero-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.apply-hero-media .media-tag {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 11px 16px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--ink);
    box-shadow: var(--shadow-md);
}

.apply-hero-media .media-tag i { color: var(--gold); }

/* ==========================================================================
   PROCESS STRIP
   ========================================================================== */
.apply-process { padding: 84px 0 40px; background: #fff; }

/* Numbered timeline. Desktop = horizontal: number nodes in a row joined by a
   line, with a small icon, title and copy centred beneath each. On mobile it
   flips to a vertical timeline (see the max-width: 768px block below). */
.process-cards {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: start;
}

/* chevrons are replaced by the connecting line */
.process-connector { display: none; }

/* the line that joins the four number nodes */
.process-cards::before {
    content: "";
    position: absolute;
    top: 27px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: var(--line-2);
    z-index: 0;
}

.process-card {
    position: relative;
    text-align: center;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 73px 0 0;   /* room for the absolute number node on top */
}

.process-card:hover { transform: none; box-shadow: none; }
.process-card.highlight-card { background: transparent; border: none; box-shadow: none; }

/* number = the timeline node (top-centred, sits on the connecting line) */
.process-number {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 55px;
    height: 55px;
    border-radius: var(--r-lg);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.55rem;
    letter-spacing: 0;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow-sm);
    z-index: 1;
}

/* small icon above the title */
.process-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-size: .95rem;
}

.process-card.highlight-card .process-icon { background: var(--primary-soft); }

.process-card h4 { font-size: 1.05rem; margin-bottom: 6px; }
.process-card p { font-size: .88rem; color: var(--body); }

.official-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--green);
    background: rgba(14, 175, 123, .1);
    border: 1px solid rgba(14, 175, 123, .3);
    padding: 5px 12px;
    border-radius: 0;
}

/* ==========================================================================
   BANK LOGO STRIP
   ========================================================================== */
.apply-banks { padding: 40px 0 84px; background: #fff; }

.banks-title {
    text-align: center;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--muted);
    margin-bottom: 26px;
}

.banks-title i { margin-right: 7px; color: var(--ink-2); }

.banks-logos {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.banks-track {
    display: flex;
    align-items: center;
    gap: 64px;
    width: max-content;
    animation: marquee 32s linear infinite;
}

.banks-track img {
    height: 38px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1) opacity(.6);
    transition: filter .3s ease;
}

.banks-track img:hover { filter: none; }

/* ==========================================================================
   GIFT SHOWCASE
   ========================================================================== */
.leather-color-section { padding: 96px 0; background: var(--bg-soft); }

.single-bag-showcase {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    flex-wrap: wrap;
}

.single-bag-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 26px;
    width: min(330px, 100%);
    text-align: center;
    transition: transform .28s ease, box-shadow .28s ease;
}

.single-bag-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-lg); }

.single-bag-image-wrap {
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg-soft);
    margin-bottom: 18px;
}

.single-bag-image-wrap img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ---------- Bag image slider (swipeable) ---------- */
.bag-slider { position: relative; }

.bag-slider-track {
    display: flex;
    width: 100%;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
    touch-action: pan-y;   /* let the page scroll vertically; JS handles horizontal swipes */
}

.bag-slide {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

.bag-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: rgba(10, 10, 11, .55);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 0;
    font-size: .8rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity .25s ease, background .2s ease;
    z-index: 2;
}
.bag-slider:hover .bag-slider-arrow,
.bag-slider:focus-within .bag-slider-arrow { opacity: 1; }
.bag-slider-arrow:hover { background: rgba(10, 10, 11, .82); }
.bag-slider-arrow.prev { left: 10px; }
.bag-slider-arrow.next { right: 10px; }

.bag-slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.bag-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
    transition: background .2s ease, width .2s ease, border-radius .2s ease;
}
.bag-dot.active { width: 20px; border-radius: 4px; background: #fff; }

/* arrows are always visible on touch devices (no hover) */
@media (hover: none) {
    .bag-slider-arrow { opacity: 1; }
}

/* ---------- Client Stories: two columns on desktop ----------
   Videos on the left, written reviews on the right. Mobile is left untouched
   (the wrapper is a plain block, so the DOM order — reviews then videos — is
   preserved exactly as before). */
@media (min-width: 993px) {
    .stories-grid {
        display: grid;
        /* minmax(0, …) so the video marquee's huge intrinsic width can't blow out
           the column and collapse the reviews column */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 48px;
        /* centre the shorter reviews column against the taller video column */
        align-items: center;
    }
    /* DOM order is reviews (slider) then videos — swap so videos sit on the left */
    .stories-grid .review-videos-section { order: 1; margin: 0; min-width: 0; width: 100%; }
    /* fill the column flush (its base rule centres it with max-width + auto margins,
       which left it visually offset from the flush-left video column) */
    .stories-grid .testimonial-slider { order: 2; min-width: 0; max-width: none; margin: 0; }

    /* the marquee's default two-sided fade left dead space on the outer edge and
       made the block look off-centre; drop it so the videos fill the column
       edge-to-edge, mirroring the solid review card on the right */
    .stories-grid .review-videos-wrapper {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

.single-bag-name {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.08rem;
    color: var(--ink);
}

.bag-plus {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: var(--shadow-md);
}

.two-bags-badge-row { text-align: center; margin-top: 38px; }

.single-bag-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    padding: 13px 24px;
    border-radius: 0;
}

.single-bag-badge i { color: var(--gold); }

/* ==========================================================================
   FORM SECTION
   ========================================================================== */
.apply-form-section { padding: 96px 0; background: #fff; }

.apply-form-wrapper {
    max-width: 680px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 44px 46px;
}

/* --- step indicator --- */
.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 38px;
}

.step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}

.step-num {
    width: 42px;
    height: 42px;
    border-radius: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .04em;
    background: var(--bg-soft);
    border: 1px solid var(--line-2);
    color: var(--muted);
    transition: all .3s ease;
}

.step-label {
    font-size: .74rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    transition: color .3s ease;
}

.step-dot.active .step-num {
    background: var(--primary);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-blue);
}

.step-dot.active .step-label { color: var(--primary); }

.step-dot.completed .step-num {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.step-dot.completed .step-label { color: var(--green); }

.step-line {
    flex: 1;
    max-width: 110px;
    height: 3px;
    border-radius: 3px;
    background: var(--line);
    margin: 0 12px 24px;
    position: relative;
    overflow: hidden;
}

.step-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s ease;
}

.step-line.filled::after { transform: scaleX(1); }

/* --- form steps --- */
.form-step { display: none; }
.form-step.active { display: block; animation: stepIn .35s ease; }

@keyframes stepIn {
    from { opacity: 0; transform: translateX(14px); }
    to { opacity: 1; transform: translateX(0); }
}

.step-title {
    font-size: 1.2rem;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* optional lead-in line under a step title (balance transfer: "rough figures
   are fine"). Pulls up under the title's own 24px gap. */
.step-intro {
    margin: -14px 0 24px;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--muted);
}

.step-title i {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    color: var(--ink-2);
    font-size: .95rem;
}

.form-btn-row {
    display: flex;
    gap: 14px;
    margin-top: 8px;
}

.form-btn-row .btn { flex: 1; }

/* --- pincode status --- */
.pincode-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem;
    font-weight: 600;
    margin-top: 7px;
}

.pincode-status-badge.loading { color: var(--muted); }
.pincode-status-badge.success { color: var(--green); }
.pincode-status-badge.error { color: var(--red); }

/* --- auto-fill badge (apply-new / apply-loan city, state, area fields) --- */
.auto-fill-badge {
    position: absolute;
    top: -9px;
    right: 12px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--green);
    background: #fff;
    border: 1px solid rgba(14, 175, 123, .35);
    padding: 2px 9px;
    border-radius: 100px;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.auto-fill-badge.visible { opacity: 1; }

/* --- radio question --- */
.credit-card-question { margin-bottom: 20px; }

/* .credit-card-question is a .form-group, so its direct child <label> would be
   caught by the floating-placeholder rule (.form-group > label { position:absolute })
   and overlap the radio boxes. Pin it back into normal flow — the extra class
   specificity beats .form-group > label. */
.credit-card-question > .question-label {
    display: block;
    position: static;
    left: auto;
    top: auto;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 12px;
    padding: 0;
    background: none;
    pointer-events: auto;
}

/* small inline radio buttons (not full-width boxes) */
.radio-group { display: flex; align-items: center; gap: 28px; }

.radio-label {
    position: relative;          /* anchors the visually-hidden native input */
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .95rem;
    font-weight: 500;
    color: var(--ink-2);
    cursor: pointer;
    transition: color .18s ease;
}

.radio-label:has(input:checked) { color: var(--primary); font-weight: 600; }

/* .credit-card-question is a .form-group, so the generic
   `.form-group input` rule in styles.css (15px padding, border, background,
   radius and appearance:none) also matches these radios — which rendered them
   as large square boxes with NO checked indicator at all, since appearance:none
   removes the native dot. Every one of those properties has to be unset here.
   The input stays in the DOM, focusable and screen-reader visible; the dot the
   user actually sees is .radio-custom below. */
.radio-label input[type="radio"] {
    position: absolute;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 50%;
    opacity: 0;
    cursor: pointer;
}

.radio-custom {
    display: inline-block;
    flex: 0 0 auto;
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 50%;          /* round, so it reads as single-select */
    border: 1.5px solid var(--line-2);
    background: var(--bg-soft);
    transition: border-color .18s ease;
}

.radio-label:hover .radio-custom { border-color: var(--muted); }

.radio-label input[type="radio"]:checked + .radio-custom { border-color: var(--primary); }

.radio-label input[type="radio"]:checked + .radio-custom::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--primary);
}

/* keyboard users get a ring, since the native outline is on a hidden input */
.radio-label input[type="radio"]:focus-visible + .radio-custom {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
}

/* --- trust bar under form --- */
.form-trust-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.form-trust-bar .trust-item { font-size: .8rem; color: var(--muted); }
.form-trust-bar .trust-item i { color: var(--green); }

/* form section ineligible card width */
.apply-form-section .ineligible-message { max-width: 680px; margin: 0 auto; }

/* ==========================================================================
   BANK PROCESS HIGHLIGHT
   ========================================================================== */
.bank-process-highlight { padding: 0 0 96px; background: #fff; }

.highlight-card-wrapper {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    max-width: 860px;
    margin: 0 auto;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 38px 40px;
}

.highlight-icon {
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: #fff;
    font-size: 1.4rem;
    box-shadow: var(--shadow-md);
}

.highlight-content h3 { font-size: 1.3rem; margin-bottom: 10px; }
.highlight-content p { font-size: .95rem; margin-bottom: 18px; }

.highlight-badges { display: flex; flex-wrap: wrap; gap: 10px; }

.highlight-badges span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-2);
    background: #fff;
    border: 1px solid var(--line);
    padding: 7px 14px;
    border-radius: 100px;
}

.highlight-badges i { color: var(--green); }

/* ==========================================================================
   SUCCESS MODAL
   ========================================================================== */
.apply-success-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(7, 20, 49, .55);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

.apply-success-modal.show { opacity: 1; visibility: visible; }

.success-modal-content {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 46px 42px;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
    transform: translateY(14px);
    transition: transform .3s ease;
}

.apply-success-modal.show .success-modal-content { transform: translateY(0); }

.success-icon-wrap { position: relative; width: 74px; margin: 0 auto 20px; }

.success-check {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--green);
    color: #fff;
    font-size: 1.8rem;
    position: relative;
    z-index: 1;
}

.success-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(14, 175, 123, .35);
    animation: successRing 1.6s ease-out infinite;
}

@keyframes successRing {
    0% { transform: scale(.85); opacity: 1; }
    100% { transform: scale(1.25); opacity: 0; }
}

.success-modal-content h2 { font-size: 1.5rem; margin-bottom: 24px; }

.success-info-cards { display: grid; gap: 14px; margin-bottom: 28px; text-align: left; }

.success-info-card {
    display: block;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 18px 20px;
}

.success-info-card.highlight {
    background: #fff;
    border-color: var(--line-2);
    box-shadow: var(--shadow-sm);
}

.success-info-card .info-icon {
    width: 40px;
    height: 40px;
    border-radius: 0;
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    color: var(--ink-2);
    font-size: .95rem;
    margin-bottom: 12px;
}

.success-info-card h4 { font-size: .98rem; margin-bottom: 5px; }
.success-info-card p { font-size: .86rem; color: var(--body); }

.verified-stamp {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--green);
    background: rgba(14, 175, 123, .1);
    border: 1px solid rgba(14, 175, 123, .3);
    padding: 5px 12px;
    border-radius: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .apply-hero-inner { grid-template-columns: 1fr; gap: 44px; }
    .apply-hero-media { max-width: 480px; margin: 0 auto; width: 100%; }
}

@media (max-width: 768px) {
    .apply-hero { padding: calc(var(--nav-h) + 44px) 0 64px; }

    /* the fullscreen hero (check-eligibility) drops its trust row on a phone —
       the headline and CTA carry it, and the same assurances are repeated further
       down the page */
    .apply-hero.fullscreen .apply-trust-points { display: none; }

    /* process steps flip from a horizontal row to a vertical timeline */
    .process-cards {
        display: flex;
        flex-direction: column;
        gap: 0;
        max-width: 460px;
        margin: 0 auto;
    }
    .process-cards::before { display: none; }   /* hide the horizontal line */

    .process-card {
        text-align: left;
        padding: 0 0 42px 92px;
    }
    .process-card:last-child { padding-bottom: 0; }

    /* vertical connecting line through the nodes */
    .process-card::after {
        content: "";
        position: absolute;
        left: 35px;
        top: 14px;
        bottom: -14px;
        width: 2px;
        background: var(--line-2);
        z-index: 0;
    }
    .process-card:last-child::after { display: none; }

    /* number node moves to the left of each step */
    .process-number { position: absolute; top: 0; left: 8px; transform: none; margin: 0; }
    .process-icon { margin: 2px 0 12px; }
    .process-card p { max-width: 48ch; }

    /* horizontal wash doesn't cover full-width text on small screens — go uniform dark */
    .apply-hero-overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .6) 55%, rgba(0, 0, 0, .78) 100%);
    }

    .apply-form-wrapper { padding: 32px 22px; }

    .step-label { display: none; }
    .step-line { margin-bottom: 0; max-width: 64px; }

    .form-btn-row { flex-direction: column-reverse; }

    .highlight-card-wrapper { flex-direction: column; padding: 30px 24px; }

    .single-bag-showcase { gap: 20px; }
    .bag-plus { width: 44px; height: 44px; }
}

@media (max-width: 560px) {
    /* tighten the timeline's left gutter on small phones */
    .process-card { padding-left: 76px; }
    .process-number { width: 48px; height: 48px; font-size: 1.35rem; }
    .process-card::after { left: 31px; }

    /* small radios stay in a row on mobile too */
    .radio-group { flex-direction: row; gap: 24px; }

    .success-modal-content { padding: 34px 24px; }
}

/* ==========================================================================
   DARK MONOCHROME THEME OVERRIDES
   ========================================================================== */
.apply-hero .text-gold {
    background: linear-gradient(120deg, #d1d1d6, #f4f4f5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.apply-hero { background: linear-gradient(180deg, #0e0e10 0%, #0a0a0b 100%); }
.apply-hero::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
}

.apply-offer-badge { background: var(--surface); border-color: var(--line-2); }
.airpods-free-tag, .hero-gift-tag { color: var(--ink); background: var(--surface-2); border-color: var(--line-2); }

/* fullscreen (check-eligibility) hero is already dark — keep its overlays legible */
.apply-hero.fullscreen .apply-offer-badge i { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); }
.offer-badge-sub { color: rgba(255, 255, 255, .6); }
.apply-hero-media .media-tag { background: rgba(10, 10, 11, .82); color: var(--ink); }

.apply-process { background: var(--bg); }
.process-card.highlight-card { background: transparent; }
.process-icon { background: var(--surface-2); }
.process-number { background: var(--chip); color: var(--on-chip); }
.official-badge { color: var(--ink-2); background: rgba(255, 255, 255, .06); border-color: var(--line-2); }

.apply-banks { background: var(--bg); }

.single-bag-card { background: var(--surface); }
.bag-plus { background: var(--chip); color: var(--on-chip); }
.single-bag-badge { color: var(--ink); background: var(--surface-2); border-color: var(--line-2); }

.apply-form-section { background: var(--bg); }
.apply-form-wrapper { background: var(--surface); }

.step-dot.active .step-num { color: var(--on-primary); }
.step-dot.completed .step-num { background: #3a3a40; border-color: #3a3a40; color: #f4f4f5; }
.auto-fill-badge { color: var(--ink-2); background: var(--surface); border-color: var(--line-2); }

.bank-process-highlight { background: var(--bg); }
.highlight-icon { background: var(--chip); color: var(--on-chip); }
.highlight-badges span { background: var(--surface-2); }

.apply-success-modal { background: rgba(0, 0, 0, .7); }
.success-modal-content { background: var(--surface); }
.success-check { background: var(--chip); color: var(--on-chip); }
.success-ring { border-color: rgba(255, 255, 255, .25); }
.success-info-card.highlight { background: var(--surface); }
.verified-stamp { color: var(--ink-2); background: rgba(255, 255, 255, .06); border-color: var(--line-2); }

/* check-eligibility (fullscreen) hero — monochrome, in line with the CRED
   neoPOP palette (no gold). text-gold, the badge icon and the sub-label all
   inherit the light/grey treatment from the dark overrides above. */
.apply-hero.fullscreen .apply-offer-badge i {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .25);
    color: var(--ink);
}
.apply-hero.fullscreen .offer-badge-sub { color: rgba(255, 255, 255, .6); }

/* ==========================================================================
   APPLICATION — LEATHER GIFT PAGE
   Previously an inline <style> block on application-leather.html written in a
   cream/gold palette with soft radii and blurred shadows — the look the site
   carried before the monochrome neoPOP rework. Rebuilt here on the shared
   tokens so the page reads as the same product as every other form page:
   dark surfaces, hairline borders, sharp corners, hard zero-blur shadows.
   ========================================================================== */

/* ---------- Hero heading ----------
   .apply-hero.fullscreen h1 is shared with check-eligibility, whose headline is
   set at clamp(2.5rem, 5.2vw, 3.9rem). This page's runs a line longer at most
   widths, so it is stepped down here rather than in the shared rule — editing
   that would shrink check-eligibility's hero too. */
.apply-hero.gift-hero h1 { font-size: clamp(2.1rem, 4.3vw, 3.1rem); }

/* ---------- Card benefits ----------
   Eight short tiles between the process steps and the form. Deliberately terse:
   one line of copy each, and the grid stays TWO across on phones rather than
   collapsing to one, which would double the section's height and push the form
   far down the page. Section padding is tighter than the 96px used elsewhere
   for the same reason. */
.card-perks { padding: 72px 0; background: var(--bg-soft); }

.perk-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 34px;
}

.perk {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 20px 18px;
    transition: border-color .2s ease, transform .2s ease;
}

.perk:hover { border-color: var(--line-2); transform: translateY(-2px); }

.perk i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: 13px;
    background: var(--chip);
    color: var(--on-chip);
    font-size: .78rem;
}

.perk h4 {
    font-family: var(--font-head);
    font-size: .92rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}

.perk p {
    font-size: .8rem;
    line-height: 1.5;
    color: var(--body);
}

@media (max-width: 992px) {
    .perk-grid { grid-template-columns: repeat(3, 1fr); }
}

.perk-hint { display: none; }

/* Sits directly above the form. Answers the three things that stall a start:
   how long it takes, what it costs, what they get. */
.form-reassure {
    display: inline-block;
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

@media (max-width: 768px) {
    .card-perks { padding: 56px 0; }

    /* On phones the grid becomes a sideways rail TWO rows deep. A 2x4 vertical
       grid ran ~470px tall; this is ~250px and scrolls horizontally instead.
       Two rows rather than one keeps it to four swipes instead of eight, and
       matches the height of a single tall card. The negative margin lets the
       rail bleed past the container so tiles run to the screen edge. */
    .perk-grid {
        grid-template-columns: none;
        grid-template-rows: repeat(2, 1fr);
        grid-auto-flow: column;
        grid-auto-columns: min(66vw, 260px);
        gap: 10px;
        margin: 26px -20px 0;
        padding: 4px 20px 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scroll-padding-left: 20px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--line-2) transparent;
    }

    .perk-grid::-webkit-scrollbar { height: 5px; }
    .perk-grid::-webkit-scrollbar-track { background: var(--bg-soft); }
    .perk-grid::-webkit-scrollbar-thumb { background: var(--line-2); }

    .perk { scroll-snap-align: start; padding: 16px 14px; }
    .perk:hover { transform: none; }          /* no lift on touch */
    .perk i { width: 28px; height: 28px; margin-bottom: 10px; font-size: .7rem; }
    .perk h4 { font-size: .85rem; }
    .perk p { font-size: .75rem; }

    .perk-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 12px;
        font-family: var(--font-mono);
        font-size: .62rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--muted);
    }

    .form-reassure { font-size: .58rem; letter-spacing: .1em; }
}

/* ---------- Section rhythm ----------
   .apply-process and .apply-banks carry deliberately lopsided paddings
   (84/40 and 40/84) so that, stacked as process → banks, their small edges meet
   and the pair is book-ended by the large ones. This page runs them the other
   way round — banks directly under the hero — which put the two 84px edges
   together and opened ~170px of dead space between the logo marquee and the
   numbered steps. These sibling selectors flip the pair's spacing and, because
   this is the only page carrying both sections, reach nothing else. */
.apply-hero + .apply-banks { padding: 96px 0 60px; }
.apply-banks + .apply-process { padding-top: 60px; }

@media (max-width: 768px) {
    .apply-hero + .apply-banks { padding: 60px 0 40px; }
    .apply-banks + .apply-process { padding-top: 40px; }
}

/* ---------- Courier / AWB proof ---------- */
.awb-proof-section { padding: 96px 0; background: var(--bg); overflow: hidden; }

.awb-slider { position: relative; margin-top: 34px; }

.awb-scroller {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 6px 4px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
}

.awb-scroller::-webkit-scrollbar { height: 6px; }
.awb-scroller::-webkit-scrollbar-track { background: var(--bg-soft); }
.awb-scroller::-webkit-scrollbar-thumb { background: var(--line-2); }

.awb-card {
    flex: 0 0 auto;
    width: 262px;
    scroll-snap-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    transition: transform .28s ease, box-shadow .28s ease;
}

.awb-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-md); }

.awb-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.awb-courier {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink-2);
}

.awb-courier i {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: .72rem;
}

.awb-courier span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.awb-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    color: var(--body);
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.awb-code { padding: 13px 0 12px; }

.awb-label {
    display: block;
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.awb-num-row { display: flex; align-items: center; gap: 8px; }

.awb-num {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.awb-copy {
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--body);
    font-size: .7rem;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.awb-copy:hover,
.awb-copy.copied { background: var(--chip); border-color: var(--chip); color: var(--on-chip); }

.awb-dest {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .83rem;
    color: var(--body);
    min-width: 0;
}

.awb-dest i { color: var(--muted); font-size: .78rem; flex: 0 0 auto; }
.awb-dest span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.awb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font-size: .95rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    z-index: 3;
    transition: background .25s ease, color .25s ease, opacity .25s ease;
}

.awb-arrow:hover { background: var(--chip); color: var(--on-chip); border-color: var(--chip); }
.awb-arrow.prev { left: -8px; }
.awb-arrow.next { right: -8px; }
.awb-arrow[disabled] { opacity: 0; pointer-events: none; }

.awb-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.awb-verify-note {
    max-width: 780px;
    margin: 22px auto 0;
    text-align: center;
    font-size: .9rem;
    line-height: 1.7;
    color: var(--body);
}

.awb-verify-note strong { color: var(--ink-2); }

.awb-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 20px);
    z-index: 100001;
    padding: 12px 20px;
    border-radius: var(--r-sm);
    background: var(--chip);
    color: var(--on-chip);
    font-size: .88rem;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.awb-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .awb-arrow { display: none; }
}

@media (max-width: 768px) {
    .awb-proof-section { padding: 64px 0; }

    .awb-scroller {
        gap: 14px;
        padding: 6px 16px 18px;
        margin: 0 -20px;
        scroll-padding: 0 16px;
    }

    .awb-card { width: 74vw; max-width: 290px; }

    .awb-hint { display: flex; }
}

@media (max-width: 380px) {
    .awb-num { font-size: .94rem; }
    .awb-courier { font-size: .76rem; }
}