/* ==========================================================================
   TieTie 官網設計系統
   --------------------------------------------------------------------------
   方向：奶茶／宣紙文青。刻意避開「AI 生成感」的三組預設（#F4F1EA 底配高對比
   襯線配赭紅、近黑底配螢光綠、broadsheet 零圓角密排）。

   兩個關鍵決定：
   1. 強調色不自己配 —— 直接用 app 裡真實的便條 8 色（`ItemCardColors.swift`
      的 notePalette 算出來的 hex）。官網跟產品是同一套顏色，不是兩套語彙。
   2. signature = 便利貼牆。卡片微旋轉、堆疊、hover 抬起。這是貼貼獨有的形態，
      別的產品抄不走 —— 版面骨架直接長成產品的樣子。
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
    /* 紙與墨：宣紙米底，焙茶棕墨。不是純黑白 —— 純黑在米底上太硬 */
    --paper:        #F7F3EC;
    --paper-warm:   #F1EADD;   /* 沉一階的區塊底 */
    --paper-deep:   #E8DECB;   /* 分隔帶、footer */
    /* 🔴 三個字色的值是**算出來的不是挑出來的**（8/4 Lighthouse 抓到對比不足後修）。
       每一個都對「它實際會壓在的所有底色」量過 WCAG AA 4.5:1：
       --ink-3 與 --gold-deep 要同時對 #F7F3EC / #F1EADD / #E8DECB 三種米底達標，
       --ink-on-note 要對全部 8 色便條達標（最難的是玫瑰 #F5ABC6，實測 4.93）。
       ⚠️ 改這三個值一定要重量，別憑「看起來夠深」—— 原本的 #A87C2E 只有 3.40。 */
    --ink:          #33261C;   /* 主墨（焙茶棕）· 對米底 13.23 */
    --ink-2:        #6B5849;   /* 次要文字 · 6.09 */
    --ink-3:        #6E5C4B;   /* 標籤、meta · 5.76 / 5.33 / 4.78（含 footer 的深米底）*/
    --ink-on-note:  #544739;   /* 便條色上的小字 · 對 8 色最低 4.93 */
    --rule:         #D9CDB8;   /* 髮絲線（裝飾，不套文字門檻）*/

    /* 品牌金：跟 app 的 tietieGold 同一個 */
    --gold:         #D4A94E;
    --gold-deep:    #7F5C22;   /* 金「字」用這個 · 5.49 / 5.08。--gold 只當底或裝飾 */
    --gold-wash:    #FBF3DE;

    /* 便條 8 色 —— 從 app 的 notePalette (light) 實算出來的，不是手挑近似色 */
    --note-amber:   #F9DF90;
    --note-sky:     #9FCFF1;
    --note-coral:   #F6BBA7;
    --note-mint:    #9DEDDD;
    --note-violet:  #E7B4F4;
    --note-linen:   #F4EADB;
    --note-grass:   #A7EEA9;
    --note-rose:    #F5ABC6;

    /* 字：Fraunces 的 opsz 軸讓大標長得像鉛字、小字保持可讀。
       中文走霞鶩文楷 —— 不用 Noto，那是「預設」不是「選擇」*/
    /* ⚠️ fallback 一律接對齊過度量的那一份（見檔案開頭的 @font-face）——
       直接寫 Georgia 會在字體換上來時整段重排。 */
    --display: 'Fraunces', 'Fraunces-fallback', 'LXGW WenKai TC', Georgia, serif;
    --body:    'LXGW WenKai TC', 'WenKai-fallback', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* 節奏：6pt grid，跟 app 的 railUnit 同一個基數 */
    --u: 6px;
    --gutter: clamp(20px, 4vw, 40px);
    --max: 1180px;
    --radius-lg: 20px;
    --radius:    14px;
    --radius-sm: 9px;

    --shadow-rest:  0 1px 2px rgba(51, 38, 28, .06), 0 8px 24px -12px rgba(51, 38, 28, .14);
    --shadow-lift:  0 2px 4px rgba(51, 38, 28, .07), 0 22px 48px -18px rgba(51, 38, 28, .26);

    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 字體度量對齊（降 CLS）----------
   🔴 為什麼需要這段（8/4 Lighthouse 實測 CLS 0.046）：
   Google Fonts 走 `display=swap`，所以字體載入完成的那一刻會從系統 fallback
   換成 Fraunces / 文楷 —— 兩者的字寬與行高不同，整段文字重新排版就是版面跳動。

   解法不是關掉 swap（那會變成 FOIT，文字先隱形更糟），而是**讓 fallback 的
   度量對齊真字體**：override 一份同名的本機字體，用 size-adjust 與 ascent/descent
   把它撐成跟目標字體一樣的行高與字寬，換上來的瞬間就幾乎不位移。

   ⚠️ 數值要對著實際字體量。這裡的 105% / 88% 是對 Fraunces 與 LXGW WenKai TC
   量出來的近似值 —— 改字體就要重量，不要沿用。 */
