:root {
    color-scheme: dark;
    --night: #060b16;
    --card: #101d36;
    --line: rgba(148, 184, 230, 0.16);
    --gold: #e7c36a;
    --sky: #38bdf8;
}

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 6.5rem; }
body { font-family: "Prompt", "Leelawadee UI", Tahoma, sans-serif; }
::selection { background: #1d6fe8; color: #fff; }

.service-container { width: min(1320px, calc(100% - 96px)); margin-inline: auto; }
.service-world { position: relative; isolation: isolate; background: #071526; overflow: hidden; border-block: 1px solid rgba(231,195,106,.2); }
.service-world-art { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,13,28,.97) 0%, rgba(4,13,28,.9) 34%, rgba(4,13,28,.32) 72%, rgba(4,13,28,.45)), linear-gradient(0deg, #071526 0%, transparent 55%), url('../images/sections/geffen-night-service-v1.png') center / cover no-repeat; }
.service-intro { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 80px; min-height: 640px; padding-block: 88px 72px; }
.service-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: .12em; color: #e7c36a; line-height: 1.8; }
.service-eyebrow > span { width: 6px; height: 6px; background: #e7c36a; transform: rotate(45deg); box-shadow: 0 0 14px #e7c36a80; }
.service-copy h2 { margin: 22px 0; font-size: clamp(34px, 3.4vw, 58px); font-weight: 600; letter-spacing: -.035em; line-height: 1.35; }
.service-copy h2 em { font-style: normal; color: #f4d991; }
.service-lead { font-size: clamp(17px, 1.5vw, 21px); color: #edf3ff; line-height: 1.8; }
.service-description { margin-top: 18px; max-width: 560px; font-size: 14px; line-height: 1.95; color: #b4c4db; }
.service-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.service-button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 50px; padding: 13px 23px; border-radius: 10px; font-size: 14px; font-weight: 600; transition: box-shadow .2s, background .2s; }
.service-button-gold { background: linear-gradient(120deg, #f5dc95, #e7b94f); color: #172137; box-shadow: 0 6px 24px #e7b94f20; }
.service-button-gold:hover { box-shadow: 0 6px 30px #e7b94f45; background: #f7df9d; }
.service-button-outline { background: #10243b60; border: 1px solid #8197b44d; color: #e5edf9; }
.service-button-outline:hover { background: #193754; }
.service-assurance { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; font-size: 11px; color: #a9bfd8; }
.service-assurance span::before { content: '✓'; color: #7dd3fc; margin-right: 7px; }
.service-note { justify-self: end; align-self: end; width: min(100%, 385px); padding: 28px; border: 1px solid #d8e6ff33; border-radius: 18px; background: linear-gradient(130deg, #0e264de6, #071526cc); backdrop-filter: blur(12px); box-shadow: 0 20px 50px #0003; }
.service-note-symbol { display: block; font-size: 38px; color: #f2d48a; line-height: 1; }
.service-note-label { color: #9bc6ec; font-size: 10px; letter-spacing: .18em; margin-top: 18px; }
.service-note h3 { font-size: 22px; font-weight: 500; line-height: 1.7; margin-top: 12px; }
.service-note > p:last-of-type { margin-top: 12px; font-size: 12px; color: #b4c4db; line-height: 1.9; }
.service-note a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin-top: 20px; padding-top: 12px; border-top: 1px solid #b4c4db30; font-size: 12px; color: #f2d48a; }
.service-game-strip { padding-block: 26px 30px; border-top: 1px solid #a9bfd824; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.service-game-strip p { font-size: 12px; color: #b4c4db; }
.service-game-strip strong { color: #f3d68e; font-weight: 500; }
.service-game-strip ul { display: flex; flex-wrap: wrap; gap: 10px 22px; color: #c9d9ed; font-size: 12px; }
.service-benefits { padding-block: 88px; background: radial-gradient(ellipse at 0 35%, #0e315040, transparent 60%), #071526; }
.service-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 36px; }
.service-section-heading h2 { font-size: clamp(28px, 2.5vw, 40px); font-weight: 500; letter-spacing: -.025em; line-height: 1.5; margin-top: 14px; }
.service-section-heading h2 span { color: #8dafcc; }
.service-section-heading > p { font-size: 13px; color: #a9bfd8; line-height: 1.95; }
.service-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-benefit-card { display: flex; flex-direction: column; padding: 32px; border: 1px solid #9cbcdc26; border-radius: 16px; background: linear-gradient(140deg, #112b47, #0a1c32); }
.service-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.service-card-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #e7c36a40; background: #e7c36a0d; color: #f4d991; border-radius: 12px; font-size: 28px; }
.service-card-number { color: #6f8aa9; font-size: 12px; letter-spacing: .1em; }
.service-benefit-card h3 { font-size: 20px; font-weight: 500; line-height: 1.6; }
.service-benefit-card p { margin-block: 14px 24px; font-size: 13px; color: #aec2da; line-height: 1.95; }
.service-card-caption { display: flex; align-items: center; gap: 12px; margin-top: auto; min-height: 34px; border-top: 1px solid #9cbcdc20; padding-top: 16px; color: #7dd3fc; font-size: 12px; }
.service-process { padding-block: 80px; background: linear-gradient(120deg, #0b223b, #071626); border-block: 1px solid #9cbcdc26; }
.service-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; counter-reset: steps; list-style: none; }
.service-step-grid li { position: relative; padding: 24px 0 16px; border-top: 1px solid #92b7d94d; }
.service-step-number { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #e7c36a66; color: #f2d48a; font-size: 12px; background: #0a2036; }
.service-step-grid h3 { font-size: 18px; font-weight: 500; margin-top: 18px; }
.service-step-grid p { font-size: 13px; line-height: 1.95; color: #a9bfd8; margin-top: 12px; max-width: 330px; }
.service-summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #9cbcdc26; margin-top: 36px; padding-top: 30px; }
.service-summary p { font-size: 13px; color: #a9bfd8; line-height: 1.9; }
.service-summary strong { font-size: 21px; font-weight: 500; color: #f3d68e; }
@media (max-width: 1100px) {
    .service-container { width: calc(100% - 64px); }
    .service-intro { gap: 36px; }
    .service-benefit-card { padding: 24px; }
    .service-game-strip { flex-direction: column; align-items: start; gap: 14px; }
}
@media (max-width: 900px) {
    .service-container { width: calc(100% - 40px); }
    .service-world-art { background: linear-gradient(0deg, #071526 2%, #07152688 65%, #071526d9), url('../images/sections/geffen-night-service-v1.png') 60% center / cover no-repeat; }
    .service-intro { grid-template-columns: 1fr; gap: 36px; padding-block: 56px 36px; min-height: auto; }
    .service-eyebrow { font-size: 10px; letter-spacing: .07em; }
    .service-description { font-size: 13px; }
    .service-note { width: 100%; justify-self: stretch; padding: 24px; }
    .service-note h3 { font-size: 21px; }
    .service-benefits, .service-process { padding-block: 56px; }
    .service-section-heading { align-items: start; flex-direction: column; gap: 20px; }
    .service-section-heading > p br { display: none; }
    .service-benefit-grid, .service-step-grid { grid-template-columns: 1fr; gap: 18px; }
    .service-card-top { margin-bottom: 20px; }
    .service-benefit-card h3 { font-size: 19px; }
    .service-step-grid li { display: grid; grid-template-columns: 38px 1fr; gap: 0 18px; }
    .service-step-number { grid-row: span 2; }
    .service-step-grid h3 { margin-top: 2px; font-size: 17px; }
    .service-step-grid p { max-width: none; }
    .service-summary { align-items: start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .service-button { transition: none; } }

/* Native scrolling with a mineral-blue theme. */
@supports not selector(::-webkit-scrollbar) {
    * { scrollbar-color: #38bdf8 #08172d; scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #08172d; }
::-webkit-scrollbar-thumb {
    border: 2px solid #08172d;
    border-radius: 999px;
    background: linear-gradient(180deg, #7dd3fc, #0ea5e9 45%, #2563eb);
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #7dd3fc; background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: #e7c36a; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: #08172d; }
@media (forced-colors: active) {
    * { scrollbar-color: auto; scrollbar-width: auto; }
    ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: Canvas; }
    ::-webkit-scrollbar-thumb { background: ButtonText; border-color: Canvas; }
}

.skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 80;
    border-radius: 0.6rem;
    background: #fff;
    color: #07111f;
    padding: 0.5rem 0.9rem;
}
.skip:focus { top: 1rem; }

#siteHeader {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
}
#siteHeader.is-scrolled,
#siteHeader.is-open {
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
}
.nav-shell {
    position: relative;
    isolation: isolate;
    width: 100%;
    border-bottom: 1px solid rgba(125, 211, 252, 0.22);
    background: linear-gradient(110deg, rgba(6, 20, 40, 0.97), rgba(13, 32, 62, 0.92), rgba(6, 20, 40, 0.97));
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
}
.nav-bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: 88px;
    padding: 8px max(clamp(1rem, 3vw, 4rem), env(safe-area-inset-left)) 8px max(clamp(1rem, 3vw, 4rem), env(safe-area-inset-right));
}
.nav-brand { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
.nav-logo { width: 112px; height: 68px; object-fit: contain; }
.nav-brand-copy { display: flex; flex-direction: column; gap: 3px; }
.nav-brand-name { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; }
.nav-brand-name > span { color: var(--gold); }
.nav-brand-tagline { font-size: 0.65rem; color: #b0c3df; letter-spacing: 0.025em; }
.desktop-nav { display: flex; align-items: center; gap: clamp(0.25rem, 1vw, 1rem); }
.desktop-nav .nav-link { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.6rem 1rem; border-radius: 12px; font-size: 0.9rem; font-weight: 500; white-space: nowrap; transition: color 0.2s, background 0.2s; }
.desktop-nav .nav-link:hover { background: rgba(125, 211, 252, 0.07); }
.desktop-nav .nav-link.is-active { background: rgba(56, 189, 248, 0.12); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.2); }
.nav-account { display: flex; align-items: center; gap: 0.65rem; }
.nav-register, .nav-login { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.6rem 1.25rem; border-radius: 12px; font-size: 0.875rem; font-weight: 600; white-space: nowrap; transition: background 0.2s, box-shadow 0.2s; }
.nav-register { border: 1px solid rgba(231, 195, 106, 0.35); color: #f2d892; background: rgba(231, 195, 106, 0.04); }
.nav-register:hover { background: rgba(231, 195, 106, 0.12); }
.nav-login { background: linear-gradient(120deg, #0ea5e9, #2563eb); box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; display: block; text-align: center; }
.nav-login:hover { background: linear-gradient(120deg, #38bdf8, #3b82f6); box-shadow: 0 4px 20px rgba(56, 189, 248, 0.35); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid rgba(125, 211, 252, 0.25); border-radius: 12px; background: rgba(56, 189, 248, 0.08); color: #bae6fd; }
#siteHeader.is-scrolled .nav-shell,
#siteHeader.is-open .nav-shell {
    background: rgba(7, 16, 34, 0.96);
}
.menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    border: 0;
    background: rgba(4, 10, 24, 0.66);
    backdrop-filter: blur(4px);
}
.mobile-menu {
    position: relative;
    z-index: 1;
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow: auto;
    padding: 0 0.85rem 1.1rem;
}
.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0.55rem;
}
.mobile-nav .nav-link {
    display: flex;
    align-items: center;
    min-height: 2.9rem;
    border-radius: 0.9rem;
    padding: 0.55rem 0.85rem;
}
.mobile-nav .nav-link.is-active,
.mobile-nav .nav-link:hover {
    background: rgba(56, 189, 248, 0.12);
}
.menu-action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    margin-top: 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.95rem;
    font-weight: 600;
}
.menu-action-fill {
    margin-top: 0.55rem;
    border: 0;
    background: linear-gradient(90deg, #38bdf8, #1d4ed8);
    color: #fff;
}

.nav-link {
    position: relative;
    color: rgba(255, 255, 255, 0.72);
}
.nav-link:hover,
.nav-link.is-active { color: #7dd3fc; }
.nav-link::after { display: none; }

@media (max-width: 1199px) {
    .nav-brand-copy { display: none; }
    .desktop-nav { gap: 0.25rem; }
    .desktop-nav .nav-link { padding-inline: 0.8rem; }
}
@media (max-width: 1023px) {
    .nav-bar { min-height: 72px; padding: 4px max(1rem, env(safe-area-inset-left)) 4px max(1rem, env(safe-area-inset-right)); gap: 0.75rem; }
    .nav-logo { width: 96px; height: 60px; }
    .nav-brand-copy { display: flex; }
    .nav-brand-name { font-size: 1.1rem; }
    .desktop-nav, .nav-account { display: none; }
    .nav-toggle { display: flex; }
    .mobile-menu { padding: 0 1rem max(1rem, env(safe-area-inset-bottom)); }
    .mobile-nav { gap: 0.35rem; padding-top: 0.75rem; }
    .mobile-nav .nav-link { justify-content: space-between; }
    .mobile-nav .nav-link::after { display: block; content: "›"; color: #7dd3fc; font-size: 1.25rem; }
    .menu-action { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    #siteHeader, .desktop-nav .nav-link, .nav-register, .nav-login { transition: none; }
}
@media (max-width: 359px) {
    .nav-logo { width: 80px; }
    .nav-brand { gap: 0.5rem; }
    .nav-brand-name { font-size: 0.95rem; }
    .nav-brand-tagline { font-size: 0.55rem; }
}

.header-particles {
    position: absolute;
    inset: 0 0 auto;
    height: 88px;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(ellipse at 16% 110%, rgba(56, 189, 248, 0.14), transparent 38%), radial-gradient(ellipse at 84% 110%, rgba(231, 195, 106, 0.1), transparent 35%);
}
.header-particle {
    position: absolute;
    left: var(--x);
    top: 100%;
    width: var(--size);
    height: var(--size);
    color: #8cddff;
    opacity: 0;
    filter: drop-shadow(0 0 4px currentColor);
    animation: mineral-rise var(--duration) var(--delay) linear infinite;
}
.header-particle::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: currentColor;
    animation: mineral-twinkle var(--twinkle) var(--delay) ease-in-out infinite;
}
.header-particle.is-gold { color: #f5d58a; }
.header-particle.is-star::after { border-radius: 0; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.header-particle.is-crystal::after { border-radius: 0; clip-path: polygon(50% 0, 100% 45%, 50% 100%, 0 45%); }
.header-particles.is-paused .header-particle,
.header-particles.is-paused .header-particle::after { animation-play-state: paused; }
@keyframes mineral-rise {
    0% { transform: translate3d(0, 8px, 0); opacity: 0; }
    18% { opacity: 0.55; }
    50% { transform: translate3d(var(--sway), -48px, 0); opacity: 0.7; }
    78% { opacity: 0.45; }
    100% { transform: translate3d(var(--drift), -104px, 0); opacity: 0; }
}
@keyframes mineral-twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.75); }
    45% { opacity: 1; transform: scale(1.15); }
    65% { opacity: 0.5; transform: scale(0.9); }
}
@media (max-width: 1023px) {
    .header-particles { height: 72px; }
    .header-particle:nth-child(n+17) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .header-particle, .header-particle::after { animation: none; }
    .header-particle { top: 45%; opacity: 0.35; }
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid #7dd3fc;
    outline-offset: 3px;
}

.hero-photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #061428 url("../images/hero/bg_hero.png") center 42% / cover no-repeat;
}
.hero-photo video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}
.hero-photo-clear::after { display: none; }
.hero-stage {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    overflow: visible;
}
.hero-stage .hero-photo {
    position: relative;
    inset: auto;
    height: auto;
    background: #061428;
}
.hero-stage .hero-photo video {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center center;
}
.hero-stage .hero-actions {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
    justify-content: space-between;
    width: auto;
    margin: 0;
    padding: 0 1.1% 1.6%;
    pointer-events: none;
}
.hero-stage .hero-btn { pointer-events: auto; }
.hero-marquee {
    margin: 0;
    width: 100%;
    border-top: 0;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}
.hero-stage .hero-btn { width: auto; }
.hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(6, 20, 40, 0.72) 0%, rgba(6, 20, 40, 0.28) 42%, rgba(6, 20, 40, 0.18) 100%),
        linear-gradient(180deg, rgba(6, 20, 40, 0.28) 0%, rgba(6, 20, 40, 0.05) 55%, #061428 100%);
}
.hero-btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: clamp(0.55rem, 1.1vw, 1.15rem);
    width: max-content;
    min-height: clamp(3.8rem, 8.6vw, 8rem);
    padding: clamp(0.35rem, 0.55vw, 0.6rem) clamp(0.9rem, 1.6vw, 1.7rem) clamp(0.35rem, 0.55vw, 0.6rem) clamp(0.35rem, 0.55vw, 0.6rem);
    overflow: hidden;
    border-radius: clamp(1.1rem, 2vw, 2rem);
    color: #fff;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.28) 48%, transparent 64%);
    transform: translateX(-130%);
    transition: transform 0.7s ease;
    pointer-events: none;
}
.hero-btn:hover { transform: translateY(-2px); }
.hero-btn:hover::before { transform: translateX(130%); }
.hero-btn-ico {
    display: grid;
    width: clamp(2.8rem, 6vw, 5.6rem);
    height: clamp(2.8rem, 6vw, 5.6rem);
    flex: none;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.hero-btn-ico .ico { width: 48%; height: 48%; }
.hero-btn-copy {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}
.hero-btn-kicker,
.hero-btn-label { white-space: nowrap; }
.hero-btn-kicker {
    font-size: clamp(0.72rem, 1.15vw, 1.05rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: none;
}
.hero-btn-label {
    margin-top: 0.08em;
    font-size: clamp(1.15rem, 2.4vw, 2.15rem);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.hero-btn-go {
    width: clamp(0.95rem, 1.5vw, 1.45rem);
    height: clamp(0.95rem, 1.5vw, 1.45rem);
    margin-left: auto;
    flex: none;
    opacity: 0.85;
    transition: transform 0.25s ease;
}
.hero-btn:hover .hero-btn-go { transform: translateX(3px); }
.hero-btn-price,
.hero-btn-book {
    border: 0;
    backdrop-filter: blur(8px);
}
.hero-btn-price {
    color: #3a2508;
    background: linear-gradient(90deg, #ffe08a, #f5b942);
    box-shadow: 0 10px 24px rgba(180, 120, 20, 0.35);
}
.hero-btn-price .hero-btn-kicker,
.hero-btn-price .hero-btn-label { color: #3a2508; text-shadow: none; }
.hero-btn-price .hero-btn-ico {
    color: #3a2508;
    border-color: rgba(58, 37, 8, 0.18);
    background: rgba(255, 255, 255, 0.35);
}
.hero-btn-price:hover { background: linear-gradient(90deg, #fff0b8, #ffd15c); }
.hero-btn-book {
    color: #fff;
    background: linear-gradient(90deg, #38bdf8, #2563eb);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
}
.hero-btn-book:hover { background: linear-gradient(90deg, #7dd3fc, #3b82f6); }
.hero-btn-book .hero-btn-kicker { color: rgba(255, 255, 255, 0.9); }

.hero-accent {
    background: linear-gradient(90deg, #fff, #7dd3fc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
#heroTitle { min-height: 4.35em; }
#heroLead { min-height: 4.6em; }
.type-caret {
    display: inline-block;
    width: 0.07em;
    height: 0.82em;
    margin-left: 0.08em;
    border-radius: 1px;
    background: #7dd3fc;
    vertical-align: -0.06em;
    animation: caret-blink 0.9s steps(1) infinite;
}
@keyframes caret-blink {
    50% { opacity: 0; }
}

.hero-lights {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.boot {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #061428;
    animation: boot-away 0.7s ease 4.2s forwards;
}
.boot.is-live { animation: none; }
.boot.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}
html.is-booting, html.is-booting body { overflow: hidden; }
.boot-sky,
.boot-lights {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.boot-sky {
    background:
        linear-gradient(90deg, rgba(6, 20, 40, 0.72) 0%, rgba(6, 20, 40, 0.58) 50%, rgba(6, 20, 40, 0.66) 100%),
        linear-gradient(180deg, rgba(6, 20, 40, 0.38) 0%, rgba(6, 20, 40, 0.28) 52%, rgba(6, 20, 40, 0.62) 100%),
        url("../images/hero/bg_loading.png") center 48% / cover no-repeat;
}
.boot-card {
    position: relative;
    z-index: 1;
    width: min(26rem, 88vw);
    text-align: center;
}
.boot-logo { width: min(20rem, 74vw); margin: 0 auto; }
.boot-logo img { display: block; width: 100%; height: auto; }
.boot-name {
    margin: 0.35rem 0 0;
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.boot-note {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    margin: 0.55rem 0 0;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.06em;
}
.boot-note span:nth-child(2) { color: #7dd3fc; }
.boot-track {
    position: relative;
    margin: 1.25rem auto 0;
    height: 8px;
    width: min(16rem, 72vw);
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.28);
}
.boot-fill {
    display: block;
    position: relative;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #e0f2fe, #38bdf8 42%, #1d4ed8);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.95);
    animation: boot-load 1.8s cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
}
.boot-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.85) 50%, transparent 80%);
    transform: translateX(-120%);
    animation: boot-sheen 1.15s ease-in-out infinite;
}

.brand-logo {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    border-radius: 999px;
}
.logo-float { position: relative; }
.logo-orbit {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: conic-gradient(from 0deg, transparent 0 72%, rgba(125, 211, 252, 0.95) 84%, transparent 94%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}
.logo-orbit-inner { inset: 12%; opacity: 0.7; }
.logo-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, 0.18) 46%, rgba(255, 255, 255, 0.92) 50%, rgba(186, 230, 253, 0.4) 54%, transparent 64%);
    background-size: 240% 100%;
    background-repeat: no-repeat;
    background-position: 130% 0;
    -webkit-mask-image: url("../images/brand/logo-web.png");
    mask-image: url("../images/brand/logo-web.png");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    mix-blend-mode: screen;
}
.logo-sheen-solid {
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: inherit;
}

.hero-viewport { position: absolute; inset: 0; }
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-dot {
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    transition: width 0.25s ease, background 0.25s ease;
}
.hero-dot.is-active {
    width: 1.5rem;
    background: var(--gold);
}

.game-chip {
    height: 2.4rem;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    padding: 0 1rem;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.75);
}
.game-chip.is-active,
.game-chip:hover {
    border-color: transparent;
    background: linear-gradient(90deg, #38bdf8, #2563eb);
    color: #fff;
}
.price-rail {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0.6rem 0.1rem 1rem;
    scrollbar-width: none;
}
.price-rail::-webkit-scrollbar { display: none; }
.plan-card {
    display: flex;
    flex: 0 0 min(84vw, 22rem);
    scroll-snap-align: center;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.6rem;
    background: #081628;
    padding: 1.35rem 1.25rem 1.25rem;
}
.plan-card.is-start {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 28%),
        #081628;
}
.plan-card.is-hot {
    border-color: rgba(125, 211, 252, 0.9);
    background:
        radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.42), transparent 52%),
        linear-gradient(180deg, #16457f, #0c2344);
    box-shadow: 0 22px 54px rgba(37, 99, 235, 0.38);
}
.plan-card.is-premium {
    border-color: rgba(186, 230, 253, 0.28);
    background:
        radial-gradient(circle at 50% 0%, rgba(125, 211, 252, 0.16), transparent 46%),
        linear-gradient(180deg, #102848, #07111f);
}
.plan-ribbon {
    align-self: center;
    margin-bottom: 0.85rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8, #1d4ed8);
    padding: 0.28rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.plan-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.plan-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    margin-bottom: 0.8rem;
    border-radius: 1rem;
    color: #7dd3fc;
    background: rgba(255, 255, 255, 0.05);
}
.plan-card.is-hot .plan-icon {
    color: #fff;
    background: linear-gradient(135deg, #38bdf8, #1d4ed8);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.45);
}
.plan-card.is-premium .plan-icon {
    color: #e0f2fe;
    border: 1px solid rgba(186, 230, 253, 0.35);
    background: rgba(125, 211, 252, 0.1);
}
.plan-pill {
    width: fit-content;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 0.25rem 0.7rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.8);
}
.plan-card.is-hot .plan-pill {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}
.plan-amount {
    margin-top: 0.85rem;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}
.plan-sub {
    margin-top: 0.7rem;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.62);
}
.plan-list {
    flex: 1;
    margin-top: 1.25rem;
    display: grid;
    align-content: start;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.92rem;
}
.plan-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.plan-check {
    margin-top: 0.15rem;
    color: #7dd3fc;
}
.book-link {
    display: flex;
    height: 3rem;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 1.45rem;
    border-radius: 0.9rem;
    background: linear-gradient(90deg, #38bdf8, #1d4ed8);
    font-weight: 600;
    color: #fff;
}
.plan-card.is-start .book-link {
    background: transparent;
    border: 1px solid rgba(125, 211, 252, 0.45);
}
.plan-card.is-premium .book-link {
    background: linear-gradient(90deg, #0ea5e9, #1e3a8a);
}
.book-link:hover { background: linear-gradient(90deg, #7dd3fc, #2563eb); }
@media (min-width: 1024px) {
    .price-rail {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow: visible;
    }
    .plan-card { flex: none; }
    .plan-card.is-hot { transform: translateY(-0.85rem); }
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.ico {
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
}
.ico-lg { width: 1.7rem; height: 1.7rem; }
.icon-badge {
    display: inline-flex;
    height: 3rem;
    width: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #38bdf8, #1d4ed8);
    color: #fff;
}
.icon-badge .ico { width: 1.25rem; height: 1.25rem; }
.stat-ico {
    display: inline-flex;
    height: 2.4rem;
    width: 2.4rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    border-radius: 0.8rem;
    color: #7dd3fc;
    background: rgba(56, 189, 248, 0.12);
}

.marquee { overflow: hidden; }
.marquee-track {
    display: flex;
    width: max-content;
    gap: 4.5rem;
    animation: ticker 32s linear infinite;
}
.marquee-track span {
    padding-inline: 0.12em;
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.28);
}
.name-marquee .marquee-track { gap: 2.75rem; }
.name-marquee .marquee-track span {
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.42);
    -webkit-text-stroke: 0;
}
.faq details { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.faq summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }

@keyframes ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.q-card {
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 1.15rem 1.2rem 1rem;
}
.q-card:hover { border-color: rgba(56, 189, 248, 0.4); }
.q-top, .q-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.q-foot { margin-top: 0.45rem; }
.q-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
}
.q-badge::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: currentColor;
}
.q-badge.is-wait { color: #fcd34d; background: rgba(252, 211, 77, 0.12); }
.q-badge.is-work { color: #7dd3fc; background: rgba(56, 189, 248, 0.14); }
.q-badge.is-done { color: #6ee7b7; background: rgba(16, 185, 129, 0.14); }
.q-game { font-size: 0.82rem; color: rgba(214, 230, 255, 0.7); }
.q-title { margin-top: 0.85rem; font-size: 1.05rem; font-weight: 600; line-height: 1.45; }
.q-dates { margin-top: 0.35rem; font-size: 0.88rem; color: rgba(214, 230, 255, 0.68); }
.q-track {
    margin-top: 0.9rem;
    height: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}
.q-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #38bdf8, #2563eb);
}
.q-percent { font-size: 0.82rem; font-weight: 600; color: #bae6fd; }
.q-empty, .q-error {
    grid-column: 1 / -1;
    border: 1px dashed var(--line);
    border-radius: 1.25rem;
    padding: 2.4rem 1rem;
    text-align: center;
    color: rgba(214, 230, 255, 0.75);
}
.q-skel { min-height: 8.5rem; background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.07), rgba(255,255,255,.03)); background-size: 200% 100%; }
.live-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
}
#queueLive.is-off { color: #fcd34d; }
#queueLive.is-off .live-dot { background: #fbbf24; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
    .hero-photo video,
    .studio-sky video { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .logo-float { animation: logo-float 6s ease-in-out infinite; }
    .brand-logo { animation: logo-bob 4.8s ease-in-out infinite; }
    .logo-sheen { animation: logo-sweep 3.8s ease-in-out infinite; }
    .logo-orbit { animation: ring-spin 9s linear infinite; }
    .logo-orbit-inner { animation: ring-spin 14s linear infinite reverse; }
    .hero-slide.is-active img { animation: hero-ken 9s ease-out forwards; }
    .q-badge.is-work::before { animation: pulse-dot 1.4s ease-out infinite; }
    .q-fill.is-run { position: relative; overflow: hidden; }
    .q-fill.is-run::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
        animation: sheen 1.8s linear infinite;
    }
    .live-dot { animation: pulse-dot 1.6s ease-out infinite; }
    .q-skel { animation: skel-move 1.4s linear infinite; }
}

@keyframes hero-ken {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}
@keyframes sheen {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}
@keyframes logo-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@keyframes logo-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@keyframes logo-sweep {
    0%, 22% { background-position: 130% 0; }
    58%, 100% { background-position: -40% 0; }
}
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes boot-load { to { width: 100%; } }
@keyframes boot-sheen {
    from { transform: translateX(-120%); }
    to { transform: translateX(120%); }
}
@keyframes boot-away {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}
@keyframes skel-move {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}
@keyframes pulse-dot {
    0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.55); }
    100% { box-shadow: 0 0 0 8px rgba(56, 189, 248, 0); }
}

.faq summary > span:first-child { min-width: 0; }
.faq summary .ico { margin-top: 0.15rem; flex: none; }

@media (max-width: 1023px) {
    .hero-logo { max-width: 20rem; margin-top: 0.25rem; }
    #heroLead { min-height: 0; }
}

@media (max-width: 640px) {
    .hero-stage .hero-actions { padding: 0 0.45rem 0.45rem; }
    .hero-stage .hero-btn {
        min-height: 2.7rem;
        gap: 0.4rem;
        padding: 0.22rem 0.65rem 0.22rem 0.22rem;
        border-radius: 0.95rem;
    }
    .hero-stage .hero-btn-ico { width: 2.15rem; height: 2.15rem; }
    .hero-stage .hero-btn-kicker { font-size: 0.62rem; }
    .hero-stage .hero-btn-label { font-size: 0.92rem; }
    .hero-stage .hero-btn-go { width: 0.75rem; height: 0.75rem; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-btn {
        width: 100%;
        min-width: 0;
    }
    #heroTitle { font-size: 2.7rem; }
    .hero-logo { max-width: 16.5rem; }
    .boot-logo { width: min(16.5rem, 78vw); }
    .boot-note {
        flex-wrap: wrap;
        gap: 0.35rem 0.7rem;
        padding: 0 1rem;
        letter-spacing: 0.03em;
        font-size: 1rem;
    }
    .plan-amount { font-size: 2.6rem; }
    .faq summary { align-items: flex-start; font-size: 1rem; }
    .marquee-track span { letter-spacing: 0.08em; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-slide { transition: none; }
    .marquee-track { animation: none; }
    .boot { animation: boot-away 0.2s ease 0.3s forwards; }
    .boot-fill { animation: none; width: 100%; }
}

/* Signed-in account badge shared with the member navbar. */
#siteHeader [data-link="register"][hidden]{display:none!important}
#siteHeader .site-nav-account{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-width:0;max-width:none;padding:8px 14px;border:1px solid #5693b34d;border-radius:14px;background:linear-gradient(115deg,#143c56cc,#0b2337dd);box-shadow:none;color:#cbeaff;text-align:left;white-space:normal}
.site-nav-account>svg{width:22px;height:22px;flex:none;color:#8ddbf9}.site-nav-account span{min-width:0}.site-nav-account small{display:block;font-size:9px;line-height:1.4;color:#8eb2cb}.site-nav-account strong{display:block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.6}.site-nav-account .nav-account-balance{border-left:1px solid #719bb52e;padding-left:12px}.site-nav-account .nav-account-balance strong{color:#8ce8c7}#siteHeader .site-nav-account:hover{border-color:#7bc4e781}
@media(max-width:1023px){.nav-account.is-member{display:flex;margin-left:auto}.nav-account.is-member+.nav-toggle{margin-left:0}}
@media(max-width:600px){#siteHeader .site-nav-account{padding:6px 8px;gap:8px;border-radius:11px}.site-nav-account>svg{display:none}.site-nav-account strong{max-width:85px;font-size:11px}.site-nav-account small{font-size:8px}.site-nav-account .nav-account-balance{padding-left:8px}.nav-shell:has(.nav-account.is-member) .nav-brand-copy{display:none}}

.nav-logout{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid #cc65834d;border-radius:12px;background:linear-gradient(115deg,#662a434d,#301d354d);color:#f5afc4;cursor:pointer}.nav-logout svg{width:23px;height:23px}.nav-logout:hover{background:#713b5966;border-color:#e585a278;color:#fff}.nav-logout:focus-visible,.site-logout-dialog button:focus-visible{outline:2px solid #85d8f7;outline-offset:3px}
.site-logout-dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:30px 24px;border:1px solid #5687a64d;border-radius:18px;background:radial-gradient(ellipse at top,#1d496233,transparent 65%),linear-gradient(145deg,#0e2a3d,#071b2c);box-shadow:0 25px 80px #0009;color:#e6f4ff;text-align:center;margin:auto}.site-logout-dialog::backdrop{background:#020a14b8;backdrop-filter:blur(4px)}.site-logout-dialog h2{font-size:24px;font-weight:600;margin:10px 0}.site-logout-dialog p{font-size:13px;color:#9dbed1;line-height:1.8}.logout-symbol{display:grid;place-items:center;width:64px;height:64px;margin:8px auto 20px;border:1px solid #a1658055;background:#8c3a5822;color:#f5afc4;border-radius:18px}.logout-symbol svg{width:30px;height:30px}.logout-close{position:absolute;right:12px;top:12px;width:40px;height:40px;display:grid;place-items:center;color:#a9cde0;background:transparent;border:0;border-radius:8px;cursor:pointer}.logout-close svg{width:24px;height:24px}.logout-actions{display:flex;justify-content:center;gap:12px;margin-top:24px}.logout-confirm,.logout-cancel{min-height:44px;border-radius:9px;padding:11px 22px;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer}.logout-confirm{border:1px solid #dd799b66;background:linear-gradient(115deg,#9c4264,#713b59);color:#fff}.logout-cancel{border:1px solid #55819b55;background:#18354a;color:#d4eafa}.site-logout-dialog .logout-error{color:#ffb6c8}.site-logout-dialog button:disabled{opacity:.5;cursor:wait}
@media(max-width:600px){.nav-account.is-member{gap:6px}.nav-logout{width:38px;height:40px;border-radius:10px}}

#siteHeader .nav-item-icon{width:19px;height:19px;flex:none}#siteHeader .nav-link,#siteHeader .nav-register,#siteHeader .nav-login:not(.site-nav-account),#siteHeader .menu-action:not(.site-nav-account){display:flex;align-items:center;justify-content:center;gap:8px}#siteHeader .mobile-nav .nav-link{justify-content:flex-start}

/* Shared navbar alignment across public and member pages. */
#siteHeader .nav-account .member-nav-account{margin-left:0}
#siteHeader .desktop-nav .nav-link{font-size:16px}
@media(min-width:1280px){
 #siteHeader .nav-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
 #siteHeader .nav-brand{justify-self:start}
 #siteHeader .desktop-nav{justify-self:center}
 #siteHeader .nav-account{justify-self:end}
}

/* Keep header typography independent of page-specific body styles. */
#siteHeader{font-family:Prompt,"Leelawadee UI",Tahoma,sans-serif;line-height:1.7}

/* Readable member identity and spaced currency in the shared header. */
#siteHeader .site-nav-account small{font-size:11px;line-height:1.5}
#siteHeader .site-nav-account strong{font-size:16px;line-height:1.5}
@media(max-width:600px){#siteHeader .site-nav-account small{font-size:10px}#siteHeader .site-nav-account strong{font-size:14px}}