/* ========================================================================
   npn.tw — Rounded direction main.css
   Layout、hero、section、forms、cart、checkout
   NOTE: variables.css / components.css are linked separately in HTML.
======================================================================== */

/* ====================================================================
   Reset & base
==================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Huninn 僅 400：禁止假粗體合成（CJK 糊化）；缺字回退 Noto 時自動用真字重 */
:root { font-synthesis-weight: none; }

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}

img, svg { display: block; max-width: 100%; }

a {
  color: var(--color-brand-dark);
  text-decoration: none;
  transition: color var(--motion-fast);
}
a:hover { color: var(--color-brand); }

/* R8 已回併＋等效簡化：原五連 :not() 鏈（components.css R8-10）。
   .destination-card/.destination-quick-card 為已刪除的死 class；
   .site-header__link 不會出現在 <main> 內（header 注入於 main 之外），故一併移除。
   保留 :not(.btn)/:not(.dest-card) 維持 (0,3,2) 特異性，確保仍壓過
   .trust-strip__item a:hover 與 .product-info__breadcrumb a:hover。 */
main a:not(.btn):not(.dest-card):hover {
  color: var(--color-brand);
  text-decoration: underline;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-heading);
  letter-spacing: 0;
  font-style: normal;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--brand-alpha-40);
  outline-offset: 3px;
}

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

/* ====================================================================
   Container & section — no dividers, only spacing & bg color
==================================================================== */
.container {
  width: min(100% - (var(--container-pad) * 2), var(--container));
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - (var(--container-pad) * 2), var(--container-narrow));
  margin-inline: auto;
}

/* R9 包五單軸規則：混寬頁面的窄幅閱讀欄——左錨於主容器軸線（不置中），只限行寬 */
.reading-col {
  max-width: var(--container-narrow);
}

.section {
  /* R6 節奏模型：對稱內距（帶內幾何上=下），junction = 2P = 64/96/112 維持原級距 */
  padding: 32px 0;
  position: relative;
}

.section--cream { background: var(--color-cream-deep); }

/* R2-P11 / R3-審計B-S1：相鄰區塊「前段 bottom 即節奏」——全域生效
   手機 56+8=64、768 96+8=104、1440 112+8=120，皆為 token 級距 */
/* R6：原「前段 bottom 即節奏」8px 相鄰規則廢除——它讓每條可視色帶上輕下重（8 vs 56~112） */

/* R3-審計B-S2：無 kicker 段落的標題頂距不漏入交界 */
.section__title:first-child { margin-top: 0; }
.section--paper { background: #fff; }
.section--soft  { background: var(--color-cream-soft); }
.section--warm  { background: var(--color-cream); }

/* Explicitly remove any previous section divider
   （原 .section + .section::before 的 !important 版本與下行完全冗餘，已刪） */
.section::before,
.section::after { content: none; }

.section__head {
  max-width: 760px;
  margin: 0 auto 36px;
  text-align: center;
}

.section__head--left { text-align: left; margin-inline: 0; max-width: none; }
.section__head--left .section__subtitle { margin-inline: 0; }

/* Kicker — small pill, NOT wide-spaced uppercase */
.section__kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-soft);
  color: var(--color-brand-dark);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.section__title {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.18;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0;
  color: var(--color-ink);
}

.section__subtitle {
  max-width: 620px;
  margin: 14px auto 0;
  color: var(--color-ink-soft);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.72;
}

/* ====================================================================
   HERO — clean cream, no editorial residue
==================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  padding: 32px 0 72px; /* R2 bug(a)：header 是 sticky 常流式，移除 fixed 時代的 header-height 補償 */
  background: var(--color-cream);
  border-bottom: 0;
  overflow: hidden;
}

.hero::before,
.hero::after { content: none; }

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* R2-P13：內容欄不被 min-content 撐寬 */
  gap: 32px;
  align-items: start;
  position: relative;
}
.hero__content {
  min-width: 0;
}

.hero__content { max-width: 720px; }

/* Mobile: visual sits above content, compact height */
.hero__visual {
  order: -1;             /* render before .hero__content within the grid */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 4px;
}
.hero__illustration {
  display: block;
  width: auto;
  height: 200px;
  max-width: 100%;
  max-height: 200px;
}

@media (min-width: 768px) {
  .hero__inner {
    grid-template-columns: minmax(0, 55%) minmax(0, 45%);
    align-items: center;
    gap: 48px;
  }
  .hero__content { max-width: none; }
  .hero__visual {
    order: 0;            /* restore source order on desktop (right column) */
    margin-bottom: 0;
  }
  .hero__illustration {
    width: 100%;
    height: auto;
    max-width: 460px;
    max-height: 460px;
  }
}

/* eyebrow class — left for backward compat but visually plain */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--color-brand-soft);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-brand-dark);
  box-shadow: none;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.hero__eyebrow::before { content: none; }

.hero__title {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
  font-size: clamp(36px, 7vw, 60px);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--color-ink);
}

.hero__title .accent {
  color: var(--color-brand);
  white-space: nowrap; /* R2-P3：「掃碼即連」不腰斬 */
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
}

.hero__title .accent::after { content: none; }