@font-face {
    font-family: 'Fraunces-fallback';
    src: local('Georgia'), local('Times New Roman');
    size-adjust: 105%;
    ascent-override: 88%;
    descent-override: 22%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'WenKai-fallback';
    src: local('PingFang TC'), local('Heiti TC');
    size-adjust: 100%;
    ascent-override: 90%;
    descent-override: 20%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Inter-fallback';
    src: local('Helvetica Neue'), local('Arial');
    size-adjust: 100%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* 手機上少掉「等 300ms 看你要不要雙擊縮放」的延遲 ——
       這頁沒有需要雙擊縮放的東西（圖片本來就縮到剛好），
       但 pinch 縮放仍然可用（沒動 user-scalable）。 */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(212, 169, 78, .18);
}

/* 紙紋：極輕的 turbulence，讓米底不是死板的一片色。
   pointer-events:none 才不會吃掉點擊 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    /* ⚠️ 0.3 + multiply 太重 —— 疊在深色標題上會看起來像髒點（8/4 實測）。
       紙紋的作用只是讓米底不死板，看得出來就過頭了。 */
    opacity: .14;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)' opacity='.1'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
    outline: 2.5px solid var(--gold-deep);
    outline-offset: 3px;
    border-radius: 4px;
}

/* 跳過導覽的無障礙連結：平常收在畫面外，鍵盤 focus 才滑進來 */
.skip {
    position: fixed;
    top: 10px; left: 50%;
    z-index: 999;
    transform: translate(-50%, -160%);
    padding: 11px 22px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 999px;
    font-size: 15px;
    transition: transform .25s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 760px; }

section { padding: clamp(64px, 9vw, 120px) 0; }
.band-warm { background: var(--paper-warm); border-block: 1px solid var(--rule); }

/* ---------- Type scale ---------- */
h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.012em;
    font-variation-settings: 'opsz' 40, 'SOFT' 40;
    /* 防孤字：不讓標題最後一行只剩一兩個字（Web Interface Guidelines 的
       typography 條）。balance 會讓瀏覽器把幾行的長度算平均。 */
    text-wrap: balance;
    /* 錨點跳過來時不要被 sticky nav 蓋住標題 */
    scroll-margin-top: 88px;
}

/* 段落用 pretty 而不是 balance —— balance 對長段落成本高且效果不明顯，
   pretty 只處理「最後一行不要孤字」那件事。 */
p, .lead, figcaption { text-wrap: pretty; }

/* ⚠️ 中文字的視覺體積比拉丁文字大得多（方塊字滿框，沒有 x-height 那種留白）
   —— 同樣的 px 數中文看起來大一號多。所以上限訂 58 而不是拉丁版常見的 72+，
   實測 74px 會讓 4 字一行的標題溢出可視區。英文頁在自己的 style 區塊裡放大。 */
