/* ============================================================================
   TalkDuck 登陸頁 — 白底 Robinhood 風格

   由 Webull 黑底藍色系改過嚟。骨幹規則（跟 design handoff BRIEF 第 4 節）：
     1. 白底。內容欄 480px 置中。
     2. Accent（鴨黃 #FFD400）一段只出一次。黃底永遠配黑字。
     3. Accent 唔做語意色 —— 升／成功用 --up，錯誤用 --down。
     4. 零陰影。層級靠邊框粗細：重點卡實線黑框，普通卡 hairline。
        陰影只留俾真 overlay。
     5. 全部藥丸形：掣、chip、badge、input 一律 --radius-pill。卡 --radius-md。
     6. 襯線體只做 hero（成功畫面），產品頁標題一律 sans。
     7. 數字用 tabular。
     8. 每段底部有法律細字。
     9. hover 只改 opacity，唔變色。
   ========================================================================= */

/* ---------- 版面殼 ------------------------------------------------------- */
html { scroll-behavior: smooth; }
body { background: var(--surface-page); color: var(--text-primary); }

.page { min-height: 100vh; background: var(--surface-page); }

/* 每段全寬，內容欄 480px 置中 —— 桌面訪客見到手機闊度係故意嘅，
   流量來源係 IG／WhatsApp／店內 QR。 */
.band { padding: 56px 20px; }
.band--dark  { background: var(--neutral-25); }   /* 原本黑底，改為極淺灰做交替 */
.band--light { background: var(--surface-page); }
.col { max-width: 480px; margin: 0 auto; }
.stack   { display: flex; flex-direction: column; gap: 24px; }
.stack-3 { display: flex; flex-direction: column; gap: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Focus ------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: var(--glow-green);
}

/* ============================================================================
   掣 —— 全部藥丸形
   ========================================================================= */
.td-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-instant) var(--ease-standard);
}
.td-btn:disabled { cursor: not-allowed; opacity: .38; }
.td-btn:not(:disabled):hover { opacity: .88; }          /* 只改 opacity，唔變色 */
.td-btn:not(:disabled):active { transform: scale(var(--press-scale)); }

.td-btn--lg { height: 52px; padding: 0 32px; font-size: var(--body-size); }
.td-btn--md { height: 40px; padding: 0 22px; font-size: var(--body-sm-size); }
.td-btn--sm { height: 32px; padding: 0 16px; font-size: var(--caption-size); }
.td-btn--block { display: flex; width: 100%; }

/* primary = 鴨黃底黑字（對比 14.67:1） */
.td-btn--primary { background: var(--action-primary-bg); color: var(--action-primary-fg); }
/* inverse = 黑底白字，用喺已經有黃色 accent 嗰段 */
.td-btn--inverse { background: var(--action-inverse-bg); color: var(--action-inverse-fg); }
.td-btn--outline { background: transparent; color: var(--text-primary); border-color: var(--action-outline-border); }
.td-btn--text {
  background: transparent; color: var(--text-primary); padding: 0 4px;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ============================================================================
   卡 —— 零陰影，層級靠邊框
   ========================================================================= */
.td-card {
  position: relative;
  border-radius: var(--radius-md);
  padding: 20px;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  color: var(--text-primary);
}
.td-card--light { background: var(--surface-card); border-color: var(--border-subtle); }
/* 重點卡：黑框。分別在「黑 vs 灰」，唔係「粗 vs 幼」——
   1.5px 喺 1x 螢幕會被瀏覽器捨入成 1px，同 hairline 睇落一模一樣，靠唔住。 */
.td-card--strong { border: var(--border-width) solid var(--border-strong); }

/* ============================================================================
   段落標題 —— sans。中文唔用負字距，否則會擠埋一舊。
   ========================================================================= */
.td-heading { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.td-heading > h2 {
  font-size: var(--h2-size); line-height: var(--h2-lh);
  letter-spacing: var(--tracking-cjk);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.td-heading > p { font-size: var(--body-size); line-height: var(--body-lh); color: var(--text-secondary); }
.td-heading--light > h2 { color: var(--text-primary); }
.td-heading--light > p  { color: var(--text-secondary); }

/* ============================================================================
   Badge / Tag
   ========================================================================= */
.td-badge {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: var(--caption-size); line-height: 1;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--caption-ls);
  background: var(--rh-green); color: var(--rh-black);
}

.td-tag {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--body-sm-size); line-height: var(--body-sm-lh);
  color: var(--text-secondary);
}
.td-tag::before {
  content: ""; flex: none;
  width: 5px; height: 5px; margin-top: 7px;
  border-radius: var(--radius-pill);
  background: var(--rh-black);
}

/* ============================================================================
   表單控件 —— 藥丸形，52px 觸控目標
   ========================================================================= */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  font-size: var(--body-sm-size); line-height: var(--body-sm-lh);
  color: var(--text-secondary); font-weight: var(--weight-medium);
}

