/* ============================================================
   Landing Page – 1 PAGE 個人品牌  |  Teal Theme
   ============================================================ */

:root {
    --primary:       #2AB5A0;
    --primary-dark:  #1E9E8B;
    --primary-light: #EAF8F6;
    --primary-mid:   #D0F0EC;
    --text:          #1F2D3A;
    --text-muted:    #5A6E7B;
    --border:        #C5E5E0;
    --white:         #fff;
    --radius-card:   16px;
    --radius-btn:    10px;
    --shadow-card:   0 4px 32px rgba(42, 181, 160, 0.10);
}

/* ── Reset / Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Noto Sans TC', 'Raleway', sans-serif;
    background: var(--primary-light);
    color: var(--text);
    line-height: 1.6;
}

a  { text-decoration: none; }
p  { margin: 0 0 .5rem; }
h1, h2, h3, h4 { margin: 0 0 .5rem; }
img { max-width: 100%; height: auto; display: block; }

/* ── Nav ──────────────────────────────────────────────────── */
.main-nav {
    background: var(--white);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(226,232,240,.9);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", sans-serif;
    font-size: 16px;
    position: sticky;
    top: 0;
    z-index: 200;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.nav-right { display: flex; align-items: center; gap: 8px; }

/* Logo */
.logo-img-link { display: flex; align-items: center; flex-shrink: 0; margin-left: 8px; margin-right: 12px; }
.logo-img      { width: 130px; height: auto; display: block; }

/* Generic nav link */
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #6b7280;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: color .18s, background .18s;
}
.nav-link:hover { color: var(--primary); background: var(--primary-light); }

/* CTA nav link */
.nav-link--cta {
    color: var(--white);
    background: var(--primary);
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--radius-btn);
}
.nav-link--cta:hover { background: var(--primary-dark); color: var(--white); }

/* Section mode links */
.nav-modes {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 20px;
}
/* Active state: bgcolor + text color (same as hover) */
.nav-link--active {
    color: var(--primary);
    background: var(--primary-light);
}

/* ── Service Switcher ─────────────────────────────────────── */
.svc-switcher { position: relative; }

.svc-switcher__btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    width: 150px;
    background: transparent;
    border: 1px solid rgba(0,0,0,0.28);
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    padding: 8px 12px;
    border-radius: 8px;
    transition: border-color .18s;
    white-space: nowrap;
}
.svc-switcher__btn:hover,
.svc-switcher__btn[aria-expanded="true"] { border-color: rgba(0,0,0,0.55); }

.svc-switcher__chevron {
    flex-shrink: 0;
    width: 12px;
    height: 7px;
    transition: transform .2s;
}
.svc-switcher__btn[aria-expanded="true"] .svc-switcher__chevron {
    transform: rotate(180deg);
}

/* Dropdown panel */
.svc-switcher__menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.11);
    z-index: 500;
    min-width: 200px;
    padding: 6px;
    overflow: hidden;
}
.svc-switcher__menu--open { display: flex; }

.svc-switcher__group-label {
    margin: 0 -6px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0,0,0,.12);
}
.svc-switcher__menu > .svc-switcher__group-label:first-child {
    margin-top: -6px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.svc-switcher__menu > .svc-switcher__group-label:not(:first-child) {
    margin-top: 10px;
}
.svc-switcher__menu > .svc-switcher__group-label + a,
.svc-switcher__menu > .svc-switcher__group-label + span {
    margin-top: 6px;
}

.svc-switcher__item {
    display: block;
    padding: 8px 14px;
    border-radius: 7px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    transition: background .15s, color .15s;
    white-space: nowrap;
}
/* Active item: text color only, no bgcolor */
.svc-switcher__item--active { color: var(--primary); font-weight: 700; }

/* Per-service hover theme colours */
.svc-switcher__item--personal:hover { background: var(--primary-light); color: var(--primary); }
.svc-switcher__item--line:hover { background: #E8F9E8; color: #00A300; }
.svc-switcher__item--poster:hover { background: #FFF3EF; color: #F55A2B; }
.svc-switcher__item--funnel:hover { background: #E3F2FD; color: #2196F3; }
.svc-switcher__item--xlead:hover { background: #FFF6E0; color: #E8941C; }

/* ── 21-day acquisition plan in nav ───────────────────────── */
.plan-switcher {
    --plan-w1: #7c3aed !important;
    --plan-w2: #f59e0b !important;
    --plan-w3: #059669 !important;
    --plan-current: var(--plan-w1) !important;
    --plan-line: rgba(124, 58, 237, 0.18) !important;
    --plan-ink: #111827 !important;
    --plan-muted: #94a3b8 !important;
}

.plan-switcher--w1 { --plan-current: var(--plan-w1) !important; }
.plan-switcher--w2 { --plan-current: var(--plan-w2) !important; }
.plan-switcher--w3 { --plan-current: var(--plan-w3) !important; }

.plan-switcher__static.svc-switcher__btn.toolkit-switcher-btn,
.plan-switcher__trigger.svc-switcher__btn.toolkit-switcher-btn {
    border: 1px solid rgba(124, 58, 237, 0.24) !important;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(110deg, rgba(124, 58, 237, 0.52), rgba(245, 158, 11, 0.46), rgba(5, 150, 105, 0.42)) border-box !important;
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.10) !important;
    color: var(--plan-ink) !important;
}

.plan-switcher__static.svc-switcher__btn.toolkit-switcher-btn {
    min-width: 152px !important;
    padding-inline: 14px !important;
    font-weight: 900 !important;
}

.plan-switcher__static.svc-switcher__btn.toolkit-switcher-btn::after {
    content: "START";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    margin-left: 8px;
    padding: 0 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #f59e0b);
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0;
}

.plan-switcher__menu.svc-switcher__menu {
    gap: 10px !important;
}

.plan-switcher__label {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    height: 28px;
    padding: 0 10px !important;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(245, 158, 11, 0.12));
    color: var(--plan-ink) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.plan-switcher__label::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--plan-current);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--plan-current) 15%, transparent);
}

.plan-mini-timeline {
    width: clamp(198px, 22vw, 270px) !important;
    height: 32px !important;
    grid-template-columns: repeat(3, minmax(58px, 1fr)) !important;
    padding: 0 7px !important;
}

.plan-mini-timeline::before {
    top: 50% !important;
    left: 18px !important;
    right: 18px !important;
    height: 6px !important;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.28), rgba(245, 158, 11, 0.24), rgba(5, 150, 105, 0.24)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.plan-mini-step {
    height: 32px !important;
    min-width: 58px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 4px !important;
    filter: grayscale(1) !important;
    opacity: 0.46 !important;
}

.plan-mini-step::before {
    content: none !important;
}

.plan-mini-step__week,
.plan-mini-step__name {
    position: relative;
    z-index: 1;
    display: inline-flex !important;
    align-items: center;
    height: 22px;
    border-radius: 999px;
    line-height: 1;
    letter-spacing: 0;
}

.plan-mini-step__week {
    padding: 0 7px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #64748b;
    font-size: 11px !important;
    font-weight: 900 !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

.plan-mini-step__name {
    padding: 0 !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 900 !important;
}

.plan-mini-step.is-current {
    filter: none !important;
    opacity: 1 !important;
}

.plan-mini-step.is-current .plan-mini-step__week {
    background: linear-gradient(135deg, var(--plan-current), color-mix(in srgb, var(--plan-current) 72%, #111827)) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--plan-current) 28%, transparent) !important;
}

.plan-mini-step.is-current .plan-mini-step__name {
    color: var(--plan-current) !important;
}

.plan-switcher__mobile-title {
    letter-spacing: 0 !important;
}

.plan-switcher__current-pill {
    background: linear-gradient(135deg, var(--plan-current), color-mix(in srgb, var(--plan-current) 72%, #111827)) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--plan-current) 22%, transparent);
}

/* ── 模擬體驗 badge (shown next to LIVE DEMO) ──────────────── */
.nav-demo-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 4px;
    margin-left: 6px; margin-bottom: -5px;
    font-size: 14px; font-weight: 300;
    background: var(--primary); color: #fff;
    white-space: nowrap; flex-shrink: 0; letter-spacing: 0.04em;
}

/* ── Dev environment badge ────────────────────────────────── */
.onepage-dev-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    background: #fef3c7;
    color: #92400e;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Mobile nav tweaks */
@media (max-width: 640px) {
    .main-nav { flex-wrap: wrap; }
    .nav-left { width: 100%; }
    .nav-modes {
        width: 100%;
        margin-left: 0;
        margin-top: 8px;
        justify-content: flex-start;
    }
    .nav-right {
        width: 100%;
        margin-top: -12px;
        justify-content: flex-end;
    }
    .svc-switcher__menu { min-width: 220px; }
}

@media (max-width: 700px) {
    .plan-switcher__trigger.svc-switcher__btn.toolkit-switcher-btn {
        min-width: 174px !important;
        padding-inline: 10px !important;
    }

    .plan-switcher__menu.svc-switcher__menu {
        min-width: 244px !important;
        padding: 12px 14px !important;
        border: 1px solid rgba(124, 58, 237, 0.20) !important;
        background:
            linear-gradient(#ffffff, #ffffff) padding-box,
            linear-gradient(135deg, rgba(124, 58, 237, 0.45), rgba(245, 158, 11, 0.38)) border-box !important;
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16) !important;
    }

    .plan-mini-timeline {
        width: 218px !important;
        height: 42px !important;
        padding: 0 4px !important;
        grid-template-columns: repeat(3, minmax(64px, 1fr)) !important;
    }

    .plan-mini-timeline::before {
        top: 50% !important;
        left: 18px !important;
        right: 18px !important;
    }

    .plan-mini-step {
        height: 42px !important;
        min-width: 64px !important;
        flex-direction: row !important;
        gap: 3px !important;
    }

    .plan-mini-step__week {
        height: 22px !important;
        padding-inline: 7px !important;
    }

    .plan-mini-step__name {
        display: inline-flex !important;
        height: 22px !important;
        font-size: 10px !important;
    }
}

/* Arrow-label version: keep W1/W2/W3 and text on one horizontal line. */
.plan-mini-timeline {
    width: clamp(248px, 25vw, 318px) !important;
    grid-template-columns: repeat(3, minmax(76px, 1fr)) !important;
    column-gap: 8px !important;
    overflow: visible !important;
}

.plan-mini-timeline::before {
    left: 10px !important;
    right: 10px !important;
    height: 3px !important;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.28), rgba(245, 158, 11, 0.28), rgba(5, 150, 105, 0.26)) !important;
    z-index: 0 !important;
}

.plan-mini-step {
    position: relative !important;
    z-index: 2 !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 76px !important;
    height: 26px !important;
    padding: 0 12px 0 9px !important;
    border-radius: 999px 4px 4px 999px !important;
    background: #f8fafc !important;
    border: 1px solid rgba(148, 163, 184, 0.42) !important;
    box-shadow: 0 5px 13px rgba(15, 23, 42, 0.08), 0 0 0 3px rgba(255, 255, 255, 0.92) !important;
    white-space: nowrap !important;
    filter: grayscale(1) !important;
    opacity: 1 !important;
}

.plan-mini-step::after {
    content: "" !important;
    position: absolute;
    top: 50%;
    right: -7px;
    width: 14px;
    height: 14px;
    background: inherit;
    border-top: 1px solid rgba(148, 163, 184, 0.34);
    border-right: 1px solid rgba(148, 163, 184, 0.34);
    transform: translateY(-50%) rotate(45deg);
    border-radius: 2px;
    z-index: -1;
}

.plan-mini-step__week,
.plan-mini-step__name {
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

.plan-mini-step__week {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 950 !important;
}

.plan-mini-step__name {
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 900 !important;
}

.plan-mini-step.is-current {
    background: linear-gradient(135deg, var(--plan-current), color-mix(in srgb, var(--plan-current) 74%, #111827)) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    filter: none !important;
    opacity: 1 !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--plan-current) 30%, transparent) !important;
}

.plan-mini-step.is-current::after {
    border-color: transparent !important;
}

.plan-mini-step.is-current .plan-mini-step__week,
.plan-mini-step.is-current .plan-mini-step__name {
    color: #ffffff !important;
}

@media (max-width: 860px) {
    .plan-mini-timeline {
        width: 238px !important;
        grid-template-columns: repeat(3, minmax(70px, 1fr)) !important;
        column-gap: 7px !important;
    }

    .plan-mini-step {
        min-width: 70px !important;
        padding-inline: 8px 10px !important;
    }

    .plan-mini-step__name {
        display: inline-flex !important;
    }
}

@media (max-width: 700px) {
    .plan-switcher__menu.svc-switcher__menu {
        min-width: 276px !important;
    }

    .plan-mini-timeline {
        width: 246px !important;
        height: 40px !important;
        grid-template-columns: repeat(3, minmax(72px, 1fr)) !important;
        column-gap: 7px !important;
    }

    .plan-mini-step {
        min-width: 72px !important;
        height: 26px !important;
        padding-inline: 8px 10px !important;
        gap: 3px !important;
    }
}

/* Connected segmented timeline: clickable rounded arrow bar. */
.main-nav .plan-switcher .plan-mini-timeline {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    width: clamp(356px, 33vw, 430px) !important;
    height: 34px !important;
    padding: 2px !important;
    gap: 0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(245, 158, 11, 0.11), rgba(5, 150, 105, 0.10)) !important;
    border: 1px solid rgba(124, 58, 237, 0.18) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.82), 0 8px 20px rgba(15, 23, 42, 0.07) !important;
}

.main-nav .plan-switcher .plan-mini-timeline::before,
.main-nav .plan-switcher .plan-mini-timeline::after {
    content: none !important;
}

.main-nav .plan-switcher .plan-mini-step {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 14px 0 16px !important;
    gap: 5px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.86) !important;
    color: #64748b !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.main-nav .plan-switcher .plan-mini-step--w1 {
    flex: 1.62 1 0 !important;
}