.hero__subtitle {
  max-width: 600px;
  margin: 18px 0 0;
  color: var(--color-ink-soft);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Trust row — single line with vertical-bar dividers (no dot, no pill chrome) */
.hero__trust {
  display: flex;
  flex-wrap: wrap; /* R2-P13：390 不再撐寬 grid 軌道裁切右緣 */
  justify-content: center;
  align-items: center;
  column-gap: 20px; /* R4-P16：舊 gap:0 shorthand 在後會歸零 longhand，已刪除；規格見 DESIGN_SPEC 6.5 */
  row-gap: 8px;
  margin-top: 24px;
  max-width: 100%;
}
.hero__trust .pill {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: var(--color-ink-muted);
  padding: 0;
  border: none; /* R2-P15：分隔改 gap 制，換行無殘留豎線與縮排 */
  border-radius: 0;
  background: none;
  white-space: nowrap;
}
.hero__trust .pill__icon {
  display: none;
}
/* 斷點白名單：480px（hero 信任列單行防溢出微調；併入 767 會改變 481–767px 渲染，違反視覺凍結） */
@media (max-width: 480px) {
  .hero__trust .pill {
    font-size: 12px;
    padding: 0 10px;
  }
}
@media (min-width: 768px) {
  .hero__trust {
    justify-content: flex-start;
  }
  .hero__trust .pill:first-child {
    padding-left: 0;
  }
  .hero__cta {
    flex-wrap: nowrap;
    gap: 16px;
  }
  .hero__cta .btn--primary,
  .hero__cta .btn--outline {
    width: auto;
    flex: 0 0 auto;
  }
}

/* ====================================================================
   Trust strip — security & refund line between testimonials and FAQ
==================================================================== */
.trust-strip {
  padding: 40px 0 16px;   /* R-ink 审计：对称 24 使其墨距上26:下59/83 被读作「回饋区尾注」（内容属付款/客服，misgroup FAIL）；上距加大脱离回饋、下距微收 → ~42:51 @390 */
  background: transparent;
}
.trust-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap; /* R3-審計A-H2：手機 2+1 孤行 → 縱排 3×1（max-767 覆寫於下） */
  justify-content: center;
  align-items: center;
  gap: 12px 24px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-ink-muted);
}
.trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}
.trust-strip__icon {
  flex: 0 0 auto;
  color: var(--color-ink-muted);
}
.trust-strip__item a {
  color: var(--color-ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.trust-strip__item a:hover {
  color: var(--color-brand-dark);
}

/* ====================================================================
   Grid layouts
==================================================================== */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.grid-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* ====================================================================
   Feature card
==================================================================== */
.feature {
  display: grid;
  gap: 12px;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  text-align: left;
  box-shadow: var(--shadow-xs);
  transition: transform var(--motion-base), box-shadow var(--motion-base), border-color var(--motion-base);
}

.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--brand-alpha-30);
}

.feature__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.feature__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0;
  color: var(--color-ink);
}

.feature__desc {
  margin: 0;
  color: var(--color-ink-soft);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.72;
}

/* ====================================================================
   Testimonials
==================================================================== */
.testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.testimonial {
  display: grid;
  gap: 14px;
  padding: 24px;
  background: #fff;
  border: 2px solid var(--color-rule);
  border-radius: var(--radius-card);
  position: relative;
  transition: transform var(--motion-base), border-color var(--motion-base);
}

.testimonial::before { content: none; }

.testimonial:hover {
  transform: translateY(-3px);
  border-color: var(--brand-alpha-30);
}

.testimonial__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--color-star);
}

.testimonial__stars span {
  width: 14px;
  height: 14px;
  display: inline-block;
  background: currentColor;
  clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 34%);
}

.testimonial__text {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.7;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  color: var(--color-ink-muted);
  font-size: 13px;
}

.testimonial__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-brand-soft);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-dark);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-size: 14px;
}

.testimonial__author-info { display: grid; gap: 2px; }
.testimonial__author-name {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
}
.testimonial__author-meta { color: var(--color-ink-muted); font-size: 13px; }

/* .hero__rating / .hero__stars 已刪除：全倉 grep 0 命中（原註解自承「left in case it returns」的死代碼） */

/* ====================================================================
   Compatibility check section
==================================================================== */
.compat-check {
  display: grid;
  gap: 14px;
  padding: 36px 28px;
  /* R5 包二：原 brand-soft 大面板違反橙紀律且夾在兩條奶油帶間形成三明治斷版；
     回歸全站卡片語言——白底 + 2px 暖描邊，主 CTA 橙 pill 重獲對比 */
  background: var(--color-paper);
  border: 2px solid var(--color-rule);
  border-radius: var(--radius-card);
  text-align: center;
}
.compat-check__fallback {
  margin: 2px 0 0;
  font-size: var(--fs-13);
  color: var(--color-ink-muted);
}
.compat-check__fallback a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.compat-check__fallback a:hover {
  color: var(--color-brand-dark);
}

.compat-check h3 {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-size: 24px;
  color: var(--color-ink);
}

.compat-check p {
  max-width: 580px;
  margin: 0 auto;
  color: var(--color-ink-soft);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
}

.compat-check__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ====================================================================
   FAQ
==================================================================== */
.faq-list {
  display: grid;
  gap: 10px;
  max-width: 820px;
  margin: 0 auto;
}
.reading-col .faq-list { margin: 0; }   /* R-ink 审计：产品带内 880 阅读栏套 820 居中列 → 手风琴卡与 H2 左缘错位 ~30px；栏内左锚归轴（index 叙事居中不受影响） */

/* §C 間距修復（量測根因）：組標題 h2/h3 緊貼其下 .faq-list = 0px（h2 margin-bottom:0 且
   .faq-list margin-top:0，相鄰無間距）→ 補 16px（DESIGN_SPEC §3.1 同區塊元素上限）。
   組件層一處修全站（faq 4 組 / setup-guide 排錯 / topup 常見問題）；不影響 section__head→
   faq-list（該處由 section__head margin 提供 24px，faq-list 非緊接 h2）。 */
h2 + .faq-list,
h3 + .faq-list {
  margin-top: 16px;
}

.faq-item {
  border: 2px solid var(--color-rule);
  border-radius: var(--radius-card);
  background: #fff;
  overflow: hidden;
  /* R8 已回併：補丁層 details.faq-item 以特異性壓過本規則，
     實際生效為 background-color 過渡（border-color 變色不過渡） */
  transition: background-color 0.2s ease;
}

