/* 5-COMPONENTS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all var(--ease-base);
  min-height: 44px; /* 觸控友善 */
}
.btn--primary {
  background: var(--color-brand);
  color: #fff;
}
/* 3-base.css 有一條全站的 a:hover { color: var(--color-brand-hover) }，
   它的權重（0,1,1）比 .btn--primary（0,1,0）高 —— 按鈕如果只在 :hover 換底色、
   不重寫文字色，滑過去時文字會被染成跟底色一樣的 #db202c，整個字消失（對比 1:1）。
   所以每個變體的 :hover 都要把文字色一起寫死。 */
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-brand-hover);
  color: #fff;                       /* 白字 / #db202c → 4.94:1 */
}
.btn--outline {
  border-color: var(--color-brand);
  color: var(--color-brand);
}
/* 外框鈕滑過去填滿，用較深的 hover 紅讓白字對比拉到 4.94:1。 */
.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  color: #fff;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.card__title {
  margin-bottom: var(--space-3);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.field__input,
.field__textarea {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-height: 44px;
}

/* ≤640：按鈕滿版 */
@media (max-width: 640px) {
  .btn {
    width: 100%;
  }
}

/* ============================================
   以下為 dada-broadband 元件
   數值來源：D:\figma-export 實測
   ============================================ */

/* ── LINE 藥丸鈕（header）──
   設計稿 92×28，白底紅字，圓角 30，icon 22×22，gap 4，左右內距 11。 */
.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  min-height: 28px;                /* 設計稿 92×28 */
  padding: 2px 11px;
  background: #fff;
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ease-base);
}
/* 藥丸只有 28 高。用一個不畫任何東西的 ::before 往上下外擴，把點擊區做到 44
   （28 + 8×2，WCAG 2.5.8 AAA 的門檻）；藥丸本身的尺寸與外觀不變
   —— 不用透明邊框，那會動到 box 尺寸與內部定位。 */
.btn-line::before {
  content: "";
  position: absolute;
  inset: -8px 0;
}
.btn-line:hover {
  background: var(--color-accent-soft);
}
.btn-line__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.btn-line__label {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--color-brand);
  line-height: 1;
}

/* ── 頁尾導覽欄 ── */
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-5); /* 20px：設計稿標題→清單間距 */
  flex-shrink: 0;
  /* 設計稿欄寬 70 / 70 / 112；前兩欄文字只有 64 寬，靠 min-width 補到 70，
     三欄加兩個 80 間距剛好 412（＝設計稿 Frame 1076 寬）。 */
  min-width: 70px;
}
.footer-nav__heading {
  margin: 0;
  white-space: nowrap;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-soft); /* #fffca8 */
  line-height: 1.1875; /* 16px → 19px，對齊設計稿每行高度 */
}
.footer-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* 12px */
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 文字只有 19px 高。基礎規則先用「內距撐開 ＋ 外距抵銷」把點擊區做到 41，
   桌機的版面完全不變；觸控版型（≤1200）再另外加大間距。 */
.footer-nav__link {
  display: block;
  padding-block: 11px;
  margin-block: -11px;
  font-size: var(--fs-base);
  white-space: nowrap;
  line-height: 1.1875; /* 16px → 19px */
  color: #fff;
  text-decoration: none;
  transition: opacity var(--ease-base);
}
.footer-nav__link:hover,
.footer-nav__link:focus-visible {
  color: #fff;
  opacity: 0.75;
}

/* 頁尾導覽的響應式覆寫要放在這裡，不能放 4-layout.css ——
   基礎規則在本檔，而 5-components 比 4-layout 後載入，
   同權重下 4-layout 的 media query 反而會被這裡的基礎規則蓋掉。 */
@media (max-width: 1200px) {
  /* 觸控版型：把列表間距收掉、改用內距撐開每一列的可點範圍 */
  .footer-nav__list { gap: 0; }
  .footer-nav__link { padding-block: 13px; margin-block: 0; }
}
@media (max-width: 640px) {
  /* 兩欄之後每列高度更吃緊，但可點高度仍要守在 40 以上（16.6 + 12×2 = 40.6） */
  .footer-nav__link { padding-block: 12px; }
  .footer-nav__heading { margin-bottom: var(--space-2); }
  .footer-nav:last-child .footer-nav__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 var(--space-8);
  }
}

