/*
  首頁（正式入口）：山屋手帖的日系清新版本。
  沿用 styles.css 的色票與字型；首頁拿掉格線紙、改用柔和圓角與大量留白，
  照片是信任感的主角，檸檬只用在主視覺名牌一處。
*/

/* 首頁專用字型子集：只含首頁用宋體顯示的字、固定字重 500（約 38 KB）；
   全站版在 styles.css，首頁不載入。首頁標題新增字時用 tools/subset-font.cjs --home 重產 */
@font-face {
  font-family: 'Chiron Sung HK';
  src: url('fonts/chiron-sung-hk-home.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

/* 首頁需要的基本規則（色票來自 tokens.css，不再載入整份 styles.css） */
:root {
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
a {
  color: var(--sage);
  text-underline-offset: 4px;
}
::selection {
  background: var(--lemon);
  color: var(--indigo-deep);
}
:focus-visible {
  outline: 3px solid var(--brick);
  outline-offset: 2px;
}
.home h1,
.home h2,
.home h3 {
  text-wrap: balance;
}

.home {
  /* 插畫專用色（介於品牌色票之間的牆面、桌面與膚色） */
  --hm-wall: #f3efe6;
  --hm-table: #e6dfd0;
  --hm-table-edge: #d6ccb8;
  --hm-skin: #efcfae;
  /* 陰影與靛藍底上的半透明值 */
  --hm-shadow: rgba(26, 34, 56, 0.22);
  --hm-shadow-strong: rgba(26, 34, 56, 0.28);
  --hm-on-indigo-line: rgba(233, 236, 244, 0.5);
  --hm-on-indigo-rule: rgba(185, 193, 214, 0.3);
  --hm-on-indigo-hover: rgba(255, 255, 255, 0.08);
  --hm-on-indigo-press: rgba(255, 255, 255, 0.16);
  --hm-tap: rgba(191, 84, 70, 0.18);
  --hm-r: 18px;
  --hm-r-sm: 10px;
  --hm-gutter: clamp(16px, 4vw, 40px);
  --hm-max: 1120px;
  background: var(--paper);
  background-image: none;
  color: var(--ink);
  line-height: 1.9;
}
.home h1,
.home h2,
.home h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0;
}
.home p {
  margin: 0;
  /* 避免段落最後一行只剩一兩個字 */
  text-wrap: pretty;
}
/* 觸控：去掉雙擊縮放延遲，點擊回饋用品牌色 */
.home a,
.home button,
.home summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: var(--hm-tap);
}
/* 錨點跳轉時標題不貼齊畫面頂端 */
.home [id] {
  scroll-margin-top: 24px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: var(--hm-r-sm);
  background: var(--lemon);
  color: var(--indigo-deep);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}
.hm-head :focus-visible,
.hm-hero-band :focus-visible,
.hm-foot :focus-visible {
  outline-color: var(--lemon);
}

/* ---------- 頂區 ---------- */
.hm-head {
  background: var(--indigo);
  color: var(--on-indigo);
}
/* 主視覺在 <main> 裡（讓「跳到主要內容」不會跳過標題與發案按鈕），視覺上仍接續頂區的靛藍 */
.hm-hero-band {
  /* 底部 4px 用紙色：避免 SVG 山形與靛藍背景之間的次像素縫隙露出一條灰線 */
  background: linear-gradient(var(--indigo) calc(100% - 4px), var(--paper) 0);
  color: var(--on-indigo);
}
.hm-bar {
  max-width: var(--hm-max);
  margin: 0 auto;
  padding: 22px var(--hm-gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}
.hm-brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  color: var(--surface);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.12rem;
  letter-spacing: 0.1em;
}
.hm-brand svg {
  width: 28px;
  height: 28px;
}
.hm-brand:hover {
  color: var(--lemon);
}
.hm-nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
  font-size: 0.92rem;
}
.hm-nav a,
.hm-login {
  color: var(--on-indigo);
  text-decoration: none;
}
.hm-nav a {
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.hm-nav a:hover {
  border-color: var(--on-indigo-soft);
}
.hm-login {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 7px 18px;
  border: 1px solid var(--hm-on-indigo-line);
  border-radius: 999px;
  font-size: 0.9rem;
}
.hm-login:hover {
  background: var(--hm-on-indigo-hover);
}
.hm-login:active {
  background: var(--hm-on-indigo-press);
}

.hm-hero {
  max-width: var(--hm-max);
  margin: 0 auto;
  padding: clamp(12px, 2.4vw, 28px) var(--hm-gutter) clamp(32px, 4vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  grid-template-areas:
    'title photos'
    'lead photos';
  column-gap: clamp(32px, 6vw, 88px);
  row-gap: 16px;
}
/* 電腦版放大尺度：標題約 1.55 倍，照片衝出版心貼齊視窗右緣 */
/* 照片貼齊右緣、飛鳥從畫面外飛進來時，都不能撐出橫向捲動 */
.hm-hero-band {
  overflow-x: clip;
}
@media (min-width: 901px) and (min-height: 501px) {
  .hm-hero {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(40px, 6vw, 96px);
  }
  .hm-hero .hm-title {
    font-size: calc(clamp(2rem, 3vw, 2.45rem) * 1.55);
    letter-spacing: 0.12em;
  }
  .hm-hero .hm-photo-main {
    margin-right: calc(-1 * max(var(--hm-gutter), (100vw - var(--hm-max)) / 2 + var(--hm-gutter)));
  }
  .hm-hero .hm-photo-main img {
    aspect-ratio: 4 / 3;
    border-radius: var(--hm-r) 0 0 var(--hm-r);
  }
}
.hm-title {
  grid-area: title;
  justify-self: start;
  writing-mode: vertical-rl;
  font-size: clamp(2rem, 3vw, 2.45rem);
  line-height: 1.55;
  letter-spacing: 0.18em;
  color: var(--surface);
  /* 7 字 ×（1em＋字距 0.18em）再留餘裕，避免直排斷成三行 */
  height: 9.4em;
}
.hm-lead {
  grid-area: lead;
  align-self: end;
  max-width: 28em;
}
.hm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 28px;
}
.hm-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 30px;
  border-radius: 999px;
  background: var(--brick);
  color: var(--surface);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hm-cta:hover {
  background: var(--brick-deep);
  color: var(--surface);
}
@media (hover: hover) {
  .hm-cta:hover {
    transform: translateY(-1px);
  }
}
/* 按下時的回饋：觸控裝置沒有 hover，靠這裡確認有按到 */
.hm-cta:active {
  background: var(--brick-deep);
  transform: translateY(1px);
}
.hm-try {
  color: var(--surface);
  text-decoration: underline;
  text-decoration-color: var(--lemon);
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  padding: 8px 0;
}
.hm-try:hover {
  color: var(--lemon);
  text-decoration-thickness: 2px;
}
.hm-free {
  margin-top: 18px !important;
  font-size: 0.86rem;
  color: var(--on-indigo-soft);
}

/* 主視覺照片：單張整體空間照 */
.hm-photos {
  grid-area: photos;
  align-self: center;
  position: relative;
}
.hm-photo {
  margin: 0;
}
.hm-photo-main {
  position: relative;
  animation: hm-settle 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hm-photo-main .hm-art,
.hm-photo-main img {
  aspect-ratio: 3 / 2;
}
.hm-tag {
  position: absolute;
  right: 20px;
  bottom: -22px;
  padding: 10px 16px;
  border-radius: var(--hm-r-sm);
  background: var(--lemon);
  color: var(--indigo-deep);
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.5;
  box-shadow: 0 10px 24px var(--hm-shadow);
}

/* 插畫顏色一律取自色票，品牌色調整時插畫會跟著變 */
.hm-art .f-apricot {
  fill: var(--apricot);
}
.hm-art .f-brick {
  fill: var(--brick);
}
.hm-art .f-indigo {
  fill: var(--indigo);
}
.hm-art .f-lemon {
  fill: var(--lemon);
}
.hm-art .f-linen {
  fill: var(--linen);
}
.hm-art .f-paper {
  fill: var(--paper);
}
.hm-art .f-sage {
  fill: var(--sage);
}
.hm-art .f-skin {
  fill: var(--hm-skin);
}
.hm-art .f-table {
  fill: var(--hm-table);
}
.hm-art .f-wall {
  fill: var(--hm-wall);
}
.hm-art .s-brick {
  stroke: var(--brick);
}
.hm-art .s-oak {
  stroke: var(--oak);
}
.hm-art .s-olive {
  stroke: var(--olive);
}
.hm-art .s-table-edge {
  stroke: var(--hm-table-edge);
}

/* 照片框：目前放自繪插畫（.hm-art），換成真人照片 <img> 後沿用同樣的圓角與比例 */
.hm-art,
.hm-photos img,
.hm-portrait img {
  display: block;
  width: 100%;
  /* img 的 width/height 屬性只用來預留比例，實際高度交給 aspect-ratio */
  height: auto;
  border-radius: var(--hm-r);
  object-fit: cover;
}

/* 兩座人字屋頂：固定長寬比，任何寬度坡度都一樣（約 22°） */
.hm-ridge {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 220;
  fill: var(--paper);
  margin-bottom: -1px;
}

/* 白色色鉛筆線條的飛鳥（純裝飾）：兩隻不同姿態，在直排標題右側偏下 */
.hm-birds {
  grid-area: title;
  justify-self: end;
  align-self: end;
  position: relative;
  width: 180px;
  height: 142px;
  margin-bottom: 14%;
  pointer-events: none;
}
.hm-fb-defs {
  position: absolute;
}
.hm-fb {
  position: absolute;
  fill: none;
  stroke: #fdfcf7;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hm-fb-eye {
  fill: #fdfcf7;
  stroke: none;
}
/* 大的一隻翅膀上揚，小的一隻展翅滑翔，錯開成斜線 */
.hm-fb.b1 {
  animation: hm-glide-in 1.2s 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  width: 54%;
  left: 0;
  top: 18%;
  transform: rotate(-8deg);
}
.hm-fb.b2 {
  animation: hm-glide-in 1.2s 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  width: 40%;
  right: 0;
  bottom: 6%;
  transform: rotate(6deg);
}
@media (max-width: 900px) {
  .hm-birds {
    grid-area: actions;
    width: 114px;
    height: 66px;
    margin-bottom: 0;
  }
}
/* 手機橫拿高度太矮，先不顯示飛鳥 */
@media (orientation: landscape) and (max-height: 500px) {
  .hm-birds {
    display: none;
  }
}

/* ---------- 內容區塊 ---------- */
.hm-section {
  max-width: var(--hm-max);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--hm-gutter) 0;
}
.hm-section h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  line-height: 1.4;
}
.hm-head-block {
  max-width: 34em;
}
.hm-head-block p {
  margin-top: 16px;
  color: var(--ink-soft);
}

