/* MobinogiM 工具官網 —— 柔和水彩 / 童書插畫風，對齊瑪奇 Mobile 的美術方向 */

:root {
  /* 羊皮紙底色系：暖，不用純灰 */
  --paper: #FBF7EF;
  --paper-2: #F5EFE3;
  --card: #FFFFFF;
  --ink: #4A3F35;
  --ink-soft: #6E6154;
  --ink-faint: #9B8D7E;
  --rule: #E8DFCF;

  /* 主色：艾琳的草原綠 */
  --leaf: #6FA96B;
  --leaf-deep: #517F4E;
  --leaf-soft: #EAF3E7;
  /* 副色：天空藍 */
  --sky: #7BB8D4;
  --sky-soft: #E6F2F7;
  /* 點綴：杏桃橘與花瓣粉 */
  --apricot: #E8A05C;
  --apricot-soft: #FBF0E2;
  --petal: #E9A6AE;

  --ok: #5B9B57;
  --warn: #C8823C;
  --danger: #C4626A;

  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
          "PingFang TC", "Microsoft JhengHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r: 14px;
  --shadow: 0 2px 10px rgba(74, 63, 53, .06), 0 8px 28px rgba(74, 63, 53, .05);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

/* 頁面頂部的柔和漸層，模擬水彩暈染 */
body::before {
  content: '';
  position: fixed; inset: 0 0 auto 0; height: 380px;
  background: linear-gradient(180deg, #EFF6EA 0%, rgba(251, 247, 239, 0) 100%);
  pointer-events: none; z-index: 0;
}
.page { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--leaf-deep); }

/* ---------- 導覽列 ---------- */
header.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 247, 239, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav-in {
  max-width: 1040px; margin: 0 auto; padding: .7rem 1.2rem;
  display: flex; align-items: center; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); }
.brand img {
  width: 40px; height: 40px;
  /* 新 logo 已是去背 PNG/WebP，不需要圓角裁切，也不要底色 */
  border-radius: 0;
  object-fit: contain;
}
.brand b { font-family: var(--serif); font-size: 1.08rem; letter-spacing: .01em; }
.brand span { font-size: .68rem; color: var(--ink-faint); letter-spacing: .1em; display: block; margin-top: -4px; }
nav.links { margin-left: auto; display: flex; gap: .25rem; flex-wrap: wrap; }
nav.links a {
  padding: .42rem .85rem; border-radius: 999px;
  text-decoration: none; color: var(--ink-soft); font-size: .92rem;
}
nav.links a:hover { background: var(--leaf-soft); color: var(--leaf-deep); }
nav.links a.on { background: var(--leaf); color: #fff; }

/* ---------- 容器 ---------- */
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 1.2rem; }
.narrow { max-width: 760px; }
section { padding: 3.2rem 0; }
.sec-head { text-align: center; margin-bottom: 2.2rem; }
.sec-head h2 {
  font-family: var(--serif); font-size: 1.7rem; margin: 0 0 .4rem;
  letter-spacing: .01em; text-wrap: balance;
}
.sec-head p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

/* ---------- 首頁 hero ---------- */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.2rem; align-items: center; padding: 3rem 0 2rem; }
.hero h1 {
  font-family: var(--serif); font-size: clamp(1.9rem, 4.2vw, 2.7rem);
  line-height: 1.35; margin: 0 0 .9rem; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--leaf-deep); }
.hero p.lead { margin: 0 0 1.5rem; font-size: 1.05rem; color: var(--ink-soft); }
.hero-art { position: relative; }
.hero-art img { border-radius: 22px; }