h1 { font-size: clamp(34px, 4.6vw, 58px); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: clamp(29px, 3.9vw, 45px); }
h3 { font-size: clamp(20px, 2.1vw, 25px); }

.lead {
    font-size: clamp(17px, 1.35vw, 20px);
    color: var(--ink-2);
    line-height: 1.8;
    max-width: 33em;
}

/* eyebrow：小字大間距。⚠️ 中文不套 letter-spacing（會撐開字距很醜），
   所以這個 class 只給拉丁文字用 */
.eyebrow {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-deep);
}

/* 金色重點字：底線是手繪感的粗筆觸，不是 text-fill 漸層（那個很 AI）。
   ⚠️ 用 box-decoration-break 而不是 white-space:nowrap ——
   後者會讓中文標題在不該斷的地方硬撐，底線位置反而跑掉（8/4 實測）。
   改成 inline 背景之後，換行時上下兩段各自畫一條，語義正確。 */
.mark {
    background-image: linear-gradient(to top,
        rgba(212, 169, 78, .38) 0, rgba(212, 169, 78, .38) .32em, transparent .32em);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding-inline: .05em;
}

.sec-head { max-width: 40em; margin-bottom: clamp(38px, 5vw, 62px); }
.sec-head .eyebrow { display: block; margin-bottom: 14px; }
.sec-head p { margin-top: 16px; color: var(--ink-2); font-size: 17px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center p { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 26px;
    border-radius: 999px;
    font-family: var(--body);
    font-size: 16px;
    font-weight: 700;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease),
                background-color .22s var(--ease), border-color .22s var(--ease);
}
.btn-primary {
    background: var(--ink);
    color: var(--paper);
    box-shadow: var(--shadow-rest);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn-ghost {
    border: 1.5px solid var(--rule);
    color: var(--ink-2);
}
.btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); background: rgba(255,255,255,.5); }

kbd {
    font-family: var(--mono);
    font-size: .84em;
    padding: 2.5px 7px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--rule);
    box-shadow: 0 1.5px 0 var(--rule);
    color: var(--ink);
    white-space: nowrap;
}

/* ---------- Nav ---------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(247, 243, 236, .82);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s, box-shadow .3s;
}
.nav.stuck { border-bottom-color: var(--rule); box-shadow: 0 6px 20px -14px rgba(51,38,28,.3); }
.nav-in {
    display: flex;
    align-items: center;
    gap: clamp(14px, 3vw, 34px);
    padding-block: 13px;
}
/* logo 就是「回首頁」的連結（網站慣例，所以 nav 裡不另開「首頁」項）。
   ⚠️ 但它原本沒有任何 hover 回饋 → 看起來不像可以點（8/4 哲哥回報點不到）。
   爪印微微轉一下 + 文字轉金，讓「這可以點」這件事自己講出來。 */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 19px;
    transition: color .22s var(--ease);
}
.logo img {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    transition: transform .3s var(--ease);
}
.logo:hover { color: var(--gold-deep); }
.logo:hover img { transform: rotate(-9deg) scale(1.06); }
.nav-links { display: flex; gap: clamp(14px, 2vw, 26px); margin-left: auto; font-size: 15.5px; color: var(--ink-2); }
.nav-links a { position: relative; padding-block: 4px; }
.nav-links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--gold); transform: scaleX(0); transform-origin: left;
    transition: transform .26s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); }
.nav-side { display: flex; align-items: center; gap: 14px; }
.lang {
    font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em;
    padding: 7px 13px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-2);
    /* ⚠️ 屬性要列明。`transition: .2s` 等於 `transition: all .2s` ——
       瀏覽器會去監看每一個可動畫屬性，成本高而且可能動到你沒想動的東西
       （Web Interface Guidelines 明列的 anti-pattern）。 */
    transition: color .2s var(--ease), border-color .2s var(--ease);
}
.lang:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.nav .btn { padding: 10px 20px; font-size: 14.5px; }

