/* =========================================================
   白金年中雙享禮 Landing Page / Register Page
   設計師主要調整檔案：style.css
   色彩、間距、卡片樣式、RWD 均集中於此
   ========================================================= */

:root {
  --color-ink: #31251f;
  --color-text: #5a4b42;
  --color-muted: #7a6a5e;
  --color-red: #b1382d;
  --color-red-dark: #8e2d26;
  --color-gold: #d7b56d;
  --color-paper: #f8f2e7;
  --color-paper-light: #fffaf2;
  --color-sage: #e6eadc;
  --color-white: #ffffff;
  --shadow-soft: 0 18px 45px rgba(49, 37, 31, 0.10);
  --shadow-card: 0 12px 28px rgba(49, 37, 31, 0.08);
  --radius-lg: 32px;
  --radius-xl: 44px;
  --container: 1160px;
  --header-height: 74px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "PingFang TC","Noto Serif TC", "Songti TC", "Source Han Serif TC", "PMingLiU", "MingLiU", serif;
  color: var(--color-ink);
  background: var(--color-paper);
  line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; }

.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.narrow { max-width: 860px; }
.center { text-align: center; }
.bg-light { background: var(--color-paper-light); }
.section-paper {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.78), transparent 18%),
    radial-gradient(circle at 75% 12%, rgba(219,190,129,.18), transparent 16%),
    radial-gradient(circle at 50% 80%, rgba(177,56,45,.08), transparent 20%);
}
.eyebrow { margin: 0 0 18px; color: var(--color-red); font-size: 13px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-size: clamp(40px, 7vw, 84px); line-height: 1.05; letter-spacing: .08em; }
h2 { margin-bottom: 22px; font-size: clamp(30px, 4vw, 54px); line-height: 1.22; letter-spacing: .04em; }
h3 { margin-bottom: 12px; font-size: 24px; line-height: 1.35; }
.lead, .hero-desc, .section-heading p { color: var(--color-text); font-size: 18px; line-height: 2; }
.small-note, .form-hint { color: var(--color-muted); font-size: 14px; }