/* ── 右下浮動聯絡按鈕 ──
   設計稿 64×384：五顆 64×64 圓鈕、間距 16。
   匯出把陰影掛在群組上（會在透明容器上畫出一個矩形陰影），
   這裡改掛在每顆按鈕，才是設計上的原意。 */
/* ── 手機底部聯絡列 ──
   桌機不出現：右側浮動鈕在大螢幕好按，底部整條反而佔掉可視高度。 */
.contact-bar { display: none; }

@media (max-width: 768px) {
  .contact-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-fixed);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
    /* iPhone 底部手勢條：多墊一段安全區，按鈕才不會被蓋住 */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .contact-bar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 56px;
    padding: var(--space-3) var(--space-2);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--ease-base);
  }
  .contact-bar__btn img { flex-shrink: 0; }
  .contact-bar__btn + .contact-bar__btn { border-left: 1px solid var(--color-border); }
  /* 全站的 a:hover 權重比這裡高，字色要在每個狀態寫死 */
  .contact-bar__btn,
  .contact-bar__btn:hover,
  .contact-bar__btn:focus-visible { color: var(--color-brand); }
  .contact-bar__btn:hover,
  .contact-bar__btn:focus-visible { background: var(--color-brand-soft); }

  /* 底部多出一條，頁面要讓開，否則頁尾會被蓋住 */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

.floating-contact {
  --fc-size: 52px; /* 設計稿為 64，實機偏大，縮到 52 */
  position: fixed;
  right: clamp(var(--space-3), 2vw, var(--space-6));
  bottom: clamp(var(--space-3), 2vw, var(--space-6));
  z-index: var(--z-fixed);
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* 12px */
  width: var(--fc-size);
}

/* 三顆聯絡鈕的收合群組。
   刻意不用 overflow:hidden + max-height —— overflow 會把子按鈕的 box-shadow
   一起裁掉（陰影看起來像被切一半）。改成逐顆淡出＋縮回，群組保留版位，
   客服鈕與置頂鈕因此不會位移，收合時整組不吃點擊。 */
.floating-contact__group {
  display: flex;
  flex-direction: column;
  gap: inherit;
}

.floating-contact__group > * {
  transition:
    opacity 220ms ease,
    transform 300ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.floating-contact.is-collapsed .floating-contact__group {
  pointer-events: none;
}

.floating-contact.is-collapsed .floating-contact__group > * {
  opacity: 0;
  transform: translateY(16px) scale(0.5);
}

/* 由下往上依序收合，展開時反向，看起來像從客服鈕長出來 */
.floating-contact.is-collapsed .floating-contact__group > *:nth-child(1) {
  transition-delay: 90ms;
}
.floating-contact.is-collapsed .floating-contact__group > *:nth-child(2) {
  transition-delay: 45ms;
}
.floating-contact.is-collapsed .floating-contact__group > *:nth-child(3) {
  transition-delay: 0ms;
}
.floating-contact__group > *:nth-child(1) {
  transition-delay: 0ms;
}
.floating-contact__group > *:nth-child(2) {
  transition-delay: 45ms;
}
.floating-contact__group > *:nth-child(3) {
  transition-delay: 90ms;
}
/* 收合狀態不旋轉圖示（原本會轉 −135°，看起來像壞掉）。
   圖示本身的 5.6° 傾斜已烘進 float-support.svg，這裡什麼都不做。 */

.floating-contact__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--fc-size);
  height: var(--fc-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: 0 0 19px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform var(--ease-base);
}
.floating-contact__btn:hover {
  transform: translateY(-2px);
}
/* 圖示依按鈕尺寸等比縮放（設計稿圖示約佔按鈕 58%），
   不用 HTML 的 width/height 屬性，避免改按鈕尺寸時要同步改標記。 */
.floating-contact__btn img {
  display: block;
  width: auto;
  height: auto;
  max-width: 58%;
  max-height: 58%;
}

/* 客服鈕：紅漸層底＋白外框 */
.floating-contact__btn--support {
  background: linear-gradient(
    360deg,
    var(--color-brand) 0%,
    var(--color-brand-dark) 100%
  );
  border: 2px solid #fff;
}

/* 置頂鈕：白底紅箭頭、紅外框，捲動一段距離後才由 JS 顯示。
   原本是「35% 半透明白底 ＋ 白色箭頭」—— 疊在白色區塊上整顆等於隱形，
   所以改成與其他四顆一致的實心白底，箭頭與外框都用品牌紅（對比 4.01:1，
   圖形元素的門檻是 3:1）。
   不要用 backdrop-filter —— 它會建立新的合成層與 containing block，
   實測會讓手機選單面板的白底整個失效。 */