.faq-item[open] {
  border-color: var(--color-brand);
  background: var(--color-cream-soft);
}

/* R8 已回併：hover 淡橙底；置於 [open] 之後以維持原補丁層
   details.faq-item:hover 特異性壓過 [open] 底色的行為（全站 .faq-item 均為 <details>） */
.faq-item:hover { background-color: var(--brand-alpha-03); }

.faq-item summary {
  position: relative;
  min-height: 60px;
  display: flex;
  align-items: center;
  padding: 16px 56px 16px 22px;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-cream-deep);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%);
  transition: background-color var(--motion-fast), color var(--motion-fast);
}

.faq-item[open] summary::after {
  content: "-";
  background: var(--color-brand);
  color: #fff;
}

.faq-item__body {
  padding: 0 22px 20px;
  color: var(--color-ink-soft);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.8;
}

/* ====================================================================
   Forms
==================================================================== */
.form-field { margin-bottom: 18px; }

.form-field label {
  display: block;
  margin-bottom: 8px;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.form-field .hint {
  margin-top: 8px;
  color: var(--color-ink-muted);
  font-size: 13px;
}

input,
select,
textarea {
  width: 100%;
  min-height: 50px;
  border: 1.5px solid var(--color-rule-strong);
  border-radius: var(--radius-input);
  background: #fff;
  color: var(--color-ink);
  font-family: var(--font-sans);
  padding: 0 16px;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

textarea {
  min-height: 120px;
  padding: 12px 16px 0;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-focus);
  outline: none;
}

input[type="search"] {
  padding-left: 44px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="%237A716A" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="20" y1="20" x2="16.65" y2="16.65"/></svg>');
  background-repeat: no-repeat;
  background-position: 16px center;
}

/* ====================================================================
   Page header (no border-bottom — divider removed)
==================================================================== */
/* R-unify（Pengxin 拍板）：統一頁頭——內容頁頁頭一律靠左（取代 R8 §6.9 舊「page-header 置中敘事帶」豁免①）；
   標題為主、可帶克制的小型行內圖標（不再大圖懸標題上方＋怪空隙），副標 8–10px 緊隨、左緣同軸 */
.page-header {
  padding: 88px 0 56px;
  background: var(--color-cream);
  border-bottom: 0;
  text-align: left;
}

.page-header h1 {
  display: inline-flex;   /* 容納標題右側小型行內圖標（如 topup 日曆＋），與標題同行 */
  align-items: center;
  gap: 8px;               /* R-unify：與 order-success 行內圖標間距一致（8px） */
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--color-ink);
}
.page-head__icon { flex: 0 0 auto; width: 24px; height: 24px; }   /* R-unify：行內圖標統一 24px（與 order-success 綠勾同尺度） */

.page-header p {
  max-width: 640px;
  margin: 10px 0 0;     /* 靠左（去置中 auto）；標題↔副標耦合 §3.1 8–10px */
  color: var(--color-ink-soft);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
}
/* 靠左 CTA 按鈕列（取代資訊頁 .u-center 置中 CTA；與 order-success .success-actions 同語法） */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ====================================================================
   Destinations page
==================================================================== */
.dest-search { max-width: 540px; margin: 0 0 12px; }   /* R-unify：左錨（與左頁頭/左篩選同軸，去置中 auto） */
.dest-search input[type="search"] {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
}

.dest-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;   /* R-ink 审计：搜索框已左锚而 chips 居中＝同一控制组两条轴（半居中混排同型）；左对齐归轴 */
  gap: 8px;
  margin-bottom: 24px;
  max-width: 640px;
  margin-left: 0;    /* R-ink：块级 auto 居中同为混排来源，与 justify 一并左锚 */
  margin-right: auto;
}

@media (max-width: 767px) {
  /* On mobile, encourage 3-per-row by giving chips a min flex basis */
  .dest-filters .chip {
    flex: 1 1 calc(33.33% - 8px);
    min-width: 0;
    max-width: calc(33.33% - 8px);
    padding: 0 12px;
  }
}

/* 「沒有符合的目的地」空狀態（Phase 4 內聯樣式歸零；JS 以 style.display 切換） */
.dest-empty {
  display: none;
  text-align: center;
  color: var(--color-ink-muted);
  margin-top: 32px;
}

/* ====================================================================
   Cart page
==================================================================== */
.cart-list,
.cart-summary,
.cart-empty,
#checkout-form,
.checkout-summary {
  border: 1px solid var(--color-rule);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.cart-list { display: grid; gap: 12px; padding: 14px; margin-bottom: 24px; }

.cart-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  background: #fff;
  transition: transform var(--motion-base), border-color var(--motion-base);
}

.cart-row:hover {
  transform: translateY(-2px);
  border-color: var(--brand-alpha-30);
}

.cart-row__main { display: grid; gap: 4px; }
.cart-row__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-size: 17px;
  color: var(--color-ink);
}
.cart-row__meta { margin: 0; color: var(--color-ink-muted); font-size: 13px; }

.cart-row__qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qty-btn {
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 2px solid var(--color-rule-strong);
  background: #fff;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
}
/* R8 已回併：color:#fff 來自補丁層（其 bg/border 被本檔後載覆蓋、僅 color 存活）。
   ⚠ 淡橙底＋白字對比極低，疑為原補丁層 bug；依視覺凍結先如實保留，列入 Phase 5 檢討（見 MANIFEST_B）。 */
.qty-btn:hover { background: var(--color-brand-soft); border-color: var(--color-brand); color: var(--color-brand-dark); } /* Phase 5：修 R8 遺留白字 bug（MANIFEST_B D1） */