/* ---------- Hero ---------- */
.hero { padding: clamp(48px, 7vw, 88px) 0 clamp(50px, 7vw, 90px); position: relative; }
.hero-grid {
    display: grid;
    /* 右欄給固定的下限（便利貼牆要 420 才不被壓扁），左欄吃剩下的。
       ⚠️ 不能兩欄都用 fr —— 那樣視窗一窄右欄就先被犧牲。 */
    grid-template-columns: minmax(0, 1fr) minmax(420px, 500px);
    gap: clamp(34px, 5vw, 64px);
    align-items: center;
}
.hero h1 { margin-block: 20px 0; }
.hero .lead { margin-top: 24px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.hero-trust {
    display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px;
    font-size: 14.5px; color: var(--ink-3);
}
.hero-trust li { list-style: none; display: flex; align-items: center; gap: 7px; }
.hero-trust li::before {
    content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%;
    background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333261C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* ---------- Signature：便利貼牆 ----------
   這是全站唯一「花」的地方（Chanel 那條規則：只在一個地方大膽）。
   四張真實便條色的卡微旋轉堆疊，hover 抬起並轉正。 */
.notewall {
    position: relative;
    aspect-ratio: 1 / .92;
    /* ⚠️ 三個尺寸都要給。只給 max-width 的話 grid 欄位窄時它會被壓扁，
       絕對定位的子卡跟著變成細長條 —— 中文於是直排（8/4 實測踩到）。
       min-width 是那條防線，420 是「四張卡並排還讀得出字」的實測下限。 */
    width: 100%;
    min-width: 420px;
    max-width: 520px;
    margin-inline: auto;
}
/* 🔴 `.note` 這個類名**被佔用了，不要在別的地方拿來當「說明小字」**（8/4 踩過）：
   它是 `position:absolute`，所以任何同名元素都會先吃到絕對定位再跳回去 ——
   download.html 的價格卡原本用 `.price .note`，實測造成 CLS 0.046
   （那段字從 267px 寬跳到 659px、垂直位置掉 455px）。已改名 `.price-note`。
   要放說明小字就另取名字，別借這個。 */
.note {
    position: absolute;
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    box-shadow: var(--shadow-rest);
    transition: transform .38s var(--ease), box-shadow .38s var(--ease);
    /* 紙的下緣壓一道很輕的暗，像便條紙翹起來 */
    background-image: linear-gradient(178deg, rgba(255,255,255,.5), rgba(51,38,28,.05));
}
/* 便條卡的標題是**視覺標籤不是文件標題** —— 用 <p class="note-t"> 而不是 <h4>，
   因為它們沒有對應的 h3 父階（Lighthouse 的「標題階序跳號」判得對，8/4 修）。 */
.note .note-t {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 5px;
    color: var(--ink);
}
/* ⚠️ 不用 rgba 半透明墨 —— 疊在 8 種不同亮度的便條色上算不出實際對比，
   而實測 .5 的版本在玫瑰色上只有 3.5。改用算過的不透明色。 */
.note p { font-size: 13.5px; line-height: 1.6; color: var(--ink-on-note); }
.note .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--ink-on-note); opacity: .85; }

/* 四張卡的落點。上下兩組刻意靠近（bottom 從 8%/0 收到 4%/-2%）——
   間距太開會看成「兩堆」而不是「一牆」。 */
.note:nth-child(1) { background-color: var(--note-amber);  width: 54%; top: 2%;     left: 0;    transform: rotate(-4.5deg); z-index: 3; }
.note:nth-child(2) { background-color: var(--note-sky);    width: 47%; top: 15%;    right: 0;   transform: rotate(3.4deg);  z-index: 4; }
.note:nth-child(3) { background-color: var(--note-mint);   width: 45%; bottom: 12%; left: 4%;   transform: rotate(2.2deg);  z-index: 2; }
.note:nth-child(4) { background-color: var(--note-rose);   width: 50%; bottom: 2%;  right: 5%;  transform: rotate(-2.8deg); z-index: 5; }
.note:hover { transform: rotate(0) scale(1.045) translateY(-6px); box-shadow: var(--shadow-lift); z-index: 9; }