.floating-contact__btn--top {
  background: #fff;
  border: 2px solid var(--color-brand);

  /* 進出場動畫。刻意「保留版位」而不是 display:none —— 這樣其餘四顆鈕
     不會在置頂鈕出現／消失時上下跳動，同時離場也有動畫。 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(0.85);
  transition:
    opacity 280ms ease,
    transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1),
    background var(--ease-base),
    visibility 0s linear 280ms;
}
.floating-contact__btn--top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition:
    opacity 280ms ease,
    transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1),
    background var(--ease-base),
    visibility 0s;
}
/* hover 反轉成紅底白箭頭（箭頭是 <img>，用 filter 把紅線變白）。 */
.floating-contact__btn--top:hover,
.floating-contact__btn--top:focus-visible {
  background: var(--color-brand);
}
.floating-contact__btn--top:hover img,
.floating-contact__btn--top:focus-visible img {
  filter: brightness(0) invert(1);
}

/* 右下浮動鈕要讓開底部聯絡列。
   這一條必須放在 .floating-contact 基底規則「之後」—— 兩者權重相同，
   寫在前面會被基底的 bottom: clamp(...) 蓋掉（實測還是貼在 12px，壓在底部列上）。 */
@media (max-width: 768px) {
  .floating-contact {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + var(--space-3));
  }
}

/* ≤640：再縮一階，避免佔掉手機視窗 */
@media (max-width: 640px) {
  .floating-contact {
    --fc-size: 44px;
    gap: var(--space-2);
  }
}

/* ── 區塊內 CTA ──
   跟著內容走的一顆按鈕（不是頁尾那種整塊 CTA 區）。
   導言用該區塊的主題寫，所以字級刻意比內文小一階，主角是按鈕。 */