.qty-value {
  min-width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--color-cream-deep);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.cart-row__price {
  color: var(--color-brand-dark);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cart-row__remove {
  background: none;
  border: none;
  color: var(--color-ink-muted);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px;
  min-height: 36px;
  transition: color var(--motion-fast);
}
.cart-row__remove:hover { color: var(--color-error); }

.cart-summary { padding: 26px; display: grid; gap: 14px; }
.cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  color: var(--color-ink-muted);
}
.cart-summary__row strong {
  color: var(--color-brand-dark);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}

.cart-empty {
  max-width: 880px;
  margin-inline: auto;
  padding: 60px 28px;
  text-align: center;
}
@media (max-width: 767px) {
  /* §1 空白審計：40px 卡內距使空車插圖上距達 49px(>§三 48)；收為 32px 與成功頁節奏一致 */
  .cart-empty { padding: 32px 20px; }
}
.cart-empty h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
}
.cart-empty p { color: var(--color-ink-muted); margin-bottom: 24px; }

/* ====================================================================
   Checkout
==================================================================== */
.checkout-grid {
  display: grid;
  gap: 28px;
  align-items: start;
}

#checkout-form { padding: 28px; }
.checkout-summary {
  padding: 28px;
  display: grid;
  gap: 14px;
}

.checkout-summary h3 {
  margin: 0 0 0;   /* R-ink 审计：h3 墨距上25:下39 反向（标题离卡边比离自己内容近）；去 margin-bottom 收下距 */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
}

.checkout-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  color: var(--color-ink-muted);
  font-size: 14px;
  border-bottom: 0;
}
.checkout-summary__row:last-of-type { border-bottom: none; }

.checkout-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  margin-top: 8px;
  border-top: 1px solid var(--color-rule);
  font-size: 15px;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.checkout-summary__total strong,
#checkout-total {
  color: var(--color-brand);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ---- Checkout 內聯樣式歸零（Phase 4；HTML/JS 端替換見 MANIFEST_B）---- */
.checkout-form__title {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-22);
  font-weight: 900;
}
.form-required { color: var(--color-error); }
.payment-pending {
  padding: var(--space-4);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-cream-soft);
  color: var(--color-ink-muted);
}
.payment-pending__title {
  margin: 0;
  font-weight: 800;
  color: var(--color-ink);
}
.payment-pending__desc {
  margin: 6px 0 0;
  font-size: var(--fs-13);
}
.checkout-terms-note {
  margin-top: var(--space-3);
  font-size: var(--fs-13);
  color: var(--color-ink-muted);
  text-align: center;
}
.checkout-delivery-note {
  margin-top: var(--space-4);
  font-size: var(--fs-12);
  color: var(--color-ink-muted);
  line-height: 1.6;
}
.checkout-empty-note { color: var(--color-ink-muted); }
/* A13：JS 關閉時的結帳提示（noscript） */
.checkout-noscript-note {
  margin: 0 0 var(--space-4);
  padding: 12px 14px;
  border: 1.5px solid var(--color-brand);
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
}
/* A4：優惠碼於付款時驗證的常駐說明（摘要卡內） */
.checkout-coupon-note {
  margin: 8px 0 0;
  font-size: var(--fs-12);
  color: var(--color-ink-muted);
  line-height: 1.6;
}

/* 訂單摘要明細列（checkout.js 與 order-success 共用） */
.order-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-rule);
}
.order-line__name { font-weight: 600; }
.order-line__sub {
  font-size: 13px;
  color: var(--color-ink-muted);
}
.order-line__price { font-weight: 600; }
.order-line--total {
  padding: 12px 0 0;
  border-bottom: 0;
  font-size: 18px;
}
.order-line--total strong { color: var(--color-brand); }
.order-line--discount strong { color: var(--color-brand-dark); }
.order-summary__coupon-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--color-ink-muted);
}

/* ====================================================================
   Setup guide
==================================================================== */
.tabs {
  display: flex;
  gap: 8px;
  justify-content: flex-start;   /* R-unify：分頁控制左對齊，與左對齊頁頭/內文同軸，不再置中造成混排 */
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.tabs button {
  min-height: 44px;
  padding: 0 22px;
  border: 2px solid var(--color-rule-strong);
  background: #fff;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink-soft);
  transition: background-color var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.tabs button:hover { border-color: var(--color-brand); color: var(--color-brand-dark); }
.tabs button.is-active {
  background: var(--color-brand);
  color: #fff;
  border-color: var(--color-brand);
  box-shadow: var(--shadow-brand);
}

.tab-content { display: none; }
.tab-content.is-active { display: block; }

.steps {
  display: grid;
  gap: 14px;   /* R-ink 审计：原 max-width:780 + auto 在 820 容器内造成步驟卡每側 20px 内缩，同縱列與 APN 卡欄寬跳動；去帽满容器对齐 */
}

.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform var(--motion-base), border-color var(--motion-base);
}

.step:hover {
  transform: translateY(-2px);
  border-color: var(--brand-alpha-30);
}

.step__num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
  font-size: 18px;
}

.step__body h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-size: 18px;
}

.step__body p { margin: 0; color: var(--color-ink-soft); line-height: 1.7; }

/* 安裝教學步驟區標題（Phase 4 內聯樣式歸零） */
.guide-step-heading {
  font-size: 22px;
  text-align: left; /* R8 包二：對齊規範——內容頁標題靠左（DESIGN_SPEC 6.9） */
  margin-bottom: 24px;
}

/* ====================================================================
   Topup
==================================================================== */
.topup-form,
.topup-result {
  max-width: 580px;
  margin: 0;   /* R-ink 审计：@1440 三轴并存（H1 x100/表单卡置中/FAQ 栏置中）；卡改左锚，与收窄后的页头/FAQ 栏同轴 */
  padding: 28px;
  border: 1px solid var(--color-rule);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.topup-result { margin-top: 24px; }

.topup-info-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-rule);
  font-size: 14px;
}
.topup-info-row:last-child { border-bottom: none; }
.topup-info-row span:first-child {
  color: var(--color-ink-muted);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}