.btn-row { display: flex; gap: .7rem; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .7rem 1.4rem; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: .96rem;
  border: 1.5px solid transparent; cursor: pointer;
  font-family: var(--sans);
}
.btn.primary { background: var(--leaf); color: #fff; box-shadow: 0 4px 14px rgba(111, 169, 107, .28); }
.btn.primary:hover { background: var(--leaf-deep); }
.btn.ghost { background: #fff; border-color: var(--rule); color: var(--ink); }
.btn.ghost:hover { border-color: var(--leaf); color: var(--leaf-deep); }

/* ---------- 卡片 ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.3rem; }
.card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 1.4rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: .6rem;
}
.card img.thumb { border-radius: 11px; margin-bottom: .3rem; }
.card h3 { font-family: var(--serif); font-size: 1.12rem; margin: 0; }
.card p { margin: 0; color: var(--ink-soft); font-size: .93rem; }
.card .ico { width: 54px; height: 54px; border-radius: 13px; }

/* ---------- Q&A ---------- */
.qa { display: flex; flex-direction: column; gap: 1rem; }
details.q {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden;
}
details.q > summary {
  list-style: none; cursor: pointer; padding: 1.15rem 1.3rem;
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--serif); font-size: 1.06rem; font-weight: 600;
}
details.q > summary::-webkit-details-marker { display: none; }
details.q > summary .qi {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  background: var(--leaf-soft);
}
details.q > summary::after {
  content: '＋'; margin-left: auto; color: var(--ink-faint);
  font-size: 1.1rem; flex: 0 0 auto;
}
details.q[open] > summary::after { content: '－'; }
details.q[open] > summary { background: var(--leaf-soft); }
.q-body { padding: .3rem 1.3rem 1.4rem; border-top: 1px solid var(--rule); }
.q-body > :first-child { margin-top: 1rem; }
.q-body p { margin: 0 0 .9rem; }
.q-body ul { margin: 0 0 .9rem; padding-left: 1.3rem; }
.q-body li { margin-bottom: .4rem; }
.q-body img.illo {
  border-radius: 11px; margin: 1.2rem auto;
  max-width: 300px;   /* 插圖是點綴，不該壓過文字 */
}

.note {
  border-left: 3px solid var(--apricot); background: var(--apricot-soft);
  padding: .9rem 1.1rem; border-radius: 0 9px 9px 0; margin: 1rem 0;
  font-size: .93rem; color: var(--ink-soft);
}
.note b { color: var(--warn); }
.note.green { border-left-color: var(--leaf); background: var(--leaf-soft); }
.note.green b { color: var(--leaf-deep); }

/* ---------- 表單 ---------- */
form.contact { display: flex; flex-direction: column; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field > label { font-size: .93rem; font-weight: 600; }
.field .hint { font-size: .85rem; color: var(--ink-faint); font-weight: 400; }
input[type=text], input[type=email], select, textarea {
  font-family: var(--sans); font-size: 1rem;
  padding: .72rem .9rem; border: 1.5px solid var(--rule);
  border-radius: 10px; background: #fff; color: var(--ink); width: 100%;
}
textarea { resize: vertical; line-height: 1.8; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(111, 169, 107, .15);
}
.topic-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .7rem; }
.topic {
  border: 1.5px solid var(--rule); border-radius: 12px; padding: .9rem;
  background: #fff; cursor: pointer; display: flex; gap: .7rem; align-items: center;
}
.topic:hover { border-color: var(--leaf); }
.topic input { display: none; }
.topic img { width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto; }
.topic b { display: block; font-size: .95rem; }
.topic span { font-size: .8rem; color: var(--ink-faint); }
.topic.sel { border-color: var(--leaf); background: var(--leaf-soft); }
.hp { position: absolute; left: -9999px; }

.msg { padding: .8rem 1rem; border-radius: 10px; font-size: .93rem; display: none; }
.msg.show { display: block; }
.msg.ok { background: var(--leaf-soft); color: var(--leaf-deep); }
.msg.err { background: #FBEBEC; color: var(--danger); }

/* ---------- 下載 ---------- */
.dl-box {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 1.8rem; box-shadow: var(--shadow); text-align: center;
}
.dl-box .ver { font-family: var(--mono); font-size: .85rem; color: var(--ink-faint); }
.steps { counter-reset: s; display: flex; flex-direction: column; gap: 1rem; }
.step {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 1.1rem 1.3rem;
}
.step::before {
  counter-increment: s; content: counter(s);
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
  background: var(--leaf); color: #fff; display: grid; place-items: center;
  font-size: .9rem; font-weight: 700;
}
.step h4 { margin: 0 0 .25rem; font-size: 1rem; font-family: var(--serif); }
.step p { margin: 0; font-size: .92rem; color: var(--ink-soft); }

table.spec { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.spec th, table.spec td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--rule); }
table.spec th { color: var(--ink-faint); font-weight: 600; width: 34%; }

/* ---------- 頁尾 ---------- */
footer.site {
  border-top: 1px solid var(--rule); margin-top: 2rem;
  padding: 2.2rem 0 3rem; color: var(--ink-faint); font-size: .88rem;
}
footer.site .wrap { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
footer.site a { color: var(--ink-soft); }
.disclaimer { font-size: .82rem; line-height: 1.7; }

.page-head { text-align: center; padding: 2.6rem 0 1.4rem; }
.page-head img { width: 148px; margin: 0 auto 1rem; border-radius: 18px; }
.page-head h1 { font-family: var(--serif); font-size: 1.9rem; margin: 0 0 .4rem; }
.page-head p { margin: 0; color: var(--ink-soft); }

/* 導覽列在窄螢幕改為上下兩行，避免與品牌區重疊 */
@media (max-width: 700px) {
  .nav-in { flex-wrap: wrap; gap: .5rem 1rem; }
  nav.links {
    margin-left: 0; width: 100%;
    justify-content: center; gap: .15rem;
  }
  nav.links a { padding: .3rem .55rem; font-size: .82rem; }
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero .btn-row { justify-content: center; }
  .hero-art { order: -1; max-width: 380px; margin: 0 auto; }
  nav.links a { padding: .35rem .6rem; font-size: .86rem; }
  .brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- 命名故事：Pulse ---------- */
.pulse-sec { padding: 1rem 0 3.4rem; }
.pulse-card {
  position: relative;
  background: linear-gradient(170deg, #FFFFFF 0%, #F7FBF5 100%);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 2.6rem 2.2rem 2.2rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.pulse-eyebrow {
  margin: 0 0 .3rem !important;
  font-size: .74rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--leaf);
}
.pulse-card h2 {
  font-family: var(--serif); font-size: 1.6rem;
  margin: 0 0 1.3rem; letter-spacing: .01em;
}
.pulse-card h2 em { font-style: normal; color: var(--leaf-deep); }
.pulse-card p {
  margin: 0 0 1rem; color: var(--ink-soft);
  font-size: 1.02rem; line-height: 2;
}
.pulse-sign {
  margin: 1.6rem 0 0 !important;
  padding-top: 1.3rem; border-top: 1px dashed var(--rule);
  color: var(--ink) !important;
}
.pulse-sign b { color: var(--leaf-deep); font-size: 1.1rem; }
.pulse-sign span { color: var(--ink-faint); font-size: .95rem; }

/* 心跳波形：靜態時是一排柔和的線，動起來像脈搏 */
.pulse-wave {
  position: absolute; top: 0; right: 0;
  display: flex; align-items: center; gap: 5px;
  height: 62px; padding: 0 1.6rem;
  opacity: .5;
}
.pulse-wave span {
  display: block; width: 3px; border-radius: 3px;
  background: var(--leaf);
  animation: beat 2.4s ease-in-out infinite;
}
.pulse-wave span:nth-child(1) { height: 12px; animation-delay: 0s; }
.pulse-wave span:nth-child(2) { height: 22px; animation-delay: .1s; }
.pulse-wave span:nth-child(3) { height: 34px; animation-delay: .2s; }
.pulse-wave span:nth-child(4) { height: 18px; animation-delay: .3s; }
.pulse-wave span:nth-child(5) { height: 40px; animation-delay: .4s; }
.pulse-wave span:nth-child(6) { height: 26px; animation-delay: .5s; }
.pulse-wave span:nth-child(7) { height: 14px; animation-delay: .6s; }
.pulse-wave span:nth-child(8) { height: 30px; animation-delay: .7s; }
.pulse-wave span:nth-child(9) { height: 20px; animation-delay: .8s; }
.pulse-wave span:nth-child(10){ height: 11px; animation-delay: .9s; }
@keyframes beat {
  0%, 100% { transform: scaleY(1); opacity: .55; }
  50%      { transform: scaleY(1.45); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-wave span { animation: none; }
}
@media (max-width: 620px) {
  .pulse-card { padding: 2.2rem 1.4rem 1.8rem; }
  .pulse-wave { display: none; }
}

/* ============================================================
   v2：圖像融入頁面 —— 場景插畫當作區塊背景，不再是浮動的貼紙
   ============================================================ */

/* 主視覺：整幅風景鋪滿，文字疊在上方留白處 */
.hero-full {
  position: relative;
  min-height: 520px;
  display: grid;
  align-items: center;
  margin-bottom: 1rem;
  isolation: isolate;
}
.hero-full::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center 62%;
  /* 上下與左右都漸淡到頁面底色，讓圖「長」進頁面而不是貼上去 */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
  z-index: -1;
}
.hero-full .hero-copy {
  max-width: 620px;
  padding: 3.5rem 0 4.5rem;
}
.hero-full h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.3; margin: 0 0 1rem;
  letter-spacing: .01em; text-wrap: balance;
  /* 文字疊在畫面上，用極淡的光暈確保可讀 */
  text-shadow: 0 1px 2px rgba(251, 247, 239, .9), 0 0 22px rgba(251, 247, 239, .8);
}
.hero-full h1 em { font-style: normal; color: var(--leaf-deep); }
.hero-full .lead {
  font-size: 1.06rem; color: var(--ink-soft); margin: 0 0 1.6rem;
  text-shadow: 0 1px 10px rgba(251, 247, 239, .95);
  max-width: 30em;
}

/* 敘事帶：一整條場景橫幅，內容疊在上面 */
.band {
  position: relative;
  padding: 4.2rem 0;
  isolation: isolate;
  overflow: hidden;
}
.band::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--band-img);
  background-size: cover;
  background-position: center;
  opacity: .42;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  z-index: -2;
}
.band::after {
  /* 底色薄膜：保證文字在任何插畫上都讀得清楚 */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(251, 247, 239, .82) 0%,
    rgba(251, 247, 239, .70) 50%,
    rgba(251, 247, 239, .88) 100%);
  z-index: -1;
}
.band.dark::after {
  background: linear-gradient(180deg,
    rgba(30, 38, 34, .74) 0%,
    rgba(30, 38, 34, .66) 50%,
    rgba(30, 38, 34, .80) 100%);
}
.band.dark, .band.dark h2, .band.dark p { color: #F3EFE6; }
.band.dark .pulse-sign { color: #F3EFE6 !important; }
.band.dark h2 em, .band.dark .pulse-sign b { color: #9FD49A; }
.band.dark .pulse-eyebrow { color: #9FD49A; }
.band.dark .pulse-sign span { color: rgba(243, 239, 230, .72); }
.band.dark .pulse-sign { border-top-color: rgba(243, 239, 230, .22); }

/* 敘事區塊：圖與文並排，圖以柔邊融入 */
.story {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2.6rem; align-items: center;
  padding: 3rem 0;
}
.story:nth-of-type(even) .story-art { order: 2; }
.story > div:not(.story-art) { min-width: 0; }
.story-art {
  position: relative; min-height: 230px; border-radius: 18px;
  background-size: cover; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 92% 88% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 88% at 50% 50%, #000 55%, transparent 100%);
}
.story h3 {
  font-family: var(--serif); font-size: 1.35rem; margin: 0 0 .7rem;
}
.story p { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.95; }

/* 頁面標頭橫幅：取代原本的方形小圖 */
.page-banner {
  position: relative; padding: 3.4rem 0 2.6rem;
  text-align: center; isolation: isolate; overflow: hidden;
}
.page-banner::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--band-img);
  background-size: cover; background-position: center;
  opacity: .38;
  -webkit-mask-image: radial-gradient(ellipse 78% 100% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 100% at 50% 50%, #000 40%, transparent 100%);
  z-index: -1;
}
.page-banner h1 {
  font-family: var(--serif); font-size: 2rem; margin: 0 0 .5rem;
  text-shadow: 0 1px 12px rgba(251, 247, 239, .9);
}
.page-banner p { margin: 0; color: var(--ink-soft); }

@media (max-width: 860px) {
  .hero-full { min-height: 420px; }
  .hero-full::before { background-position: center 58%; }
  .story { grid-template-columns: 1fr; gap: 1.4rem; }
  .story:nth-of-type(even) .story-art { order: 0; }
  .story-art { min-height: 180px; }
  .band { padding: 3rem 0; }
}

/* ---------- v2：移除 icon 後的樣式調整 ---------- */

/* Q&A 標題改用細色條，不再依賴 icon */
details.q > summary {
  padding-left: 1.5rem;
  position: relative;
}
details.q > summary::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 1.5em;
  background: var(--leaf); border-radius: 0 3px 3px 0;
  opacity: .55;
}
details.q[open] > summary::before { opacity: 1; }
details.q > summary .qi { display: none; }

/* 主題選項：文字為主，選中時以底色與左邊條標示 */
.topic {
  padding: 1rem 1.1rem;
  position: relative;
  transition: border-color .15s, background .15s;
}
.topic::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 3px 0 0 3px;
  background: var(--leaf); opacity: 0;
}
.topic.sel::before { opacity: 1; }
.topic img { display: none; }

/* 內文插圖：改為寬幅、柔邊，與段落融合 */
.q-body img.illo {
  width: 100%;
  /* 裁成橫幅比例，避免正方形插圖把答案內文擠到很下面 */
  aspect-ratio: 21 / 8;
  object-fit: cover;
  object-position: center 55%;
  border-radius: 14px;
  margin: 1.4rem 0;
  -webkit-mask-image: radial-gradient(ellipse 96% 94% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 96% 94% at 50% 50%, #000 62%, transparent 100%);
}
/* story 區的插圖同樣固定比例，避免高度失控 */
.story-art { aspect-ratio: 16 / 10; min-height: 0; }

/* ============================================================
   操作介面頁：實機截圖以柔邊嵌入，不用方框裁切
   ============================================================ */

/* 截圖容器：無邊框、無底色，圖本身已帶柔邊 alpha */
.shot {
  display: block;
  width: 100%;
  height: auto;
  /* 圖檔本身已帶柔邊 alpha；這裡只再輕輕收一次四角，
     範圍放大到 82% 才開始衰減，避免把面板內容也吃掉。 */
  -webkit-mask-image:
    radial-gradient(ellipse 100% 100% at 50% 50%, #000 82%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 100% 100% at 50% 50%, #000 82%, transparent 100%);
  filter: drop-shadow(0 8px 26px rgba(74, 63, 53, .13));
}

/* 交錯的展示區塊：圖與說明並排 */
.feat {
  display: grid;
  grid-template-columns: 1.35fr .8fr;
  gap: 2.6rem;
  align-items: center;
  padding: 3rem 0;
}
.feat.flip { grid-template-columns: .8fr 1.35fr; }
.feat.flip .feat-shot { order: 2; }
.feat-copy h3 {
  font-family: var(--serif);
  font-size: 1.32rem;
  margin: 0 0 .6rem;
  display: flex; align-items: baseline; gap: .6rem;
  text-wrap: balance;
}
.feat-copy h3 .n {
  font-family: var(--mono); font-size: .78rem;
  color: var(--leaf); font-weight: 500; flex: 0 0 auto;
}
.feat-copy p { margin: 0 0 .8rem; color: var(--ink-soft); line-height: 1.95; }
.feat-copy p:last-child { margin-bottom: 0; }
.feat-copy ul {
  margin: 0; padding-left: 1.2rem;
  display: flex; flex-direction: column; gap: .35rem;
  color: var(--ink-soft); font-size: .95rem;
}

/* 小尺寸截圖置中，不要被拉伸 */
.shot.narrow { max-width: 600px; margin-inline: auto; }
.shot.tall { max-width: 380px; margin-inline: auto; }

/* 分隔用的細線，帶柔邊 */
.soft-rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg,
    transparent, var(--rule) 22%, var(--rule) 78%, transparent);
}

/* 重點提示條 */
.kicker {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--leaf-deep); background: var(--leaf-soft);
  padding: .25rem .6rem; border-radius: 999px;
  margin-bottom: .7rem;
}

@media (max-width: 900px) {
  .feat, .feat.flip { grid-template-columns: 1fr; gap: 1.4rem; padding: 2rem 0; }
  .feat.flip .feat-shot { order: 0; }
  .shot.narrow, .shot.tall { max-width: 460px; }
}

/* 首頁主視覺的品牌標誌：去背 PNG，直接浮在風景上 */
.hero-logo {
  width: 132px; height: auto;
  margin: 0 0 1.1rem;
  filter: drop-shadow(0 3px 14px rgba(251, 247, 239, .95))
          drop-shadow(0 1px 3px rgba(74, 63, 53, .12));
}
@media (max-width: 860px) {
  .hero-logo { margin-inline: auto; width: 116px; }
}

/* 三張並排的原則卡：窄容器下仍維持一列，避免 2+1 的不平衡 */
.cards.cards-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .cards.cards-3 { grid-template-columns: 1fr; }
}