.td-input, .td-select {
  height: 52px; width: 100%;
  font-family: var(--font-sans); font-size: var(--body-size);
  color: var(--text-primary);
  background-color: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-pill);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.td-input { padding: 0 18px; }
.td-input::placeholder { color: var(--text-muted); }

.td-select {
  padding: 0 40px 0 18px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A7D80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

.td-input[aria-invalid="true"], .td-select[aria-invalid="true"] { border-color: var(--down); }

/* ---------- 同意 checkbox ------------------------------------------------
   真 <input type="checkbox">，鍵盤同螢幕閱讀器用得。成行係一個 <label>，
   所以整行 52px 都撳得。<a href> 喺 <label> 入面按 HTML 規範唔會觸發 label
   activation，所以《私隱政策》連結照去。
   已剔 = 黑底 + 鴨黃剔（跟 mockup 嘅寫法）。
   ------------------------------------------------------------------------ */
.consent {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 52px; padding: 12px 0;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  font-family: var(--font-sans);
  font-size: var(--body-sm-size); line-height: var(--body-sm-lh);
  color: var(--text-secondary);
}
.consent > input[type="checkbox"] {
  flex: 0 0 20px; width: 20px; height: 20px; margin: 1px 0 0;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-color: transparent;
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-xs);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.consent > input[type="checkbox"]:checked {
  background-color: var(--rh-black);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23FFD400' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  background-repeat: no-repeat; background-position: center;
  border-color: var(--rh-black);
}
.consent a { color: var(--text-link); }

/* 蜜罐：人見唔到，機械人先填 */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ============================================================================
   1. 頁首
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 30;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 20px;
  background: var(--surface-page);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
/* 登陸頁個 logo 係會員入口（連去 /m），所以要有得撳嘅感覺，
   但唔加底線 —— 品牌 lockup 加底線好核突。hover 只改 opacity（規則 9）。 */
.brand {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: inherit;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
a.brand:hover { opacity: .7; }
a.brand:focus-visible { outline: none; border-radius: var(--radius-pill); box-shadow: var(--glow-green); }
.brand img { width: 28px; height: 28px; border-radius: var(--radius-pill); }
.brand span {
  font-size: var(--h4-size); font-weight: var(--weight-semibold);
  color: var(--text-primary); letter-spacing: var(--tracking-cjk);
}

/* ============================================================================
   2. 主視覺（LCP 元素）
   ========================================================================= */
.poster-band { background: var(--surface-page); padding: 0 0 8px; }
.poster {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; background: var(--surface-sunken);
  border-radius: var(--radius-md);
}

/* ============================================================================
   3. 獎賞框 —— 重點卡：白底 + 實線黑框（唔用陰影、唔用大面積 accent）
   ========================================================================= */
.offer-band { padding: 24px 20px 48px; background: var(--surface-page); }
.offer {
  position: relative;
  /* 1px 黑框，唔用 1.5px —— 1.5px 喺 1x 螢幕會捨入成 1px，同 hairline 冇分別。
     層級靠「黑 vs 灰」表達（BRIEF 規則 4）。 */
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  padding: 32px 20px 24px;
}
/* 舊版嘅水印同藍色光暈喺白底系統唔成立（規則 4：零陰影），已停用。
   層級改為靠實線黑框表達。 */
.offer__clip { display: none; }
.offer__label {
  position: absolute; top: -13px; left: 20px;
  white-space: nowrap;               /* 冇呢個中文會喺 min-content 斷行 */
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--rh-green);
  font-size: var(--caption-size); font-weight: var(--weight-semibold);
  color: var(--rh-black); letter-spacing: var(--caption-ls);
}
.offer__body { position: relative; display: flex; flex-direction: column; gap: 20px; }
.offer__head { display: flex; align-items: flex-start; gap: 14px; }
.offer__head > div {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px;
  container-type: inline-size;
}
.offer__head h1 {
  font-size: var(--h2-size); line-height: var(--h2-lh);
  font-weight: var(--weight-bold); letter-spacing: var(--tracking-cjk);
  color: var(--text-primary);
}
/* 「迎新HK$1,200」約 6.9em 闊，欄位窄過 6.9 倍字級就會斷行。
   用 container query 綁住自己嗰欄，任何闊度都唔會爆行。 */
.offer__head h1 { font-size: min(var(--h2-size), 14cqw); }
.offer__head p { font-size: var(--body-sm-size); line-height: var(--body-sm-lh); color: var(--text-secondary); }
.offer__card { flex: none; width: 140px; height: auto; }

/* 卡圖並排嗰陣，文字欄喺手機淨返 ~194px，標題會被 cqw 壓到 27px。
   窄過內容欄上限就改為：標題佔滿整欄（攞返足字級），卡圖縮細靠右移落下面。 */
@media (max-width: 519px) {
  .offer__head { flex-wrap: wrap; row-gap: 12px; }
  .offer__head > div { flex: 1 0 100%; }
  .offer__card { width: clamp(112px, 34vw, 140px); margin-left: auto; }
}

.rewards { display: flex; flex-direction: column; border-top: var(--border-width) solid var(--border-subtle); }
.reward {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.reward__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.reward__label { font-size: var(--body-size); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-cjk); }
.reward__note  { font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--text-muted); }
/* 金額用黑色粗體 tabular —— accent 留返俾行動，唔做語意色（規則 3） */
.reward__fig   { flex: none; display: flex; align-items: baseline; gap: 2px; color: var(--text-primary); }
.reward__unit  { font-size: var(--body-size); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.reward__value {
  font-variant-numeric: tabular-nums;
  font-size: 34px; line-height: 1; font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
}

.legal { font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--text-muted); text-wrap: pretty; }
.legal--on-light { color: var(--text-muted); }

