/* 子頁（方案介紹／費用說明／主機租賃／常見問題／聯絡我們）樣式。全部限定在 .lp-page 底下，不影響首頁購買流程。
   色票與字型沿用 style.css：主色 #EFC030、深色 #dba911、內文灰 #6d6e70、淡黃底 #fdf6e0。 */
.lp-page { color: #000; padding: 56px 0 80px; }
.lp-page .lp-container { max-width: 1140px; margin: 0 auto; padding: 0 16px; }

.lp-hero { text-align: center; margin-bottom: 48px; }
.lp-hero .lp-eyebrow { font-size: .8125rem; letter-spacing: 2px; color: #6d6e70; text-transform: uppercase; margin-bottom: 8px; }
.lp-hero h1 { font-size: 1.75rem; font-weight: 500; letter-spacing: 2.88px; margin: 0 0 16px; }
.lp-hero p { color: #6d6e70; line-height: 1.8; margin: 0 auto; max-width: 640px; }

.lp-section { margin-bottom: 64px; }
.lp-section > h2 { font-size: 1.375rem; font-weight: 500; letter-spacing: 1.5px; text-align: center; margin: 0 0 8px; }
.lp-section > .lp-section-desc { text-align: center; color: #6d6e70; margin: 0 0 32px; }

/* 方案卡片 */
.lp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.lp-plan { display: flex; flex-direction: column; border: 1px solid #ddd; border-radius: 16px; padding: 28px 24px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.lp-plan:hover { border-color: #EFC030; box-shadow: 0 8px 24px rgba(0, 0, 0, .06); }
.lp-plan h3 { font-size: 1.125rem; font-weight: 500; letter-spacing: 1px; margin: 0 0 8px; }
.lp-plan .lp-tagline { color: #6d6e70; font-size: .875rem; line-height: 1.7; margin: 0 0 20px; min-height: 3.4em; }
.lp-plan .lp-price { font-size: 1.75rem; font-weight: 500; margin: 0 0 4px; }
.lp-plan .lp-price small { font-size: .875rem; color: #6d6e70; font-weight: 400; margin-left: 4px; }
.lp-plan .lp-price-note { font-size: .8125rem; color: #6d6e70; margin: 0 0 20px; }
.lp-plan ul { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.lp-plan li { position: relative; padding: 6px 0 6px 22px; font-size: .9375rem; line-height: 1.6; }
.lp-plan li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 10px; height: 6px; border-left: 2px solid #EFC030; border-bottom: 2px solid #EFC030; transform: rotate(-45deg); }

.lp-btn { display: inline-block; text-align: center; border-radius: 999px; padding: 10px 28px; font-size: .9375rem; letter-spacing: 1px; border: 1px solid #EFC030; background: #EFC030; color: #000; transition: background-color .2s, border-color .2s; }
.lp-btn:hover, .lp-btn:focus { background: #dba911; border-color: #dba911; color: #000; text-decoration: none; }
.lp-btn-outline { background: #fff; }
.lp-btn-outline:hover, .lp-btn-outline:focus { background: #fdf6e0; border-color: #EFC030; }
.lp-plan .lp-btn { display: block; }

/* 規格表 */
.lp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lp-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9375rem; }
.lp-table th, .lp-table td { padding: 14px 16px; border-bottom: 1px solid #eee; text-align: center; vertical-align: middle; }
.lp-table thead th { font-weight: 500; border-bottom: 2px solid #EFC030; }
.lp-table thead th .lp-price { display: block; font-size: 1.125rem; margin-top: 4px; }
.lp-table tbody th { font-weight: 400; color: #6d6e70; text-align: left; white-space: nowrap; }
.lp-table .lp-span { color: #000; }

/* 加值服務 */
.lp-addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.lp-addon { border-radius: 16px; background: #fdf6e0; padding: 24px; }
.lp-addon h3 { font-size: 1rem; font-weight: 500; letter-spacing: 1px; margin: 0 0 12px; }
.lp-addon dl { margin: 0; }
.lp-addon dl div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed rgba(0, 0, 0, .12); font-size: .9375rem; }
.lp-addon dl div:last-child { border-bottom: 0; }
.lp-addon dt { font-weight: 400; }
.lp-addon dd { margin: 0; white-space: nowrap; }

/* 頁尾行動呼籲 */
.lp-cta { text-align: center; border-radius: 16px; background: #000; color: #fff; padding: 48px 24px; }
.lp-cta h2 { font-size: 1.375rem; font-weight: 500; letter-spacing: 1.5px; margin: 0 0 12px; color: #fff; }
.lp-cta p { color: #bbb; margin: 0 0 24px; }
.lp-cta .lp-btn { margin: 6px; }
.lp-cta .lp-btn-outline { background: transparent; color: #fff; }
.lp-cta .lp-btn-outline:hover { background: rgba(255, 255, 255, .1); }

/* 常見問題 */
.lp-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 32px; }
.lp-filter a { border: 1px solid #ddd; border-radius: 999px; padding: 6px 20px; color: #000; font-size: .9375rem; }
.lp-filter a:hover { border-color: #EFC030; text-decoration: none; }
.lp-filter a.is-active { background: #EFC030; border-color: #EFC030; }
.lp-faq { max-width: 860px; margin: 0 auto; }
.lp-faq-item { border: 1px solid #eee; border-radius: 12px; padding: 20px 24px; margin-bottom: 16px; background: #fff; }
.lp-faq-item h2, .lp-faq-item h3 { font-size: 1.0625rem; font-weight: 500; line-height: 1.6; margin: 0 0 10px; padding-left: 28px; position: relative; }
.lp-faq-item h2::before, .lp-faq-item h3::before { content: "Q"; position: absolute; left: 0; top: 0; color: #dba911; font-weight: 700; }
.lp-faq-item .lp-answer { color: #333; line-height: 1.8; padding-left: 28px; }
.lp-faq-item .lp-answer p { margin: 0 0 8px; }
.lp-faq-item .lp-answer p:last-child { margin-bottom: 0; }
.lp-faq-item .lp-answer a { color: #dba911; }
.lp-hero .lp-btn { margin: 20px 6px 0; }

/* 聯絡我們 */
.lp-contact { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; align-items: start; }
.lp-contact-aside { border-radius: 16px; background: #fdf6e0; padding: 32px 28px; }
.lp-contact-aside h2 { font-size: 1.125rem; font-weight: 500; letter-spacing: 1px; margin: 0 0 16px; }
.lp-contact-aside ul { padding-left: 1.2em; margin: 0 0 24px; line-height: 1.9; color: #333; }
.lp-contact-aside p { color: #6d6e70; font-size: .9375rem; line-height: 1.8; margin: 0 0 20px; }
.lp-form .lp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lp-form .lp-field { margin-bottom: 16px; }
.lp-form label { display: block; font-size: .875rem; color: #6d6e70; margin-bottom: 6px; }
.lp-form label .lp-req { color: #dba911; margin-left: 2px; }
.lp-form input[type=text], .lp-form textarea { width: 100%; border: 1px solid #ddd; border-radius: 8px; padding: 10px 14px; font-size: 1rem; background: #fff; }
.lp-form input[type=text]:focus, .lp-form textarea:focus { outline: none; border-color: #EFC030; box-shadow: 0 0 0 3px rgba(239, 192, 48, .2); }
.lp-form .help-block { display: block; color: #c0392b; margin-top: 4px; }
.lp-form .lp-submit { text-align: right; margin-top: 8px; }

@media (max-width: 767.98px) {
  .lp-page { padding: 32px 0 56px; }
  .lp-hero { margin-bottom: 32px; }
  .lp-hero h1 { font-size: 1.375rem; letter-spacing: 1.5px; }
  .lp-section { margin-bottom: 48px; }
  .lp-contact { grid-template-columns: 1fr; }
  .lp-form .lp-form-row { grid-template-columns: 1fr; gap: 0; }
  .lp-form .lp-submit { text-align: center; }
  .lp-faq-item { padding: 16px 18px; }
}

/* 費用說明／主機租賃：說明型內容 */
.lp-summary { border-radius: 16px; background: #fdf6e0; padding: 28px 32px; margin: 0 auto 64px; max-width: 860px; }
.lp-summary h2 { font-size: 1.125rem; font-weight: 500; letter-spacing: 1px; margin: 0 0 16px; }
.lp-summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; }
.lp-summary dt { font-weight: 400; color: #333; }
.lp-summary dd { margin: 0; font-weight: 500; }
.lp-summary .lp-note { margin: 16px 0 0; font-size: .875rem; color: #6d6e70; }
.lp-prose { max-width: 860px; margin: 0 auto; line-height: 1.9; color: #333; }
.lp-prose h3 { font-size: 1.0625rem; font-weight: 500; margin: 28px 0 8px; color: #000; }
.lp-prose p { margin: 0 0 12px; }
.lp-prose ul, .lp-prose ol { padding-left: 1.4em; margin: 0 0 12px; }
.lp-prose li { margin-bottom: 4px; }
.lp-prose a { color: #dba911; }
.lp-prose .lp-note { font-size: .875rem; color: #6d6e70; }
.lp-table.lp-table-calc { min-width: 0; max-width: 640px; margin: 0 auto; }
.lp-table.lp-table-calc td { text-align: right; white-space: nowrap; }
.lp-table.lp-table-calc tfoot th, .lp-table.lp-table-calc tfoot td { font-weight: 500; border-top: 2px solid #EFC030; border-bottom: 0; padding: 14px 16px; }
.lp-table .lp-sub { display: block; font-size: .8125rem; color: #6d6e70; font-weight: 400; }
.lp-table td.lp-left { text-align: left; }
@media (max-width: 767.98px) {
  .lp-summary { padding: 20px; margin-bottom: 48px; }
  .lp-summary dl { grid-template-columns: 1fr; gap: 2px; }
  .lp-summary dd { margin-bottom: 10px; }
}
.lp-table.lp-table-wide { min-width: 860px; }