/* 五步驟：桌面橫向時間軸 */
.hm-steps {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
  position: relative;
}
.hm-steps::before {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  top: 22px;
  height: 1px;
  background: var(--line);
}
.hm-steps li {
  position: relative;
}
.hm-n {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--brick-deep);
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1;
}
.hm-steps li:last-child .hm-n {
  border-color: var(--brick);
  background: var(--brick);
  color: var(--surface);
}
.hm-steps h3 {
  font-size: 1.25rem;
  line-height: 1.5;
}
.hm-steps p {
  margin-top: 6px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* 段落中的發案按鈕：讓案主滑到哪裡都能發案 */
.hm-inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 44px;
}
.hm-inline-cta p {
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.hm-inline-cta-quiet {
  margin-top: 32px;
  justify-content: center;
}
/* 按鈕在上、說明在下，兩者置中 */
.hm-inline-cta-center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

/* 拱形卡 */
.hm-arches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  /* 三張並排，撐滿版心寬度，左右留白相等 */
  max-width: none;
  margin-inline: auto;
  margin-top: 56px;
}
.hm-arch {
  padding: 40px 32px 40px;
  border-radius: 999px 999px var(--hm-r) var(--hm-r);
  background: var(--apricot);
  text-align: center;
  color: var(--indigo);
}
/* 三張卡各用一種線條色（磚紅、鼠尾草綠、原木深色）；標題、清單點與內框細線跟著同色 */
.hm-arch:nth-child(1) {
  --hm-card: var(--brick-deep);
}
.hm-arch:nth-child(2) {
  --hm-card: var(--sage);
}
.hm-arch:nth-child(3) {
  --hm-card: var(--oak-ink);
}
.hm-arch {
  position: relative;
  color: var(--hm-card, var(--indigo));
}
.hm-arch::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1.5px solid currentColor;
  border-radius: inherit;
  opacity: 0.45;
  pointer-events: none;
}
/* 兩張拱形卡的單色色鉛筆線稿插圖（AI 生成黑色線稿後染色，原檔在 design/assets/home/） */
.hm-arch .hm-arch-art {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto 14px;
}
/* 三人插圖四周留白較多，放大一點讓份量和左卡一致 */
.hm-arch .hm-arch-art-quiz {
  transform: scale(1.2);
  transform-origin: 50% 55%;
}
.hm-arch .hm-arch-art-team {
  transform: scale(1.1);
  transform-origin: 50% 60%;
}
/* 插圖是卡片主角，標題次之，說明文字再退一階 */
.hm-arch h3 {
  font-size: 1.42rem;
  letter-spacing: 0.04em;
  color: currentColor;
}
.hm-arch p {
  margin-top: 10px;
  font-size: 1.05rem;
  color: var(--oak-ink);
  line-height: 1.85;
}
.hm-arch-list {
  display: inline-block;
  margin: 14px 0 0;
  font-size: 0.95rem;
  padding: 0 0 0 1.2em;
  text-align: left;
  color: var(--oak-ink);
  line-height: 1.85;
}
.hm-arch-list li::marker {
  color: currentColor;
}