/* ============================================================================
   4. 登記表
   ========================================================================= */
#form { scroll-margin-top: 56px; }
.form-fields { display: flex; flex-direction: column; gap: 16px; }
.form-error {
  font-size: var(--body-sm-size); line-height: var(--body-sm-lh);
  color: var(--down); font-weight: var(--weight-medium);
}
.form-error:empty { display: none; }

.success { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
/* 成功畫面係「完成／感謝」時刻 —— 全站得呢度用襯線體（規則 6） */
.success h3 {
  font-family: var(--font-serif-display);
  font-size: var(--h3-size); line-height: var(--h3-lh);
  font-weight: var(--weight-regular); color: var(--text-primary);
}
.success p { font-size: var(--body-size); line-height: var(--body-lh); color: var(--text-secondary); text-wrap: pretty; }
/* 成功卡整張鴨黃（呢一段唯一嘅 accent），入面粒掣用黑色 */
.success-card {
  background: var(--rh-green); border-color: var(--rh-green);
  border-radius: var(--radius-xl); padding: 32px 24px;
}
.success-card .success h3, .success-card .success p { color: var(--rh-black); }
.success-card .td-badge { background: var(--rh-black); color: var(--rh-green); }

/* ============================================================================
   5. 如何獲得
   ========================================================================= */
.step { display: flex; gap: 16px; align-items: flex-start; }
.step__n {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  font-size: var(--h3-size); line-height: 1;
  color: var(--text-primary);
}
.step__body { display: flex; flex-direction: column; gap: 6px; }
.step__title { font-size: var(--h4-size); line-height: var(--h4-lh); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-cjk); }
.step__text  { font-size: var(--body-sm-size); line-height: var(--body-sm-lh); color: var(--text-secondary); text-wrap: pretty; }

/* ============================================================================
   6. 主要資格 —— 最後一段要避開固定 CTA 條
   ========================================================================= */
.band--last { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
.statutory {
  font-size: var(--body-sm-size); line-height: var(--body-sm-lh);
  font-weight: var(--weight-semibold); color: var(--text-primary);
}

/* ============================================================================
   7. 固定底部 CTA 條
   ========================================================================= */
.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface-page);
  border-top: var(--border-width) solid var(--border-subtle);
}
.cta-bar > div { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.cta-bar__note { text-align: center; font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--text-muted); }

/* ============================================================================
   法律文件頁
   ========================================================================= */
.doc { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.doc h1 { font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--tracking-cjk); }
.doc h2 { font-size: var(--h4-size); line-height: var(--h4-lh); margin-top: 12px; }
.doc p, .doc li { font-size: var(--body-sm-size); line-height: var(--body-lh); color: var(--text-secondary); }
.doc ul, .doc ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.doc .draft {
  padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--surface-sunken); border: var(--border-width) solid var(--border-default);
  font-size: var(--body-sm-size); color: var(--text-primary);
}

/* ---------- 動效預算 ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .td-btn:not(:disabled):active { transform: none; }
}