.main-nav .plan-switcher .plan-mini-step--w2,
.main-nav .plan-switcher .plan-mini-step--w3 {
    flex: 0.78 1 0 !important;
}

.main-nav .plan-switcher .plan-mini-step + .plan-mini-step {
    margin-left: -1px !important;
    padding-left: 22px !important;
}

.main-nav .plan-switcher .plan-mini-step::before {
    content: "" !important;
    position: absolute;
    top: 0;
    right: -13px;
    width: 26px;
    height: 100%;
    background: inherit;
    transform: skewX(-24deg);
    transform-origin: center;
    border-right: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 5px 0 0 rgba(255, 255, 255, 0.58);
    z-index: -1;
}

.main-nav .plan-switcher .plan-mini-step:last-child::before {
    content: none !important;
}

.main-nav .plan-switcher .plan-mini-step::after {
    content: none !important;
}

.main-nav .plan-switcher .plan-mini-step:hover {
    background: rgba(255, 255, 255, 0.98) !important;
    color: #334155 !important;
}

.main-nav .plan-switcher .plan-mini-step.is-current {
    background: linear-gradient(135deg, var(--plan-current), color-mix(in srgb, var(--plan-current) 76%, #111827)) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.main-nav .plan-switcher .plan-mini-step__week,
.main-nav .plan-switcher .plan-mini-step__name {
    position: relative !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

.main-nav .plan-switcher .plan-mini-step__week {
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
}

.main-nav .plan-switcher .plan-mini-step__name {
    gap: 0 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
}

.main-nav .plan-switcher .plan-mini-step__name a {
    color: inherit !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.main-nav .plan-switcher .plan-mini-step__name a:hover {
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

@media (max-width: 980px) {
    .main-nav .plan-switcher .plan-mini-timeline {
        width: 328px !important;
    }

    .main-nav .plan-switcher .plan-mini-step {
        padding-inline: 10px 11px !important;
        gap: 4px !important;
    }

    .main-nav .plan-switcher .plan-mini-step + .plan-mini-step {
        padding-left: 18px !important;
    }
}

@media (max-width: 700px) {
    .main-nav .plan-switcher__menu.svc-switcher__menu {
        min-width: 320px !important;
        padding: 12px !important;
    }

    .main-nav .plan-switcher .plan-mini-timeline {
        width: 294px !important;
        height: 34px !important;
    }

    .main-nav .plan-switcher .plan-mini-step {
        padding-inline: 8px 9px !important;
        gap: 3px !important;
    }

    .main-nav .plan-switcher .plan-mini-step + .plan-mini-step {
        padding-left: 16px !important;
    }

    .main-nav .plan-switcher .plan-mini-step__week {
        font-size: 10px !important;
    }

    .main-nav .plan-switcher .plan-mini-step__name {
        display: inline-flex !important;
        font-size: 9px !important;
    }
}

/* Polished connected plan nav: compact, resilient, tech-product style. */
.main-nav .plan-switcher {
    --plan-glass: rgba(255, 255, 255, 0.78);
    --plan-hairline: rgba(15, 23, 42, 0.10);
    --plan-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.main-nav .plan-switcher__menu.svc-switcher__menu {
    gap: 8px !important;
}

.main-nav .plan-switcher__label {
    height: 30px !important;
    padding: 0 11px !important;
    border: 1px solid rgba(124, 58, 237, 0.14);
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 6px 16px rgba(15, 23, 42, 0.05);
    backdrop-filter: blur(14px) saturate(1.2);
}

.main-nav .plan-switcher .plan-mini-timeline {
    display: grid !important;
    grid-template-columns: minmax(132px, 1.58fr) minmax(68px, 0.75fr) minmax(68px, 0.75fr) !important;
    align-items: center !important;
    width: clamp(292px, 29vw, 344px) !important;
    height: 34px !important;
    padding: 3px !important;
    gap: 0 !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    border: 1px solid var(--plan-hairline) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.86)) padding-box,
        linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(245, 158, 11, 0.18), rgba(5, 150, 105, 0.18)) border-box !important;
    box-shadow: var(--plan-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(18px) saturate(1.25);
}

.main-nav .plan-switcher .plan-mini-timeline::before,
.main-nav .plan-switcher .plan-mini-timeline::after {
    content: none !important;
}

.main-nav .plan-switcher .plan-mini-step {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    min-width: 0 !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    gap: 4px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #64748b !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    overflow: hidden !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.main-nav .plan-switcher .plan-mini-step::before {
    content: "" !important;
    position: absolute;
    top: 50%;
    right: -5px;
    width: 9px;
    height: 9px;
    border-top: 1px solid rgba(100, 116, 139, 0.25);
    border-right: 1px solid rgba(100, 116, 139, 0.25);
    background: transparent !important;
    transform: translateY(-50%) rotate(45deg);
    box-shadow: none !important;
    z-index: 2;
}

.main-nav .plan-switcher .plan-mini-step:last-child::before,
.main-nav .plan-switcher .plan-mini-step::after {
    content: none !important;
}

.main-nav .plan-switcher .plan-mini-step:hover {
    background: rgba(15, 23, 42, 0.045) !important;
    color: #334155 !important;
}

.main-nav .plan-switcher .plan-mini-step.is-current {
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.24), transparent 34%),
        linear-gradient(135deg, var(--plan-current), color-mix(in srgb, var(--plan-current) 68%, #0f172a)) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--plan-current) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

.main-nav .plan-switcher .plan-mini-step.is-current::before {
    border-color: rgba(255, 255, 255, 0.38);
}

.main-nav .plan-switcher .plan-mini-step__week,
.main-nav .plan-switcher .plan-mini-step__name,
.main-nav .plan-switcher .plan-mini-step__name a,
.main-nav .plan-switcher .plan-mini-step__name span {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    flex: 0 0 auto !important;
}

.main-nav .plan-switcher .plan-mini-step__week {
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
}

.main-nav .plan-switcher .plan-mini-step__name {
    gap: 0 !important;
    font-size: 10px !important;
    font-weight: 850 !important;
}

.main-nav .plan-switcher .plan-mini-step__name a:hover {
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

@media (max-width: 980px) {
    .main-nav .plan-switcher .plan-mini-timeline {
        width: 300px !important;
        grid-template-columns: minmax(128px, 1.55fr) minmax(64px, 0.72fr) minmax(64px, 0.72fr) !important;
    }

    .main-nav .plan-switcher .plan-mini-step {
        padding-inline: 7px !important;
        gap: 3px !important;
    }

    .main-nav .plan-switcher .plan-mini-step__week,
    .main-nav .plan-switcher .plan-mini-step__name {
        font-size: 9px !important;
    }
}

@media (max-width: 700px) {
    .main-nav .plan-switcher__menu.svc-switcher__menu {
        width: calc(100vw - 28px) !important;
        min-width: 0 !important;
        max-width: 326px !important;
        padding: 10px !important;
    }

    .main-nav .plan-switcher .plan-mini-timeline {
        width: 100% !important;
        max-width: 304px !important;
        grid-template-columns: minmax(132px, 1.6fr) minmax(64px, 0.72fr) minmax(64px, 0.72fr) !important;
    }

    .main-nav .plan-switcher .plan-mini-step {
        height: 28px !important;
        padding-inline: 6px !important;
    }

    .main-nav .plan-switcher .plan-mini-step__week,
    .main-nav .plan-switcher .plan-mini-step__name {
        font-size: 9px !important;
    }
}

/* Stable reset: keep the nav timeline inside the nav at all widths. */
html body .main-nav .nav-left .plan-switcher,
html body .bio-final .bio-final-plan,
html body .brand-final .brand-final-plan {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: min(62vw, 520px) !important;
    overflow: visible !important;
}

html body .bio-final,
html body .brand-final {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

html body .main-nav .nav-left .plan-switcher__menu.svc-switcher__menu,
html body .bio-final .bio-final-plan .plan-switcher__menu.svc-switcher__menu,
html body .brand-final .brand-final-plan .plan-switcher__menu.svc-switcher__menu {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 40px !important;
    padding: 0 10px 0 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}


html body .main-nav .nav-left .plan-switcher__label,
html body .bio-final .bio-final-plan .plan-switcher__label,
html body .brand-final .brand-final-plan .plan-switcher__label {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    height: auto !important;
    max-width: none !important;
    padding: 0 12px !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(245, 158, 11, 0.12)) !important;
    color: #111827 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    box-shadow: none !important;
}

/* "21天獲客計畫" clickable label: orange pill, dashed underline on hover. Beats the gradient label rule above via element selector (a). */
html body .main-nav .nav-left a.plan-switcher__label--link,
html body .bio-final .bio-final-plan a.plan-switcher__label--link,
html body .brand-final .brand-final-plan a.plan-switcher__label--link,
html body .plan-modal-portal a.plan-switcher__label--link {
    gap: 7px !important;
    background: #f59e0b !important;
    color: #ffffff !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

/* bio-final & brand-final variant: white background, dark text, flat right side with vertical divider — matches top NAV journey-nav title-rule */
html body .bio-final .bio-final-plan a.plan-switcher__label--link,
html body .brand-final .brand-final-plan a.plan-switcher__label--link {
    background: #ffffff !important;
    color: #0f172a !important;
    border-radius: 999px 0 0 999px !important;
    padding-right: 16px !important;
}

html body .bio-final .bio-final-plan a.plan-switcher__label--link:hover,
html body .brand-final .brand-final-plan a.plan-switcher__label--link:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
}

html body .bio-final .bio-final-plan a.plan-switcher__label--link::after,
html body .brand-final .brand-final-plan a.plan-switcher__label--link::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 24px !important;
    margin: 0 !important;
    border: 0 !important;
    background: rgba(148, 163, 184, 0.42) !important;
}

html body .main-nav .nav-left .plan-switcher__label-text,
html body .bio-final .bio-final-plan .plan-switcher__label-text,
html body .brand-final .brand-final-plan .plan-switcher__label-text,
html body .plan-modal-portal .plan-switcher__label-text {
    display: inline-flex !important;
    align-items: center !important;
    color: inherit !important;
    line-height: 1 !important;
}

html body .main-nav .nav-left .plan-switcher__label-badge,
html body .bio-final .bio-final-plan .plan-switcher__label-badge,
html body .brand-final .brand-final-plan .plan-switcher__label-badge,
html body .plan-modal-portal .plan-switcher__label-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 18px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #d97706 !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}
html body .main-nav .nav-left a.plan-switcher__label--link:hover,
html body .bio-final .bio-final-plan a.plan-switcher__label--link:hover,
html body .brand-final .brand-final-plan a.plan-switcher__label--link:hover,
html body .plan-modal-portal a.plan-switcher__label--link:hover {
    background: #d97706 !important;
    color: #ffffff !important;
    text-decoration: underline dashed !important;
    text-underline-offset: 3px !important;
}
/* hide the small dot ::before on the link variant of the label */
html body .main-nav .nav-left a.plan-switcher__label--link::before,
html body .bio-final .bio-final-plan a.plan-switcher__label--link::before,
html body .brand-final .brand-final-plan a.plan-switcher__label--link::before,
html body .plan-modal-portal a.plan-switcher__label--link::before {
    content: none !important;
    display: none !important;
}

html body .main-nav .nav-left .plan-switcher__label::after,
html body .main-nav .nav-left a.plan-switcher__label--link::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html body .main-nav .nav-left .plan-switcher__label::before,
html body .bio-final .bio-final-plan .plan-switcher__label::before,
html body .brand-final .brand-final-plan .plan-switcher__label::before {
    width: 7px !important;
    height: 7px !important;
    margin-right: 7px !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12) !important;
}

html body .main-nav .nav-left .plan-mini-timeline,
html body .bio-final .bio-final-plan .plan-mini-timeline,
html body .brand-final .brand-final-plan .plan-mini-timeline {
    position: relative !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    flex: 1 1 330px !important;
    width: clamp(300px, 34vw, 400px) !important;
    max-width: 400px !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 2px !important;
    gap: 12px !important;
    overflow: visible !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

html body .main-nav .nav-left .plan-mini-timeline::before,
html body .bio-final .bio-final-plan .plan-mini-timeline::before,
html body .brand-final .brand-final-plan .plan-mini-timeline::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 22px !important;
    right: 22px !important;
    width: auto !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,
        var(--plan-w1),
        var(--plan-w2),
        var(--plan-w3)) !important;
    transform: translateY(-50%) !important;
    z-index: 0 !important;
}

html body .main-nav .nav-left .plan-mini-timeline::after,
html body .bio-final .bio-final-plan .plan-mini-timeline::after,
html body .brand-final .brand-final-plan .plan-mini-timeline::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 22px !important;
    width: calc((100% - 44px) * var(--plan-progress, 0)) !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--plan-w1), var(--plan-w2), var(--plan-w3)) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--plan-current) 30%, transparent) !important;
    transform: translateY(-50%) !important;
    z-index: 0 !important;
}