.cta-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  /* 有些放 CTA 的區塊是滿版的（例如「選網速注意事項」），
     不收寬度的話導言會被拉成一整行 1440，讀起來很怪。 */
  max-width: 560px;
  margin: var(--space-6) auto 0;
  text-align: center;
}
.cta-inline--start {
  align-items: flex-start;
  margin-inline: 0;
  text-align: left;
}
.cta-inline__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.cta-inline__btn {
  text-decoration: none;
  /* 文字長，窄畫面要能換行；行高比 .btn 預設鬆一點才不會擠在一起 */
  white-space: nowrap;
  line-height: 1.2;
}
.cta-inline__icon {
  flex-shrink: 0;
  /* 原色是漸層紅，疊在紅底按鈕上會看不見 —— 轉成白色 */
  filter: brightness(0) invert(1);
}
/* 次要路徑：不方便講電話的人走 LINE。刻意做小，不跟主按鈕搶。 */
.cta-inline__alt {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.cta-inline__alt a {
  color: var(--color-brand);
  text-underline-offset: .2em;
}

/* 深色／彩色底上的版本：導言改成較高對比的字色 */
.cta-inline--on-tint .cta-inline__text { color: var(--color-heading); }

@media (max-width: 480px) {
  .cta-inline__btn {
    width: 100%;
    /* 不是每個放 CTA 的區塊都有左右內距（常見問題、選網速注意事項就沒有），
       只寫 width:100% 會讓按鈕貼齊螢幕兩側。用 max-width 收住，
       在有內距的容器裡也一樣不會超過。 */
    max-width: 320px;
    /* 窄畫面允許換行，不然「加 LINE 問張浩隆專員」會頂出容器 */
    white-space: normal;
    padding-inline: var(--space-4);
  }
}

/* ── CTA 區塊（目前只有常見問題頁用）──
   一般頁面的 CTA 是跟著內容走的一顆按鈕；常見問題是「一路往下找答案」的頁面，
   最後一題看完還沒解決，頁尾前才是他真正需要按鈕的位置，所以這裡獨立成一塊。
   底色沿用 .plans 那層淡紅漸層，與全站的紅色語彙一致。 */
.cta-band {
  background: linear-gradient(180deg, rgba(230, 67, 62, 0) 0%, rgba(230, 67, 62, .10) 100%);
  padding-block: clamp(var(--space-10), 5vw, 72px);
}
.cta-band__inner {
  width: 100%;
  max-width: calc(760px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  text-align: center;
}
.cta-band__title {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--color-heading);
}
/* 區塊本身已經有上下留白，CTA 不需要再自己撐一段 */
.cta-band .cta-inline { margin-top: var(--space-5); }
/* 號碼本身也要看得到（按鈕上只寫動作），整頁只出現這一次 */
.cta-band__phone {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.cta-band__phone a {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--color-brand);
  text-decoration: none;
  letter-spacing: .02em;
}
.cta-band__phone a:hover,
.cta-band__phone a:focus-visible { color: var(--color-brand-hover); text-decoration: underline; }

/* ── 區塊小標籤 ──
   設計稿每一頁的樣式都不同，所以基底只留共通的排版，外觀交給修飾詞：

     --accent        橘底白字 20px（第四台 hub／第四台怎麼比較／網路方案怎麼選）
     --pill-outline  透明底、1px 紅框、圓角 60、20px 紅字（南桃園 兩頁）
     --pill-solid    白底、1px 紅框、圓角 60、24px 黑字（信和 比較）
     --box-solid     白底、1px 紅框、直角、16px 黑字（北視 比較）
     --box-outline   透明底、1px 黑框、直角、20px 黑字（吉元 優惠）
     --mark          無框，文字後方一條 #fffca8 螢光底、20px 紅字（吉元 比較）
     --dots          無框，左右各一顆 28px 紅圓、20px 黑字（北視 優惠）

   對齊：預設置中；--start 靠左（只有第四台 hub 的「認識第四台」）。 */
.hub-tag {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin: 0;
  font-size: var(--fs-lg);         /* 20px */
  line-height: 1.2;
}
.hub-tag--start { align-self: flex-start; }
.hub-tag__text { position: relative; }

/* 橘底白字（設計稿 Frame 978：#fea500、內距 10） */
.hub-tag--accent {
  padding: 10px;
  background: var(--color-accent);
  color: #fff;
}

/* 紅框藥丸（設計稿 Frame 978：184×46、圓角 60、內距 10） */
.hub-tag--pill-outline {
  min-height: 46px;
  padding: 10px 22px;
  border: 1px solid var(--color-brand);
  border-radius: 60px;
  color: var(--color-brand);
}

/* 白底紅框藥丸（設計稿 Frame 1291：216×51、圓角 60、24px 黑字） */
/* 設計稿 Group 570：白底紅框的藥丸（Frame 1291），後面再墊一顆同尺寸的
   實心紅藥丸（Frame 1292），往下位移 7 露出一條紅邊。 */
/* 注意：這裡不能加 isolation: isolate —— 一旦建立堆疊脈絡，
   z-index:-1 的偽元素會改成疊在自己的白色底之上，紅色就會蓋滿整顆藥丸。
   只寫 position: relative，偽元素才會落到自身背景的後面。 */
.hub-tag--pill-solid {
  position: relative;
  min-height: 51px;
  padding: 10px 36px;
  background: var(--color-bg);
  border: 1px solid var(--color-brand);
  border-radius: 60px;
  font-size: var(--fs-xl);         /* 24px */
  font-weight: var(--fw-medium);
  color: var(--color-text);
}
.hub-tag--pill-solid::before {
  content: "";
  position: absolute;
  /* 設計稿 Frame 1292 與白色藥丸同尺寸、只往下位移 7，露出一道紅色下緣。 */
  inset: 7px 0 -7px 0;
  background: var(--color-brand);
  border-radius: 60px;
  z-index: -1;
}

/* 白底紅框直角（設計稿 Frame 1221：150×36、16px 黑字） */
.hub-tag--box-solid {
  min-height: 36px;
  padding: 8px 27px;
  background: var(--color-bg);
  border: 1px solid var(--color-brand);
  font-size: var(--fs-base);       /* 16px */
  color: var(--color-text);
}

/* 透明底黑框直角（設計稿 Frame 1268：162×46、內距 10、20px 黑字） */
.hub-tag--box-outline {
  min-height: 46px;
  padding: 10px 11px;
  border: 1px solid var(--color-text);
  color: var(--color-text);
}

/* 螢光底（設計稿 Group 564：文字後方壓一條 142×16 的 #fffca8） */
/* 設計稿 Group 564：黃底 Rectangle 197（142×16）比文字（120×24）左右各寬 11，
   且往下探出 8 —— 整組外框因此是 32 高，不是貼齊文字底線。 */
.hub-tag--mark { font-weight: var(--fw-medium); color: var(--color-brand); }
.hub-tag--mark .hub-tag__text::before {
  content: "";
  position: absolute;
  left: -11px;
  right: -11px;
  bottom: -8px;
  height: 16px;
  background: var(--color-accent-soft);
  z-index: -1;
}

/* 左右各一顆紅圓（設計稿 Frame 1243：28×28 的 #e6433e，與文字間距 16） */
.hub-tag--dots {
  gap: 16px;
  color: var(--color-text);
}
.hub-tag--dots::before,
.hub-tag--dots::after {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  /* 設計稿的兩顆紅圓是做過圖層模糊的（Figma 的 layer blur 不會匯出到 meta.json，
     是量 design.png 的像素斜坡得到的：5%→95% 跨 14px → sigma ≈ 4.3）。 */
  filter: blur(4.3px);
}

/* ── 文字強調與斷行控制（全站共用）──
   .op 系列用於「南桃園｜北視｜吉元｜信和」這種業者名列舉，
   首頁與各 hub 的標題都會用到，所以放在元件層而不是單一頁面的 CSS。 */

/* 業者名紅字 */
.op {
  color: var(--color-brand);
}
.op-sep {
  color: var(--color-text);
}

/* 中文可在任意兩字間斷行，會把「信和」拆成「信 / 和」。
   整組業者名（含結尾逗號）鎖成一個不可拆單位，尾句同理，
   讓整段只有「群組 ／ 尾句」一個換行點。 */
.op-group {
  white-space: nowrap;
}
.clause {
  white-space: nowrap;
}

/* ── 方案卡元件（首頁與最新優惠頁共用）──
   數值來源：D:igma-export\home\desktop 的 Frame 186 / 155。 */
.plans__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  width: 100%;
  margin-top: var(--space-10);
  align-items: start;
}
/* 兩欄在手機只剩約 133px，方案卡完全擠爆。收單欄的規則原本只寫在 home.css，
   但最新優惠頁載入的是 hub.css ＋ misc.css，那一頁就沒收到 —— 移到元件層。 */