/* Header */
.site-header { height: 70px; position: sticky; top: 50px; z-index: 50; background: rgba(248, 242, 231, .9); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(215, 181, 109, .36); }
.header-inner { height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; flex-direction: column; line-height: 1.1; }
.brand-mark { font-weight: 800; letter-spacing: .28em; }
.brand-subtitle { color: var(--color-red); font-size: 12px; letter-spacing: .22em; }
.main-nav {display: flex; gap: 26px; font-size: 14px; letter-spacing: .12em; }
.main-nav a {transition: color .2s ease; }
.main-nav a:hover { color: var(--color-red); }
.menu-button { display: none; width: 42px; height: 42px; border: 1px solid rgba(49,37,31,.2); border-radius: 50%; background: transparent; cursor: pointer; }
.menu-button span { display: block; width: 18px; height: 2px; margin: 4px auto; background: var(--color-ink); }
.mobile-nav { display: none; padding: 0 20px 18px; border-top: 1px solid rgba(215, 181, 109, .3); }
.mobile-nav a { display: block; padding: 12px 0; }
.mobile-nav.is-open { display: block; }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 62px 0 90px; margin-top: 50px;}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero-title { margin-bottom: 22px; font-size: clamp(24px, 3vw, 40px); font-weight: 700; line-height: 1.45; }
.hero-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 34px 0; max-width: 560px; }
.badge-card { min-height: 120px; padding: 18px; border: 1px solid rgba(215,181,109,.65); border-radius: 22px; background: rgba(255,255,255,.72); box-shadow: var(--shadow-card); }
.badge-card span, .gift-note { color: var(--color-red); font-size: 12px; font-weight: 700; letter-spacing: .2em; }
.badge-card strong { display: block; margin-top: 8px; font-size: 18px; }
.badge-card small { display: block; margin-top: 2px; color: var(--color-muted); }
.button-group { display: flex; flex-wrap: wrap; gap: 14px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 28px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; letter-spacing: .12em; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.button-primary, .button-dark {   background: #2f211b; 
  color: #ffffff;
  border: 1px solid #d7b56d;
  box-shadow: 0 10px 24px rgba(47, 33, 27, 0.22); }
.button-outline { background: rgba(255,255,255,.68); border-color: rgba(49,37,31,.25); }
.button-light { background: var(--color-white); color: var(--color-ink); }
.button-outline-light { border-color: rgba(255,255,255,.42); color: var(--color-white); }
.hero-visual { position: relative; height: auto; }
.hero-circle { position: absolute; inset: 0; margin: auto; width: min(100%, 520px); aspect-ratio: 1; border: 2px solid var(--color-gold); border-radius: 50%; background: linear-gradient(135deg, #efe4d2, #fffaf2 48%, #e4eadd); box-shadow: var(--shadow-soft); overflow: hidden; }
.hero-photo-placeholder { position: absolute; inset: 36px 36px auto; height: 190px; border-radius: 999px 999px 22px 22px; background: linear-gradient(145deg, rgba(177,56,45,.12), rgba(215,181,109,.25)), var(--color-white); border: 1px solid rgba(215,181,109,.55); display: grid; place-items: center; text-align: center; color: var(--color-muted); z-index: 0; }
.hero-photo-placeholder span { display: block; font-weight: 700; color: var(--color-ink); }
.hero-photo-placeholder small { display: block; font-size: 12px; }
.tower-shape { position: absolute; left: 50%; top: 78px; transform: translateX(-50%); width: 96px; height: 215px; clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #c54b3f, #7e2c25); opacity: .78; z-index: 1; }
.gift-box-card { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%); width: 280px; padding: 26px 22px; text-align: center; border: 1px solid rgba(215,181,109,.7); border-radius: 28px; background: rgba(255,255,255,.88); box-shadow: var(--shadow-soft); z-index: 2; }
.gift-box-card span { color: var(--color-red); font-size: 12px; letter-spacing: .24em; }
.gift-box-card strong { display: block; margin: 8px 0; font-size: 28px; }
.gift-box-card p { color: var(--color-text); font-size: 14px; margin-bottom: 0; }
.vertical-note { position: absolute; left: -16px; bottom: 84px; writing-mode: vertical-rl; padding: 18px 12px; border-radius: 12px; background: var(--color-ink); color: var(--color-white); letter-spacing: .12em; }
.deco-circle { position: absolute; border: 1px solid rgba(215,181,109,.65); border-radius: 50%; }
.deco-circle-large { width: 320px; height: 320px; left: -140px; top: -140px; }
.deco-pattern { position: absolute; width: 110px; height: 110px; background-image: linear-gradient(90deg, rgba(177,56,45,.18) 1px, transparent 1px), linear-gradient(rgba(177,56,45,.18) 1px, transparent 1px); background-size: 18px 18px; }
.deco-pattern-right { right: 36px; bottom: 56px; opacity: .7; }

/* Section common */
.intro-section, .gift-section, .skincare-section, .video-section, .claim-section { padding: 92px 0; }
.value-section, .teacher-section, .detail-section, .register-form-section { padding: 92px 0; }
.section-heading { max-width: 780px; }
.section-heading.center { margin-inline: auto; text-align: center; }
.situation-grid, .gift-grid { display: grid; gap: 22px; margin-top: 48px; }
.situation-grid { grid-template-columns: repeat(4, 1fr); }
.situation-card, .value-card, .gift-card, .claim-card, .register-form, .register-notice { border: 1px solid rgba(215,181,109,.65); background: rgba(255,255,255,.68); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.situation-card { padding: 26px; text-align: left; }
.icon-dot { display: block; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 50%; background: rgba(177,56,45,.12); position: relative; }
.icon-dot::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--color-red); }
.situation-card p, .value-card p, .gift-card p { color: var(--color-text); }

/* Value */
.value-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.sticky-heading { position: sticky; top: 110px; }
.value-list { display: grid; gap: 20px; }
.value-card { position: relative; overflow: hidden; padding: 34px; }
.value-card::after { content: ""; position: absolute; right: -52px; top: -52px; width: 140px; height: 140px; border: 1px solid rgba(215,181,109,.65); border-radius: 50%; }
.number { color: rgba(177,56,45,.28); font-size: 56px; line-height: 1; }

/* Teacher */
.teacher-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.teacher-photo { position: relative; min-height: 520px; border-radius: var(--radius-xl); background: linear-gradient(145deg, #efe4d2, #fffaf2 55%, #e4eadd); border: 1px solid rgba(215,181,109,.75); box-shadow: var(--shadow-soft); overflow: hidden; }
.teacher-photo::before { content: ""; position: absolute; inset: 34px; border: 1px solid rgba(215,181,109,.65); border-radius: 50%; }
.teacher-image-placeholder { position: absolute; inset: 72px 58px; border-radius: 50%; background: rgba(255,255,255,.72); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.teacher-image-placeholder span { font-size: 34px; font-weight: 700; }
.teacher-image-placeholder small { color: var(--color-muted); }
.teacher-label { position: absolute; left: 32px; bottom: 32px; padding: 12px 16px; background: var(--color-ink); color: var(--color-white); border-radius: 12px; letter-spacing: .2em; font-size: 12px; }
.teacher-highlight { padding: 22px; border-left: 4px solid var(--color-red); background: rgba(255,255,255,.62); border-radius: 0 18px 18px 0; margin: 26px 0; }
.teacher-highlight strong { display: block; margin-bottom: 8px; font-size: 20px; }
.teacher-highlight p { margin-bottom: 0; color: var(--color-text); }
.teacher-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0; }
.teacher-points div { padding: 18px; border-radius: 20px; background: rgba(255,255,255,.65); border: 1px solid rgba(215,181,109,.5); }
.teacher-points strong { display: block; margin-bottom: 8px; }
.teacher-points p { margin-bottom: 0; color: var(--color-text); font-size: 14px; }

/* Gifts */
.gift-grid { grid-template-columns: repeat(2, 1fr); }
.gift-card { position: relative; overflow: hidden; padding: 34px; }
.gift-tag, .limited-tag { display: inline-flex; padding: 8px 14px; border-radius: 999px; background: var(--color-red); color: var(--color-white); font-size: 12px; letter-spacing: .18em; }
.gift-tag { position: absolute; right: 28px; top: 28px; }
.gift-visual { height: 180px; margin-bottom: 26px; border-radius: 26px; border: 1px solid rgba(215,181,109,.58); background: linear-gradient(135deg, #f0dfbd, #fffaf2, #e6eadc); }
.gift-visual-bazi { background-image: radial-gradient(circle at center, rgba(177,56,45,.18), transparent 32%), linear-gradient(135deg, #f0dfbd, #fffaf2, #e6eadc); }
.gift-visual-skincare { background-image: linear-gradient(135deg, rgba(177,56,45,.12), transparent), linear-gradient(135deg, #fffaf2, #e6eadc); }
.gift-value { display: inline-flex; margin: 4px 0 18px; padding: 8px 14px; border: 1px solid var(--color-gold); border-radius: 999px; }

/* Detail */
.detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.detail-layout.reverse { grid-template-columns: 1fr 1fr; }
.bazi-panel, .product-panel { position: relative; min-height: 430px; border-radius: var(--radius-xl); background: rgba(255,255,255,.65); border: 1px solid rgba(215,181,109,.7); box-shadow: var(--shadow-soft); padding: 46px; }
.vertical-label { position: absolute; left: 24px; top: 30px; writing-mode: vertical-rl; color: var(--color-red); letter-spacing: .18em; font-weight: 700; }
.bazi-grid { width: min(100%, 330px); aspect-ratio: 1; margin: 30px auto 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 26px; border-radius: 50%; border: 1px solid var(--color-gold); background: var(--color-paper-light); }
.bazi-grid span { display: grid; place-items: center; border: 1px solid rgba(215,181,109,.6); border-radius: 14px; background: rgba(255,255,255,.7); color: var(--color-text); }
.mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 26px 0; }
.mini-grid span { padding: 16px; border-radius: 18px; border: 1px solid rgba(215,181,109,.6); background: rgba(255,255,255,.66); font-weight: 700; }
.dark-note { padding: 20px; border-radius: 20px; background: var(--color-ink); color: var(--color-white); }
.product-list { padding-left: 0; list-style: none; margin: 28px 0 0; }
.product-list li { position: relative; padding-left: 24px; margin-bottom: 12px; color: var(--color-text); }
.product-list li::before { content: ""; position: absolute; left: 0; top: .8em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-red); }
.product-panel { background: linear-gradient(135deg, #f3e7d1, #eef0e6); text-align: center; }
.product-box { width: 240px; min-height: 290px; margin: 10px auto 10px; padding: 34px 24px; border: 1px solid var(--color-gold); border-radius: 30px; background: rgba(255,255,255,.82) ; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.product-box.compact {min-height: 150px; max-height: 350px; }
.product-box small { color: var(--color-red); letter-spacing: .28em; }
.product-box strong { font-size: 30px; line-height: 1.35; }
.product-box span { padding: 8px 14px; border-radius: 999px; background: var(--color-paper); }

/* Claim */
.claim-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: 36px; align-items: center; }
.claim-card { padding: 36px; }
.claim-card p { color: var(--color-text); }

/* Video */
.video-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.video-placeholder { min-height: 360px; border-radius: var(--radius-xl); background: linear-gradient(135deg, rgba(49,37,31,.78), rgba(177,56,45,.6)), var(--color-ink); display: grid; place-items: center; box-shadow: var(--shadow-soft); }
.play-button { width: 86px; height: 86px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.18); color: var(--color-white); font-size: 34px; cursor: pointer; }

/* Footer */
.site-footer { padding: 92px 0; background: var(--color-ink); color: var(--color-white); }
.footer-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: start; }
.footer-layout.single { display: block; }
.rules-panel .eyebrow { color: var(--color-gold); }
.rules-content { display: grid; gap: 12px; color: rgba(255,255,255,.82); }
.rules-content p { margin-bottom: 0; }
.footer-cta p { color: rgba(255,255,255,.76); }

/* Register page */
.register-hero { padding: 70px 0 74px; margin-top: 50px;}
.register-hero-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.register-hero h1 { font-size: clamp(38px, 5vw, 66px); }
.register-gift-card { position: relative;  aspect-ratio:1500 / 1200; height: auto; border-radius: var(--radius-xl); background: rgba(255,255,255,.72); border: 1px solid rgba(215,181,109,.7);  box-shadow: var(--shadow-soft); text-align: center; box-sizing: border-box;}
.register-gift-card span.limited-tag{position: absolute; z-index: 2; left: 50%; transform: translate(-50%, 0%); top:5px;}
.register-gift-card > .product-box{position: absolute;  z-index: 2; left: 50%; top:50%; transform: translate(-50%, -50%); opacity: 0.85;}
.register-gift-card > .product-img{width: 100%; aspect-ratio:1500 / 1200; position: absolute; z-index: 1; padding: 20px; box-sizing: border-box;left: 50%; top:50%; transform: translate(-50%, -50%);}
.register-gift-card img{width: 100%; height: auto; margin: 0 auto; border-radius: 32px;}
.register-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 36px; align-items: start; }
.register-notice, .register-form { padding: 34px; }
.register-notice { position: sticky; top: 100px; }
.register-notice ul { padding-left: 22px; color: var(--color-text); }
.register-notice li { margin-bottom: 10px; }
.form-grid { display: grid; gap: 18px; margin-top: 24px; }
.two-columns { grid-template-columns: repeat(2, minmax(0,1fr)); }
.register-form label, .status-form label { display: grid; gap: 8px; font-weight: 700; }
.register-form input, .register-form select, .status-form select { width: 100%; min-height: 52px; border: 1px solid rgba(49,37,31,.18); border-radius: 16px; background: rgba(255,255,255,.92); padding: 12px 14px; color: var(--color-ink); }
.register-form input:focus, .register-form select:focus { outline: 2px solid rgba(215,181,109,.55); border-color: var(--color-gold); }
.agreement-box { display: grid; gap: 14px; margin: 28px 0; padding: 20px; border-radius: 22px; background: var(--color-paper-light); border: 1px solid rgba(215,181,109,.55); }
.checkbox-label { display: grid !important; grid-template-columns: auto 1fr; align-items: start; gap: 12px !important; font-weight: 400 !important; color: var(--color-text); }
.checkbox-label input { width: 18px; height: 18px; margin-top: -10px; }
.form-error { min-height: 24px; color: var(--color-red-dark); font-weight: 700; }
.result-summary { margin: 28px auto; padding: 24px; border-radius: 22px; background: rgba(255,255,255,.72); border: 1px solid rgba(215,181,109,.65); text-align: left; }
.result-summary p { margin-bottom: 8px; color: var(--color-text); }
.register-result { padding: 84px 0; }
.simple-footer { padding: 70px 0; }

/* Modal */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(49,37,31,.62); }
.modal-content { position: relative; width: min(100%, 560px); padding: 34px; border-radius: 30px; background: var(--color-paper-light); box-shadow: var(--shadow-soft); }
.modal-close { position: absolute; right: 18px; top: 14px; border: 0; background: transparent; font-size: 28px; cursor: pointer; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Sticky CTA */
.sticky-cta {height: 70px; display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 10px 12px; background: rgba(255,250,242,.94); border-top: 1px solid rgba(215,181,109,.55); backdrop-filter: blur(14px); }
.sticky-cta .button { width: 100%; height: 50px; }
.sticky-cta .button a{ width: 100%; height: 50px; }

/* Responsive */
@media (max-width: 980px) {
  .main-nav { display: none; }
  .menu-button { display: block; }
  .hero-grid, .value-layout, .teacher-layout, .detail-layout, .claim-layout, .video-layout, .footer-layout, .register-hero-layout, .register-layout { grid-template-columns: 1fr; }
  .sticky-heading, .register-notice { position: static; }
  .situation-grid { grid-template-columns: repeat(2, 1fr); }
  .teacher-points { grid-template-columns: 1fr; }
  .footer-layout { gap: 30px; }
}

@media (max-width: 720px) {
  .container { width: min(100% - 28px, var(--container)); }
  body { padding-bottom: 78px; }
  .hero { padding: 28px 0 64px; }
  .hero-grid { display: flex; flex-direction: column; gap: 20px; }
  .hero-visual { order: -1; height: auto; width: 100%; margin-top: -10px; }
  .hero-circle { width: min(94vw, 360px); top: -20px; bottom: auto; }
  .hero-photo-placeholder { inset: 24px 24px auto; height: 132px; }
  .tower-shape { top: 60px; height: 150px; width: 72px; }
  .gift-box-card { bottom: 30px; width: 230px; padding: 18px 16px; }
  .gift-box-card strong { font-size: 22px; }
  .vertical-note { display: none; }
  .hero-badges { grid-template-columns: 1fr 1fr; gap: 10px; }
  .badge-card { min-height: 106px; padding: 14px; }
  .badge-card strong { font-size: 16px; }
  .button-group { flex-direction: column; }
  .button { width: 100%; }
  .intro-section, .gift-section, .skincare-section, .video-section, .claim-section, .value-section, .teacher-section, .detail-section, .register-form-section { padding: 64px 0; }
  .situation-grid, .gift-grid, .mini-grid, .two-columns { grid-template-columns: 1fr; }
  .teacher-photo { min-height: 360px; }
  .teacher-image-placeholder { inset: 58px 42px; }
  .bazi-panel, .product-panel { min-height: auto; padding: 30px; }
  .bazi-grid { padding: 18px; }
  .video-placeholder { min-height: 240px; }
  .site-footer { padding: 64px 0; }
  .register-hero { padding: 44px 0 54px; }
  .register-form, .register-notice { padding: 24px; }
  .sticky-cta { display: block; }
  .register-gift-card > .product-img{padding: 12px;}
}


/* =========================================================
   v3 調整區：依回饋優化手機版、字級、張盛舒老師區塊與頁尾順序
   ========================================================= */
body { font-size: 18px; }
p, li { font-size: 18px; }
.main-nav, .mobile-nav { font-size: 16px; }
.eyebrow { font-size: 15px; }
h2 { font-size: clamp(34px, 4.2vw, 56px); }
h3 { font-size: 28px; }
.lead, .hero-desc, .section-heading p, .detail-copy p, .claim-card p, .gift-card p { font-size: 20px; line-height: 2; }
.button { font-size: 18px; min-height: 50px; }
.badge-card strong { font-size: 22px; }
.badge-card small { font-size: 17px; }

.hero-visual-mobile { display: none; }

.situation-card { padding: 30px; }
.situation-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 50%;
  background: #f3dedb;
  color: var(--color-red);
  font-size: 26px;
  font-weight: 800;
}
.situation-kicker {
  margin-bottom: 8px;
  color: var(--color-red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.situation-card h3 { margin-bottom: 14px; }
.situation-card p:not(.situation-kicker) { font-size: 20px; line-height: 1.9; }

.teacher-img {
  position: absolute;
  inset: 52px;
  width: calc(100% - 104px);
  height: calc(100% - 104px);
  object-fit: cover;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(215,181,109,.65);
}
.teacher-copy .lead { font-size: 20px; }
.teacher-highlight strong { font-size: 24px; }
.teacher-points p { font-size: 17px; line-height: 1.8; }
.detail-price {
  display: inline-flex;
  margin: 0 0 20px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-gold);
  background: rgba(255,255,255,.76);
  color: var(--color-red-dark);
  font-size: 18px;
}

.final-cta-section {
  padding: 92px 0;
  background: linear-gradient(135deg, #fffaf2, #f0dfbd 55%, #e6eadc);
  border-top: 1px solid rgba(215,181,109,.45);
  border-bottom: 1px solid rgba(215,181,109,.45);
}
.center-buttons { justify-content: center; }
.site-footer .footer-layout { display: block; }
.site-footer .rules-panel { max-width: 980px; margin: 0 auto; }
.rules-content p { font-size: 18px; line-height: 1.9; }

@media (max-width: 720px) {
  body { font-size: 18px; }
  p, li { font-size: 18px; }
  h2 { font-size: 34px; }
  h3 { font-size: 26px; }
  .lead, .hero-desc, .section-heading p, .detail-copy p, .claim-card p, .gift-card p { font-size: 18px; line-height: 1.95; }
  .hero { padding-top: 30px; }
  .hero-grid { display: block; }
  .hero-grid > .hero-visual { display: none; }
  .hero-visual-mobile {
    width: 100%;
    display: block;
    position: relative;
    height: auto;
    margin: 20px auto;
    margin: 0 auto;
  }
  .mobile-hero-circle {
    position: relative;
    width: min(100%, 360px);
    margin: 0 auto;
    inset: auto;
  }
  .hero-badges { margin-top: 20px; grid-template-columns: 1fr; }
  .badge-card { min-height: auto; }
  .situation-card { padding: 28px; }
  .situation-icon { width: 56px; height: 56px; font-size: 25px; }
  .teacher-img {
    inset: 42px;
    width: calc(100% - 84px);
    height: calc(100% - 84px);
  }
  .product-panel {
    overflow: hidden;
    padding: 28px 18px;
  }
  .product-box {
    width: min(100%, 260px);
    min-height: 250px;
    padding: 26px 16px;
  }
  .product-box strong { font-size: 25px; }
  .product-panel p { font-size: 17px; line-height: 1.85; }
  .final-cta-section { padding: 64px 0; }
  .register-form .form-grid { grid-template-columns: 1fr; }
  .product-box.compact {padding:10px 10px;}
}

/* =========================================================
   v4 調整區：新增白金權益、吉運、有卦、正式影片、老師照片與手機版保養區
   ========================================================= */

/* 張盛舒老師照片：使用透明 PNG，不裁切臉部與手勢 */
.teacher-photo {
  overflow: visible;
  background: radial-gradient(circle at 55% 55%, rgba(255,255,255,.92), rgba(240,223,189,.45) 70%, rgba(255,250,242,.2));
}
.teacher-img {
  inset: auto 18px 0 18px;
  width: calc(100% - 36px);
  height: calc(100% - 26px);
  object-fit: contain;
  object-position: center bottom;
  border-radius: 0;
  border: 0;
  background: transparent;
}
.teacher-label { z-index: 2; }

/* 白金權益整理 */
.benefits-section { padding: 92px 0; }
.benefit-board {
  display: grid;
  grid-template-columns: 170px 1fr 220px;
  gap: 0;
  margin-top: 44px;
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(215,181,109,.75);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-soft);
}
.benefit-category,
.benefit-content,
.benefit-price {
  padding: 28px 30px;
  border-bottom: 1px solid rgba(215,181,109,.55);
}
.benefit-category {
  display: grid;
  place-items: center;
  background: rgba(255,250,242,.92);
  color: #565656;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: .18em;
}
.benefit-content {
  background: linear-gradient(90deg, rgba(197,75,63,.09), rgba(255,255,255,.72));
}
.benefit-content h3 { margin-bottom: 14px; color: var(--color-ink); }
.benefit-content ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.benefit-content li {
  position: relative;
  padding-left: 24px;
  color: var(--color-text);
  font-size: 20px;
  line-height: 1.55;
}
.benefit-content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #b936e8;
}
.benefit-price {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  background: rgba(255,250,242,.9);
  color: #565656;
}
.benefit-price strong { font-size: 26px; font-weight: 500; }
.benefit-price span { font-size: 32px; line-height: 1.35; }
.benefit-exclusive span { color: #b936e8; font-size: 32px; font-weight: 700; }
.benefit-board > :nth-last-child(-n+3) { border-bottom: 0; }
.bonus-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 28px;
}
.bonus-benefits article {
  padding: 32px;
  border-radius: 28px;
  border: 1px solid rgba(215,181,109,.65);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-card);
}
.bonus-benefits article p:last-child { color: var(--color-text); }
.benefit-summary {
  margin-top: 34px;
  padding: 36px;
  border-radius: 34px;
  text-align: center;
  background: linear-gradient(135deg, #fffaf2, #f0dfbd 48%, #e6eadc);
  border: 1px solid rgba(215,181,109,.65);
  box-shadow: var(--shadow-card);
}
.benefit-summary p { margin-bottom: 10px; font-size: 24px; color: var(--color-text); }
.benefit-summary h3 { font-size: clamp(36px, 5vw, 64px); }
.benefit-summary h3 strong { color: #d60000; }
.benefit-summary .button { margin-top: 12px; }

/* 影片：直接嵌入 YouTube，不用 JS 生成 */
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-ink);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(215,181,109,.55);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-copy .button { margin-top: 18px; }

/* 手機版：保濕旅行組上下堆疊，不左右排 */
@media (max-width: 980px) {
  .benefit-board { grid-template-columns: 1fr; }
  .benefit-category,
  .benefit-content,
  .benefit-price { border-bottom: 1px solid rgba(215,181,109,.55); }
  .benefit-board > :nth-last-child(-n+3) { border-bottom: 1px solid rgba(215,181,109,.55); }
  .benefit-board > :last-child { border-bottom: 0; }
  .benefit-content ul { grid-template-columns: 1fr; }
  .bonus-benefits { grid-template-columns: 1fr; }
  .skincare-section .detail-layout.reverse {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .skincare-section .detail-copy { order: 1; }
  .skincare-section .product-panel { order: 2; width: 100%; }
}

@media (max-width: 720px) {
  .benefits-section { padding: 64px 0; }
  .benefit-category { font-size: 30px; padding: 20px; }
  .benefit-content, .benefit-price { padding: 24px; }
  .benefit-content li { font-size: 19px; }
  .benefit-price span, .benefit-exclusive span { font-size: 30px; }
  .bonus-benefits article { padding: 26px; }
  .benefit-summary { padding: 28px 20px; }
  .benefit-summary p { font-size: 20px; }
  .teacher-photo { min-height: 430px; }
  .teacher-img {
    inset: auto 4px 0 4px;
    width: calc(100% - 8px);
    height: calc(100% - 14px);
  }
  .video-layout { gap: 26px; }
}

/* =========================================================
   v5 調整區：白金價值區改為高可讀性價值卡
   設計重點：先總價值、再四大價值卡、最後補充吉運/有卦。
   手機版一張一卡直向閱讀，避免表格堆疊造成脈絡不清。
   ========================================================= */
.benefit-value-hero {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 28px;
  align-items: center;
  margin-top: 42px;
  padding: clamp(28px, 4vw, 46px);
  border-radius: 36px;
  border: 1px solid rgba(215,181,109,.72);
  background:
    radial-gradient(circle at 92% 18%, rgba(185,54,232,.14), transparent 28%),
    linear-gradient(135deg, rgba(255,250,242,.95), rgba(240,223,189,.52));
  box-shadow: var(--shadow-soft);
}
.benefit-value-copy h3 {
  margin: 8px 0 14px;
  font-size: clamp(36px, 5vw, 70px);
  line-height: 1.12;
  letter-spacing: .02em;
}
.benefit-value-copy h3 strong { color: #d60000; white-space: nowrap; }
.benefit-value-copy p {
  max-width: 760px;
  margin: 0;
  color: var(--color-text);
  font-size: 24px;
  line-height: 1.8;
}
.benefit-value-copy p strong { color: #d60000; font-size: 1.18em; }
.benefit-value-seal {
  width: 188px;
  height: 188px;
  display: grid;
  place-items: center;
  align-content: center;
  justify-self: center;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  background: radial-gradient(circle at 32% 25%, #e95d4f, #b1382d 65%, #7a1e18);
  box-shadow: 0 18px 32px rgba(177,56,45,.26);
  transform: rotate(-4deg);
}
.benefit-value-seal span { font-size: 24px; letter-spacing: .18em; }
.benefit-value-seal strong { display: block; font-size: 46px; line-height: 1.05; }
.benefit-value-seal small { display: block; margin-top: 8px; font-size: 15px; letter-spacing: .08em; }

.benefit-readable-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 30px;
}
.benefit-readable-card {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3vw, 36px);
  border-radius: 32px;
  border: 1px solid rgba(215,181,109,.72);
  background: rgba(255,255,255,.76);
  box-shadow: var(--shadow-card);
}
.benefit-readable-card::after {
  content: "";
  position: absolute;
  right: -58px;
  top: -58px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(185,54,232,.08);
}
.benefit-card-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
}
.benefit-icon {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  background: linear-gradient(135deg, #b936e8, #7f2bb8);
  box-shadow: 0 12px 20px rgba(185,54,232,.18);
}
.benefit-kicker {
  margin: 0 0 4px;
  color: #b1382d;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.benefit-card-head h3 {
  margin: 0;
  font-size: clamp(27px, 2.4vw, 34px);
  line-height: 1.32;
}
.benefit-card-desc {
  position: relative;
  z-index: 1;
  margin: 0 0 20px;
  color: var(--color-text);
  font-size: 21px;
  line-height: 1.85;
}
.pill-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pill-list li {
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,250,242,.92);
  border: 1px solid rgba(215,181,109,.62);
  color: #57473d;
  font-size: 18px;
  line-height: 1.35;
}
.benefit-card-value {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 22px;
  padding: 12px 18px;
  border-radius: 18px;
  background: #31251f;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
.benefit-card-value strong { font-size: 28px; color: #ffd98a; }
.benefit-card-value.exclusive {
  color: #fff;
  background: linear-gradient(135deg, #b936e8, #7f2bb8);
  font-size: 25px;
  letter-spacing: .12em;
}
.benefit-card-flow .benefit-icon { background: linear-gradient(135deg, #d7a43a, #b1382d); }
.benefit-card-relationship .benefit-icon { background: linear-gradient(135deg, #5d8a68, #2f5c44); }
.benefit-card-bonus .benefit-icon { background: linear-gradient(135deg, #c54b3f, #8f2e26); }

.benefit-addon-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 28px;
}
.benefit-addon-strip article {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  align-items: start;
  padding: 30px;
  border-radius: 30px;
  border: 1px solid rgba(215,181,109,.68);
  background: rgba(255,250,242,.78);
  box-shadow: var(--shadow-card);
}
.addon-icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f1dfbd;
  color: #b1382d;
  font-size: 30px;
  font-weight: 800;
}
.benefit-addon-strip h3 { margin: 5px 0 8px; font-size: 28px; }
.benefit-addon-strip p:last-child {
  margin: 0;
  color: var(--color-text);
  font-size: 19px;
  line-height: 1.8;
}
.benefit-readability-cta {
  margin-top: 32px;
  padding: 34px;
  border-radius: 32px;
  text-align: center;
  background: #31251f;
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.benefit-readability-cta p {
  max-width: 800px;
  margin: 0 auto 22px;
  color: rgba(255,255,255,.86);
  font-size: 23px;
  line-height: 1.85;
}
.benefit-readability-cta .button { background: #fff; color: #31251f; }

@media (max-width: 980px) {
  .benefit-value-hero,
  .benefit-readable-grid,
  .benefit-addon-strip { grid-template-columns: 1fr; }
  .benefit-value-seal { width: 160px; height: 160px; }
}

@media (max-width: 720px) {
  .benefit-value-hero { padding: 26px 20px; border-radius: 28px; text-align: left; }
  .benefit-value-copy h3 { font-size: 40px; }
  .benefit-value-copy p { font-size: 20px; line-height: 1.85; }
  .benefit-value-seal { width: 138px; height: 138px; margin: 4px auto 0; }
  .benefit-value-seal span { font-size: 19px; }
  .benefit-value-seal strong { font-size: 36px; }
  .benefit-value-seal small { font-size: 13px; }
  .benefit-readable-grid { gap: 18px; }
  .benefit-readable-card { padding: 24px 18px; border-radius: 26px; }
  .benefit-card-head { grid-template-columns: 62px 1fr; gap: 14px; }
  .benefit-icon { width: 62px; height: 62px; border-radius: 20px; font-size: 28px; }
  .benefit-kicker { font-size: 14px; }
  .benefit-card-head h3 { font-size: 28px; }
  .benefit-card-desc { font-size: 19px; line-height: 1.85; }
  .pill-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .pill-list li { font-size: 18px; padding: 10px 14px; border-radius: 16px; }
  .benefit-card-value { width: 100%; justify-content: center; font-size: 19px; }
  .benefit-card-value strong { font-size: 25px; }
  .benefit-addon-strip article { grid-template-columns: 1fr; gap: 12px; padding: 24px 18px; border-radius: 26px; }
  .addon-icon { width: 58px; height: 58px; font-size: 25px; }
  .benefit-addon-strip h3 { font-size: 26px; }
  .benefit-addon-strip p:last-child { font-size: 18px; }
  .benefit-readability-cta { padding: 26px 18px; border-radius: 26px; }
  .benefit-readability-cta p { font-size: 19px; }
}

/* =========================================================
   v6 調整區：統一寬度、四大需求加寬、老師形象重設、白金權益簡化
   ========================================================= */
:root { --container: 1200px; }

/* Header：四個 TAB 全部展開，不再使用漢堡選單 */
.site-header { overflow-x: clip; }
.header-inner { align-items: center; }
.menu-button { display: none !important; }
.main-nav {
  display: flex !important;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.main-nav a {
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(215,181,109,.45);
  background: rgba(255,250,242,.72);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
}
.mobile-nav { display: none !important; }

/* 統一 PC / Mobile 內容寬度，不讓 narrow 造成卡片被壓窄 */
.container.narrow { max-width: var(--container); }
.intro-section .container.narrow,
.final-cta-section .container.narrow { max-width: var(--container); }

/* 四大需求：卡片加寬、減少窄長感 */
.situation-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}
.situation-card {
  min-height: 320px;
  padding: 32px 28px;
}
.situation-card h3 { font-size: 30px; }
.situation-card p:not(.situation-kicker) { font-size: 21px; line-height: 1.85; }

/* 張盛舒老師：改成左右清楚、照片有舞台感，不再用圓框裁切 */
.teacher-layout-v6 {
  grid-template-columns: 1.02fr .98fr;
  gap: 42px;
  align-items: stretch;
}
.teacher-copy-v6 {
  padding: clamp(30px, 4vw, 54px);
  border-radius: 36px;
  border: 1px solid rgba(215,181,109,.7);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-card);
}
.teacher-copy-v6 h2 { margin-bottom: 24px; }
.teacher-copy-v6 .lead { font-size: 22px; line-height: 1.95; }
.teacher-highlight-v6 {
  margin: 30px 0 0;
  padding: 26px 28px;
  border-left: 0;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(49,37,31,.94), rgba(92,53,44,.94));
  color: #fff;
}
.teacher-highlight-v6 strong {
  color: #ffd98a;
  font-size: 26px;
}
.teacher-highlight-v6 p {
  color: rgba(255,255,255,.88);
  font-size: 20px;
  line-height: 1.85;
}
.teacher-photo-v6 {
  min-height: 620px;
  border-radius: 38px;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.9), transparent 28%),
    linear-gradient(145deg, #f5e6cf, #fffaf2 52%, #eaded1);
  overflow: hidden;
}
.teacher-photo-v6::before {
  inset: auto;
  left: 28px;
  top: 28px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  border: 1px solid rgba(215,181,109,.72);
}
.teacher-photo-bg {
  position: absolute;
  right: -72px;
  bottom: -70px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(177,56,45,.10);
}
.teacher-img-v6 {
  position: absolute;
  inset: auto 2% 0 auto;
  width: min(72%, 430px);
  height: 95%;
  object-fit: contain;
  object-position: right bottom;
  border: 0;
  border-radius: 0;
  background: transparent;
  z-index: 1;
}
.teacher-name-card {
  position: absolute;
  left: 32px;
  bottom: 32px;
  z-index: 2;
  max-width: 280px;
  padding: 20px 22px;
  border-radius: 24px;
  background: rgba(49,37,31,.92);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.teacher-name-card span {
  display: block;
  margin-bottom: 6px;
  color: #ffd98a;
  font-size: 16px;
  letter-spacing: .16em;
}
.teacher-name-card strong {
  display: block;
  font-size: 30px;
  line-height: 1.2;
}
.teacher-points,
.teacher-copy .small-note { display: none !important; }

/* 白金權益：刪除大總價值卡與價值標記後，讓四張卡更像可閱讀說明 */
.benefits-section .section-heading.center {
  max-width: 900px;
}
.benefit-readable-grid {
  margin-top: 42px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
.benefit-readable-card {
  padding: 34px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
}
.benefit-readable-card::after { display: none; }
.benefit-card-head {
  grid-template-columns: 72px 1fr;
  gap: 18px;
  margin-bottom: 22px;
}
.benefit-icon {
  width: 72px;
  height: 72px;
  border-radius: 24px;
}
.benefit-card-desc {
  font-size: 21px;
  line-height: 1.85;
  margin-bottom: 22px;
}
.pill-list {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.pill-list li {
  border-radius: 18px;
  padding: 12px 14px;
  font-size: 18px;
  line-height: 1.45;
}
.benefit-card-value { display: none !important; }
.benefit-addon-strip { margin-top: 28px; }
.benefit-readability-cta { margin-top: 30px; }

/* CTA 寬度與內距統一 */
.claim-layout,
.video-layout,
.footer-layout,
.detail-layout,
.register-layout,
.register-hero-layout { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.claim-layout.container,
.video-layout.container,
.footer-layout.container,
.detail-layout.container,
.register-layout.container,
.register-hero-layout.container { width: min(100% - 40px, var(--container)); }

@media (max-width: 980px) {
  .header-inner { height: 45px; flex-direction: column; gap: 12px; padding: 14px 0; }
  .brand { align-items: center; }
  .main-nav {
    width: 100%;
    justify-content: center;
    gap: 8px;
  }
  .main-nav a { font-size: 15px; padding: 8px 12px; }
  .situation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teacher-layout-v6,
  .benefit-readable-grid { grid-template-columns: 1fr; }
  .teacher-photo-v6 { min-height: 560px; }
  .teacher-img-v6 { width: min(68%, 390px); }
}

@media (max-width: 720px) {
  .container,
  .claim-layout,
  .video-layout,
  .footer-layout,
  .detail-layout,
  .register-layout,
  .register-hero-layout,
  .claim-layout.container,
  .video-layout.container,
  .footer-layout.container,
  .detail-layout.container,
  .register-layout.container,
  .register-hero-layout.container {
    width: min(100% - 28px, var(--container));
  }
  .site-header { height: 45px;  position: sticky; }
  .header-inner { height: 45px; }
  .main-nav {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .main-nav a {
    height: 30px;
    padding: 0px 4px;
    font-size: 14px;
    letter-spacing: .02em;
    box-sizing: border-box;
  }
  .situation-grid { grid-template-columns: 1fr; gap: 16px; }
  .situation-card {
    min-height: auto;
    padding: 26px 24px;
  }
  .situation-card h3 { font-size: 30px; }
  .situation-card p:not(.situation-kicker) { font-size: 20px; }
  .teacher-copy-v6 { padding: 28px 22px; border-radius: 30px; }
  .teacher-copy-v6 .lead { font-size: 20px; }
  .teacher-highlight-v6 { padding: 22px; }
  .teacher-highlight-v6 strong { font-size: 23px; }
  .teacher-highlight-v6 p { font-size: 19px; }
  .teacher-photo-v6 { min-height: 520px; border-radius: 30px; }
  .teacher-photo-v6::before { width: 160px; height: 160px; left: 20px; top: 20px; }
  .teacher-img-v6 {
    width: min(86%, 340px);
    height: 92%;
    right: -28px;
  }
  .teacher-name-card {
    left: 18px;
    bottom: 18px;
    max-width: 230px;
    padding: 16px 18px;
    border-radius: 20px;
  }
  .teacher-name-card strong { font-size: 26px; }
  .benefit-readable-card {
    min-height: auto;
    padding: 26px 20px;
  }
  .benefit-card-head {
    grid-template-columns: 60px 1fr;
    gap: 14px;
  }
  .benefit-icon { width: 60px; height: 60px; border-radius: 20px; font-size: 28px; }
  .benefit-card-head h3 { font-size: 28px; }
  .benefit-card-desc { font-size: 19px; }
  .pill-list { grid-template-columns: 1fr; gap: 9px; }
  .pill-list li { font-size: 18px; }
}

/* =========================
   v7 調整區：依 Joanne 2026-06-01 回饋
   重點：移除品牌頂部塊、老師區塊重設、贈品視覺強化、手機閱讀優化
   ========================= */

/* Header：只保留四個 TAB */
.site-header.nav-only {
  background: rgba(248, 242, 231, .96);
  border-bottom: 1px solid rgba(215, 181, 109, .42);
}
.nav-only-inner {
  justify-content: center !important;
  height: 70px;
}
.nav-tabs {
  width: min(100%, 760px);
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  font-size: 17px;
  letter-spacing: .08em;
}
.nav-tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(215, 181, 109, .48);
  border-radius: 999px;
  background: rgba(255, 250, 242, .76);
  color: var(--color-ink);
  font-weight: 700;
}
.nav-tabs a:hover { background: #fff; color: var(--color-red); }

/* Hero：用兩個贈品做主視覺 */
.hero-grid-v7 { align-items: center; }
.hero-visual-v7 {
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hero-gift-showcase {
  position: relative;
  width: min(100%, 520px);
  min-height: 500px;
  border: 1px solid rgba(215, 181, 109, .72);
  border-radius: 44px;
  background:
    radial-gradient(circle at 26% 24%, rgba(177, 56, 45, .10), transparent 25%),
    radial-gradient(circle at 80% 18%, rgba(215, 181, 109, .25), transparent 28%),
    linear-gradient(145deg, #fffaf2 0%, #f8f2e7 60%, #efe4d2 100%);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.hero-gift-card {
  position: absolute;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(215,181,109,.68);
  border-radius: 28px;
  box-shadow: 0 18px 42px rgba(49, 37, 31, .12);
  padding: 22px;
}
.hero-gift-bazi {
  left: 34px;
  top: 62px;
  width: 250px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-gift-bazi::before {
  content: "命";
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #f3dfd8;
  color: var(--color-red);
  font-size: 32px;
  font-weight: 800;
}
.hero-gift-skincare {
  right: 26px;
  bottom: 38px;
  width: 270px;
  text-align: center;
}
.hero-gift-skincare img {
  width: 100%;
  max-height: 250px;
  object-fit: contain;
  display: block;
  margin: 0 auto 12px;
  border-radius: 18px;
}
.hero-gift-card span {
  display: block;
  color: var(--color-red);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: 8px;
}
.hero-gift-card strong {
  display: block;
  font-size: 30px;
  line-height: 1.25;
  color: var(--color-ink);
}
.hero-gift-card small {
  display: inline-flex;
  margin-top: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--color-ink);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}
.hero-badges { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

/* 四大需求卡片：移除英文與 icon，降低手機高度 */
.situation-grid-v7 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.situation-card-v7 {
  padding: 34px 30px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.situation-card-v7 h3 {
  font-size: 31px;
  line-height: 1.25;
  margin-bottom: 18px;
}
.situation-card-v7 p { font-size: 21px; line-height: 1.8; }

/* 張盛舒老師介紹：改為單一舞台式卡片，避免 PC 左右切開與手機卡邊 */
.teacher-section-v7 { background: #f8f2e7; }
.teacher-card-v7 {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  align-items: end;
  gap: 36px;
  min-height: 560px;
  padding: 54px 54px 0;
  border: 1px solid rgba(215, 181, 109, .72);
  border-radius: 42px;
  background:
    radial-gradient(circle at 88% 20%, rgba(177, 56, 45, .12), transparent 22%),
    radial-gradient(circle at 72% 85%, rgba(215, 181, 109, .22), transparent 28%),
    linear-gradient(145deg, #fffaf2 0%, #f8f2e7 100%);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.teacher-copy-v7 { max-width: 620px; padding-bottom: 54px; }
.teacher-copy-v7 h2 { font-size: clamp(38px, 4.2vw, 58px); line-height: 1.22; }
.teacher-copy-v7 .lead,
.teacher-copy-v7 p:not(.eyebrow) { font-size: 22px; line-height: 1.95; color: var(--color-text); }
.teacher-photo-v7 {
  position: relative;
  min-height: 540px;
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.teacher-photo-v7::before {
  content: "";
  position: absolute;
  right: 4%;
  bottom: 0;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50% 50% 0 0;
  background: rgba(232, 206, 190, .68);
  z-index: 0;
}
.teacher-img-v7 {
  position: absolute;
  right: 6%;
  bottom: 0;
  width: min(78%, 360px);
  height: auto;
  z-index: 1;
  filter: drop-shadow(0 20px 28px rgba(49,37,31,.18));
}
.teacher-name-card-v7 {
  left: auto;
  right: 48%;
  bottom: 38px;
  z-index: 2;
}

/* 好禮區：贈品圖片與品牌 LOGO */
.gift-grid-v7 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.gift-card-v7 { padding: 34px; }
.gift-visual-bazi-v7,
.gift-visual-skincare-v7 {
  height: 280px;
  border-radius: 30px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #fffaf2, #f1dfc4);
  overflow: hidden;
}
.bazi-product-card {
  width: min(88%, 320px);
  padding: 30px 24px;
  border-radius: 28px;
  border: 1px solid rgba(215,181,109,.78);
  background: rgba(255,255,255,.84);
  text-align: center;
  box-shadow: 0 16px 36px rgba(49,37,31,.12);
}
.bazi-product-card small {
  display: block;
  color: var(--color-red);
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 16px;
  margin-bottom: 12px;
}
.bazi-product-card strong { display: block; font-size: 34px; line-height: 1.25; }
.bazi-product-card span { display: inline-flex; margin-top: 16px; padding: 8px 16px; border-radius: 999px; background: var(--color-ink); color: #fff; font-size: 18px; font-weight: 700; }
.bazi-product-card.large { width: min(92%, 420px); padding: 42px 28px; }
.bazi-product-card.large strong { font-size: 42px; }
.gift-visual-skincare-v7 { position: relative; grid-template-rows: 1fr auto; padding: 16px; }
.gift-product-img {
  width: 100%;
  height: 205px;
  object-fit: contain;
  display: block;
}
.brand-logo-box {
  width: 72%;
  max-width: 260px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
}
.brand-logo-box img { display: block; width: 100%; height: auto; }
.gift-card-v7 p { font-size: 20px; line-height: 1.85; }
.gift-card-v7 h3 { font-size: 34px; }

/* 八字詳情：移除使用期限說明後，加強視覺 */
.detail-layout-v7 { align-items: center; }
.bazi-panel-v7 {
  min-height: 420px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(215,181,109,.72);
  border-radius: 42px;
  background: linear-gradient(145deg, #fffaf2, #f0dfbd);
  box-shadow: var(--shadow-soft);
}

/* 保濕旅行組：產品圖與品牌 logo 區塊 */
.skincare-layout-v7 {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}
.product-panel-v7 {
  position: relative;
  padding: 34px;
  border: 1px solid rgba(215,181,109,.75);
  border-radius: 42px;
  background: linear-gradient(145deg, #fffaf2, #edf2ec);
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.skincare-product-large {
  display: block;
  width: min(100%, 430px);
  max-height: 420px;
  object-fit: contain;
  margin: 20px auto 18px;
  border-radius: 24px;
}
.product-brand-logo {
  width: min(82%, 360px);
  margin: 0 auto 22px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(215,181,109,.45);
}
.product-brand-logo span {
  display: block;
  color: var(--color-muted);
  font-size: 14px;
  margin-bottom: 4px;
}
.product-brand-logo img { display: block; width: 100%; height: auto; }
.product-panel-v7 p { font-size: 18px; line-height: 1.8; }
.detail-price { font-size: 22px; }
.product-list li { font-size: 21px; }

@media (max-width: 900px) {
  .nav-tabs { width: 100%; gap: 8px; font-size: 15px; }
  .nav-tabs a { height: 45px; padding: 8px 6px; }
  .hero-visual-v7 { display: none; }
  .hero-visual-mobile { display: block !important; margin: 20px auto; }
  .hero-gift-showcase {
    width: 100%;
    min-height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
    border-radius: 28px;
  }
  .hero-gift-card {
    position: static;
    width: auto;
    min-height: 0;
    padding: 16px 12px;
    border-radius: 20px;
  }
  .hero-gift-bazi::before { width: 46px; height: 46px; margin-bottom: 10px; font-size: 22px; }
  .hero-gift-card span { font-size: 13px; letter-spacing: .08em; }
  .hero-gift-card strong { font-size: 21px; }
  .hero-gift-card small { font-size: 14px; padding: 6px 10px; }
  .hero-gift-skincare img { max-height: 110px; margin-bottom: 8px; }
  .hero-badges { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .badge-card { padding: 15px 12px; }
  .badge-card strong { font-size: 18px; }
  .badge-card small { font-size: 14px; }
  .situation-grid-v7 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .situation-card-v7 { min-height: 0; padding: 22px 18px; border-radius: 24px; }
  .situation-card-v7 h3 { font-size: 25px; margin-bottom: 10px; }
  .situation-card-v7 p { font-size: 18px; line-height: 1.75; }
  .teacher-card-v7 {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
    padding: 32px 22px 0;
    border-radius: 32px;
  }
  .teacher-copy-v7 { max-width: none; padding-bottom: 16px; }
  .teacher-copy-v7 h2 { font-size: 36px; }
  .teacher-copy-v7 .lead, .teacher-copy-v7 p:not(.eyebrow) { font-size: 19px; line-height: 1.9; }
  .teacher-photo-v7 {
    min-height: 430px;
    overflow: hidden;
    width: 100%;
  }
  .teacher-photo-v7::before { right: 8%; width: 72%; }
  .teacher-img-v7 { right: 12%; width: min(70%, 270px); }
  .teacher-name-card-v7 { left: 18px; right: auto; bottom: 24px; }
  .gift-grid-v7 { grid-template-columns: 1fr; gap: 18px; }
  .gift-card-v7 { padding: 24px; }
  .gift-visual-bazi-v7, .gift-visual-skincare-v7 { height: auto; }
  .gift-product-img { height: 165px; }
  .brand-logo-box { width: 84%; }
  .bazi-product-card strong { font-size: 28px; }
  .detail-layout-v7,
  .skincare-layout-v7 {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .bazi-panel-v7 { min-height: 260px; border-radius: 30px; }
  .product-panel-v7 { padding: 24px; border-radius: 30px; }
  .skincare-product-large { max-height: 300px; }
  .product-brand-logo { width: 90%; }
}

@media (max-width: 430px) {
  .nav-tabs { height: 30px; gap: 5px; font-size: 13px; letter-spacing: .02em; }
  .nav-tabs a {height: 30px; padding: 0px 3px; box-sizing: border-box;}
  .situation-grid-v7 { grid-template-columns: 1fr 1fr !important; }
  .situation-card-v7 { padding: 20px 14px; }
  .situation-card-v7 h3 { font-size: 23px; }
  .situation-card-v7 p { font-size: 17px; }
  .hero-gift-showcase { gap: 8px; padding: 10px; }
  .hero-gift-card { padding: 14px 8px; }
  .hero-gift-card strong { font-size: 19px; }
  .hero-gift-card small { font-size: 13px; }
  .hero-gift-skincare img { max-height: 92px; }

  .nav-only-inner {
    justify-content: center !important;
    height: 45px;
  }
}


/* ==============================
   v8 調整區：Hero 主視覺預留、老師照片修正、段落小標中文化
   ============================== */
.hero-visual-v8 {
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hero-product-frame {
  position: relative;
  width:100%;
  height: auto;
  border: 1px solid rgba(215, 181, 109, .72);
  border-radius: 44px;
  background:
    radial-gradient(circle at 22% 18%, rgba(177, 56, 45, .10), transparent 24%),
    radial-gradient(circle at 80% 80%, rgba(215, 181, 109, .24), transparent 28%),
    linear-gradient(145deg, #fffaf2 0%, #f8f2e7 55%, #efe4d2 100%);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.hero-product-frame::before {
  content: "";
  position: absolute;
  border-radius: 34px;
  pointer-events: none;
}
.hero-product-placeholder-label {
  position: absolute;
  left: 26px;
  top: 24px;
  z-index: 2;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(49, 37, 31, .82);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
}
.hero-product-frame img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;

  border-radius: 28px;
  box-shadow: 0 18px 46px rgba(49, 37, 31, .14);
}
.hero-product-frame p {
  position: relative;
  z-index: 1;
  width: min(100%, 370px);
  margin: 0 auto;
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.7;
}

/* 張盛舒老師區：改為完整照片容器，避免裁切破版 */
.teacher-card-v7 {
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
  align-items: center;
  padding: 54px;
  min-height: 0;
  overflow: hidden;
}
.teacher-copy-v7 { padding-bottom: 0; }
.teacher-photo-v7 {
  min-height: 430px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 36px 28px 0;
  border-radius: 34px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.78), transparent 20%),
    radial-gradient(circle at 68% 76%, rgba(232, 206, 190, .78), transparent 38%),
    linear-gradient(145deg, rgba(255,250,242,.6), rgba(239,228,210,.55));
  overflow: hidden;
}
.teacher-photo-v7::before {
  right: auto;
  left: 12%;
  bottom: 0;
  width: 76%;
  background: rgba(232, 206, 190, .48);
}
.teacher-img-v7 {
  position: relative;
  right: auto;
  bottom: auto;
  width: min(100%, 440px);
  max-height: 390px;
  object-fit: contain;
  object-position: bottom center;
  z-index: 1;
}
.teacher-name-card-v7 {
  left: 28px;
  right: auto;
  bottom: 26px;
}

/* 小標中文化後，降低英文式字距 */
.eyebrow {
  letter-spacing: .16em;
}
.benefit-addon-strip .eyebrow,
.video-copy .eyebrow,
.detail-copy .eyebrow,
.section-heading .eyebrow,
.teacher-copy .eyebrow,
.final-cta-section .eyebrow,
.rules-panel .eyebrow {
  letter-spacing: .12em;
}

@media (max-width: 900px) {
  .hero-visual-v8 { display: none; }
  .teacher-card-v7 {
    display: block;
    padding: 30px 20px 0;
    border-radius: 32px;
  }
  .teacher-photo-v7 {
    min-height: 300px;
    margin-top: 24px;
    padding: 20px 16px 0;
    border-radius: 28px 28px 0 0;
  }
  .teacher-img-v7 {
    width: min(100%, 330px);
    max-height: 280px;
  }
  .teacher-name-card-v7 {
    left: 16px;
    bottom: 16px;
  }
  .teacher-copy-v7 h2 { font-size: 34px; }
}

@media (max-width: 430px) {
  .teacher-photo-v7 { min-height: 270px; }
  .teacher-img-v7 { max-height: 250px; }
  .hero-visual-mobile .hero-gift-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==============================
   v9 調整區：依回饋優化 Hero、老師區、卡片閱讀與贈品圖
   ============================== */
@media (min-width: 1024px) {
  .hero-copy h1 {
    font-size: clamp(54px, 5.1vw, 72px);
    line-height: 1.08;
    white-space: nowrap;
    letter-spacing: .06em;
  }
}

/* Hero 右側：只保留單張主視覺圖，供設計師替換 */
.hero-product-frame {
  height: auto;
  padding: 20px;
  justify-content: center;
}
.hero-product-frame::before {
  border-style: solid;
  opacity: .45;
}
.hero-product-placeholder-label,
.hero-product-frame p {
  display: none !important;
}
.hero-product-frame img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  box-shadow: none;
  background: rgba(255,255,255,.45);
}

/* Hero 按鈕上方贈品卡片：小標放大 */
.badge-card span {
  font-size: 18px;
  letter-spacing: .1em;
}
.badge-card strong { font-size: 24px; }
.badge-card small { font-size: 18px; }
@media (max-width: 900px) {
  .badge-card span { font-size: 16px; letter-spacing: .06em; }
  .badge-card strong { font-size: 20px; }
  .badge-card small { font-size: 16px; }
}
@media (max-width: 430px) {
  .badge-card span { font-size: 15px; }
  .badge-card strong { font-size: 18px; }
  .badge-card small { font-size: 15px; }
}

/* 四大需求卡：內容全部置頂，不再垂直置中 */
.situation-card-v7 {
  justify-content: flex-start !important;
  align-items: flex-start;
}
.situation-card-v7 h3 { margin-top: 0; }

/* 老師介紹：照片完整呈現，名稱標籤縮小移到右上，避免遮擋 */
.teacher-card-v7 {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr);
  align-items: center;
}
.teacher-photo-v7 {
  min-height: 460px;
  padding: 34px 24px 0;
  align-items: flex-end;
}
.teacher-photo-v7::before {
  left: 8%;
  width: 84%;
  height: 62%;
}
.teacher-img-v7 {
  width: min(100%, 520px);
  max-height: 400px;
  object-fit: contain;
  object-position: bottom center;
}
.teacher-name-card-v7 {
  left: auto !important;
  right: 22px !important;
  top: 22px !important;
  bottom: auto !important;
  padding: 10px 14px;
  border-radius: 16px;
}
.teacher-name-card-v7 span { font-size: 13px; }
.teacher-name-card-v7 strong { font-size: 22px; }
@media (max-width: 900px) {
  .teacher-photo-v7 {
    min-height: 340px;
    padding: 18px 12px 0;
  }
  .teacher-img-v7 {
    width: min(100%, 420px);
    max-height: 320px;
  }
  .teacher-name-card-v7 {
    right: 14px !important;
    top: 14px !important;
    padding: 8px 12px;
  }
  .teacher-name-card-v7 span { display: none; }
  .teacher-name-card-v7 strong { font-size: 20px; }
}
@media (max-width: 430px) {
  .teacher-photo-v7 { min-height: 290px; }
  .teacher-img-v7 { max-height: 275px; }
}

/* 白金加值服務卡：刪除小字後，標題與 icon 平行 */
.benefit-addon-strip article {
  align-items: start;
}
.benefit-addon-strip h3 {
  margin: 2px 0 10px;
  line-height: 1.28;
}
.benefit-addon-strip .eyebrow { display: none !important; }
@media (max-width: 720px) {
  .benefit-addon-strip article {
    grid-template-columns: 58px 1fr;
    align-items: start;
  }
  .benefit-addon-strip h3 { margin-top: 0; }
}

/* 保濕贈品詳情：只保留一張商品圖位置 */
.product-panel-v7 {
  display: grid;
  place-items: center;
  min-height: 520px;
}
.product-panel-v7 .limited-tag {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
}
.skincare-product-large {
  width: min(92%, 520px);
  max-height: 430px;
  margin: 0 auto;
}
.product-brand-logo,
.product-panel-v7 p {
  display: none !important;
}
@media (max-width: 900px) {
  .product-panel-v7 { min-height: 430px; }
  .skincare-product-large { max-height: 340px; }
}

/* === v10 調整區：依 2026-06-02 回饋 === */
/* 1. PC Hero 右側移除直排小字 */
.vertical-note {
  display: none !important;
}

/* 2. 手機 Hero 改為單張主視覺圖片預留區 */
.hero-mobile-image-slot {
  width: 100%;
  border: 1px solid rgba(215, 181, 109, .72);
  border-radius: 28px;
  
  background:
    radial-gradient(circle at 80% 18%, rgba(215, 181, 109, .22), transparent 28%),
    linear-gradient(145deg, #fffaf2 0%, #f8f2e7 100%);
  box-shadow: var(--shadow-soft);
}
.hero-mobile-image-slot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
  background: rgba(255, 255, 255, .45);
}
@media (max-width: 768px) {
  .hero-visual-mobile {
    margin:20px auto !important;
  }
  .hero-mobile-image-slot {
    padding: 20px;
  }
  .hero-mobile-image-slot img {
    height:auto;
  }
  .hero-visual{
    display: none;
  }
}

/* 3. 好禮 02 / 限量標籤提升層級，避免被裝飾或圖片蓋住 */
.gift-tag,
.limited-tag {
  position: relative;
  z-index: 8;
}
.gift-card .gift-tag {
  position: absolute;
  right: 28px;
  top: 28px;
}
.product-panel-v7 .limited-tag {
  position: absolute;
  z-index: 10;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(177, 56, 45, .18);
}
.product-panel-v7::before,
.product-panel-v7::after {
  z-index: 0;
}
.product-panel-v7 > * {
  position: relative;
  z-index: 1;
}
.product-panel-v7 .limited-tag {
  z-index: 12;
}

/* 4. 影片區只保留嵌入影片，不再顯示外開 YouTube 按鈕 */
.video-copy .button[href*="youtube.com"] {
  display: none !important;
}

/* === v11 調整區：手機版四大痛點卡改為單欄閱讀 === */
@media (max-width: 768px) {
  .situation-grid,
  .situation-grid-v7 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .situation-card,
  .situation-card-v7 {
    min-height: auto !important;
    padding: 24px 22px !important;
    display: block !important;
  }

  .situation-card h3,
  .situation-card-v7 h3 {
    font-size: 24px !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }

  .situation-card p,
  .situation-card-v7 p {
    font-size: 18px !important;
    line-height: 1.9 !important;
    margin-bottom: 0 !important;
  }
}

/* === v12 調整區：首圖網格、手機 Hero 高度、老師照片標籤位置 === */
/* 1. 移除 Hero 右下不明網格裝飾 */
.hero .deco-pattern-right {
  display: none !important;
}

/* 2. 手機版 Hero 主視覺：移除固定高度造成的空白 */
@media (max-width: 768px) {
  .hero-visual-mobile {
    height: auto !important;
    margin: 16px auto !important;
  }

  .hero-mobile-image-slot {
    padding: 20px !important;
  }

  .hero-mobile-image-slot img {
    height: auto !important;
    object-fit: contain;
  }
}

/* 3. 張盛舒老師照片 UI：照片放大，姓名標籤移至右下 */
.teacher-photo-v7 {
  min-height: 500px;
}

.teacher-img-v7 {
  width: min(106%, 560px);
  max-height: 450px;
}

.teacher-name-card-v7 {
  top: auto !important;
  right: 24px !important;
  bottom: 24px !important;
  left: auto !important;
  padding: 12px 16px;
}

@media (max-width: 900px) {
  .teacher-photo-v7 {
    min-height: 360px;
    padding: 12px 8px 0;
  }

  .teacher-img-v7 {
    width: min(108%, 390px);
    max-height: 340px;
  }

  .teacher-name-card-v7 {
    right: 16px !important;
    bottom: 16px !important;
    top: auto !important;
    left: auto !important;
  }
}

@media (max-width: 430px) {
  .teacher-photo-v7 {
    min-height: 330px;
  }

  .teacher-img-v7 {
    width: min(112%, 360px);
    max-height: 315px;
  }

  .teacher-name-card-v7 {
    right: 14px !important;
    bottom: 14px !important;
  }
}

/* v13 文案承接與立即行動區調整 */
.section-support {
  max-width: 820px;
  margin: 18px auto 0;
  color: #b1382d;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.65;
}

.benefit-readability-cta h3 {
  margin: 0 auto 12px;
  color: #fff;
  font-size: 32px;
  line-height: 1.35;
  letter-spacing: .04em;
}

@media (max-width: 720px) {
  .section-support {
    font-size: 20px;
    line-height: 1.65;
    text-align: left;
  }

  .benefit-readability-cta h3 {
    font-size: 25px;
    line-height: 1.45;
  }
}


/* === v14 調整區：痛點卡紋理、淡色編號、內文左對齊、手機價格換行 === */
/* 1. 四大痛點卡：淡色 01-04 編號與細緻紙紋，讓卡片更有層次且好閱讀 */
.situation-grid-v7 {
  counter-reset: situation-counter;
}

.situation-card-v7 {
  position: relative;
  counter-increment: situation-counter;
  overflow: hidden;
  padding-top: 82px !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .72) 0 56px, transparent 57px),
    linear-gradient(90deg, rgba(177, 56, 45, .035) 1px, transparent 1px),
    linear-gradient(rgba(177, 56, 45, .035) 1px, transparent 1px),
    rgba(255,255,255,.72) !important;
  background-size: auto, 20px 20px, 20px 20px, auto;
}

.situation-card-v7::before {
  content: "0" counter(situation-counter);
  position: absolute;
  top: 24px;
  left: 30px;
  z-index: 1;
  color: rgba(177, 56, 45, .22);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
}

.situation-card-v7::after {
  content: "";
  position: absolute;
  right: -38px;
  top: -38px;
  width: 118px;
  height: 118px;
  border: 1px solid rgba(215, 181, 109, .62);
  border-radius: 50%;
  opacity: .8;
  pointer-events: none;
}

.situation-card-v7 > * {
  position: relative;
  z-index: 2;
}

/* 2. 標題下方的說明文字改為左對齊；標題仍可維持原本置中版型 */
.section-heading.center p:not(.eyebrow),
.container.narrow.center > p.lead,
.container.narrow.center > p.section-support,
.detail-copy p,
.claim-layout .section-heading p,
.video-copy p,
.final-cta-section .lead {
  text-align: left !important;
}

.section-heading.center p:not(.eyebrow),
.container.narrow.center > p.lead,
.container.narrow.center > p.section-support {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/* 3. 贈品價格標籤：PC 維持單行，手機自動換行 */
.detail-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  text-align: left;
}

.detail-price span:first-child::after {
  content: "｜";
  margin: 0 .2em;
}

@media (max-width: 768px) {
  .situation-card-v7 {
    padding-top: 78px !important;
  }

  .situation-card-v7::before {
    top: 22px;
    left: 26px;
    font-size: 50px;
  }

  .detail-price {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    white-space: normal;
  }

  .detail-price span:first-child::after {
    content: "";
    margin: 0;
  }
}

/* === Premium Mix 調整區：明亮底色 × 黑金尊榮 × 命理元素 === */
:root {
  --premium-dark: #261913;
  --premium-dark-2: #3a2a20;
  --premium-gold: #d7b56d;
  --premium-gold-soft: rgba(215, 181, 109, .28);
}

/* Header 保持明亮，但加入金線與會員感 */
.site-header.nav-only {
  background: rgba(255, 250, 242, .94);
  border-bottom: 1px solid rgba(215, 181, 109, .58);
}
.nav-tabs a {
  color: var(--premium-dark);
  font-weight: 700;
}
.nav-tabs a:hover {
  color: var(--color-red-dark);
}

/* Hero：明亮底加白金徽章、金線與淡命盤紋 */
.hero {
  position: relative;
  background:
    radial-gradient(circle at 85% 18%, rgba(215,181,109,.18), transparent 28%),
    radial-gradient(circle at 18% 80%, rgba(177,56,45,.08), transparent 24%),
    linear-gradient(180deg, #fffaf2 0%, #f8f2e7 100%);
}
.hero::before {
  content: "";
  position: absolute;
  right: min(6vw, 80px);
  top: 116px;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(215,181,109,.38);
  border-radius: 50%;
  box-shadow: inset 0 0 0 24px rgba(215,181,109,.04), inset 0 0 0 52px rgba(177,56,45,.025);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(215,181,109,.78), transparent);
}
.premium-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px 16px;
  border: 1px solid rgba(215,181,109,.78);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--premium-dark), var(--premium-dark-2));
  color: #fff7df;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .16em;
  box-shadow: 0 10px 28px rgba(49,37,31,.16);
}
.premium-eyebrow::before {
  content: "✦";
  color: var(--premium-gold);
  font-size: 13px;
}
.hero-copy h1 {
  color: var(--premium-dark);
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.hero-title {
  color: #5a3628;
}
.hero-desc {
  max-width: 620px;
}
.hero-product-frame {
  border: 1px solid rgba(215,181,109,.82) !important;
  background:
    radial-gradient(circle at 80% 18%, rgba(215,181,109,.2), transparent 30%),
    linear-gradient(145deg, rgba(255,250,242,.86), rgba(248,242,231,.7)) !important;
  box-shadow: 0 24px 60px rgba(49,37,31,.13), inset 0 0 0 1px rgba(255,255,255,.38);
}
.hero-product-frame::after {
  content: "白金命理 × 年中好禮";
  position: absolute;
  left: 24px;
  bottom: 22px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(38,25,19,.88);
  color: #fff7df;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  z-index: 2;
}
.badge-card {
  border-color: rgba(215,181,109,.82);
  background: rgba(255,255,255,.8);
  box-shadow: 0 16px 36px rgba(49,37,31,.10);
}
.badge-card span {
  color: var(--color-red-dark);
}
.badge-card strong {
  color: var(--premium-dark);
}

/* CTA：深咖啡＋金邊，次 CTA 明亮金框 */
.button-primary,
.button-dark {
  background: linear-gradient(135deg, #241711, #3b2a20) !important;
  color: #fff !important;
  border: 1px solid rgba(215,181,109,.9) !important;
  box-shadow: 0 12px 28px rgba(47,33,27,.26) !important;
}
.button-outline {
  background: rgba(255,250,242,.88) !important;
  color: var(--premium-dark) !important;
  border: 1px solid rgba(215,181,109,.86) !important;
}
.button-light,
.value-cta-button {
  background: #fffaf2 !important;
  color: var(--premium-dark) !important;
  border: 1px solid rgba(215,181,109,.9) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

/* 四大痛點：成熟感、命理淡紋、現實痛點 */
.situation-card-v7 {
  border-color: rgba(215,181,109,.75) !important;
  background:
    radial-gradient(circle at 92% 12%, rgba(215,181,109,.20) 0 58px, transparent 59px),
    radial-gradient(circle at 86% 20%, transparent 0 44px, rgba(215,181,109,.18) 45px, transparent 46px),
    linear-gradient(90deg, rgba(49,37,31,.025) 1px, transparent 1px),
    linear-gradient(rgba(49,37,31,.025) 1px, transparent 1px),
    rgba(255,255,255,.74) !important;
  background-size: auto, auto, 20px 20px, 20px 20px, auto;
  box-shadow: 0 16px 34px rgba(49,37,31,.08);
}
.situation-card-v7::before {
  color: rgba(49,37,31,.16) !important;
}
.situation-card-v7 h3 {
  color: var(--premium-dark);
}
.situation-card-v7 p {
  color: #58463d;
}

/* 張盛舒老師：深咖啡專家背書卡 */
.teacher-section-premium {
  background: linear-gradient(180deg, #f8f2e7 0%, #fffaf2 100%);
}
.teacher-section-premium .teacher-card-v7 {
  border: 1px solid rgba(215,181,109,.72) !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(215,181,109,.18), transparent 30%),
    radial-gradient(circle at 20% 85%, rgba(177,56,45,.11), transparent 34%),
    linear-gradient(145deg, #241711 0%, #35251d 55%, #20140f 100%) !important;
  box-shadow: 0 28px 70px rgba(49,37,31,.24);
}
.teacher-section-premium .teacher-card-v7::before {
  content: "";
  position: absolute;
  right: -64px;
  top: -64px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(215,181,109,.28);
  border-radius: 50%;
  box-shadow: inset 0 0 0 36px rgba(215,181,109,.04), inset 0 0 0 72px rgba(255,255,255,.025);
}
.teacher-section-premium .teacher-copy-v7 .eyebrow {
  color: var(--premium-gold);
}
.teacher-section-premium .teacher-copy-v7 h2 {
  color: #fff7df;
}
.teacher-section-premium .teacher-copy-v7 .lead,
.teacher-section-premium .teacher-copy-v7 p:not(.eyebrow) {
  color: rgba(255,250,242,.86) !important;
}
.teacher-section-premium .teacher-photo-v7 {
  border: 1px solid rgba(215,181,109,.38);
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(145deg, rgba(255,250,242,.08), rgba(215,181,109,.08)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.teacher-section-premium .teacher-name-card-v7 {
  background: rgba(32,20,15,.82) !important;
  border: 1px solid rgba(215,181,109,.72) !important;
  color: #fff7df;
  backdrop-filter: blur(10px);
}
.teacher-section-premium .teacher-name-card-v7 span {
  color: var(--premium-gold);
}
.teacher-section-premium .teacher-name-card-v7 strong {
  color: #fff;
}

/* 白金權益與價值錨點 */
.benefits-section {
  background:
    radial-gradient(circle at 5% 5%, rgba(215,181,109,.12), transparent 22%),
    linear-gradient(180deg, #fffaf2 0%, #f8f2e7 100%) !important;
}
.benefit-readable-card {
  border-color: rgba(215,181,109,.75) !important;
  background: rgba(255,255,255,.76) !important;
  box-shadow: 0 15px 34px rgba(49,37,31,.08);
}
.benefit-icon,
.addon-icon {
  background: linear-gradient(135deg, var(--premium-dark), var(--premium-dark-2)) !important;
  color: #fff7df !important;
  border: 1px solid rgba(215,181,109,.72);
}
.benefit-readability-cta,
.value-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(215,181,109,.18), transparent 28%),
    linear-gradient(135deg, #241711, #3a2a20 58%, #1c120e) !important;
  border: 1px solid rgba(215,181,109,.78);
  box-shadow: 0 28px 64px rgba(49,37,31,.22);
}
.value-cta::before {
  content: "";
  position: absolute;
  left: -55px;
  bottom: -55px;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(215,181,109,.28);
  border-radius: 50%;
}
.value-cta-kicker {
  color: var(--premium-gold) !important;
  font-size: 15px !important;
  font-weight: 800;
  letter-spacing: .18em;
}
.value-cta h3 strong {
  color: var(--premium-gold);
  font-size: 1.12em;
}
.value-cta p,
.benefit-readability-cta p {
  color: rgba(255,250,242,.86) !important;
}

/* 贈品區仍維持明亮清爽，但加入細金線 */
.gift-card-v7,
.product-panel-v7,
.bazi-panel-v7 {
  border-color: rgba(215,181,109,.76) !important;
}
.gift-tag,
.limited-tag {
  background: linear-gradient(135deg, #b1382d, #8e2d26) !important;
  border: 1px solid rgba(215,181,109,.5);
}

@media (max-width: 900px) {
  .premium-eyebrow {
    font-size: 13px;
    letter-spacing: .1em;
  }
  .hero::before {
    width: 140px;
    height: 140px;
    top: 92px;
    right: -30px;
  }
  .hero-product-frame::after {
    display: none;
  }
  .teacher-section-premium .teacher-card-v7 {
    padding-top: 32px !important;
  }
}

@media (max-width: 430px) {
  .premium-eyebrow {
    padding: 7px 12px;
    font-size: 12px;
  }
  .hero-copy h1 {
    letter-spacing: .04em;
  }
}



/* === Warm Premium v4：暖彩和風 × 白金尊榮感強化（不更動原文案） === */
:root {
  --warm-paper: #fff1df;
  --warm-paper-2: #ffe5ca;
  --warm-peach: #ffb58f;
  --warm-orange: #e95c22;
  --warm-orange-dark: #c84217;
  --warm-vermilion: #b83222;
  --warm-gold: #d9ac55;
  --warm-sage: #91aa87;
  --warm-purple: #b99bd4;
  --warm-ink: #2b1b14;
}

body {
  background:
    radial-gradient(circle at 8% 8%, rgba(233, 92, 34, .08), transparent 24%),
    radial-gradient(circle at 92% 18%, rgba(185, 155, 212, .10), transparent 22%),
    linear-gradient(180deg, #fff7ec 0%, var(--warm-paper) 45%, #fffaf2 100%) !important;
}

.site-header.nav-only {
  background: rgba(255, 244, 230, .95) !important;
  border-bottom-color: rgba(217, 172, 85, .68) !important;
}

.nav-tabs a:hover {
  color: var(--warm-orange-dark) !important;
}

/* Hero：明亮但加深暖彩與和風紋理 */
.hero {
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 181, 143, .42), transparent 26%),
    radial-gradient(circle at 92% 78%, rgba(145, 170, 135, .18), transparent 24%),
    radial-gradient(circle at 12% 78%, rgba(185, 155, 212, .13), transparent 20%),
    linear-gradient(135deg, #fff4e7 0%, #ffe7cc 48%, #fff7ec 100%) !important;
}

.hero::before {
  border-color: rgba(233, 92, 34, .36) !important;
  box-shadow:
    inset 0 0 0 24px rgba(217, 172, 85, .06),
    inset 0 0 0 52px rgba(255, 181, 143, .08) !important;
}

.hero::after {
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(233,92,34,.35), rgba(217,172,85,.75), rgba(145,170,135,.28), transparent) !important;
}

.hero .deco-pattern-right {
  opacity: .85 !important;
  background-image:
    linear-gradient(90deg, rgba(233,92,34,.18) 1px, transparent 1px),
    linear-gradient(rgba(233,92,34,.18) 1px, transparent 1px) !important;
}

.premium-eyebrow {
  background: linear-gradient(135deg, #382016 0%, #7d341c 56%, var(--warm-orange-dark) 100%) !important;
  border-color: rgba(245, 207, 128, .9) !important;
  box-shadow: 0 12px 30px rgba(200, 66, 23, .22) !important;
}

.eyebrow,
.badge-card span,
.gift-note {
  color: var(--warm-vermilion) !important;
}

.hero-copy h1 {
  color: var(--warm-ink) !important;
}

.hero-title {
  color: #4a2a1e !important;
}

.hero-desc {
  color: #5e3e31 !important;
}

/* Hero 主視覺：空白圖片位置 + 兩項好禮雙卡，避免像主賣單一贈品 */
.hero-product-frame-empty,
.hero-mobile-image-slot.hero-empty-visual {
  position: relative;
  overflow: hidden;
  
  background:
    radial-gradient(circle at 78% 22%, rgba(233,92,34,.15), transparent 26%),
    radial-gradient(circle at 16% 82%, rgba(145,170,135,.14), transparent 24%),
    linear-gradient(135deg, rgba(255,250,242,.94), rgba(255,229,202,.66)) !important;
  box-shadow: 0 24px 60px rgba(92, 46, 24, .14), inset 0 0 0 1px rgba(255,255,255,.48) !important;
}

.hero-product-frame-empty::before,
.hero-mobile-image-slot.hero-empty-visual::before {
  content: "";
  position: absolute;
  
  border-radius: 30px;
  
  background:
    linear-gradient(90deg, rgba(233,92,34,.08) 1px, transparent 1px),
    linear-gradient(rgba(217,172,85,.10) 1px, transparent 1px),
    rgba(255,255,255,.33);
  background-size: 28px 28px;
  pointer-events: none;
}

.hero-empty-visual-core {
  position: relative;
  z-index: 2;
  width: min(82%, 440px);
  min-height: 320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}

.hero-placeholder-mark {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding: 18px 20px;
  width: min(100%, 360px);
  border-radius: 22px;
  border: 1px solid rgba(217, 172, 85, .52);
  background: rgba(255, 250, 242, .72);
  color: rgba(75, 42, 30, .72);
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
}

.hero-gift-pair {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 420px);
  margin: 0 auto;
}

.hero-gift-chip {
  position: relative;
  min-height: 92px;
  padding: 16px 14px;
  border-radius: 22px;
  border: 1px solid rgba(217, 172, 85, .72);
  background: rgba(255, 250, 242, .88);
  box-shadow: 0 14px 28px rgba(92, 46, 24, .10);
  text-align: center;
}

.hero-gift-chip span {
  display: block;
  margin-bottom: 6px;
  color: var(--warm-vermilion);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

.hero-gift-chip strong {
  display: block;
  color: var(--warm-ink);
  font-size: 19px;
  line-height: 1.35;
}

.hero-gift-pair::before {
  content: "＋";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--warm-orange), var(--warm-vermilion));
  color: #fffaf2;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(184, 50, 34, .24);
}

.hero-mobile-image-slot.hero-empty-visual {
  height:auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
}

.hero-mobile-image-slot .hero-placeholder-mark {
  width: min(100%, 300px);
  padding: 14px 16px;
  font-size: 14px;
}

.hero-mobile-image-slot .hero-gift-pair {
  width: min(100%, 320px);
}

.hero-mobile-image-slot .hero-gift-chip {
  min-height: 82px;
  padding: 13px 10px;
}

.hero-mobile-image-slot .hero-gift-chip strong {
  font-size: 16px;
}

/* Hero 左側好禮卡：用暖色與加號關係，明確是兩項都可享 */
.hero-badges {
  position: relative;
}

.hero-badges .badge-card {
  border-color: rgba(217, 172, 85, .9) !important;
  background:
    radial-gradient(circle at 90% 20%, rgba(255,181,143,.20), transparent 32%),
    rgba(255, 250, 242, .88) !important;
  box-shadow: 0 18px 36px rgba(92, 46, 24, .12) !important;
}

.hero-badges .badge-card + .badge-card::before {
  content: "＋";
  position: absolute;
  left: -3%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--warm-orange), var(--warm-vermilion));
  color: #fffaf2;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(184, 50, 34, .22);
}

.hero-badges .badge-card {
  position: relative;
}

/* CTA：保留白金穩重感，加入暖金橘光感 */
.button-primary,
.button-dark {
  background: linear-gradient(135deg, #2b1b14 0%, #4a2619 58%, #6f2f18 100%) !important;
  color: #fffaf2 !important;
  border: 1px solid rgba(245, 207, 128, .92) !important;
  box-shadow: 0 14px 30px rgba(200, 66, 23, .22), 0 4px 0 rgba(217, 172, 85, .18) !important;
}

.button-primary:hover,
.button-dark:hover {
  box-shadow: 0 18px 38px rgba(200, 66, 23, .30), 0 4px 0 rgba(217, 172, 85, .2) !important;
}

.button-outline {
  background: rgba(255, 250, 242, .90) !important;
  border-color: rgba(217, 172, 85, .9) !important;
  color: var(--warm-ink) !important;
}

/* 卡片與重點區：暖彩加深但維持好閱讀 */
.situation-card-v7,
.benefit-readable-card,
.gift-card-v7,
.product-panel-v7,
.bazi-panel-v7,
.claim-card,
.register-form,
.register-notice {
  border-color: rgba(217, 172, 85, .82) !important;
}

.situation-card-v7 {
  background:
    radial-gradient(circle at 92% 12%, rgba(233,92,34,.12) 0 58px, transparent 59px),
    radial-gradient(circle at 86% 20%, transparent 0 44px, rgba(217,172,85,.22) 45px, transparent 46px),
    linear-gradient(90deg, rgba(233,92,34,.035) 1px, transparent 1px),
    linear-gradient(rgba(217,172,85,.055) 1px, transparent 1px),
    rgba(255,250,242,.78) !important;
}

.situation-card-v7::before {
  color: rgba(200,66,23,.18) !important;
}

.benefits-section,
.bg-light {
  background:
    radial-gradient(circle at 12% 10%, rgba(255,181,143,.16), transparent 22%),
    radial-gradient(circle at 88% 80%, rgba(145,170,135,.10), transparent 20%),
    linear-gradient(180deg, #fff7ec 0%, #fff0dc 100%) !important;
}

.value-cta {
  background:
    radial-gradient(circle at 88% 18%, rgba(217,172,85,.23), transparent 28%),
    radial-gradient(circle at 8% 88%, rgba(233,92,34,.16), transparent 30%),
    linear-gradient(135deg, #261913, #4b2819 58%, #2a1710) !important;
  border-color: rgba(245,207,128,.9) !important;
}

.value-cta::before {
  border-color: rgba(245,207,128,.30) !important;
}

.value-cta h3 strong {
  color: #f2c976 !important;
}

.gift-tag,
.limited-tag {
  background: linear-gradient(135deg, var(--warm-orange), var(--warm-vermilion)) !important;
  border-color: rgba(245,207,128,.62) !important;
}

/* 贈品區可更暖彩，但商品資訊仍清楚 */
.gift-section,
.detail-section,
.skincare-section {
  background:
    radial-gradient(circle at 3% 8%, rgba(233,92,34,.09), transparent 20%),
    radial-gradient(circle at 96% 20%, rgba(185,155,212,.10), transparent 18%),
    linear-gradient(180deg, #fffaf2 0%, #fff0dc 100%);
}

.product-list li::marker {
  color: var(--warm-vermilion);
}

@media (max-width: 900px) {
  .hero-visual{
    display: none;
  }
  .hero-mobile-image-slot{
    padding: 20px;
  }
  .hero-product-frame-empty::before,
  .hero-mobile-image-slot.hero-empty-visual::before {
    
    border-radius: 22px;
    background-size: 22px 22px;
  }

  .hero-empty-visual-core {
    min-height: 260px;
    width: min(88%, 380px);
  }

  .hero-gift-pair::before {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }

  .hero-badges .badge-card + .badge-card::before {
    left: -3%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 28px;
    height: 28px;
    font-size: 15px;
  }
}

@media (max-width: 430px) {
  .hero-mobile-image-slot.hero-empty-visual {
   
    height: auto;
  }

  .hero-gift-pair {
    gap: 8px;
  }

  .hero-gift-chip span {
    font-size: 11px;
    letter-spacing: .08em;
  }

  .hero-gift-chip strong {
    font-size: 15px !important;
  }

  .hero-badges .badge-card + .badge-card::before {
    display: none;
  }
}

/* === Warm Premium v6：更繽紛的暖彩和風、維持白金尊榮感 === */
:root {
  --festival-orange: #ee4f16;
  --festival-orange-deep: #cf3f10;
  --festival-red: #b73524;
  --festival-coral: #f5a074;
  --festival-gold: #e2b65f;
  --festival-mustard: #d5a22d;
  --festival-sage: #8fac8a;
  --festival-purple: #b99bd4;
  --festival-paper: #fff3e2;
}

body {
  background:
    radial-gradient(circle at 10% 8%, rgba(238, 79, 22, .16), transparent 22%),
    radial-gradient(circle at 90% 12%, rgba(213, 162, 45, .18), transparent 20%),
    radial-gradient(circle at 84% 78%, rgba(143, 172, 138, .14), transparent 24%),
    linear-gradient(180deg, #fff8ec 0%, #ffe8cf 42%, #fff4e3 100%) !important;
}

/* 和風暖彩底紋：以點綴為主，不影響閱讀 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(circle at 7% 24%, rgba(238, 79, 22, .18) 0 54px, transparent 55px),
    radial-gradient(circle at 95% 32%, rgba(213, 162, 45, .18) 0 72px, transparent 73px),
    radial-gradient(circle at 88% 88%, rgba(185, 155, 212, .14) 0 62px, transparent 63px),
    repeating-linear-gradient(135deg, rgba(255,255,255,.24) 0 2px, transparent 2px 11px);
}

.hero {
  background:
    radial-gradient(circle at 78% 22%, rgba(238,79,22,.30), transparent 27%),
    radial-gradient(circle at 18% 82%, rgba(213,162,45,.22), transparent 26%),
    radial-gradient(circle at 92% 74%, rgba(143,172,138,.15), transparent 24%),
    linear-gradient(135deg, #fff1de 0%, #ffd7b0 47%, #fff7e9 100%) !important;
}

.hero::after {
  height: 3px !important;
  background: linear-gradient(90deg, transparent, rgba(238,79,22,.48), rgba(226,182,95,.92), rgba(143,172,138,.34), transparent) !important;
}

.hero-product-frame-empty,
.hero-mobile-image-slot.hero-empty-visual {
  background:
    radial-gradient(circle at 77% 18%, rgba(238,79,22,.22), transparent 24%),
    radial-gradient(circle at 22% 84%, rgba(213,162,45,.20), transparent 25%),
    radial-gradient(circle at 92% 82%, rgba(143,172,138,.13), transparent 24%),
    linear-gradient(135deg, rgba(255,250,242,.96), rgba(255,217,178,.74)) !important;
  border-color: rgba(226,182,95,.95) !important;
}

.hero-product-frame-empty::before,
.hero-mobile-image-slot.hero-empty-visual::before {
  background:
    radial-gradient(circle at 100% 0, rgba(238,79,22,.18) 0 58px, transparent 59px),
    radial-gradient(circle at 0 100%, rgba(213,162,45,.14) 0 78px, transparent 79px),
    linear-gradient(90deg, rgba(238,79,22,.10) 1px, transparent 1px),
    linear-gradient(rgba(226,182,95,.12) 1px, transparent 1px),
    rgba(255,255,255,.36) !important;
  background-size: auto, auto, 28px 28px, 28px 28px, auto !important;
}

.premium-eyebrow,
.hero-gift-pair::before,
.hero-badges .badge-card + .badge-card::before,
.gift-tag,
.limited-tag {
  background: linear-gradient(135deg, var(--festival-orange), var(--festival-red)) !important;
  border-color: rgba(255,221,147,.78) !important;
}

.button-primary,
.button-dark {
  background: linear-gradient(135deg, #2b1b14 0%, #5b2c19 52%, #9b3818 100%) !important;
  border-color: rgba(255,221,147,.92) !important;
  box-shadow: 0 16px 34px rgba(207,63,16,.25), 0 5px 0 rgba(226,182,95,.18) !important;
}

.button-primary:hover,
.button-dark:hover {
  box-shadow: 0 20px 42px rgba(207,63,16,.34), 0 5px 0 rgba(226,182,95,.22) !important;
}

.button-outline {
  border-color: rgba(226,182,95,.96) !important;
  background: rgba(255,250,242,.92) !important;
}

/* 四大痛點：彩度提高但維持紙感與閱讀性 */
.situation-card-v7 {
  border-color: rgba(226,182,95,.9) !important;
  background:
    radial-gradient(circle at 94% 9%, rgba(238,79,22,.16) 0 60px, transparent 61px),
    radial-gradient(circle at 86% 22%, transparent 0 44px, rgba(226,182,95,.26) 45px, transparent 46px),
    radial-gradient(circle at 10% 92%, rgba(143,172,138,.10), transparent 24%),
    linear-gradient(90deg, rgba(238,79,22,.045) 1px, transparent 1px),
    linear-gradient(rgba(226,182,95,.07) 1px, transparent 1px),
    rgba(255,250,242,.84) !important;
}

.situation-card-v7:nth-child(1)::before { color: rgba(185,155,212,.36) !important; }
.situation-card-v7:nth-child(2)::before { color: rgba(238,79,22,.30) !important; }
.situation-card-v7:nth-child(3)::before { color: rgba(213,162,45,.34) !important; }
.situation-card-v7:nth-child(4)::before { color: rgba(143,172,138,.34) !important; }

/* 張盛舒老師區：小標改回金色標籤，維持權威與深色背書 */
.teacher-section-premium .teacher-copy-v7 .eyebrow {
  display: inline-flex !important;
  align-items: center;
  width: auto;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe4a8, #d8a843) !important;
  color: #2b1b14 !important;
  border: 1px solid rgba(255,240,190,.8);
  box-shadow: 0 10px 24px rgba(226,182,95,.20);
  letter-spacing: .12em;
}

.teacher-section-premium .teacher-card-v7 {
  background:
    radial-gradient(circle at 82% 18%, rgba(226,182,95,.20), transparent 24%),
    radial-gradient(circle at 8% 86%, rgba(238,79,22,.12), transparent 26%),
    linear-gradient(135deg, #241711 0%, #4a2819 52%, #24130f 100%) !important;
}

.teacher-section-premium .teacher-card-v7::before {
  border-color: rgba(226,182,95,.22) !important;
  box-shadow: inset 0 0 0 42px rgba(226,182,95,.035) !important;
}

/* 白金價值錨點：移除內框，改為金色分隔線與舒適留白 */
.benefit-readability-cta {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.value-cta {
  padding: 58px 34px 48px !important;
  border: 1px solid rgba(226,182,95,.92) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 86% 15%, rgba(226,182,95,.22), transparent 26%),
    radial-gradient(circle at 10% 86%, rgba(238,79,22,.15), transparent 28%),
    linear-gradient(135deg, #261913 0%, #56301f 58%, #22120e 100%) !important;
  box-shadow: 0 28px 64px rgba(49,37,31,.24) !important;
}

.value-cta::before {
  display: none !important;
}

.value-cta p::after {
  content: "";
  display: block;
  width: 160px;
  height: 1px;
  margin: 28px auto 24px;
  background: linear-gradient(90deg, transparent, rgba(226,182,95,.95), transparent);
}

.value-cta-button {
  margin-top: 0 !important;
}

.value-cta h3 strong {
  color: #f4c86f !important;
}

.value-cta-kicker {
  color: #ffe5a5 !important;
}

/* 贈品區：可更繽紛，保養區保留清爽 */
.gift-section,
.detail-section,
.skincare-section {
  background:
    radial-gradient(circle at 6% 10%, rgba(238,79,22,.14), transparent 20%),
    radial-gradient(circle at 92% 18%, rgba(213,162,45,.18), transparent 18%),
    radial-gradient(circle at 86% 84%, rgba(143,172,138,.12), transparent 20%),
    linear-gradient(180deg, #fffaf2 0%, #ffe8d0 100%) !important;
}

.gift-card-v7,
.product-panel-v7,
.bazi-panel-v7 {
  border-color: rgba(226,182,95,.94) !important;
  box-shadow: 0 22px 48px rgba(92,46,24,.12) !important;
}

/* 活動辦法避免小標/標題重複 */
.rules-panel > .eyebrow {
  display: none !important;
}

@media (max-width: 768px) {
  .value-cta {
    padding: 42px 22px 38px !important;
    border-radius: 28px !important;
  }
  .value-cta p::after {
    width: 120px;
    margin: 22px auto 18px;
  }
  .teacher-section-premium .teacher-copy-v7 .eyebrow {
    padding: 7px 12px;
    font-size: 13px;
  }
}

/* ==============================
   Final refinements / cleanup
   ============================== */
.hero {
  background:
    radial-gradient(circle at 78% 22%, rgba(238,79,22,.16), transparent 28%),
    radial-gradient(circle at 18% 82%, rgba(213,162,45,.10), transparent 26%),
    radial-gradient(circle at 92% 74%, rgba(143,172,138,.06), transparent 24%),
    linear-gradient(135deg, #fff4e7 0%, #ffe6cf 46%, #fff8ef 100%) !important;
}

.hero .deco-pattern-right {
  opacity: .18 !important;
  background-image:
    linear-gradient(90deg, rgba(238,79,22,.06) 1px, transparent 1px),
    linear-gradient(rgba(226,182,95,.06) 1px, transparent 1px) !important;
}

.hero-product-frame-empty,
.hero-mobile-image-slot.hero-empty-visual {
  background: linear-gradient(145deg, rgba(255,250,242,.75), rgba(244,232,211,.78));
}

.hero-product-frame-empty::before,
.hero-mobile-image-slot.hero-empty-visual::before {
  background:
    radial-gradient(circle at 100% 0, rgba(238,79,22,.06) 0 54px, transparent 55px),
    radial-gradient(circle at 0 100%, rgba(213,162,45,.05) 0 72px, transparent 73px),
    linear-gradient(90deg, rgba(238,79,22,.04) 1px, transparent 1px),
    linear-gradient(rgba(226,182,95,.04) 1px, transparent 1px),
    rgba(255,255,255,.26) !important;
  background-size: auto, auto, 28px 28px, 28px 28px, auto !important;
}

.hero-mobile-image-slot .hero-gift-pair::before {
  content: none !important;
}

.hero-title-gradient {
  display: inline-block;
  background: linear-gradient(90deg, #c8672b 0%, #9f5a18 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

.intro-section {
  background: linear-gradient(180deg, #fff8f0 0%, #fff3e5 100%) !important;
}

.value-cta h3 .price-suffix {
  font-size: .58em;
  vertical-align: .08em;
  letter-spacing: .04em;
}

.value-cta > p:not(.value-cta-kicker) {
  text-align: left !important;
  max-width: 760px;
  margin-inline: auto;
}

.gift-grid-v7 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.gift-card-v7,
.product-panel-v7,
.bazi-panel-v7 {
  box-shadow: var(--shadow-soft);
}

.gift-card-v7 {
  padding: 34px;
}

.gift-visual-bazi-v7,
.gift-visual-skincare-v7,
.bazi-panel-v7,
.product-panel-v7 {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(215,181,109,.58);
  background: linear-gradient(145deg, #fffaf2, #f1dfc4);
}

.gift-visual-bazi-v7,
.gift-visual-skincare-v7 {
  height: auto;
}

.gift-visual-image {
  padding: 0;
  display: block;
}

.gift-product-img-fill,
.detail-panel-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.gift-visual .gift-product-img-fill {
  min-height: 100%;
}

.gift-note {
  font-size: 15px;
  letter-spacing: .14em;
  line-height: 1.35;
  margin-bottom: 12px;
}

.gift-card-v7 h3 {
  font-size: 34px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.gift-card-v7 p {
  font-size: 20px;
  line-height: 1.8;
}

.gift-value {
  display: inline-flex;
  margin: 6px 0 18px;
  padding: 8px 14px;
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  white-space: nowrap;
}

.bazi-panel-v7,
.product-panel-v7 {
  min-height: 430px;
  padding: 0;
}

.product-panel-v7 .limited-tag,
.gift-tag {
  z-index: 2;
}

.product-panel-v7 .limited-tag {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
}

.detail-layout-v7,
.skincare-layout-v7 {
  align-items: center;
}

.skincare-layout-v7 {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 56px;
}

.skincare-detail-image {
  height: 100%;
}

.detail-price {
  font-size: 22px;
}

.product-list li {
  font-size: 21px;
}

@media (max-width: 900px) {
  .hero-visual-v8 { display: none; }
  .hero-visual-mobile { display: block !important; margin: 20px auto; }

  .gift-grid-v7,
  .detail-layout-v7,
  .skincare-layout-v7 {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .gift-card-v7 {
    padding: 24px;
  }

  .gift-visual-bazi-v7,
  .gift-visual-skincare-v7 {
    height: auto;
  }

  .gift-note {
    font-size: 13px;
    letter-spacing: .08em;
    line-height: 1.35;
    margin-bottom: 8px;
  }

  .gift-card-v7 h3 {
    font-size: 24px;
    line-height: 1.14;
    margin-bottom: 8px;
  }

  .gift-card-v7 p {
    font-size: 18px;
    line-height: 1.75;
  }

  .gift-value {
    font-size: 14px;
    padding: 7px 12px;
  }

  .bazi-panel-v7,
  .product-panel-v7 {
    min-height: 260px;
    border-radius: 28px;
  }

  .detail-panel-image {
    min-height: 260px;
  }

  .product-panel-v7 .limited-tag {
    top: 18px;
  }

  .detail-price {
    padding: 10px 14px;
    border-radius: 28px;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    font-size: 15px !important;
    line-height: 1.35;
  }

  .detail-price span:first-child {
    font-size: 15px;
  }

  .detail-price span:last-child {
    font-size: 13px;
    white-space: nowrap;
    letter-spacing: 0;
  }
}

@media (max-width: 430px) {
  .hero-badges {
    overflow: visible;
    column-gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hero-badges .badge-card {
    overflow: visible;
  }

  .hero-badges .badge-card + .badge-card::before {
    display: grid !important;
    left: -5%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 36px;
    height: 36px;
    font-size: 20px;
    line-height: 1;
    z-index: 5;
  }

  .gift-card-v7 {
    padding: 22px 20px;
  }

  .gift-visual-bazi-v7,
  .gift-visual-skincare-v7 {
    height: auto;
  }

  .gift-note {
    font-size: 12px;
    margin-bottom: 6px;
  }

  .gift-card-v7 h3 {
    font-size: 18px;
    line-height: 1.12;
    margin-bottom: 6px;
  }

  .gift-value {
    font-size: 13px;
    padding: 6px 11px;
    margin-bottom: 14px;
  }

  .gift-card-v7 p {
    font-size: 17px;
    line-height: 1.72;
  }

  .detail-panel-image {
    min-height: 210px;
  }

  .value-cta > p:not(.value-cta-kicker) {
    max-width: 100%;
  }
}
@media (max-width: 430px) {
  .gift-card-v7 h3 {
    font-size: 26px !important;
    line-height: 1.18 !important;
    margin-bottom: 8px;
  }
}

/* =========================================================
   0604 Purple Platinum Theme
   僅調整色系、視覺風格與按鈕，不異動文案與網頁架構
   ========================================================= */
:root {
  --color-ink: #3A2A32;
  --color-text: #5D4B58;
  --color-muted: #857382;
  --color-red: #8A4C91;
  --color-red-dark: #5E3A6F;
  --color-gold: #C9A45D;
  --color-paper: #F7F1F5;
  --color-paper-light: #FFF9FB;
  --color-sage: #E9D8EE;
  --color-white: #ffffff;
  --shadow-soft: 0 20px 48px rgba(74, 46, 86, 0.13);
  --shadow-card: 0 14px 32px rgba(74, 46, 86, 0.10);
}

body {
  color: #3A2A32;
  background:
    radial-gradient(circle at 10% 10%, rgba(234, 215, 239, .52), transparent 26%),
    radial-gradient(circle at 88% 8%, rgba(201, 164, 93, .14), transparent 24%),
    radial-gradient(circle at 78% 78%, rgba(165, 108, 159, .16), transparent 28%),
    #F7F1F5;
}

.bg-light,
.section-paper,
.intro-section,
.gift-section,
.skincare-section,
.detail-section,
.claim-section,
.video-section,
.register-form-section,
.register-hero {
  background:
    radial-gradient(circle at 16% 18%, rgba(234, 215, 239, .36), transparent 22%),
    radial-gradient(circle at 84% 12%, rgba(201, 164, 93, .12), transparent 20%),
    linear-gradient(180deg, #FFF9FB 0%, #F7F1F5 100%) !important;
}

.site-header {
  background: rgba(247, 241, 245, .92) !important;
  border-bottom: 1px solid rgba(201, 164, 93, .40) !important;
}

.main-nav a:hover,
.eyebrow,
.badge-card span,
.gift-note,
.benefit-kicker,
.product-list li::before,
.brand-subtitle,
.form-error {
  color: #8A4C91 !important;
}

.hero {
  background:
    radial-gradient(circle at 78% 22%, rgba(165, 108, 159, .24), transparent 28%),
    radial-gradient(circle at 18% 84%, rgba(201, 164, 93, .13), transparent 26%),
    radial-gradient(circle at 92% 78%, rgba(241, 221, 231, .56), transparent 28%),
    linear-gradient(135deg, #FFF9FB 0%, #F2E5F4 48%, #FBF6F2 100%) !important;
}

.hero::before,
.hero::after {
  border-color: rgba(201, 164, 93, .36) !important;
}

.hero .deco-pattern-right,
.deco-pattern {
  opacity: .42 !important;
  background-image:
    linear-gradient(90deg, rgba(138, 76, 145, .13) 1px, transparent 1px),
    linear-gradient(rgba(201, 164, 93, .14) 1px, transparent 1px) !important;
}

.deco-circle {
  border-color: rgba(201, 164, 93, .56) !important;
}

.premium-eyebrow,
.gift-tag,
.limited-tag {
  background: linear-gradient(135deg, #6F3F7C 0%, #A56C9F 100%) !important;
  color: #FFF9FB !important;
  border: 1px solid rgba(201, 164, 93, .75) !important;
  box-shadow: 0 10px 24px rgba(111, 63, 124, .20) !important;
}

.premium-eyebrow::before {
  color: #D8C08A !important;
}

.hero-title-gradient {
  display: inline-block;
  background: linear-gradient(90deg, #C9A45D 0%, #A56C9F 48%, #6F3F7C 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

.hero-title,
h1,
h2,
h3,
.benefit-card-head h3,
.gift-card-v7 h3,
.detail-copy h2 {
  color: #3A2A32;
}

.lead,
.hero-desc,
.section-heading p,
.detail-copy p,
.claim-card p,
.gift-card p,
.rules-content,
.register-notice ul,
.result-summary p {
  color: #5D4B58 !important;
}

.badge-card,
.situation-card,
.value-card,
.gift-card,
.claim-card,
.register-form,
.register-notice,
.register-gift-card,
.benefit-readable-card,
.benefit-addon-strip article,
.product-panel-v7,
.bazi-panel-v7,
.gift-visual-bazi-v7,
.gift-visual-skincare-v7,
.result-summary {
  background:
    radial-gradient(circle at 92% 8%, rgba(234, 215, 239, .45), transparent 32%),
    rgba(255, 249, 251, .82) !important;
  border-color: rgba(201, 164, 93, .62) !important;
  box-shadow: 0 16px 36px rgba(74, 46, 86, .10) !important;
}

.hero-product-frame-empty,
.hero-mobile-image-slot.hero-empty-visual {
  background:
    radial-gradient(circle at 94% 6%, rgba(165, 108, 159, .18), transparent 22%),
    radial-gradient(circle at 8% 100%, rgba(201, 164, 93, .12), transparent 24%),
    linear-gradient(145deg, rgba(255,249,251,.88), rgba(234,216,238,.70)) !important;
  border-color: rgba(201, 164, 93, .62) !important;
}

.hero-product-frame-empty::before,
.hero-mobile-image-slot.hero-empty-visual::before {
  background:
    radial-gradient(circle at 100% 0, rgba(165,108,159,.10) 0 54px, transparent 55px),
    radial-gradient(circle at 0 100%, rgba(201,164,93,.08) 0 72px, transparent 73px),
    linear-gradient(90deg, rgba(138,76,145,.06) 1px, transparent 1px),
    linear-gradient(rgba(201,164,93,.06) 1px, transparent 1px),
    rgba(255,255,255,.24) !important;
}

.button-primary,
.button-dark,
.value-cta-button,
.final-cta-section .button-primary,
.register-form button.button-primary {
  background: linear-gradient(135deg, #2A1D2F 0%, #5E3A6F 58%, #8A4C91 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #C9A45D !important;
  box-shadow: 0 14px 30px rgba(111, 63, 124, .28) !important;
}

.button-primary:hover,
.button-dark:hover,
.value-cta-button:hover,
.final-cta-section .button-primary:hover,
.register-form button.button-primary:hover {
  box-shadow: 0 16px 36px rgba(111, 63, 124, .36), 0 0 0 3px rgba(201, 164, 93, .18) !important;
}

.button-outline,
.button-light,
.button-outline-light {
  background: rgba(255, 249, 251, .82) !important;
  color: #3A2A32 !important;
  border-color: rgba(201, 164, 93, .72) !important;
}

.button-outline:hover,
.button-light:hover,
.button-outline-light:hover {
  background: #FFF9FB !important;
  box-shadow: 0 12px 26px rgba(111, 63, 124, .18) !important;
}

.benefit-icon,
.addon-icon {
  background: linear-gradient(135deg, #6F3F7C 0%, #A56C9F 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 24px rgba(111, 63, 124, .22) !important;
}

.benefit-card-flow .benefit-icon {
  background: linear-gradient(135deg, #C9A45D 0%, #8A4C91 100%) !important;
}

.benefit-card-relationship .benefit-icon {
  background: linear-gradient(135deg, #A56C9F 0%, #5E3A6F 100%) !important;
}

.benefit-card-bonus .benefit-icon {
  background: linear-gradient(135deg, #D8C08A 0%, #6F3F7C 100%) !important;
}

.benefit-readability-cta,
.value-cta,
.site-footer,
.final-cta-section {
  background:
    radial-gradient(circle at 18% 18%, rgba(201, 164, 93, .18), transparent 28%),
    linear-gradient(135deg, #2A1D2F 0%, #3E294B 56%, #5E3A6F 100%) !important;
  color: #FFFFFF !important;
  border-color: rgba(201, 164, 93, .58) !important;
}

.value-cta h3,
.value-cta p,
.value-cta-kicker,
.benefit-readability-cta p,
.final-cta-section h2,
.final-cta-section .lead,
.site-footer h2,
.site-footer p {
  color: rgba(255, 249, 251, .92) !important;
}

.value-cta h3 strong,
.benefit-summary h3 strong,
.benefit-value-copy h3 strong,
.benefit-card-value strong {
  color: #D8C08A !important;
}

.value-cta::before,
.value-cta p::after {
  background: linear-gradient(90deg, transparent, rgba(216,192,138,.92), transparent) !important;
}

.teacher-section-premium {
  background:
    radial-gradient(circle at 76% 16%, rgba(201, 164, 93, .15), transparent 28%),
    linear-gradient(135deg, #F7F1F5 0%, #FFF9FB 100%) !important;
}

.teacher-section-premium .teacher-card-v7 {
  background:
    radial-gradient(circle at 82% 18%, rgba(201,164,93,.16), transparent 24%),
    linear-gradient(135deg, #2A1D2F 0%, #3E294B 52%, #5E3A6F 100%) !important;
  border-color: rgba(201, 164, 93, .62) !important;
  box-shadow: 0 24px 54px rgba(42, 29, 47, .20) !important;
}

.teacher-section-premium .teacher-copy-v7 h2,
.teacher-section-premium .teacher-copy-v7 .lead,
.teacher-section-premium .teacher-copy-v7 p:not(.eyebrow) {
  color: rgba(255,249,251,.92) !important;
}

.teacher-section-premium .teacher-copy-v7 .eyebrow,
.teacher-section-premium .teacher-name-card-v7 span,
.rules-panel .eyebrow {
  color: #D8C08A !important;
}

.teacher-section-premium .teacher-name-card-v7,
.video-placeholder {
  background: linear-gradient(135deg, rgba(42,29,47,.94), rgba(94,58,111,.92)) !important;
  border: 1px solid rgba(201,164,93,.62) !important;
}

.teacher-photo-v7,
.product-panel,
.product-box {
  background: linear-gradient(145deg, #FFF9FB, #EAD7EF 62%, #F7F1F5 ) !important;
  border-color: rgba(201,164,93,.62) !important;
}

.gift-section {
  background:
    radial-gradient(circle at 8% 18%, rgba(234,215,239,.64), transparent 26%),
    radial-gradient(circle at 92% 82%, rgba(201,164,93,.14), transparent 26%),
    linear-gradient(180deg, #FFF9FB 0%, #F7F1F5 100%) !important;
}

.detail-price,
.gift-value,
.pill-list li,
.mini-grid span,
.product-box span {
  background: rgba(255, 249, 251, .84) !important;
  border-color: rgba(201,164,93,.70) !important;
  color: #6F3F7C !important;
}

.register-form input,
.register-form select,
.status-form select {
  border-color: rgba(111, 63, 124, .20) !important;
  background: rgba(255,249,251,.96) !important;
  color: #3A2A32 !important;
}

.register-form input:focus,
.register-form select:focus,
.status-form select:focus {
  outline: 2px solid rgba(201, 164, 93, .46) !important;
  border-color: #C9A45D !important;
}

.agreement-box {
  background: rgba(255,249,251,.76) !important;
  border-color: rgba(201,164,93,.56) !important;
}

.checkbox-label {
  color: #5D4B58 !important;
}

.modal-backdrop {
  background: rgba(42, 29, 47, .70) !important;
}

/* =========================================================
   Final Bright Purple Theme for 30-55 Female TA
   只調整色系、視覺風格與按鈕，不異動文案與架構
   ========================================================= */
:root {
  --color-ink: #33223F;
  --color-text: #5E4A66;
  --color-muted: #8A7893;
  --color-red: #9B5CF0;
  --color-red-dark: #6F35C7;
  --color-gold: #D9B95F;
  --color-paper: #FBF7FF;
  --color-paper-light: #FFFFFF;
  --color-sage: #F0E4FF;
  --color-white: #ffffff;
  --shadow-soft: 0 20px 48px rgba(124, 70, 196, 0.14);
  --shadow-card: 0 14px 32px rgba(124, 70, 196, 0.11);
}

body {
  color: #33223F;
  background:
    radial-gradient(circle at 8% 8%, rgba(184, 130, 255, .26), transparent 26%),
    radial-gradient(circle at 90% 10%, rgba(217, 185, 95, .16), transparent 22%),
    radial-gradient(circle at 78% 78%, rgba(238, 218, 255, .52), transparent 28%),
    #FBF7FF !important;
}

.bg-light,
.section-paper,
.intro-section,
.gift-section,
.skincare-section,
.detail-section,
.claim-section,
.video-section,
.register-form-section,
.register-hero {
  background:
    radial-gradient(circle at 14% 16%, rgba(197, 153, 255, .20), transparent 24%),
    radial-gradient(circle at 86% 12%, rgba(217, 185, 95, .13), transparent 20%),
    linear-gradient(180deg, #FFFFFF 0%, #FBF7FF 100%) !important;
}

.site-header {
  background: rgba(251, 247, 255, .94) !important;
  border-bottom: 1px solid rgba(217, 185, 95, .42) !important;
}

.main-nav a {
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(217, 185, 95, .48) !important;
  color: #4C2D68 !important;
}

.main-nav a:hover,
.eyebrow,
.badge-card span,
.gift-note,
.benefit-kicker,
.product-list li::before,
.brand-subtitle,
.form-error {
  color: #8B46E8 !important;
}

.hero,
.register-hero {
  background:
    radial-gradient(circle at 78% 20%, rgba(155, 92, 240, .24), transparent 28%),
    radial-gradient(circle at 16% 84%, rgba(217, 185, 95, .15), transparent 26%),
    radial-gradient(circle at 92% 78%, rgba(238, 218, 255, .68), transparent 28%),
    linear-gradient(135deg, #FFFFFF 0%, #F3E7FF 48%, #FFF9F0 100%) !important;
}

.hero::before,
.hero::after,
.deco-circle {
  border-color: rgba(217, 185, 95, .50) !important;
}

.hero .deco-pattern-right,
.deco-pattern {
  opacity: .30 !important;
  background-image:
    linear-gradient(90deg, rgba(155, 92, 240, .10) 1px, transparent 1px),
    linear-gradient(rgba(217, 185, 95, .10) 1px, transparent 1px) !important;
}

.premium-eyebrow,
.gift-tag,
.limited-tag {
  background: linear-gradient(135deg, #8B46E8 0%, #B678F4 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(232, 202, 116, .82) !important;
  box-shadow: 0 10px 24px rgba(139, 70, 232, .22), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.premium-eyebrow::before {
  color: #F1D98A !important;
}

.hero-title-gradient {
  display: inline-block;
  background: linear-gradient(90deg, #D7A83A 0%, #A15EF4 42%, #6F35C7 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

.hero-copy h1,
h1,
h2,
h3,
.hero-title,
.benefit-card-head h3,
.gift-card-v7 h3,
.detail-copy h2 {
  color: #33223F !important;
}

.lead,
.hero-desc,
.section-heading p,
.detail-copy p,
.claim-card p,
.gift-card p,
.rules-content,
.register-notice ul,
.result-summary p,
.checkbox-label {
  color: #5E4A66 !important;
}

.badge-card,
.situation-card,
.value-card,
.gift-card,
.claim-card,
.register-form,
.register-notice,
.register-gift-card,
.benefit-readable-card,
.benefit-addon-strip article,
.product-panel-v7,
.bazi-panel-v7,
.gift-visual-bazi-v7,
.gift-visual-skincare-v7,
.result-summary {
  background:
    radial-gradient(circle at 92% 8%, rgba(230, 208, 255, .55), transparent 32%),
    rgba(255, 255, 255, .88) !important;
  border-color: rgba(217, 185, 95, .58) !important;
  box-shadow: 0 16px 36px rgba(124, 70, 196, .11) !important;
}

.hero-product-frame-empty,
.hero-mobile-image-slot.hero-empty-visual {
  background:
    radial-gradient(circle at 94% 6%, rgba(155, 92, 240, .18), transparent 22%),
    radial-gradient(circle at 8% 100%, rgba(217, 185, 95, .14), transparent 24%),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(239,226,255,.76)) !important;
  border-color: rgba(217, 185, 95, .62) !important;
}

.hero-product-frame-empty::before,
.hero-mobile-image-slot.hero-empty-visual::before {
  background:
    radial-gradient(circle at 100% 0, rgba(155, 92, 240, .09) 0 54px, transparent 55px),
    radial-gradient(circle at 0 100%, rgba(217,185,95,.08) 0 72px, transparent 73px),
    linear-gradient(90deg, rgba(155,92,240,.045) 1px, transparent 1px),
    linear-gradient(rgba(217,185,95,.045) 1px, transparent 1px),
    rgba(255,255,255,.28) !important;
}

.button-primary,
.button-dark,
.value-cta-button,
.final-cta-section .button-primary,
.register-form button.button-primary {
  background: linear-gradient(135deg, #5F2FC2 0%, #8B46E8 54%, #B678F4 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #D9B95F !important;
  box-shadow: 0 14px 30px rgba(139, 70, 232, .28), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.button-primary:hover,
.button-dark:hover,
.value-cta-button:hover,
.final-cta-section .button-primary:hover,
.register-form button.button-primary:hover {
  box-shadow: 0 16px 36px rgba(139, 70, 232, .34), 0 0 0 3px rgba(217, 185, 95, .18) !important;
}

.button-outline,
.button-light,
.button-outline-light {
  background: rgba(255, 255, 255, .84) !important;
  color: #4C2D68 !important;
  border-color: rgba(217, 185, 95, .76) !important;
}

.button-outline:hover,
.button-light:hover,
.button-outline-light:hover {
  background: #FFFFFF !important;
  box-shadow: 0 12px 26px rgba(139, 70, 232, .18) !important;
}

.benefit-icon,
.addon-icon {
  background: linear-gradient(135deg, #7F3EE2 0%, #B678F4 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 24px rgba(139, 70, 232, .22) !important;
}

.benefit-card-flow .benefit-icon {
  background: linear-gradient(135deg, #D9B95F 0%, #9B5CF0 100%) !important;
}

.benefit-card-relationship .benefit-icon {
  background: linear-gradient(135deg, #B678F4 0%, #6F35C7 100%) !important;
}

.benefit-card-bonus .benefit-icon {
  background: linear-gradient(135deg, #F1D98A 0%, #7F3EE2 100%) !important;
}

.benefit-readability-cta,
.value-cta,
.site-footer,
.final-cta-section {
  background:
    radial-gradient(circle at 18% 18%, rgba(217, 185, 95, .20), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(182, 120, 244, .20), transparent 30%),
    linear-gradient(135deg, #2C1843 0%, #4A2374 54%, #6F35C7 100%) !important;
  color: #FFFFFF !important;
  border-color: rgba(217, 185, 95, .62) !important;
}

.value-cta h3,
.value-cta p,
.value-cta-kicker,
.benefit-readability-cta p,
.final-cta-section h2,
.final-cta-section .lead,
.site-footer h2,
.site-footer p {
  color: rgba(255, 255, 255, .93) !important;
}

.value-cta h3 strong,
.benefit-summary h3 strong,
.benefit-value-copy h3 strong,
.benefit-card-value strong {
  color: #F1D98A !important;
}

.value-cta::before,
.value-cta p::after {
  background: linear-gradient(90deg, transparent, rgba(241,217,138,.94), transparent) !important;
}

.teacher-section-premium {
  background:
    radial-gradient(circle at 76% 16%, rgba(217, 185, 95, .15), transparent 28%),
    linear-gradient(135deg, #FBF7FF 0%, #FFFFFF 100%) !important;
}

.teacher-section-premium .teacher-card-v7 {
  background:
    radial-gradient(circle at 82% 18%, rgba(217,185,95,.17), transparent 24%),
    radial-gradient(circle at 10% 86%, rgba(182,120,244,.18), transparent 26%),
    linear-gradient(135deg, #2C1843 0%, #4A2374 52%, #6F35C7 100%) !important;
  border-color: rgba(217, 185, 95, .66) !important;
  box-shadow: 0 24px 54px rgba(74, 35, 116, .20) !important;
}

.teacher-section-premium .teacher-copy-v7 h2,
.teacher-section-premium .teacher-copy-v7 .lead,
.teacher-section-premium .teacher-copy-v7 p:not(.eyebrow) {
  color: rgba(255,255,255,.94) !important;
}

.teacher-section-premium .teacher-copy-v7 .eyebrow,
.teacher-section-premium .teacher-name-card-v7 span,
.rules-panel .eyebrow {
  color: #F1D98A !important;
}

.teacher-section-premium .teacher-name-card-v7,
.video-placeholder {
  background: linear-gradient(135deg, rgba(44,24,67,.94), rgba(111,53,199,.92)) !important;
  border: 1px solid rgba(217,185,95,.66) !important;
}

.teacher-photo-v7,
.product-panel,
.product-box {
  background: linear-gradient(145deg, #FFFFFF, #EFE2FF 62%, #FBF7FF) !important;
  border-color: rgba(217,185,95,.62) !important;
}

.gift-section {
  background:
    radial-gradient(circle at 8% 18%, rgba(239,226,255,.74), transparent 26%),
    radial-gradient(circle at 92% 82%, rgba(217,185,95,.14), transparent 26%),
    linear-gradient(180deg, #FFFFFF 0%, #FBF7FF 100%) !important;
}

.detail-price,
.gift-value,
.pill-list li,
.mini-grid span,
.product-box span {
  background: rgba(255, 255, 255, .88) !important;
  border-color: rgba(217,185,95,.72) !important;
  color: #7F3EE2 !important;
}

.register-form input,
.register-form select,
.status-form select {
  border-color: rgba(139, 70, 232, .20) !important;
  background: rgba(255,255,255,.97) !important;
  color: #33223F !important;
}

.register-form input:focus,
.register-form select:focus,
.status-form select:focus {
  outline: 2px solid rgba(217, 185, 95, .48) !important;
  border-color: #D9B95F !important;
}

.agreement-box {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(217,185,95,.58) !important;
}

.modal-backdrop {
  background: rgba(44, 24, 67, .70) !important;
}

/* =========================================================
   0604 Purple Light Female - 7 visual fixes
   只修正色系與可讀性，不異動文案與 HTML 架構
   ========================================================= */
:root {
  --plum-ink: #3A2D3D;
  --plum-text: #5C5060;
  --purple-main: #9A56E8;
  --purple-deep: #5D2EA3;
  --purple-soft: #F5ECFF;
  --champagne: #D8B76A;
  --gift-red: #C84432;
  --gift-red-deep: #A9362B;
  --gift-red-soft: #FFF2EE;
}

/* 1. Menu 顏色修正 */
.site-header,
.nav-only {
  background: rgba(255, 251, 255, .94) !important;
  border-bottom: 1px solid rgba(216, 183, 106, .42) !important;
  box-shadow: 0 8px 22px rgba(92, 46, 163, .06) !important;
}

.nav-tabs a,
.main-nav a {
  background: rgba(255, 255, 255, .9) !important;
  color: var(--plum-ink) !important;
  border: 1px solid rgba(216, 183, 106, .58) !important;
  box-shadow: 0 6px 16px rgba(92, 46, 163, .06) !important;
}

.nav-tabs a:hover,
.main-nav a:hover {
  background: linear-gradient(135deg, #FFFFFF 0%, #F5ECFF 100%) !important;
  color: var(--purple-deep) !important;
  border-color: rgba(154, 86, 232, .55) !important;
}

/* 5. Eyebrow 不用紫色，改為深灰紫咖，接近白金權益小標 */
.eyebrow,
.section-heading .eyebrow,
.detail-copy .eyebrow,
.video-copy .eyebrow,
.final-cta-section .eyebrow,
.rules-panel > .eyebrow,
.benefit-kicker {
  color: var(--plum-ink) !important;
}

/* Hero 白金會員限定仍維持亮紫主軸 */
.premium-eyebrow {
  background: linear-gradient(135deg, #8C4AE6 0%, #B86CFF 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(216,183,106,.78) !important;
}

/* 2. 深色老師區標籤可讀性 */
.teacher-section-premium .teacher-copy-v7 .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  color: #3A2D3D !important;
  background: linear-gradient(135deg, #F4D987 0%, #D8B76A 100%) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  box-shadow: 0 10px 24px rgba(216,183,106,.22) !important;
}

/* 3. 深色區立即行動可讀性 */
.final-cta-section .eyebrow {
  color: #F4D987 !important;
}

.final-cta-section h2,
.final-cta-section .lead,
.final-cta-section p:not(.eyebrow) {
  color: rgba(255,255,255,.94) !important;
}

.final-cta-section .button-primary,
.value-cta-button,
.button-light.value-cta-button {
  background: linear-gradient(135deg, #F4D987 0%, #D8B76A 100%) !important;
  color: #35263B !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 14px 30px rgba(216,183,106,.28), inset 0 1px 0 rgba(255,255,255,.45) !important;
}

.final-cta-section .button-primary:hover,
.value-cta-button:hover,
.button-light.value-cta-button:hover {
  color: #2F2434 !important;
  box-shadow: 0 16px 34px rgba(216,183,106,.34), 0 0 0 3px rgba(255,255,255,.18) !important;
}

/* 4+7. 好禮區維持紅色系 */
.gift-note,
.badge-card span,
.gift-card-v7 .gift-note {
  color: var(--gift-red) !important;
}

.gift-tag,
.gift-card .gift-tag,
.limited-tag {
  background: linear-gradient(135deg, var(--gift-red) 0%, #E36A48 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(216,183,106,.72) !important;
  box-shadow: 0 10px 24px rgba(200,68,50,.20), inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.badge-card span {
  color: var(--gift-red) !important;
}

.badge-card + .badge-card::before,
.hero-gift-pair::before {
  background: linear-gradient(135deg, var(--gift-red) 0%, #E36A48 100%) !important;
  color: #FFFFFF !important;
}

/* 6. 膠囊內文字改黑灰，不用紫色 */
.pill-list li,
.mini-grid span,
.detail-price,
.gift-value,
.product-box span,
.benefit-card-value,
.bazi-product-card span {
  color: var(--plum-ink) !important;
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(216,183,106,.72) !important;
}

.pill-list li,
.mini-grid span {
  box-shadow: 0 8px 18px rgba(92,46,163,.05) !important;
}

/* 讓一般主按鈕仍保留亮紫 + 金邊，但確保文字清楚 */
.button-primary,
.button-dark,
.register-form button.button-primary {
  background: linear-gradient(135deg, #6B35C8 0%, #9A56E8 58%, #B86CFF 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--champagne) !important;
  box-shadow: 0 14px 30px rgba(154,86,232,.26), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.button-outline,
.button-light,
.button-outline-light {
  color: var(--plum-ink) !important;
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(216,183,106,.72) !important;
}

/* 避免深色區中的一般文字被紫色覆蓋造成低對比 */
.value-cta h3,
.value-cta p,
.value-cta-kicker,
.site-footer h2,
.site-footer p,
.site-footer .rules-content,
.rules-panel p {
  color: rgba(255,255,255,.92) !important;
}

.rules-panel > .eyebrow {
  color: #F4D987 !important;
}

/* 淡紫背景維持明亮乾淨 */
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(184,108,255,.20), transparent 24%),
    radial-gradient(circle at 88% 14%, rgba(216,183,106,.14), transparent 22%),
    radial-gradient(circle at 76% 78%, rgba(245,236,255,.80), transparent 30%),
    #FFFBFF !important;
}

/* =========================================================
   CM830 PHP 串接覆寫
   ========================================================= */
/* body.PC .site-header {
  top: 0 !important;
} */

body.MOBILE .site-header {
  top: 45px !important;
}

body.PC .hero,
body.PC .register-hero {
  margin-top: 0 !important;
}

body.MOBILE .hero,
body.MOBILE .register-hero {
  margin-top: 45px !important;
}

.claim-status-note {
  margin-bottom: 22px;
  color: var(--color-muted);
}

.result-summary-records h2 {
  margin-bottom: 20px;
}

.record-list {
  display: grid;
  gap: 16px;
}

.record-item {
  padding: 20px;
  border-radius: 18px;
  border: 1px solid rgba(215,181,109,.5);
  background: rgba(255,255,255,.75);
}

.record-item h3 {
  margin-bottom: 12px;
  font-size: 22px;
}

.record-item p:last-child {
  margin-bottom: 0;
}

.register-history-section {
  padding: 30px 0 0;
}

.empty-state-card {
  padding: 36px;
}

.sticky-cta.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}

.sticky-cta {
  transition: opacity .24s ease, transform .24s ease;
}

.button.is-disabled,
.button[aria-disabled="true"] {
  background: #bdb2aa;
  border-color: #bdb2aa;
  color: #ffffff;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.button.is-disabled:hover,
.button[aria-disabled="true"]:hover {
  box-shadow: none;
  transform: none;
}

@media (max-width: 720px) {
  body.MOBILE .site-header {
    top: 45px !important;
  }

  .record-item {
    padding: 18px;
  }
}