html body .main-nav .nav-left .plan-mini-step,
html body .bio-final .bio-final-plan .plan-mini-step,
html body .brand-final .brand-final-plan .plan-mini-step,
html body .main-nav .nav-left a.plan-mini-step,
html body .bio-final .bio-final-plan a.plan-mini-step,
html body .brand-final .brand-final-plan a.plan-mini-step,
html body .main-nav .nav-left span.plan-mini-step,
html body .bio-final .bio-final-plan span.plan-mini-step,
html body .brand-final .brand-final-plan span.plan-mini-step {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    width: auto !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    gap: 5px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transform: none !important;
}

html body .main-nav .nav-left .plan-mini-step:first-child,
html body .bio-final .bio-final-plan .plan-mini-step:first-child,
html body .brand-final .brand-final-plan .plan-mini-step:first-child {
    border-left: 0 !important;
    border-radius: 0 !important;
}

html body .main-nav .nav-left .plan-mini-step:last-child,
html body .bio-final .bio-final-plan .plan-mini-step:last-child,
html body .brand-final .brand-final-plan .plan-mini-step:last-child {
    border-radius: 0 !important;
}

html body .main-nav .nav-left .plan-mini-step--w1,
html body .bio-final .bio-final-plan .plan-mini-step--w1,
html body .brand-final .brand-final-plan .plan-mini-step--w1 {
    flex-grow: 1.35 !important;
}

html body .main-nav .nav-left .plan-mini-step::before,
html body .bio-final .bio-final-plan .plan-mini-step::before,
html body .brand-final .brand-final-plan .plan-mini-step::before {
    content: "" !important;
    position: static !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: 10px !important;
    height: 10px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 2px solid currentColor !important;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.12) !important;
    transform: none !important;
}

html body .main-nav .nav-left .plan-mini-step:last-child::before,
html body .bio-final .bio-final-plan .plan-mini-step:last-child::before,
html body .brand-final .brand-final-plan .plan-mini-step:last-child::before {
    content: "" !important;
    display: inline-block !important;
}

html body .main-nav .nav-left .plan-mini-step::after,
html body .bio-final .bio-final-plan .plan-mini-step::after,
html body .brand-final .brand-final-plan .plan-mini-step::after {
    content: none !important;
    display: none !important;
}

html body .main-nav .nav-left .plan-mini-step:hover,
html body .bio-final .bio-final-plan .plan-mini-step:hover,
html body .brand-final .brand-final-plan .plan-mini-step:hover {
    background: transparent !important;
    color: var(--step-color, var(--plan-current)) !important;
    border-color: transparent !important;
}

html body .main-nav .nav-left .plan-mini-step.is-done,
html body .bio-final .bio-final-plan .plan-mini-step.is-done,
html body .brand-final .brand-final-plan .plan-mini-step.is-done {
    color: var(--step-color) !important;
    border-color: transparent !important;
}

html body .main-nav .nav-left .plan-mini-step.is-done::before,
html body .bio-final .bio-final-plan .plan-mini-step.is-done::before,
html body .brand-final .brand-final-plan .plan-mini-step.is-done::before {
    background: var(--step-color) !important;
    border-color: var(--step-color) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-color) 15%, transparent) !important;
}

html body .main-nav .nav-left .plan-mini-step.is-current,
html body .bio-final .bio-final-plan .plan-mini-step.is-current,
html body .brand-final .brand-final-plan .plan-mini-step.is-current {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--plan-current) !important;
    box-shadow: none !important;
}

html body .main-nav .nav-left .plan-mini-step.is-current::before,
html body .bio-final .bio-final-plan .plan-mini-step.is-current::before,
html body .brand-final .brand-final-plan .plan-mini-step.is-current::before {
    background: #ffffff !important;
    border-color: var(--plan-current) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--plan-current) 18%, transparent) !important;
}

html body .main-nav .nav-left .plan-mini-step__week,
html body .bio-final .bio-final-plan .plan-mini-step__week,
html body .brand-final .brand-final-plan .plan-mini-step__week,
html body .main-nav .nav-left .plan-mini-step__name,
html body .bio-final .bio-final-plan .plan-mini-step__name,
html body .brand-final .brand-final-plan .plan-mini-step__name,
html body .main-nav .nav-left .plan-mini-step__name a,
html body .bio-final .bio-final-plan .plan-mini-step__name a,
html body .brand-final .brand-final-plan .plan-mini-step__name a,
html body .main-nav .nav-left .plan-mini-step__name span,
html body .bio-final .bio-final-plan .plan-mini-step__name span,
html body .brand-final .brand-final-plan .plan-mini-step__name span {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 2px !important;
    border: 0 !important;
    background: rgba(248, 250, 252, 0.96) !important;
    color: inherit !important;
    box-shadow: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-decoration: none !important;
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
}

html body .main-nav .nav-left .plan-mini-step__week,
html body .bio-final .bio-final-plan .plan-mini-step__week,
html body .brand-final .brand-final-plan .plan-mini-step__week,
html body .plan-modal-portal .plan-mini-step__week {
    margin-left: -2px !important;
    font-size: 10.5px !important;
    font-weight: 950 !important;
    letter-spacing: 0.08em !important;
    border-radius: 0 !important;
    text-shadow: none !important;
}

html body .main-nav .nav-left .plan-mini-step__name,
html body .bio-final .bio-final-plan .plan-mini-step__name,
html body .brand-final .brand-final-plan .plan-mini-step__name,
html body .plan-modal-portal .plan-mini-step__name {
    display: block !important;
    gap: 0 !important;
    margin-left: -5px !important;
    padding-left: 5px !important;
    padding-right: 4px !important;
    font-size: 10.5px !important;
    font-weight: 850 !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
    text-shadow: none !important;
}

html body .main-nav .nav-left .plan-mini-step--w1,
html body .bio-final .bio-final-plan .plan-mini-step--w1,
html body .brand-final .brand-final-plan .plan-mini-step--w1,
html body .plan-modal-portal .plan-mini-step--w1 {
    cursor: pointer !important;
}

html body .bio-final .bio-final-plan .plan-mini-step--w1 > .plan-mini-step__week,
html body .bio-final .bio-final-plan .plan-mini-step--w1 > .plan-mini-step__name,
html body .brand-final .brand-final-plan .plan-mini-step--w1 > .plan-mini-step__week,
html body .brand-final .brand-final-plan .plan-mini-step--w1 > .plan-mini-step__name {
    border-bottom: 1px dashed currentColor !important;
    padding-bottom: 2px !important;
}

html body .main-nav .nav-left .plan-mini-step__name a,
html body .bio-final .bio-final-plan .plan-mini-step__name a,
html body .brand-final .brand-final-plan .plan-mini-step__name a,
html body .main-nav .nav-left .plan-mini-step__name span,
html body .bio-final .bio-final-plan .plan-mini-step__name span,
html body .brand-final .brand-final-plan .plan-mini-step__name span {
    display: inline !important;
}

