/* page-local-foundation.css */

.what-is-local-section {
  padding-bottom: 48px;
}
.what-is-local {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  isolation: isolate;
  justify-content: center;
  margin-top: 48px;
}

.what-is-local__heading {
  width: 100%;
  max-width: 590px;
  min-height: 102px;
  background-color: #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.what-is-local__heading-inner {
  width: 100%;
  max-width: 528px;
  min-height: 63px;
  padding: 0 24px;
  background-color: #fff;
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.what-is-local__title {
  font-weight: 500;
  text-align: center;
  color: #0b2f53;
}

.what-is-local__title-icon {
  width: 27px;
  height: 24.7px;
}

.what-is-local__desc-wrap {
  width: 100%;
  max-width: 743px;
  min-height: 102px;
  padding: 0 48px 0 28px;
  border: 3px solid #d9d9d9;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.what-is-local__desc {
  width: 100%;
  max-width: 667px;
  color: #000;
}

.what-is-local__img {
  position: absolute;
  top: -108px;
  right: 13px;
  width: 304px;
  height: 88px;
  z-index: 2;
}
/* set-up info */
.setup-info-section {
  padding: 38px 0 83px;
  background-color: #e6f3ff;
}
.setup-info {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 50px;
  color: #fff;
  margin-top: 48px;
}

.setup-info__column {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
}

.setup-info__head {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
}

.setup-info__head-bar {
  width: 100%;
  min-height: 32px;
  background-color: #e2ae3b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.setup-info__head-bar--blue {
  background-color: #316eac;
}

.setup-info__head-title {
  font-weight: 500;
  text-align: center;
}

.setup-info__head-badge {
  position: absolute;
  top: 0;
  left: -15px;
  width: 36px;
  height: 36px;
  border: 1px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  background: linear-gradient(0deg, #0b2f53, #1969b9);
  box-shadow: 3px 2px 8px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #fff;
  z-index: 1;
}

.setup-info__body {
  background-color: #fff;
  color: #000;
  min-height: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.setup-info__list {
  width: 100%;
  max-width: 265px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.setup-info__item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.setup-info__item-icon {
  width: 16px;
  flex-shrink: 0;
}

.setup-info__item-text {
  color: #000;
}

.setup-info__body--amount {
  gap: 16px;
}

.setup-info__amount {
  width: 100%;
  max-width: 265px;
  text-align: center;
  color: #000;
}

.setup-info__note {
  width: 100%;
  max-width: 268px;
  min-height: 152px;
  background-color: #fff0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  box-sizing: border-box;
}

.setup-info__note.mobile-only {
  display: none;
}

@media (max-width: 992px) {
  .setup-info__note.desktop-only {
    display: none;
  }
  .setup-info__note.mobile-only {
    display: flex;
  }
}

.setup-info__note-head {
  width: 100%;
  min-height: 28px;
  background-color: #c8274a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.setup-info__note-label {
  color: #fff;
  font-weight: 500;
}

.setup-info__note-text {
  width: 100%;
  color: #c8274a;
  text-align: left;
}

/* foundation-compare section */
.foundation-compare-section {
  padding: 48px 0 98px;
}
.foundation-compare {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 20px;
  margin-top: 48px;
}

/* 左右兩側縱向標籤 */
.foundation-compare__side {
  width: 61px;
  min-height: 606px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.foundation-compare__side--national {
  background: linear-gradient(0deg, #0b2f53, #1969b9);
}

.foundation-compare__side--local {
  background: linear-gradient(180deg, #e2ae3b, #e2753b);
}

.foundation-compare__side-text {
  width: 21px;
  color: #fff;
  font-weight: 500;
  text-align: center;
}

/* 中央對比表 */
.foundation-compare__table {
  display: flex;
  align-items: stretch;
}

/* 左欄 / 右欄 */
.foundation-compare__column {
  width: 100%;
  max-width: 347px;
  display: flex;
  flex-direction: column;
  color: #0b2f53;
  text-align: center;
}

.foundation-compare__cell {
  min-height: 101px;
  border: 2px solid #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

/* 全國性欄位配色 */
.foundation-compare__column--national .foundation-compare__cell--primary {
  background-color: #d0e9ff;
}

.foundation-compare__column--national .foundation-compare__cell--secondary {
  background-color: #fff;
  border-color: #d0e9ff;
}

/* 地方性欄位配色 */
.foundation-compare__column--local .foundation-compare__cell--primary {
  background-color: #ffebac;
}

.foundation-compare__column--local .foundation-compare__cell--secondary {
  background-color: #fff;
  border-color: #ffebac;
}

/* 中間類別欄 */
.foundation-compare__categories {
  display: flex;
  flex-direction: column;
  gap: 34px;
  align-self: center;
}

/* 桌機版隱藏手機專用類別欄複本 */
.foundation-compare__categories--mobile {
  display: none;
}

.foundation-compare__category {
  width: 200px;
  min-height: 64px;
  border: 2px solid #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 500;
  text-align: center;
  flex-shrink: 0;
}

.foundation-compare__category--a {
  background-color: #316eac;
}

.foundation-compare__category--b {
  background-color: #0b2f53;
}

/* set-up process */
.setup-process-section {
  padding: 78px 0 187px;
  margin-bottom: -93px;
  background-color: #d9d9d9;
}
.setup-process {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  margin: 48px auto;
}

.setup-process__step {
  position: relative;
  width: 100%;
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.setup-process__card {
  width: 100%;
  min-height: 124px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  box-sizing: border-box;
}

.setup-process__head {
  width: 100%;
  max-width: 382px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.setup-process__head-label {
  width: 100%;
  max-width: 310px;
  min-height: 44px;
  border: 2px solid #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  padding: 7px 16px;
  color: #fff;
}

.setup-process__head-label--blue {
  background-color: #1869b9;
}

.setup-process__head-label--gold {
  background-color: #e2ae3b;
}

.setup-process__step-number {
  font-weight: 500;
  font-size: 1.5rem;
  white-space: nowrap;
}

.setup-process__step-title {
  font-weight: 500;
  white-space: nowrap;
}

.setup-process__arrow-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.setup-process__arrow {
  width: 10px;
  height: 12px;
}

.setup-process__desc {
  width: 100%;
  max-width: 569px;
  color: #0b2f53;
  text-align: left;
}

.setup-process__connector {
  position: absolute;
  bottom: -24px;
  left: 445px;
  width: 110px;
  height: 36px;
  z-index: 1;
}

/* service benefits */
.service-benefits {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 31px;
}

.service-benefits__heading {
  width: 100%;
  max-width: 1080px;
  min-height: 65px;
  border-radius: 60px;
  background-color: #0b2f53;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  box-sizing: border-box;
}

.service-benefits__title {
  color: #fff;
  font-weight: 500;
  text-align: center;
}

.service-benefits__list {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 36px;
}

.service-benefits__item {
  width: 100%;
  max-width: 186px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.service-benefits__dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.service-benefits__dot {
  border-radius: 50%;
  display: block;
}

.service-benefits__dot--lg {
  width: 18px;
  height: 18px;
  background-color: #0b2f53;
}

.service-benefits__dot--md {
  width: 12px;
  height: 12px;
  background-color: #316eac;
}

.service-benefits__dot--sm {
  width: 7px;
  height: 7px;
  background-color: #abc8e5;
}

.service-benefits__card {
  width: 100%;
  min-height: 186px;
  border-radius: 93px;
  border: 2px solid #0b2f53;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.service-benefits__text {
  color: #000;
  text-align: center;
}

/* ==================== 大螢幕 (max-width: 1440px) ==================== */
@media (max-width: 1440px) {
  .what-is-local-section,
  .setup-info-section,
  .foundation-compare-section,
  .setup-process-section {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ==================== 平板 (max-width: 1024px) ==================== */
@media (max-width: 1024px) {
  .what-is-local__heading {
    flex-direction: column;
    gap: 24px;
  }

  .what-is-local__heading-inner,
  .what-is-local__desc-wrap {
    width: 100%;
    max-width: 100%;
  }

  .setup-info {
    flex-direction: column;
    gap: 24px;
  }

  .setup-info__column {
    width: 100%;
  }

  .foundation-compare {
    flex-direction: column;
    gap: 24px;
  }

  .foundation-compare__side {
    width: 100%;
    max-width: 100%;
  }

  .foundation-compare__table {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .setup-process__step {
    flex-direction: column;
  }
}

/* ==================== 768px 以下 ==================== */
@media (max-width: 768px) {
  .what-is-local-section,
  .setup-info-section,
  .foundation-compare-section,
  .setup-process-section {
    padding: 40px 1rem;
  }

  .what-is-local__title {
  }

  .what-is-local__desc {
  }

  .setup-info__head-title {
    font-size: 1.125rem;
  }

  .setup-info__body {
    padding: 1.25rem;
  }

  .setup-info__item-text {
    font-size: 0.9375rem;
  }

  .setup-info__amount {
    font-size: 1.5rem;
  }

  .foundation-compare__side-text {
    font-size: 1.125rem;
  }

  .setup-process__card {
    padding: 16px;
  }
}

/* ==================== 小平板 (max-width: 992px) ==================== */
@media (max-width: 992px) {
}

/* ==================== 手機 (max-width: 480px) ==================== */
/* ============================================================
   手機版 (max-width: 480px) — 依 Figma 360:7341 設計實作
   ============================================================ */
@media (max-width: 480px) {
  .page-heading-title {
    max-width: 100%;
  }

  .what-is-local-section,
  .setup-info-section,
  .foundation-compare-section,
  .setup-process-section {
    padding: 28px 12px;
  }

  /* ===== what-is-local: 描述卡 + 標題重疊 ===== */
  .what-is-local-section {
    padding: 0 0 36px;
  }

  .what-is-local {
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    isolation: isolate;
    position: relative;
    max-width: 300px;
  }

  /* 手寫風副標：傾斜 3.65deg */
  .what-is-local__tagline {
    display: flex;
    width: 200px;
    margin: 0 auto 8px;
    transform: rotate(3.65deg);
    text-align: center;
  }

  .what-is-local__tagline-text {
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
    background: linear-gradient(0deg, #0b2f53, #1969b9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 500;
    letter-spacing: 0.5px;
  }

  /* 描述卡（藍色邊框白底）— 設計圖位於上方 */
  .what-is-local__desc-wrap {
    height: auto;
    padding: 28px 21px;
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
    order: 2;
    position: relative;
  }

  .what-is-local__desc {
    line-height: normal;
    text-align: center;
    color: #0b2f53;
    max-width: none;
  }

  /* 隱藏裝飾圖（手機版設計沒有這張） */
  .what-is-local__img {
    position: relative;
    width: 202px;
    height: auto;
    object-fit: contain;
    right: auto;
    top: auto;
    bottom: -6px;
  }

  /* 標題（藍色傾斜旗）疊在描述卡上方 */
  .what-is-local__heading {
    min-height: 70px;
  }

  .what-is-local__heading-inner {
    max-width: 238px;
    min-height: 38px;
  }

  .what-is-local__title {
    font-weight: 600;
  }

  .what-is-local__title-icon {
  }

  /* ===== setup-info: 三張卡直向堆疊 ===== */
  .setup-info-section {
    padding: 40px 0 40px;
    background-color: #e6f3ff;
  }

  .setup-info {
    flex-direction: column;
    gap: 28px;
    align-items: center;
    margin-top: 32px;
  }

  .setup-info__column {
    width: 290px;
    max-width: none;
    position: relative;
  }

  .setup-info__head {
    position: relative;
  }

  .setup-info__head-bar {
    width: 277px;
    min-height: 32px;
    margin-left: 13px;
    background-color: #e2ae3b;
  }

  .setup-info__head-bar--blue {
    background-color: #316eac;
  }

  .setup-info__head-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
    color: #fff;
    text-align: center;
  }

  /* 編號圓形 badge */
  .setup-info__head-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 31px;
    height: 36px;
    border: 1px solid #fff;
    border-radius: 18px;
    box-sizing: border-box;
    background: linear-gradient(0deg, #0b2f53, #1969b9);
    box-shadow: 3px 2px 8px rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }

  .setup-info__body {
    width: 277px;
    min-height: auto;
    margin-left: 13px;
    background-color: #fff;
    padding: 23px 40px;
    box-sizing: border-box;
  }

  .setup-info__list {
    width: 100%;
    max-width: none;
    gap: 20px;
  }

  .setup-info__item {
    gap: 4px;
  }

  .setup-info__item-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .setup-info__item-text {
    font-size: 12px;
    line-height: 1.4;
    color: #000;
  }

  /* 第三張卡：金額 + 紅色提醒 */
  .setup-info__body--amount {
    gap: 16px;
  }

  .setup-info__amount {
    font-size: 12px;
    line-height: 1.6;
    color: #000;
    text-align: center;
    max-width: 265px;
  }

  .setup-info__note {
    width: 100%;
    max-width: 277px;
    margin-left: 13px;
    min-height: 118px;
    padding: 14.5px 23px;
    background-color: #fff0f0;
    gap: 16px;
    box-sizing: border-box;
  }

  .setup-info__note-head {
    width: 100%;
    min-height: 28px;
    background-color: #c8274a;
    padding: 0;
  }

  .setup-info__note-label {
    color: #fff0f0;
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
  }

  .setup-info__note-text {
    width: 100%;
    color: #c8274a;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
  }

  /* ===== foundation-compare: 上下兩欄（全國 + 地方） ===== */
  .foundation-compare-section {
    padding: 28px 0 36px;
  }

  /* 全國性 = 直條 + 類別 + 內容；地方性 = 直條 + 類別(複本) + 內容；兩列上下排 */
  .foundation-compare {
    display: grid;
    grid-template-columns: 38px 101px 180px;
    grid-template-areas:
      "national-side  national-categories  national-content"
      "local-side     local-categories     local-content";
    align-items: stretch;
    justify-content: center;
    column-gap: 0;
    row-gap: 28px;
    margin-top: 32px;
  }

  .foundation-compare__side {
    width: 38px;
    min-height: auto;
    height: 100%;
    flex-shrink: 0;
  }

  .foundation-compare__side--national {
    grid-area: national-side;
  }

  .foundation-compare__side--local {
    grid-area: local-side;
  }

  /* table 容器透明化，讓內部 ul 直接成為 grid 子項 */
  .foundation-compare__table {
    display: contents;
  }

  /* 全國性內容欄 */
  .foundation-compare__column--national {
    grid-area: national-content;
    width: 180px;
    max-width: none;
  }

  /* 地方性內容欄 */
  .foundation-compare__column--local {
    grid-area: local-content;
    width: 180px;
    max-width: none;
  }

  /* 類別欄：桌機隱藏的手機複本，手機版顯示 + 放到地方性 row */
  .foundation-compare__categories {
    grid-area: national-categories;
    align-self: center;
    gap: 36px;
    padding: 0;
    position: relative;
    left: 16px;
  }

  .foundation-compare__categories--mobile {
    display: flex;
    grid-area: local-categories;
  }

  .foundation-compare__side--national {
    background: linear-gradient(0deg, #0b2f53, #1969b9);
  }

  .foundation-compare__side--local {
    background: linear-gradient(180deg, #e2ae3b, #e2753b);
  }

  .foundation-compare__side-text {
    width: 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
    color: #fff;
    text-align: center;
  }

  /* 類別格樣式 */
  .foundation-compare__category {
    width: 101px;
    min-height: 64px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
  }

  .foundation-compare__category--a {
    background-color: #316eac;
  }

  .foundation-compare__category--b {
    background-color: #0b2f53;
  }

  /* 比較內容格 */
  .foundation-compare__cell {
    width: 100%;
    min-height: 101px;
    padding: 0 30px;
    font-size: 12px;
    line-height: 1.4;
    color: #0b2f53;
    text-align: center;
  }

  /* ===== setup-process: 5 步驟卡片 ===== */
  .setup-process-section {
    padding: 54px 12px 80px;
    background-color: #d9d9d9;
    margin-bottom: -39px;
  }

  .setup-process {
    gap: 20px;
    margin: 32px auto 0;
  }

  .setup-process__step {
    width: 310px;
    max-width: none;
  }

  .setup-process__card {
    width: 310px;
    min-height: 124px;
    background-color: #fff;
    flex-direction: column;
    gap: 10px;
    padding: 0;
  }

  .setup-process__head {
    width: 100%;
    max-width: none;
    gap: 8px;
    justify-content: center;
  }

  .setup-process__head-label {
    width: 218px;
    min-height: 44px;
    max-width: none;
    padding: 7px 16px;
    gap: 17px;
  }

  .setup-process__head-label--blue {
    background-color: #1869b9;
  }

  .setup-process__step-number {
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
  }

  .setup-process__step-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
  }

  .setup-process__arrow-group {
    gap: 4px;
  }

  .setup-process__arrow {
    width: 9px;
    height: 12px;
  }

  .setup-process__desc {
    width: 258px;
    max-width: none;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
  }

  /* 卡片之間連接的黃色三角形 */
  .setup-process__connector {
    position: relative;
    bottom: 8px;
    left: 0;
    width: 86px;
    height: 28px;
    margin: 0 auto;
  }

  /* ===== service-benefits 代辦優點：3+2 圓形卡片 ===== */
  .service-benefits {
    gap: 16px;
    margin-top: 36px;
    padding-bottom: 32px;
  }

  .service-benefits__heading {
    width: 310px;
    max-width: none;
    min-height: 30px;
    border-radius: 60px;
    padding: 0;
    background-color: #0b2f53;
  }

  .service-benefits__title {
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
    color: #fff;
  }

  .service-benefits__list {
    flex-wrap: wrap;
    gap: 12px;
    max-width: 320px;
    justify-content: center;
  }

  .service-benefits__item {
    width: 96px;
    max-width: none;
    gap: 10px;
  }

  /* 設計圖只有 1 個小條（44×20）裝飾，這裡縮成 1 點即可 */
  .service-benefits__dots {
    flex-direction: column;
    gap: 4px;
  }

  .service-benefits__dot--lg {
    width: 12px;
    height: 12px;
  }

  .service-benefits__dot--md {
    width: 8px;
    height: 8px;
  }

  .service-benefits__dot--sm {
    width: 5px;
    height: 5px;
  }

  .service-benefits__card {
    width: 96px;
    height: 96px;
    min-height: 0;
    border-radius: 50%;
    border-width: 2px;
    padding: 0;
  }

  .service-benefits__text {
    font-size: 12px;
    line-height: 1.4;
    color: #000;
  }
}