.topup-info-row strong {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
}

.topup-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.topup-option {
  min-height: 76px;
  padding: 14px;
  border: 2px solid var(--color-rule-strong);
  border-radius: var(--radius-card);
  background: #fff;
  font-family: var(--font-sans);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--motion-base), background-color var(--motion-base), color var(--motion-base);
}

.topup-option:hover { border-color: var(--color-brand); }

.topup-option.is-active {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: #fff;
}

.topup-option strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-brand);
}
.topup-option.is-active strong { color: #fff; }

/* ---- Topup 內聯樣式歸零（Phase 4；js/topup.js 端替換見 MANIFEST_B）---- */
.topup-result__title { margin: 0 0 16px; }
.topup-result__subtitle { margin: 24px 0 12px; }
.topup-option__price {
  color: var(--color-ink-muted);
  font-size: 14px;
}
.topup-confirm {
  margin-top: 24px;
  display: none; /* JS 以 style.display='block' 顯示 */
}
/* 須置於 .topup-info-row 之後：同特異性靠順序覆蓋其 padding */
.topup-confirm-row {
  background: var(--color-brand-soft);
  padding: 12px 16px;
  border-radius: 10px;
}
.topup-dev-note {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-ink-muted);
  text-align: center;
}
/* A3：付款回跳確認橫幅——付款完成、到期日已刷新後才出現 */
.topup-paid-banner {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--color-brand-soft);
  border: 1.5px solid var(--color-brand);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-ink);
}
.topup-paid-banner__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1e8e3e;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  line-height: 22px;
}
/* A10：伺服端拒絕（如已達累計上限）時的 inline 錯誤 */
.topup-error {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--color-error);
}
.topup-error:empty { display: none; }
.topup-cap-note {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-ink-soft);
}
/* 加購編號（topupId，客服查詢用）——回跳三態與生效橫幅共用 */
.topup-ref {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--color-ink-muted);
}
.topup-paid-banner .topup-ref { display: block; }
/* 支付回跳消費端（pending 超時/failed/invalid 態）動作列 */
.topup-return-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
#topup-result .esim-prep__spinner { margin: 4px auto 14px; }
.topup-success {
  margin-top: 24px;
  display: none; /* JS 以 style.display='block' 顯示 */
  background: var(--color-paper); /* R5 審計：大面積 brand-soft → 卡片語言 */
  border: 2px solid var(--color-rule);
  padding: 20px;
  border-radius: var(--radius-card);
  text-align: center;
}
.topup-success__icon {
  font-size: 32px;
  color: var(--color-brand);
}
.topup-success__title { margin: 8px 0; }
/* 加購完成後鎖定天數選項（原 js/topup.js 以 style.opacity/pointerEvents 直寫） */
.topup-options--locked {
  opacity: 0.5;
  pointer-events: none;
}

/* ====================================================================
   Order success
==================================================================== */
/* ====================================================================
   Order success（黃區·認真重做：頭部換設計 + 全靠左 + 逐卡 APN）
   方向1：刪除標題上方大插圖（造成上大下小死白），改為「訂單成功」右側
          24px 綠色圓框打勾（inline、與標題同行）。頭部留白＝section(32/48)
          → 標題 → 10 → lead，測量見 output/spacing-audit.md。
   方向2：整頁單一「全靠左」文字對齊——訂單確認頁的資料欄/表單/步驟依可讀性
          慣例一律左對齊（Baymard／NN·g／AdminBar）；置中整頁會破壞 SM-DP+/
          啟用碼/步驟的左緣掃描與複製，是失敗模式。QR 與流程圖是「圖像」、
          置中於各自面板內，非文字對齊，不構成半居中/混排。
==================================================================== */
.success-page { text-align: left; }

/* 頭部：標題 + 行內綠勾 */
.success-head { margin-bottom: 4px; }
.success-head__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;                 /* ≈0.3em；研究：行內圖標緊貼、非漂浮 */
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-ink);
}
.success-check { flex: 0 0 auto; width: 24px; height: 24px; }  /* 綠=功能性成功色，與品牌橙 CTA 分離（研究拍板） */
.success-head__lead {
  margin: 8px 0 0;                /* §0/§2：標題↔副標 8px（DESIGN_SPEC §3.1），與收緊後的頭部上距配平 */
  max-width: 520px;
  color: var(--color-ink-soft);
  font-size: 15px;
  line-height: 1.7;
}
/* A7：頁頭發卡狀態行——「付款完成」恆定於 h1，發卡進度獨立於此行隨聚合態更新 */
.success-status {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.success-status--prep { background: var(--color-cream-deep); color: var(--color-ink-soft); }
.success-status--ok { background: var(--color-brand-soft); color: var(--color-brand-dark); }
.success-status--warn { background: #fef3c7; color: #92400e; }
.success-status--bad { background: #fde8e2; color: #b3402a; }

/* Part B：憑證頁防意外離開——醒目常駐提示（研究：一次性頁的主要防護＝截圖/已寄 Email 提示，
   beforeunload 只是桌面兜底、iOS Safari 不觸發） */
.success-leave-notice {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--color-brand-soft);
  border: 1.5px solid var(--color-brand);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 600;
  color: var(--color-ink);
}
.success-leave-notice__icon { flex: 0 0 auto; }
.success-topup-note__hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--color-ink-muted);
}