html body .main-nav .nav-left .plan-mini-step__name a:hover,
html body .bio-final .bio-final-plan .plan-mini-step__name a:hover,
html body .brand-final .brand-final-plan .plan-mini-step__name a:hover {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

html body .main-nav .nav-left .plan-mini-step__popover,
html body .bio-final .bio-final-plan .plan-mini-step__popover,
html body .brand-final .brand-final-plan .plan-mini-step__popover {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 50% !important;
    z-index: 800 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 264px !important;
    padding: 10px !important;
    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate(-50%, -4px) !important;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
}

html body .main-nav .nav-left .plan-mini-step__popover::before,
html body .bio-final .bio-final-plan .plan-mini-step__popover::before,
html body .brand-final .brand-final-plan .plan-mini-step__popover::before {
    content: "" !important;
    position: absolute !important;
    top: -6px !important;
    left: 50% !important;
    width: 12px !important;
    height: 12px !important;
    background: #ffffff !important;
    border-left: 1px solid rgba(148, 163, 184, 0.24) !important;
    border-top: 1px solid rgba(148, 163, 184, 0.24) !important;
    transform: translateX(-50%) rotate(45deg) !important;
}

html body .main-nav .nav-left .plan-mini-step__popover::after,
html body .bio-final .bio-final-plan .plan-mini-step__popover::after,
html body .brand-final .brand-final-plan .plan-mini-step__popover::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: -14px !important;
    height: 14px !important;
    background: transparent !important;
}

/* Bottom plan: popover appears ABOVE the W1 (since bottom is near page end) */
html body .bio-final .bio-final-plan .plan-mini-step__popover,
html body .brand-final .brand-final-plan .plan-mini-step__popover {
    top: auto !important;
    bottom: calc(100% + 6px) !important;
    transform: translate(-50%, 4px) !important;
}
html body .bio-final .bio-final-plan .plan-mini-step__popover::before,
html body .brand-final .brand-final-plan .plan-mini-step__popover::before {
    top: auto !important;
    bottom: -6px !important;
    border-left: 0 !important;
    border-top: 0 !important;
    border-right: 1px solid rgba(148, 163, 184, 0.24) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.24) !important;
}
html body .bio-final .bio-final-plan .plan-mini-step__popover::after,
html body .brand-final .brand-final-plan .plan-mini-step__popover::after {
    top: auto !important;
    bottom: -14px !important;
}
html body .bio-final .bio-final-plan .plan-mini-step--w1:hover .plan-mini-step__popover,
html body .bio-final .bio-final-plan .plan-mini-step--w1:focus-within .plan-mini-step__popover,
html body .brand-final .brand-final-plan .plan-mini-step--w1:hover .plan-mini-step__popover,
html body .brand-final .brand-final-plan .plan-mini-step--w1:focus-within .plan-mini-step__popover {
    transform: translate(-50%, 0) !important;
}

html body .main-nav .nav-left .plan-mini-step--w1:hover .plan-mini-step__popover,
html body .bio-final .bio-final-plan .plan-mini-step--w1:hover .plan-mini-step__popover,
html body .brand-final .brand-final-plan .plan-mini-step--w1:hover .plan-mini-step__popover,
html body .main-nav .nav-left .plan-mini-step--w1:focus-within .plan-mini-step__popover,
html body .bio-final .bio-final-plan .plan-mini-step--w1:focus-within .plan-mini-step__popover,
html body .brand-final .brand-final-plan .plan-mini-step--w1:focus-within .plan-mini-step__popover,
html body .main-nav .nav-left .plan-mini-step--w1.is-popover-open .plan-mini-step__popover,
html body .bio-final .bio-final-plan .plan-mini-step--w1.is-popover-open .plan-mini-step__popover,
html body .brand-final .brand-final-plan .plan-mini-step--w1.is-popover-open .plan-mini-step__popover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) !important;
}

html body .main-nav .nav-left .plan-mini-step__popover-card,
html body .bio-final .bio-final-plan .plan-mini-step__popover-card,
html body .brand-final .brand-final-plan .plan-mini-step__popover-card {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: 7px !important;
    border-radius: 10px !important;
    color: #0f172a !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: background 0.16s ease, transform 0.16s ease !important;
}

html body .main-nav .nav-left .plan-mini-step__popover-card:hover,
html body .bio-final .bio-final-plan .plan-mini-step__popover-card:hover,
html body .brand-final .brand-final-plan .plan-mini-step__popover-card:hover {
    background: #f8fafc !important;
    transform: translateY(-1px) !important;
}

html body .main-nav .nav-left .plan-mini-step__popover-img,
html body .bio-final .bio-final-plan .plan-mini-step__popover-img,
html body .brand-final .brand-final-plan .plan-mini-step__popover-img {
    width: 64px !important;
    height: 48px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    background: #e2e8f0 !important;
}

html body .main-nav .nav-left .plan-mini-step__popover-text,
html body .bio-final .bio-final-plan .plan-mini-step__popover-text,
html body .brand-final .brand-final-plan .plan-mini-step__popover-text {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
}

html body .main-nav .nav-left .plan-mini-step__popover-title,
html body .bio-final .bio-final-plan .plan-mini-step__popover-title,
html body .brand-final .brand-final-plan .plan-mini-step__popover-title {
    display: block !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body .main-nav .nav-left .plan-mini-step__popover-desc,
html body .bio-final .bio-final-plan .plan-mini-step__popover-desc,
html body .brand-final .brand-final-plan .plan-mini-step__popover-desc {
    display: block !important;
    overflow: hidden !important;
    color: #64748b !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body .main-nav .nav-left .plan-mini-step__mobile-card,
html body .bio-final .bio-final-plan .plan-mini-step__mobile-card,
html body .brand-final .brand-final-plan .plan-mini-step__mobile-card {
    display: none !important;
}

@media (max-width: 1120px) {
    html body .main-nav .nav-left .plan-switcher {
        max-width: min(52vw, 320px) !important;
    }

    html body .main-nav .nav-left .plan-switcher__label {
        display: none !important;
    }

    html body .main-nav .nav-left .plan-mini-timeline {
        width: 100% !important;
        max-width: 320px !important;
    }
}

/* ── Plan eyebrow: lead-in heading above the bottom plan-switcher ───── */
.plan-eyebrow {
    margin: 32px auto 10px;
    text-align: center;
}
.plan-eyebrow::before {
    content: "";
    display: block;
    width: 88px;
    height: 1px;
    margin: 0 auto 14px;
    background: linear-gradient(90deg, transparent, rgba(15,23,42,0.14), transparent);
}
.plan-eyebrow__text {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: rgba(15,23,42,0.55);
}

/* Bottom plan timelines should not inherit nav separators, ticks, or button borders. */
html body .bio-final .bio-final-plan .plan-switcher__menu.svc-switcher__menu,
html body .brand-final .brand-final-plan .plan-switcher__menu.svc-switcher__menu,
html body .bio-final .bio-final-plan__menu,
html body .brand-final .brand-final-plan__menu {
    border: 1px solid rgba(148, 163, 184, 0.20) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

html body .bio-final .bio-final-plan .plan-switcher__label,
html body .brand-final .brand-final-plan .plan-switcher__label {
    border: 0 !important;
    box-shadow: none !important;
}

html body .bio-final .bio-final-plan .plan-switcher__label::after,
html body .brand-final .brand-final-plan .plan-switcher__label::after,
html body .bio-final .bio-final-plan .plan-mini-step__name::after,
html body .brand-final .brand-final-plan .plan-mini-step__name::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html body .bio-final .bio-final-plan .plan-mini-step,
html body .brand-final .brand-final-plan .plan-mini-step,
html body .bio-final .bio-final-plan a.plan-mini-step,
html body .brand-final .brand-final-plan a.plan-mini-step {
    border: 0 !important;
    box-shadow: none !important;
}

/* ── Bottom plan: collapsible trigger button (only shown at <480px) ─── */
html body .bio-final .bio-final-plan .plan-switcher__trigger--bottom,
html body .brand-final .brand-final-plan .plan-switcher__trigger--bottom {
    display: none !important;
}

/* ── Plan trigger mini-timeline (W1/W2/W3 chips inside the bottom trigger button) ── */
.plan-trigger-mini {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    height: 100%;
    padding: 0 8px;
}
.plan-trigger-mini::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 28px;
    right: 28px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--plan-w1), var(--plan-w2), var(--plan-w3));
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}
.plan-trigger-mini__step {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 38px;
    height: 26px;
    padding: 0 9px;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 0.08em;
    border-radius: 999px;
    background: #ffffff;
    border: 2px solid currentColor;
    line-height: 1;
}
.plan-trigger-mini__step--w1 { color: var(--plan-w1); }
.plan-trigger-mini__step--w2 { color: var(--plan-w2); }
.plan-trigger-mini__step--w3 { color: var(--plan-w3); }

/* Current state: parent .plan-switcher--w1/--w2/--w3 highlights matching step */
.plan-switcher--w1 .plan-trigger-mini__step--w1,
.plan-switcher--w2 .plan-trigger-mini__step--w2,
.plan-switcher--w3 .plan-trigger-mini__step--w3 {
    background: var(--plan-current);
    color: #ffffff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--plan-current) 30%, transparent);
}
/* Done states: steps before the current week show as filled */
.plan-switcher--w2 .plan-trigger-mini__step--w1,
.plan-switcher--w3 .plan-trigger-mini__step--w1 {
    background: var(--plan-w1);
    color: #ffffff;
}
.plan-switcher--w3 .plan-trigger-mini__step--w2 {
    background: var(--plan-w2);
    color: #ffffff;
}

/* ── Modal backdrop (shared by nav popover and bottom modal) ───── */
.plan-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 8000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.plan-modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ── Bottom plan RWD: 480-700px compact horizontal ─────────────────── */
@media (max-width: 700px) {
    html body .bio-final .bio-final-plan a.plan-switcher__label--link,
    html body .brand-final .brand-final-plan a.plan-switcher__label--link {
        font-size: 11px !important;
        padding: 5px 9px !important;
    }
    html body .bio-final .bio-final-plan .plan-mini-step,
    html body .brand-final .brand-final-plan .plan-mini-step,
    html body .bio-final .bio-final-plan a.plan-mini-step,
    html body .brand-final .brand-final-plan a.plan-mini-step,
    html body .bio-final .bio-final-plan span.plan-mini-step,
    html body .brand-final .brand-final-plan span.plan-mini-step {
        padding: 0 5px !important;
        gap: 4px !important;
    }
    html body .bio-final .bio-final-plan .plan-mini-step__week,
    html body .brand-final .brand-final-plan .plan-mini-step__week,
    html body .bio-final .bio-final-plan .plan-mini-step__name,
    html body .brand-final .brand-final-plan .plan-mini-step__name {
        font-size: 9.5px !important;
    }
}

