/* 首頁與 /checklist 的銷售區塊（2026-10 首頁改版）。
   只有這兩頁連這支檔，style.css 沒有動。稽核與段落順序的來源：
   ~/weliveinusa/operations/homepage-loop/audit.md 的「steps｜My USA Plan」。
   wedding 有同一支的複本，「兩站共用」那幾段要一起改。 */

/* ── 兩站共用：這一頁關掉廣告時，版位整個收起來 ──────────────────────
   <html data-ads="off">（見 adsense.js）。程式庫不載入，留著空框只會多一塊寫著「廣告」的虛線框。
   清單頁的贊助格是 app.js 動態加上 .ad-slot 的，所以用 !important 壓過它的行內狀態。 */
html[data-ads="off"] .ad-slot { display: none !important; }

/* ── 兩站共用：hero 的報價行 ──────────────────────────────────────── */
.hero-offer {
  max-width: 34rem;
  margin: .35rem 0 0;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 5px 5px 0 rgba(21, 25, 30, .09);
}
.hero-offer strong { display: block; }
.hero .cta-row { margin-top: 1.5rem; }
.hero .lede.sub { margin: 1.1rem 0 0; }
/* 大標折行時兩行差不多長，不會剩一兩個字自己一行（不支援的瀏覽器照原本的折法）。 */
.hero h1,
.section-title { text-wrap: balance; }
/* 手機第一屏要看得到主按鈕。日文與英文的標題、說明比中文多一兩行，
   所以手機上把 hero 的字距與留白收緊一點；中文以外的語言標題再小一級。 */
@media (max-width: 48rem) {
  .hero-copy { padding-top: 7vw; }
  .hero .lede { font-size: 1rem; line-height: 1.6; }
  .hero-offer { padding: .65rem .85rem; }
  .hero .cta-row { margin-top: 1.1rem; }
  html:not([lang^="zh"]) .hero h1 { font-size: 30px; }
}

/* ── 兩站共用：hero 右半的 Racco 主視覺 ─────────────────────────────
   去背圖直接站在黃底上，取代原本那張藍色描邊卡。圖檔換新版時只要蓋掉同名檔案。
   字標留在左上角；圖靠右下，寬度有上限，兩者不重疊。 */
.hero-art .hero-mascot {
  position: absolute;
  right: 6%;
  bottom: 0;
  width: auto;
  height: min(64%, 470px);
  max-width: 70%;
  object-fit: contain;
  object-position: right bottom;
}
@media (max-width: 48rem) {
  .hero-art { min-height: 320px; }
  .hero-art > p { max-width: 42%; font-size: 40px; }
  .hero-art .hero-mascot { height: 88%; max-width: 54%; }
}

/* ── 兩站共用：韓文標題不要從字中間換行 ─────────────────────────────── */
:lang(ko) h1,
:lang(ko) h2 { word-break: keep-all; overflow-wrap: anywhere; }

/* ── 兩站共用：示範區鎖住的那一項 ──────────────────────────────────
   清單頁用同一組 class 把付費項的說明模糊掉；首頁這一項的說明是「完整版另外還有什麼」，要讀得到。 */
.demo .item.locked { opacity: 1; }
.demo .item.locked .item-title { color: var(--muted); }
.demo .item.locked .item-link { filter: none; user-select: auto; color: var(--muted); }

/* ── 兩站共用：「N 項一覽」每張卡左上的項數 ─────────────────────────── */
.inside-n {
  display: block;
  margin: 0 0 .55rem;
  font: 600 30px/1 "Bodoni Moda", serif;
  letter-spacing: -.03em;
}
.inside .diff-card p { font-size: .875rem; line-height: 1.7; }
.inside .pain-foot { margin-top: 2rem; margin-bottom: 0; max-width: 43rem; }
@media (max-width: 40rem) {
  .inside .diff-grid { grid-template-columns: 1fr; }
}

/* ── 兩站共用：價格區 ─────────────────────────────────────────────── */
.pricing .questions { max-width: 43rem; }
.price-note { margin: .5rem 0 0; font-size: .8125rem; line-height: 1.6; color: var(--muted); }
/* 推薦卡是藍底：style.css 的灰字在上面只有 3.7:1，而退款條件與解鎖方式就寫在這幾行。加深到 5.3:1。 */
.price-card-featured .price-desc,
.price-card-featured .trust-strip,
.price-card-featured .price-note { color: #3d4852; }
.trust-strip a { color: inherit; font-weight: 700; }
.price-card .trust-strip { margin-top: .9rem; }

/* ── 兩站共用：按鈕上的字折行時 ───────────────────────────────────
   「解鎖完整 91 項・US$9.90 →」在手機的價格卡裡放不下一行，箭頭會自己掉到第二行。
   兩行排得差不多長，手機上內距收一點。 */
.cta { text-wrap: balance; }
@media (max-width: 30rem) {
  .price-card .cta,
  .upsell .cta { padding-left: .9rem; padding-right: .9rem; }
}

/* ── 兩站共用：最後一組按鈕下面那一行 ───────────────────────────────── */
.final-cta .lede.sub { margin: 1.2rem 0 0; }

/* ── 兩站共用：區塊配圖（steps 的最後一段、wedding 的價格區）────────────
   圖的主角在右邊、左邊是留白的牆，所以裁切一律靠右。手機上圖在標題上方，桌機排在文字右邊。
   圖檔換新版時只要蓋掉同名檔案。 */
.final-art,
.pricing-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 100% 50%;
  border: 1px solid var(--line);
  background: var(--card);
}
.final-cta.has-art .final-art { margin: 0 0 2.2rem; }
@media (min-width: 48.0625rem) {
  .final-cta.has-art {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 4vw;
    align-items: center;
  }
  .final-cta.has-art .final-art { order: 2; margin: 0; aspect-ratio: 4 / 3; }
}