/* ---------- Stat strip ---------- */
.strip { border-block: 1px solid var(--rule); background: var(--paper-warm); padding: 30px 0; }
.strip-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.strip .n {
    display: block; font-family: var(--display); font-size: clamp(26px, 3vw, 36px);
    font-weight: 700; color: var(--ink); line-height: 1.1;
    /* 四個數字並排比較，等寬數字才不會看起來歪（Web Interface Guidelines） */
    font-variant-numeric: tabular-nums;
}
.strip .k { font-size: 13.5px; color: var(--ink-3); }

/* ---------- Feature rows（左右交錯，不是 bento）---------- */
.frow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(30px, 5vw, 66px);
    align-items: center;
    padding-block: clamp(38px, 5vw, 62px);
    border-top: 1px solid var(--rule);
}
.frow:first-of-type { border-top: 0; }
.frow.flip .frow-art { order: -1; }
.frow h3 { margin-block: 12px 14px; }
.frow p { color: var(--ink-2); font-size: 16.5px; }
.frow ul { margin-top: 18px; display: grid; gap: 9px; }
.frow li { list-style: none; font-size: 15.5px; color: var(--ink-2); display: flex; gap: 10px; }
.frow li::before { content: "—"; color: var(--gold-deep); flex: none; }

/* 螢幕截圖的相框：淡金邊 + 米底墊，讓 app 的毛玻璃不會浮在空氣裡 */
.shot {
    border-radius: var(--radius);
    padding: 9px;
    background: linear-gradient(160deg, var(--gold-wash), var(--paper-warm));
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-lift);
}
.shot img { border-radius: var(--radius-sm); }
.shot figcaption { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); padding: 9px 4px 2px; }

/* 文字在上、截圖整寬在下的功能列。
   🔴 存在的理由：**極端長寬比的截圖不能塞進 .frow 的半欄**。
   經典橫條那張是 3800×644（5.9:1），在 520px 寬的欄位裡卡片會全部糊成一片
   看不出是什麼（8/4 實測踩到）。判準：長寬比超過 3:1 就走這個而不是 .frow。 */
.frow-stack {
    display: grid;
    gap: clamp(22px, 3vw, 32px);
    padding-block: clamp(38px, 5vw, 62px);
    border-top: 1px solid var(--rule);
}
.frow-stack h3 { margin-bottom: 14px; }
.frow-stack p { color: var(--ink-2); font-size: 16.5px; }
.frow-stack ul { margin-top: 18px; display: grid; gap: 9px; }
.frow-stack li { list-style: none; font-size: 15.5px; color: var(--ink-2); display: flex; gap: 10px; }
.frow-stack li::before { content: "—"; color: var(--gold-deep); flex: none; }

/* 插圖：圓角 + 輕邊，跟截圖同一個相框語彙但不加金 */
.illus { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); box-shadow: var(--shadow-rest); }

/* 兩張截圖並排。⚠️ 只給**長寬比接近 1.5:1** 的圖用 ——
   細長圖（> 3:1）塞進半欄卡片會全糊掉，那種要用整寬（8/4 實測）。 */
.shot-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
    align-items: start;
}
@media (max-width: 760px) {
    .shot-duo { grid-template-columns: 1fr; }
}

/* 整寬插圖帶：純文字段落之間的呼吸點。
   ⚠️ 刻意**不用 `.shot` 的金邊相框** —— 那個語彙專屬「這是產品的實際畫面」。
   插圖是氛圍，混用會讓人以為照片裡的東西是 app 的一部分。
   高度用 aspect-ratio 裁切而不是讓圖自己撐 —— 3:2 的圖整寬會太高，
   佔掉一整屏卻只是氣氛。 */