/* ── Bottom plan RWD: one-line text timeline, same rhythm as desktop ─ */
@media (max-width: 480px) {
    html body .bio-final .bio-final-plan,
    html body .brand-final .brand-final-plan {
        position: relative !important;
        display: block !important;
        max-width: none !important;
        width: 100% !important;
    }

    html body .bio-final .bio-final-plan .plan-switcher__trigger--bottom,
    html body .brand-final .brand-final-plan .plan-switcher__trigger--bottom {
        display: none !important;
    }

    html body .bio-final .bio-final-plan .plan-switcher__menu.svc-switcher__menu,
    html body .brand-final .brand-final-plan .plan-switcher__menu.svc-switcher__menu {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 48px !important;
        padding: 0 8px !important;
        gap: 6px !important;
        overflow: visible !important;
        background: rgba(255, 255, 255, 0.78) !important;
        border: 1px solid rgba(148, 163, 184, 0.24) !important;
        border-radius: 999px !important;
        box-shadow: none !important;
    }

    html body .bio-final .bio-final-plan a.plan-switcher__label--link,
    html body .brand-final .brand-final-plan a.plan-switcher__label--link {
        display: none !important;
    }

    html body .bio-final .bio-final-plan .plan-mini-timeline,
    html body .brand-final .brand-final-plan .plan-mini-timeline {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: visible !important;
    }

    html body .bio-final .bio-final-plan .plan-mini-timeline::before,
    html body .brand-final .brand-final-plan .plan-mini-timeline::before {
        top: 50% !important;
        bottom: auto !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        height: 2px !important;
        transform: translateY(-50%) !important;
        background: linear-gradient(90deg, var(--plan-w1), var(--plan-w2), var(--plan-w3)) !important;
    }

    html body .bio-final .bio-final-plan .plan-mini-timeline::after,
    html body .brand-final .brand-final-plan .plan-mini-timeline::after {
        content: none !important;
        display: none !important;
    }

    html body .bio-final .bio-final-plan .plan-mini-step,
    html body .brand-final .brand-final-plan .plan-mini-step,
    html body .bio-final .bio-final-plan a.plan-mini-step,
    html body .brand-final .brand-final-plan a.plan-mini-step,
    html body .bio-final .bio-final-plan span.plan-mini-step,
    html body .brand-final .brand-final-plan span.plan-mini-step {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 0 !important;
        width: auto !important;
        height: 38px !important;
        min-width: 0 !important;
        padding: 0 2px !important;
        gap: 3px !important;
        white-space: nowrap !important;
    }

    html body .bio-final .bio-final-plan .plan-mini-step::before,
    html body .brand-final .brand-final-plan .plan-mini-step::before {
        display: block !important;
        flex: 0 0 auto !important;
        width: 11px !important;
        height: 11px !important;
        margin: 0 !important;
    }

    html body .bio-final .bio-final-plan .plan-mini-step__week,
    html body .brand-final .brand-final-plan .plan-mini-step__week,
    html body .bio-final .bio-final-plan .plan-mini-step__name,
    html body .brand-final .brand-final-plan .plan-mini-step__name,
    html body .bio-final .bio-final-plan .plan-mini-step__name a,
    html body .brand-final .brand-final-plan .plan-mini-step__name a,
    html body .bio-final .bio-final-plan .plan-mini-step__name span,
    html body .brand-final .brand-final-plan .plan-mini-step__name span {
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        color: inherit !important;
        font-size: 10px !important;
        line-height: 1 !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    html body .bio-final .bio-final-plan .plan-mini-step__week,
    html body .brand-final .brand-final-plan .plan-mini-step__week {
        min-width: 19px !important;
        font-weight: 900 !important;
    }

    html body .bio-final .bio-final-plan .plan-mini-step__name,
    html body .brand-final .brand-final-plan .plan-mini-step__name {
        font-weight: 850 !important;
    }

    html body .bio-final .bio-final-plan .plan-mini-step--w1 .plan-mini-step__popover,
    html body .brand-final .brand-final-plan .plan-mini-step--w1 .plan-mini-step__popover {
        left: 0 !important;
        right: auto !important;
        width: min(264px, calc(100vw - 36px)) !important;
        transform: translate(0, 4px) !important;
    }

    html body .bio-final .bio-final-plan .plan-mini-step--w1:hover .plan-mini-step__popover,
    html body .bio-final .bio-final-plan .plan-mini-step--w1:focus-within .plan-mini-step__popover,
    html body .brand-final .brand-final-plan .plan-mini-step--w1:hover .plan-mini-step__popover,
    html body .brand-final .brand-final-plan .plan-mini-step--w1:focus-within .plan-mini-step__popover,
    html body .bio-final .bio-final-plan .plan-mini-step--w1.is-popover-open .plan-mini-step__popover,
    html body .brand-final .brand-final-plan .plan-mini-step--w1.is-popover-open .plan-mini-step__popover {
        transform: translate(0, 0) !important;
    }

    html body .bio-final .bio-final-plan .plan-mini-step--w1 .plan-mini-step__popover::before,
    html body .brand-final .brand-final-plan .plan-mini-step--w1 .plan-mini-step__popover::before {
        left: 26px !important;
        transform: rotate(45deg) !important;
    }
}

/* Portaled shell = centered modal at body level. The actual menu stays inside a
   copied `.main-nav .nav-left .plan-switcher` ancestor chain so it uses the
   exact same rules as the nav dropdown; the shell only positions it. */
.plan-modal-portal {
    --plan-w1: #7c3aed;
    --plan-w2: #f59e0b;
    --plan-w3: #059669;
    --plan-current: var(--plan-w1);
}
.plan-modal-portal.plan-switcher--w1 { --plan-current: var(--plan-w1); }
.plan-modal-portal.plan-switcher--w2 { --plan-current: var(--plan-w2); }
.plan-modal-portal.plan-switcher--w3 { --plan-current: var(--plan-w3); }
.plan-modal-portal.plan-switcher--home {
    --plan-current: #64748b;
    --plan-progress: 0;
}
.plan-modal-portal.plan-switcher--w1 { --plan-progress: 0; }
.plan-modal-portal.plan-switcher--w2 { --plan-progress: 0.5; }
.plan-modal-portal.plan-switcher--w3 { --plan-progress: 1; }

/* (Centered-modal positioning rule moved below the @media (max-width: 700px) block
   so it wins via source order over the nav-dropdown's anchored positioning.) */

/* Elevate nav stacking context above backdrop so the dropdown / modal is visible.
   `.main-nav` is already `position: sticky` and has `will-change: transform`,
   both of which create a stacking context that would otherwise sit below
   `.plan-modal-backdrop` (z-index: 8000). */
html body .main-nav {
    z-index: 9000;
}

@media (max-width: 700px) {
    html body .main-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    html body .main-nav .nav-left {
        display: flex !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    html body .main-nav .nav-right,
    html body .main-nav .nav-link--cta {
        display: none !important;
    }

    html body .main-nav .logo-img-link {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        margin-right: 8px !important;
    }

    html body .main-nav .nav-left .plan-switcher,
    html body .plan-modal-portal .plan-switcher {
        flex: 0 0 auto !important;
        max-width: none !important;
        margin-left: auto !important;
    }

    html body .main-nav .nav-left .plan-switcher__trigger.svc-switcher__btn.toolkit-switcher-btn,
    html body .plan-modal-portal .plan-switcher__trigger.svc-switcher__btn.toolkit-switcher-btn {
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        height: 42px !important;
        padding: 0 12px !important;
        gap: 8px !important;
        color: var(--plan-ink) !important;
        background:
            linear-gradient(#ffffff, #ffffff) padding-box,
            linear-gradient(110deg, rgba(124, 58, 237, 0.52), rgba(245, 158, 11, 0.46), rgba(5, 150, 105, 0.42)) border-box !important;
        border: 1px solid transparent !important;
        border-radius: 10px !important;
        box-shadow: 0 8px 20px rgba(124, 58, 237, 0.10) !important;
        font-size: 16px !important;
        font-weight: 800 !important;
    }

    html body .main-nav .nav-left .plan-switcher__trigger.svc-switcher__btn.toolkit-switcher-btn::before,
    html body .plan-modal-portal .plan-switcher__trigger.svc-switcher__btn.toolkit-switcher-btn::before {
        content: none !important;
    }

    html body .main-nav .nav-left .plan-switcher__trigger .svc-switcher__chevron,
    html body .plan-modal-portal .plan-switcher__trigger .svc-switcher__chevron {
        display: block !important;
        color: var(--plan-muted) !important;
    }

    html body .main-nav .nav-left .plan-switcher__menu.svc-switcher__menu {
        display: none !important;
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: auto !important;
        right: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: min(320px, calc(100vw - 28px)) !important;
        max-width: min(320px, calc(100vw - 28px)) !important;
        height: auto !important;
        padding: 12px !important;
        gap: 12px !important;
        overflow: visible !important;
        border: 1px solid rgba(15, 23, 42, 0.12) !important;
        background: #ffffff !important;
        border-radius: 14px !important;
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16) !important;
    }

    html body .main-nav .nav-left .plan-switcher__menu.svc-switcher__menu.svc-switcher__menu--open {
        display: flex !important;
        z-index: 9000 !important;
    }

    html body .main-nav .nav-left .plan-switcher__menu.svc-switcher__menu.svc-switcher__menu--open > .plan-switcher__label--link,
    html body .plan-modal-portal .plan-switcher__menu.svc-switcher__menu.svc-switcher__menu--open > .plan-switcher__label--link {
        display: inline-flex !important;
        align-items: center !important;
        align-self: flex-start !important;
        gap: 7px !important;
        margin: 0 0 2px !important;
    }

    html body .main-nav .nav-left .plan-mini-step__popover,
    html body .plan-modal-portal .plan-mini-step__popover {
        display: none !important;
    }

    html body .main-nav .nav-left .plan-mini-timeline,
    html body .plan-modal-portal .plan-mini-timeline {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 0 !important;
        grid-template-columns: none !important;
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .main-nav .nav-left .plan-mini-timeline::before,
    html body .plan-modal-portal .plan-mini-timeline::before {
        top: 18px !important;
        bottom: 18px !important;
        left: 17px !important;
        right: auto !important;
        width: 2px !important;
        height: auto !important;
        transform: none !important;
        /* line is 2px wide vertical bar — use vertical gradient (180deg) so all
           three week colours show top → bottom (90deg horizontal would render
           just one colour across the 2px width). */
        background: linear-gradient(180deg, var(--plan-w1), var(--plan-w2), var(--plan-w3)) !important;
    }

    html body .main-nav .nav-left .plan-mini-timeline::after,
    html body .plan-modal-portal .plan-mini-timeline::after {
        content: none !important;
        display: none !important;
    }

    html body .main-nav .nav-left .plan-mini-step,
    html body .plan-modal-portal .plan-mini-step,
    html body .main-nav .nav-left a.plan-mini-step,
    html body .plan-modal-portal a.plan-mini-step,
    html body .main-nav .nav-left span.plan-mini-step,
    html body .plan-modal-portal span.plan-mini-step {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        min-height: 38px !important;
        padding: 0 0 0 12px !important;
        gap: 8px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    html body .main-nav .nav-left .plan-mini-step::before,
    html body .plan-modal-portal .plan-mini-step::before {
        width: 12px !important;
        height: 12px !important;
        border-width: 2.5px !important;
        box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.14) !important;
    }

    html body .main-nav .nav-left .plan-mini-step.is-current::before,
    html body .plan-modal-portal .plan-mini-step.is-current::before {
        background: var(--plan-current) !important;
        border-color: #ffffff !important;
        box-shadow:
            0 0 0 3px color-mix(in srgb, var(--plan-current) 32%, transparent),
            0 0 0 7px color-mix(in srgb, var(--plan-current) 14%, transparent) !important;
    }

    /* `is-done` (completed weeks): fill the circle in the step's colour */
    html body .main-nav .nav-left .plan-mini-step.is-done::before,
    html body .plan-modal-portal .plan-mini-step.is-done::before {
        background: var(--step-color) !important;
        border-color: var(--step-color) !important;
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-color) 14%, transparent) !important;
    }

    html body .main-nav .nav-left .plan-mini-step__week,
    html body .plan-modal-portal .plan-mini-step__week {
        background: #ffffff !important;
        min-width: 24px !important;
        font-size: 10.5px !important;
    }

    html body .main-nav .nav-left .plan-mini-step__name,
    html body .plan-modal-portal .plan-mini-step__name {
        background: #ffffff !important;
        font-size: 11px !important;
        max-width: none !important;
    }

    html body .main-nav .nav-left .plan-mini-step.is-current .plan-mini-step__week,
    html body .plan-modal-portal .plan-mini-step.is-current .plan-mini-step__week,
    html body .main-nav .nav-left .plan-mini-step.is-current .plan-mini-step__name,
    html body .plan-modal-portal .plan-mini-step.is-current .plan-mini-step__name {
        color: var(--plan-current) !important;
        font-weight: 950 !important;
    }

    html body .main-nav .nav-left .plan-mini-step.is-current .plan-mini-step__name::after,
    html body .plan-modal-portal .plan-mini-step.is-current .plan-mini-step__name::after {
        content: "目前" !important;
        display: inline-block !important;
        margin-left: 6px !important;
        padding: 2px 7px !important;
        border-radius: 999px !important;
        background: color-mix(in srgb, var(--plan-current) 14%, #ffffff) !important;
        color: var(--plan-current) !important;
        font-size: 9px !important;
        font-weight: 900 !important;
        line-height: 1.3 !important;
        vertical-align: baseline !important;
        letter-spacing: 0.04em !important;
        position: relative !important;
        top: -1px !important;
    }

    html body .main-nav .nav-left .plan-mini-step__popover,
    html body .plan-modal-portal .plan-mini-step__popover {
        position: static !important;
        display: grid !important;
        flex: 0 0 100% !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 0 0 0 32px !important;
        margin: 0 0 8px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        transition: none !important;
    }

    html body .main-nav .nav-left .plan-mini-step__mobile-card,
    html body .plan-modal-portal .plan-mini-step__mobile-card {
        display: grid !important;
        flex: 0 0 calc(100% - 32px) !important;
        grid-template-columns: 72px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 10px !important;
        width: calc(100% - 32px) !important;
        padding: 8px !important;
        margin: 0 0 8px !important;
        margin-left: 32px !important;
        border: 1px solid rgba(148, 163, 184, 0.20) !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
        color: #0f172a !important;
    }

    html body .main-nav .nav-left .plan-mini-step.is-current .plan-mini-step__mobile-card,
    html body .plan-modal-portal .plan-mini-step.is-current .plan-mini-step__mobile-card,
    html body .main-nav .nav-left .plan-mini-step.is-current .plan-mini-step__popover-card,
    html body .plan-modal-portal .plan-mini-step.is-current .plan-mini-step__popover-card {
        border-color: color-mix(in srgb, var(--plan-current) 36%, rgba(148, 163, 184, 0.20)) !important;
        background: color-mix(in srgb, var(--plan-current) 8%, #ffffff) !important;
        box-shadow: 0 8px 18px color-mix(in srgb, var(--plan-current) 12%, transparent) !important;
    }

    html body .main-nav .nav-left .plan-mini-step__mobile-img,
    html body .plan-modal-portal .plan-mini-step__mobile-img {
        display: block !important;
        width: 72px !important;
        height: 54px !important;
        border-radius: 8px !important;
        object-fit: cover !important;
        background: #e2e8f0 !important;
    }

    html body .main-nav .nav-left .plan-mini-step__mobile-text,
    html body .plan-modal-portal .plan-mini-step__mobile-text {
        display: grid !important;
        gap: 3px !important;
        min-width: 0 !important;
    }

    html body .main-nav .nav-left .plan-mini-step__mobile-title,
    html body .plan-modal-portal .plan-mini-step__mobile-title {
        display: block !important;
        color: #0f172a !important;
        font-size: 0.8rem !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
    }

    html body .main-nav .nav-left .plan-mini-step__mobile-desc,
    html body .plan-modal-portal .plan-mini-step__mobile-desc {
        display: block !important;
        color: #64748b !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        white-space: nowrap !important;
    }

    html body .main-nav .nav-left .plan-mini-step__popover::before,
    html body .plan-modal-portal .plan-mini-step__popover::before,
    html body .main-nav .nav-left .plan-mini-step__popover::after,
    html body .plan-modal-portal .plan-mini-step__popover::after {
        content: none !important;
        display: none !important;
    }

    html body .main-nav .nav-left .plan-mini-step__popover-card,
    html body .plan-modal-portal .plan-mini-step__popover-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        padding: 8px !important;
        border: 1px solid rgba(148, 163, 184, 0.20) !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
    }

    html body .main-nav .nav-left .plan-mini-step__popover-img,
    html body .plan-modal-portal .plan-mini-step__popover-img {
        width: 100% !important;
        height: 54px !important;
    }

    html body .main-nav .nav-left .plan-mini-step__popover-title,
    html body .plan-modal-portal .plan-mini-step__popover-title {
        color: #0f172a !important;
        font-size: 0.8rem !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
    }

    html body .main-nav .nav-left .plan-mini-step__popover-desc,
    html body .plan-modal-portal .plan-mini-step__popover-desc {
        display: block !important;
        color: #64748b !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        white-space: nowrap !important;
    }
}

/* Centered positioning for the portaled nav shell. */
html body .plan-modal-portal.main-nav {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(320px, calc(100vw - 28px)) !important;
    max-width: min(320px, calc(100vw - 28px)) !important;
    max-height: 86vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    z-index: 9000 !important;
}

html body .plan-modal-portal.main-nav .nav-left {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

html body .plan-modal-portal.main-nav .nav-left .plan-switcher {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

html body .plan-modal-portal.main-nav .nav-left .plan-switcher__menu.svc-switcher__menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 86vh !important;
    overflow-y: auto !important;
}

/* ── Page wrapper ─────────────────────────────────────────── */
.main { }
.page { padding: 28px 16px 30px; }

/* ── Main card ────────────────────────────────────────────── */
.main-card {
    background: var(--white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 36px 32px;
    max-width: 1060px;
    margin: 0 auto;
}

/* ── Two-column grid ──────────────────────────────────────── */
.body-row {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
}
.col-left  { flex: 1 1 340px; min-width: 0; }
.col-right { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 0; }

/* ── Title block ──────────────────────────────────────────── */
.main-title {
    text-align: center;
    margin-bottom: 28px;
}
.main-title h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
}
.brand-name        { color: var(--primary); }
.underline-emphasis {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--primary);
    text-underline-offset: 4px;
}
.main-title h2 {
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* ── Badge ────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 700;
    padding: 5px 15px;
    vertical-align: middle;
    line-height: 1;
}
.badge-primary { background: var(--primary); color: var(--white); }
.badge-ghost   { background: rgba(255,255,255,.25); color: var(--white); }

@keyframes shine {
    0%, 100% { opacity: 1; }
    50%       { opacity: .7; }
}
.shine-effect { animation: shine 2.5s infinite; }

/* ── Hero image block ─────────────────────────────────────── */
.hero-image-wrap {
    border-radius: 12px;
    overflow: hidden;
    background: var(--primary-light);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
}
.hero-image-wrap img {
    max-height: 320px;
    width: auto;
    margin: 0 auto;
    object-fit: contain;
    display: block;
}

/* ── Hero description under image ─────────────────────────── */
.hero-desc {
    text-align: center;
    padding: 12px 8px 0;
}
.hero-desc h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 6px;
}
.hero-desc p {
    font-size: .88rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
}

/* ── Feature icons ────────────────────────────────────────── */
.features {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 12px;
    margin: 20px 0 4px;
}
.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    font-size: .88rem;
    color: var(--text);
}
.feature-item i { font-size: 1.7rem; color: var(--primary); }
.feature-item p { margin: 0; }