.success-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-start;   /* 方向2：靠左 */
  flex-wrap: wrap;
  margin-top: 24px;
}
.success-topup-note {
  background: var(--color-paper);
  border: 2px solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: 20px;
  text-align: left;
}
.success-topup-note__desc {
  margin: 0 0 12px;
  color: var(--color-ink-soft);
  font-size: 14px;
}
/* 卡片群：白卡 2px 暖描邊 + 20px 圓角，靠左，section 節奏 32px */
.success-block {
  text-align: left;
  background: #fff;
  border: 2px solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: 20px;
  margin-top: 32px;
}
.success-block__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--color-ink);
}
/* 醒目訂單編號卡 */
.order-ref-card {
  margin-top: 24px;
  background: var(--color-brand-soft);
  border: 2px solid var(--color-brand);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  text-align: left;   /* 方向2：全靠左 */
}
.order-ref-card__label {
  display: block;
  font-size: 13px;
  color: var(--color-brand-dark);
  font-weight: 700;
}
.order-ref-card__id {
  display: block;
  margin: 4px 0 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.5px;
  color: var(--color-ink);
}
.order-ref-card__hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-ink-soft);
}
.order-summary__email {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--color-ink-soft);
}
/* eSIM 取卡卡 */
.esim-card { text-align: left; }
.esim-card--preparing { text-align: center; }
.esim-prep__spinner {
  width: 44px; height: 44px;
  margin: 4px auto 14px;
  border: 4px solid var(--color-brand-soft);
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: esim-spin 0.9s linear infinite;
}
@keyframes esim-spin { to { transform: rotate(360deg); } }
.esim-prep__desc {
  margin: 0 auto;
  max-width: 420px;
  color: var(--color-ink-soft);
  font-size: 14px;
  line-height: 1.7;
}
.esim-qr {
  text-align: center;            /* QR 為圖像，置中於自身面板內（非文字對齊） */
  margin: 14px 0 0;
  padding: 16px;
  background: var(--color-cream-soft);
  border: 1.5px solid var(--color-rule);
  border-radius: 16px;
}
.esim-qr img {
  width: 180px; height: 180px;
  margin: 0 auto;   /* reset 令 img 為 display:block，text-align 無法置中；以 margin auto 置中 */
  padding: 10px;
  background: #fff;
  border: 2px solid var(--color-rule);
  border-radius: 14px;
}
.esim-qr__cap {
  margin: 10px auto 0;
  max-width: 260px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-ink-soft);
}
.esim-qr__iccid {              /* 面板外、左對齊（卡片預設左對齊） */
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}
/* 一鍵安裝 hero，置於 QR 之上（研究：iPhone 無法掃自身螢幕）
   §2：短標籤＋按鈕下小字說明；覆寫 .btn 的 white-space:nowrap/line-height:1，避免長字擠壓或溢出 */