/* 常見問題：分成「找整理師」與「付款與保障」兩組 */
.hm-faq-groups {
  max-width: 960px;
  margin-inline: auto;
  margin-top: 32px;
  display: grid;
  gap: 40px;
}
.hm-faq-group > h3 {
  margin-bottom: 14px;
  font-size: 1.15rem;
  color: var(--ink-soft);
}
.hm-faq-list {
  display: grid;
  gap: 12px;
}
.hm-faq-list details {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
}
.hm-faq-list details[open] {
  border-color: var(--line-strong);
  border-left: 4px solid var(--brick);
}
.hm-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  border-radius: var(--hm-r-sm);
}
.hm-faq-list summary::-webkit-details-marker {
  display: none;
}
.hm-faq-list summary::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  margin: -5px 2px 0 0;
  border-right: 1.5px solid var(--brick);
  border-bottom: 1.5px solid var(--brick);
  transform: rotate(45deg);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hm-faq-list details[open] summary::after {
  margin-top: 5px;
  transform: rotate(225deg);
}
.hm-faq-list summary:hover {
  color: var(--brick-deep);
}
.hm-faq-list summary:active {
  background: var(--paper);
}
.hm-faq-list details[open] p {
  animation: hm-unfold 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.hm-faq-list details p {
  padding: 0 22px 20px;
  max-width: 40em;
  color: var(--ink-soft);
}
.hm-faq-list details p a:hover {
  color: var(--brick-deep);
  text-decoration-thickness: 2px;
}

/* 整理師專區 */
.hm-join {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  padding-bottom: clamp(72px, 9vw, 120px);
}
/* 整理師專區人像：只放鼠尾草綠色鉛筆線稿人物，不加底色與邊框 */
.hm-portrait {
  margin: 0;
}
.hm-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
}
.hm-join-body > p {
  margin-top: 14px;
  max-width: 30em;
  color: var(--ink-soft);
}
.hm-join-steps {
  list-style: none;
  counter-reset: hm-join;
  margin: 26px 0 32px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.hm-join-steps li {
  counter-increment: hm-join;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: baseline;
  font-size: 1.2rem;
}
.hm-join-steps li::before {
  content: counter(hm-join);
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--brick-deep);
}
.hm-ghost {
  display: flex;
  width: fit-content;
  margin-inline: auto;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 10px 26px;
  border: 1.5px solid var(--sage);
  border-radius: 999px;
  color: var(--sage);
  font-weight: 700;
  text-decoration: none;
}
.hm-ghost:hover,
.hm-ghost:active {
  background: var(--sage);
  color: var(--surface);
}

