/**
 * SalonEase 官網／開通頁：跟 POS 深色殼同一套用色。
 * Token 對齊 assets/css/pos-shell.css
 */
:root {
    --pos-bg: #121214;
    --pos-surface: #1c1c1f;
    --pos-surface-2: #242428;
    --pos-border: #2e2e33;
    --pos-text: #f4f1ea;
    --pos-muted: #c4c0b6;
    --pos-sage: #8fa68f;
    --pos-sage-press: #7a927a;
    --pos-danger: #d47878;
    --pos-whatsapp: #25d366;
    --pos-whatsapp-press: #128c7e;
}

html {
    color-scheme: dark;
}

body.mkt {
    font-family: "Noto Sans TC", system-ui, -apple-system, sans-serif;
    background: var(--pos-bg);
    color: var(--pos-text);
    overflow-x: hidden;
    min-height: 100vh;
}

body.mkt a {
    color: inherit;
}

.mkt-hero {
    background: radial-gradient(1200px 600px at 50% -10%, #2a332a 0%, #121214 55%);
}

.mkt-topbar {
    background: #0e0e10;
    color: var(--pos-text);
    font-size: 0.8125rem;
}

.mkt-nav {
    background: var(--pos-surface);
    border-bottom: 1px solid var(--pos-border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.nav-link {
    transition: color 0.2s ease;
    color: var(--pos-muted);
}
.nav-link:hover { color: var(--pos-sage); }

.section-header {
    font-size: 2.5rem;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--pos-text);
}

@media (max-width: 767px) {
    .section-header {
        font-size: 1.75rem;
        line-height: 1.15;
    }
}

.mkt-card {
    background: var(--pos-surface);
    border: 1px solid var(--pos-border);
    border-radius: 0.75rem;
    color: var(--pos-text);
}

.mkt-inset {
    background: var(--pos-surface-2);
    border: 1px solid var(--pos-border);
    border-radius: 0.5rem;
    color: var(--pos-text);
}

.mkt-muted { color: var(--pos-muted); }

.lang-switch {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--pos-border);
    border-radius: 0.45rem;
    overflow: hidden;
    background: var(--pos-surface-2);
}
.lang-switch__btn {
    color: var(--pos-muted);
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.28rem 0.55rem;
    border-right: 1px solid var(--pos-border);
    white-space: nowrap;
}
.lang-switch__btn:last-child { border-right: 0; }
.lang-switch__btn:hover { color: var(--pos-text); }
.lang-switch__btn.is-on {
    color: #111;
    background: var(--pos-sage);
}

.highlight-badge {
    display: inline-block;
    background: #243024;
    color: #d7e8d7;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 9999px;
    letter-spacing: 0.5px;
    border: 1px solid #3d5340;
}

.feature-card {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.feature-card:hover {
    transform: translateY(-4px);
    border-color: #3d5340;
    box-shadow: 0 16px 32px -16px rgb(0 0 0 / 0.55);
}

.feature-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pos-surface-2);
    border: 1px solid var(--pos-border);
    border-radius: 9999px;
    color: var(--pos-sage);
    font-size: 1.4rem;
    transition: all 0.3s ease;
}
.feature-card:hover .feature-icon {
    background: var(--pos-sage);
    color: #111;
    border-color: var(--pos-sage);
}

.mkt-btn-sage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pos-sage);
    color: #111 !important;
    font-weight: 600;
    border: none;
    border-radius: 0.75rem;
    transition: background 0.15s ease;
    text-decoration: none;
}
.mkt-btn-sage:hover { background: var(--pos-sage-press); color: #111 !important; }

.mkt-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--pos-text) !important;
    font-weight: 600;
    border: 1px solid var(--pos-border);
    border-radius: 0.75rem;
    transition: background 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
}
.mkt-btn-ghost:hover {
    background: var(--pos-surface-2);
    border-color: var(--pos-sage);
}