/* ── Value props ──────────────────────────────────────────── */
.value-props {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.value-prop-item {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px 16px 48px;
    position: relative;
    background: var(--white);
    transition: border-color .2s, box-shadow .2s;
}
.value-prop-item:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 12px rgba(42,181,160,.12);
}
.value-prop-item::before {
    content: '\f058';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--primary);
    position: absolute;
    left: 16px;
    top: 16px;
    font-size: 1.1rem;
}
.value-prop-item h3 {
    font-size: .97rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--text);
}
.value-prop-item p {
    font-size: .85rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
}

/* ── CTA button ───────────────────────────────────────────── */
.cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--primary);
    color: var(--white);
    padding: 17px 24px;
    border-radius: var(--radius-btn);
    font-size: 1.15rem;
    font-weight: 700;
    width: 100%;
    margin-top: auto;
    transition: background .2s;
}
.cta-button:hover { background: var(--primary-dark); color: var(--white); }

/* ── Footer ───────────────────────────────────────────────── */
.footer {
    background: var(--white);
    box-shadow: 0 -2px 10px rgba(0,0,0,.06);
    padding-top: 28px;
}
.footer-top {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    justify-content: center;
}
.footer-logo img   { height: 52px; width: auto; }
.footer-about {
    flex: 1;
    min-width: 220px;
    font-size: .86rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}
.footer-offices {
    background: #f5faf9;
    padding: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}
.footer-office h5 {
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: 4px;
    color: var(--text);
}
.footer-office p  { font-size: .84rem; color: var(--text-muted); margin: 0; line-height: 1.7; }
.footer-office a  { display: block; font-size: .84rem; color: var(--primary); }
.footer-office a:hover { text-decoration: underline; }
.footer-copy {
    background: var(--primary);
    color: var(--white);
    text-align: center;
    padding: 10px 16px;
    font-size: .85rem;
}

/* ── Display helpers ──────────────────────────────────────── */
.d-none { display: none !important; }
@media (min-width: 768px)  { .d-md-inline { display: inline !important; } }
@media (min-width: 1200px) { .d-xl-block  { display: block  !important; } }

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 640px) {
    .main-card   { padding: 20px 14px; }
    .main-title h1 { font-size: 1.45rem; }
    .cta-button  { font-size: 1rem; padding: 15px 16px; }
    .footer-offices { flex-direction: column; gap: 24px; align-items: center; text-align: center; }
    .hero-image-wrap img { max-height: 220px; }
}

/* ════════════════════════════════════════════════════════════
   21-day journey nav — single-row stepper.
   Scoped under #svc-switcher-menu.journey-nav so ID specificity
   beats the legacy class-based !important rules without us
   needing !important on every property.
   ════════════════════════════════════════════════════════════ */

#svc-switcher-menu.journey-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    height: 52px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Title block — quiet label + soft icon, with a vertical rule separating it
   from the journey. Not a button. */