/* ---------- 頁尾 ---------- */
.hm-foot {
  position: relative;
  background: var(--indigo);
  color: var(--on-indigo-soft);
  padding: max(96px, calc(15.28vw + 56px)) var(--hm-gutter) 36px;
}
.hm-ridge-top {
  position: absolute;
  top: -1px;
  left: 0;
  /* 左右翻轉，和頁首的屋頂頭尾呼應；屋頂朝上 */
  transform: scaleX(-1);
  margin: 0;
}
.hm-foot-row {
  max-width: calc(var(--hm-max) - 2 * var(--hm-gutter));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px 48px;
}
.hm-foot h2 {
  color: var(--surface);
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.4;
}
.hm-foot-row p {
  margin-top: 12px;
  color: var(--on-indigo);
}
.hm-fine {
  max-width: calc(var(--hm-max) - 2 * var(--hm-gutter));
  margin: 64px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--hm-on-indigo-rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: 0.82rem;
}
.hm-fine nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: 20px;
}
.hm-fine a {
  display: inline-block;
  padding: 10px 0;
  color: var(--on-indigo);
  text-underline-offset: 4px;
}
.hm-fine a:hover {
  color: var(--surface);
  text-decoration-color: var(--lemon);
}

/* 頁首飛鳥：從右上方滑翔進來，停在標題旁（首頁唯一的入場動作） */
@keyframes hm-glide-in {
  from {
    opacity: 0;
    translate: 72px -36px;
  }
  45% {
    opacity: 1;
  }
}
/* 拱形卡線稿：捲到畫面中時由左到右描出來，像鉛筆正在畫；不支援捲動時間軸的瀏覽器直接顯示完成圖 */
@supports (animation-timeline: view()) {
  .hm-arch .hm-arch-art {
    animation: hm-draw linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 40%;
  }
}
@keyframes hm-draw {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes hm-fade {
  from {
    opacity: 0;
  }
}
@keyframes hm-unfold {
  from {
    opacity: 0;
    translate: 0 -6px;
  }
}
@keyframes hm-settle {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* ---------- 響應式 ---------- */
@media (max-width: 900px) {
  /* 手機與直拿平板：直排標題與說明並排，照片（插畫）在下方佔滿寬度，真人照片到位後臉不會只剩縮圖 */
  .hm-hero {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'title actions'
      'photos photos'
      'free free';
    column-gap: 22px;
    row-gap: 20px;
    padding-top: 12px;
  }
  .hm-lead {
    display: contents;
  }
  /* 直排標題右側放按鈕，上下排列 */
  .hm-actions {
    grid-area: actions;
    align-self: center;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
  }
  .hm-free {
    grid-area: free;
    margin-top: 0 !important;
  }
  .hm-title {
    font-size: clamp(1.65rem, 4.4vw, 2.3rem);
    letter-spacing: 0.14em;
    height: 9em;
  }
  .hm-photos {
    align-self: start;
  }
  .hm-tag {
    right: 10px;
    bottom: -18px;
    padding: 8px 12px;
    font-size: 0.86rem;
  }
  .hm-steps {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 36px;
  }
  .hm-steps::before {
    left: 21px;
    right: auto;
    top: 22px;
    bottom: 22px;
    width: 1px;
    height: auto;
  }
  .hm-steps li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 18px;
    padding-bottom: 26px;
  }
  .hm-n {
    grid-row: span 2;
    margin: 0;
  }
  .hm-steps p {
    margin-top: 2px;
  }
}
@media (max-width: 760px) {
  /* 手機寬度窄，屋頂再加高才看得出人字形（約 35°） */
  .hm-ridge {
    aspect-ratio: 1440 / 400;
  }
  .hm-foot {
    padding-top: calc(27.78vw + 48px);
  }
  .hm-bar {
    flex-wrap: wrap;
    gap: 12px 16px;
    padding-top: 16px;
    padding-bottom: 12px;
  }
  /* 手機版不放頂部導覽列：避免擠壓標題、搶走第一屏的注意力 */
  .hm-nav {
    display: none;
  }
  .hm-login {
    margin-left: auto;
  }
  .hm-arches {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hm-arch {
    padding: 34px 22px 30px;
  }
  .hm-arch .hm-arch-art {
    max-width: 320px;
  }
  .hm-join {
    grid-template-columns: 1fr;
  }
  /* 真人照片到位前，手機不顯示整理師區插畫，讓標題直接開頭；換成照片後改為小尺寸顯示在標題上方 */
  .hm-portrait {
    display: none;
  }
  .hm-foot-row {
    grid-template-columns: 1fr;
  }
  .hm-foot-row .hm-cta {
    justify-self: start;
  }
  .hm-fine nav {
    justify-content: flex-start;
  }
}
/* 寬螢幕：容器放寬，照片不會比筆電上還小 */
@media (min-width: 1600px) {
  .home {
    --hm-max: 1240px;
  }
}
/* 觸控裝置：頂部導覽也要有 44px 的點擊高度 */
@media (pointer: coarse) {
  .hm-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
/* 小手機（320–360px）：收緊標題與間距，讓發案按鈕留在第一屏 */
@media (max-width: 360px) {
  .hm-hero {
    row-gap: 14px;
    column-gap: 16px;
  }
  .hm-title {
    font-size: 1.45rem;
  }
  .hm-photo-main .hm-art,
  .hm-photo-main img {
    aspect-ratio: 16 / 10;
  }
}
/* 手機橫拿：高度只有 300–500px，改成標題、說明與按鈕、照片三欄並排 */
@media (orientation: landscape) and (max-height: 500px) {
  .hm-bar {
    padding-top: 10px;
    padding-bottom: 6px;
  }
  .hm-hero {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.9fr);
    grid-template-areas:
      'title actions photos'
      'title free photos';
    align-items: start;
    column-gap: 24px;
    row-gap: 12px;
    padding-top: 6px;
    padding-bottom: 20px;
  }
  .hm-title {
    font-size: 1.5rem;
    height: 9.2em;
  }
  .hm-lead {
    display: contents;
  }
  .hm-actions {
    grid-area: actions;
    margin-top: 0;
  }
  .hm-free {
    grid-area: free;
    margin-top: 0 !important;
  }
  .hm-photos {
    align-self: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hm-photo-main,
  .hm-fb.b1,
  .hm-fb.b2,
  .hm-arch .hm-arch-art {
    animation: none;
  }
  /* 展開仍保留淡入，讓人看得出哪一題打開了，只是不移動 */
  .hm-faq-list details[open] p {
    animation: hm-fade 0.2s ease-out;
  }
  .hm-cta,
  .hm-faq-list summary::after {
    transition: none;
  }
  .hm-cta:hover,
  .hm-cta:active {
    transform: none;
  }
}

/* 點頁首導覽連結時平滑捲動到對應區塊（速度由瀏覽器決定）；系統設定「減少動態」時直接跳轉 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* 「怎麼進行」動畫：標題先升起；圓圈之間的細線隨捲動畫出（桌面由左到右、手機由上到下），圓圈依序彈出。
   捲動時間軸，不支援時直接顯示；減少動態時不播 */
@keyframes hmx-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes hmx-pop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes hmx-line-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hmx-line-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hm-flow .hm-head-block { animation: hmx-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
    .hm-steps::before { transform-origin: left; animation: hmx-line-x linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .hm-n { animation: hmx-pop linear both; animation-timeline: view(); animation-range: entry 15% cover 35%; }
    .hm-steps li:nth-child(2) .hm-n { animation-range: entry 20% cover 38%; }
    .hm-steps li:nth-child(3) .hm-n { animation-range: entry 25% cover 41%; }
    .hm-steps li:nth-child(4) .hm-n { animation-range: entry 30% cover 44%; }
    .hm-steps li:nth-child(5) .hm-n { animation-range: entry 35% cover 47%; }
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  @supports (animation-timeline: view()) {
    .hm-steps::before { transform-origin: top; animation-name: hmx-line-y; }
  }
}

/* 「收費與常見問題」動畫：標題、兩組小標與每一題由上到下一題一題升起。捲動時間軸，不支援時直接顯示；減少動態時不播 */
@keyframes hmq-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hm-faq .hm-head-block, .hm-faq-group > h3 { animation: hmq-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
    .hm-faq-list details { animation: hmq-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    .hm-faq-list details:nth-child(2) { animation-range: entry 4% cover 32%; }
    .hm-faq-list details:nth-child(3) { animation-range: entry 8% cover 36%; }
    .hm-faq-list details:nth-child(4) { animation-range: entry 12% cover 40%; }
  }
}

/* 主按鈕掃光：滑過時一道淡淡的亮光由左掃過（只在有 hover 的裝置、且未開「減少動態」時） */
@keyframes hmc-shine { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(230%) skewX(-18deg); } }
@media (prefers-reduced-motion: no-preference) {
  .hm-cta { position: relative; overflow: hidden; isolation: isolate; }
  .hm-cta::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: translateX(-130%) skewX(-18deg); pointer-events: none; z-index: -1; }
  @media (hover: hover) { .hm-cta:hover::before { animation: hmc-shine 0.7s ease-out; } }
}

/* 「你是整理師？」動畫：人像從左滑入、文字欄從右滑入，在中間會合。捲動時間軸，不支援時直接顯示；減少動態時不播。
   動畫起點在畫面外，用 clip 避免窄螢幕出現橫向捲軸 */
@keyframes hmj-left { from { opacity: 0; transform: translateX(-56px); } to { opacity: 1; transform: none; } }
@keyframes hmj-right { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: none; } }
.hm-join { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hm-join .hm-portrait { animation: hmj-left linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    .hm-join .hm-join-body { animation: hmj-right linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  }
}

/* 頁尾「家裡哪個角落，一直想整理？」整列平穩升起淡入。捲動時間軸，不支援時直接顯示；減少動態時不播 */
@keyframes hmf-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hm-foot-row { animation: hmf-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}

/* 「怎麼進行」導言字級放大到 1.05rem（步驟標題 1.25rem、步驟說明 1rem 見上方） */
.hm-flow .hm-head-block p {
  font-size: 1.05rem;
}