.mkt-btn-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pos-whatsapp);
    color: #fff !important;
    font-weight: 600;
    border-radius: 0.75rem;
    transition: background 0.15s ease;
    text-decoration: none;
}
.mkt-btn-wa:hover { background: var(--pos-whatsapp-press); color: #fff !important; }

.mkt-input,
.input-field {
    width: 100%;
    background: var(--pos-surface-2);
    color: var(--pos-text);
    border: 1px solid var(--pos-border);
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mkt-input::placeholder,
.input-field::placeholder { color: #6f6c66; }
.mkt-input:focus,
.input-field:focus {
    outline: none;
    border-color: var(--pos-sage);
    box-shadow: 0 0 0 3px rgb(143 166 143 / 0.28);
}

select.mkt-input,
select.input-field {
    background-color: var(--pos-surface-2);
    color: var(--pos-text);
}
select.mkt-input option,
select.input-field option {
    background: var(--pos-surface);
    color: var(--pos-text);
}

.price-card { transition: border-color 0.2s ease, transform 0.2s ease; }
.price-card--featured {
    border-color: var(--pos-sage) !important;
}
.flow-card { transition: transform 0.2s ease, border-color 0.2s ease; }
.flow-card:hover { transform: translateY(-2px); border-color: #3d5340; }

.mkt-shot {
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--pos-border);
    object-fit: cover;
    background: #0e0e10;
}

.mkt-check { color: var(--pos-sage); }

.mkt-footer {
    border-top: 1px solid var(--pos-border);
    background: #0e0e10;
    color: var(--pos-muted);
}

details > summary::-webkit-details-marker { display: none; }

.mkt-faq {
    background: var(--pos-surface);
    border: 1px solid var(--pos-border);
    border-radius: 0.75rem;
}
.mkt-faq[open] { border-color: #3d5340; }

.mkt-alert-ok {
    background: #243024;
    border: 1px solid #3d5340;
    color: #d7e8d7;
    border-radius: 0.5rem;
}
.mkt-alert-warn {
    background: #2a2618;
    border: 1px solid #5a4e2a;
    color: #ead7a8;
    border-radius: 0.5rem;
}
.mkt-alert-err {
    background: #2a1818;
    border: 1px solid #5a2a2a;
    color: #f0c4c4;
    border-radius: 0.5rem;
}

.mkt-logo-sub {
    color: var(--pos-muted);
}

img.se-mark {
    border-radius: 0.5rem;
}

.mkt-store-badges {
    --mkt-store-badge-height: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
}
.mkt-store-badges--hero { margin-top: 1.25rem; }
.mkt-store-badges--section { margin-top: 1.5rem; justify-content: flex-start; }
/* Fixed 40px outer frame so Play / Apple / APK share height + baseline.
   Play PNGs are cropped to the opaque pill; leftover pad is clipped. */
.mkt-store-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: var(--mkt-store-badge-height);
    line-height: 0;
    text-decoration: none;
    overflow: hidden;
}
.mkt-store-badge img {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: center;
}
.mkt-store-badge--apk {
    box-sizing: border-box;
    height: var(--mkt-store-badge-height);
    padding: 0 0.9rem;
    gap: 0.4rem;
    border: 1px solid var(--pos-text);
    border-radius: 0.5rem;
    background: #000;
    color: var(--pos-text);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
}
.mkt-store-badge--apk:hover {
    border-color: var(--pos-sage);
    color: var(--pos-sage);
}
.mkt-store-badge--apk i {
    font-size: 0.85rem;
}
.mkt-store-soon {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--mkt-store-badge-height);
    padding: 0 0.9rem;
    border: 1px solid var(--pos-border);
    border-radius: 0.55rem;
    color: var(--pos-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--pos-surface-2);
}

.mkt-app {
    background: radial-gradient(900px 480px at 70% -10%, #2a332a 0%, #121214 58%);
    border-top: 1px solid var(--pos-border);
    border-bottom: 1px solid var(--pos-border);
}
.mkt-app__grid {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}
@media (min-width: 900px) {
    .mkt-app__grid {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
        gap: 3rem;
    }
    .mkt-app__grid:has([data-device-panel="ipad"]:not([hidden])) {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 560px);
    }
}
.mkt-app__points {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: grid;
    gap: 0.55rem;
}
.mkt-app__points li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    color: var(--pos-muted);
    font-size: 0.95rem;
}
.mkt-app__points i { color: var(--pos-sage); margin-top: 0.2rem; }
.mkt-app__legal {
    margin-top: 1.25rem;
    font-size: 0.7rem;
    line-height: 1.45;
    color: #8d8a82;
}

.mkt-device-shots {
    width: 100%;
    min-width: 0;
}
.mkt-device-toggle {
    display: flex;
    justify-content: center;
    margin: 0 auto 0.85rem;
}
.mkt-device-toggle__btn {
    color: var(--pos-muted);
    background: var(--pos-surface-2);
    border: 1px solid var(--pos-border);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.38rem 0.85rem;
    cursor: pointer;
}
.mkt-device-toggle__btn:first-child {
    border-radius: 0.45rem 0 0 0.45rem;
}
.mkt-device-toggle__btn:last-child {
    border-radius: 0 0.45rem 0.45rem 0;
    margin-left: -1px;
}
.mkt-device-toggle__btn:hover { color: var(--pos-text); }
.mkt-device-toggle__btn.is-on {
    color: #111;
    background: var(--pos-sage);
    border-color: var(--pos-sage);
    z-index: 1;
}
.mkt-device-toggle__btn:focus-visible {
    outline: 2px solid var(--pos-sage);
    outline-offset: 2px;
    z-index: 2;
}
.mkt-device-panel[hidden] { display: none; }

.mkt-carousel {
    position: relative;
    outline: none;
    max-width: 360px;
    margin-inline: auto;
}
.mkt-carousel--ipad {
    max-width: min(100%, 560px);
}
.mkt-carousel:focus-visible {
    box-shadow: 0 0 0 3px rgb(143 166 143 / 0.45);
    border-radius: 1rem;
}
.mkt-carousel__frame {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.35rem;
}
.mkt-carousel__viewport {
    overflow: hidden;
    border-radius: 1.1rem;
}
.mkt-carousel__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mkt-carousel__track::-webkit-scrollbar { display: none; }
.mkt-carousel__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    margin: 0;
    list-style: none;
}
.mkt-carousel__slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1.35rem;
    border: 1px solid var(--pos-border);
    background: #0e0e10;
    box-shadow: 0 18px 40px rgb(0 0 0 / 0.35);
}
.mkt-carousel__caption {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pos-muted);
    margin-top: 0.65rem;
    letter-spacing: 0.04em;
}
.mkt-carousel__btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    border: 1px solid var(--pos-border);
    background: var(--pos-surface);
    color: var(--pos-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.mkt-carousel__btn:hover,
.mkt-carousel__btn:focus-visible {
    background: var(--pos-surface-2);
    border-color: var(--pos-sage);
    outline: none;
}
.mkt-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.9rem;
}
.mkt-carousel__dot {
    width: 0.55rem;
    height: 0.55rem;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: #3a3a40;
    cursor: pointer;
}
.mkt-carousel__dot.is-on { background: var(--pos-sage); }
.mkt-carousel__dot:focus-visible {
    outline: 2px solid var(--pos-sage);
    outline-offset: 2px;
}
@media (max-width: 639px) {
    .mkt-carousel__frame {
        grid-template-columns: 1fr;
    }
    .mkt-carousel__btn {
        position: absolute;
        z-index: 2;
        top: 42%;
        transform: translateY(-50%);
        background: rgb(18 18 20 / 0.82);
    }
    .mkt-carousel__btn--prev { left: 0.4rem; }
    .mkt-carousel__btn--next { right: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
    .mkt-carousel__track { scroll-behavior: auto; }
}

.mkt-extra-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .mkt-extra-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
    .mkt-extra-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

.mkt-facts__def {
    max-width: 48rem;
    margin: 0 auto 2rem;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--pos-text);
    text-align: center;
}
.mkt-facts__grid {
    display: grid;
    gap: 1rem;
    margin: 0 auto;
    max-width: 56rem;
}
@media (min-width: 768px) {
    .mkt-facts__grid { grid-template-columns: 1fr 1fr; }
}
.mkt-facts__grid > div {
    background: var(--pos-surface);
    border: 1px solid var(--pos-border);
    border-radius: 0.75rem;
    padding: 1.1rem 1.2rem;
}
.mkt-facts__grid dt {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--pos-sage);
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.mkt-facts__grid dd {
    margin: 0;
    color: var(--pos-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}