/* The page's main title — clickable surface with the same hover-oval as
   W2/W3, sized larger to sit at the top of the nav hierarchy. */
#svc-switcher-menu.journey-nav a.journey-nav__title,
#svc-switcher-menu.journey-nav .journey-nav__title {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    height: 44px !important;
    padding: 0 14px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    color: #0f172a !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background 0.16s ease, border-color 0.16s ease !important;
}
#svc-switcher-menu.journey-nav a.journey-nav__title:hover,
#svc-switcher-menu.journey-nav a.journey-nav__title:focus-visible {
    background: #ffffff !important;
    border-color: rgba(148, 163, 184, 0.45) !important;
    outline: none !important;
}
#svc-switcher-menu.journey-nav .journey-nav__title-stack {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
    line-height: 1 !important;
}
#svc-switcher-menu.journey-nav .journey-nav__title-eyebrow {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    font-feature-settings: "tnum" 1, "lnum" 1 !important;
}
#svc-switcher-menu.journey-nav .journey-nav__title-text {
    color: #0f172a !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    letter-spacing: -0.005em !important;
    line-height: 1 !important;
    background: transparent !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
}
#svc-switcher-menu.journey-nav .journey-nav__title-rule {
    flex: 0 0 auto !important;
    width: 1px !important;
    height: 26px !important;
    margin-left: 4px !important;
    background: rgba(148, 163, 184, 0.42) !important;
    border-radius: 1px !important;
}

/* The journey track — owns all step + arrow layout. Reset the inherited
   timeline styles so nothing from the legacy progress-bar rules leaks in. */
#svc-switcher-menu.journey-nav .journey-nav__list {
    flex: 0 1 auto !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
    height: 52px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 4px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}
/* Kill the legacy progress track and gradient overlay. */
#svc-switcher-menu.journey-nav .journey-nav__list::before,
#svc-switcher-menu.journey-nav .journey-nav__list::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    height: 0 !important;
    width: 0 !important;
}

/* Each step. */
#svc-switcher-menu.journey-nav .journey-step,
#svc-switcher-menu.journey-nav a.journey-step,
#svc-switcher-menu.journey-nav span.journey-step {
    position: relative !important;
    z-index: 1 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    height: 40px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #475569 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    cursor: default;
}
#svc-switcher-menu.journey-nav a.journey-step { cursor: pointer; }
#svc-switcher-menu.journey-nav a.journey-step:hover {
    background: #ffffff !important;
    border-color: color-mix(in srgb, currentColor 32%, transparent) !important;
}
#svc-switcher-menu.journey-nav .journey-step--w1 { color: var(--plan-w1) !important; }
#svc-switcher-menu.journey-nav .journey-step--w2 { color: var(--plan-w2) !important; }
#svc-switcher-menu.journey-nav .journey-step--w3 { color: var(--plan-w3) !important; }

/* "WEEK N" — pure typographic badge, no pill chrome.
   All badges share one unified dark-green tone (regardless of which week)
   for a sophisticated, editorial feel. The per-week brand colours stay
   reserved for hover / is-current / is-done states. */
#svc-switcher-menu.journey-nav .journey-step__badge {
    --badge-ink: #047857;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 5px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--badge-ink) !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
#svc-switcher-menu.journey-nav .journey-step__badge-side {
    display: inline-flex !important;
    align-items: baseline !important;
    color: color-mix(in srgb, var(--badge-ink) 55%, #94a3b8) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}
#svc-switcher-menu.journey-nav .journey-step__badge-num {
    position: relative !important;
    display: inline-flex !important;
    align-items: baseline !important;
    color: var(--badge-ink) !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    font-feature-settings: "tnum" 1, "lnum" 1 !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
}
/* Subtle 2px accent under the digit — sits in absolute positioning so it
   doesn't push the baseline. Gives the number a "bookmark" feel without
   becoming a pill. */
#svc-switcher-menu.journey-nav .journey-step__badge-num::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -3px !important;
    height: 2px !important;
    border-radius: 1px !important;
    background: var(--badge-ink) !important;
    opacity: 0.55 !important;
}
#svc-switcher-menu.journey-nav .journey-step.is-done .journey-step__badge-num::after {
    opacity: 0 !important;
}
#svc-switcher-menu.journey-nav .journey-step.is-done .journey-step__badge-side,
#svc-switcher-menu.journey-nav .journey-step.is-done .journey-step__badge-num {
    color: color-mix(in srgb, var(--badge-ink) 55%, #94a3b8) !important;
}

/* Hide the legacy CSS-only dot — replaced by the numbered badge. */
#svc-switcher-menu.journey-nav .journey-step::before {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

#svc-switcher-menu.journey-nav .journey-step__name {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    flex: 0 0 auto !important;
    height: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    line-height: 1 !important;
    overflow: visible !important;
}

/* "2 任務" affordance. */
#svc-switcher-menu.journey-nav .journey-step__hint {
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    height: 26px !important;
    margin: 0 0 0 6px !important;
    padding: 0 11px !important;
    border: 1px dashed color-mix(in srgb, var(--plan-w1) 55%, transparent) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--plan-w1) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
    box-shadow: none !important;
}
#svc-switcher-menu.journey-nav .journey-step__hint::before {
    content: "▾" !important;
    font-size: 12px !important;
    line-height: 1 !important;
}
#svc-switcher-menu.journey-nav .journey-step__hint:hover,
#svc-switcher-menu.journey-nav .journey-step__hint:focus-visible {
    background: color-mix(in srgb, var(--plan-w1) 10%, #ffffff) !important;
    border-style: solid !important;
    transform: translateY(-1px) !important;
    outline: none !important;
}
#svc-switcher-menu.journey-nav .journey-step--w1.is-popover-open .journey-step__hint {
    background: color-mix(in srgb, var(--plan-w1) 16%, #ffffff) !important;
    border-style: solid !important;
}
#svc-switcher-menu.journey-nav .journey-step--w1.is-popover-open .journey-step__hint::before {
    content: "▴" !important;
}

/* Real arrows between steps. */
#svc-switcher-menu.journey-nav .journey-nav__arrow {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 6px !important;
    padding: 0 !important;
    color: #cbd5e1 !important;
    background: transparent !important;
    border: 0 !important;
    pointer-events: none !important;
}
#svc-switcher-menu.journey-nav .journey-nav__arrow svg { display: block !important; }

/* Popover stays anchored under W1. */
#svc-switcher-menu.journey-nav .plan-mini-step__popover { z-index: 1000 !important; }

/* Tighten on narrow desktops. */
@media (max-width: 1180px) {
    #svc-switcher-menu.journey-nav a.journey-nav__title,
    #svc-switcher-menu.journey-nav .journey-nav__title { height: 40px !important; padding: 0 11px !important; }
    #svc-switcher-menu.journey-nav .journey-nav__title-text { font-size: 18px !important; }
    #svc-switcher-menu.journey-nav .journey-nav__title-eyebrow { font-size: 10px !important; letter-spacing: 0.16em !important; }
    #svc-switcher-menu.journey-nav .journey-step { height: 38px !important; padding: 0 10px !important; }
    #svc-switcher-menu.journey-nav .journey-step { padding: 0 8px !important; gap: 8px !important; }
    #svc-switcher-menu.journey-nav .journey-step__name { font-size: 15px !important; }
    #svc-switcher-menu.journey-nav .journey-step__badge { gap: 4px !important; }
    #svc-switcher-menu.journey-nav .journey-step__badge-side { font-size: 10px !important; letter-spacing: 0.12em !important; }
    #svc-switcher-menu.journey-nav .journey-step__badge-num { font-size: 19px !important; }
    #svc-switcher-menu.journey-nav .journey-nav__arrow { margin: 0 3px !important; }
}

@media (max-width: 980px) {
    #svc-switcher-menu.journey-nav .journey-step__badge-side { display: none !important; }
}

/* ════════════════════════════════════════════════════════════
   Shared main-nav chrome (logo, hamburger trigger, CTA button,
   dev badge mobile sizing). Previously inline in index.html;
   moved here so the nav looks identical across all 5 pages.
   ════════════════════════════════════════════════════════════ */
.main-nav {
    flex-wrap: nowrap !important;
    padding: 8px 20px;
    min-height: 56px;
    transition: transform 0.28s ease, box-shadow 0.24s ease, border-color 0.24s ease;
    will-change: transform;
}
.main-nav.nav-hidden {
    transform: translateY(-110%);
}
.main-nav.nav-away-from-hero {
    box-shadow: 0 4px 18px rgba(15,23,42,0.08);
    border-bottom-color: rgba(203,213,225,0.95);
}
.main-nav .nav-left {
    flex: 1;
    flex-wrap: nowrap;
    min-width: 0;
    width: auto !important;
}
.main-nav .nav-right {
    flex-shrink: 0;
    width: auto !important;
    margin-top: 0 !important;
    gap: 10px;
}

