/* ======================================================
   start.html 專用樣式
   目的：
   1. 跟上方 Top / Hero / Tabs 的 container 對齊
   2. 表單內容內縮置中，閱讀寬度舒服
   3. 桌機雙欄、手機單欄（響應式）
   ====================================================== */

/* ---------- 版面骨架 ---------- */

/* 單欄 grid（原本 index 是雙欄） */
.startPage .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* 卡片本體：吃滿 container，左右對齊 */
.startPage .card {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* 卡片內層：控制閱讀寬度、置中 */
.startPage .cardInner {
  max-width: 860px;        /* 桌機閱讀寬度，可調 820 / 900 / 960 */
  margin: 0 auto;
}

/* ---------- 表單基礎 ---------- */

.startPage .form label {
  display: block;
  margin: 14px 0 6px;
  font-weight: 500;
}

/* 必填星號 */
.startPage .req::after {
  content: " *";
  color: #b00020;
  font-weight: 700;
}

/* 輸入元件 */
.startPage .form input,
.startPage .form select,
.startPage .form textarea {
  width: 100%;
  display: block;
  padding: 10px 12px;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  font-size: 16px;
  box-sizing: border-box;
  background: #fff;
}

.startPage .form textarea {
  min-height: 120px;
  resize: vertical;
}

/* ---------- 兩欄排列 ---------- */

.startPage .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ---------- 提示文字 ---------- */

.startPage .muted.tip {
  font-size: 13px;
  color: #777;
  margin-top: 6px;
  line-height: 1.6;
}

/* ---------- CTA 區 ---------- */

.startPage .cta {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.startPage .ctaCenter {
  justify-content: center;
}

/* 返回上一頁用的間距 */
.startPage .mt16 {
  margin-top: 16px;
}

/* ---------- 狀態 / 錯誤 ---------- */

.startPage .error {
  margin-top: 12px;
  color: #b00020;
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- 響應式：手機 ---------- */

@media (max-width: 720px) {

  /* 表單改單欄 */
  .startPage .row {
    grid-template-columns: 1fr;
  }

  /* 內層寬度自然撐滿 */
  .startPage .cardInner {
    max-width: 100%;
  }

  /* CTA 按鈕直向排列（較好按） */
  .startPage .cta {
    flex-direction: column;
    align-items: stretch;
  }

}