/* 字級 token 集中在 type-scale.css，全站共用一份 */
@import url("type-scale.css?v=1");

:root {
  --night: #102f46;
  --night-deep: #092235;
  --ink: #173348;
  --ink-soft: #587080;
  --cream: #f7f1e5;
  --paper: #fffdf8;
  --white: #ffffff;
  --sage: #b9caae;
  --sage-deep: #6b876c;
  --butter: #f1d77c;
  --apricot: #e99e77;
  --sky: #b7d9e8;
  --line: rgba(23, 51, 72, 0.16);
  --shadow: 0 24px 70px rgba(21, 49, 67, 0.13);
  --radius: 24px;
  --shell: min(1180px, calc(100% - 48px));
  --font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font); font-size: var(--fs-base); line-height: 1.65; -webkit-font-smoothing: antialiased; }
body.is-locked { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { color: var(--night); background: var(--butter); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 999; top: 12px; left: 12px; padding: 10px 16px; border-radius: 8px; background: var(--butter); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.section { position: relative; padding: 124px 0; }
.section-shell { width: var(--shell); margin: 0 auto; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--sage-deep); font-size: var(--fs-sm); font-weight: 800; letter-spacing: .14em; }
.eyebrow::before { width: 28px; height: 1px; background: currentColor; content: ""; }
.eyebrow-light { color: #cbdcae; }
.section-heading h2, .quiz-copy h2, .product-copy h2, .story-intro h2, .about-statement h2, .professional-section h2, .contact-section h2, .home-shoulder h2, .home-product h2, .product-lead-copy h2, .product-feature-section h2 { margin: 0; font-size: clamp(38px, 5vw, 68px); font-weight: 800; line-height: 1.18; letter-spacing: -.045em; }
.section-heading > p:last-child { max-width: 560px; color: var(--ink-soft); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 56px; padding: 15px 24px; border: 1px solid transparent; border-radius: 999px; font-size: var(--fs-base); font-weight: 800; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { color: var(--night); background: var(--butter); box-shadow: 0 12px 28px rgba(241, 215, 124, .24); }
.button-primary:hover { box-shadow: 0 16px 36px rgba(241, 215, 124, .35); }
.button-ghost { color: white; border-color: rgba(255,255,255,.35); background: rgba(12, 36, 52, .18); backdrop-filter: blur(10px); }
.button-ghost:hover { background: rgba(255,255,255,.12); }
.button-light { color: var(--night); background: var(--paper); }
.button-dark { color: white; background: var(--night); }
.button-line { color: white; border-color: rgba(255,255,255,.36); background: rgba(255,255,255,.04); }
.button-full { width: 100%; }
.text-button { display: inline-flex; align-items: center; gap: 20px; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; font-weight: 800; cursor: pointer; }
.text-button span { transition: transform .2s ease; }
.text-button:hover span { transform: translateX(5px); }

/* Header */
.site-header { position: fixed; z-index: 80; top: 0; left: 0; width: 100%; color: white; transition: color .25s, background .25s, box-shadow .25s; }
.site-header.is-scrolled { color: var(--ink); background: rgba(255, 253, 248, .9); box-shadow: 0 8px 30px rgba(21,49,67,.08); backdrop-filter: blur(18px); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; width: min(1280px, calc(100% - 56px)); height: 84px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 11px; line-height: 1; }
.brand-mark { flex: 0 0 auto; width: 42px; height: 42px; overflow: hidden; border-radius: 12px; background: #fff url("assets/images/aiwise-logo.png") center / cover no-repeat; box-shadow: 0 5px 16px rgba(7,27,43,.14); }
.brand-mark i { display: none; }
.brand-copy { display: grid; gap: 4px; }
.brand-copy strong { font-size: var(--fs-md); letter-spacing: .08em; }
.brand-copy small { font-size: var(--fs-3xs); letter-spacing: .28em; opacity: .75; }
.site-nav { display: flex; align-items: center; gap: 14px; font-size: var(--fs-xs); font-weight: 700; }
.site-nav a { position: relative; }
.site-nav a::after { position: absolute; right: 0; bottom: -8px; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .25s; content: ""; }
.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-product { display: grid; gap: 1px; padding: 10px 15px; color: var(--night); border-radius: 99px; background: var(--butter); font-size: var(--fs-xs); font-weight: 900; line-height: 1.25; text-align: center; box-shadow: 0 9px 24px rgba(241,215,124,.2); }
.nav-quiz { padding: 9px 14px; color: inherit; border: 1px solid currentColor; border-radius: 99px; background: rgba(255,255,255,.05); font-size: var(--fs-xs); font-weight: 800; text-decoration: none; cursor: pointer; }
.nav-product::after, .nav-quiz::after { display: none; }
.menu-toggle { display: none; }

/* 導覽列下拉群組：DOM 由 site-nav.js 產生，這裡只負責 site 皮膚的長相。
   .nav-dropdown 外框刻意是透明的、只有 padding-top，當作滑鼠從按鈕移到
   卡片之間的橋樑；少了它，游標一離開按鈕就會先掉進空隙把選單關掉。 */
.nav-group { position: relative; display: inline-flex; align-items: center; }
.nav-group-toggle { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 0; color: inherit; border: 0; background: transparent; font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
.nav-group-toggle::after { position: absolute; right: 0; bottom: -8px; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .25s; content: ""; }
.nav-group:hover .nav-group-toggle::after, .nav-group.is-current .nav-group-toggle::after { transform: scaleX(1); transform-origin: left; }
.nav-group-chevron { width: 9px; height: 9px; transition: transform .2s; }
.nav-group.is-open .nav-group-chevron { transform: rotate(180deg); }
.nav-dropdown { position: absolute; z-index: 2; top: 100%; left: 50%; width: 234px; padding-top: 15px; opacity: 0; transform: translateX(-50%) translateY(-6px); pointer-events: none; transition: opacity .18s, transform .18s; }
.nav-dropdown::before { position: absolute; top: 10px; left: 50%; width: 12px; height: 12px; background: var(--white); transform: translateX(-50%) rotate(45deg); content: ""; }
.nav-group.is-open .nav-dropdown { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.nav-dropdown-inner { position: relative; padding: 7px; border-radius: 14px; background: var(--white); box-shadow: 0 14px 34px rgba(20,47,70,.18); }
.nav-dropdown a { display: flex; align-items: center; gap: 9px; padding: 9px 10px; color: var(--ink); border-radius: 9px; }
.nav-dropdown a:hover { background: rgba(107,135,108,.13); }
.nav-dropdown a[aria-current="page"] { background: rgba(107,135,108,.18); }
.nav-dropdown a::after { display: none; }
.nav-dropdown-icon { flex: 0 0 auto; width: 17px; height: 17px; color: var(--sage-deep); }
.nav-dropdown-icon svg { width: 100%; height: 100%; }
.nav-dropdown strong { display: block; font-size: var(--fs-xs); font-weight: 800; }
.nav-dropdown small { display: block; color: var(--ink-soft); font-size: var(--fs-3xs); font-weight: 600; line-height: 1.45; }

/* 導覽列最右邊的帳號那一組（2026-08-13，C3）。DOM 由 site-nav.js 產生，
   它只負責 standalone 皮膚（肩頸測驗頁）的樣式，site 皮膚要在這裡寫。

   ★ 這一段一定要放在 @media (max-width:760px) 那個手機抽屜區塊「之前」。
     那裡的 .site-nav .nav-group-toggle 跟這裡的 .nav-account .nav-group-toggle
     權重一樣（各兩個 class），同分時<b>後面的贏</b>——寫到檔案後半段的話，
     桌機的膠囊鈕會蓋掉手機抽屜的整列樣式，而症狀只是「手機選單裡那一項長得不一樣」，
     不會有任何錯誤。手機那一邊的覆寫寫在那個區塊裡面（往下找 .nav-account）。 */
.nav-account .nav-group-toggle { padding: 9px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 99px; background: rgba(255,255,255,.08); font-weight: 800; }
/* 膠囊鈕不要那條底線動畫——它是照 .nav-group-toggle 的寬度畫的，會壓在圓角外面。 */
.nav-account .nav-group-toggle::after { display: none; }
/* 配色跟著 .nav-member 走過的那三段一模一樣：首頁最上方是深色底，
   捲動之後與內頁轉淺底，會員中心自己那一頁用實心奶油色。 */
.site-header.is-scrolled .nav-account .nav-group-toggle,
.subpage-body .nav-account .nav-group-toggle { border-color: var(--line); background: rgba(255,255,255,.5); }
.member-body .nav-account .nav-group-toggle { color: var(--night); border-color: var(--butter); background: var(--butter); }

/* 登出鈕現在住在白色的下拉卡片裡，不再直接掛在導覽列上。
   它是 <form><button>，不是 <a>，所以要自己補一份跟 .nav-dropdown a 一樣的長相——
   少了這一段就是瀏覽器預設的灰色小按鈕，夾在兩個清單項目中間。 */
.nav-dropdown .nav-logout-form { margin: 0; }
.nav-dropdown .nav-logout-form button { display: block; width: 100%; padding: 9px 10px; color: var(--ink); border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: var(--fs-xs); font-weight: 800; text-align: left; cursor: pointer; }
.nav-dropdown .nav-logout-form button:hover { background: rgba(107,135,108,.13); }

.subpage-body .site-header { color: var(--ink); background: rgba(255,253,248,.94); box-shadow: 0 8px 30px rgba(21,49,67,.07); backdrop-filter: blur(18px); }

/* Hero */
.hero { position: relative; min-height: 820px; height: 100svh; max-height: 1050px; overflow: hidden; color: white; background: var(--night); }
.hero-image, .hero-overlay { position: absolute; inset: 0; }
.hero-image { background: url("assets/images/hero-pillow-standoff.png") center center / cover no-repeat; transform: scale(1.015); animation: hero-breathe 14s ease-in-out infinite alternate; }
.hero-overlay { background: linear-gradient(90deg, rgba(6,27,43,.7) 0%, rgba(6,27,43,.48) 40%, rgba(6,27,43,.04) 70%), linear-gradient(0deg, rgba(6,27,43,.42), transparent 38%); }
.hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; width: min(1280px, calc(100% - 56px)); height: 100%; margin: auto; padding-top: 72px; }
.hero-eyebrow { color: #e7e2c6; }
.hero-eyebrow::before { display: none; }
.moon-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--butter); box-shadow: 0 0 18px rgba(241,215,124,.75); }
.hero h1 { max-width: 690px; margin: 0; font-size: clamp(60px, 6.4vw, 100px); font-weight: 900; line-height: 1.08; letter-spacing: -.07em; text-wrap: balance; }
.hero h1 em { position: relative; z-index: 1; color: var(--butter); font-style: normal; }
.hero h1 em::after { position: absolute; z-index: -1; right: -10px; bottom: 2px; left: -8px; height: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='8' viewBox='0 0 400 8'%3E%3Cpath d='M1 6C80 2 120 8 202 4S330 2 399 5' fill='none' stroke='%23e99e77' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; opacity: .9; content: ""; }
.hero-lead { max-width: 570px; margin: 30px 0 32px; color: rgba(255,255,255,.82); font-size: var(--fs-md); line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-reassurance { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 26px; color: rgba(255,255,255,.68); font-size: var(--fs-sm); }
.hero-reassurance i { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 5px; color: var(--night); border-radius: 50%; background: var(--sage); font-style: normal; font-weight: 900; }
.brain-note { position: absolute; z-index: 3; right: 5.5vw; bottom: 14%; width: 194px; padding: 20px; color: var(--ink); border: 1px solid rgba(255,255,255,.8); background: rgba(255,251,235,.84); box-shadow: 0 22px 50px rgba(6,27,43,.2); transform: rotate(2deg); backdrop-filter: blur(9px); }
.brain-note::before { position: absolute; top: -7px; left: 50%; width: 55px; height: 14px; background: rgba(244,217,139,.7); transform: translateX(-50%) rotate(-4deg); content: ""; }
.brain-time { font-family: Georgia, serif; font-size: var(--fs-base); font-weight: 700; }
.brain-note p { margin: 11px 0; font-size: var(--fs-sm); line-height: 1.55; }
.brain-note strong { font-size: var(--fs-md); }
.brain-status { color: var(--ink-soft); font-size: var(--fs-2xs); }
.scroll-cue { position: absolute; z-index: 3; bottom: 26px; left: 50%; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.68); font-size: var(--fs-xs); letter-spacing: .1em; transform: translateX(-50%); }
.scroll-cue i { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; font-style: normal; animation: bob 1.8s ease-in-out infinite; }
@keyframes hero-breathe { to { transform: scale(1.045); } }
@keyframes bob { 50% { transform: translateY(5px); } }

.recognition-strip { overflow: hidden; padding: 15px 0; color: var(--night); background: var(--butter); }
.strip-track { display: flex; align-items: center; gap: 30px; width: max-content; animation: marquee 28s linear infinite; }
.strip-track p { margin: 0; font-size: var(--fs-base); font-weight: 800; white-space: nowrap; }
.strip-track i { width: 5px; height: 5px; border-radius: 50%; background: var(--apricot); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Recognition cards */
.signs-section { background: var(--paper); }
.split-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 60px; }
.heading-note { display: flex; align-items: center; gap: 8px; margin: 0 5% 18px 0; color: var(--ink-soft); font-size: var(--fs-sm); transform: rotate(-4deg); }
.heading-note p { margin: 0; line-height: 1.5; }
.hand-arrow { color: var(--apricot); font-family: Georgia, serif; font-size: 30px; }
.sign-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sign-card { position: relative; min-height: 290px; overflow: hidden; padding: 24px; text-align: left; border: 1px solid var(--line); border-radius: 18px; background: #fff; cursor: pointer; transition: transform .3s ease, border .3s, box-shadow .3s; }
.sign-card--wide { grid-column: span 2; }
.sign-card:hover { z-index: 1; border-color: rgba(23,51,72,.35); box-shadow: var(--shadow); transform: translateY(-7px) rotate(-.4deg); }
.sign-card[aria-pressed="true"] { color: white; border-color: var(--night); background: var(--night); }
.sign-card--butter { background: #f9eabc; }
.sign-card--sage { background: #dce6d6; }
.sign-card--blue { background: #dbe9ef; }
.card-num { position: absolute; top: 20px; left: 22px; color: var(--ink-soft); font-family: Georgia, serif; font-size: var(--fs-sm); }
.sign-card[aria-pressed="true"] .card-num, .sign-card[aria-pressed="true"] small { color: rgba(255,255,255,.64); }
.card-icon { position: absolute; top: 19px; right: 21px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.64); font-size: 23px; }
.sign-card strong { display: block; max-width: 310px; margin-top: 68px; font-size: 22px; line-height: 1.45; letter-spacing: -.03em; }
.sign-card small { display: block; max-width: 310px; margin-top: 11px; color: var(--ink-soft); font-size: var(--fs-sm); }
.card-check { position: absolute; right: 20px; bottom: 18px; display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 800; opacity: 0; transition: opacity .25s; }
.sign-card:hover .card-check, .sign-card[aria-pressed="true"] .card-check { opacity: 1; }
.card-check i { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; font-style: normal; }
.sign-card[aria-pressed="true"] .card-check i { color: var(--night); background: var(--butter); transform: rotate(45deg); }
.sign-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; margin-top: 30px; padding: 22px 28px; border: 1px dashed rgba(23,51,72,.3); border-radius: 18px; }
.sign-summary > div { display: flex; align-items: center; gap: 10px; }
.sign-summary > div > span { color: var(--apricot); font-family: Georgia, serif; font-size: 45px; line-height: 1; }
.sign-summary small { font-size: var(--fs-xs); line-height: 1.3; }
.sign-summary p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }

/* Constellation */
.constellation-section { overflow: hidden; color: white; background: var(--night); }
.constellation-section::before { position: absolute; inset: 0; opacity: .32; background-image: radial-gradient(circle at 10% 15%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 80% 30%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 33% 68%, #fff 0 1px, transparent 1.5px); background-size: 210px 210px, 290px 290px, 170px 170px; content: ""; }
.constellation-shell { position: relative; display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: 70px; }
.constellation-copy h2 { font-size: clamp(44px, 5vw, 72px); }
.constellation-copy > p:last-of-type { max-width: 460px; margin: 28px 0 32px; color: rgba(255,255,255,.67); }
.constellation { position: relative; min-height: 590px; }
.orbit { position: absolute; top: 50%; left: 50%; border: 1px dashed rgba(255,255,255,.18); border-radius: 50%; transform: translate(-50%,-50%); }
.orbit-1 { width: 340px; height: 340px; }
.orbit-2 { width: 540px; height: 540px; }
.orbit-center { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; place-items: center; width: 155px; height: 155px; text-align: center; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; background: rgba(255,255,255,.1); box-shadow: 0 0 70px rgba(183,217,232,.15); transform: translate(-50%,-50%); backdrop-filter: blur(10px); }
.orbit-center span { position: absolute; top: 20px; font-size: 25px; }
.orbit-center strong { margin-top: 28px; line-height: 1.3; }
.factor { position: absolute; z-index: 3; padding: 10px 17px; color: var(--night); border-radius: 99px; background: var(--cream); box-shadow: 0 10px 25px rgba(0,0,0,.15); font-size: var(--fs-sm); font-weight: 800; white-space: nowrap; animation: float 5s ease-in-out infinite alternate; }
.factor::before { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--apricot); content: ""; }
.factor-1 { top: 4%; left: 34%; }
.factor-2 { top: 17%; right: 2%; animation-delay: -.6s; }
.factor-3 { top: 32%; left: 2%; animation-delay: -1.2s; }
.factor-4 { top: 47%; right: 0; animation-delay: -1.8s; }
.factor-5 { bottom: 27%; left: 5%; animation-delay: -2.4s; }
.factor-6 { right: 13%; bottom: 13%; animation-delay: -3s; }
.factor-7 { bottom: 2%; left: 32%; animation-delay: -3.6s; }
.factor-8 { top: 13%; left: 4%; animation-delay: -4.2s; }
.factor-9 { right: 26%; bottom: 33%; animation-delay: -4.8s; }
@keyframes float { to { transform: translateY(-9px) rotate(1deg); } }

/* Quiz teaser */
.quiz-teaser { background: #e8e3d7; }
.quiz-card { position: relative; display: grid; grid-template-columns: .55fr 1fr .8fr; align-items: center; gap: 58px; padding: 65px; overflow: hidden; border-radius: 32px; background: var(--paper); box-shadow: var(--shadow); }
.quiz-card::after { position: absolute; top: -90px; right: 30%; width: 220px; height: 220px; border: 55px solid rgba(185,202,174,.18); border-radius: 50%; content: ""; }
.quiz-clock { position: relative; z-index: 1; display: grid; justify-items: center; }
.clock-face { position: relative; display: grid; place-items: center; width: 190px; height: 190px; border: 1px solid var(--line); border-radius: 50%; background: var(--cream); }
.clock-face::before { position: absolute; inset: 13px; border: 1px dashed rgba(23,51,72,.25); border-radius: 50%; content: ""; }
.clock-face i { position: absolute; width: 3px; height: 54px; border-radius: 4px; background: var(--apricot); transform: rotate(40deg); transform-origin: 50% 100%; }
.clock-face b { margin-top: 44px; color: var(--night); font-family: Georgia, serif; font-size: 62px; font-weight: 400; }
.quiz-clock > small { margin-top: -22px; padding: 5px 12px; color: white; border-radius: 99px; background: var(--night); font-size: var(--fs-2xs); letter-spacing: .2em; }
.quiz-copy { position: relative; z-index: 1; }
.quiz-copy h2 { font-size: clamp(38px, 4vw, 58px); }
.quiz-copy > p:last-child { max-width: 490px; margin-top: 24px; color: var(--ink-soft); }
.quiz-preview { position: relative; z-index: 1; }
.mini-report { margin-bottom: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: white; transform: rotate(1.5deg); }
.mini-report > span { display: block; margin-bottom: 18px; font-size: var(--fs-xs); font-weight: 800; }
.mini-report > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin: 12px 0; }
.mini-report > div::before { grid-column: 1 / -1; grid-row: 1; height: 6px; border-radius: 99px; background: #e8eceb; content: ""; }
.mini-report > div i { z-index: 1; grid-column: 1 / -1; grid-row: 1; width: var(--score); height: 6px; border-radius: 99px; background: var(--apricot); }
.mini-report > div small { grid-column: 2; grid-row: 1; padding-left: 7px; background: white; font-size: var(--fs-2xs); }
.mini-report em { color: var(--ink-soft); font-size: var(--fs-2xs); font-style: normal; }
.privacy-note { display: block; margin-top: 9px; color: var(--ink-soft); text-align: center; font-size: var(--fs-2xs); }

/* Small steps */
.steps-section { background: var(--cream); }
.centered-heading { text-align: center; }
.centered-heading .eyebrow { justify-content: center; }
.centered-heading > p:last-child { margin: 20px auto 0; }
.step-layout { display: grid; grid-template-columns: 320px 1fr; gap: 70px; margin-top: 65px; }
.moon-progress { position: sticky; top: 120px; align-self: start; display: grid; justify-items: center; padding: 40px 20px; text-align: center; border: 1px solid var(--line); border-radius: 180px 180px 22px 22px; background: var(--night); color: white; }
.moon-phase { display: grid; place-items: center; width: 190px; height: 190px; margin-bottom: 23px; border: 1px dashed rgba(255,255,255,.3); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.08), transparent 65%); }
.moon-phase span { font-size: 110px; line-height: 1; filter: grayscale(.5); transition: transform .35s; }
.moon-progress strong { color: var(--butter); font-family: Georgia, serif; font-size: 30px; }
.moon-progress small { min-height: 45px; margin-top: 8px; color: rgba(255,255,255,.64); font-size: var(--fs-xs); }
.reset-tasks { padding: 0; color: var(--sky); border: 0; border-bottom: 1px solid currentColor; background: none; font-size: var(--fs-xs); cursor: pointer; }
.task-list { display: grid; }
.task-item { display: grid; grid-template-columns: 100px 60px 1fr 34px; align-items: center; gap: 18px; min-height: 110px; padding: 18px 6px; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; transition: padding .2s, background .2s; }
.task-item:first-child { border-top: 1px solid var(--line); }
.task-item:hover { padding-right: 16px; padding-left: 16px; background: rgba(255,255,255,.46); }
.task-time { color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 700; }
.task-icon { display: grid; place-items: center; width: 55px; height: 55px; border-radius: 50%; background: white; font-size: 25px; }
.task-item strong, .task-item small { display: block; }
.task-item strong { font-size: var(--fs-md); }
.task-item small { color: var(--ink-soft); font-size: var(--fs-xs); }
.task-item > i { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; font-style: normal; }
.task-item > i::before { content: "+"; }
.task-item[aria-pressed="true"] { opacity: .7; }
.task-item[aria-pressed="true"] strong { text-decoration: line-through; text-decoration-thickness: 1px; }
.task-item[aria-pressed="true"] > i { color: var(--night); border-color: var(--butter); background: var(--butter); }
.task-item[aria-pressed="true"] > i::before { content: "✓"; }
.shoulder-check { position: relative; display: grid; grid-template-columns: 1.1fr 1fr .72fr; align-items: center; gap: 36px; margin-top: 75px; padding: 42px; overflow: hidden; border: 1px solid rgba(23,51,72,.14); border-radius: 26px; background: #f3dfd3; box-shadow: 0 22px 55px rgba(23,51,72,.09); }
.shoulder-check::before { position: absolute; top: -95px; right: 20%; width: 230px; height: 230px; border: 48px solid rgba(255,255,255,.28); border-radius: 50%; content: ""; }
.shoulder-check-copy, .shoulder-flow, .shoulder-check-action { position: relative; z-index: 1; }
.shoulder-check h3 { margin: 0; font-size: clamp(28px,3vw,42px); line-height: 1.3; letter-spacing: -.04em; }
.shoulder-check-copy > p:last-child { max-width: 480px; margin: 18px 0 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.shoulder-flow { display: flex; align-items: center; justify-content: center; gap: 8px; }
.shoulder-flow span { display: grid; place-items: center; width: 98px; height: 98px; padding: 8px; text-align: center; border: 1px solid rgba(23,51,72,.13); border-radius: 50%; background: rgba(255,255,255,.58); }
.shoulder-flow i { font-size: 24px; font-style: normal; }
.shoulder-flow strong { margin-top: 3px; font-size: var(--fs-2xs); white-space: nowrap; }
.shoulder-flow b { color: var(--apricot); font-family: Georgia,serif; font-size: 18px; }
.shoulder-check-action { display: grid; justify-items: center; gap: 12px; }
.shoulder-check-action .button { width: 100%; padding-right: 18px; padding-left: 18px; white-space: nowrap; }
.shoulder-check-action small { color: var(--ink-soft); font-size: var(--fs-3xs); }
.shoulder-sticker { display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 2px; color: var(--night); text-align: center; border-radius: 50%; background: var(--butter); font-size: var(--fs-2xs); line-height: 1.3; transform: rotate(6deg); }
.shoulder-sticker strong { font-size: var(--fs-base); }

/* Routes */
.route-section { background: var(--paper); }
.route-heading { max-width: 900px; margin-bottom: 55px; }
.route-heading h2 { font-size: clamp(38px, 4.7vw, 62px); }
.route-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.route-card { position: relative; display: flex; flex-direction: column; min-height: 246px; padding: 22px 24px; text-align: left; border: 1px solid var(--line); border-radius: 18px; background: transparent; cursor: pointer; transition: transform .25s, background .25s, box-shadow .25s; }
.route-card:hover { background: white; box-shadow: var(--shadow); transform: translateY(-7px); }
.route-card--warm { background: #f5e3d8; }
.route-card > span { color: var(--ink-soft); font-family: Georgia, serif; font-size: var(--fs-xs); }
.route-card > i { display: grid; place-items: center; width: 66px; height: 66px; margin: 24px 0 28px; border-radius: 50%; background: var(--cream); font-size: 25px; font-style: normal; }
.route-card strong { font-size: var(--fs-lg); line-height: 1.35; }
.route-card small { max-width: 310px; margin-top: 8px; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.75; }
.route-card > em { position: absolute; top: 20px; right: 20px; padding: 5px 9px; color: var(--night); border-radius: 99px; background: var(--butter); font-size: var(--fs-3xs); font-style: normal; font-weight: 900; letter-spacing: .08em; }

/* Product */
.product-section { overflow: hidden; background: #dfe7db; }
.product-shell { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; }
.product-visual { position: relative; min-height: 650px; }
.hanger-line { position: absolute; top: 35px; left: 50%; width: 250px; height: 120px; border-top: 3px solid var(--ink); border-left: 3px solid var(--ink); border-radius: 120px 0 0; transform: translateX(-50%) rotate(-3deg); }
.sleep-shirt { position: absolute; top: 145px; left: 50%; width: 360px; height: 410px; border-radius: 44% 44% 18% 18% / 19% 19% 8% 8%; background: linear-gradient(130deg, #677d68, #99aa91); box-shadow: 0 40px 70px rgba(23,51,72,.18), inset -30px 0 50px rgba(31,62,54,.12); transform: translateX(-50%) rotate(-2deg); }
.sleep-shirt::before, .sleep-shirt::after { position: absolute; z-index: -1; top: 35px; width: 145px; height: 255px; border-radius: 55% 30% 22% 45%; background: #80937d; content: ""; }
.sleep-shirt::before { left: -88px; transform: rotate(19deg); }
.sleep-shirt::after { right: -88px; transform: scaleX(-1) rotate(19deg); }
.sleep-shirt > span { position: absolute; top: -2px; left: 50%; width: 105px; height: 45px; border-radius: 0 0 55px 55px; background: #dfe7db; transform: translateX(-50%); }
.sleep-shirt > i, .sleep-shirt > b { position: absolute; border: 1px dashed rgba(255,255,255,.3); border-radius: 50%; }
.sleep-shirt > i { top: 155px; left: 90px; width: 26px; height: 26px; }
.sleep-shirt > b { right: 76px; bottom: 92px; width: 38px; height: 38px; }
.product-sticker { position: absolute; z-index: 2; right: 2%; bottom: 8%; display: grid; place-items: center; width: 130px; height: 130px; color: var(--night); text-align: center; border-radius: 50%; background: var(--butter); font-size: var(--fs-xs); line-height: 1.4; transform: rotate(8deg); }
.product-sticker strong { font-size: var(--fs-base); }
.fabric-note { position: absolute; color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 800; }
.fabric-note i { display: block; color: var(--apricot); font-family: Georgia,serif; font-size: 25px; font-style: normal; }
.fabric-note-1 { top: 33%; left: 0; transform: rotate(-6deg); }
.fabric-note-2 { right: 0; top: 25%; text-align: right; transform: rotate(4deg); }
.product-copy h2 { font-size: clamp(44px, 5vw, 70px); }
.product-lead { max-width: 550px; margin: 28px 0; color: var(--ink-soft); font-size: var(--fs-md); }
.product-name { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid rgba(23,51,72,.18); border-bottom: 1px solid rgba(23,51,72,.18); font-weight: 800; }
.product-name span { padding: 3px 8px; border: 1px solid var(--sage-deep); border-radius: 99px; color: var(--sage-deep); font-size: var(--fs-2xs); }
.product-fit { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 20px; margin: 25px 0 34px; padding: 0; list-style: none; }
.product-fit li { position: relative; padding-left: 20px; font-size: var(--fs-sm); }
.product-fit li::before { position: absolute; top: 8px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--apricot); content: ""; }
.product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.details-toggle { padding: 4px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; font-size: var(--fs-xs); font-weight: 800; cursor: pointer; }
.details-toggle span { display: inline-block; margin-left: 8px; }
.tech-details { margin-top: 24px; padding: 20px; border: 1px solid rgba(23,51,72,.18); border-radius: 15px; background: rgba(255,255,255,.42); }
.tech-details p { margin: 0; font-size: var(--fs-sm); }
.tech-details small { display: block; margin-top: 8px; color: var(--ink-soft); font-size: var(--fs-2xs); }

/* Magazine */
.magazine-section { background: var(--paper); }
.magazine-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 50px; }
.magazine-heading h2 { font-size: clamp(38px, 4.6vw, 60px); }
.article-grid { display: grid; grid-template-columns: 1.25fr .8fr .8fr; gap: 15px; }
.article-card { overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: white; transition: transform .25s, box-shadow .25s; }
.article-card:hover { box-shadow: var(--shadow); transform: translateY(-7px); }
.article-card > a { display: grid; height: 100%; }
.article-card--feature > a { grid-template-columns: 1fr 1fr; }
.article-art { position: relative; display: grid; place-items: center; min-height: 260px; overflow: hidden; background: var(--cream); }
.brain-art { color: white; background: var(--night); }
.brain-art::before, .brain-art::after { position: absolute; width: 180px; height: 180px; border: 1px dashed rgba(255,255,255,.25); border-radius: 48% 52% 45% 55%; content: ""; }
.brain-art::after { width: 140px; height: 140px; transform: rotate(34deg); }
.brain-art span, .brain-art i { position: absolute; z-index: 2; padding: 5px 12px; border-radius: 99px; font-family: Georgia, serif; font-size: var(--fs-sm); font-style: normal; }
.brain-art span { top: 20%; left: 16%; color: var(--ink); background: var(--sage); }
.brain-art i { right: 12%; bottom: 22%; color: var(--night); background: var(--butter); }
.brain-art b { font-size: 70px; letter-spacing: .1em; }
.coffee-art { background: #f3d19b; }
.coffee-art i { font-size: 80px; font-style: normal; transform: rotate(-8deg); }
.coffee-art span { position: absolute; top: 22px; right: 25px; font-family: Georgia,serif; font-size: 22px; }
.coffee-art::after { position: absolute; right: 33%; bottom: 43px; width: 70px; height: 10px; border-radius: 50%; background: rgba(23,51,72,.14); content: ""; }
.door-art { color: white; background: #76929e; }
.door-art span, .door-art i { display: grid; place-items: center; width: 75px; height: 115px; border: 2px solid rgba(255,255,255,.6); font-style: normal; }
.door-art { grid-template-columns: auto auto auto; gap: 16px; }
.door-art b { color: var(--butter); font-size: 25px; }
.article-art--managed { color: var(--night); background: linear-gradient(135deg,#eef5ee,#f8efd9); }
.article-art--managed span { display: grid; place-items: center; width: 78px; height: 78px; border: 1px solid rgba(16,47,70,.18); border-radius: 50%; background: rgba(255,255,255,.55); font-family: Georgia,serif; font-size: 25px; }
.article-body { position: relative; padding: 25px; }
.article-body > span { color: var(--sage-deep); font-size: var(--fs-2xs); font-weight: 800; }
.article-body h3 { margin: 12px 0 8px; font-size: var(--fs-lg); line-height: 1.5; }
.article-body p { color: var(--ink-soft); font-size: var(--fs-xs); }
.article-body > i { position: absolute; right: 22px; bottom: 18px; font-style: normal; }
.article-note { display: flex; align-items: center; justify-content: flex-end; gap: 22px; margin: 24px 0 0; color: var(--ink-soft); font-size: var(--fs-xs); }
.article-note p { margin: 0; }

/* Stories */
.stories-section { color: white; background: #1d4b5e; }
.story-shell { display: grid; grid-template-columns: .7fr 1.3fr; gap: 90px; align-items: center; }
.story-intro > p:not(.eyebrow) { max-width: 430px; color: rgba(255,255,255,.62); }
.story-nav { display: flex; align-items: center; gap: 18px; margin-top: 45px; }
.story-nav button { display: grid; place-items: center; width: 42px; height: 42px; color: white; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: transparent; cursor: pointer; }
.story-nav button:hover { color: var(--night); background: var(--butter); }
.story-nav span { font-family: Georgia,serif; font-size: var(--fs-sm); }
.story-card { padding: 50px; color: var(--ink); border-radius: 30px; background: var(--cream); box-shadow: 0 30px 70px rgba(2,22,34,.22); transition: opacity .2s, transform .2s; }
.story-card.is-changing { opacity: 0; transform: translateX(10px); }
.story-person { display: flex; align-items: center; gap: 14px; }
.story-person > span { display: grid; place-items: center; width: 54px; height: 54px; color: white; border-radius: 50%; background: var(--apricot); font-family: Georgia,serif; font-size: 22px; }
.story-person strong, .story-person small { display: block; }
.story-person small { color: var(--ink-soft); font-size: var(--fs-xs); }
.story-card blockquote { margin: 35px 0; font-size: 26px; font-weight: 800; line-height: 1.55; letter-spacing: -.03em; }
.story-timeline { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; padding-top: 30px; border-top: 1px solid var(--line); }
.story-timeline span { color: var(--sage-deep); font-size: var(--fs-xs); font-weight: 800; }
.story-timeline p { color: var(--ink-soft); font-size: var(--fs-xs); }
.story-disclaimer { display: block; margin-top: 18px; color: var(--ink-soft); font-size: var(--fs-3xs); }

/* About */
.about-section { padding-bottom: 90px; background: #f0eadc; }
.about-shell { display: grid; grid-template-columns: 1fr 1fr; gap: 80px 90px; }
.about-statement > p:last-child { margin-top: 28px; color: var(--sage-deep); font-size: var(--fs-md); font-weight: 800; }
.about-copy { align-self: end; }
.about-copy p { margin: 0 0 18px; color: var(--ink-soft); font-size: var(--fs-base); }
.trust-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-grid > div { display: flex; flex-direction: column; justify-content: center; min-height: 175px; padding: 25px; border-right: 1px solid var(--line); }
.trust-grid > div:last-child { border-right: 0; }
.trust-grid strong { color: var(--night); font-family: Georgia, var(--font); font-size: 36px; line-height: 1.2; }
.trust-grid strong small { font-family: var(--font); font-size: var(--fs-sm); }
.trust-grid span { margin-top: 10px; color: var(--ink-soft); font-size: var(--fs-xs); }
.source-note { grid-column: 1 / -1; margin: -60px 0 0; color: var(--ink-soft); font-size: var(--fs-2xs); text-align: right; }

/* Professional */
.professional-section { padding-top: 80px; background: #f0eadc; }
.professional-shell { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; }
.professional-section h2 { font-size: clamp(38px,4vw,56px); }
.professional-copy p { margin-top: 0; color: var(--ink-soft); }
.research-details { grid-column: 1 / -1; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.research-details summary { display: flex; justify-content: space-between; padding: 22px 0; font-weight: 800; cursor: pointer; list-style: none; }
.research-details summary::-webkit-details-marker { display: none; }
.research-details summary span { color: var(--ink-soft); font-size: var(--fs-xs); }
.research-details > div { display: grid; grid-template-columns: repeat(2,1fr); gap: 40px; padding: 0 0 28px; color: var(--ink-soft); font-size: var(--fs-sm); }

/* Contact and footer */
.contact-section { color: white; background: var(--night-deep); }
.contact-night { position: relative; display: grid; place-items: center; min-height: 620px; overflow: hidden; }
/* 月亮移到右上角當夜空裡的月亮，不再壓在文字後面。
   原本 350px 的月亮正好落在標題後方，白字壓在淺黃上幾乎看不到。 */
.contact-night::before { position: absolute; top: 56px; right: 8%; width: 210px; height: 210px; border-radius: 50%; background: rgba(241,215,124,.95); box-shadow: 0 0 130px rgba(241,215,124,.22); content: ""; }
.contact-night::after { position: absolute; bottom: -160px; left: 50%; width: 950px; height: 440px; border-radius: 50% 50% 0 0; background: var(--night); transform: translateX(-50%); content: ""; }
.contact-star { position: absolute; z-index: 1; width: 4px; height: 4px; border-radius: 50%; background: white; box-shadow: 0 0 10px white; }
.star-1 { top: 19%; left: 15%; }.star-2 { top: 28%; right: 19%; }.star-3 { bottom: 22%; left: 23%; }
.contact-shell { position: relative; z-index: 2; display: grid; justify-items: center; max-width: 720px; text-align: center; }
.contact-section h2 { font-size: clamp(54px,7vw,90px); }
.contact-shell > p:not(.eyebrow) { max-width: 590px; color: rgba(255,255,255,.88); }
.contact-actions { display: flex; justify-content: center; gap: 12px; margin: 25px 0 17px; }
.contact-shell > small { color: rgba(255,255,255,.75); font-size: var(--fs-2xs); }
.site-footer { color: rgba(255,255,255,.7); background: #071b2b; }
.footer-top { display: grid; grid-template-columns: 1fr 1.2fr .8fr .8fr; gap: 50px; padding: 65px 0; }
.brand--footer { color: white; align-self: start; }
.footer-tagline { margin: 0; color: white; font-size: var(--fs-2xl); font-weight: 800; line-height: 1.35; letter-spacing: -.04em; }
.footer-links { display: grid; align-content: start; gap: 11px; font-size: var(--fs-xs); }
.footer-links strong { margin-bottom: 6px; color: white; }
.footer-links a, .footer-links button { padding: 0; color: rgba(255,255,255,.58); text-align: left; border: 0; background: none; cursor: pointer; }
.footer-links a:hover, .footer-links button:hover { color: var(--butter); }
.footer-bottom { display: flex; justify-content: space-between; gap: 30px; padding: 20px 0 35px; border-top: 1px solid rgba(255,255,255,.1); font-size: var(--fs-2xs); }
.footer-bottom p { margin: 0; }
.mobile-cta { display: none; }

/* Standalone topic pages */
.subpage-main { padding-top: 84px; }
.subpage-hero { position: relative; display: grid; align-items: center; min-height: 560px; overflow: hidden; padding: 110px 0 95px; background: var(--cream); }
.subpage-hero::after { position: absolute; right: -120px; bottom: -190px; width: 520px; height: 520px; border: 1px solid rgba(23,51,72,.12); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.15), 0 0 0 140px rgba(255,255,255,.08); content: ""; }
.subpage-hero-inner { position: relative; z-index: 1; }
.subpage-hero h1 { max-width: 920px; margin: 0; font-size: clamp(52px,6.2vw,88px); font-weight: 900; line-height: 1.13; letter-spacing: -.065em; }
.subpage-hero-inner > p:not(.eyebrow) { max-width: 650px; margin: 28px 0 32px; color: var(--ink-soft); font-size: var(--fs-md); line-height: 1.9; }
.subpage-hero--guide { background: linear-gradient(135deg,#f8f1df,#e9efdf); }
.subpage-hero--stories { color: white; background: #1d4b5e; }
.subpage-hero--stories .eyebrow { color: #cbdcae; }
.subpage-hero--stories .subpage-hero-inner > p:not(.eyebrow) { color: rgba(255,255,255,.68); }
.subpage-hero--articles { background: linear-gradient(135deg,#e7f1f3,#f8efd9); }
.subpage-hero--product { color: white; background: linear-gradient(135deg,#102f46,#1d4b5e); }
.subpage-hero--product .eyebrow { color: #cbdcae; }
.subpage-hero--product .subpage-hero-inner > p:not(.eyebrow) { color: rgba(255,255,255,.72); }
.subpage-hero--product::after { border-color: rgba(255,255,255,.16); box-shadow: 0 0 0 70px rgba(255,255,255,.05), 0 0 0 140px rgba(255,255,255,.03); }
@media (min-width: 901px) { .subpage-hero--product { min-height: calc(100vh - 84px); min-height: calc(100svh - 84px); } }
/* ⚠️ 2026-08-25 老闆指定：改用 journey-cta 那個背板的綠（#e8eee3）。
   原本是米色漸層 linear-gradient(135deg,#f0eadc,#f7f1e5)。
   ⚠️ journey-cta 這個元件本身已經從首頁、產品頁、about 頁拿掉了，
      所以這個顏色現在只剩這裡在用 —— 直接寫死色值，不要去 var 它那條規則，
      不然哪天有人把 journey-cta 整段刪掉，這一頁的底色會跟著不見。 */
.subpage-hero--about { background: #e8eee3; }
.subpage-hero--faq { background: linear-gradient(135deg,#eef2e8,#f7f1e5); }

/* 常見問題 */
.section--cream { background: var(--cream); }
.faq-list { margin-top: 46px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; font-size: var(--fs-md); font-weight: 800; line-height: 1.5; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span { flex: 0 0 auto; color: var(--ink-soft); font-size: var(--fs-md); transition: transform .2s; }
.faq-item[open] summary span { transform: rotate(45deg); }
.faq-item > div { max-width: 780px; padding: 0 0 26px; }
.faq-item p { margin: 0; color: var(--ink-soft); line-height: 1.9; }
.faq-item a { border-bottom: 1px solid currentColor; }
.home-directory .route-grid { grid-template-columns: repeat(3,1fr); align-items: stretch; }
.home-directory .route-card--shoulder { grid-column: span 2; min-height: 230px; color: white; border-color: transparent; background: linear-gradient(135deg,#173348,#315f67); box-shadow: 0 18px 45px rgba(16,47,70,.14); }
.home-directory .route-card--shoulder > i { color: var(--night); background: var(--butter); }
.home-directory .route-card--shoulder > span, .home-directory .route-card--shoulder small { color: rgba(255,255,255,.7); }
.home-promise { padding-top: 100px; }
.next-topic .route-grid { grid-template-columns: repeat(3,1fr); }
.next-topic .route-card { min-height: 270px; }
.stories-section--page { padding-top: 115px; }
.story-principles { background: var(--paper); }
.principle-grid, .usage-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 55px; }
.principle-grid > div, .usage-grid > div { min-height: 250px; padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: white; }
.principle-grid span, .usage-grid span { color: var(--apricot); font-family: Georgia,serif; font-size: var(--fs-sm); }
.principle-grid strong, .usage-grid strong { display: block; margin: 38px 0 12px; font-size: var(--fs-lg); }
.principle-grid p, .usage-grid p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.page-quiz-teaser { padding-top: 90px; }
.magazine-section--page { padding-top: 110px; }
.article-grid--library { grid-template-columns: repeat(3,1fr); }
.article-grid--library .article-card--feature { grid-column: span 2; }
.text-art span { position: relative; z-index: 1; font-size: 30px; font-weight: 900; line-height: 1.35; text-align: center; }
.text-art--blue { background: var(--sky); }.text-art--sage { background: var(--sage); }.text-art--butter { background: var(--butter); }.text-art--warm { background: #edc1a8; }.text-art--night { color: white; background: var(--night); }.text-art--cream { background: var(--cream); }
.article-note--page { justify-content: space-between; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.article-note--page strong { display: block; color: var(--ink); font-size: var(--fs-sm); }
.article-note--page p { margin-top: 4px; }
.managed-articles-section { background: #fbfaf5; }
.public-article { width: min(850px,calc(100% - 48px)); margin: 0 auto; padding: 150px 0 90px; }
.public-article > .text-button { margin-bottom: 42px; }
.public-article h1 { margin: 0; color: var(--night); font-family: Georgia,"Noto Serif TC",serif; font-size: 58px; line-height: 1.15; font-weight: 800; }
.public-article-subtitle { margin: 22px 0 0; color: var(--ink-soft); font-size: var(--fs-lg); line-height: 1.8; }
.public-article-meta { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0 0; color: var(--sage-deep); font-size: var(--fs-xs); font-weight: 800; }
.public-article-summary { margin: 42px 0; padding: 25px 28px; color: var(--ink); border-left: 5px solid var(--butter); background: #fbf7e8; font-size: var(--fs-md); line-height: 1.9; }
.public-article-content p { margin: 0 0 24px; color: var(--ink-soft); font-size: var(--fs-md); line-height: 2.05; overflow-wrap: anywhere; word-break: normal; }
.public-article-content ul,.public-article-content ol { margin: 0 0 28px 1.4em; padding: 0; color: var(--ink-soft); font-size: var(--fs-md); line-height: 2; }
.public-article-content li { margin: 6px 0; padding-left: 4px; overflow-wrap: anywhere; }
.public-article-content strong { color: var(--ink); font-weight: 900; }
.public-article-content em { color: var(--night); font-style: italic; }
.public-article .article-note { margin-top: 58px; }

/* Sleep facts lab */
.facts-hero { color: white; background: radial-gradient(circle at 78% 24%,rgba(183,217,232,.28),transparent 24%), linear-gradient(135deg,#0c2b40,#214e61); }
.facts-hero::after { border-color: rgba(255,255,255,.11); box-shadow: 0 0 0 70px rgba(255,255,255,.04),0 0 0 140px rgba(255,255,255,.025); }
.facts-hero .eyebrow { color: var(--butter); }
.facts-hero .subpage-hero-inner { width: var(--shell); margin: 0 auto; padding-right: 380px; }
.facts-hero .subpage-hero-inner > p:not(.eyebrow) { color: rgba(255,255,255,.72); }
.facts-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.facts-hero-tags span { padding: 7px 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; color: rgba(255,255,255,.72); font-size: var(--fs-2xs); }
.facts-bed { position: absolute; right: max(4vw,calc((100% - 1280px)/2)); bottom: 90px; width: 340px; height: 220px; border: 2px solid rgba(255,255,255,.48); border-radius: 28px; transform: rotate(4deg); }
.facts-bed::before { position: absolute; inset: 30px; border: 1px dashed rgba(255,255,255,.22); border-radius: 18px; content: ""; }
.facts-pillow { position: absolute; top: 25px; left: 25px; width: 105px; height: 70px; border-radius: 45%; background: var(--cream); box-shadow: inset -10px -7px 0 rgba(16,47,70,.08); transform: rotate(-5deg); }
.facts-moon { position: absolute; right: 42px; bottom: 27px; color: var(--butter); font-family: Georgia,serif; font-size: 62px; transform: rotate(-25deg); }
.facts-bed b, .facts-bed i { position: absolute; padding: 6px 10px; color: var(--night); border-radius: 99px; background: var(--butter); font-size: var(--fs-xs); font-style: normal; }
.facts-bed b { top: -18px; right: 65px; }.facts-bed i { bottom: 45px; left: -24px; background: var(--sky); }
.posture-section { background: #f8f3e8; }
.posture-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 55px; }
.posture-heading > div { flex: 1; }.posture-heading > p { max-width: 430px; margin: 0 0 8px; color: var(--ink-soft); }
.posture-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; }
.posture-card { position: relative; min-height: 370px; overflow: hidden; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: white; }
.posture-card--thought, .posture-card--supine, .posture-card--left, .posture-card--right { grid-column: span 2; }
.posture-card--thought { color: white; background: var(--night); }.posture-card--left { background: #dfead9; }.posture-card--right { background: #e5eff2; }.posture-card--supine { background: #f6e6b2; }
.posture-label { display: inline-flex; padding: 5px 10px; border: 1px solid currentColor; border-radius: 99px; font-size: var(--fs-2xs); font-weight: 900; opacity: .72; }
.posture-icon { position: absolute; top: 23px; right: 25px; display: grid; place-items: center; width: 55px; height: 55px; border-radius: 50%; background: rgba(255,255,255,.55); font-family: Georgia,serif; font-size: 25px; font-weight: 800; }
.posture-card--thought .posture-icon { color: var(--night); background: var(--butter); }
.posture-card h3 { max-width: 470px; margin: 68px 0 16px; font-size: 27px; line-height: 1.35; letter-spacing: -.035em; }
.posture-card p { max-width: 540px; margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }.posture-card--thought p { color: rgba(255,255,255,.7); }
.posture-card small { display: block; max-width: 540px; margin-top: 18px; color: var(--ink-soft); font-size: var(--fs-2xs); }.posture-card--thought small { color: rgba(255,255,255,.48); }
.posture-card > a { position: absolute; right: 28px; bottom: 24px; color: var(--butter); border-bottom: 1px solid currentColor; font-size: var(--fs-2xs); font-weight: 800; }
.fact-lab-section { color: white; background: #0b2639; }
.fact-lab-section .eyebrow { color: var(--butter); }.fact-lab-section .centered-heading > p:last-child { color: rgba(255,255,255,.58); }
.fact-card-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 55px; }
.fact-card { border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(255,255,255,.04); }
.fact-card summary { position: relative; display: grid; gap: 35px; min-height: 230px; padding: 25px; list-style: none; cursor: pointer; }
.fact-card summary::-webkit-details-marker { display: none; }
.fact-card summary > span { color: var(--butter); font-family: Georgia,serif; font-size: var(--fs-xs); }.fact-card summary > strong { max-width: 420px; font-size: var(--fs-lg); line-height: 1.5; }.fact-card summary > i { align-self: end; color: rgba(255,255,255,.5); font-size: var(--fs-2xs); font-style: normal; }
.fact-card[open] summary { min-height: auto; padding-bottom: 15px; }.fact-card[open] summary > i { display: none; }
.fact-answer { margin: 0 25px 25px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.13); }
.fact-answer > b { color: var(--butter); font-size: var(--fs-sm); }.fact-answer p { color: rgba(255,255,255,.66); font-size: var(--fs-xs); }.fact-answer a { display: inline-flex; gap: 12px; margin-top: 8px; padding-bottom: 2px; color: white; border-bottom: 1px solid rgba(255,255,255,.45); font-size: var(--fs-2xs); font-weight: 800; }
.sleep-experiment-section { background: var(--paper); }
.experiment-shell { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; }
.experiment-shell h2 { margin: 0; font-size: clamp(42px,5vw,68px); line-height: 1.2; letter-spacing: -.05em; }.experiment-shell > div:first-child > p:last-child { color: var(--ink-soft); }
.experiment-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.experiment-steps li { min-height: 260px; padding: 24px; border: 1px solid var(--line); border-radius: 19px; background: #f8f3e8; }.experiment-steps span { color: var(--apricot); font-family: Georgia,serif; font-size: var(--fs-xs); }.experiment-steps strong { display: block; margin: 70px 0 12px; font-size: var(--fs-md); }.experiment-steps p { color: var(--ink-soft); font-size: var(--fs-xs); }
.experiment-note { grid-column: 1 / -1; display: grid; grid-template-columns: .35fr 1.65fr; gap: 30px; margin-top: 5px; padding: 25px; border-radius: 17px; background: #edf2ea; }.experiment-note strong { font-size: var(--fs-base); }.experiment-note p { margin: 0; color: var(--ink-soft); font-size: var(--fs-xs); }
.source-drawer { grid-column: 1 / -1; margin-top: 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.source-drawer summary { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font-weight: 900; list-style: none; cursor: pointer; }.source-drawer summary::-webkit-details-marker { display: none; }.source-drawer summary span { color: var(--ink-soft); font-size: var(--fs-2xs); }
.source-drawer ul { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px 30px; margin: 0; padding: 0 0 20px; list-style: none; }.source-drawer a { color: var(--sage-deep); border-bottom: 1px solid rgba(107,135,108,.35); font-size: var(--fs-xs); }.source-drawer > p { max-width: 750px; padding-bottom: 18px; color: var(--ink-soft); font-size: var(--fs-2xs); }
.product-section--page { padding-top: 105px; }
.product-usage { background: var(--paper); }
.product-notes { background: #f0eadc; }
.product-notes-shell { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; }
.product-notes h2 { margin: 0; font-size: clamp(40px,4.8vw,64px); line-height: 1.2; letter-spacing: -.045em; }
.product-notes h3 { margin-top: 0; font-size: var(--fs-lg); }
.product-notes ul { padding-left: 20px; color: var(--ink-soft); }
.product-notes p { color: var(--ink-soft); }
.product-offer { display: grid; grid-template-columns: .7fr 1.3fr; gap: 20px; margin: 25px 0; padding: 22px; border: 1px solid rgba(23,51,72,.18); border-radius: 20px; background: rgba(255,255,255,.48); }
.product-price { display: flex; flex-direction: column; justify-content: center; padding-right: 20px; border-right: 1px solid var(--line); }
.product-price > span, .product-includes > span { color: var(--sage-deep); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; }
.product-price del { margin-top: 7px; color: var(--ink-soft); font-size: var(--fs-sm); text-decoration-thickness: 2px; text-decoration-color: rgba(178,109,80,.72); }
.product-price strong { margin: 5px 0 2px; color: var(--night); font-family: Georgia,var(--font); font-size: 42px; line-height: 1; }
.product-price strong small { margin-right: 4px; font-family: var(--font); font-size: var(--fs-sm); }
.product-price em { color: var(--ink-soft); font-size: var(--fs-2xs); font-style: normal; }
.product-includes ul { display: grid; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.product-includes li { display: grid; grid-template-columns: 30px 1fr; }
.product-includes li b { grid-row: 1 / 3; display: grid; place-items: center; width: 24px; height: 24px; color: white; border-radius: 50%; background: var(--sage-deep); font-size: var(--fs-3xs); }
.product-includes li strong { font-size: var(--fs-xs); }.product-includes li small { color: var(--ink-soft); font-size: var(--fs-3xs); }
.mobile-cta--purchase span { white-space: nowrap; }

/* Story-led conversion */
.journey-cta { overflow: hidden; background: #e8eee3; }
.journey-cta--warm { background: #f2ead9; }
.journey-shell { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 80px; }
.journey-copy h2 { max-width: 720px; margin: 0; font-size: clamp(40px,4.8vw,66px); line-height: 1.16; letter-spacing: -.05em; }
.journey-copy > p:not(.eyebrow) { max-width: 650px; margin: 25px 0 0; color: var(--ink-soft); }
.journey-path { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 34px 0 0; padding: 0; list-style: none; }
.journey-path li { min-height: 120px; padding: 17px; border: 1px solid rgba(23,51,72,.14); border-radius: 15px; background: rgba(255,255,255,.5); }
.journey-path span { color: var(--apricot); font-family: Georgia,serif; font-size: var(--fs-xs); }
.journey-path strong { display: block; margin-top: 24px; font-size: var(--fs-sm); }
.journey-card { position: relative; overflow: hidden; padding: 34px; color: white; border-radius: 28px; background: var(--night); box-shadow: 0 28px 70px rgba(13,42,60,.18); }
.journey-card::before { position: absolute; top: -85px; right: -75px; width: 220px; height: 220px; border: 1px dashed rgba(255,255,255,.18); border-radius: 50%; content: ""; }
.journey-card > span { position: relative; color: var(--butter); font-size: var(--fs-xs); font-weight: 900; letter-spacing: .1em; }
.journey-card > strong { position: relative; display: block; max-width: 330px; margin: 18px 0; font-size: var(--fs-xl); line-height: 1.45; }
.journey-card > p { position: relative; margin: 14px 0 24px; color: rgba(255,255,255,.66); font-size: var(--fs-xs); }
.journey-actions { position: relative; display: grid; gap: 9px; }
.journey-actions .button { width: 100%; min-height: 52px; }
.journey-actions > a:not(.button) { justify-self: center; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.35); font-size: var(--fs-xs); font-weight: 800; }
.journey-contact { position: relative; display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); }
.journey-contact a { display: grid; gap: 2px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.17); border-radius: 12px; background: rgba(255,255,255,.05); }
.journey-contact span { color: rgba(255,255,255,.55); font-size: var(--fs-3xs); }.journey-contact strong { font-size: var(--fs-xs); }
.journey-note { position: relative; display: block; margin-top: 14px; color: rgba(255,255,255,.45); font-size: var(--fs-3xs); }

/* Checkout */
.checkout-main { background: #f7f4ec; }
.checkout-hero { padding: 80px 0 52px; background: linear-gradient(135deg,#f0eadc,#e6eddf); }
.checkout-back { display: inline-block; margin-bottom: 38px; color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 800; }
.checkout-hero h1 { margin: 0; font-size: clamp(44px,5.4vw,72px); line-height: 1.15; letter-spacing: -.055em; }
.checkout-hero p:last-child { margin: 20px 0 0; color: var(--ink-soft); }
.checkout-progress { padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.checkout-progress-track { display: flex; align-items: center; justify-content: center; gap: 25px; }
.checkout-progress-track > div { display: grid; grid-template-columns: 34px auto; column-gap: 10px; opacity: .45; }
.checkout-progress-track > div.is-current { opacity: 1; }
.checkout-progress-track div > span { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; color: white; border-radius: 50%; background: var(--night); font-family: Georgia,serif; font-size: var(--fs-sm); }
.checkout-progress-track strong { font-size: var(--fs-xs); }.checkout-progress-track small { color: var(--ink-soft); font-size: var(--fs-3xs); }.checkout-progress-track > i { color: var(--apricot); font-style: normal; }
.checkout-section { padding-top: 80px; }
.checkout-layout { display: grid; grid-template-columns: .75fr 1.25fr; align-items: start; gap: 28px; }
.order-summary { position: sticky; top: 110px; overflow: hidden; padding: 26px; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: 0 20px 55px rgba(21,49,67,.08); }
.summary-art { position: relative; display: grid; place-items: center; min-height: 190px; margin: -26px -26px 26px; overflow: hidden; color: white; background: var(--night); }
.summary-art::before, .summary-art::after { position: absolute; width: 160px; height: 160px; border: 1px dashed rgba(255,255,255,.26); border-radius: 50%; content: ""; }
.summary-art::after { width: 105px; height: 105px; border-style: solid; transform: translate(65px,22px); }
.summary-art span { position: absolute; top: 22px; left: 22px; padding: 5px 10px; color: var(--night); border-radius: 99px; background: var(--butter); font-size: var(--fs-2xs); font-weight: 900; }
.summary-art i { position: relative; z-index: 1; font-size: 34px; font-style: normal; font-weight: 900; letter-spacing: .16em; }
.summary-heading h2 { margin: 0; font-size: 27px; line-height: 1.35; }.summary-heading > p:last-child { margin: 6px 0 0; color: var(--ink-soft); font-size: var(--fs-xs); }
.summary-items { display: grid; gap: 11px; margin: 25px 0; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; }
.summary-items li, .summary-total { display: flex; justify-content: space-between; gap: 20px; }
.summary-items span { font-size: var(--fs-xs); }.summary-items b { color: var(--ink-soft); font-size: var(--fs-xs); }
.summary-total { align-items: end; }.summary-total span { font-size: var(--fs-xs); }.summary-total strong { display: flex; flex-direction: column; align-items: flex-end; color: var(--night); font-family: Georgia,var(--font); font-size: 25px; }.summary-total strong small { color: var(--ink-soft); font-family: var(--font); font-size: var(--fs-2xs); font-weight: 700; text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(178,109,80,.72); }
.order-summary > small { display: block; margin-top: 15px; color: var(--ink-soft); font-size: var(--fs-3xs); line-height: 1.6; }
.summary-support { margin: 20px -26px -26px; padding: 19px 26px 22px; background: #eef3ec; }
.summary-support strong { display: block; font-size: var(--fs-xs); }.summary-support p { margin: 5px 0 12px; color: var(--ink-soft); font-size: var(--fs-2xs); }
.summary-support div { display: flex; flex-wrap: wrap; gap: 8px; }.summary-support a { padding: 7px 10px; border: 1px solid var(--line); border-radius: 99px; background: white; font-size: var(--fs-2xs); font-weight: 800; }
.checkout-form { display: grid; gap: 18px; }
.checkout-panel { padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: white; }
.checkout-panel-title { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 25px; }
.checkout-panel-title > span { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; color: white; border-radius: 50%; background: var(--sage-deep); font-family: Georgia,serif; font-size: var(--fs-xs); }
.checkout-panel-title h2 { margin: 0; font-size: 22px; line-height: 1.4; }.checkout-panel-title p { margin: 3px 0 0; color: var(--ink-soft); font-size: var(--fs-xs); }
.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.form-field { display: grid; gap: 7px; color: var(--ink); font-size: var(--fs-xs); font-weight: 800; }
.form-field--wide { grid-column: 1 / -1; }
.form-field > span small { color: var(--ink-soft); font-weight: 400; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 50px; padding: 12px 14px; color: var(--ink); border: 1px solid var(--line); border-radius: 11px; outline: none; background: #fffdf8; font-size: var(--fs-sm); transition: border .2s, box-shadow .2s; }
.form-field textarea { resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--sage-deep); box-shadow: 0 0 0 3px rgba(107,135,108,.13); }
.form-field > small, .form-hint { margin: 0; color: var(--ink-soft); font-size: var(--fs-3xs); font-weight: 400; }
.size-helper { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 20px 0 14px; padding: 18px; border: 1px solid rgba(107,135,108,.28); border-radius: 16px; background: #f1f6f0; }
.size-helper span { color: var(--sage-deep); font-size: var(--fs-2xs); font-weight: 900; letter-spacing: .12em; }
.size-helper strong { display: block; margin: 4px 0; color: var(--night); font-size: var(--fs-base); }
.size-helper p { margin: 0; color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.7; }
.size-helper .text-button { flex: 0 0 auto; color: var(--night); font-size: var(--fs-xs); white-space: nowrap; }
.size-chart { margin: 0 0 15px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fffdf8; }
.size-chart table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.size-chart caption { padding: 13px 16px; color: var(--night); text-align: left; font-weight: 900; }
.size-chart th, .size-chart td { padding: 10px 8px; border-top: 1px solid var(--line); text-align: center; }
.size-chart th:first-child { min-width: 92px; color: var(--ink); text-align: left; background: #f5f0e5; }
.size-chart p { margin: 0; padding: 12px 16px; color: var(--ink-soft); border-top: 1px solid var(--line); font-size: var(--fs-2xs); line-height: 1.7; }
.payment-choice { display: block; cursor: pointer; }
.payment-choice input { position: absolute; opacity: 0; pointer-events: none; }
.payment-choice > span { position: relative; display: grid; grid-template-columns: 45px 1fr; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #fffdf8; }
.payment-choice input:checked + span { border-color: var(--night); box-shadow: inset 0 0 0 1px var(--night); }
.payment-choice input:checked + span::after { position: absolute; top: 15px; right: 15px; color: var(--night); content: "✓"; }
.payment-choice i { grid-row: 1 / 3; align-self: center; color: var(--apricot); font-size: 26px; font-style: normal; }.payment-choice strong { font-size: var(--fs-sm); }.payment-choice small { color: var(--ink-soft); font-size: var(--fs-2xs); }
.payment-safety { margin: 16px 0; padding: 15px 17px; border-radius: 13px; background: #eef3ec; }
.payment-safety strong { font-size: var(--fs-xs); }.payment-safety p { margin: 5px 0 0; color: var(--ink-soft); font-size: var(--fs-2xs); }
.checkout-confirm { display: flex; align-items: flex-start; gap: 9px; margin: 20px 0; border-radius: 11px; font-size: var(--fs-xs); cursor: pointer; }.checkout-confirm input { margin-top: 5px; accent-color: var(--night); }
.checkout-submit { width: 100%; }
.checkout-submit-note { display: block; margin-top: 11px; color: var(--ink-soft); text-align: center; font-size: var(--fs-3xs); }
.checkout-integration-note { margin-top: 16px; padding: 16px; border: 1px solid #d3b65a; border-radius: 12px; background: #fff5cf; }
.checkout-integration-note strong { font-size: var(--fs-xs); }.checkout-integration-note p { margin: 5px 0 0; color: var(--ink-soft); font-size: var(--fs-2xs); }.checkout-integration-note code { padding: 1px 4px; border-radius: 4px; background: rgba(23,51,72,.08); }
.payment-steps { background: var(--night); color: white; }
.payment-steps .eyebrow { color: var(--butter); }.payment-steps .centered-heading > p:last-child { color: rgba(255,255,255,.6); }
.payment-step-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 55px; }
.payment-step-grid > div { min-height: 240px; padding: 24px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; }
.payment-step-grid span { color: var(--butter); font-family: Georgia,serif; font-size: var(--fs-xs); }.payment-step-grid strong { display: block; margin: 45px 0 10px; font-size: var(--fs-md); }.payment-step-grid p { margin: 0; color: rgba(255,255,255,.62); font-size: var(--fs-xs); }
.about-section--page { padding-top: 115px; }
.brand-values { background: var(--paper); }
.quiz-page-body { overflow: hidden; background: var(--paper); }
.quiz-page-body .quiz-dialog { position: fixed; inset: 0; }
.quiz-close { text-decoration: none; }

/* Quiz dialog */
.quiz-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; overflow-y: auto; color: var(--ink); border: 0; background: var(--paper); }
.quiz-dialog::backdrop { background: rgba(4,20,31,.75); backdrop-filter: blur(7px); }
.quiz-dialog[open] { animation: dialog-in .3s ease both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(20px); } }
.quiz-dialog-inner { display: grid; grid-template-rows: auto auto 1fr; min-height: 100%; }
.quiz-dialog-header { display: flex; align-items: center; justify-content: space-between; width: min(1080px, calc(100% - 48px)); margin: 0 auto; padding: 24px 0; }
.brand--dialog { color: var(--ink); }
.quiz-header-actions { display: flex; align-items: center; gap: 10px; }
.quiz-facts-link { padding: 8px 4px; border-bottom: 1px solid var(--ink); font-size: var(--fs-xs); font-weight: 800; }
.quiz-close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 25px; cursor: pointer; }
.quiz-progress-wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; width: min(760px, calc(100% - 48px)); margin: 10px auto 0; color: var(--ink-soft); font-size: var(--fs-xs); }
.quiz-progress { height: 3px; overflow: hidden; border-radius: 99px; background: #dde3e0; }
.quiz-progress i { display: block; width: 10%; height: 100%; border-radius: inherit; background: var(--apricot); transition: width .3s; }
.quiz-progress-wrap b { font-family: Georgia,serif; }
.quiz-form { display: grid; grid-template-rows: 1fr auto; }
.quiz-screen { display: none; width: min(760px, calc(100% - 48px)); margin: 0 auto; padding: 54px 0 35px; animation: screen-in .3s ease both; }
.quiz-screen.is-active { display: block; }
@keyframes screen-in { from { opacity: 0; transform: translateX(12px); } }
.quiz-kicker { margin: 0 0 12px; color: var(--sage-deep); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; }
.quiz-screen h2 { margin: 0 0 35px; font-size: clamp(38px,5vw,62px); line-height: 1.2; letter-spacing: -.05em; }
.quiz-screen--assessment h2 { max-width: 720px; font-size: clamp(34px,4vw,48px); }

/* 測驗第一頁（原本的「睡眠日常」）。題目頁刻意窄成 760px 的閱讀寬度，
   但情境卡與卡點星系是整頁版型，塞不進去，所以這一頁放寬到一般頁面的寬度。 */
.quiz-screen--guide { width: min(1180px, calc(100% - 48px)); }
.quiz-screen--guide > h2 { max-width: 760px; font-size: clamp(34px,4vw,52px); }
/* .result-intro 預設 margin: 0 auto，在這一頁的寬版面裡會被推到中間，
   和左邊的大標對不齊，所以這裡改成靠左 */
.quiz-screen--guide > .result-intro { max-width: 620px; margin-left: 0; }
.quiz-guide-block { margin-top: 66px; }
.quiz-guide-block .section-heading { margin-bottom: 34px; }
.quiz-guide-block h3 { margin: 0; font-size: clamp(28px,3.2vw,40px); font-weight: 800; line-height: 1.2; letter-spacing: -.04em; }
.quiz-guide-block .split-heading { margin-bottom: 34px; }
.quiz-guide-block--night { position: relative; overflow: hidden; padding: 58px 44px; color: white; border-radius: var(--radius); background: var(--night); }
.quiz-guide-block--night .constellation-shell { gap: 40px; }
.quiz-guide-block--night .constellation { min-height: 470px; }
.quiz-guide-block--night .constellation-copy > p:last-of-type { margin-bottom: 0; }
/* 對話框自己就是捲動容器，sticky 的參考點跟一般頁面不同，會黏在奇怪的位置 */
.quiz-guide-block .moon-progress { position: static; }
.quiz-guide-block .shoulder-check { margin-top: 60px; }

/* 已登入時取代手機欄位的那塊 */
.quiz-signed-in { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding: 18px 22px; border: 1px solid rgba(107,135,108,.4); border-radius: 16px; background: rgba(107,135,108,.1); }
.quiz-signed-in > span { display: grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; color: white; border-radius: 50%; background: var(--sage-deep); font-size: var(--fs-sm); font-weight: 900; }
.quiz-signed-in strong { display: block; font-size: var(--fs-md); }
.quiz-signed-in small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: var(--fs-xs); }
.quiz-screen h2[tabindex="-1"]:focus { outline: none; }
.quiz-options { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.quiz-options label { cursor: pointer; }
.quiz-options input { position: absolute; opacity: 0; pointer-events: none; }
.quiz-options label > span { position: relative; display: grid; grid-template-columns: 55px 1fr; grid-template-rows: auto auto; column-gap: 13px; align-items: center; min-height: 118px; padding: 21px; border: 1px solid var(--line); border-radius: 16px; background: white; transition: border .2s, transform .2s, background .2s; }
.quiz-options label:hover > span { border-color: var(--sage-deep); transform: translateY(-2px); }
.quiz-options input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.quiz-options input:checked + span { border-color: var(--night); background: #eef3ec; box-shadow: inset 0 0 0 1px var(--night); }
.quiz-options input:checked + span::after { position: absolute; top: 13px; right: 13px; display: grid; place-items: center; width: 22px; height: 22px; color: var(--night); border-radius: 50%; background: var(--butter); font-size: 12px; content: "✓"; }
.quiz-options label i { grid-row: 1 / 3; font-size: 30px; font-style: normal; }
.quiz-options label strong { font-size: var(--fs-base); }
.quiz-options label small { color: var(--ink-soft); font-size: var(--fs-2xs); }
.quiz-options--scale { grid-template-columns: repeat(5,1fr); }
.quiz-options--scale label > span { display: flex; justify-content: center; min-height: 72px; padding: 14px 10px; text-align: center; }
.quiz-options--scale label strong { font-size: var(--fs-sm); line-height: 1.5; }
.quiz-subquestion { margin-top: 28px; padding-top: 25px; border-top: 1px solid var(--line); }
.quiz-subquestion h3 { margin: 0 0 14px; font-size: var(--fs-md); line-height: 1.5; }
.quiz-subquestion h3 small { display: inline-block; margin-left: 8px; color: var(--ink-soft); font-size: var(--fs-2xs); font-weight: 500; }
.quiz-text-input { width: 100%; min-height: 52px; padding: 12px 16px; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; background: white; font: inherit; font-size: var(--fs-sm); outline: none; transition: border .2s, box-shadow .2s; }
.quiz-text-input::placeholder { color: var(--ink-soft); opacity: .7; }
.quiz-text-input:focus { border-color: var(--sage-deep); box-shadow: 0 0 0 3px rgba(107,135,108,.13); }
.quiz-options--chips { grid-template-columns: repeat(3,1fr); }
.quiz-options--chips label > span { display: flex; flex-direction: column; justify-content: center; min-height: 58px; padding: 11px 16px; text-align: center; }
.quiz-options--chips label strong { font-size: var(--fs-xs); line-height: 1.45; }
.quiz-options--chips label small { margin-top: 2px; }
.quiz-options--conditions { grid-template-columns: repeat(2,1fr); }
.quiz-controls { display: flex; justify-content: space-between; width: min(760px, calc(100% - 48px)); margin: 0 auto; padding: 20px 0 30px; border-top: 1px solid var(--line); }
.quiz-back, .quiz-next { min-width: 130px; min-height: 45px; border-radius: 99px; font-size: var(--fs-sm); font-weight: 800; cursor: pointer; }
.quiz-back { border: 0; background: transparent; }
.quiz-back:disabled { opacity: .25; cursor: not-allowed; }
.quiz-next { color: white; border: 0; background: var(--night); }
.quiz-next.is-shaking { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.quiz-result { max-width: 900px; text-align: center; }
.quiz-result h2 { margin-bottom: 18px; }
.quiz-result h2 span { color: var(--apricot); }
.quiz-lead-card { max-width: 780px; margin: 0 auto; padding: 44px; text-align: left; border: 1px solid var(--line); border-radius: 28px; background: white; box-shadow: var(--shadow); }
.quiz-lead-card h2 { margin-bottom: 18px; font-size: clamp(34px,4vw,54px); }
.quiz-lead-card > p { max-width: 620px; margin: 0 0 28px; color: var(--ink-soft); line-height: 1.9; }
.quiz-lead-form { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 20px; align-items: start; }
.quiz-lead-form > label { display: flex !important; flex-direction: column; gap: 8px; min-width: 0; margin: 0; color: var(--ink); font-size: var(--fs-sm); font-weight: 800; }
.quiz-lead-form > label:nth-child(3), .quiz-lead-form > small, .quiz-lead-form .quiz-lead-message, .quiz-lead-form > button { grid-column: 1 / -1; }
.quiz-lead-form > label > span { display: block; }
.quiz-lead-form input { box-sizing: border-box; display: block; width: 100%; min-height: 56px; padding: 0 17px; color: var(--ink); border: 1px solid var(--line); border-radius: 15px; background: var(--paper); font: inherit; font-size: var(--fs-md); line-height: 1.2; }
.quiz-lead-form input:focus { outline: 3px solid rgba(143,180,202,.35); border-color: var(--sage-deep); }
.quiz-lead-form small { display: block; margin: 0; color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.8; }
.quiz-lead-message { display: none; margin: 0; padding: 12px 14px; color: var(--night); border-radius: 14px; background: #f5ead3; font-size: var(--fs-sm); line-height: 1.7; }
.quiz-lead-message.is-visible { display: block; }
.quiz-lead-message.is-error { color: #7c2d12; background: #fff0e8; }
.quiz-lead-form button { justify-self: start; margin-top: 4px; border: 0; cursor: pointer; }
.quiz-lead-form button:disabled { opacity: .65; cursor: wait; }
.result-moon { display: grid; place-items: center; width: 86px; height: 86px; margin: -28px auto 12px; color: var(--butter); border-radius: 50%; background: var(--night); font-size: 46px; transform: rotate(-20deg); }
.result-intro { max-width: 650px; margin: 0 auto 26px; color: var(--ink-soft); }
.result-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; text-align: left; }
.result-grid > div { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.result-grid span { color: var(--sage-deep); font-size: var(--fs-xs); font-weight: 800; }
.result-grid ul { margin: 12px 0 0; padding: 0; list-style: none; }
.result-grid li { position: relative; margin: 8px 0; padding-left: 20px; font-size: var(--fs-xs); }
.result-grid li::before { position: absolute; left: 0; color: var(--apricot); content: "✓"; }
.result-note { margin-top: 12px; padding: 13px 20px; border-radius: 12px; background: #f5ead3; font-size: var(--fs-xs); }
.result-actions { display: flex; justify-content: center; gap: 10px; margin: 22px 0 14px; }
.result-navigation-offer { margin-top: 24px; padding: 22px; color: white; border-radius: 18px; background: var(--night); text-align: left; }
.result-navigation-offer > span { color: var(--butter); font-size: var(--fs-2xs); font-weight: 900; letter-spacing: .08em; }.result-navigation-offer > strong { display: block; margin: 8px 0; font-size: var(--fs-md); }.result-navigation-offer > p { margin: 0 0 15px; color: rgba(255,255,255,.65); font-size: var(--fs-xs); }
.result-navigation-actions { display: flex; flex-wrap: wrap; gap: 8px; }.result-navigation-actions a { padding: 9px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 99px; font-size: var(--fs-2xs); font-weight: 800; }.result-navigation-actions a:first-child { color: var(--night); border-color: var(--butter); background: var(--butter); }
.button-ghost-dark { border-color: var(--line); background: transparent; }
.quiz-result > small { color: var(--ink-soft); font-size: var(--fs-3xs); }
.toast { position: fixed; z-index: 200; bottom: 30px; left: 50%; padding: 12px 20px; color: white; border-radius: 99px; background: var(--night); box-shadow: var(--shadow); font-size: var(--fs-xs); opacity: 0; transform: translate(-50%,20px); pointer-events: none; transition: opacity .25s, transform .25s; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 1040px) {
  :root { --shell: min(calc(100% - 38px), 900px); }
  .nav-wrap { width: calc(100% - 38px); }
  .site-nav { gap: 18px; }
  .hero-content { width: calc(100% - 48px); }
  .brain-note { right: 3vw; bottom: 10%; }
  .sign-grid { grid-template-columns: repeat(3,1fr); }
  .sign-card--wide { grid-column: span 1; }
  .constellation-shell { grid-template-columns: 1fr; }
  .constellation-copy { max-width: 650px; }
  .quiz-card { grid-template-columns: .55fr 1fr; }
  .quiz-preview { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 16px; }
  .mini-report { margin: 0; }
  .step-layout { grid-template-columns: 260px 1fr; gap: 40px; }
  .shoulder-check { grid-template-columns: 1fr 1fr; }
  .shoulder-check-action { grid-column: 1 / -1; grid-template-columns: auto 1fr; }
  .shoulder-sticker { grid-row: 1 / 3; }
  .route-grid { grid-template-columns: repeat(2,1fr); }
  .product-shell { grid-template-columns: .9fr 1.1fr; gap: 35px; }
  .sleep-shirt { width: 280px; height: 360px; }
  .sleep-shirt::before, .sleep-shirt::after { width: 105px; height: 210px; }
  .sleep-shirt::before { left: -64px; }.sleep-shirt::after { right: -64px; }
  .article-grid { grid-template-columns: repeat(2,1fr); }
  .article-card--feature { grid-column: 1 / -1; }
  .home-directory .route-grid, .next-topic .route-grid, .principle-grid, .usage-grid { grid-template-columns: repeat(2,1fr); }
  .product-notes-shell { gap: 50px; }
  .facts-hero .subpage-hero-inner { width: var(--shell); margin: 0 auto; padding-right: 285px; }
  .facts-bed { right: 30px; width: 270px; height: 190px; }
  .posture-heading { gap: 30px; }
  .experiment-shell { grid-template-columns: 1fr; gap: 40px; }
  .experiment-steps, .experiment-note, .source-drawer { grid-column: auto; }
  .journey-shell { gap: 40px; }
  .journey-card { padding: 28px; }
  .checkout-layout { grid-template-columns: .9fr 1.1fr; }
  .payment-step-grid { grid-template-columns: repeat(2,1fr); }
  .story-shell { gap: 45px; }
  .story-card { padding: 34px; }
  .story-timeline { grid-template-columns: 1fr; }
  .about-shell { gap: 50px; }
  .footer-top { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 760px) {
  :root { --shell: calc(100% - 32px); --radius: 18px; }
  html { scroll-padding-top: 70px; }
  .section { padding: 82px 0; }
  .section-heading h2, .quiz-copy h2, .product-copy h2, .story-intro h2, .about-statement h2, .professional-section h2, .home-shoulder h2, .home-product h2, .product-lead-copy h2, .product-feature-section h2 { font-size: 39px; }
  .eyebrow { margin-bottom: 13px; }
  .site-header { background: linear-gradient(rgba(7,27,43,.42),transparent); }
  .site-header.is-scrolled { background: rgba(255,253,248,.94); }
  .site-header.is-menu-open { color: white !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .nav-wrap { width: calc(100% - 30px); height: 68px; }
  .site-header.is-menu-open .brand { position: relative; z-index: 3; color: white; }
  .brand-mark { width: 36px; height: 36px; border-radius: 10px; }
  .menu-toggle { z-index: 2; display: grid; align-content: center; gap: 6px; width: 42px; height: 42px; padding: 0 10px; color: inherit; border: 1px solid currentColor; border-radius: 50%; background: transparent; }
  .menu-toggle span:not(.sr-only) { display: block; width: 100%; height: 1px; background: currentColor; transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:nth-last-child(2) { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .site-nav { position: fixed; z-index: 1; top: 0; right: 0; bottom: auto; left: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; width: 100vw; height: 100vh; height: 100dvh; min-height: 100vh; padding: 92px 24px calc(22px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; color: white; background: linear-gradient(155deg,#071d2e,#123b50); font-size: 20px; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .25s, transform .25s; -webkit-overflow-scrolling: touch; }
  .site-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .site-nav::before { flex: 0 0 auto; margin-bottom: 8px; color: rgba(255,255,255,.48); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .18em; content: "今晚想先去哪裡？"; }
  .site-nav > a:not(.nav-product):not(.nav-quiz) { flex: 0 0 auto; width: 100%; padding: 10px 2px; border-bottom: 1px solid rgba(255,255,255,.11); font-size: clamp(17px,5.2vw,21px); line-height: 1.2; }
  .site-nav > a::after { display: none; }
  /* 手機版的下拉：跟桌機一樣要「點開才展開」，這是設計上就講好的行為。
     「找卡點」「睡眠專欄」是和「首頁」同一層的入口，不是分組標籤，所以字級、
     顏色、分隔線都跟旁邊的連結一致，只多一個開合用的箭頭。 */
  .site-nav .nav-group { flex: 0 0 auto; display: block; width: 100%; }
  .site-nav .nav-group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 2px; color: white; border-bottom: 1px solid rgba(255,255,255,.11); font-size: clamp(17px,5.2vw,21px); font-weight: 700; line-height: 1.2; text-align: left; }
  .site-nav .nav-group-toggle::after { display: none; }
  .site-nav .nav-group.is-current .nav-group-toggle { color: var(--butter); }
  .site-nav .nav-group-chevron { width: 14px; height: 14px; opacity: .55; }
  /* 兩個選擇器都要寫：桌機版的 .nav-group.is-open .nav-dropdown 是三個 class，
     權重贏過 .site-nav .nav-dropdown 的兩個。少了下面這條，桌機那個
     translateX(-50%) 會在手機生效，整組連結被推到畫面左邊看不見。 */
  .site-nav .nav-dropdown,
  .site-nav .nav-group.is-open .nav-dropdown { position: static; width: 100%; padding: 0; opacity: 1; transform: none; pointer-events: auto; }
  .site-nav .nav-dropdown { display: none; }
  .site-nav .nav-group.is-open .nav-dropdown { display: block; }
  .site-nav .nav-dropdown::before { display: none; }
  .site-nav .nav-dropdown-inner { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
  /* 子項縮排一格並稍微降一階字級，看得出是掛在上面那個入口底下 */
  .site-nav .nav-dropdown a { padding: 9px 2px 9px 20px; color: rgba(255,255,255,.86); border-bottom: 1px solid rgba(255,255,255,.09); border-radius: 0; }
  .site-nav .nav-dropdown a:hover { background: transparent; }
  .site-nav .nav-dropdown a[aria-current="page"] { color: var(--butter); background: transparent; }
  .site-nav .nav-dropdown-icon, .site-nav .nav-dropdown small { display: none; }
  .site-nav .nav-dropdown strong { font-size: clamp(15.5px,4.6vw,19px); font-weight: 600; line-height: 1.2; }
  .site-nav .nav-dropdown a[href$="articles.html"] { color: var(--butter); }
  .site-nav .nav-dropdown a[href$="articles.html"]::before { position: absolute; top: 50%; right: 2px; padding: 3px 7px; color: var(--night); border-radius: 99px; background: var(--butter); font-size: var(--fs-3xs); letter-spacing: .08em; transform: translateY(-50%); content: "有趣"; }
  /* 帳號那一組在手機抽屜裡就是普通一列，不是膠囊鈕。
     ⚠️ padding／border-radius／background 三樣都要明寫回來：上面那條桌機規則
     設了它們，而 .site-nav .nav-group-toggle 只設了 padding 與 border-bottom，
     沒被覆寫的圓角與底色會漏進手機版（看起來像抽屜裡卡了一顆半透明藥丸）。
     ⚠️ 這裡不必像旁邊的 .site-nav a.nav-member 那樣多加一個元素選擇器來搶權重：
     那一顆要贏的 .member-body .nav-member 寫在本檔「後面」，同分時後面的贏，
     所以它得靠 a.nav-member 加碼；帳號這一組的三條配色都寫在本檔「前面」，
     同分時這一條（後面）本來就贏。 */
  .site-nav .nav-account .nav-group-toggle { padding: 10px 2px; color: white; border: 0; border-bottom: 1px solid rgba(255,255,255,.11); border-radius: 0; background: transparent; font-weight: 700; }
  /* 登出鈕跟著子項一起縮排，長相與同一層的連結一致。 */
  .site-nav .nav-dropdown .nav-logout-form button { width: 100%; padding: 9px 2px 9px 20px; color: rgba(255,255,255,.86); border-bottom: 1px solid rgba(255,255,255,.09); border-radius: 0; background: transparent; font-size: clamp(15.5px,4.6vw,19px); font-weight: 600; line-height: 1.2; }
  .site-nav .nav-dropdown .nav-logout-form button:hover { background: transparent; }
  /* 底下兩顆是行動按鈕不是清單項目：文字置中，字級拉到跟其他項目同一階 */
  .site-nav .nav-product, .site-nav .nav-quiz { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 13px 18px; font-size: clamp(17px,5.2vw,21px); text-align: center; }
  /* 手機選單是深色的，但 .subpage-body / .member-body 那兩條會把會員中心刷成淺底，
     在這裡就變成淺灰底配白字。用 a.nav-member 提高權重壓過它們（那兩條都在本檔後面）。 */
  .site-nav a.nav-member { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-top: 18px; padding: 13px 18px; color: white; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); font-size: clamp(17px,5.2vw,21px); text-align: center; }
  .site-nav .nav-product { margin-top: 10px; }
  .site-nav .nav-product b { font-size: var(--fs-2xs); }
  .site-nav .nav-quiz { margin-top: 8px; }
  .subpage-body .menu-toggle[aria-expanded="true"] { color: white; }

  .subpage-main { padding-top: 68px; }
  .subpage-hero { min-height: 520px; padding: 85px 0 72px; }
  .subpage-hero::after { right: -220px; bottom: -250px; }
  .subpage-hero h1 { font-size: clamp(43px,12vw,60px); }
  .subpage-hero-inner > p:not(.eyebrow) { margin: 22px 0 26px; font-size: var(--fs-sm); }

  .facts-hero { min-height: 730px; padding-bottom: 220px; }
  .facts-hero .subpage-hero-inner { width: var(--shell); margin: 0 auto; padding-right: 0; }
  .facts-hero .subpage-hero-inner > p:not(.eyebrow) { max-width: 520px; }
  .facts-hero-tags { gap: 6px; }
  .facts-hero-tags span { padding: 5px 8px; font-size: var(--fs-3xs); }
  .facts-bed { right: 28px; bottom: 55px; width: 245px; height: 145px; }
  .facts-pillow { top: 18px; left: 18px; width: 85px; height: 55px; }
  .facts-moon { right: 30px; bottom: 15px; font-size: 45px; }
  .posture-heading { display: block; margin-bottom: 35px; }
  .posture-heading > p { margin-top: 22px; }
  .posture-grid { grid-template-columns: 1fr; }
  .posture-card--thought, .posture-card--supine, .posture-card--left, .posture-card--right { grid-column: auto; }
  .posture-card { min-height: 355px; padding: 22px; }
  .posture-card h3 { margin-top: 62px; font-size: 24px; }
  .posture-card > a { right: 22px; bottom: 20px; }
  .fact-card-grid { grid-template-columns: 1fr; margin-top: 35px; }
  .fact-card summary { min-height: 205px; padding: 22px; }
  .fact-answer { margin: 0 22px 22px; }
  .experiment-shell { display: block; }
  .experiment-steps { grid-template-columns: 1fr; margin-top: 35px; }
  .experiment-steps li { min-height: 175px; }
  .experiment-steps strong { margin-top: 35px; }
  .experiment-note { grid-template-columns: 1fr; margin-top: 12px; }
  .source-drawer { margin-top: 25px; }
  .source-drawer ul { grid-template-columns: 1fr; }

  .hero { min-height: 820px; height: 100svh; max-height: 920px; }
  .hero-image { background-position: 67% center; }
  .hero-overlay { background: linear-gradient(0deg, rgba(6,27,43,.92) 0%, rgba(6,27,43,.68) 48%, rgba(6,27,43,.12) 82%), linear-gradient(90deg, rgba(6,27,43,.25), transparent); }
  .hero-content { justify-content: flex-end; width: calc(100% - 32px); padding: 0 0 100px; }
  .hero h1 { max-width: 430px; font-size: clamp(48px,14vw,66px); letter-spacing: -.065em; }
  .hero-lead { max-width: 430px; margin: 20px 0 22px; line-height: 1.75; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .button { width: 100%; min-height: 52px; }
  .hero-reassurance { gap: 12px; margin-top: 18px; }
  .brain-note { top: 21%; right: 15px; bottom: auto; width: 145px; padding: 14px; }
  /* 便條是固定 145px 寬的裝飾元件，手機各降一級，避免字級撐破紙條 */
  .brain-note p { margin: 7px 0; font-size: var(--fs-2xs); }.brain-note strong { font-size: var(--fs-sm); }.brain-status { font-size: var(--fs-3xs); }
  .scroll-cue { display: none; }

  .split-heading { display: block; margin-bottom: 34px; }
  .heading-note { justify-content: flex-end; margin: 20px 7px 0 0; }
  .sign-grid { grid-template-columns: repeat(2,1fr); gap: 9px; }
  .sign-card { min-height: 255px; padding: 17px; border-radius: 14px; }
  .card-num { top: 14px; left: 15px; font-size: var(--fs-2xs); }
  .card-icon { top: 13px; right: 13px; width: 38px; height: 38px; font-size: 19px; }
  .sign-card strong { margin-top: 62px; font-size: var(--fs-md); }
  .sign-card small { font-size: var(--fs-2xs); }
  .card-check { right: 13px; bottom: 12px; font-size: var(--fs-3xs); opacity: 1; }
  .card-check i { width: 20px; height: 20px; }
  .sign-summary { grid-template-columns: auto 1fr; gap: 14px; padding: 17px; }
  .sign-summary p { font-size: var(--fs-xs); }
  .sign-summary .text-button { grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; padding-bottom: 5px; font-size: var(--fs-xs); }

  .constellation-section { padding-bottom: 50px; }
  .constellation-shell { gap: 35px; }
  .constellation-copy h2 { font-size: 43px; }
  .constellation { min-height: 470px; margin: 0 -10px; transform: scale(.9); }
  .orbit-1 { width: 255px; height: 255px; }.orbit-2 { width: 410px; height: 410px; }
  .orbit-center { width: 120px; height: 120px; }
  .factor { padding: 8px 11px; font-size: var(--fs-2xs); }
  .factor-2 { right: -3%; }.factor-4 { right: -5%; }.factor-8 { left: -3%; }

  .quiz-card { display: block; padding: 34px 20px; border-radius: 22px; }
  .quiz-clock { float: right; margin: -5px 0 10px 15px; }
  .clock-face { width: 100px; height: 100px; }
  .clock-face i { height: 30px; }.clock-face b { margin-top: 28px; font-size: 32px; }
  .quiz-clock > small { margin-top: -12px; font-size: var(--fs-3xs); }
  .quiz-copy h2 { font-size: 36px; }
  .quiz-copy > p:last-child { font-size: var(--fs-sm); }
  .quiz-preview { clear: both; display: block; padding-top: 22px; }
  .mini-report { margin-bottom: 12px; }

  .step-layout { display: block; margin-top: 40px; }
  .moon-progress { position: relative; top: 0; grid-template-columns: auto auto; grid-template-rows: auto auto auto; align-items: center; justify-content: center; column-gap: 20px; margin-bottom: 25px; padding: 20px; border-radius: 18px; }
  .moon-phase { grid-row: 1 / 4; width: 95px; height: 95px; margin: 0; }
  .moon-phase span { font-size: 58px; }.moon-progress strong { font-size: 24px; }.moon-progress small { min-height: 0; margin: 0; }
  .task-item { grid-template-columns: 62px 45px 1fr 24px; gap: 9px; min-height: 95px; }
  .task-icon { width: 42px; height: 42px; font-size: 20px; }.task-item strong { font-size: var(--fs-base); }.task-item small { font-size: var(--fs-2xs); }
  .shoulder-check { display: block; margin-top: 48px; padding: 28px 20px; border-radius: 20px; }
  .shoulder-check h3 { font-size: 31px; }
  .shoulder-flow { margin: 28px -5px; gap: 4px; }
  .shoulder-flow span { width: 86px; height: 86px; }
  .shoulder-flow b { font-size: 14px; }
  .shoulder-check-action { display: grid; grid-template-columns: 70px 1fr; justify-items: stretch; gap: 8px 10px; }
  .shoulder-sticker { grid-row: 1 / 3; width: 70px; height: 70px; margin: 0; }
  /* 按鈕文字 nowrap 又只有半欄寬，手機降一級避免溢出 */
  .shoulder-check-action .button { min-height: 52px; font-size: var(--fs-xs); }
  .shoulder-check-action small { text-align: center; }

  .route-heading h2 { font-size: 35px; }
  .route-grid { grid-template-columns: 1fr; }
  .home-directory .route-grid, .next-topic .route-grid, .principle-grid, .usage-grid { grid-template-columns: 1fr; }
  .route-card { display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto auto; column-gap: 15px; min-height: 120px; padding: 18px; }
  .route-card > span { position: absolute; top: 10px; left: 13px; }
  .route-card > i { grid-row: 1 / 3; width: 55px; height: 55px; margin: 9px 0 0; font-size: 23px; }
  .route-card > strong { align-self: end; }.route-card > small { align-self: start; }
  .home-directory { padding: 56px 0 68px; }
  .home-directory .route-heading { margin-bottom: 28px; }
  .home-directory .route-heading > p:last-child { line-height: 1.7; }
  .home-directory .route-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .home-directory .route-card--primary { display: flex; min-height: 170px; padding: 16px; }
  .home-directory .route-card--primary > i { width: 48px; height: 48px; margin: 22px 0 14px; font-size: 20px; }
  /* 手機兩欄卡片只有半個螢幕寬，標題降一級才不會每張都折成兩行 */
  .home-directory .route-card--primary > strong { align-self: auto; font-size: var(--fs-md); line-height: 1.35; }
  .home-directory .route-card--primary > small { align-self: auto; font-size: var(--fs-2xs); line-height: 1.55; }
  .home-directory .route-card--primary > b { position: absolute; right: 14px; bottom: 12px; display: block; }
  .home-directory .route-card--story { grid-column: 1 / -1; display: grid; grid-template-columns: 50px 1fr auto; grid-template-rows: auto auto; column-gap: 13px; min-height: 108px; }
  .home-directory .route-card--story > i { grid-row: 1 / 3; width: 46px; height: 46px; margin: 14px 0 0; }
  .home-directory .route-card--story > strong { align-self: end; }
  .home-directory .route-card--story > small { align-self: start; }
  .home-directory .route-card--story > b { position: static; grid-column: 3; grid-row: 1 / 3; align-self: center; }
  .home-directory .route-card--facts { grid-column: 1 / -1; display: grid; grid-template-columns: 64px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 15px; min-height: 190px; padding: 24px 18px; color: white; border-color: transparent; background: linear-gradient(145deg,#102f46,#22566a); box-shadow: 0 15px 35px rgba(7,27,43,.16); }
  .home-directory .route-card--facts > span { color: rgba(255,255,255,.45); }
  .home-directory .route-card--facts > em { top: 15px; right: 16px; }
  .home-directory .route-card--facts > i { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 54px; height: 54px; margin: 18px 0 0; color: var(--night); background: var(--butter); }
  .home-directory .route-card--facts > strong { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; padding: 32px 28px 4px 0; font-size: var(--fs-lg); line-height: 1.35; }
  .home-directory .route-card--facts > small { grid-column: 2; grid-row: 2; align-self: start; max-width: 440px; color: rgba(255,255,255,.68); font-size: var(--fs-2xs); line-height: 1.65; }
  .home-directory .route-card--facts > b { position: absolute; right: 18px; bottom: 18px; }
  .home-directory .route-card--shoulder { grid-column: 1 / -1; display: grid; grid-template-columns: 54px 1fr auto; grid-template-rows: auto auto; column-gap: 13px; min-height: 128px; padding: 20px 18px; }
  .home-directory .route-card--shoulder > em { top: 13px; right: 16px; }
  .home-directory .route-card--shoulder > i { grid-row: 1 / 3; width: 50px; height: 50px; margin: 18px 0 0; font-size: 20px; }
  .home-directory .route-card--shoulder > strong { align-self: end; padding-right: 38px; font-size: var(--fs-lg); line-height: 1.35; }
  .home-directory .route-card--shoulder > small { align-self: start; color: rgba(255,255,255,.68); font-size: var(--fs-2xs); line-height: 1.6; }
  .home-directory .route-card--shoulder > b { position: static; grid-column: 3; grid-row: 1 / 3; align-self: center; }
  .home-directory .route-card--secondary { display: none; }

  .product-shell { display: flex; flex-direction: column; gap: 15px; }
  .product-visual { width: 100%; min-height: 480px; transform: scale(.88); }
  .sleep-shirt { top: 110px; width: 270px; height: 330px; }
  .hanger-line { top: 0; }.product-sticker { right: 0; bottom: 2%; width: 110px; height: 110px; }
  .fabric-note-1 { top: 26%; }.fabric-note-2 { top: 20%; }
  .product-copy h2 { font-size: 43px; }
  .product-offer { grid-template-columns: 1fr; }
  .product-price { padding: 0 0 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .product-price strong { font-size: 38px; }
  .product-fit { grid-template-columns: 1fr; }
  .product-actions { display: grid; }

  .journey-shell { display: block; }
  .journey-copy h2 { font-size: 39px; }
  .journey-path { grid-template-columns: 1fr; margin-top: 28px; }
  .journey-path li { min-height: 88px; }
  .journey-path strong { margin-top: 12px; }
  .journey-card { margin-top: 32px; padding: 28px 22px; border-radius: 22px; }
  .journey-card > b { font-size: 34px; }
  .journey-contact { grid-template-columns: 1fr 1fr; }

  .checkout-hero { padding: 55px 0 38px; }
  .checkout-back { margin-bottom: 25px; }
  .checkout-hero h1 { font-size: 40px; }
  .checkout-progress-track { justify-content: space-between; gap: 6px; }
  .checkout-progress-track > div { grid-template-columns: 28px auto; column-gap: 6px; }
  .checkout-progress-track div > span { width: 28px; height: 28px; }
  .checkout-progress-track small { display: none; }
  .checkout-progress-track > i { font-size: 10px; }
  .checkout-section { padding-top: 45px; }
  .checkout-layout { display: block; }
  .order-summary { position: static; margin-bottom: 18px; }
  .summary-support { margin-right: -26px; margin-left: -26px; }
  .checkout-panel { padding: 22px 17px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field--wide { grid-column: auto; }
  .payment-step-grid { grid-template-columns: 1fr; margin-top: 35px; }
  .payment-step-grid > div { min-height: 170px; }

  .magazine-heading { display: block; }
  .magazine-heading .text-button { margin-top: 22px; }
  .article-grid { grid-template-columns: 1fr; }
  .article-card--feature { grid-column: auto; }
  .article-grid--library .article-card--feature { grid-column: auto; }
  .article-card--feature > a { grid-template-columns: 1fr; }
  .article-art { min-height: 220px; }
  .public-article { width: calc(100% - 34px); padding: 115px 0 70px; }
  .public-article h1 { font-size: 38px; }
  .public-article-subtitle { font-size: var(--fs-base); }
  .public-article-summary { padding: 20px; font-size: var(--fs-base); }
  .public-article-content p { font-size: var(--fs-base); }
  .article-note { display: grid; justify-content: stretch; gap: 9px; text-align: left; }
  .article-note .text-button { justify-content: space-between; padding-bottom: 5px; }
  .principle-grid, .usage-grid { margin-top: 35px; }
  .principle-grid > div, .usage-grid > div { min-height: 190px; padding: 23px; }
  .principle-grid strong, .usage-grid strong { margin-top: 28px; }

  .story-shell { display: block; }
  .story-intro { margin-bottom: 35px; }
  .story-nav { margin-top: 25px; }
  .story-card { padding: 25px 20px; border-radius: 20px; }
  .story-card blockquote { font-size: 20px; }
  .story-timeline { gap: 8px; }

  .about-shell { display: block; }
  .about-copy { margin-top: 40px; }
  .trust-grid { grid-template-columns: repeat(2,1fr); margin-top: 45px; }
  .trust-grid > div { min-height: 145px; padding: 18px; border-bottom: 1px solid var(--line); }
  .trust-grid > div:nth-child(2) { border-right: 0; }
  .trust-grid strong { font-size: 27px; }
  .source-note { margin: 16px 0 0; text-align: left; }
  .professional-shell { display: block; }
  .professional-copy { margin-top: 35px; }
  .research-details { margin-top: 40px; }
  .research-details > div { grid-template-columns: 1fr; gap: 5px; }
  .product-notes-shell { display: block; }
  .product-notes-shell > div:last-child { margin-top: 35px; }

  .contact-night { min-height: 620px; }
  .contact-night::before { top: 34px; right: 6%; width: 124px; height: 124px; }
  .contact-section h2 { font-size: 57px; }
  .contact-actions { display: grid; width: 100%; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 38px 20px; }
  .brand--footer, .footer-tagline { grid-column: span 1; }
  .footer-bottom { display: block; padding-bottom: 100px; }
  .footer-bottom span { display: block; margin-top: 12px; }
  .mobile-cta { position: fixed; z-index: 60; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); left: 12px; display: block; transition: transform .25s, opacity .25s; }
  .mobile-cta.is-hidden, .mobile-cta.is-menu-hidden { opacity: 0; transform: translateY(130%); pointer-events: none; }
  .mobile-cta button, .mobile-cta a { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 9px 19px; color: var(--night); border: 1px solid rgba(255,255,255,.7); border-radius: 99px; background: var(--butter); box-shadow: 0 12px 35px rgba(7,27,43,.27); }
  .mobile-cta span { padding: 4px 7px; color: white; border-radius: 99px; background: var(--night); font-size: var(--fs-3xs); }
  .mobile-cta strong { text-align: left; font-size: var(--fs-sm); }

  .quiz-dialog-header { width: calc(100% - 30px); padding: 15px 0; }
  .quiz-header-actions .nav-product { padding: 8px 11px; font-size: var(--fs-2xs); }
  .quiz-facts-link { font-size: var(--fs-2xs); }
  .quiz-progress-wrap, .quiz-screen, .quiz-controls { width: calc(100% - 30px); }
  .quiz-progress-wrap { margin-top: 0; }
  .quiz-screen { padding: 34px 0 25px; }
  .quiz-screen h2 { margin-bottom: 25px; font-size: 36px; }
  .quiz-screen--assessment h2 { font-size: 31px; }
  .quiz-screen--guide > h2 { font-size: 31px; }
  .quiz-guide-block { margin-top: 46px; }
  .quiz-guide-block--night { padding: 34px 20px; }
  .quiz-guide-block h3 { font-size: 26px; }
  .quiz-options { grid-template-columns: 1fr; }
  .quiz-options label > span { min-height: 82px; padding: 14px 16px; }
  .quiz-options label i { font-size: 25px; }
  .quiz-options--scale, .quiz-options--chips, .quiz-options--conditions { grid-template-columns: repeat(2,1fr); }
  .quiz-options--scale label > span, .quiz-options--chips label > span { min-height: 54px; padding: 10px 9px; }
  .quiz-options--scale label:last-child:nth-child(odd), .quiz-options--conditions label:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .quiz-subquestion { margin-top: 22px; padding-top: 19px; }
  .quiz-subquestion h3 { font-size: var(--fs-base); }
  .quiz-subquestion h3 small { display: block; margin: 3px 0 0; }
  .quiz-controls { padding: 14px 0 calc(20px + env(safe-area-inset-bottom)); }
  .quiz-result { text-align: left; }
  .quiz-lead-card { padding: 26px 18px; border-radius: 22px; }
  .quiz-lead-card h2 { font-size: 34px; }
  .quiz-lead-form { grid-template-columns: 1fr; }
  .quiz-lead-form button { justify-self: stretch; }
  .quiz-result .result-moon { margin: -16px 0 12px; }
  .result-grid { grid-template-columns: 1fr; }
  .result-actions { display: grid; }
  .result-navigation-offer { padding: 18px; }
  .result-navigation-actions { display: grid; }
  .quiz-result > small { display: block; text-align: center; }
}

@media (max-width: 390px) {
  .hero { min-height: 760px; }
  .hero-content { padding-bottom: 82px; }
  .hero h1 { font-size: 45px; }
  .hero-lead { font-size: var(--fs-sm); }
  .hero-reassurance span:last-child { display: none; }
  .brain-note { top: 18%; }
  .sign-grid { grid-template-columns: 1fr; }
  .sign-card { min-height: 220px; }
  .constellation { transform: scale(.82); margin: -30px -35px; }
  .task-item { grid-template-columns: 50px 39px 1fr 22px; }.task-time { font-size: var(--fs-3xs); }.task-icon { width: 38px; height: 38px; }
  .shoulder-flow { transform: scale(.9); margin-right: -25px; margin-left: -25px; }
  .shoulder-check-action { grid-template-columns: 1fr; }
  .shoulder-sticker { display: none; }
  .product-visual { transform: scale(.78); margin: -45px 0; }
  .journey-contact { grid-template-columns: 1fr; }
  .trust-grid strong { font-size: 23px; }
  .quiz-facts-link { display: none; }
}

/* Consent, account and privacy */
.privacy-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px 14px; }
.privacy-links a,.privacy-links button { padding:0; border:0; color:inherit; background:none; font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.consent-layer { position:fixed; inset:0; z-index:1200; padding:20px; display:flex; align-items:flex-end; justify-content:center; pointer-events:none; background:rgba(11,35,49,0); transition:.25s ease; }
.consent-layer.is-visible { pointer-events:auto; background:rgba(11,35,49,.34); }
.consent-card { width:min(920px,100%); padding:22px 24px; display:grid; grid-template-columns:1fr auto; gap:25px; align-items:center; border:1px solid rgba(255,255,255,.18); border-radius:22px; color:#fff; background:linear-gradient(145deg,#102f46,#214e61); box-shadow:0 24px 80px rgba(8,28,40,.35); transform:translateY(130%); transition:.32s cubic-bezier(.2,.8,.2,1); }
.consent-layer.is-visible .consent-card { transform:translateY(0); }
.consent-card > div:first-child > span { color:var(--butter); font-size: var(--fs-2xs); letter-spacing:.12em; }
.consent-card h2 { margin:6px 0 7px; font-family:var(--serif); font-size:22px; font-weight:500; }
.consent-card p { max-width:650px; margin:0 0 5px; color:rgba(255,255,255,.7); font-size: var(--fs-xs); line-height:1.65; }
.consent-card a { color:var(--butter); font-size: var(--fs-2xs); text-decoration:underline; text-underline-offset:3px; }
.consent-actions { display:flex; gap:8px; }
.consent-actions button { min-width:132px; padding:12px 15px; border:1px solid rgba(255,255,255,.28); border-radius:99px; color:#fff; background:transparent; font-size: var(--fs-xs); cursor:pointer; }
.consent-actions button:last-child { border-color:var(--butter); color:var(--ink); background:var(--butter); font-weight:700; }
.account-main { width:var(--shell); min-height:800px; margin:0 auto; padding:155px 0 100px; display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center; }
.account-intro h1 { margin:8px 0 23px; font-family:var(--serif); color:var(--night); font-size:clamp(42px,5vw,70px); line-height:1.08; font-weight:500; }
.account-intro > p:not(.eyebrow) { max-width:500px; color:var(--muted); line-height:1.9; }
.account-intro ul { margin:25px 0 0; padding:0; display:grid; gap:10px; list-style:none; }
.account-intro li { display:flex; gap:10px; color:#5e726d; font-size: var(--fs-xs); }
.account-intro li::before { content:"✓"; color:#3d8274; font-weight:800; }
.account-card { padding:42px; border:1px solid var(--line); border-radius:28px; background:rgba(255,255,255,.78); box-shadow:var(--shadow); }
.account-card h2 { margin:5px 0 25px; font-family:var(--serif); color:var(--night); font-size:29px; font-weight:500; }
.account-card form { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.account-card label:not(.account-check) { display:grid; gap:7px; color:#52666a; font-size: var(--fs-xs); }
.account-card label:not(.account-check):nth-child(2),.account-card label:not(.account-check):nth-child(4),.account-check,.account-card button { grid-column:1/-1; }
.account-card input[type="text"],.account-card input[type="email"],.account-card input[type="tel"],.account-card input[type="password"] { width:100%; padding:13px 14px; border:1px solid #d9e0dc; border-radius:10px; outline:none; background:#fffdfa; }
.account-card input:focus { border-color:#78a89d; box-shadow:0 0 0 3px rgba(120,168,157,.13); }
.account-card label small { color:#8a9693; font-size: var(--fs-3xs); }
.account-check { display:flex; align-items:flex-start; gap:9px; color:#667774; font-size: var(--fs-2xs); line-height:1.65; }
/* 固定尺寸並禁止被 flex 拉伸，不管外層表單怎麼寫都不會再變形 */
.account-check input { flex:0 0 auto; width:17px; height:17px; margin-top:3px; accent-color:var(--night); }
.account-check a { color:#2f7669; text-decoration:underline; }
.account-card button { width:100%; margin-top:3px; }
.account-note { margin:18px 0 0; color:#778582; font-size: var(--fs-2xs); text-align:center; }
.account-note a { color:#2f7669; text-decoration:underline; }

/* 「用 LINE 繼續」入口（登入頁／註冊頁第 1 步）。
   class 名刻意是 .button-line-login 而不是 .button-line —— 後者早就存在，
   指的是「用 var(--line) 這個框線色的按鈕」，跟 LINE 這個品牌完全無關。
   借用它會讓兩種意思共用一個名字，而下一個要改框線色的人不會知道自己動到了 LINE 按鈕。
   #06c755 是 LINE 官方的品牌綠，與 .line-bind（結帳頁的加好友卡片）同一個值。 */
.line-login { margin-top:22px; }
/* 「或」的左右兩條線：用 flex 的兩個 ::before/::after 撐開，不用背景圖也不用固定寬度 */
.line-login-or { display:flex; align-items:center; gap:12px; margin:0 0 14px; color:#9aa7a4; font-size: var(--fs-3xs); }
.line-login-or::before, .line-login-or::after { content:''; flex:1; height:1px; background:var(--line); }
.button-line-login { width:100%; gap:10px; color:#fff; border-color:#06c755; background:#06c755; box-shadow:0 12px 28px rgba(6,199,85,.22); }
.button-line-login:hover { box-shadow:0 16px 36px rgba(6,199,85,.32); }
/* 文字版的 LINE 標記。刻意不用圖檔：多一個檔案就多一個要跟著版本號走的東西，
   而這顆按鈕本來就已經是滿版的品牌綠，識別度不靠那顆圖示。 */
.line-login-mark { padding:2px 7px; border-radius:6px; background:rgba(255,255,255,.22); font-size: var(--fs-3xs); font-weight:800; letter-spacing:.06em; }

/* 會員中心的 LINE 綁定狀態。唯讀，沒有解除綁定（計劃 A5）。 */
.member-line-status { margin:10px 0 0; }
.member-line-tag { display:inline-block; padding:4px 11px; border:1px solid rgba(255,255,255,.28); border-radius:999px; color:rgba(255,255,255,.72); font-size: var(--fs-3xs); }
.member-line-tag.is-bound { color:#0b3f24; border-color:#06c755; background:#06c755; }
.privacy-main { padding-top:85px; }
.privacy-hero { min-height:480px; display:grid; place-items:center; color:#fff; background:radial-gradient(circle at 75% 25%,rgba(240,216,125,.2),transparent 22%),linear-gradient(140deg,#102f46,#235469); }
.privacy-hero > div { width:var(--shell); }
.privacy-hero .eyebrow { color:var(--butter); }
.privacy-hero h1 { max-width:800px; margin:8px 0 20px; font-family:var(--serif); font-size:clamp(43px,6vw,78px); line-height:1.08; font-weight:500; }
.privacy-hero p:not(.eyebrow) { max-width:650px; color:rgba(255,255,255,.72); line-height:1.8; }
.privacy-hero span { display:inline-block; margin-top:25px; padding:6px 10px; border:1px solid rgba(255,255,255,.2); border-radius:99px; color:rgba(255,255,255,.62); font-size: var(--fs-3xs); }
.privacy-content { width:min(900px,calc(100% - 48px)); margin:80px auto; display:grid; }
.privacy-content article { padding:30px 0; display:grid; grid-template-columns:65px 1fr; gap:25px; border-bottom:1px solid var(--line); }
.privacy-content article > span { color:#71a397; font-family:var(--serif); font-size:23px; }
.privacy-content h2 { margin:0 0 11px; font-family:var(--serif); color:var(--night); font-size:25px; font-weight:500; }
.privacy-content p { margin:0 0 8px; color:#667573; font-size: var(--fs-sm); line-height:1.9; }
.privacy-callout { width:var(--shell); margin:0 auto 90px; padding:45px; display:flex; align-items:center; justify-content:space-between; gap:30px; border-radius:28px; background:#e5f0ea; }
.privacy-callout h2 { margin:5px 0 8px; font-family:var(--serif); color:var(--night); font-size:30px; font-weight:500; }
.privacy-callout p:not(.eyebrow) { margin:0; color:#657773; }
.result-page { min-height:100vh; padding:40px; display:grid; place-items:center; background:radial-gradient(circle at 75% 20%,rgba(240,216,125,.32),transparent 22%),linear-gradient(145deg,#edf3ed,#f8f2e7); }
.result-page-card { width:min(620px,100%); padding:48px; border:1px solid var(--line); border-radius:28px; background:#fffdfa; box-shadow:var(--shadow); text-align:center; }
.result-page-card > span:first-child { width:68px; height:68px; margin:0 auto 20px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--night); font-family:var(--serif); font-size:30px; }
.result-page-card h1 { margin:6px 0 15px; font-family:var(--serif); color:var(--night); font-size:35px; font-weight:500; }
.result-page-card > p:not(.eyebrow) { color:var(--muted); line-height:1.8; }
.result-page-card dl { margin:25px 0; padding:15px 20px; border-radius:15px; background:#f1f5f1; text-align:left; }
.result-page-card dl div { padding:8px 0; display:flex; justify-content:space-between; gap:20px; border-bottom:1px solid #dfe6e1; }
.result-page-card dl div:last-child { border-bottom:0; }
.result-page-card dt { color:#7b8985; font-size: var(--fs-2xs); }
.result-page-card dd { margin:0; font-size: var(--fs-xs); font-weight:700; }
.result-page-card > div { display:flex; justify-content:center; align-items:center; gap:18px; margin-top:25px; }
.result-page-card > div > a:not(.button) { color:#58736c; font-size: var(--fs-xs); text-decoration:underline; }
.result-page-card > small { display:block; margin-top:18px; color:#8b9693; font-size: var(--fs-3xs); line-height:1.7; }
.order-result-body { background:#f7f4ec; }
.order-result-page { min-height:100vh; padding:120px 20px 60px; display:grid; place-items:center; background:linear-gradient(145deg,#edf3ed,#f8f2e7); }
.order-result-card { width:min(760px,100%); padding:42px; border:1px solid var(--line); border-radius:28px; background:#fffdf8; box-shadow:var(--shadow); }
.order-result-loading { margin-bottom:16px; color:var(--ink-soft); font-size: var(--fs-xs); font-weight:800; }
.order-result-status { text-align:center; }
.order-result-icon { width:68px; height:68px; margin:4px auto 18px; display:grid; place-items:center; color:#fff; border-radius:50%; background:var(--night); font-size:34px; font-weight:900; }
/* ★ 綠色只給「錢真的收到了」。處理中／確認中／查不到一律維持深藍——
   那三種都可能最後是沒付成功，而一個綠勾勾會讓客人以為已經付掉了，然後不再回來看。 */
.order-result-icon.is-paid { background:#1f9d55; box-shadow:0 12px 28px rgba(31,157,85,.32); }
.order-result-icon.is-failed { background:#c0392b; box-shadow:0 12px 28px rgba(192,57,43,.28); }
.order-result-status h1 { margin:6px 0 12px; color:var(--night); font-family:var(--serif); font-size:38px; font-weight:500; }
.order-result-status .detail { margin:0 auto 26px; max-width:560px; color:var(--ink-soft); line-height:1.8; }
.order-result-summary { margin-top:24px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; }
.summary-row { display:flex; justify-content:space-between; gap:24px; padding:15px 18px; border-bottom:1px solid var(--line); }
.summary-row:last-child { border-bottom:0; }
.summary-row span { color:var(--ink-soft); font-size: var(--fs-xs); font-weight:800; }
.summary-row strong { color:var(--night); text-align:right; font-size: var(--fs-sm); }
.order-result-buyer { margin-top:20px; padding:22px; border-radius:18px; background:#eef3ec; }
.order-result-buyer h2 { margin:0 0 14px; color:var(--night); font-family:var(--serif); font-size:24px; font-weight:500; }
.order-result-buyer dl { margin:0; display:grid; gap:10px; }
.order-result-buyer dl div { display:grid; grid-template-columns:110px 1fr; gap:12px; }
.order-result-buyer dt { color:var(--ink-soft); font-size: var(--fs-xs); font-weight:800; }
.order-result-buyer dd { margin:0; color:var(--ink); font-size: var(--fs-sm); font-weight:700; }
.order-result-actions { margin-top:24px; display:flex; justify-content:center; align-items:center; gap:18px; }
.order-result-actions > a:not(.button) { color:#58736c; font-size: var(--fs-xs); text-decoration:underline; }

/* 付款完成頁的手機版：把上下留白收掉、卡片吃滿寬、重要數字放大。
   改版前 .order-result-page 的 120px 上留白是為了讓開固定的導覽列，
   但在手機上那等於先送掉半個螢幕，卡片被擠成中間一小塊，
   金額與訂單編號要瞇著眼看——2026-08-05 老闆實測後回報。 */
@media (max-width:640px) {
  .order-result-page { padding:78px 12px 32px; place-items:start center; }
  .order-result-card { padding:24px 18px; border-radius:22px; }
  .order-result-icon { width:56px; height:56px; margin-bottom:14px; font-size:28px; }
  .order-result-status h1 { margin:4px 0 10px; font-size:30px; }
  .order-result-status .detail { margin-bottom:20px; }

  /* 訂單摘要：手機上左右對排會把長字串擠成兩三行，改成上下堆疊。 */
  .summary-row { padding:12px 14px; flex-direction:column; align-items:flex-start; gap:4px; }
  .summary-row strong { text-align:left; font-size:var(--fs-base); word-break:break-all; }

  .order-result-buyer { padding:18px 16px; }
  .order-result-buyer h2 { font-size:21px; }
  /* 110px 的標籤欄在窄螢幕會把值擠掉，改成自適應。 */
  .order-result-buyer dl div { grid-template-columns:88px 1fr; gap:10px; }

  .order-result-actions { flex-direction:column; gap:12px; }
  .order-result-actions .button { width:100%; }
}
.nav-member { padding:9px 12px; border:1px solid rgba(255,255,255,.35); border-radius:99px; background:rgba(255,255,255,.08); font-weight:800; }
.site-header.is-scrolled .nav-member,.subpage-body .nav-member { border-color:var(--line); background:rgba(255,255,255,.5); }
/* 會員頁的「會員中心」按鈕用實心配色。掛點原本是 header 上的 .member-site-header，
   但導覽列改由 site-nav.js 產生後那個 class 沒了，改掛在頁面自己的 body class 上。 */
.member-body .nav-member { color:var(--night); border-color:var(--butter); background:var(--butter); }
.nav-logout-form { margin:0; }
.nav-logout-form button { padding:9px 12px; color:inherit; border:1px solid currentColor; border-radius:99px; background:rgba(255,255,255,.05); cursor:pointer; font:inherit; font-weight:800; }
.member-body { background:linear-gradient(145deg,#edf3ed,#f8f2e7); }
/* padding-top 是替固定導覽列留的位置（2026-08-13 起登入／註冊頁也掛導覽列了）。
   原本是 38px，導覽列會直接壓在左欄那張深色卡片的標題上。
   數值沿用 .member-dashboard 那一組（桌機 128 / 手機 112），那是同一條導覽列的高度。
   ⚠️ 手機那一段寫在 .member-auth 自己現有的 @media (max-width:760px) 裡，
      不要挪去別的斷點：760px 才是這個版面收成單欄的地方。
   min-height:100vh 加上內距不會撐破——全站 * { box-sizing: border-box }。 */
.member-auth { width:min(1080px,calc(100% - 36px)); min-height:100vh; margin:0 auto; padding:128px 0 60px; display:grid; grid-template-columns:.95fr 1.05fr; align-items:center; gap:28px; }
.member-auth-story { min-height:650px; padding:42px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; color:#fff; border-radius:34px; background:radial-gradient(circle at 78% 18%,rgba(240,216,125,.26),transparent 25%),linear-gradient(145deg,#102f46,#25586b); box-shadow:var(--shadow); }
.member-auth-story .brand { align-self:flex-start; }
.member-auth-story h1 { margin:8px 0 18px; font-family:Georgia,"Noto Serif TC",serif; font-size:clamp(40px,5vw,68px); line-height:1.12; font-weight:500; }
.member-auth-story p:not(.eyebrow) { max-width:500px; color:rgba(255,255,255,.72); line-height:1.9; }
.member-card { padding:42px; border:1px solid var(--line); border-radius:30px; background:rgba(255,253,248,.92); box-shadow:var(--shadow); }
.member-card h2 { margin:4px 0 24px; color:var(--night); font-family:Georgia,"Noto Serif TC",serif; font-size:32px; font-weight:500; }
.member-card form { display:grid; gap:15px; }
.member-card label:not(.account-check) { display:grid; gap:7px; color:#52666a; font-size: var(--fs-xs); font-weight:800; }
/* 這裡一定要限定型別。原本是 .member-card input 全包，連勾選框都吃到
   width:100% 與內距，會被拉成一整條橫的方塊，把同意文字擠開。 */
.member-card input:not([type="checkbox"]):not([type="radio"]),.member-card select,.member-card textarea { width:100%; padding:13px 14px; color:var(--ink); border:1px solid #d9e0dc; border-radius:11px; outline:none; background:#fffdfa; font:inherit; }
.member-card textarea { resize:vertical; line-height:1.75; }
.member-card input:not([type="checkbox"]):not([type="radio"]):focus,.member-card select:focus,.member-card textarea:focus { border-color:#78a89d; box-shadow:0 0 0 3px rgba(120,168,157,.13); }
.member-alert { margin:0 0 17px; padding:12px 14px; color:#37685e; border-radius:12px; background:#e2f1eb; font-size: var(--fs-xs); font-weight:700; }
.member-alert--error { color:#925943; background:#f8e8df; }
.member-topbar { width:min(1240px,calc(100% - 36px)); margin:0 auto; padding:24px 0; display:flex; align-items:center; justify-content:space-between; }
.member-topbar form button { padding:9px 14px; color:var(--night); border:1px solid var(--line); border-radius:99px; background:#fffdfa; cursor:pointer; font-size: var(--fs-xs); font-weight:800; }
.member-dashboard { width:min(1240px,calc(100% - 36px)); margin:0 auto; padding:128px 0 80px; }
.member-hero { padding:46px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; border-radius:32px; color:#fff; background:linear-gradient(145deg,#102f46,#24566b); box-shadow:var(--shadow); }
.member-hero .eyebrow { color:var(--butter); }
.member-hero h1 { max-width:780px; margin:6px 0 14px; font-family:Georgia,"Noto Serif TC",serif; font-size:clamp(34px,4.6vw,58px); line-height:1.12; font-weight:500; }
.member-hero p:not(.eyebrow) { margin:0; color:rgba(255,255,255,.68); font-size: var(--fs-sm); }
.member-grid { margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.member-panel { min-width:0; padding:26px; border:1px solid var(--line); border-radius:24px; background:rgba(255,253,248,.92); box-shadow:0 18px 45px rgba(21,49,67,.08); }
.member-panel--wide { grid-column:1/-1; }
.member-panel > header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.member-panel h2 { margin:0; color:var(--night); font-family:Georgia,"Noto Serif TC",serif; font-size:26px; font-weight:500; }
.member-panel header > span,.member-panel header > a { color:#658078; font-size: var(--fs-xs); font-weight:800; }
.member-list { display:grid; gap:10px; }
.member-item { padding:15px 16px; border:1px solid rgba(23,51,72,.12); border-radius:16px; background:#fffdfa; }
.member-item time { display:block; color:#82908c; font-size: var(--fs-2xs); font-weight:800; }
.member-item strong { display:block; margin-top:4px; color:var(--night); font-size: var(--fs-base); }
.member-item p { margin:5px 0 0; color:#60736f; font-size: var(--fs-xs); line-height:1.7; }
.member-service-replies { margin-top:12px; padding:12px; display:grid; gap:9px; border-radius:14px; background:#eef7f2; border:1px solid rgba(169,209,194,.55); }
.member-reply-title { margin:0 !important; color:#3f8074 !important; font-size: var(--fs-2xs) !important; font-weight:900; letter-spacing:.14em; }
.member-reply { padding:10px 11px; border-radius:12px; background:#fffdfa; border:1px solid rgba(23,51,72,.08); }
.member-reply > div { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.member-reply strong { margin:0; color:var(--night); font-size: var(--fs-xs); }
.member-reply time { color:#82908c; font-size: var(--fs-3xs); }
.member-reply p { margin-top:6px !important; white-space:pre-wrap; color:#516862 !important; }
.member-empty { margin:0; padding:18px; color:#7c8987; border:1px dashed var(--line); border-radius:16px; background:rgba(255,255,255,.5); font-size: var(--fs-sm); }
.member-table { overflow:auto; }
.member-table table { width:100%; border-collapse:collapse; min-width:780px; }
.member-table th,.member-table td { padding:13px 12px; border-bottom:1px solid var(--line); text-align:left; font-size: var(--fs-xs); }
.member-table th { color:#6a817b; font-size: var(--fs-2xs); letter-spacing:.08em; }
.member-table td strong { display:block; color:var(--night); }
.member-table td small { display:block; margin-top:2px; color:#87938f; }
.member-table a { color:#2f7669; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.member-form-page { width:min(720px,calc(100% - 36px)); min-height:100vh; margin:0 auto; padding:128px 0 80px; display:grid; align-items:center; }

/* ==================================================================
   會員中心兩欄骨架（2026-08-13 改版，計劃 C4／D3）

   ★ 這一段是第二波三頁（個人檔案、訂單與交易、測驗紀錄）的共用地基。
     那三頁只准用這些 class，不准改這裡 —— 一人加一份就是後台
     fragments 被複製出多份副本的那個老問題。

   斷點只有一個：900px。版面收成單欄、側欄變成頂部橫向捲動的分頁列、
   內距縮小，全部寫在同一個 @media 裡。
   ⚠️ 要改斷點就三處一起改，不可以只改其中一個 ——
      「摘要已經搬走、版面還是兩欄」那種壞法沒有錯誤訊息，只是很醜。
      這裡刻意不沿用會員登入頁那一段的 760px：那是 hero／表單卡的斷點，
      跟「側欄＋內容何時擠不下」是兩件事。
   ================================================================== */
.member-shell { width:min(1240px,calc(100% - 36px)); margin:0 auto; padding:128px 0 80px; display:grid; grid-template-columns:248px minmax(0,1fr); align-items:start; gap:22px; }

.member-side { position:sticky; top:96px; padding:20px 18px; display:grid; gap:18px; border:1px solid var(--line); border-radius:24px; background:rgba(255,253,248,.92); box-shadow:0 18px 45px rgba(21,49,67,.08); }
/* 頂端只有名字與遮罩手機 —— 不放頭像，連姓名縮寫圓標都不放（老闆裁示 D2）。 */
.member-side-head { display:grid; gap:3px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.member-side-head strong { color:var(--night); font-size: var(--fs-base); font-weight:800; }
.member-side-head span { color:#82908c; font-size: var(--fs-2xs); font-weight:800; letter-spacing:.04em; }
/* 側欄的資訊層級（2026-08-14 重做）
   ------------------------------------------------------------------
   五個一級項目（會員中心首頁／個人資料／我的睡眠紀錄／我的訂單／交易與退款查詢）
   共用 .member-side-link，字級與字重一致；子項目 .member-side-sublink 小一級並縮排。
   改版前大類只是灰色的群組標題，比底下的連結還輕 —— 層級是反的。

   「我的睡眠紀錄」的收合交給原生的 details／summary，這裡不寫任何隱藏規則：
   用 display:none 去藏子項目會讓它們退出 tab 順序，只用鍵盤的人就到不了那兩頁。 */
.member-side-nav { display:grid; gap:2px; }
.member-side-link { display:block; padding:11px 12px; border-radius:12px; color:var(--night); font-size: var(--fs-base); font-weight:900; }
.member-side-link:hover { color:var(--night); background:rgba(23,51,72,.05); }
.member-side-link:focus-visible { outline:2px solid var(--night); outline-offset:2px; }
.member-side-link.is-active { color:var(--night); background:var(--butter); }

/* summary 預設是 list-item，會多一個瀏覽器畫的三角形；換成自己的箭頭好對齊。 */
.member-side-summary { display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer; list-style:none; }
.member-side-summary::-webkit-details-marker { display:none; }
.member-side-summary::after { content:""; width:7px; height:7px; margin-right:2px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .15s ease; }
.member-side-toggle[open] > .member-side-summary::after { transform:translateY(1px) rotate(-135deg); }
/* 展開時大類自己也要看得出來（子頁的高亮在子項目上，大類只做「這一組是打開的」）。 */
.member-side-summary.is-open { background:rgba(23,51,72,.05); }

.member-side-sub { display:grid; gap:2px; padding:2px 0 6px; }
.member-side-sublink { display:block; padding:8px 12px 8px 26px; border-radius:10px; color:#42585c; font-size: var(--fs-2xs); font-weight:800; }
.member-side-sublink:hover { color:var(--night); background:rgba(23,51,72,.05); }
.member-side-sublink:focus-visible { outline:2px solid var(--night); outline-offset:2px; }
.member-side-sublink.is-active { color:var(--night); background:var(--butter); }

.member-main { min-width:0; display:grid; align-content:start; gap:16px; }
/* shell 的 th:replace="${content}" 會把整頁內容換成「一個」元素，於是上面那個 gap
   只作用在標題、提示、內容這三者之間，內容裡的多張卡片彼此貼在一起。
   ⚠️ 選擇器只能是 > div：.member-main 的直接子元素固定是
   header.member-main-head、p.member-alert、以及各頁 <div th:fragment="content">。
   MemberShellSpacingTest 釘住「每一頁的 content 根元素都是 div」，改成別的標籤會紅。 */
.member-main > div { display:grid; align-content:start; gap:16px; }
/* ⚠️ 那一格底下的卡片一定要 min-width:0（2026-09-21 B1）★
   grid 項目的 min-width 預設是 auto，也就是「不可以比內容還窄」。
   .member-table table 有 min-width:780px，所以只要卡片裡有表格，
   那張表就會把整欄撐開到 780px 以上 —— 整頁跟著變寬，
   手機瀏覽器把整頁縮小，連上面的圖卡與標題都變小，
   而 .member-table { overflow:auto } 的橫向捲動從頭到尾沒有機會生效。
   實測：390px 下 documentElement.scrollWidth 是 818，加上這一條之後回到 390，
   表格改在卡片內自己橫向捲動。
   ⚠️ 這不是某一頁的問題：/member/collected-cards、/member/sleep-tests、
      /member/orders、/member/transactions 只要有資料就是同一個形狀。
   對應計劃：backend/docs/dev/2026-09-18-會員中心圖卡與肩頸紀錄合併.md（B1） */
.member-main > div > * { min-width:0; }
.member-main-head { padding:0 4px; }
.member-main-head h1 { margin:0; color:var(--night); font-family:Georgia,"Noto Serif TC",serif; font-size:clamp(26px,3.2vw,36px); line-height:1.18; font-weight:500; }
.member-main-head p { margin:7px 0 0; color:#60736f; font-size: var(--fs-sm); }

/* 卡片沿用既有的 .member-card（登入／註冊頁在用同一支），只在會員中心裡收緊尺寸。
   選擇器多一層是刻意的：改這裡不會動到登入頁那張 42px 的大卡。 */
.member-main .member-card { padding:24px 26px; border-radius:22px; box-shadow:0 18px 45px rgba(21,49,67,.08); }
.member-main .member-card h2 { margin:0; font-size:23px; }
.member-card-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 16px; margin-bottom:15px; }
.member-card-head h2,.member-card-head h3 { margin:0; color:var(--night); font-family:Georgia,"Noto Serif TC",serif; font-size:23px; font-weight:500; }
.member-card-head p { flex:1 0 100%; margin:0; color:#82908c; font-size: var(--fs-2xs); }
.member-card-head a { color:#2f7669; font-size: var(--fs-xs); font-weight:800; text-decoration:underline; text-underline-offset:3px; }

/* 表單一列：左標籤右欄位。
   ⚠️ 這是一個 <div>，不是 <label> —— .member-card label 那一條已經把 label 設成
      單欄 grid，兩者疊在一起會拿到不預期的 gap。標籤放進左邊那一格裡面。 */
.member-form-row { display:grid; grid-template-columns:136px minmax(0,1fr); align-items:start; gap:8px 18px; padding:14px 2px; border-bottom:1px solid rgba(23,51,72,.08); }
.member-form-row > :first-child { padding-top:12px; color:#52666a; font-size: var(--fs-xs); font-weight:800; }
.member-form-row > :first-child small { display:block; margin-top:3px; color:#8a9895; font-weight:700; }
.member-form-row:last-of-type { border-bottom:0; }
.member-form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:18px; }
.member-form-actions .button { margin:0; }

/* 訂單狀態分頁。同一列橫向捲動，格數以後會變（D1 明說「以後再決定」）。 */
.member-tabs { display:flex; gap:7px; overflow-x:auto; padding:6px; border:1px solid var(--line); border-radius:16px; background:rgba(255,253,248,.92); scrollbar-width:thin; }
.member-tab { flex:0 0 auto; padding:9px 15px; border-radius:11px; color:#52666a; font-size: var(--fs-xs); font-weight:800; white-space:nowrap; }
.member-tab:hover { color:var(--night); background:rgba(23,51,72,.05); }
.member-tab:focus-visible { outline:2px solid var(--night); outline-offset:2px; }
.member-tab.is-active { color:var(--night); background:var(--butter); }
.member-tab small { margin-left:6px; opacity:.7; font-weight:800; }

.member-order-card { padding:18px 20px; display:grid; gap:12px; border:1px solid rgba(23,51,72,.12); border-radius:18px; background:#fffdfa; }
.member-order-card > header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; }
.member-order-card > header strong { color:var(--night); font-size: var(--fs-sm); }
.member-order-card > header time { color:#82908c; font-size: var(--fs-2xs); font-weight:800; }
.member-order-card dl { margin:0; display:grid; gap:6px; }
.member-order-card dl > div { display:grid; grid-template-columns:78px minmax(0,1fr); gap:10px; font-size: var(--fs-xs); }
.member-order-card dt { margin:0; color:#8a9895; }
.member-order-card dd { margin:0; color:#42585c; }
.member-order-card > footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid rgba(23,51,72,.08); }
.member-order-card > footer strong { color:var(--night); font-size: var(--fs-sm); }

.member-badge { display:inline-block; padding:4px 11px; border:1px solid rgba(23,51,72,.16); border-radius:999px; color:#42585c; background:rgba(23,51,72,.05); font-size: var(--fs-3xs); font-weight:900; letter-spacing:.04em; white-space:nowrap; }
.member-badge--wait { color:#8a5a2b; border-color:rgba(233,158,119,.55); background:#fbeadf; }
.member-badge--ok { color:#2f6a4f; border-color:rgba(107,135,108,.5); background:#e3f1e8; }
.member-badge--off { color:#6d7b79; border-color:rgba(23,51,72,.14); background:rgba(23,51,72,.04); }

/* 空狀態刻意只有一句文案，沒有插圖 —— 專案沒有現成的插圖資產，
   為了一張圖去外面找一張是「順手做的事」裡最容易出事的那一種。 */
.member-empty-state { margin:0; padding:30px 20px; color:#7c8987; border:1px dashed var(--line); border-radius:18px; background:rgba(255,255,255,.5); font-size: var(--fs-sm); text-align:center; }

.member-search { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.member-search input { flex:1 1 220px; min-width:0; padding:11px 14px; color:var(--ink); border:1px solid #d9e0dc; border-radius:11px; outline:none; background:#fffdfa; font:inherit; font-size: var(--fs-xs); }
.member-search input:focus { border-color:#78a89d; box-shadow:0 0 0 3px rgba(120,168,157,.13); }
.member-search button { flex:0 0 auto; padding:11px 18px; color:var(--night); border:1px solid var(--night); border-radius:11px; background:var(--butter); cursor:pointer; font:inherit; font-size: var(--fs-xs); font-weight:800; }

/* 首頁的摘要卡列。兩欄，收成單欄的時機跟整個外框一致。 */
.member-summary { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.member-summary .member-card { display:grid; align-content:start; gap:10px; }
.member-summary-value { margin:0; color:var(--night); font-size: var(--fs-lg); font-weight:800; line-height:1.35; }
.member-summary-note { margin:0; color:#60736f; font-size: var(--fs-xs); line-height:1.7; }
.member-summary-more { color:#2f7669; font-size: var(--fs-xs); font-weight:800; text-decoration:underline; text-underline-offset:3px; }

.member-contact-actions { display:flex; flex-wrap:wrap; gap:10px; }
/* .button-line 原本是設計給深色底的（白字＋半透明白框），改版後它站在白卡片上，
   照原樣用會變成「白底白字」—— 看不見，而且沒有任何錯誤。
   換成 LINE 官方綠，配色沿用既有的 .member-line-tag.is-bound。 */
.member-main .button-line { color:#0b3f24; border-color:#06c755; background:#06c755; }
.member-main .button-light { border-color:var(--line); }

@media (max-width:900px) {
  /* 只剩內容一欄。側欄整塊收起來之後 .member-shell 只有 .member-main 一個 grid item，
     所以 gap 不會在畫面上留下任何空隙（gap 只出現在項目之間）—— 這裡刻意保留它，
     日後有人在 shell 底下多放一塊時間距才不會變成 0。 */
  .member-shell { grid-template-columns:1fr; gap:16px; padding:112px 0 60px; }

  /* ★ 手機版不顯示側欄（AI 工程師 2026-09-09 裁示 A1-a）★

     它以前在這個寬度會變成「名字＋遮罩手機號 ＋ 一排橫向捲動的膠囊鈕」，
     佔掉第一屏相當大的面積，而那六個去處與名字在漢堡選單裡本來就有 ——
     是重複資訊，不是唯一入口。

     ⚠️ 前提是漢堡選單裡真的有那六項：site-nav.js 的 ACCOUNT_MENU 少一項，
        那一頁在手機上就整個進不去，而畫面上不會有任何錯誤。
        SiteNavAccountMenuMatchesSideNavTest 把兩邊綁在一起，只改一邊會被抓到。
     ⚠️ 用 display:none 是刻意的：整塊都不要，不是「藏起來但仍在 tab 順序上」。
        留在無障礙樹裡的話，只用鍵盤的人會走過一整排看不見的連結。
        （這與「把 checkbox 收起來」那條規則不衝突 —— 那條講的是
        「表單欄位仍然會被送出、被閘門擋下」，這裡沒有任何東西會被送出。） */
  .member-side { display:none; }

  .member-main-head { padding:0; }
  .member-main .member-card { padding:20px 18px; border-radius:18px; }
  .member-form-row { grid-template-columns:1fr; gap:6px; padding:13px 0; }
  .member-form-row > :first-child { padding-top:0; }
  .member-summary { grid-template-columns:1fr; }
  .member-order-card { padding:16px; }
  .member-order-card dl > div { grid-template-columns:72px minmax(0,1fr); }
  .member-search button { width:100%; }
}

@media (max-width:760px) { .consent-card { grid-template-columns:1fr; gap:15px; padding:20px; } .consent-actions { flex-direction:column-reverse; } .consent-actions button { width:100%; } .account-main { padding:120px 0 70px; grid-template-columns:1fr; gap:45px; } .account-card { padding:28px 22px; } .account-card form { grid-template-columns:1fr; } .account-card label:not(.account-check),.account-card button { grid-column:1; } .privacy-hero { min-height:540px; } .privacy-content article { grid-template-columns:42px 1fr; gap:15px; } .privacy-callout { padding:30px 24px; align-items:flex-start; flex-direction:column; } .result-page { padding:20px; } .result-page-card { padding:35px 22px; } .privacy-links { width:100%; justify-content:flex-start; } }

@media (max-width:760px) { .nav-logout-form button { width:100%; padding:14px 0; color:white; border-color:rgba(255,255,255,.35); } .member-auth { grid-template-columns:1fr; padding:112px 0 34px; } .member-auth-story { min-height:360px; padding:28px 22px; border-radius:26px; } .member-card { padding:28px 22px; border-radius:24px; } .member-topbar { padding:18px 0; } .member-dashboard { padding-top:112px; } .member-form-page { padding-top:112px; } .member-hero { display:block; padding:30px 22px; border-radius:26px; } .member-hero .button { width:100%; margin-top:18px; } .member-grid { grid-template-columns:1fr; } .member-panel--wide { grid-column:auto; } .member-panel { padding:20px; } .member-panel > header { display:block; } .member-panel header > span,.member-panel header > a { display:inline-block; margin-top:8px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 外掛式彈窗（OTP／設定密碼）與結帳第 2 頁 —— 計劃 2026-07-31-結帳流程改版 */
.awb-modal { width: min(460px, calc(100% - 32px)); padding: 0; color: var(--ink); border: 0; border-radius: 24px; background: transparent; }
.awb-modal::backdrop { background: rgba(4,20,31,.6); backdrop-filter: blur(4px); }
.awb-modal[open] { animation: dialog-in .25s ease both; }
.awb-modal-card { display: grid; gap: 14px; padding: 30px; border-radius: 24px; background: white; box-shadow: 0 30px 70px rgba(21,49,67,.22); }
.awb-modal-card h2 { margin: 0; font-size: 24px; line-height: 1.35; }
.awb-modal-lead { margin: 0; color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.7; }
.awb-modal-actions { display: grid; gap: 12px; justify-items: center; margin-top: 4px; }
.awb-modal-actions .button { width: 100%; justify-content: center; }
.awb-modal-actions .text-button { gap: 8px; color: var(--ink-soft); font-size: var(--fs-2xs); }
.awb-modal-cancel { border-bottom-color: transparent; }

/* 左欄：兩件商品各自「怎麼送到你手上」 */
.deliver-item { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.deliver-item:first-of-type { border-top: 0; }
.deliver-item > i { font-style: normal; font-size: 20px; line-height: 1.2; }
.deliver-item strong { display: block; font-size: var(--fs-sm); }
.deliver-item .deliver-why { margin: 3px 0 9px; color: var(--ink-soft); font-size: var(--fs-2xs); line-height: 1.6; }
.deliver-step { display: flex; gap: 8px; align-items: baseline; margin: 5px 0 0; font-size: var(--fs-2xs); line-height: 1.6; }
.deliver-step b { flex: 0 0 auto; width: 15px; color: var(--ink-soft); font-weight: 800; }
.deliver-step a { color: var(--night); text-decoration: underline; text-underline-offset: 3px; }
.deliver-step.is-done b { color: #2f7669; }
.deliver-step.is-done { color: #2f7669; }
.deliver-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: var(--fs-2xs); line-height: 1.7; }

/* 手機版：這張摘要被 JS 搬進「前往付款」那張卡片裡（老闆 2026-08-07 裁示 E）。
   它已經在別人的框裡面了，再帶一層外框＋圓角＋陰影就是框中框；
   sticky 也要拿掉——它不再是側欄，黏住只會擋住底下的按鈕。
   改用一條下框線跟同一張卡片的其餘內容分隔，比再畫一個盒子安靜。 */
.order-summary.deliver-summary--inline {
  position: static; margin: 0 0 18px; padding: 0 0 18px;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; box-shadow: none;
}

/* 帳號區塊與前測摘要 */
.account-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.account-tabs button { padding: 9px 16px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; background: #fffdf8; font-size: var(--fs-2xs); font-weight: 800; cursor: pointer; }
.account-tabs button[aria-selected="true"] { color: white; border-color: var(--night); background: var(--night); }
.signed-in-card { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #f4f8f4; }
.signed-in-card strong { font-size: var(--fs-sm); }
.signed-in-card small { color: var(--ink-soft); font-size: var(--fs-2xs); }
.pretest-card { margin-top: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fffdf8; }
.pretest-card header { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.pretest-card header strong { font-size: 19px; }
.pretest-card header span { color: var(--ink-soft); font-size: var(--fs-2xs); }
.pretest-scores { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.pretest-scores li { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: white; font-size: var(--fs-3xs); }
.pretest-scores li b { margin-left: 5px; font-size: var(--fs-2xs); }
.pretest-card p { margin: 0; color: var(--ink-soft); font-size: var(--fs-2xs); line-height: 1.8; }
.pretest-optin { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: white; font-size: var(--fs-2xs); line-height: 1.7; }
.pretest-optin input { margin-top: 3px; }

/* LINE 綁定 */
.line-bind { padding: 20px; border: 1px solid #7ac142; border-radius: 18px; background: #f5fbef; }
.line-bind strong { display: block; margin-bottom: 8px; font-size: var(--fs-sm); }
.line-bind p { margin: 0 0 14px; color: var(--ink-soft); font-size: var(--fs-2xs); line-height: 1.8; }
.line-bind .button { width: 100%; justify-content: center; color: white; border-color: #06c755; background: #06c755; }
.line-bind .text-button { display: block; margin: 12px auto 0; color: var(--ink-soft); font-size: var(--fs-3xs); }

/* 這裡原本有一段 @media (max-width: 900px)：手機上把商品明細與金額整組隱藏、
   改顯示一組「平衡衣 → 待填地址」的迷你狀態。
   2026-08-07 改成把整張摘要搬進「前往付款」框（見 .deliver-summary--inline
   與 delivery.html 裡的 placeSummary()），完整內容就在眼前，那組迷你狀態
   變成同一件事講兩遍，所以連同這段 media query 一起拿掉。 */

/* 必填標記。欄位上已經有 required，讀螢幕軟體會自己講「必填」，
   所以這個星號一律 aria-hidden——它只是給眼睛看的 */
.req { margin-left: 4px; color: #c0392b; font-weight: 800; font-style: normal; }

/* 表單錯誤：紅框 + 抖一下。只在真的錯了才加，不做「一開始就紅」那種嚇人的驗證 */
.form-field input.is-invalid, .form-field select.is-invalid, .form-field textarea.is-invalid,
input.is-invalid { border-color: #c0392b !important; box-shadow: 0 0 0 3px rgba(192,57,43,.18) !important; }
.form-field input.is-invalid, .form-field select.is-invalid, .form-field textarea.is-invalid {
  border-width: 2px !important; background: #fffaf9; }

/* ★ 勾選框的紅框要標在外層那張 label 上，不可以標在 input 上。
   原生的 checkbox／radio 是作業系統畫的元件，`border-color` 對它<b>完全沒有作用</b>
   —— computed 出來的 border-width 就是 0px。2026-08-06 之前這裡唯一畫得出來的只剩
   一圈 12% 透明度、3px 寬的 box-shadow，包在一個 13px 的方塊外面，
   放大截圖才看得到一層極淡的粉紅，正常大小等於沒有。
   老闆是在 Windows/Chrome 上發現的，但那不是 Windows 專屬問題：
   Mac 是 2 倍點陣，同一圈淡色至少佔到兩個實體像素並帶抗鋸齒，
   1080p、縮放 100% 的螢幕上它就是 3 個實體像素的 12% 淡色壓在米白底上。
   ——也就是說，這三個同意勾選從來沒有真的變紅過。

   用 box-shadow 疊兩層（同色的 8px 暈 + 外面 2px 紅環）而不是加 padding／border：
   那兩者都會撐開版面，於是「按了送出，畫面整個往下跳一段」——
   使用者以為自己按到了別的東西。box-shadow 不佔空間，位移是零。 */
label.is-invalid { background: #fdf1ef; box-shadow: 0 0 0 8px #fdf1ef, 0 0 0 10px #c0392b; }
label.is-invalid input[type="checkbox"], label.is-invalid input[type="radio"] {
  outline: 2px solid #c0392b; outline-offset: 2px; accent-color: #c0392b; }
/* .pretest-optin 本來就有邊框與內距，直接換色就好，不必疊暈 */
label.pretest-optin.is-invalid { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.18); }
@keyframes awb-shake { 10%,90% { transform: translateX(-2px); } 30%,70% { transform: translateX(4px); } 50% { transform: translateX(-5px); } }
.shake { animation: awb-shake .4s both; }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }

/* 送出前的錯誤總結（第 1、2 頁共用） */
.form-error { display: none; gap: 8px; margin: 0 0 18px; padding: 15px 17px; color: #8c2b20; border: 1px solid #e2b3ac; border-radius: 13px; background: #fdf1ef; font-size: var(--fs-2xs); line-height: 1.8; }
.form-error.is-visible { display: grid; }
.form-error strong { font-size: var(--fs-xs); }
.form-error ul { margin: 0; padding-left: 18px; }

/* 付款期限的告知。放在「建立訂單」按鈕上方——這是他按下去之前要知道的事。
   用米黃底而不是紅色：這不是錯誤，是一個正常的規則。紅色留給真的擋下他的東西。 */
.checkout-deadline { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 13px 15px; border: 1px solid rgba(241,215,124,.85); border-radius: 13px; background: #fdf8e8; color: var(--ink); font-size: var(--fs-2xs); line-height: 1.75; }
.checkout-deadline b { font-size: var(--fs-sm); line-height: 1.4; }
.checkout-deadline strong { color: var(--night); }

/* 圓形浮動鈕：取代結帳流程頁的整條橫幅 CTA */
.flow-fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; display: grid; place-items: center; width: 56px; height: 56px; color: var(--night); border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: var(--butter); box-shadow: 0 12px 32px rgba(7,27,43,.3); cursor: pointer; transition: transform .25s, opacity .25s; }
.flow-fab span { font-size: 22px; line-height: 1; }
.flow-fab:hover { transform: translateY(-2px); }
.flow-fab.is-hidden { opacity: 0; transform: translateY(120%); pointer-events: none; }

/* 左欄商品名稱：套組是主軸，兩件商品要看得清楚 */
.deliver-summary .summary-heading h2 { font-size: 27px; line-height: 1.3; }
.deliver-name { display: block; font-size: 19px; line-height: 1.4; }
.deliver-name small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: var(--fs-2xs); font-weight: 400; }

/* 綁定官方 LINE：圖示當按鈕、文字在下方、整組置中（2026-08-06 老闆裁示）。
   原本是一顆 class="button" 的一般按鈕，而 .line-bind .button 那條品牌綠
   從頭到尾沒有套到它身上——它的外層根本沒有 .line-bind 這個 class。
   所以「應該成綠色」不是新需求，是一條寫了卻沒生效的樣式。 */
/* 置中靠這一行。按鈕本身是 inline-grid 而不是 grid：block 級的按鈕會撐滿整列，
   於是「整條看起來不像按鈕的空白」都可以按，游標卻只在圖示上變成手指。 */
/* 綁定與加好友兩顆都置中。★ 2026-08-21：#lineFriendBox 原本一條規則都沒有，
   所以它靠左貼齊，跟上面置中的綁定圖示對不齊 —— 那是 8/20 做第二道閘門時漏的。
   兩個選擇器寫在一起，是為了讓「其中一顆忘了置中」這件事不會再發生第二次。 */
#lineBindBox, #lineFriendBox { text-align: center; }
.line-bind-button { display: inline-grid; justify-items: center; gap: 7px; padding: 6px; border: 0; border-radius: 16px; background: transparent; cursor: pointer; transition: transform .2s; }
.line-bind-button:hover { transform: translateY(-2px); }
.line-bind-button:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 3px; }
.line-bind-mark { display: block; width: 54px; height: 54px; border-radius: 16px; box-shadow: 0 8px 20px rgba(6,199,85,.28); }
.line-bind-mark svg { display: block; width: 100%; height: 100%; }
.line-bind-label { color: var(--ink); font-size: var(--fs-2xs); font-weight: 800; }

/* 7 天任務的通知方式：LINE 與簡訊二選一。
   改成兩張看得出來是選項的卡片（2026-08-06 老闆修正）——
   原本只有一句「將用 LINE 訊息推送給你」加一個勾選框，
   沒綁 LINE 的人會以為已經安排好了，結果一按送出就被閘門擋下來。 */
.notify-fallback { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #fffdf8; }
.notify-fallback-title { margin: 0 0 5px; font-size: var(--fs-xs); font-weight: 800; }
.notify-fallback-note { margin: 0 0 12px; color: var(--ink-soft); font-size: var(--fs-3xs); line-height: 1.7; }
.notify-fallback p { margin: 0; color: var(--ink-soft); font-size: var(--fs-2xs); line-height: 1.8; }
/* ★ 2026-08-07 老闆裁示：LINE 與手機是<b>對等的兩個選項</b>，不是「主要」跟「退路」。
   改版前 LINE 那格平常就帶淺綠底（border rgba(6,199,85,.42) + background #f4fdf7），
   選中之後也只是換一圈深一點的綠——「沒選它」跟「選了它」看起來差不多，
   而手機那格則是永遠白底、連 ○/✓ 都沒有。

   現在規則只有一條：<b>兩格預設都是中性的灰白，只有選中的那一格上綠。</b>
   於是「按了手機通知 → 上面的 LINE 變灰、下面變綠框」是這條規則的自然結果，
   不用為它另外寫一組樣式。「建議」那顆標籤留在 LINE 那格，那才是「推薦預設」的表現方式。 */
.notify-option { position: relative; display: block; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.notify-option + .notify-option { margin-top: 10px; }
/* 可以按的是「標題＋狀態」那一段（.notify-option-pick），不是整張卡片。
   LINE 那一格的卡片裡還有綁定表單 —— 整張包成 label 的話，
   按綁定鈕會連帶選到 radio；給整張 pointer 游標也會騙人（綁定表單那一區按了沒反應）。
   手機那一格沒有表單，所以它的卡片本身就同時是 .notify-option-pick。 */
.notify-option-pick { display: block; cursor: pointer; }
/* 紅框畫在整張卡片上。radio 是作業系統畫的元件，border-color 對它沒有作用 */
.notify-option.is-invalid { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.18); }
.notify-option.is-chosen { border-color: #06c755; background: #f4fdf7; box-shadow: inset 0 0 0 1px #06c755; }
.notify-option-title { display: flex; gap: 8px; align-items: baseline; margin: 0 0 4px !important; color: var(--ink) !important; font-size: var(--fs-xs) !important; font-weight: 800; }
/* ○ 是灰的、✓ 才是綠的：顏色跟著「選中沒」走，不是跟著「哪一格」走 */
.notify-option-title b { color: var(--ink-soft); font-size: var(--fs-sm); }
.notify-option.is-chosen .notify-option-title b { color: #06c755; }
.notify-option-title em { margin-left: 6px; padding: 2px 8px; border-radius: 999px; color: #0a7a3c; background: rgba(6,199,85,.16); font-size: var(--fs-3xs); font-style: normal; font-weight: 800; }
.notify-option-state { display: block; margin: 0 0 2px !important; color: var(--ink-soft); font-size: var(--fs-3xs) !important; line-height: 1.7 !important; }

/* 手機那格的 checkbox 收起來，整張卡片就是它的 label。
   ★ 不可以用 display:none 或 visibility:hidden —— 那兩者會讓它退出 tab 順序，
     只用鍵盤的人就再也選不到通知方式，送出時卻會被閘門擋下來，而他找不到要改哪裡。
     所以是「移出視線」而不是「移出無障礙樹」，並且把 focus 環畫在標題上。 */
.notify-option-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.notify-option-input:focus-visible + .notify-option-title { outline: 2px solid var(--night); outline-offset: 3px; border-radius: 6px; }

/* 條文頁的版本標示。同意紀錄存的版本號要跟這裡顯示的一致，否則舉證時對不上 */
.policy-version { margin: 14px 0 0; color: rgba(255,255,255,.72); font-size: var(--fs-2xs); letter-spacing: .04em; }
/* 條文改由資料庫渲染之後多出來的三種區塊：前言（不屬於任何一條）、次標題（一）、條列。 */
.privacy-content .privacy-preamble { border-bottom:1px solid var(--line); }
.privacy-content h3 { margin:16px 0 8px; color:var(--night); font-size: var(--fs-sm); font-weight:600; }
.privacy-content .policy-bullet { position:relative; margin:0 0 6px; padding-left:18px; }
.privacy-content .policy-bullet::before { content:"・"; position:absolute; left:0; color:#71a397; }

/* ── 測驗頁：從結帳過來的人，存檔成功後的「回結帳」區塊 ────────────────
   節點是 script.js 在報告最上方生出來的（sleep-test.html 是外框，不改它）。
   ⚠️ 這是報告頁上最重要的下一步，所以做得比報告本身更亮：
      底色與邊框走 --butter 那一家，跟 .button-primary 是同一組顏色，不另外發明新色。 */
.quiz-checkout-return { display: grid; gap: 14px; margin: 0 0 26px; padding: 22px 24px; border: 2px solid var(--butter); border-radius: 20px; background: #fffaea; box-shadow: 0 12px 28px rgba(241,215,124,.24); }
.quiz-checkout-return-text { margin: 0; color: var(--ink); font-size: var(--fs-md); font-weight: 800; line-height: 1.7; }
.quiz-checkout-return-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* 兩顆一樣寬，看起來才像「兩個對等的選擇」而不是「主按鈕加一句附註」——
   取消那顆是給需要慢慢把報告看完的人用的，不該被縮成小字。 */
.quiz-checkout-return-actions .button { flex: 1 1 200px; }
@media (max-width: 760px) {
  .quiz-checkout-return { padding: 20px; }
  .quiz-checkout-return-actions .button { flex: 1 1 100%; }
}

/* ── 結帳第 2 頁的兩道閘門（節點在 checkout/delivery.html） ──────────── */
/* 前測卡片裡包按鈕的那一塊：與卡片內文分開，手機上按鈕整條寬 */
.pretest-action { margin-top: 16px; }
@media (max-width: 760px) { .pretest-action .button { width: 100%; } }
/* 「上次超過 30 天所以要重測」那段理由：說明性文字，比內文小一號、灰一點、行高鬆一點。
   ⚠️ 第二條選擇器不是複製貼上：.pretest-card p 的權重比單一個 class 高，
      少了它，這一段在卡片裡會被整組蓋回內文的樣子，而畫面上不會有任何錯誤。 */
.pretest-reason,
.pretest-card .pretest-reason { margin: 10px 0 0; color: var(--ink-soft); font-size: var(--fs-3xs); line-height: 1.9; }
/* LINE 那一格底下「還沒加好友」的提示：是提醒不是錯誤，所以不上紅 */
.line-friend-hint { margin: 12px 0 0; color: var(--ink-soft); font-size: var(--fs-3xs); line-height: 1.8; }
/* 「加入官方 LINE」：跟 .line-bind-button 同一個綠色家族，但是次要的那一顆——
   所以是描邊加淡底，不是 .button-line-login 那種整片實心綠 */
/* ★ 2026-08-21 起這是 <button> 不是 <a>（改走 LINE 授權流程）。
   font-family 一定要明寫 inherit —— 表單控制項不會繼承頁面字型，
   少了它這顆會變成系統預設字體，而旁邊那顆綁定鈕不會，兩顆就長得不像同一組。 */
.line-friend-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 10px; padding: 10px 20px; color: #0a7a3c; border: 1px solid #06C755; border-radius: 999px; background: rgba(6,199,85,.08); font-family: inherit; font-size: var(--fs-2xs); font-weight: 800; text-decoration: none; cursor: pointer; transition: background .25s ease, transform .25s ease; }
.line-friend-button:hover { background: rgba(6,199,85,.16); transform: translateY(-2px); }
.line-friend-button:focus-visible { outline: 2px solid #06C755; outline-offset: 3px; }