.esim-onetap {
  margin: 0;
  white-space: normal;
  line-height: 1.3;
  height: auto;
  min-height: 50px;
  padding: 12px 20px;
}
.esim-onetap-note {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-ink-muted);
}
/* 手動設定（可展開） */
.esim-manual { border-top: 1px solid var(--color-rule); padding-top: 12px; }
.esim-manual > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-brand-dark);
  font-size: 14px;
}
.esim-manual__body { margin-top: 12px; }
.esim-manual__path {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--color-ink-soft);
}
.esim-manual__field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.esim-manual__label {
  flex: 0 0 88px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
}
.esim-manual__val {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  background: var(--color-cream-deep);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-ink);
  word-break: break-all;
}
.esim-copy {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-brand-dark);
  cursor: pointer;
}
.esim-manual__caveat {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-ink-muted);
}
/* 截圖提醒 */
.esim-reminder {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--color-cream-deep);
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-ink-soft);
}
.esim-guide-link {
  margin: 14px 0 0;
  font-size: 14px;
}
.esim-guide-link a { color: var(--color-brand-dark); font-weight: 700; }
/* 加購頁 hero 說明（§1） */
.topup-hero__note {
  margin: 10px 0 0;     /* R-unify：靠左（去置中 auto） */
  max-width: 560px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-ink-soft);
}
@media (prefers-reduced-motion: reduce) {
  .esim-prep__spinner { animation-duration: 0.001ms; }
}
/* eSIM 卡頭（標題 + 狀態徽章） */
.esim-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.esim-card__head .success-block__title { margin: 0; }
.esim-pill {
  flex: 0 0 auto;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
}
.esim-pill--ready { background: var(--color-brand-soft); color: var(--color-brand-dark); }
.esim-pill--prep { background: var(--color-cream-deep); color: var(--color-ink-muted); }
.esim-pill--failed { background: #fde8e2; color: #b3402a; }
/* 逐卡 APN 呈現（§4/方向4：值由運行時 apnSetting 注入 DOM，靜態產物永不含真實值或供應名）
   apnRequired → 醒目卡顯示實際 APN 值；非必要 → 免設定提示 */
.esim-apn {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.7;
}
.esim-apn--required {
  background: var(--color-brand-soft);
  border: 1.5px solid var(--color-brand);
  color: var(--color-ink);
}
.esim-apn--none {
  background: var(--color-cream-deep);
  color: var(--color-ink-soft);
}
.esim-apn__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.esim-apn__badge {
  flex: 0 0 auto;
  padding: 2px 9px;
  background: var(--color-brand);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: var(--radius-pill);
}
.esim-apn__line { margin: 0; }
.esim-apn__val {
  display: inline-block;
  padding: 1px 10px;
  background: #fff;
  border: 1.5px solid var(--color-brand);
  border-radius: 6px;
  font-weight: 800;
  color: var(--color-brand-dark);
}
.esim-apn__sub { display: block; margin-top: 8px; font-size: 13px; line-height: 1.65; color: var(--color-ink-muted); }
/* 逐卡製作中（小） */
.esim-mini-prep { text-align: center; padding: 16px 0; color: var(--color-ink-soft); font-size: 14px; }
.esim-mini-prep .esim-prep__spinner { margin: 0 auto 10px; }
/* A7：逐卡失敗態——失敗卡就地顯示求助入口，不整頁蓋掉其他已交付卡 */
.esim-mini-fail p { margin: 0 0 12px; line-height: 1.7; }

/* A5：輪詢超時提示；A6：型別化錯誤卡（無 token / token 失效 / 網路錯誤共用外觀） */
.esim-timeout,
.esim-error {
  text-align: left;
  background: #fff;
  border: 2px solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: 20px;
  margin-top: 32px;
}
.esim-timeout { border-color: #fcd34d; background: #fffbeb; }
.esim-timeout p,
.esim-error p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-ink-soft);
}
.esim-timeout__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
/* 多張手風琴 */
.esim-multi-note { margin: 0 0 16px; font-size: 14px; color: var(--color-ink-soft); }
.esim-acc { display: grid; gap: 10px; }
.esim-acc__item {
  border: 2px solid var(--color-rule);
  border-radius: 16px;
  background: var(--color-cream-soft);
  overflow: hidden;
}
.esim-acc__item[open] { border-color: var(--color-brand); background: #fff; }
.esim-acc__row {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  flex-wrap: wrap;
}
.esim-acc__row::-webkit-details-marker { display: none; }
.esim-acc__title { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--color-ink); }
.esim-acc__meta { flex: 1 1 auto; font-size: 13px; color: var(--color-ink-muted); }
.esim-acc__chevron {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2.5px solid var(--color-ink-muted);
  border-bottom: 2.5px solid var(--color-ink-muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.esim-acc__item[open] .esim-acc__chevron { transform: rotate(-135deg); }
.esim-acc__body { padding: 0 16px 16px; }

/* APN 手動設定教學（方向4：可展開；通用步驟 + 手繪流程 SVG + 各廠牌官方路徑）
   內含值以運行時 apnSetting 注入；SVG 與廠牌路徑皆不含值/供應名 */
.esim-apn-guide { margin-top: 14px; border-top: 1px solid var(--color-rule); padding-top: 12px; }
.esim-apn-guide > summary { cursor: pointer; font-weight: 700; color: var(--color-brand-dark); font-size: 14px; }
.esim-apn-guide__body { margin-top: 12px; }
.apn-guide__intro { margin: 0 0 12px; font-size: 14px; line-height: 1.75; color: var(--color-ink-soft); }
.apn-steps { margin: 0 0 16px; padding-left: 20px; font-size: 14px; line-height: 1.9; color: var(--color-ink); }
.apn-steps li { margin-bottom: 2px; }
.apn-flow { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 0 16px; }
.apn-brands { background: var(--color-cream-soft); border: 1.5px solid var(--color-rule); border-radius: 12px; padding: 14px 16px; }
.apn-brands__title { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--color-ink); line-height: 1.6; }
.apn-brand { margin-bottom: 14px; font-size: 13px; }   /* §2：品牌間距 12→14，路徑長字更好斷行 */
.apn-brand:last-child { margin-bottom: 0; }
.apn-brand__name { display: block; margin-bottom: 3px; font-weight: 800; color: var(--color-brand-dark); }
.apn-brand__path { display: block; line-height: 1.7; color: var(--color-ink-soft); }
.apn-brands__note { margin: 12px 0 0; font-size: 12px; line-height: 1.65; color: var(--color-ink-muted); }

/* setup-guide 公開頁 APN 區（方向4：通用步驟 + 廠牌路徑 + SVG；公開頁不含真實值，只導向訂單頁/發卡信） */
.guide-apn { margin-top: 24px; padding: 20px; background: var(--color-cream-soft); border: 1.5px solid var(--color-rule); border-radius: var(--radius-card); }
.guide-apn__title { margin: 0 0 10px; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--color-ink); }
.guide-apn p { margin: 0 0 12px; font-size: 15px; line-height: 1.75; color: var(--color-ink-soft); }
.guide-apn p:last-child { margin-bottom: 0; }
.guide-apn .apn-flow { margin: 4px 0 16px; }
.guide-apn .faq-item__body p { font-size: 14px; }

/* 產品頁 FUP 受益話術（Pengxin 提供，尾速 256Kbps 的可用性註解；僅此一處詳細段，不散塞每處） */
.fup-benefit { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--color-brand-dark); }

/* ====================================================================
   Static fallback (SEO / GEO)
==================================================================== */
.product-fallback {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px var(--container-pad) 40px; /* R2：同步移除補償（.product-fallback 為漸進增強遺留容器） */
  color: var(--color-ink);
}
.product-fallback h1 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
  font-size: 32px;
  line-height: 1.15;
}
.product-fallback h2 {
  margin: 24px 0 8px;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-size: 20px;
}
.product-fallback p { margin: 0 0 8px; color: var(--color-ink-soft); line-height: 1.7; }
.product-fallback ul { margin: 0 0 8px; padding-left: 20px; color: var(--color-ink-soft); line-height: 1.85; }

/* ====================================================================
   Responsive
==================================================================== */
@media (min-width: 768px) {
  .section { padding: 48px 0; } /* R6：對稱、junction 96 */
  .section__title { font-size: 38px; }

  /* R-unify：桌面頁頭上距 56→32（與 order-success/product 統一為 32），副標→內容 16+24=40 → 8+16=24 */
  .page-header + .section { padding-top: 16px; }
  .page-header { padding: 32px 0 8px; }

  .hero { padding: 56px 0; } /* R6：對稱 */
  /* hero__inner 2-column grid is declared next to base hero rules (~ line 168). do NOT collapse here. */

  .grid-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .grid-features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .testimonials { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

  .cart-row {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 22px;
  }

  .topup-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .checkout-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.95fr);
    gap: 32px;
  }
  .checkout-summary {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    align-self: start;
  }
}