/* ── 兩站共用：footer 的兩顆按鈕 ─────────────────────────────────────
   黑底上的黑色按鈕看不出是按鈕。只在連了這支檔的頁面（首頁、/checklist）生效。 */
footer.site .cta { border-color: var(--signal); background: var(--signal); color: var(--ink); }
/* 頁尾按鈕上面那一句：style.css 給它墨色，頁尾底色也是墨色，等於看不見。 */
footer.site .footer-cta-lede { color: var(--bg); }
footer.site .cta-ghost { border-color: var(--bg); background: transparent; color: var(--bg); }

/* ── 誰做的：兩句話，不需要一整段的留白 ─────────────────────────────── */
.diff.maker { padding-top: 3rem; padding-bottom: 3.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.maker .section-title { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; }
.maker .diff-lede { margin-bottom: 0; max-width: 43rem; }

/* ── 其他清單：原本在 hero 上方，現在排在消息格之後 ──────────────────── */
.crosslinks { max-width: none; margin: 0; border-bottom: 1px solid var(--line); }

/* ── 兩站共用：/checklist 的購買區 ─────────────────────────────────── */
.upsell h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.12;
  margin-bottom: .9rem;
}
.upsell .cta { margin-top: .5rem; }

/* ── 兩站共用：指南牆 ─────────────────────────────────────────────
   style.css 沒有 .guide-list 的樣式，牆原本是一整欄預設排版。這裡排成卡片格；
   首頁先顯示 6 張（data-collapsed），按「看全部」才展開其餘的卡片與後面幾段。 */
.guide-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: none;
  margin: 0;
  padding: 5.5rem 9vw 0 9vw;
}
.guide-list > .eyebrow,
.guide-list > h2,
.guide-list > .intro,
.guide-list > .guide-more { grid-column: 1 / -1; }
.guide-list > h2 { margin: 0 0 .6rem; max-width: 43rem; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.12; }
.guide-list > .intro { margin: 0 0 2rem; max-width: 34rem; color: var(--muted); }
.guide-list .guide-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0 -1px -1px 0;
  padding: 1.1rem 1.2rem 1.3rem;
  border: 1px solid var(--line);
  background: var(--card);
}
.guide-list .guide-card h3 { margin: 0 0 .5rem; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.guide-list .guide-card h3 a { text-decoration: none; }
.guide-list .guide-card h3 a:hover { text-decoration: underline; text-underline-offset: .2rem; }
.guide-list .guide-card > p { margin: 0 0 .9rem; font-size: .875rem; line-height: 1.7; color: var(--muted); overflow-wrap: anywhere; }
.guide-list .guide-card > p:last-child { margin: auto 0 0; }
.guide-list .guide-card .button {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem;
  border: 1px solid var(--line);
  color: var(--ink); font-size: .8125rem; font-weight: 700; text-decoration: none;
}
.guide-list .guide-card .button:hover { background: var(--signal); }
.guide-list[data-collapsed] .guide-card:nth-of-type(n + 7) { display: none; }
.guide-list[data-collapsed] ~ .guide-list { display: none; }
.guide-more { margin: 2rem 0 0; }
.guide-more .cta { cursor: pointer; font: inherit; font-weight: 700; }
@media (max-width: 60rem) {
  .guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .guide-list { padding: 3.5rem 7vw 0 7vw; }
}
@media (max-width: 34rem) {
  .guide-list { grid-template-columns: minmax(0, 1fr); }
}

/* ── 兩站共用：手機底部購買條 ───────────────────────────────────────
   style.css 已經有 .sticky-cta 的固定定位（只在 48rem 以下出現）。這裡補三件事：
   帶價格的那一行字、頁內腳本要它收起來時的狀態、讓按鈕不被長字擠到換行。 */
.sticky-cta.is-hidden { display: none; }
/* 頁內腳本在跑的時候（html.sticky-io），購買條遇到頁尾會自己收起來，
   body 底下那段為它預留的空白就不需要了；腳本沒跑的瀏覽器仍然保留那段空白。 */
@media (max-width: 48rem) {
  html.sticky-io body { padding-bottom: 0; }
}
@media (max-width: 48rem) {
  .sticky-cta span {
    min-width: 0;
    font: 12px/1.45 "Huninn", "Noto Sans TC", system-ui, sans-serif;
    letter-spacing: 0;
  }
  .sticky-cta span b { display: block; font-size: 13px; font-weight: 800; }
  .sticky-cta .cta { flex: none; }
}
/* 第二行（價格那一句）包在 <i> 裡：320px 寬的手機上英文會把購買條撐成三行，那時只留第一行。 */
.sticky-cta span i { font-style: normal; }
/* 按鈕有兩個寫法：中文放得下整句「免費看前 30 項 →」；英、日、韓整句會把左邊那行字擠掉，用短的「免費看 →」。 */
html[lang^="zh"] .sticky-cta .sticky-short,
html:not([lang^="zh"]) .sticky-cta .sticky-long { display: none; }
@media (max-width: 340px) {
  .sticky-cta span i { display: none; }
}