/* Toolkit switcher: text on desktop, hamburger in RWD. */
.svc-switcher__btn.toolkit-switcher-btn {
    width: auto;
    min-width: 138px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(15,23,42,0.16);
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    gap: 8px;
    color: var(--bio-text, #0f172a);
}
.svc-switcher__btn.toolkit-switcher-btn::before { content: none; }
.svc-switcher__btn.toolkit-switcher-btn .svc-switcher__chevron { display: block; }
.svc-switcher__btn.toolkit-switcher-btn:hover {
    border-color: rgba(15,23,42,0.32);
    background: rgba(15,23,42,0.04);
}

.main-nav .nav-link--cta {
    background: linear-gradient(135deg, var(--bio-amber, #f59e0b) 0%, var(--bio-amber-2, #f97316) 100%);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(245,158,11,0.30);
    border: none;
}
.main-nav .nav-link--cta:hover {
    background: linear-gradient(135deg, var(--bio-amber-3, #ea580c) 0%, var(--bio-amber-2, #f97316) 100%);
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(245,158,11,0.40);
}

@media (max-width: 640px) {
    .main-nav {
        padding: 6px 14px;
        min-height: 50px;
    }
    .logo-img { width: 104px; }
    .logo-img-link { margin-left: 2px; margin-right: 6px; }
    .svc-switcher__btn.toolkit-switcher-btn {
        width: 38px;
        min-width: 0;
        height: 38px;
        padding: 0;
        font-size: 0;
        gap: 0;
        color: transparent;
        background: transparent;
        justify-content: center;
    }
    .svc-switcher__btn.toolkit-switcher-btn::before {
        content: '';
        width: 20px;
        height: 14px;
        background-image:
            linear-gradient(currentColor, currentColor),
            linear-gradient(currentColor, currentColor),
            linear-gradient(currentColor, currentColor);
        background-size: 100% 2px;
        background-repeat: no-repeat;
        background-position: top, center, bottom;
        color: #0f172a;
        display: block;
    }
    .svc-switcher__btn.toolkit-switcher-btn .svc-switcher__chevron { display: none; }
    .main-nav .nav-link--cta {
        padding: 6px 12px;
        font-size: 14px;
    }
    .onepage-dev-badge {
        font-size: 11px;
        padding: 3px 8px;
    }
}

/* Highlight the current step with a brand-colored ring even when no
   per-week colour is applied. Used by main-nav.js's data-current-week. */
#svc-switcher-menu.journey-nav .journey-step.is-current .journey-step__badge {
    --badge-ink: #047857;
}
#svc-switcher-menu.journey-nav .journey-step--w1.is-current .journey-step__badge { --badge-ink: var(--plan-w1, #7c3aed); }
#svc-switcher-menu.journey-nav .journey-step--w2.is-current .journey-step__badge { --badge-ink: var(--plan-w2, #f59e0b); }
#svc-switcher-menu.journey-nav .journey-step--w3.is-current .journey-step__badge { --badge-ink: var(--plan-w3, #059669); }

#svc-switcher-menu.journey-nav .journey-step.is-current {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: color-mix(in srgb, var(--badge-ink, #047857) 30%, transparent) !important;
}

/* ════════════════════════════════════════════════════════════
   Mobile (≤ 700px): the journey-nav becomes a tap-to-open
   dropdown. Hidden by default; the hamburger trigger toggles
   .svc-switcher__menu--open which switches it to a vertical list.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    #svc-switcher-menu.journey-nav {
        display: none !important;
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        padding: 12px !important;
        background: #ffffff !important;
        border: 1px solid rgba(148, 163, 184, 0.3) !important;
        border-radius: 14px !important;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18) !important;
        z-index: 9100 !important;
    }
    #svc-switcher-menu.journey-nav.svc-switcher__menu--open {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    /* Title block stretches and aligns left in the dropdown. */
    #svc-switcher-menu.journey-nav.svc-switcher__menu--open a.journey-nav__title,
    #svc-switcher-menu.journey-nav.svc-switcher__menu--open .journey-nav__title {
        width: 100% !important;
        height: auto !important;
        padding: 8px 12px !important;
        justify-content: flex-start !important;
        border-radius: 10px !important;
    }

    /* Vertical rule between title and list — irrelevant in a column layout. */
    #svc-switcher-menu.journey-nav.svc-switcher__menu--open .journey-nav__title-rule {
        display: none !important;
    }

    /* Step list goes column. */
    #svc-switcher-menu.journey-nav.svc-switcher__menu--open .journey-nav__list {
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important;
        gap: 4px !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Each step becomes a full-width row. */
    #svc-switcher-menu.journey-nav.svc-switcher__menu--open .journey-step,
    #svc-switcher-menu.journey-nav.svc-switcher__menu--open a.journey-step,
    #svc-switcher-menu.journey-nav.svc-switcher__menu--open span.journey-step {
        width: 100% !important;
        height: 46px !important;
        padding: 0 12px !important;
        justify-content: flex-start !important;
        border-radius: 10px !important;
    }

    /* Horizontal chevrons make no sense in a vertical list. */
    #svc-switcher-menu.journey-nav.svc-switcher__menu--open .journey-nav__arrow {
        display: none !important;
    }
}

/* Reference nav layout: compact 21-day journey strip. */
html body .main-nav .nav-left .plan-switcher {
    --plan-w1: #2f8d7d !important;
    --plan-w2: #d89a3f !important;
    --plan-w3: #2f8d7d !important;
    --plan-task: #8b5cf6 !important;
    max-width: none !important;
}

html body #svc-switcher-menu.journey-nav {
    display: inline-flex !important;
    align-items: center !important;
    height: 58px !important;
    gap: 18px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body #svc-switcher-menu.journey-nav .journey-nav__title {
    height: 58px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

html body #svc-switcher-menu.journey-nav .journey-nav__title:hover,
html body #svc-switcher-menu.journey-nav .journey-nav__title:focus-visible {
    background: transparent !important;
    border-color: transparent !important;
}

html body #svc-switcher-menu.journey-nav .journey-nav__title-stack {
    gap: 3px !important;
}

html body #svc-switcher-menu.journey-nav .journey-nav__title-eyebrow {
    color: #64748b !important;
    font-family: 'Outfit', 'Noto Sans TC', sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    line-height: 1 !important;
}

html body #svc-switcher-menu.journey-nav .journey-nav__title-text {
    color: #0f172a !important;
    font-family: 'Outfit', 'Noto Sans TC', sans-serif !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 0.95 !important;
    text-shadow: none !important;
}

html body #svc-switcher-menu.journey-nav .journey-nav__title-rule {
    width: 2px !important;
    height: 38px !important;
    margin: 0 8px 0 2px !important;
    background: #cbd5e1 !important;
    opacity: 0.85 !important;
}

html body #svc-switcher-menu.journey-nav .journey-nav__list {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    height: 58px !important;
    padding: 0 !important;
}

html body #svc-switcher-menu.journey-nav .journey-step,
html body #svc-switcher-menu.journey-nav a.journey-step,
html body #svc-switcher-menu.journey-nav span.journey-step {
    height: 48px !important;
    min-width: 0 !important;
    padding: 0 10px !important;
    gap: 12px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #0f172a !important;
}

html body #svc-switcher-menu.journey-nav .journey-step.is-current {
    padding: 0 22px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: #bdd8d2 !important;
    box-shadow: inset 0 0 0 1px rgba(189, 216, 210, 0.55) !important;
}

html body #svc-switcher-menu.journey-nav a.journey-step:hover {
    background: rgba(255, 255, 255, 0.64) !important;
    border-color: #d1ddd9 !important;
}

html body #svc-switcher-menu.journey-nav .journey-step__badge {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    color: var(--step-ink, var(--plan-w1)) !important;
}

html body #svc-switcher-menu.journey-nav .journey-step--w1,
html body #svc-switcher-menu.journey-nav .journey-step--w1 .journey-step__badge {
    --step-ink: var(--plan-w1);
}

html body #svc-switcher-menu.journey-nav .journey-step--w2,
html body #svc-switcher-menu.journey-nav .journey-step--w2 .journey-step__badge {
    --step-ink: var(--plan-w2);
}

html body #svc-switcher-menu.journey-nav .journey-step--w3,
html body #svc-switcher-menu.journey-nav .journey-step--w3 .journey-step__badge {
    --step-ink: var(--plan-w3);
}

html body #svc-switcher-menu.journey-nav .journey-step__badge-side {
    color: color-mix(in srgb, var(--step-ink) 82%, #64748b) !important;
    font-family: 'Outfit', 'Noto Sans TC', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    line-height: 1 !important;
}

html body #svc-switcher-menu.journey-nav .journey-step__badge-num {
    color: var(--step-ink) !important;
    font-family: 'Outfit', 'Noto Sans TC', sans-serif !important;
    font-size: 36px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 0.9 !important;
}

html body #svc-switcher-menu.journey-nav .journey-step__badge-num::after {
    left: 3px !important;
    right: 3px !important;
    bottom: -6px !important;
    height: 3px !important;
    background: var(--step-ink) !important;
    opacity: 0.48 !important;
}

html body #svc-switcher-menu.journey-nav .journey-step__name {
    color: #0f172a !important;
    font-family: 'Outfit', 'Noto Sans TC', sans-serif !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

html body #svc-switcher-menu.journey-nav .journey-step__hint {
    height: 36px !important;
    margin-left: 14px !important;
    padding: 0 16px !important;
    gap: 8px !important;
    border: 2px dashed color-mix(in srgb, var(--plan-task) 62%, #ffffff) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #7c3aed !important;
    font-family: 'Outfit', 'Noto Sans TC', sans-serif !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    transform: none !important;
}

html body #svc-switcher-menu.journey-nav .journey-step__hint::before {
    content: none !important;
    display: none !important;
}

html body #svc-switcher-menu.journey-nav .journey-step__hint-icon {
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 7px solid currentColor !important;
}

html body #svc-switcher-menu.journey-nav .journey-step__hint-text {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

html body #svc-switcher-menu.journey-nav .journey-step--w1.is-popover-open .journey-step__hint-icon {
    transform: rotate(180deg) !important;
}

html body #svc-switcher-menu.journey-nav .journey-nav__arrow {
    width: 22px !important;
    height: 48px !important;
    margin: 0 !important;
    color: #cbd5e1 !important;
}

html body #svc-switcher-menu.journey-nav .journey-nav__arrow svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 3 !important;
}

@media (max-width: 1180px) {
    html body #svc-switcher-menu.journey-nav {
        gap: 10px !important;
    }

    html body #svc-switcher-menu.journey-nav .journey-nav__list {
        gap: 8px !important;
    }

    html body #svc-switcher-menu.journey-nav .journey-nav__title-eyebrow {
        font-size: 13px !important;
    }

    html body #svc-switcher-menu.journey-nav .journey-nav__title-text,
    html body #svc-switcher-menu.journey-nav .journey-step__name {
        font-size: 22px !important;
    }

    html body #svc-switcher-menu.journey-nav .journey-step__badge-side {
        font-size: 12px !important;
    }

    html body #svc-switcher-menu.journey-nav .journey-step__badge-num {
        font-size: 28px !important;
    }

    html body #svc-switcher-menu.journey-nav .journey-step__hint {
        height: 30px !important;
        margin-left: 6px !important;
        padding: 0 12px !important;
        font-size: 17px !important;
    }
}

@media (max-width: 980px) {
    html body #svc-switcher-menu.journey-nav .journey-step__badge-side {
        display: inline-flex !important;
        font-size: 10px !important;
    }

    html body #svc-switcher-menu.journey-nav .journey-step__name {
        font-size: 18px !important;
    }

    html body #svc-switcher-menu.journey-nav .journey-step__badge-num {
        font-size: 24px !important;
    }
}

@media (max-width: 700px) {
    html body #svc-switcher-menu.journey-nav {
        display: none !important;
        height: auto !important;
        gap: 8px !important;
        padding: 12px !important;
    }

    html body #svc-switcher-menu.journey-nav.svc-switcher__menu--open {
        display: flex !important;
    }

    html body #svc-switcher-menu.journey-nav .journey-nav__title {
        height: auto !important;
        padding: 8px 10px !important;
    }

    html body #svc-switcher-menu.journey-nav .journey-nav__title-eyebrow {
        font-size: 11px !important;
    }

    html body #svc-switcher-menu.journey-nav .journey-nav__title-text {
        font-size: 24px !important;
    }

    html body #svc-switcher-menu.journey-nav .journey-nav__list {
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important;
        gap: 6px !important;
    }

    html body #svc-switcher-menu.journey-nav .journey-step,
    html body #svc-switcher-menu.journey-nav a.journey-step,
    html body #svc-switcher-menu.journey-nav span.journey-step,
    html body #svc-switcher-menu.journey-nav .journey-step.is-current {
        width: 100% !important;
        height: 48px !important;
        padding: 0 12px !important;
        gap: 10px !important;
        border-radius: 12px !important;
    }

    html body #svc-switcher-menu.journey-nav .journey-step__badge-side {
        display: inline-flex !important;
        font-size: 10px !important;
    }

    html body #svc-switcher-menu.journey-nav .journey-step__badge-num {
        font-size: 24px !important;
    }

    html body #svc-switcher-menu.journey-nav .journey-step__name {
        font-size: 18px !important;
    }

    html body #svc-switcher-menu.journey-nav .journey-step__hint {
        height: 28px !important;
        margin-left: auto !important;
        padding: 0 10px !important;
        font-size: 14px !important;
    }
}