@media (min-width: 1024px) {
  .section { padding: 56px 0; } /* R6：對稱、junction 112 */
  .grid-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .section { padding: 32px 0; } /* R6：對稱、junction 64 */
  .section__title { font-size: 28px; }
  .section__head { margin-bottom: 24px; }

  /* Tight transition from page-header to first content section */
  .page-header + .section { padding-top: 8px; }

  /* §B 手機端 hero→首個 section 銜接：去重移除承諾 pill 後，junction 24+32=56px 讀作空洞；
     顯式收緊為 24+20=44px（§3.1 section↔section 32–48 內），與 .page-header 手法同源 */
  .hero + .section { padding-top: 20px; }

  .hero { padding: 24px 0; } /* R2：與桌面 56px 平滑銜接 */
  .trust-strip__list {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  /* R3-問題二：賣點信任列手機端 2×2 置中網格（對比橫滑方案後拍板：資訊不裁切、不引入滾動） */
  .hero__trust {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 12px;
    justify-items: center;
  }
  .hero__inner { display: flex; flex-direction: column; gap: 0; }
  .hero__title { font-size: 40px; margin-top: 0; }
  .hero__subtitle { font-size: 16px; margin-top: 8px; }
  .hero__cta { gap: 10px; margin-top: 16px; }
  .hero__cta .btn { width: 100%; }
  /* Phase 5（已拍板）：手機端首頁 Hero 不放插圖，以搜尋框為視覺主體 */
  .hero__visual {
    display: none;
  }
  .hero__illustration {
    width: auto;
    height: 200px;
    max-height: 200px;
    max-width: 100%;
  }

  .page-header { padding: 24px 0 8px; }
  .page-header h1 { font-size: 32px; }
  .page-header p { font-size: 15px; margin-top: 8px; }

  .compat-check { padding: 28px 20px; }
  .compat-check__actions { flex-direction: column; align-items: stretch; }
  .compat-check__actions .btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
    line-height: 1.3;
    padding: 12px 18px;
    height: auto;
  }
}

/* 斷點白名單：390px（iPhone SE 級小屏防 hero 標題溢出；併入 767 會使 391–767px（含 414 快照寬）標題由 40px 縮為 36px，違反視覺凍結） */
@media (max-width: 390px) {
  .hero__title { font-size: 36px; }
}

/* ====================================================================
   內聯樣式歸零支援（Phase 4；HTML/JS 端替換見 MANIFEST_B.md）
   —— 本區塊置於所有 @media 之後：
   雙 class 修飾符靠特異性、單 class 靠順序穩定壓過前方響應式規則
==================================================================== */

/* Container 寬度修飾符（原 inline max-width） */
.container--680 { max-width: 680px; }
.container--720 { max-width: 720px; }
.container--760 { max-width: 760px; }
.container--820 { max-width: 820px; }
.container--880 { max-width: 880px; }

/* R9 包六：長文排版系統（DESIGN_SPEC 7.5）——terms/privacy/about 收編 */
.prose {
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-ink-soft);
}
.prose h2 {
  margin: 44px 0 14px;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.35;
  color: var(--color-ink);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  margin: 28px 0 10px;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-size: 18px;
  color: var(--color-ink);
}
.prose p { margin: 0 0 14px; }
.prose ul,
.prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 8px; line-height: 1.85; }
.prose li::marker { color: var(--color-ink-muted); }
.prose strong { color: var(--color-ink); font-weight: 700; }

/* 法規/關於等長文頁清單（原 inline padding-left/line-height；.prose 未覆蓋處相容保留） */
.prose-list {
  padding-left: 20px;
  line-height: 1.9;
}

/* 間距與對齊 utilities（原 inline text-align/margin-top 一次性樣式） */
.u-center { text-align: center; }
.u-nobr { white-space: nowrap; }   /* R-ink：CJK 詞組不可斷（如「隱私政策」「價格表（NT$）」「五國」），杜絕孤字斷行 */
.u-mt-16 { margin-top: 16px; }
.u-mt-32 { margin-top: 32px; }
.u-mt-40 { margin-top: 40px; }
.u-mt-48 { margin-top: 48px; }

/* 產品頁首屏 section 頂距（原 inline padding-top；雙 class 壓過各斷點的 .section padding） */
.section.section--below-header {
  padding: 10px 0 28px; /* R-ink：墨迹口径——header 盒内已有 28px 结构性空气（72px 高、logo 墨仅 18px 居中），
                           padding 24 使 logo墨→面包屑墨 = 48px 鸿沟；收至 10 → 墨距 ≈34（上:下 ≈2.5:1 分组可读） */
}
@media (min-width: 768px) { .section.section--below-header { padding-top: 16px; } } /* 墨距 ≈39 @1440 */

/* §0：成功頁首屏 section 頂距——此頁無 page-header，`.section` 32(手機)/56(桌面) 頂距與
   標題→lead(8px) 失衡（上大下小、標題被推下），Pengxin 指「距離怪」。收緊上距（只改 top、
   保留 bottom 給頁尾節奏）：手機 32→20、桌面 56→28，使頭部上下觀感平衡；雙 class 壓過斷點 padding */
.section.section--order-top { padding-top: 24px; }   /* R-unify：頁頭上距統一 24/32 */
@media (min-width: 768px) { .section.section--order-top { padding-top: 32px; } }

/* section 標題縮小檔（原 inline font-size；雙 class 壓過各斷點的 .section__title 字級） */
.section__title.section__title--sm { font-size: 22px; }
.section__title.section__title--md { font-size: 24px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; /* !important 白名單：prefers-reduced-motion 無障礙豁免 */
    transition-duration: 0.001ms !important; /* !important 白名單：同上 */
    scroll-behavior: auto !important; /* !important 白名單：同上 */
  }
}