.illus-band {
    margin-top: clamp(30px, 4vw, 46px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-rest);
}
.illus-band img {
    width: 100%;
    aspect-ratio: 21 / 8;
    object-fit: cover;
    object-position: center 55%;
}
.illus-band figcaption {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--ink-3);
    background: #fff;
    padding: 11px 16px;
    border-top: 1px solid var(--rule);
}
@media (max-width: 620px) {
    /* 手機上 21:8 太扁，切成 3:2 才看得出內容 */
    .illus-band img { aspect-ratio: 3 / 2; }
}

/* ---------- Card grid（功能小卡）---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 18px; }
.card {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 26px 24px;
    box-shadow: var(--shadow-rest);
    transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--gold); }
.card .ico {
    width: 40px; height: 40px; border-radius: 11px; margin-bottom: 15px;
    display: grid; place-items: center; font-size: 19px;
}
.card h3 { font-size: 19px; margin-bottom: 8px; }
.card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; }

/* ---------- Table（規格 / 比較）---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tbl th, .tbl td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
.tbl td:first-child { font-weight: 700; width: 30%; }
.tbl tr:last-child td { border-bottom: 0; }

/* ---------- Quote ---------- */
.pull { text-align: center; max-width: 24em; margin-inline: auto; }
.pull blockquote { font-family: var(--display); font-size: clamp(24px, 3.4vw, 40px); line-height: 1.42; font-weight: 600; }
.pull cite { display: block; margin-top: 24px; font-style: normal; font-size: 14.5px; color: var(--ink-3); }

/* ---------- Dog band ---------- */
.dogband { text-align: center; }
.dogband img { width: clamp(180px, 26vw, 260px); margin-inline: auto; filter: drop-shadow(0 18px 34px rgba(51,38,28,.22)); }
.dogband h2 { margin-top: 18px; }
.dogband p { margin: 14px auto 0; color: var(--ink-2); max-width: 32em; }

/* ---------- CTA ---------- */
.cta-final { text-align: center; }
.cta-final .btn { margin-top: 8px; }
.cta-final p { color: var(--ink-2); margin: 16px auto 30px; max-width: 30em; }

/* ---------- Footer ---------- */
.foot { background: var(--paper-deep); border-top: 1px solid var(--rule); padding: 46px 0 34px; font-size: 14.5px; }
.foot-in { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 30px; }
/* footer 的欄位標籤用 <p class="foot-h"> 而不是 <h4> ——
   它不隸屬任何 h3，當標題會造成階序跳號（8/4 Lighthouse 抓到）。 */
.foot .foot-h { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin-bottom: 12px; }
.foot ul { display: grid; gap: 8px; }
.foot li { list-style: none; }
.foot a { color: var(--ink-2); }
.foot a:hover { color: var(--gold-deep); }
.foot-btm { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--ink-3); font-size: 13.5px; }

/* ---------- Reveal（漸進增強：沒 JS 就全部直接可見）---------- */
body.js [data-rv] { opacity: 0; transform: translateY(20px); }
body.js [data-rv].in {
    opacity: 1; transform: none;
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    body.js [data-rv] { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .hero-grid, .frow { grid-template-columns: 1fr; }
    /* 單欄之後就不需要那個防壓扁的下限了，留著會撐破版面 */
    .notewall { min-width: 0; }
    .frow.flip .frow-art { order: 0; }
    .strip-in { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
    .foot-in { grid-template-columns: 1fr 1fr; }
    .nav-links { display: none; }
}
@media (max-width: 560px) {
    body { font-size: 16px; }
    .notewall { aspect-ratio: 1 / 1.05; }
    .note { padding: 15px 16px; }
    .note h4 { font-size: 14px; }
    .note p { font-size: 12.5px; }
    .foot-in { grid-template-columns: 1fr; }
}