@media (max-width: 768px) {
  .plans__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}

.plan-group {
  position: relative; /* 路由器情境圖的定位基準 */
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.plan-group__title {
  margin: 0;
  padding: 11px var(--space-4);
  border-radius: 10px 10px 0 0;
  font-size: var(--fs-lg); /* 20px */
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: #fff;
  text-align: center;
}
.plan-group--brand .plan-group__title {
  background: var(--color-brand);
}
.plan-group--accent .plan-group__title {
  background: var(--color-accent);
}

.plan-group__list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.plan-card {
  position: relative; /* 路由器情境圖的定位基準 */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
/* 速率／月費藥丸／價格三段。窄螢幕（360 時卡片內只有約 224px）放不下一行，
   允許換行並縮小間距，否則會整排撐出卡片外。 */
.plan-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.plan-card__speed {
  font-size: var(--fs-lg); /* 20px */
  font-weight: var(--fw-medium);
}
.plan-card__fee {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 4px var(--space-4);
  background: var(--color-accent);
  border-radius: var(--radius-full);
  font-size: var(--fs-base);
  line-height: 1; /* 16px + 上下 4 內距 = 24，對齊設計稿 */
  color: #fff;
  white-space: nowrap;
}
.plan-card__price {
  font-size: var(--fs-base);
}
.plan-card__note {
  /* 設計稿的備註是貼合文字寬度並置中（600 寬卡片內為 300 / 488），不是滿版。
     滿版時長備註會撐出卡片外緣。 */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
  border: 0.5px solid var(--color-text);
  border-radius: 10px;
  /* 設計稿是 14px 單行（488 寬）。本站中文字型較寬，14px 需要 616px 但卡片
     內容區只有 560 —— 會被迫斷成兩行，與設計稿的單行藥丸外觀不符。
     收一階到 12px（44 字約 528px）維持單行。 */
  font-size: var(--fs-xs);
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}

/* 路由器情境圖掛在「這夏可樂了」最後一張方案卡的右下角，往右下探出。
   設計稿是 241 寬、右探 96／下探 123；本站縮到 200 寬，位移等比縮為 80／102。
   右位移取視窗可用空間的上限，避免被 .plans 的 overflow:hidden 裁掉。 */