/*〔存查 c000〕*/


/*〔存查 d001〕*/
.mm-home {
    /* 主色：直接接上品牌金黃，不另立值，品牌色改了這裡自動跟著改 */
    --al-gold:        var(--primary);              /* 49.4 100% 50%  #FFD200 */
    --al-gold-on:     var(--primary-foreground);   /* 0 0% 10.2%     #1A1A1A 黃底恆黑字 */

    /* 金的深淺階（幾何裝飾與 hover 用；同一個色相，不引入新色相） */
    --al-gold-press:  45 100% 44%;   /* #E0A400 主按鈕 hover／按下 */
    --al-gold-mid:    45  92% 62%;   /* #F5CE55 中階，幾何色塊 */
    --al-gold-soft:   47 100% 88%;   /* #FFF0C2 淺階，幾何色塊／淡底 */
    --al-gold-deep:   45 100% 27%;   /* #8A6600 深金，白底上的重點文字（量測 5.00:1） */
    --al-gold-dim:    47 100% 34%;   /*〔存查 d010〕*/

    /*〔存查 d011〕*/
    --al-ink-soft:    0 0% 32%;      /* #525252 neutral-600；在 hero 漸層上量測 7.0:1 */

    /* 深色區：沿用賣賣既有的中性深，讓首頁與 #machine-section 等既有深底同一階 */
    --al-ink:         var(--dark-panel);              /* 0 0% 9%   #171717 */
    --al-ink-on:      var(--dark-panel-foreground);   /* 0 0% 98%  #FAFAFA */
    --al-ink-2:       0 0% 15%;                       /* #262626 深色區的第二階 */

    /* 前身模板的量值（讀它的 CSS 抄的，不是估的） */
    --al-card-radius: 10px;                        /* .services-block-1 / .single-counter */
    /* 第 2 階段 token 化的行為差異：亮色下 --foreground 仍是原本的純黑；
       html.dark 下會改為近白，因此原本寫死黑色的陰影會跟著主題翻色。 */
    --al-card-shadow: 0 0 49px 0 hsl(var(--foreground) / .10);   /* .services-block-1 */
    --al-lift-shadow: 0 0 196px 0 hsl(var(--foreground) / .10);  /* .counter-box（大而散的抬升感） */
    --al-ease:        cubic-bezier(.55, .055, .675, .19); /* .rt-btn 的 transition */
}


/*〔存查 c003〕*/
/*〔存查 dead-rules-01〕*/
.mm-home #home,
.mm-home #milestone {
    background-image: none;
    background-color: transparent;
}
@media (min-width: 992px) {
    .mm-home #home {
        /* 不可留舊值的 flex + justify-content:center（會把前身模板的構圖壓成垂直置中）。
           但高度本身要給 —— 前身模板的 banner 是 1137px 固定高，畫布的存在感來自那個高度；
             這裡改用 min-height 讓內容仍可以撐長，不寫死。 */
        min-height: 760px;
        display: block;
    }
}
/* 上面那條把 `#home` 的底也一起清掉了（它必須清，否則舊的白底會壓住漸層）。
   因此 hero 自己的漸層要在這裡用**同等特異度**重新給回來（順序相依，不要對調）。
   不可以只寫在 `.alice-hero` 上 —— 那是 0,1,0，贏不了上面的 `.alice-home #home`。 */
.mm-home #home.mm-hero {
    background-image: linear-gradient(180deg,
                      hsl(var(--al-gold-soft) / .55) 0%,
                      hsl(var(--background)) 62%);
}
/* ≥992 時右半由深色畫布負責上色，左半要維持**純白**（前身模板原版左半就是白的）。
     這裡把淺金漸層關掉；<992 沒有畫布，才留著上面那層當底色。
     副作用：hero 導言的底色回到單一 #FAFAFA，對比度只會更好，不會更差。 */
@media (min-width: 992px) {
    .mm-home #home.mm-hero { background-image: none; background-color: hsl(var(--background)); }
}
/* `.alice-on-ink` 的深底同理 */
.mm-home #milestone.site-section-dark { background-color: hsl(var(--al-ink)); }

/*〔存查 d028〕*/
/*〔存查 dead-rules-02〕*/


/*〔存查 d029〕*/
/* 本層僅設定文字顏色。行高沿用全站基底的無單位倍數，
   讓每個字級各自換算，不在此層固定為像素值。前值見存查目錄。 */
.mm-home { color: hsl(var(--muted-foreground)); }

/*〔存查 dead-rules-03〕*/

/* 深底上的標題與副標（前身模板的 `.rt-section-title.text-white`） */
.site-section-dark .site-section-title { color: hsl(var(--al-ink-on)); }

/* 前身模板的 `.spacer-*` 只是空 div —— 這裡不重造那套，改用區塊自己的 padding。
   保留兩顆最常用的，因為前身模板的節奏靠它們拉開，用 Bootstrap 的 my-* 對不上。 */
/*〔存查 dead-rules-04〕*/
.mm-gap-60 { height: 60px; }
@media (max-width: 767.98px) { .mm-gap-60 { height: 30px; } }


/*〔存查 d034〕*/
/*〔存查 d035〕*/
.mm-hero {
    position: relative;
    overflow: hidden;              /* 幾何與 mockup 溢出的部分由這裡裁掉，hOverflow 恆為 0 */
    background: linear-gradient(180deg,
                hsl(var(--al-gold-soft) / .55) 0%,
                hsl(var(--background)) 62%);
}

/* 前身模板的背景是一張圖；這裡用四顆大圓 + 一條斜切帶重畫，全部吃 token。
   純裝飾，因此 aria-hidden + pointer-events:none（在 .alice-deco 上）。 */
.mm-deco {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.mm-deco > span { position: absolute; display: block; border-radius: 50%; }

/*〔存查 d038〕*/

/* ① 深色畫布：左緣斜切，讓文字區保持白底 */
/*〔存查 d040〕*/
.mm-hero-deco .canvas {
    top: 0; right: 0; width: 50%; height: 100%;
    border-radius: 0;
    background: hsl(var(--al-ink));
    /* 左緣斜切 + 底緣斜切（前身模板那塊的下緣也是斜的，不是水平線） */
    clip-path: polygon(16% 0, 100% 0, 100% 86%, 2% 100%);
}
/* 大圓「咬」進白區（前身模板左緣那道弧） */
.mm-hero-deco .bulge {
    top: -12%; right: 18%; width: 520px; height: 520px;
    background: hsl(var(--al-ink));
}
/* ② 疊在畫布上的實心圓 —— 對應前身模板的藍／紫／橘三顆 */
/* 三顆的明度是刻意拉開的（前身模板靠三個**不同色相**做出層次，這裡只有一個色相，
     只能靠明度階。全部同一階會糊成一塊，看起來像髒掉的黑。） */
.mm-hero-deco .g1 {                  /* 右上被邊緣裁掉的大圓 —— 最暗一階 */
    top: -190px; right: -130px; width: 540px; height: 540px;
    background: hsl(var(--al-gold-press) / .48);
}
.mm-hero-deco .g2 {                  /* 中央偏右的大圓 —— 中間階 */
    top: 40px; right: 1%; width: 340px; height: 340px;
    background: hsl(var(--al-gold-deep) / .92);
}
.mm-hero-deco .g3 {                  /* 小實心金圓（前身模板的橘色那顆）—— 最亮、100% 不透明 */
    /* 位置是避開量出來的：`_hero_mockup` 的「＊此為系統畫面示意參考」註腳在
         1440 下落在 x 1010~1145 / y≈576，灰字疊在實心金上只有 3.18:1（不及格）。
         因此這顆往右下移到 x≥1226，與那行完全不重疊。調位置前先確認這件事。 */
    top: 505px; right: 6%; width: 128px; height: 128px;
    background: hsl(var(--al-gold));
}
.mm-hero-deco .g4 {                  /* 白區左下的淺金圓（前身模板 `.three` 是 324px） */
    bottom: -80px; left: -150px; width: 324px; height: 324px;
    background: hsl(var(--al-gold-soft) / .8);
}

/* 品牌列自己的窄帶（原本在 hero 內，見 blade 的說明） */

/*〔存查 d051〕*/
@media (max-width: 991.98px) {
    .mm-hero-deco .canvas,
    .mm-hero-deco .bulge,
    .mm-hero-deco .g1,
    .mm-hero-deco .g2,
    .mm-hero-deco .g3 { display: none; }
}

.mm-hero .container { position: relative; z-index: 2; }

/* 前身模板 `.rt-banner-content`：padding-top 292px（lg 220px、md 150px+50px bottom） */
/*〔存查 d053〕*/
.mm-hero-content { padding-top: 60px; padding-bottom: 50px; }
@media (min-width: 992px)  { .mm-hero-content { padding-top: 150px; padding-bottom: 0; } }
@media (min-width: 1400px) { .mm-hero-content { padding-top: 180px; } }

/* 前身模板 h1：60px / 600 / line-height 72px / margin-bottom 20px */
.mm-hero-content h1 {
    font-size: 60px;
    font-weight: 600;
    line-height: 72px;
    margin: 0 0 20px;
    color: hsl(var(--al-ink));
}
@media (max-width: 991.98px) { .mm-hero-content h1 { font-size: 40px; line-height: 52px; } }
@media (max-width: 575.98px) { .mm-hero-content h1 { font-size: 32px; line-height: 44px; } }/* 前身模板 hero p：20px / line-height 36px / margin 0 0 35px */
/* 不是 --muted-foreground，理由見 token 區 */
@media (max-width: 575.98px) { }/* 前身模板 hero 的 CTA 比一般大一階：padding 20px 37px */


.mm-home .btn:has([data-lucide]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 575.98px) { }

/* 前身模板 `.banner-mockup-img`：絕對定位、突破 container 右緣、右邊被畫面裁掉。
   這是前身模板首屏最強的一個手法（畫面「裝不下」，感覺系統很大）。 */
.mm-hero-visual { position: relative; z-index: 3; margin-top: 40px; }
@media (min-width: 992px) {
    .mm-hero-visual {
        position: absolute;
        top: 110px;                /* 前身模板原值 130px，隨上面重算的 padding-top 一起下修 */
        right: -70px;              /* 前身模板在 1200~1400 用 -70px；1400+ 才是 130px 內縮 */
        width: 56%;
        margin-top: 0;
    }
}
@media (min-width: 1400px) {
    .mm-hero-visual { top: 130px; right: -40px; width: 52%; }
}

/* 前身模板 `.banner-brands`：h3 36px/36px + margin-bottom 35px，整組 margin-bottom 70px */
/* 前身模板用 owl carousel 跑 logo；賣賣不掛平台 logo（品牌條款，見 blade 註解），改一排文字晶片。
   不引入 jQuery/owl，靜態 flex 排列在資訊量上完全等價。 */


/*〔存查 d063〕*/
.mm-cards { position: relative; z-index: 2; }
/* #integration 出貨線站帶的文字區
   沿用**同一組**卡片字級與顏色，不另立第二套。 */

/* 前身模板 `.callto-action_1`：height 145px、padding 0 30px 0 50px、border 1px、radius 15px、
   底色是主色 5.1% 的淡底、左右分置。 */


/*〔存查 c011〕*/
/*〔存查 dead-rules-05〕*/

/* 前身模板 `.rt-custom-container`：1700px 寬，給要放大圖的區塊用 */


/*〔存查 d072〕*/


/*〔存查 d073〕*/
.mm-split { position: relative; overflow: hidden; padding: 100px 0; }
.mm-split-text p { margin: 0 0 35px; color: hsl(var(--muted-foreground)); }
.mm-split-media { position: relative; }
.mm-split-media img,
.mm-split-media picture { display: block; width: 100%; height: auto; border-radius: 16px; }
/* 前身模板的圖是去背 PNG 直接浮著；賣賣是實拍照，因此補一層與卡片同語彙的陰影，量值沿用 .services-block-1 */
.mm-split-media figure { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--al-card-shadow); }
.mm-split .mm-deco .s1 {
    top: -60px; left: -180px; width: 360px; height: 360px;
    background: hsl(var(--al-gold-soft) / .55);
}
.mm-split .mm-deco .s2 {
    bottom: -140px; right: -160px; width: 300px; height: 300px;
    background: hsl(var(--al-gold) / .10);
}
@media (max-width: 991.98px) {
    /*〔存查 c015〕*/
    .mm-split { padding: 58px 0; }
    .mm-split .mm-deco { display: none; }
}


/*〔存查 d076〕*/
/* 抵銷 top 位移，避免下方留一大塊空白 */
/* 滾動時寬度不跳 */
/* 前身模板是 90px；賣賣最大那顆是 `160,000,000`（11 個字元），90px 在 col-md-3 會爆版，
   因此依實際內容降到 56px（lg 以下再降）。這是版型遷就真實資料的必要調整。 */

/* 前身模板 `.services-block2`：圖示 25px + h4 24px/600 + p，置中 */
.mm-feat { position: relative; margin-bottom: 30px; padding: 0 30px; text-align: center; }
.mm-feat-icon { display: inline-flex; margin-bottom: 25px; color: hsl(var(--al-gold-deep)); }
.mm-feat-icon [data-lucide], .mm-feat-icon svg { width: 40px; height: 40px; stroke-width: 1.75; }
.mm-feat h4 { font-size: var(--al-type-heading, 1.25rem); /* ㉑批1：24→20(xl)，前值：24px */ font-weight: 600; margin: 0 0 20px; color: hsl(var(--al-ink)); }
.mm-feat p { margin: 0; color: hsl(var(--muted-foreground)); }
@media (max-width: 767.98px) { .mm-feat { padding: 0; } }

/* 深底版（用在 --al-ink 區塊上） */
.site-section-dark .mm-feat-icon { color: hsl(var(--al-gold)); }
.site-section-dark .mm-feat h4   { color: hsl(var(--al-ink-on)); }
.site-section-dark .mm-feat p    { color: hsl(var(--al-ink-on) / .72); }   /* 量測 12.4:1 */

/* 導入流程：前身模板沒有這種「編號步驟」版位，因此沿用 `.services-block2` 的節奏，
   把圖示換成前身模板那顆 76×76、`border-radius: 50% 50% 4px` 的簽名磚，裝編號。 */
.mm-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 25px;
    font-size: 30px;
    font-weight: 700;
    color: hsl(var(--al-gold-on));
    border-radius: 50% 50% 4px;
    background-image: linear-gradient(134deg, hsl(var(--al-gold-mid)) 0%, hsl(var(--al-gold-press)) 100%);
}


/*〔存查 d085〕*/
/*〔存查 dead-rules-06〕*/
/*〔存查 c018〕*/
/*〔存查 d087〕*/

/* 前身模板 `.price-design-elemnts` 四顆角落裝飾 */
/* hover / 推薦：整張卡填金 —— 文字全部翻深色 */

@media (max-width: 991.98px) { }


/*〔存查 d090〕*/


/*〔存查 d091〕*/
.mm-download {
    position: relative;
    overflow: hidden;
    padding: 80px 0;
    /*〔存查 d092〕*/
    /*〔存查 c023〕*/
    background-image: linear-gradient(100deg,
                      hsl(var(--al-ink)) 0%,
                      hsl(var(--al-ink)) 68%,
                      hsl(var(--al-gold-press)) 130%);
}
.mm-download .mm-deco .w1 {
    top: -40%; left: 50%; width: 1200px; height: 1200px;
    transform: translateX(-50%);
    background: radial-gradient(circle at 50% 50%,
                hsl(var(--al-ink-on) / .10) 0%, hsl(var(--al-ink-on) / 0) 62%);
}
.mm-download .mm-deco .w2 {
    bottom: -260px; right: 8%; width: 420px; height: 420px;
    background: hsl(var(--al-ink) / .35);
}
.mm-download-inner { position: relative; z-index: 2; text-align: center; }
.mm-download-inner h2 {
    font-size: 45px;
    font-weight: 600;
    line-height: 56px;
    margin-bottom: 30px;
    color: hsl(var(--al-ink-on));
}
.mm-download-inner p { margin: 0 0 30px; color: hsl(var(--al-ink-on) / .82); }
@media (max-width: 991.98px) {
    /*〔存查 c024〕*/
    .mm-download { padding: 58px 0; }
    .mm-download-inner h2 { font-size: 28px; line-height: 40px; }
}


/*〔存查 d095〕*/
/* 賣賣的 hero 示意畫面元件（`includes/_hero_mockup`）放進前身模板的絕對定位框裡 */
.mm-home .mm-hero-visual .site-mockup { width: 100%; }

/* 深底區塊上的既有 `.site-mockup` / `.site-media-frame` 不需要再加白框 */
.site-section-dark { color: hsl(var(--al-ink-on)); background: hsl(var(--al-ink)); }
/* 前值：.alice-on-ink a { color: hsl(var(--al-gold)); }
   深底的內文連結才使用金色；按鈕由自己的 --bs-btn-color／前景 token 管理。 */
/* ★★★ 2026-08-26 追加 :not(.site-cta)（上面那句意圖是對的，實作漏了一種按鈕）：
     前台的 CTA 按鈕掛的是 .site-cta，**不是** Bootstrap 的 .btn ⇒ 原本的 :not(.btn) 擋不住它，
     金色一路漏到按鈕文字上。
     實測後果：同一顆 .btn-cta-secondary，首頁（全站唯一載入 home.css 的頁）是金色字
     rgb(255,210,0)，其餘 9 頁是白色字 rgb(250,250,250) —— 同一個元件兩種樣子，正是 SSOT 破口。
     特異度也是它贏：.site-section-dark a:not(.btn) 是 (0,2,1)，蓋過 site-front.css 的
     .site-section-dark .btn-cta-secondary (0,2,0)，所以連覆寫都壓不住它。
   ★ 用鏈式 :not():not() 而不是 :not(.btn, .site-cta)，跟隨本專案既有慣例
     （shadcn-theme.css 的 .bg-dark:not(.badge):not(.btn)），相容性最好。
     副作用已實測：全站深底子孫算繪值 diff 只有目標按鈕改變，其餘 0 個。 */
.site-section-dark a:not(.btn):not(.site-cta) { color: hsl(var(--al-gold)); }

/* 減少動態偏好：所有 transition 關掉（既有 counter 腳本自己也有這個判斷） */
@media (prefers-reduced-motion: reduce) {
    .mm-home * { transition: none !important; animation: none !important; }
}

/*〔存查 d100〕*/

/*〔存查 c027〕*/
.mm-home .mm-device {
    position: relative;
    width: 100%;
    /* 1200x746 → 維持比例，避免圖片載入前的版面跳動（CLS） */
    aspect-ratio: 1200 / 746;
}

/* 框圖疊在最上層：螢幕是透明的，所以看得到下層的系統畫面 */
.mm-home .mm-device-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;   /* 讓下層畫面仍可互動／被選取 */
}

/* 系統畫面墊在框圖下層，用量出來的座標對進螢幕 */
.mm-home .mm-device-screen {
    position: absolute;
    left: 14.04%;
    top: 4.59%;
    width: 71.92%;
    height: 63.13%;
    z-index: 1;
    overflow: hidden;
    /* 真實螢幕內容不是直角，但圓角要小 —— 螢幕本身的圓角很淺 */
    border-radius: 2px;
    background: hsl(var(--card));
}

/*〔存查 d107〕*/
/*〔存查 c029〕*/
.mm-home .mm-device-screen .site-mockup {
    width: 1040px;
    height: 566px;              /* 494/269 的反算：1040 × (269/494) */
    transform-origin: top left;
    transform: scale(.385);     /* 992–1199 */
    border: 0;
    border-radius: 0;
    box-shadow: none; /* ㉘ 註記：`.mm-device-screen .site-mockup` 在首頁 querySelectorAll 為 0
         （.mm-device-screen 裡面裝的是 .mm-screen-chrome 真截圖，不是 .site-mockup 假畫面），因此本規則不渲染。none 不需要 token。 */
    overflow: hidden;
    background: hsl(var(--card));
}

@media (min-width: 1200px) {
    .mm-home .mm-device-screen .site-mockup { transform: scale(.396); }
}

@media (min-width: 1400px) {
    .mm-home .mm-device-screen .site-mockup { transform: scale(.475); }
}

/* 註腳（＊此為系統畫面示意參考）不屬於螢幕內容，移到框外下方 */
.mm-home .mm-device .site-mockup-note {
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + .5rem);
    z-index: 3;
    text-align: center;
    margin: 0;
}

/* 窄螢幕：筆電框會讓表格小到看不清，因此拿掉外框，直接顯示畫面 */
@media (max-width: 767.98px) {
    .mm-home .mm-device { aspect-ratio: auto; }
    .mm-home .mm-device-frame { display: none; }
    .mm-home .mm-device-screen {
        position: static;
        width: 100%;
        height: auto;
        border-radius: var(--radius);
    }
    .mm-home .mm-device-screen .site-mockup {
        border: 1px solid hsl(var(--border));
        border-radius: var(--radius);
        height: auto;
    }
    .mm-home .mm-device .site-mockup-note { position: static; margin-top: .5rem; }
}

/*〔存查 c030〕*/
.mm-home .mm-deco,
.mm-home .mm-shape {
    display: none !important;
}

/*〔存查 dead-rules-07〕*/

/* `#milestone` 是深底區，它的 padding-top 由 blade 的 inline style 控制，這裡不動。 */

/*〔存查 d117〕*/
.mm-home *,
.mm-home *::before,
.mm-home *::after {
    animation: none !important;
}

/* 只保留顏色類的 transition（互動回饋），關掉會位移的 */
.mm-home *,
.mm-home *::before,
.mm-home *::after {
    transition-property: color, background-color, border-color, box-shadow, opacity !important;
    transition-duration: .15s !important;
}

/*〔存查 d119〕*/

/*〔存查 c032〕*/
@media (min-width: 992px) {
    .mm-home .mm-hero-visual {
        /* 放大並讓右緣切出視窗：right 用負值把它推出去 */
        width: 62%;
        right: -8%;
        top: 90px;
    }
}

@media (min-width: 1400px) {
    .mm-home .mm-hero-visual {
        width: 60%;
        right: -6%;
        top: 100px;
    }
}

/* 讓它真的切得出去：hero 不可以把溢出裁掉。
   ⚠️ 若 hero 有 overflow:hidden，上面的負值會**完全沒效果而且不報錯**。 */
.mm-home #home { overflow: visible; }

/* 縮放比要跟著新的螢幕寬走（螢幕寬 = 筆電寬 × 0.7192，筆電寬變大了） */
@media (min-width: 992px) {
    .mm-home .mm-device-screen .site-mockup { transform: scale(.46); }
}
@media (min-width: 1200px) {
    .mm-home .mm-device-screen .site-mockup { transform: scale(.50); }
}
@media (min-width: 1400px) {
    .mm-home .mm-device-screen .site-mockup { transform: scale(.56); }
}

/* ═══ ③ 捲動視差 ═══
   用原生 CSS scroll-driven animation，零 JS、零函式庫。
   不支援的瀏覽器：animation-timeline 無效，筆電靜止不動，**畫面完全正常**（漸進增強）。 */
@supports (animation-timeline: view()) {
    @media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
        .mm-home .mm-hero-visual {
            animation: mm-device-float linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 60%;
        }
        @keyframes mm-device-float {
            from { transform: translateY(40px); }
            to   { transform: translateY(-40px); }
        }
    }
}

/*〔存查 c033〕*/
@supports (animation-timeline: view()) {
    @media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
        .mm-home .mm-hero-visual {
            animation: mm-device-float linear both !important;
            animation-timeline: view() !important;
            animation-range: entry 0% cover 60% !important;
        }
    }
}

/* 裁掉橫向溢出但保留縱向（視差需要縱向不被裁） */
.mm-home #home {
    overflow: visible;
    overflow-x: clip;
}

/*〔存查 c034〕*/
.mm-home .mm-cards > .row {
    align-items: stretch;
}


/* 站帶的文字區沿用**同一組**卡片字級，
   不要另外寫一份 font-size —— 那會變成第二個真相來源。 */


/* 圖示磚縮小一點，76px 在只有兩行內容的卡上太搶 */

/* 卡片與下方標題擠在一起，因此補間距 */
.mm-home .mm-cards + * ,
.mm-home .mm-cards ~ .site-section-head {
    margin-top: 2rem;
}

/*〔存查 d131〕*/
.mm-home .mm-device { aspect-ratio: 1915 / 1157; }

.mm-home .mm-device-screen {
    left: 15.67%;
    top: 12.53%;
    width: 70.60%;
    height: 73.21%;
    border-radius: 1px;
}

/* 螢幕變大了（70.6% × 73.21%），縮放比要重算 */
@media (min-width: 992px)  { .mm-home .mm-device-screen .site-mockup { transform: scale(.44); } }
@media (min-width: 1200px) { .mm-home .mm-device-screen .site-mockup { transform: scale(.48); } }
@media (min-width: 1400px) { .mm-home .mm-device-screen .site-mockup { transform: scale(.54); } }

/*〔存查 c036〕*/
.mm-home #home { position: relative; }

.mm-home .mm-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.mm-home .mm-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 45%;   /* 讓貨架落在右半，避開左邊文字區 */
}

/* 橫向遮罩：左邊實心 → 右邊透明 */
.mm-home .mm-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            hsl(var(--background)) 0%,
            hsl(var(--background) / .96) 32%,
            hsl(var(--background) / .72) 52%,
            hsl(var(--background) / .38) 72%,
            hsl(var(--background) / .18) 100%),
        linear-gradient(180deg,
            hsl(var(--background) / .10) 0%,
            hsl(var(--background) / 0) 40%,
            hsl(var(--background) / .55) 88%,
            hsl(var(--background)) 100%);
}

/* hero 內容要浮在背景之上 */
.mm-home #home > .container,
.mm-home .mm-hero-visual { position: relative; z-index: 2; }

/* 窄螢幕：文字會佔滿整寬，因此遮罩改成整片高不透明，否則字會壓在貨架上 */
@media (max-width: 991.98px) {
    .mm-home .mm-hero-bg::after {
        background:
            linear-gradient(180deg,
                hsl(var(--background) / .92) 0%,
                hsl(var(--background) / .88) 55%,
                hsl(var(--background)) 100%);
    }
    .mm-home .mm-hero-bg img { object-position: 50% 40%; }
}

/*〔存查 d138〕*/
.mm-home .mm-hero-bg::after {
    background:
        linear-gradient(180deg,
            hsl(var(--background) / .90) 0%,
            hsl(var(--background) / .90) 72%,
            hsl(var(--background) / .96) 92%,
            hsl(var(--background)) 100%) !important;
}

@media (max-width: 991.98px) {
    .mm-home .mm-hero-bg::after {
        background:
            linear-gradient(180deg,
                hsl(var(--background) / .93) 0%,
                hsl(var(--background) / .93) 78%,
                hsl(var(--background)) 100%) !important;
    }
}

/* 照片本身也降一點飽和與亮度，讓它更像「底紋」而不是「主角」 */
.mm-home .mm-hero-bg img {
    filter: saturate(.85);
    object-position: 50% 42%;
}

/*〔存查 c038〕*/

/* ① 對齊：讓筆電與左欄文字垂直置中對齊 */
@media (min-width: 992px) {
    .mm-home #home > .container > .row {
        align-items: center;
        min-height: 520px;
    }
    .mm-home .mm-hero-visual {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        margin-top: 0;
    }
    /* 視差改成疊加在置中之上，不可覆蓋掉 translateY(-50%) */
    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
            @keyframes mm-device-float {
                from { transform: translateY(calc(-50% + 28px)); }
                to   { transform: translateY(calc(-50% - 28px)); }
            }
        }
    }
}

/*〔存查 d144〕*/

/*〔存查 c040〕*/
@media (min-width: 992px) {
    .mm-home #home > .container > .row {
        align-items: center;
        min-height: 540px;
    }
    .mm-home .mm-hero-visual {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        margin-top: 0;
    }
    /* 視差要疊在置中之上，不可覆蓋掉 translateY(-50%) */
    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
            @keyframes mm-device-float {
                from { transform: translateY(calc(-50% + 26px)); }
                to   { transform: translateY(calc(-50% - 26px)); }
            }
        }
    }
}

/*〔存查 d147〕*/
.mm-home .mm-hero-bg::after {
    background:
        linear-gradient(180deg,
            hsl(var(--background) / .82) 0%,
            hsl(var(--background) / .82) 70%,
            hsl(var(--background) / .94) 90%,
            hsl(var(--background)) 100%) !important;
}

@media (max-width: 991.98px) {
    .mm-home .mm-hero-bg::after {
        background:
            linear-gradient(180deg,
                hsl(var(--background) / .88) 0%,
                hsl(var(--background) / .88) 76%,
                hsl(var(--background)) 100%) !important;
    }
}

.mm-home .mm-hero-bg img { filter: saturate(.95); }

/*〔存查 d148〕*/
@media (min-width: 992px) {
    .mm-home #home > .container > .row { align-items: flex-start; }
    .mm-home #home > .container > .row > [class*="col-"] { padding-top: 24px; }
}

/*〔存查 c042〕*/
/*〔存查 hp-05〕此處原有一條首頁 hero 按鈕覆蓋規則（六個宣告皆帶 !important），已移除。
   移除後該顆按鈕回落至 site-front.css 的 .site-cta 基底。*/

/*〔存查 c044〕*/
.mm-home [class*="mm-"][class*="card"] {
    border-radius: calc(var(--radius) + 4px);
}


/*〔存查 d152〕*/
.mm-home .mm-split-media picture,
.mm-home .mm-split-media figure {
    border-radius: calc(var(--radius) + 4px);
}

/*〔存查 c046〕*/
/*〔存查 d154〕*/

/* 滿欄筆電的螢幕更大，縮放比要跟著放大 */

/* 窄螢幕：與 hero 相同處理 —— 拿掉外框直接顯示畫面，否則表格會小到看不清 */

/*〔存查 d157〕*/

/*〔存查 c049〕*/
.mm-home #home { position: relative; }

.mm-home .mm-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.mm-home .mm-hero-bg img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 42%;
    filter: saturate(.95);
}
/* 遮罩：底圖要夠淡才能當滿版背景，但小字可讀性是底線，.82 是量測後的取捨 */
.mm-home .mm-hero-bg::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        hsl(var(--background) / .82) 0%,
        hsl(var(--background) / .82) 70%,
        hsl(var(--background) / .94) 90%,
        hsl(var(--background)) 100%);
}
@media (max-width: 991.98px) {
    .mm-home .mm-hero-bg::after {
        background: linear-gradient(180deg,
            hsl(var(--background) / .88) 0%,
            hsl(var(--background) / .88) 76%,
            hsl(var(--background)) 100%);
    }
}

/* hero 內容浮在背景之上 */
.mm-home #home > .container { position: relative; z-index: 2; }

/* 螢幕不透明，不能讓背景照片從透明螢幕透出來 */
.mm-home .mm-device-screen { background: hsl(var(--card)); }

/*〔存查 c050〕*/
@media (min-width: 992px) {
    .mm-home #home {
        min-height: 0;
        padding-top: 72px;
        padding-bottom: 72px;
    }
    .mm-home #home > .container > .row { align-items: center; }
}

@media (max-width: 991.98px) {
    .mm-home #home {
        min-height: 0;
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

/*〔存查 c051〕*/
.mm-home #home h1 {
    font-size: var(--al-type-hero, 3rem);          /* 48px = text-5xl */ /* ㉓批2：→hero 角色（48/36/30 不變）；前值：3rem */
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.02em;
}.mm-home #home > .container p {
    font-size: 1.125rem;      /* 18px = text-lg */
    line-height: 1.75;
}

/*〔存查 c052〕*/
.mm-home #home .mm-hero-content {
    padding-top: 0;               /* 原本 180px —— 死空間的來源 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /*〔存查 dead-rules-08〕*/
}

/* 子項自己的 margin 全部歸零，讓 gap 成為唯一間距來源 */
.mm-home #home .mm-hero-content > * {
    margin-top: 0;
    margin-bottom: 0;
}/* 文案 → 行動區、行動區 → 標籤列：拉到 gap-8（32px），做出段落分界 */
/* 24 + 8 = 32px */
/*〔存查 dead-rules-09〕*/
/*〔存查 c053〕*/
/* ── 三段共用外殼 ──────────────────────────────────────────────────────────── */
/* 裁切片自己貼著下一區 */
/* 文字欄：間距只有一個來源（gap），不要再往子項加 margin —— 那是本檔早期
   「Bootstrap 的 mb-3 與我的 margin 疊加」老問題的來源（見 ⑭ 之後那段）。 */
/* 置中版（#flow-organize / #flow-reasons 的標題區） */
/*〔存查 d179〕*/
/*  這裡**刻意不給邊框/圓角/陰影**：`.site-mockup` 自己已經帶了
   border + var(--radius-xl) + box-shadow + overflow:hidden（site-front.css L467）。
   再包一層就是**框中框 + 雙重陰影** —— 實際查過才發現的，不要「補一個框」。 */
/* 兩層疊：近距離的那層負責「浮在訂單列表之上」的分離感（幾何值與
       `.site-mockup` 同一組，維持同一種光源），遠距離那層是前身模板的抬升感。
       只用 --al-lift-shadow 不行：196px blur @ .10 疊在卡片上幾乎看不出來。 *//* shadcn：標籤是 medium，不是 bold */

/*〔存查 d183〕*/
/*〔存查 d184〕*/

/* 下緣淡出：用 `::after` 掛在畫面自己身上（不是外層），這樣它永遠貼齊
   被裁掉的那條邊，不會受下面那行聲明的高度影響。
   顏色跟著主題 token 走，零硬寫色值。 */


/* 左右兩張：往外推 + 降一階（透明度與陰影都弱一點，讓中間那張跳出來） */

/*〔存查 d187〕*/

/* 三張的說明文字 */

/*〔存查 d189〕*/

/*〔存查 d190〕*/

@media (max-width: 767.98px) {/* 錯位前片回到正常流：不是把它藏起來（那會弄丟通路清單這個資訊） */


    /* 裁切也關掉：手機上「只露出上半」會讓那張圖小到看不出是什麼 */

        }


/*〔存查 c058〕*/


/*〔存查 d194〕*/
@media (min-width: 992px) {
    .mm-home #home {
        /* 與上一段那條 padding 同值，抽成變數只是為了讓下面的 calc 有唯一來源，
           之後改內距只要改這一顆，min-height 會自己跟上（SSOT）。 */
        --mm-hero-pad-y: 4.5rem;              /* 72px */
        padding-top: var(--mm-hero-pad-y);
        padding-bottom: var(--mm-hero-pad-y);
    }

    .mm-home #home > .container > .row {
        align-items: center;                     /* 置中的人就是被撐高的人 */
        /* fallback：不支援 svh 的瀏覽器停在這一行 */
        min-height: calc(100vh - var(--site-header-h, 64px) - 1px - var(--mm-hero-pad-y) * 2);
        /*                       ↑ .site-header 的 border-bottom（token 只含 navbar 的 64px） */
    }

    /*〔存查 d200〕*/
    @supports (height: 100svh) {
        .mm-home #home > .container > .row {
            min-height: calc(100svh - var(--site-header-h, 64px) - 1px - var(--mm-hero-pad-y) * 2);
        }
    }

    /*〔存查 d201〕*/
    .mm-home #home > .container > .row > [class*="col-"] { padding-top: 0; }
}

/*〔存查 c061〕*/


/*〔存查 c062〕*/
/*〔存查 dead-rules-10〕*/

/*  這兩條**必須** `!important` —— 對手是樣板上帶 !important 的 Bootstrap 工具類
     （`.mb-3` / `.mt-4`），不加就完全沒有作用，而且不會報錯。
   樣板端的那兩個 class 保留不動，改由這裡覆蓋。 */
.mm-home #home .mm-hero-content > .site-eyebrow {
    margin-bottom: 0;                            /* 蓋掉 .mb-3 的 16px */
}
/*〔存查 dead-rules-11〕*/
/* 其餘三組沒有工具類參戰，一般權重即可（與 L1857 同特異度、本段在檔尾，後者勝） */
/* 16 + 8  = 24（gap-6） *//* 16 + 16 = 32（gap-8） */

/*〔存查 c063〕*/
/* 免費試用按鈕右側箭頭：lucide arrow-right，shadcn 規格 size-4(16px) + gap-2(8px)。
   不做 hover 位移 —— 本檔 L1119 的 `animation:none !important` 白名單裡沒有 transform，
      寫了也不會動，交付一個不會動的效果比不做更糟。 */
/*〔存查 c064〕*/
.mm-home #channels { padding-top: 0; }
.mm-home #channels h3 { margin-top: 0; }


/*〔存查 c065〕*/

/* ── ⑯-1 站帶容器 ──────────────────────────────────────────────────────── */



/* 文字區一律貼底，五站的媒體高度不同，標題仍在同一條水平線上 */


/* 非筆電的媒體（實機照／紙本發票）：用與筆電外框**同一個外框比例**佔位，
   讓五站的媒體區等高，站帶不會忽高忽低。 */


/* 實機照是 4:3 直式裁切框，因此以**高度**貼齊外框比例，寬度自己收 */

/*〔存查 d219〕*/



/* 框圖：只覆蓋高度與 inset —— `position/z-index/pointer-events` 沿用 L989 那組，
   不要在這裡重寫，那會變成第二個真相來源。 */

/*〔存查 d221〕*/

/*〔存查 d222〕*/

/* ── ⑯-3 站寬 W 與縮放 z（成對常數，不可以只改一個）──────────────────────── */
@media (min-width: 768px) {
            /* `#flow-in` 在 768–991 是整欄（col-lg-7 尚未生效），沿用同一組 W/z。
       少了這一行，`--flow` 會拿到 100% 寬卻配 z .40 的內容，螢幕框右半會留白。 */
    }




/* ── ⑯-4 手機（<768）：關掉並排與外框，改單欄堆疊 ────────────────────────
   框圖的 `display: none` 與免責聲明的 `position: static` 由 L1063-1076 那組
     既有的 `max-width: 767.98px` 規則負責，這裡不要再寫一次。 */
@media (max-width: 767.98px) {





    /* 媒體區在單欄下不必再對齊外框比例，讓內容自己決定高度 */

    }/*〔存查 d227〕*/
/*〔存查 c069〕*/
/* 捲動條藏起來：可供性改由「鄰項露出一角」提供（見檔頭） */

/*〔存查 dead-rules-12〕*/

/* 筆電框在滑軌裡的尺寸：沿用 .alice-device 的座標系統，只覆蓋寬度 */
.mm-home .mm-device--rail { width: 100%; }

/* 沒有對應畫面的那一格（物流 API）：用卡片撐到與筆電同高，滑軌才不會高低不齊 */

/*〔存查 dead-rules-13〕*/

/*〔存查 d232〕*/
.mm-home .mm-device--rail .mm-device-screen .site-mockup {
    transform: scale(.48);
}

/* 第 3 台（包裝機照片）：`.site-photo--4x3` 是固定 4:3，
   508 寬時高度 381px，而螢幕框只有 318px，下緣會爆出 63px。
   螢幕框本身是 1915:1157 ≈ 1.65:1，比 4:3 更扁，因此用高度貼合、寬度裁切。 */
.mm-home .mm-device--rail .mm-device-screen .site-photo {
    height: 100%;
    aspect-ratio: auto;
}
.mm-home .mm-device--rail .mm-device-screen .site-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* #flow-organize 的寬版筆電（沿用 .alice-device 座標系，只覆蓋寬度與內容縮放）
   這一段外層 .alice-flow-crop 會做垂直裁切（「整張浮起、下緣被裁」的手法），
     裁的對象從 .site-mockup 變成整台筆電，效果更接近前身模板。 */

/* 筆電螢幕裡的實際截圖（放 public/assets/screens/ 即自動生效）
   螢幕框是 1915:1157 ≈ 1.65:1，因此用 cover 貼滿、裁掉超出的邊，不變形。 */
.mm-home .mm-device-screen .site-mockup > img {
    width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
}
/* #flow-in 標題置中（其餘三段本來就是 center，只有它是 start） */

/* 滑軌左右按鈕（前身模板原版用 owl.carousel 的 nav，這裡自己畫） */
/*〔存查 dead-rules-14〕*/
/* 滑鼠拖曳的可供性：游標變成抓手 */

/* 拖曳時不要選到文字 */
/*〔存查 dead-rules-15〕*/

/*〔存查 c072〕*/
/*〔存查 dead-rules-16〕*/

/*〔存查 d244〕*/
.mm-home #flow-in .site-mockup-note { position: relative; z-index: 4; }/*〔存查 c073〕*/
/*〔存查 d246〕*/
.mm-home .mm-cuts,
.mm-home .mm-split,
.mm-home .mm-shaped,
.mm-home .mm-download {
    padding-block: clamp(3.5rem, 7vw, 6rem);
}

/*〔存查 dead-rules-17〕*/

/* ── 五個 cut ─────────────────────────────────────────────────────────────── */
.mm-home .mm-cuts {
    position: relative;
    background: hsl(var(--background));
    /* 保險絲：cut 內沒有任何負 margin/絕對定位，理論上不會溢出；
       這條只是把「水平零溢出」從推導升級成結構保證。用 clip 不用 hidden
       （hidden 會建立捲動容器，見本檔 #flow 段的說明）。 */
    overflow-x: clip;
}

/* cut 之間距 = 與區塊 padding 同一個值，全頁垂直間距只有一種 */
.mm-home .mm-cut { margin-top: clamp(3.5rem, 7vw, 6rem); }

/* 文字欄：間距單一來源（gap），不要再往子項加 margin（本檔老教訓） */
.mm-home .mm-cut-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}
/*〔存查 dead-rules-18〕*/
.mm-home .mm-cut-text p {
    margin: 0;
    font-size: 1rem;
    color: hsl(var(--muted-foreground));
}

/* 圖欄整塊可點（另有文字連結當視覺提示，圖只是加大命中區） */
.mm-home .mm-cut-media { display: block; }
.mm-home .mm-cut-media:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 6px;
    border-radius: var(--radius);
}

/* 五台筆電同一個 modifier：width:100%（吃 col-lg-6），
   座標沿用 .alice-device 的 14.04%/4.59%/71.92%/63.13%，aspect-ratio 1200/746。
   「同構」是結構保證：寬度、比例、螢幕座標五個 cut 共用同一組宣告。 */
.mm-home .mm-device--cut { width: 100%; }

/* 撿包系統無 HTML 模擬 partial 時的灰底佔位（與灰底 PNG 同語彙，吃 token） */
.mm-home .site-mockup-title {
    width: 100%;
    height: 100%;
    background: hsl(var(--muted));
}

/*〔存查 d255〕*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .mm-home .mm-device--cut .mm-device-screen .site-mockup { transform: scale(.44); }
}
@media (min-width: 992px) {
    .mm-home .mm-device--cut .mm-device-screen .site-mockup { transform: scale(.29); }
}
@media (min-width: 1200px) {
    .mm-home .mm-device--cut .mm-device-screen .site-mockup { transform: scale(.35); }
}
@media (min-width: 1400px) {
    .mm-home .mm-device--cut .mm-device-screen .site-mockup { transform: scale(.415); }
}

/* 包裝機照片 fallback：4:3 比螢幕框（1.65:1）高，因此高度貼合、寬度裁切（做法同 --rail） */
.mm-home .mm-device--cut .mm-device-screen .site-photo {
    height: 100%;
    aspect-ratio: auto;
}
.mm-home .mm-device--cut .mm-device-screen .site-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}/*〔存查 c076〕*/
/* ── A) #features-glance ─────────────────────────────────────────────────── */
.mm-home .mm-glance {
    position: relative;
    padding-block: clamp(3.5rem, 7vw, 6rem);
    background: hsl(var(--background));
    /* 保險絲：本區無負 margin/絕對定位，clip 只是把「零溢出」升級成結構保證。
       不用 hidden（會建立捲動容器，見 #flow 段說明）。 */
    overflow-x: clip;
}
/* 保險絲：本區無負 margin/絕對定位，clip 只是把「零溢出」升級成結構保證。
       不用 hidden（會建立捲動容器，見 #flow 段說明）。 */
.mm-home .mm-glance-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 2.5rem;
    margin-top: clamp(2rem, 4vw, 3rem);
}/* 前身模板：名稱在圓下方約 20px */
.mm-home .mm-glance-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.125rem;             /* 前身模板：名稱在圓下方約 20px */
/*〔存查 d263〕*/
    text-decoration: none;
    color: inherit;
}
.mm-home .mm-glance-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;              /* 前身模板：圓形直徑約 100px（協調者量測） */
    height: 100px;
    border-radius: 9999px;     /* 正圓＝形狀非尺度（同 .alice-chip 慣例） */
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
    /* 對比（WCAG relative luminance 計算值）：
       --muted #F5F5F5 (L=.913) vs --foreground #000 (L=0) → (0.963/0.05) = 19.3:1 ✅ */
}
.mm-home .mm-glance-circle [data-lucide],
.mm-home .mm-glance-circle svg { width: 40px; height: 40px; }
.mm-home .mm-glance-item--lead .mm-glance-circle {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}
/*〔存查 d267〕*//*〔存查 c078〕*/
/*〔存查 c079〕*/
.mm-home .mm-glance-item:not(.mm-glance-item--lead):hover .mm-glance-circle,
.mm-home .mm-glance-item:not(.mm-glance-item--lead):focus-visible .mm-glance-circle {
    background: hsl(var(--muted-foreground) / .18);
}
/*〔存查 c080〕*/
/*〔存查 c081〕*/
.mm-home .mm-glance-item:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
    border-radius: var(--radius);
}
/* 前身模板是 bold(700)；shadcn 重點標籤慣用 600，取後者 */
.mm-home .mm-glance-name {
    font-size: 1rem;
    font-weight: 600;          /* 前身模板是 bold(700)；shadcn 重點標籤慣用 600，取後者 */
    color: hsl(var(--foreground));
}
@media (max-width: 767.98px) {
    .mm-home .mm-glance-icons { gap: 1.5rem 1.25rem; }
    .mm-home .mm-glance-circle { width: 80px; height: 80px; }
    .mm-home .mm-glance-circle [data-lucide],
    .mm-home .mm-glance-circle svg { width: 32px; height: 32px; }
}

/*〔存查 dead-rules-19〕*/
.mm-home #features-glance.mm-glance::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: image-set(
        url("../pic/conveyor-bg-1600.webp") 1x,
        url("../pic/conveyor-bg-2400.webp") 2x
    );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 75% 58%;
    /*〔存查 dead-rules-20〕*/
    opacity: .22;
    filter: grayscale(.55);
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0, transparent 300px, #000 520px, #000 94%, transparent 100%);
    mask-image: linear-gradient(to bottom,
        transparent 0, transparent 300px, #000 520px, #000 94%, transparent 100%);
}
/* 內容浮到背景照之上 —— 逐字沿用 L3282「.mm-home #service > *」那條既有寫法。
   `> *` 命中的是本區唯一的子元素 `.container`（量測），不是每個後代。 */
.mm-home #features-glance.mm-glance > * { position: relative; z-index: 1; }

/*〔存查 d277〕*/
.mm-home .mm-device--big {
    width: 100%;
    max-width: 1130px;
    margin-inline: auto;
}.mm-home .mm-cut--wide .mm-cut-media { margin-top: clamp(2rem, 4vw, 3rem); }

/*〔存查 d278〕*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .mm-home .mm-device--big .mm-device-screen .site-mockup { transform: scale(.48); }
}
@media (min-width: 992px) {
    .mm-home .mm-device--big .mm-device-screen .site-mockup { transform: scale(.65); }
}
@media (min-width: 1200px) {
    .mm-home .mm-device--big .mm-device-screen .site-mockup { transform: scale(.77); }
}
@media (min-width: 1400px) {
    .mm-home .mm-device--big .mm-device-screen .site-mockup { transform: scale(.78); }
}

/*〔存查 d279〕*/
.mm-home .mm-cut--stack .mm-cut-media { position: relative; display: block; }
.mm-home .mm-cut-float {
    position: absolute;
    z-index: 3;
    right: 6%;
    bottom: -1.25rem;
    width: min(320px, 72%);
}
.mm-home .mm-cut-float--left { right: auto; left: 6%; }
@media (max-width: 991.98px) {
    /* 單欄時沒有「疊」的空間：落回圖下靜態排列 */
    .mm-home .mm-cut-float { position: static; width: auto; margin-top: .75rem; }
}

/* ── C) cut 置中大筆電 ─────────────────────────────────────────────────────── */
.mm-home .mm-cut-text--center { align-items: center; text-align: center; }

/*〔存查 d282〕*/
.mm-home .mm-cut--panel {
    background: hsl(var(--secondary));
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) + 4px);
    padding: clamp(1.25rem, 3.5vw, 3rem);
}
.mm-home .mm-cut--panel .site-photo { margin: 0; }/*〔存查 d283〕*/


/*〔存查 c085〕*/
.mm-home .mm-cut--panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

/*〔存查 d285〕*/
@media (min-width: 992px) {
    .mm-home .mm-cut--panel .col-lg-7,
    .mm-home .mm-cut--panel .col-lg-5 {
        flex: 0 0 auto;
        width: 50%;
    }
}

/*〔存查 c087〕*/
.mm-home #machine-section { padding-bottom: 168px; }

@media (max-width: 991.98px) {
    /* 手機白卡不疊、改為正常流，上一段不需要多留 */
    .mm-home #machine-section { padding-bottom: 84px; }
}

/*〔存查 c088〕*/
.mm-home #milestone [class*="count"] {
    font-size: var(--al-type-stat, 2.25rem); /* ㉓批2：里程碑計數→stat；前值：clamp(1.75rem, 3.2vw, 3.5rem) */
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    white-space: nowrap;
}

/*〔存查 d290〕*/

/*〔存查 d291〕*/
@media (min-width: 992px) {
    .mm-home #service .mm-cut:nth-of-type(3) > .row {
        flex-direction: row-reverse;
    }
}

/*〔存查 d292〕*/
@media (min-width: 992px) {
    /* 取消上一條選錯的翻轉 */
    .mm-home #service .mm-cut:nth-of-type(3) > .row { flex-direction: row; }

    /*〔存查 c092〕*/
}

/*〔存查 d295〕*/

/*〔存查 c094〕*/

/* ① 撤銷綁在鄰居身上的內距（原規則保留未刪，這裡後位覆蓋） */
.mm-home #machine-section { padding-bottom: clamp(3.5rem, 7vw, 6rem); }

/* ② 改成綁在白卡自己身上：它自己保留侵入所需的空間，不要求上一段配合 */
@media (min-width: 992px) {
    .mm-home #milestone { padding-top: 112px; }   /* 白卡向上侵入 56px + 呼吸 56px */
}/*〔存查 d300〕*/
/* #price-hook：一天多少錢的價格鉤子
   數字要夠大才有衝擊力，但**不可以撞破容器** —— 用 clamp 隨視窗縮
     （同 #milestone 的情況：固定字級遇到長數字必撞）。 */
/* 首頁價格區塊：方案卡列（不是完整比較表，明細在 /pricing）
   卡片數量會隨後台上架狀態變動（目前 2 張，可能變 3~5 張），
     因此用 auto-fit + minmax，不寫死欄數，多一張少一張都不會爆版。 */
/* 價格區塊的「為什麼」三點
   三欄，與上方方案卡同一組 grid 語彙（auto-fit），手機自動堆疊，欄數不寫死。 */


/*〔存查 d304〕*/
/* 數字與標籤沿用先前修好的尺度（clamp + tabular-nums、標籤 1rem） */

/*〔存查 d306〕*/
/* 綁 .alice-counterbox 自己，不綁所在區塊的 id，以後再搬也不會失效 */

/*〔存查 d308〕*/
/*〔存查 dead-rules-21〕*/
/*〔存查 c098〕*/
/* 卡片變多時 subtitle 的固定 min-height 會讓卡片過高，因此改成只保底一行 */
/* 即將推出的方案卡：看得到、但一眼看得出還不能買
   用降低不透明度 + 中性標籤，不用灰階濾鏡（那會讓文字對比掉到不合格）。 */
/* 即將推出的方案卡：看得到、但一眼看得出還不能買
   不用灰階濾鏡（會讓文字對比掉到不合格），改用虛線框 + 中性標籤 + 局部降透明度。 */


/*〔存查 c099〕*/
.mm-home #action-box { position: relative; overflow: hidden; isolation: isolate; }

.mm-home .mm-boxbg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        /* ③ 右上角光暈 */
        radial-gradient(60% 55% at 82% 12%, hsl(var(--primary) / .16) 0%, transparent 62%),
        /* ② 深色漸層：左深右淺，文字在左 */
        linear-gradient(115deg,
            hsl(var(--al-ink) / .95) 0%,
            hsl(var(--al-ink) / .88) 42%,
            hsl(var(--al-ink) / .78) 72%,
            hsl(var(--al-ink) / .72) 100%),
        /* ① 紙箱照 */
        image-set(
            url("../pic/cartons-bg-1024.webp") 1x,
            url("../pic/cartons-bg-1600.webp") 2x
        );
    background-size: auto, auto, cover;
    background-position: center, center, 50% 42%;
    background-repeat: no-repeat;
    filter: saturate(.92);
}
/* 內容浮在背景之上 */
.mm-home #action-box > .container,
.mm-home #action-box .mm-deco { position: relative; z-index: 2; }/*〔存查 c100〕*/
/*〔存查 d319〕*/


/* #about 首段是全頁的定調句，給它比後面敘事段更重的份量
   （shadcn text-lg，與 hero lead 同階），不加顏色或斜體之類的裝飾。 */
.mm-home #about .mm-about-lead {
    font-size: 1.125rem;
    line-height: 1.75;
    color: hsl(var(--foreground));
}/*〔存查 c102〕*/
/*〔存查 c103〕*/
/*〔存查 d323〕*/
/*〔存查 d324〕*/
/*〔存查 c106〕*/


/*〔存查 c107〕*/
.mm-home .site-footer-list { grid-template-columns: 1fr; }

.mm-home .mm-boxbg {
    background-image:
        radial-gradient(60% 55% at 82% 12%, hsl(var(--background) / .10) 0%, transparent 62%),
        linear-gradient(115deg,
            hsl(var(--al-ink) / .95) 0%,
            hsl(var(--al-ink) / .88) 42%,
            hsl(var(--al-ink) / .78) 72%,
            hsl(var(--al-ink) / .72) 100%),
        image-set(
            url("../pic/cartons-bg-1024.webp") 1x,
            url("../pic/cartons-bg-1600.webp") 2x
        );
}

/*〔存查 d327〕*/
.mm-home .mm-boxbg {
    background-image:
        linear-gradient(125deg,
            hsl(var(--foreground) / .92) 0%,
            hsl(var(--foreground) / .84) 30%,
            hsl(var(--foreground) / .72) 62%,
            hsl(var(--foreground) / .58) 100%),
        image-set(
            url("../pic/cartons-bg-1024.webp") 1x,
            url("../pic/cartons-bg-1600.webp") 2x
        );
    background-size: auto, cover;
    background-position: center, 50% 42%;
}

/*〔存查 d328〕*/
.mm-home .mm-boxbg { background-image: none; }
.mm-home .mm-boxbg::before,
.mm-home .mm-boxbg::after {
    content: ""; position: absolute; inset: 0;
}
.mm-home .mm-boxbg::before {
    background-image: image-set(
        url("../pic/cartons-bg-1024.webp") 1x,
        url("../pic/cartons-bg-1600.webp") 2x
    );
    background-size: cover;
    background-position: 50% 42%;
    filter: saturate(.28) contrast(1.02);
}
.mm-home .mm-boxbg::after {
    background-image: linear-gradient(125deg,
        hsl(var(--foreground) / .96) 0%,
        hsl(var(--foreground) / .90) 32%,
        hsl(var(--foreground) / .80) 66%,
        hsl(var(--foreground) / .70) 100%);
}

/*〔存查 d329〕*/
.mm-home .mm-boxbg::before { filter: saturate(.45) contrast(1.04); }
.mm-home .mm-boxbg::after {
    background-image: linear-gradient(125deg,
        hsl(var(--al-ink) / .78) 0%,
        hsl(var(--al-ink) / .68) 32%,
        hsl(var(--al-ink) / .56) 66%,
        hsl(var(--al-ink) / .44) 100%);
}
.mm-home #action-box h2,
.mm-home #action-box p {
    text-shadow: 0 1px 3px hsl(var(--al-ink) / .55), 0 0 18px hsl(var(--al-ink) / .35);
}

/*〔存查 d330〕*/
.mm-home #action-box p {
    color: hsl(var(--background) / .88);
}

/*〔存查 d331〕*/
.mm-home #action-box > .container { position: relative; }
.mm-home #action-box > .container::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(900px, 92%);
    height: 78%;
    background: radial-gradient(ellipse at center,
        hsl(var(--al-ink) / .58) 0%,
        hsl(var(--al-ink) / .40) 45%,
        transparent 72%);
    z-index: -1;
    pointer-events: none;
}

/*〔存查 d332〕*/
.mm-home #action-box > .container::before { display: none; }
.mm-home .mm-boxbg::after {
    background-image:
        radial-gradient(ellipse 46% 62% at 50% 46%,
            hsl(var(--al-ink) / .62) 0%,
            hsl(var(--al-ink) / .34) 52%,
            transparent 76%),
        linear-gradient(125deg,
            hsl(var(--al-ink) / .78) 0%,
            hsl(var(--al-ink) / .68) 32%,
            hsl(var(--al-ink) / .56) 66%,
            hsl(var(--al-ink) / .44) 100%);
}

/*〔存查 c113〕*/
.mm-home .mm-hero-visual { position: relative; }

.mm-home .mm-phone {
    position: absolute;
    right: -2%;
    bottom: -6%;
    z-index: 3;
    width: 15.5%;
    aspect-ratio: 9 / 19.5;
    background: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: 14%/6.5%;
    padding: 4.5%;
    box-shadow: var(--al-elev-md); /*〔存查 d334〕*/
}
.mm-home .mm-phone-screen {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 9%/4%;
    background: hsl(var(--muted));
}
.mm-home .mm-phone-screen img {
    width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
}
/* 聽筒條 */
.mm-home .mm-phone-notch {
    position: absolute;
    top: 2.2%;
    left: 50%;
    transform: translateX(-50%);
    width: 26%;
    height: .8%;
    min-height: 3px;
    border-radius: 9999px;
    background: hsl(var(--border));
}

@media (max-width: 991.98px) {
    /*〔存查 d336〕*/
    .mm-home .mm-phone { display: none; }
}

/*〔存查 d337〕*/
.mm-home .mm-hero-visual { position: absolute; }

/*〔存查 d338〕*/
.mm-home .mm-phone {
    right: 2%;
    bottom: -10%;
    width: 17%;
}


/*〔存查 d339〕*/


/*〔存查 c117〕*/


/*〔存查 c118〕*/

.mm-home {
    /* 全頁唯一的垂直節奏單位。要調間距請只改這一行。 */
    --al-section-pad: clamp(2.75rem, 5.5vw, 4.5rem);   /* 44–72px（原 56–96px） */
}/*〔存查 dead-rules-22〕*/
.mm-home .mm-cuts,
.mm-home .mm-split,
.mm-home .mm-shaped,
.mm-home .mm-download { padding-block: var(--al-section-pad); }

/* 這兩個既有勝出規則是 id 級 (1,1)，必須同樣用 id 才蓋得過（類別選擇器會輸）。 */
.mm-home #machine-section { padding-block: var(--al-section-pad); }

/* 區塊**內部**的 cut 間距跟著同一顆 token 走（維持 L2963 立下的「全頁只有一種」）。 */
.mm-home .mm-cut { margin-top: var(--al-section-pad); }


/*〔存查 c119〕*/

/* 卡面規格 SSOT。不沿用既有的 `--al-card-radius`（本檔 L86，是寫死 10px 的
   前身舊模板遺產）—— 兩個名字太像會互相污染，另起一個語意明確的名字。 */
.mm-home {
    --al-cardface-radius: var(--radius-xl);                       /* 14px，對齊 shadcn Card */
    --al-cardface-shadow: 0 1px 3px 0 hsl(var(--foreground) / .06); /* shadow-sm，靜置就有 */
}/* 靜置就給 shadow-sm，hover 那條 (0,3) 仍然贏，變成正確的「抬升」而不是「無中生有」。
       L3383 既有的 `transition: border-color, box-shadow` 已經涵蓋這個過渡。 */



/*〔存查 c120〕*/
.mm-home .mm-phone {
    right: auto;
    left: -9%;
    bottom: -8%;
    width: 16%;
}


/*〔存查 c121〕*/
.mm-home #service,
.mm-home #showcase,
.mm-home #pricing {
    background-color: hsl(var(--muted) / .45);
}
.mm-home #features-glance,
.mm-home #machine-section,
.mm-home #about {
    background-color: hsl(var(--background));
}

/*〔存查 d354〕*/
.mm-home #about .mm-split-media img,
.mm-home #about img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center 42%;
    width: 100%;
    height: auto;
}

/*〔存查 c123〕*/
.mm-home #service,
.mm-home #showcase,
.mm-home #pricing {
    position: relative;
    overflow-x: clip;
    background-color: transparent;
}
.mm-home #service::before,
.mm-home #showcase::before,
.mm-home #pricing::before {
    content: "";
    position: absolute;
    top: 0;
    left: -58px;
    width: 100vw;
    height: calc(100% - 120px);
    transform: rotate(-2.2deg);
    transform-origin: top left;
    border-top-right-radius: 320px;
    border-bottom-right-radius: 320px;
    background-color: hsl(var(--muted) / .55);
    z-index: 0;
    pointer-events: none;
}
/* 淡背景照：壓在斜切色塊上，各區塊用不同的既有實景 */
.mm-home #service::after,
.mm-home #showcase::after,
.mm-home #pricing::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: .055;
    z-index: 0;
    pointer-events: none;
    filter: grayscale(1);
}
.mm-home #service::after  { background-image: url("../pic/hero-warehouse-1600.webp"); }
.mm-home #showcase::after { background-image: url("../pic/cartons-bg-1600.webp"); }
.mm-home #pricing::after  { background-image: url("../pic/fatboy-container-1280.webp"); }

/* 內容必須浮在兩層背景之上 */
.mm-home #service > *,
.mm-home #showcase > *,
.mm-home #pricing > * { position: relative; z-index: 1; }

/* 續上：`left: -9%` 讓手機跑出 `.alice-hero-visual` 左緣、侵入文字區，
   把「電子發票」chip 與導言蓋掉。「放左邊」指的是筆電的左下角，不是跨到文字欄。
   因此收回筆電範圍內，只讓左緣略微探出（device stack 的標準關係：小裝置壓在大裝置一角）。 */
.mm-home .mm-phone {
    left: 1%;
    bottom: -12%;
    width: 15%;
}

/*〔存查 d359〕*/
.mm-home .mm-phone { width: 18.5%; left: -1%; bottom: -13%; }
/* 訂單號不可以折行 —— 折行正是「螢幕看起來很窄」的來源 */

/* 手機螢幕用乾淨的灰色區塊，截圖之後補。
   先前的假 UI 模擬整段移除（假畫面比空的更糟）。
   灰階用 `--muted`，與其他四台筆電的灰底佔位圖（#EEEEEF）同一階，全站佔位一致。 */
.mm-home .mm-phone-screen { background: hsl(var(--muted)); }

/*〔存查 d362〕*/
.mm-home .mm-phone {
    padding: 2.2%;
    border-radius: 11%/5.2%;
}
.mm-home .mm-phone-screen { border-radius: 9.5%/4.6%; }
.mm-home .mm-phone-notch { top: 1.1%; width: 22%; height: .55%; min-height: 2px; }

/*〔存查 c126〕*/
.mm-home .mm-phone {
    padding: clamp(2px, .2vw, 4px);
}
.mm-home .mm-phone-screen {
    width: 100%;
    height: 100%;
    display: block;
}

/*〔存查 c127〕*/
.mm-home .mm-device { aspect-ratio: 1600 / 995; }
.mm-home .mm-device-screen {
    left: 14.06%;
    top: 4.62%;
    width: 71.88%;
    height: 63.02%;
}

/*〔存查 c128〕*/
.mm-home .mm-device {
    aspect-ratio: auto;
    position: relative;
    padding-bottom: 2.4%;          /* 讓出底座的位置 */
}
.mm-home .mm-device-frame { display: none; }

.mm-home .mm-device-screen {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    background: hsl(var(--muted));
    border: 3px solid hsl(var(--background));
    border-radius: 10px;
    box-shadow: var(--al-ring-1) hsl(var(--border)), var(--al-elev-lg); /*〔存查 d367〕*/
    overflow: hidden;
}
.mm-home .mm-device-screen img,
.mm-home .mm-device-screen .site-mockup > img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 底座：一條細長圓角矩形，寬度略大於螢幕 */
.mm-home .mm-device::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 108%;
    height: 1.6%;
    min-height: 6px;
    border-radius: 0 0 9999px 9999px;
    background: hsl(var(--background));
    box-shadow: 0 1px 0 hsl(var(--border)),
                0 10px 22px -10px hsl(var(--foreground) / .18);
}

/*〔存查 d369〕*/
/*〔存查 dead-rules-23〕*/
.mm-home .mm-device::after { width: 100%; }

/*〔存查 d370〕*/

/*〔存查 c131〕*/
.mm-home .mm-device {
    aspect-ratio: 1915 / 1157;
    padding-bottom: 0;
}
.mm-home .mm-device-frame { display: block; }
.mm-home .mm-device::after { content: none; }
.mm-home .mm-device-screen {
    position: absolute;
    left: 15.67%;
    top: 12.53%;
    width: 70.60%;
    height: 73.21%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 1px;
    box-shadow: none; /* ㉘ 註記（值一個字沒動）：同檔 L4533 排在後面、選擇器同權重，本條的 box-shadow 被蓋掉
         （量測 .mm-device-screen 的 computed 是 rgba(229,229,229,0.55) 0px 0px 0px 1px）。none 不需要 token。 */
    background: hsl(var(--muted));
}
/*〔存查 dead-rules-24〕*/

/*〔存查 c132〕*/
.mm-home .mm-device-screen {
    left: 14.0%;
    width: 72.0%;
    top: 11.9%;
    height: 74.5%;
}

/*〔存查 c133〕*/
.mm-home .mm-device-screen {
    left: 14.78%;
    width: 70.56%;
    top: 12.53%;
    height: 73.21%;
}

/*〔存查 c134〕*/
.mm-home .mm-device-screen {
    left: 15.69%;
    width: 68.69%;
    top: 12.63%;
    height: 73.08%;
}

/*〔存查 c135〕*/
.mm-home .mm-phone { left: 6%; }

/*〔存查 c136〕*/
.mm-home .mm-device-screen {
    left: 15.69%;
    top: 12.63%;
    width: 70.56%;
    height: 73.08%;
}

/*〔存查 c137〕*/
.mm-home .mm-device-frame { z-index: 1; }
.mm-home .mm-device-screen {
    z-index: 2;
    left: 15.2%;
    top: 12.2%;
    width: 71.4%;
    height: 73.9%;
    border-radius: 2px;
    overflow: hidden;
}

/*〔存查 c138〕*/
.mm-home {
    /*  螢幕孔座標的唯一來源。量測自 laptop-frame-1600.webp 的 alpha 通道。
       要調整只能改這裡，不要再往檔尾追加 .alice-device-screen 的座標規則。 */
    --al-screen-l: 15.2%;
    --al-screen-t: 12.2%;
    --al-screen-w: 71.4%;
    --al-screen-h: 73.9%;
}
.mm-home .mm-device-screen {
    position: absolute;
    left:   var(--al-screen-l);
    top:    var(--al-screen-t);
    width:  var(--al-screen-w);
    height: var(--al-screen-h);
    z-index: 2;                    /* 截圖蓋在框圖之上（見上一段：層序反轉） */
    border-radius: 2px;
    overflow: hidden;
    background: hsl(var(--muted));
}

/*〔存查 c139〕*/
.mm-home {
    --al-screen-l: 13.88%;
    --al-screen-w: 72.31%;
    --al-screen-t: 12.20%;
    --al-screen-h: 73.90%;
}

/*〔存查 d383〕*/
.mm-home {
    --al-screen-t: 10.87%;
    --al-screen-h: 75.30%;
}
.mm-home .mm-device-screen img,
.mm-home .mm-device-screen .site-mockup > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/*〔存查 d384〕*/
.mm-home {
    --al-screen-t: 12.31%;
    --al-screen-h: 75.37%;
}

/*〔存查 c142〕*/
.mm-home {
    --al-screen-t: 12.42%;
    --al-screen-h: 73.08%;
}

/*〔存查 c143〕*/
.mm-home {
    --al-screen-t: 13.47%;
    --al-screen-h: 73.06%;
}

/*〔存查 c144〕*/
.mm-home {
    --al-screen-l: 15.78%;
    --al-screen-t: 12.69%;
    --al-screen-w: 70.47%;
    --al-screen-h: 73.06%;
}

/*〔存查 c145〕*/

/* ① 尺規（全頁唯一來源）。要調間距請只改這一段。 */
.mm-home {
    --al-sec-y:   48px;   /* 區塊上下內距 */
    --al-flow:    32px;   /* 區塊內：大件與大件（cut ↔ cut） */
    --al-head-y:  32px;   /* 標題群 → 內容 */
    --al-stack:   16px;   /* 文字堆疊：標題 → 副標 → 段落 */
    --al-card-y:  32px;   /* 卡片上下內距 */
    --al-card-x:  24px;   /* 卡片左右內距 */

    /* 既有 token 轉為別名，L4090–4102 那 12 條規則自動套用新尺規 */
    --al-section-pad: var(--al-sec-y);
}
@media (min-width: 768px) {
    .mm-home { --al-sec-y: 64px; --al-flow: 40px; --al-head-y: 40px; }
}
@media (min-width: 1200px) {
    .mm-home {
        --al-sec-y: 80px; --al-flow: 48px; --al-head-y: 48px;
        --al-card-y: 40px; --al-card-x: 32px;
    }
}

/* ② 修重疊：把前身模板疊層效果的**另外兩個出口**關掉。
   特異度 (0,2) > L667 的 (0,1) 且位置在後，因此勝出。
   綁 `.alice-counterbox` 自己而不是 `.alice-statsec`，以後再搬區塊也不會復發。 */

/*〔存查 dead-rules-25〕*/

/*〔存查 dead-rules-26〕*/

/* ⑤ 區塊內大件節奏：cut ↔ cut 改吃 --al-flow，讓「區塊內」明顯小於「區塊間」。 */
.mm-home .mm-cut { margin-top: var(--al-flow); }

/*〔存查 d401〕*/
.mm-home .mm-split-text {
    display: flex;
    flex-direction: column;
    gap: var(--al-stack);
}
.mm-home .mm-split-text > :is(h2, p) { margin: 0; }/* 按鈕自己縮成內容寬，並與最後一段拉開一階（gap 16 + margin 16 = 32px）。 */
/*〔存查 d403〕*/


/*〔存查 c147〕*/
.mm-home {
    --al-screen-l: 14.98%;
    --al-screen-t: 11.89%;
    --al-screen-w: 72.07%;
    --al-screen-h: 74.66%;
}

/*〔存查 c148〕*/
.mm-home {
    --al-screen-l: 15.63%;
    --al-screen-t: 12.44%;
    --al-screen-w: 70.63%;
    --al-screen-h: 73.58%;
}

/*〔存查 c149〕*/
.mm-home .mm-device-screen img,
.mm-home .mm-device-screen .site-mockup > img {
    width: 100%;
    height: auto;
    object-fit: unset;
    object-position: unset;
    display: block;
}
.mm-home .mm-device-screen { overflow: hidden; }

/*〔存查 c150〕*/

/* ① 尺規補兩階。只新增名字，不覆寫 ⑲ 的任何一顆。 */
.mm-home {
    /*〔存查 d409〕*/
    --al-gap-xs: var(--al-gap-inline);   /* = 8px  微間距：圖示↔文字、chip↔chip、小標↔說明 */
    --al-gap-md: var(--al-gap-group);    /* = 24px 卡片內：欄↔欄、群組↔群組 */
}

/*〔存查 d412〕*/
/*〔存查 dead-rules-27〕*/

/*〔存查 d413〕*/
.mm-home #service #machine-section { margin-top: var(--al-flow); }/* ④ 區塊內的「大件」統一吃 `--al-flow`（離散階梯 32/40/48），取代 `clamp(2rem, 4vw, 3rem)`。
   起因：clamp 的中段是連續值，900px 視窗時 4vw = 36px，不在 4px 尺規上。
     1440 下兩者同為 48px，這一條在桌機是**零視覺變化**，處理的是中間寬度。 */
.mm-home .mm-cut--wide .mm-cut-media { margin-top: var(--al-flow); }/* ⑤ hero 按鈕列：14px → 16px。 */


/* ⑥ 數字卡：數字 → 金線 → 標籤，15px ×2 → 16px ×2。
   `::after` 金線是 `bottom: 5px` 定位在 padding 內，只位移 1px，不動它。 */

/* ⑦ CTA 文字堆疊（#action-box）：原本 h2 與 p 都是 30px，語意層級被壓平。
   因此改成和 ⑲⑥ 的 `.alice-split-text` 同一套：標題→內文 16，內文→按鈕 32。 */
.mm-home .mm-download-inner h2 { margin-bottom: var(--al-stack); }
.mm-home .mm-download-inner p  { margin-bottom: calc(var(--al-stack) * 2); }/* ⑧ 滑軌圖說（#showcase）：20px → 24px、6px → 8px。 */
/* ⑨ 一覽小卡（#features-glance）：18px → 16px。 */
/* ⑩ hero 流程小圖的 chip 列：6px → 8px。 */
/* ⑪ 價格區（#pricing）內部：20px → 24px、6px → 8px、14px → 16px。 */
/* 附註小字 → 「為什麼」三點：原本 32(附註 mb) + 40(三點 mt) 疊成 72px，
   兩個值各自都在尺規上，**相加之後不在** —— 典型的「兩個出口」形狀。
   因此附註歸零、三點自己吃 `--al-flow`，大件↔大件一律 48。 */


/*〔存查 d423〕*/
@media (min-width: 768px) {
    .mm-home .mm-feat { padding-inline: calc(var(--al-stack) * 2); }
}

/*〔存查 d424〕*/
.mm-home .mm-gap-60 { height: var(--al-flow); }

/*〔存查 d425〕*/
@media (max-width: 767.98px) {
    .mm-home .mm-glance-icons { column-gap: var(--al-gap-md); }
}

/*〔存查 c154〕*/

/*〔存查 c155〕*/
.mm-home .mm-device-screen {
    background: hsl(var(--background));
}
.mm-home .mm-device-screen::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 8.5%;
    background: hsl(var(--muted));
    border-bottom: 1px solid hsl(var(--border));
    z-index: 3;
}
.mm-home .mm-device-screen::after {
    content: "";
    position: absolute;
    top: 4.25%;
    left: 2.4%;
    width: .8%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: hsl(var(--muted-foreground) / .32);
    box-shadow: 1.6% 0 0 0 hsl(var(--muted-foreground) / .32),
                3.2% 0 0 0 hsl(var(--muted-foreground) / .32);
    transform: translateY(-50%);
    z-index: 4;
}
/* 截圖往下讓出標題列的高度 */
.mm-home .mm-device-screen img,
.mm-home .mm-device-screen .site-mockup > img {
    position: absolute;
    top: 8.5%;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 2;
}

/*〔存查 d429〕*/
.mm-home .mm-device-screen::before,
.mm-home .mm-device-screen::after { content: none; }

.mm-home .site-mockup {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: hsl(var(--background));
    overflow: hidden;
}
.mm-home .site-mockup .site-mockup-bar { flex: 0 0 auto; }
.mm-home .site-mockup .site-mockup > img {
    position: static;
    width: 100%;
    height: auto;
    display: block;
}

/*〔存查 d430〕*/
.mm-home .mm-phone-screen::before,
.mm-home .mm-phone-screen::after { content: none !important; }
.mm-home .mm-phone-screen img {
    position: static;
    top: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/*〔存查 c157〕*/
.mm-home {
    --al-screen-l: 14.66%;
    --al-screen-w: 70.63%;
}

/*〔存查 c158〕*/
.mm-home #machine-section {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: max(1.5rem, calc((100vw - 1320px) / 2));
}

/*〔存查 c159〕*/
.mm-home #service::after  { background-image: url("../pic/cartons-bg-1600.webp"); }
.mm-home #showcase::after { background-image: url("../pic/fatboy-container-1280.webp"); }
.mm-home #pricing::after  { background-image: none; }
.mm-home #pricing::before { background-color: hsl(var(--muted) / .55); }

/*〔存查 c160〕*/
.mm-home .site-mockup .site-mockup-bar {
    padding: clamp(3px, .42vw, 8px) clamp(5px, .62vw, 12px);
    gap: clamp(2px, .26vw, 5px);
}
.mm-home .site-mockup .site-mockup-dot {
    width: clamp(3px, .3vw, 6px);
    height: clamp(3px, .3vw, 6px);
}
.mm-home .site-mockup .site-mockup-title {
    font-size: clamp(5px, .52vw, 10px);
    margin-left: clamp(2px, .2vw, 4px);
}
.mm-home .site-mockup .site-mockup-url {
    font-size: clamp(4px, .44vw, 9px);
    padding: clamp(1px, .12vw, 3px) clamp(3px, .34vw, 7px);
    border-radius: 9999px;
}

/*〔存查 c161〕*/
/*〔存查 dead-rules-28〕*/
/* hero h1 維持 text-5xl，它是全頁唯一的主標 */
.mm-home #home h1 { font-size: var(--al-type-hero, 3rem); } /* ㉓批2：→hero 角色；前值：3rem */

/*〔存查 dead-rules-29〕*/

/*〔存查 d442〕*/
.mm-home #service .mm-cut + .mm-cut,
.mm-home #service > .container > section + .mm-cut,
.mm-home #service .mm-split + .mm-cut {
    margin-top: var(--al-flow, 3rem);
}

/*〔存查 c162〕*/
.mm-home {
    --al-text-xs:   .75rem;     /* 12px  微標籤、badge */
    --al-text-sm:   .875rem;    /* 14px  輔助文字、按鈕預設（shadcn default） */
    --al-text-base: 1rem;       /* 16px  內文基準 */
    --al-text-lg:   1.125rem;   /* 18px  小標、lg 按鈕 */
    --al-text-xl:   1.25rem;    /* 20px  卡片標題 */
    --al-text-2xl:  1.5rem;     /* 24px  區塊標題（手機）、實績數字下界 */
    --al-text-3xl:  1.875rem;   /* 30px  區塊標題（平板） */
    --al-text-4xl:  2.25rem;    /* 36px  區塊標題（桌機） */
    --al-text-5xl:  3rem;       /* 48px  hero h1、實績數字上界 */
}

/*〔存查 d453〕*/
.mm-home .mm-download-inner h2 {
    font-size: var(--al-type-title); /*〔存查 dead-rules-30〕*/
    line-height: 1.3;
}

/*〔存查 c164〕*/

/*〔存查 d456〕*/
@media (max-width: 991.98px) {
    /*〔存查 dead-rules-31〕*/
    /*〔存查 dead-rules-32〕*/
}

/*〔存查 d459〕*/
@media (max-width: 575.98px) {
    /*〔存查 dead-rules-33〕*/
    /*〔存查 dead-rules-34〕*/
    /*〔存查 dead-rules-35〕*/
}

/*〔存查 c167〕*/

/*〔存查 c168〕*/
.mm-home .site-mockup .site-mockup > img {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top center;
}

/*〔存查 c169〕*/
.mm-home {
    --al-screen-l: 15.31%;
    --al-screen-t: 11.92%;
    --al-screen-w: 71.41%;
    --al-screen-h: 74.61%;
}

/*〔存查 c170〕*/
.mm-home {
    --al-screen-l: 13.20%;
    --al-screen-t: 11.01%;
    --al-screen-w: 73.59%;
    --al-screen-h: 77.98%;
}

/* 續上：用實際算出來的值（非手算近似值）
   對稱且蓋住孔：x 85–554 / y 46–339
   相對機身 左右各 56px 完全對稱；蓋過孔 左 16px / 右 3px，無縫 */
.mm-home {
    --al-screen-l: 13.28%;
    --al-screen-t: 11.92%;
    --al-screen-w: 73.28%;
    --al-screen-h: 75.91%;
}

/*〔存查 c171〕*/
.mm-home .site-mockup .site-mockup-bar {
    height: 5.5%;
    min-height: 0;
    padding: 0 1.6%;
    gap: 0;
    background: hsl(var(--muted));
    border-bottom: 1px solid hsl(var(--border));
    align-items: center;
}
.mm-home .site-mockup .site-mockup-dot {
    width: 1.05%;
    height: auto;
    aspect-ratio: 1;
    margin-right: .5%;
    background: hsl(var(--muted-foreground) / .3);
}
/* 分頁標籤：真實瀏覽器那個位置是有底色的圓角小塊，不是裸文字 */
.mm-home .site-mockup .site-mockup-title {
    margin-left: 2%;
    padding: .25em .9em;
    border-radius: 4px 4px 0 0;
    background: hsl(var(--background));
    font-size: clamp(4px, .42vw, 8px);
    font-weight: 500;
    color: hsl(var(--foreground) / .78);
    line-height: 1.6;
    white-space: nowrap;
}

/*〔存查 c172〕*/
.mm-home {
    /*〔存查 d471〕*/

    /*〔存查 c174〕*/
    --al-screen-l: 13.25%;
    --al-screen-t: 11.58%;
    --al-screen-w: 73.58%;
    --al-screen-h: 75.05%;

    /*〔存查 c175〕*/
    /*〔存查 c176〕*/
    /*〔存查 dead-rules-36〕*/

    /*〔存查 c177〕*/
    --al-chrome-h: 3.5%;

    /*〔存查 d477〕*/
    /*〔存查 d478〕*/
    --al-win-red:    2.9 100% 67.1%;
    --al-win-yellow:  41 99% 58.8%;
    --al-win-green:  129 66.7% 47.1%;
}

.mm-home .mm-device-screen {
    position: absolute;
    left: var(--al-screen-l);
    top: var(--al-screen-t);
    width: var(--al-screen-w);
    height: var(--al-screen-h);
    z-index: 2;
    overflow: hidden;
    /* 前值：border-radius: 2px;
       改成只有上方兩角：瀏覽器視窗就是這個形狀，下方直角接著畫面。 */
    border-radius: 3px 3px 0 0;
    background: hsl(var(--background));
    /*〔存查 d480〕*/
    /*〔存查 d481〕*/
    box-shadow: var(--al-ring-1) hsl(var(--border) / .55); /* ㉘：→ring token；前值：0 0 0 1px hsl(var(--border) / .55) —— 逐位元組相同。上方那段「降到 55%」的量測結論一個字都沒動，α 仍寫在這裡（ring token 只放幾何 0 0 0 1px） */
}

/*〔存查 d483〕*/
.mm-home .mm-device-screen > img,
.mm-home .mm-device-screen > .site-mockup > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/*〔存查 c183〕*/
.mm-home .site-mockup {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: hsl(var(--background));
    overflow: hidden;
}

.mm-home .site-mockup .site-mockup-bar {
    flex: 0 0 var(--al-chrome-h);
    display: flex;
    align-items: center;
    height: var(--al-chrome-h);
    min-height: 0;
    /* 左右內距 = 燈直徑的 1.2 倍，讓第一顆燈不貼邊（參考圖的留白比例） */
    /* 前值：padding: 0 1.4%;  padding: 0 1.6%;  padding: 0 2%;
       左內距由 2% 收到 1.2%。
         最小的一台（234px 寬）＝ 2.81px，仍大於那條 1px 描邊，不會貼上去。 */
    padding: 0 1.2%;
    gap: 0;
    /*〔存查 d487〕*/
    background: hsl(var(--background));
    /* 前值：border-bottom: 1px solid hsl(var(--border));（值相同，僅重申用意）
       這條線是「列」與「畫面」之間唯一的分隔，不要拿掉：
         列是白的、截圖頂端也是白的，沒有這條線就會黏成一片。 */
    border-bottom: 1px solid hsl(var(--border));
}

/* 三顆交通燈 —— 全站唯一有顏色的外框元素 */
.mm-home .site-mockup .site-mockup-dot {
    flex: 0 0 auto;
    /*〔存查 d490〕*/
    /*〔存查 c185〕*/
    width: 1.25%;
    min-width: 3px;
    height: auto;
    aspect-ratio: 1;
    margin-right: .62%;
    border-radius: 50%;
    /* 前值：background: hsl(var(--muted-foreground) / .32);
       三顆用同一個 class、顏色由 :nth-of-type 決定
         標記端三個 span 一模一樣，不會有人把紅黃綠寫反。 */
    /*〔存查 d493〕*/
    /*〔存查 c187〕*/
    background: hsl(var(--muted-foreground) / .34);
}
.mm-home .site-mockup .site-mockup-dot:nth-of-type(2) { background: hsl(var(--muted-foreground) / .30); }
.mm-home .site-mockup .site-mockup-dot:nth-of-type(3) { background: hsl(var(--muted-foreground) / .26); }

/* 細線圖示（lucide）：‹ › 在燈右邊、+ 與分頁框在最右邊
   用專案既有的 lucide，不引入任何外部資源、不自己用 border 拼形狀。
   lucide 會把 <i data-lucide> 換成 <svg>，所以尺寸要下在 svg 上。 */
/*〔存查 d496〕*/
.mm-home .site-mockup .site-mockup-ico {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.7%;
    min-width: 6px;
    aspect-ratio: 1;
    color: hsl(var(--muted-foreground) / .45);
}
.mm-home .site-mockup .site-mockup-ico svg,
.mm-home .site-mockup .site-mockup-ico [data-lucide] {
    width: 100%;
    height: 100%;
    /* lucide 預設 stroke-width:2 是給 24px 用的；這裡最小只有 6px，
       線會粗到糊掉，因此調細，讓它在 6–14px 之間都還是「細線」。 */
    stroke-width: 1.5;
}
.mm-home .site-mockup .site-mockup-ico--back { margin-left: 1.6%; }
.mm-home .site-mockup .site-mockup-ico--fwd  { margin-right: 1.6%; }
.mm-home .site-mockup .site-mockup-ico--plus { margin-left: 1.6%; }
.mm-home .site-mockup .site-mockup-ico--tabs { margin-left: 1.2%; }

/* 中央搜尋膠囊：全圓角、淺灰底、內含一個很小的放大鏡，膠囊內不放任何文字 */
/*〔存查 d499〕*/
.mm-home .site-mockup .site-mockup-url {
    flex: 1 1 auto;
    /*〔存查 d500〕*/
    display: none;
    align-items: center;
    min-width: 0;
    height: 55%;
    padding: 0 1.4%;
    border-radius: 9999px;
    background: hsl(var(--muted));
}
/*〔存查 d501〕*/
.mm-home .site-mockup .site-mockup-url .site-mockup-ico {
    width: auto;
    min-width: 0;
    height: 62%;
}

/* 原規則保留（第一輪的分頁標籤樣式，文字已移除，不刪只停用） */
.mm-home .site-mockup .site-mockup-title {
    margin: 0 0 0 1.8%;
    padding: .3em 1em;
    border-radius: 3px 3px 0 0;
    background: hsl(var(--background));
    font-size: clamp(4px, .4vw, 8px);
    font-weight: 500;
    line-height: 1.5;
    color: hsl(var(--foreground) / .75);
    white-space: nowrap;
}

/*〔存查 d503〕*/
.mm-home .site-mockup .site-mockup > img {
    /*〔存查 d504〕*/
    position: static;
    top: auto;
    left: auto;
    /*〔存查 c192〕*/
    flex: 0 0 auto;
    min-height: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/*〔存查 c193〕*/
@media (max-width: 991.98px) {
    /*〔存查 d507〕*/
    /*〔存查 c195〕*/
    .mm-home #home .mm-hero-visual {
        /*〔存查 d509〕*/
        display: block;
        position: relative;
        --al-phone-w: clamp(120px, 34vw, 170px);
        --al-phone-gap: 24px;
        width: 100%;
        max-width: 100%;
        right: auto;
        left: auto;
        top: auto;
        bottom: auto;
        margin-top: 40px;
    }

    /* ② 收掉「文字→裝置」的間隔（理由與量測見上方區塊標頭）。
       原規則 L377 `.alice-hero-content { padding-top: 60px; padding-bottom: 50px }`
         維持不變，這裡只是在這個斷點覆蓋 padding-bottom 這一顆。 */
    .mm-home #home .mm-hero-content { padding-bottom: 0; }

    /*〔存查 c197〕*/
    /*〔存查 c198〕*/
    .mm-home #home .mm-device {
        margin-bottom: calc(var(--al-phone-w) * 2.0615 + var(--al-phone-gap));
    }
    .mm-home #home .mm-phone {
        display: block;
        /*〔存查 d513〕*/
        position: absolute;
        top: 100%;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translateX(-50%);
        margin-top: var(--al-phone-gap);
        width: var(--al-phone-w);
    }
}

/*〔存查 c200〕*/
@media (max-width: 575.98px) {
    /*〔存查 d515〕*/
}

@media (min-width: 768px) and (max-width: 991.98px) {
    /*〔存查 c202〕*/
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    /*〔存查 c203〕*/
}

/*〔存查 c204〕*/

/*〔存查 c205〕*/

/*〔存查 c206〕*/
/*〔存查 c207〕*/
/* 滑軌卡片說明：`.alice-on-ink` 只翻 `.alice-title` 與 `.alice-title-wrap > p`，
   這兩個節點是 `#showcase` 獨有的，因此在這裡補齊，不要去改 `.alice-on-ink` 本體
   （那會影響到未來所有深色區）。 */
/*〔存查 d523〕*/
/* 左右鈕：原本是深字淺底，在深底上會糊掉，因此反過來。只在本區生效。 */
/*〔存查 d525〕*/

/*〔存查 c209〕*/
/*〔存查 d527〕*/

/*〔存查 d528〕*/



/*〔存查 c212〕*/
.mm-home .mm-phone {
    /*〔存查 d530〕*/
    position: absolute;
    width: 18.5%;
    left: 6%;
    right: auto;
    bottom: -13%;
    z-index: 3;
    aspect-ratio: 71.6 / 147.6;      /* 機身 h/w = 2.061（實機 mm，不是螢幕比例） */
    padding: 0;                       /* 見上：% padding 的基準是父層寬，不能用 */
    border: 0;                        /* 邊框改用 box-shadow，才不會佔掉 border-box */
    box-shadow: var(--al-ring-1) hsl(var(--border)); /* ㉘：→ring token；前值：0 0 0 1px hsl(var(--border)) —— 逐位元組相同。這正是「ring 不是 shadow」的教科書案例：上一行註解寫得很清楚，它是**邊框**，只是改用 box-shadow 畫以免佔掉 border-box */
    background: hsl(var(--background));
    border-radius: 17.27% / 8.38%;
}

/*〔存查 c214〕*/
/*〔存查 c215〕*/
@supports (animation-timeline: view()) {
    @media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
        /* 只宣告名字，不碰它自己的 animation/timeline/range（那是筆電的既有行為）。
           `view-timeline-axis` 不寫時為預設 `block`，與匿名 `view()` 的預設一致。 */
        .mm-home .mm-hero-visual { view-timeline-name: --mm-hero-view; }

        .mm-home .mm-phone {
            animation: mm-phone-drift linear both !important;
            animation-timeline: --mm-hero-view !important;
            animation-range: entry 0% cover 60% !important;
        }
        /*〔存查 d538〕*/
        @keyframes mm-phone-drift {
            from { transform: translateY(13px); }
            to   { transform: translateY(-13px); }
        }
    }
}
.mm-home .mm-phone-screen {
    /* 前值：width: 100%; height: 100%; border-radius: 9.5%/4.6%; 9%/4%; */
    position: absolute;
    left: 4.54%;
    right: 4.54%;
    top: 2.203%;
    bottom: 2.203%;
    width: auto;
    height: auto;
    overflow: hidden;                 /* 圓角變大後必須有它，否則截圖直角會露出來 */
    border-radius: 14% / 6.46%;
    background: hsl(var(--muted));
    display: block;
}
.mm-home .mm-phone-screen img {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
    /*〔存查 d541〕*/
    object-fit: cover;
    object-position: top center;
    display: block;
}

/*〔存查 d542〕*/
.mm-home .site-mockup .site-mockup-title { display: none; }/*〔存查 c217〕*/

.mm-home button.mm-glance-item {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    text-align: center;
    cursor: pointer;
}



/*〔存查 c218〕*/

/* ① 深色帶：五大功能第 2 位的自動包裝機。文字翻淺色全部由 blade 上的 `.alice-on-ink` 既有機制處理。 */
.mm-home #machine-section.site-section-dark { background-color: hsl(var(--al-ink)); }

/*〔存查 d546〕*/
.mm-home .site-section-dark .mm-split-text p { color: hsl(var(--al-ink-on) / .72); }

/* ③ 休息點：導入四步驟（沿用 #showcase 這個 id）。前面剛結束連續四個重版型的 cut。 */
.mm-home #showcase { background-color: hsl(var(--muted)); }

/* ④ 轉換點：價格鉤子。它是全頁最該被看見的一塊，卻是唯一沒有底色的區塊。 */
.mm-home #pricing { background-color: hsl(var(--muted)); }

/*〔存查 c219〕*/
.mm-home #showcase,
.mm-home #pricing {
    --muted-foreground: var(--al-ink-soft);
}


/*〔存查 c220〕*/

/*〔存查 dead-rules-37〕*/

/*〔存查 c226〕*/

/* ① 區塊節奏：吃全站唯一那顆 token（同 ㉑ 的做法）。 */
.mm-home .mm-traits { padding-block: var(--al-section-pad); }

/* ② 卡片殼：shadcn Card 語彙。radius 比控件大一階（calc +6px = 16px）是 shadcn
   容器級圓角的慣例；陰影用 --al-ink 的低透明度，不硬寫灰階。 */
.mm-home .mm-traits-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) + 6px);
    overflow: hidden;
    box-shadow: var(--al-elev-xs), var(--al-elev-scene); /*〔存查 d570〕*/
}

/* ③ 工作檯：muted 半透明底＋ --border 點陣格線（設計稿／藍圖的隱喻，呼應區塊標題
   「系統設計特色」）。兩件證物是 flex 正常流、底緣對齊（像立在同一張桌面上），
   不用 absolute 疊放主內容，高度永遠由內容自己撐，不會壓到誰。 */
.mm-home .mm-traits-stage {
    display: flex;
    align-items: flex-end;
    gap: clamp(2rem, 5vw, 4rem);
    padding: clamp(1.5rem, 4vw, 3rem);
    border-bottom: 1px solid hsl(var(--border));
    background-color: hsl(var(--muted) / .45);
    background-image: radial-gradient(hsl(var(--border)) 1px, transparent 1.5px);
    background-size: 18px 18px;
}
@media (max-width: 767.98px) {
    /* 窄視窗改直排：瀏覽器窗全寬、手機置中在下 —— 兩件都在（零 display:none）。 */
    .mm-home .mm-traits-stage { flex-direction: column; align-items: stretch; }
    .mm-home .mm-traits-phone { align-self: center; }
}

/* ④ 瀏覽器窗（電腦版證物）。winbox 只負責當放大鏡的定位錨；
   window 自己 overflow:hidden 收圓角，放大鏡不能放它裡面（會被裁掉），所以掛在 winbox。 */
.mm-home .mm-traits-winbox { flex: 1 1 auto; min-width: 0; position: relative; }
.mm-home .mm-traits-window {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--al-elev-lg); /*〔存查 d574〕*/
}
.mm-home .mm-traits-shot { display: block; width: 100%; height: auto; }

/*〔存查 d575〕*/
.mm-home .mm-traits-loupe {
    position: absolute;
    top: -1.1rem;
    right: -.65rem;
    width: clamp(5rem, 9vw, 7rem);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
    box-shadow: 0 0 0 .3125rem hsl(var(--card)), var(--al-elev-lg); /*〔存查 d576〕*/
}
.mm-home .mm-traits-loupe img {
    position: absolute;
    width: 3252.08%;     /* 3122/96 —— 推導見本段檔頭（前值：2081.33% = 3122/150） */
    max-width: none;     /* 蓋掉全域 img{max-width:100%}，否則放大鏡變成整張縮圖 */
    height: auto;
    left: -2597.92%;     /* -(2542-48)/96（前值：-1644.67% = -(2542-75)/150） */
    top: 0;
}

/* ⑥ 手機（響應式證物）：殼三件套直接吃 ㉑ 的 .alice-duo-phone 家族，
   只把寬度交給外層欄位控制（㉑ 的 min(46%,12rem) 是為對開半版設計的，這裡欄位窄）。 */
.mm-home .mm-traits-phone { flex: 0 0 auto; width: clamp(8.5rem, 14vw, 11rem); }
.mm-home .mm-traits-phone .mm-duo-phone { width: 100%; }   /* (0,3,0) > ㉑ 的 (0,2,0) */

/* ⑦ 卡片 footer：兩格，1px 分隔線。寬＝左右格（豎線）、窄＝上下格（橫線），
   兩個方向的分隔線分別綁在配對斷點裡，永遠恰好一條，不會又豎又橫。 */
.mm-home .mm-traits-footer { display: grid; }
@media (min-width: 768px) {
    .mm-home .mm-traits-footer { grid-template-columns: 1fr 1fr; }
    .mm-home .mm-traits-item + .mm-traits-item { border-inline-start: 1px solid hsl(var(--border)); }
}
@media (max-width: 767.98px) {
    .mm-home .mm-traits-item + .mm-traits-item { border-block-start: 1px solid hsl(var(--border)); }
}
.mm-home .mm-traits-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.25rem, 4vw, 2.5rem);
}

/* ⑧ 圖示章：40px 方章、控件級圓角（--radius -2px = 8px，shadcn 內層元素慣例）。 */
.mm-home .mm-traits-ico {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 2px);
    background: hsl(var(--muted) / .6);
    color: hsl(var(--al-ink));
}
.mm-home .mm-traits-ico svg { width: 1.125rem; height: 1.125rem; }

/*〔存查 d584〕*/
.mm-home .mm-traits-copy { display: flex; flex-direction: column; gap: calc(var(--al-stack) / 2); }
.mm-home .mm-traits-copy .mm-title { margin: 0; font-size: 1.25rem; line-height: 1.5; }
.mm-home .mm-traits-copy .mm-title span { white-space: nowrap; }
.mm-home .mm-traits-copy p {
    margin: 0;
    font-size: var(--al-type-body, 1rem); /* ㉒SSOT：traits 說明段→body；前值：.9375rem */
    line-height: 1.75;
    color: hsl(var(--muted-foreground));   /* #737373 on #FFF = 4.74:1，見檔頭對比表 */
}

/*〔存查 c232〕*/

/* ① 疊圖容器：基底圖在正常流撐高度，暗色圖絕對疊上（同尺寸同比例，逐像素對齊）。 */
.mm-home .mm-traits-split { position: relative; }
.mm-home .mm-traits-split-dark {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /*〔存查 d589〕*/
    clip-path: polygon(114% 0, 100% 0, 100% 100%, 100% 100%);
}

/* ② 斜線：與暗半同一組斜率（58%→44%），寬 3px。
   calc() 進 polygon 座標是既有支援語法；線是裝飾件（aria-hidden）。 */
.mm-home .mm-traits-split-line {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* 同上：靜態時金線也在畫面外（0% 端點看不到任何線）。
       前值：clip-path: polygon(58% 0, calc(58% + 3px) 0, calc(44% + 3px) 100%, 44% 100%); */
    clip-path: polygon(114% 0, calc(114% + 3px) 0, calc(100% + 3px) 100%, 100% 100%);
    background: hsl(var(--al-gold));
}

/*〔存查 c233〕*/

/* A. 點陣：滿版、淡出、無框。 */
.mm-home .mm-traits { position: relative; }
.mm-home .mm-traits-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(hsl(var(--border)) 1.2px, transparent 1.4px);
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 42%, hsl(var(--foreground)) 35%, transparent 78%);
    mask-image: radial-gradient(ellipse 75% 70% at 50% 42%, hsl(var(--foreground)) 35%, transparent 78%);
    pointer-events: none;
}
/* mask 裡的 #000 不是「顏色」是「不透明度取樣」（mask 只讀 alpha），不算硬寫色值。 */
.mm-home .mm-traits-inner { position: relative; }

/* B. 場景：無框 flex，共用時間軸的主體。 */
.mm-home .mm-traits-scene {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(.75rem, 2vw, 1.5rem);
    padding-bottom: clamp(2rem, 5vw, 3.5rem);   /* 手機 translate 下探的視覺讓位 */
    view-timeline-name: --mm-traits-wipe;
    view-timeline-axis: block;
}
.mm-home .mm-traits-winbox { flex: 0 1 58rem; min-width: 0; }
.mm-home .mm-traits-scene .mm-traits-window {
    box-shadow: var(--al-elev-xs), var(--al-elev-scene); /* 沒了框，陰影負責「浮」 */ /*〔存查 d598〕*/
}

/* 手機盒：傾斜＋壓上電腦右下角＋底邊不齊。 */
.mm-home .mm-traits-phonebox {
    flex: 0 0 auto;
    width: clamp(8.75rem, 13vw, 10.75rem);
    align-self: flex-end;
    transform: translate(-38%, 14%) rotate(6deg);
    z-index: 2;
}
.mm-home .mm-traits-phonebox .mm-duo-phone {
    width: 100%;
    box-shadow: var(--al-ring-1) hsl(var(--border)), var(--al-elev-scene); /*〔存查 d600〕*/
}
@media (max-width: 767.98px) {
    .mm-home .mm-traits-scene { flex-direction: column; align-items: stretch; padding-bottom: 0; }
    .mm-home .mm-traits-phonebox {
        width: clamp(7.75rem, 36vw, 9.5rem);
        align-self: flex-end;
        margin-right: 7%;
        transform: translateY(-22%) rotate(6deg);
    }
}

/* C. 手機螢幕的亮暗雙圖＋金色細斜線（殼沿用 ㉑；.alice-duo-phone-screen 本身就是
   absolute 定位母體＋overflow:hidden）。靜態＝中點 76/24。 */
.mm-home .mm-traits-phone-dark {
    position: absolute;
    inset: 0;
    clip-path: polygon(152% 0, 100% 0, 100% 100%, 100% 100%);
}
.mm-home .mm-traits-phone-line {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* 前值：polygon(76% 0, calc(76% + 2px) 0, calc(24% + 2px) 100%, 24% 100%) */
    clip-path: polygon(152% 0, calc(152% + 2px) 0, calc(100% + 2px) 100%, 100% 100%);
    background: hsl(var(--al-gold));
}

/* D. footer 鬆綁：第二版的盒 padding 與兩方向分隔線歸零（同名選擇器、檔尾後宣告勝出；
   ㉒ 原規則保留＝第二版復活時把本小節四條註解掉即可）。 */
.mm-home .mm-traits-footer { margin-top: var(--al-flow); gap: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem); }
.mm-home .mm-traits-item { padding: 0; }
@media (min-width: 768px) {
    .mm-home .mm-traits-item + .mm-traits-item { border-inline-start: 0; }
}
@media (max-width: 767.98px) {
    .mm-home .mm-traits-item + .mm-traits-item { border-block-start: 0; }
}

/* E. 捲動白轉黑：原生路徑。reduce 之外＋支援 view timeline＋is-ready 三關全過才動。 */
/*〔存查 d606〕*/
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .mm-home .mm-traits-scene.is-ready.mm-wipe-on .mm-traits-split-dark {
            animation: mm-traits-wipe-desk linear both !important;
            animation-timeline: --mm-traits-wipe !important;
            animation-range: cover 15% cover 80% !important;   /* 前值：cover 10% ~ 65%。15%=進場先看到全白，80%=離場前轉完 */
        }
        .mm-home .mm-traits-scene.is-ready.mm-wipe-on .mm-traits-split-line {
            animation: mm-traits-wipe-desk-line linear both !important;
            animation-timeline: --mm-traits-wipe !important;
            animation-range: cover 15% cover 80% !important;   /* 前值：cover 10% ~ 65%。15%=進場先看到全白，80%=離場前轉完 */
        }
        .mm-home .mm-traits-scene.is-ready.mm-wipe-on .mm-traits-phone-dark {
            animation: mm-traits-wipe-phone linear both !important;
            animation-timeline: --mm-traits-wipe !important;
            animation-range: cover 15% cover 80% !important;   /* 前值：cover 10% ~ 65%。15%=進場先看到全白，80%=離場前轉完 */
        }
        .mm-home .mm-traits-scene.is-ready.mm-wipe-on .mm-traits-phone-line {
            animation: mm-traits-wipe-phone-line linear both !important;
            animation-timeline: --mm-traits-wipe !important;
            animation-range: cover 15% cover 80% !important;   /* 前值：cover 10% ~ 65%。15%=進場先看到全白，80%=離場前轉完 */
        }
    }
}
@keyframes mm-traits-wipe-desk {
    from { clip-path: polygon(114% 0, 100% 0, 100% 100%, 100% 100%); }
    to   { clip-path: polygon(0% 0, 100% 0, 100% 100%, -14% 100%); }
}
@keyframes mm-traits-wipe-desk-line {
    from { clip-path: polygon(114% 0, calc(114% + 3px) 0, calc(100% + 3px) 100%, 100% 100%); }
    to   { clip-path: polygon(0% 0, calc(0% + 3px) 0, calc(-14% + 3px) 100%, -14% 100%); }
}
@keyframes mm-traits-wipe-phone {
    from { clip-path: polygon(152% 0, 100% 0, 100% 100%, 100% 100%); }
    to   { clip-path: polygon(0% 0, 100% 0, 100% 100%, -52% 100%); }
}
@keyframes mm-traits-wipe-phone-line {
    from { clip-path: polygon(152% 0, calc(152% + 2px) 0, calc(100% + 2px) 100%, 100% 100%); }
    to   { clip-path: polygon(0% 0, calc(0% + 2px) 0, calc(-52% + 2px) 100%, -52% 100%); }
}

/*〔存查 c236〕*/

/* ① 暗層：按鈕模式 —— clip 收掉（蓋過 ㉓/㉔ 的靜態 polygon），改 opacity。 */
.mm-home .mm-traits-scene .mm-traits-split-dark,
.mm-home .mm-traits-scene .mm-traits-phone-dark {
    clip-path: none;
    opacity: 0;
}
.mm-home .mm-traits-scene.mm-traits-dark .mm-traits-split-dark,
.mm-home .mm-traits-scene.mm-traits-dark .mm-traits-phone-dark { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    /* reduce＝直接切（L1130 的 .15s 是 !important，這裡要同級蓋回 0）。 */
    .mm-home .mm-traits-scene .mm-traits-split-dark,
    .mm-home .mm-traits-scene .mm-traits-phone-dark { transition-duration: 0s !important; }
}
/* 金色斜線是 wipe 專用件，按鈕模式下不出場（保留未刪：wipe 復活時把這條註解掉）。 */
.mm-home .mm-traits-split-line,
.mm-home .mm-traits-phone-line { display: none; }

/* ② 切換鈕：位置與長相都照產品頂欄那顆的語彙（bar 右端、ghost、moon/sun）。 */
.mm-home .mm-traits-themebtn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 4px);
    background: hsl(var(--card));
    color: hsl(var(--al-ink));
    cursor: pointer;
}
.mm-home .mm-traits-themebtn:hover { background: hsl(var(--muted)); }
.mm-home .mm-traits-themebtn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.mm-home .mm-traits-themebtn svg { width: 1rem; height: 1rem; }
/* moon（亮態）／sun（暗態）互換 —— 與產品 d-none-dark / d-block-dark 同語意 */
.mm-home .mm-traits-themebtn .lucide-sun { display: none; }
.mm-home .mm-traits-scene.mm-traits-dark .mm-traits-themebtn .lucide-moon { display: none; }
.mm-home .mm-traits-scene.mm-traits-dark .mm-traits-themebtn .lucide-sun { display: block; }

/* ③ 提示：金色脈動（JS 播一次；kill switch 需 !important —— 同 L1226 慣例）。 */
/*〔存查 d619〕*/
@keyframes mm-traits-hint-pulse {
    0%   { box-shadow: 0 0 0 0 hsl(var(--al-gold) / .8); }
    100% { box-shadow: 0 0 0 .875rem hsl(var(--al-gold) / 0); }
}
.mm-home .mm-traits-themebtn.mm-hint-pulse {
    animation: mm-traits-hint-pulse .9s ease-out 3 !important;
}
/* reduce 的靜態提示：金圈常駐，點過（scene 掛 alice-traits-chosen）就收。 */
@media (prefers-reduced-motion: reduce) {
    .mm-home .mm-traits-scene:not(.mm-traits-chosen) .mm-traits-themebtn {
        box-shadow: var(--al-ring-3) hsl(var(--al-gold) / .55); /* ㉘：→ring token；前值：0 0 0 3px hsl(var(--al-gold) / .55) —— 逐位元組相同（--al-gold 就是 --primary，見 L61）
           ⚠ 死碼：`.mm-traits-themebtn` 在 resources/ 與 public/assets/js 全域 grep 零命中
             因此上方 @keyframes mm-traits-hint-pulse 也沒有任何消費者。 */
    }
}

/* ㉕-補：無 JS 時 lucide 不會把 <i data-lucide> 換成 svg，鈕會是空盒。
   給它一個純 CSS 月牙 fallback（有 svg 就讓位）。零硬寫色值（currentColor）。 */
.mm-home .mm-traits-themebtn:not(:has(svg))::before {
    content: '';
    width: .875rem;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: inset .32em -.28em 0 0 currentColor;   /* 內陰影偏移＝月牙 */
    transform: rotate(-12deg);
}

/*〔存查 c237〕*/
/*〔存查 c238〕*/

/*〔存查 c239〕*/
.mm-home .mm-pickscene {
    position: relative;
    max-width: 46rem;
    margin-inline: auto;
    aspect-ratio: 16 / 10;
}
/* 手機：左側直立，殼沿用 ㉑（寬度交給外層，同 ㉔ 手機盒的做法）。 */
.mm-home .mm-pickscene-phone {
    position: absolute;
    left: 2%;
    bottom: 3%;
    width: 23%;
}
.mm-home .mm-pickscene-phone .mm-duo-phone { width: 100%; }
/* 包裹：中央偏右。multiply 讓插畫的白底變成頁面底色（不出現白方框）。 */
.mm-home .mm-pickscene-parcel {
    position: absolute;
    left: 31%;
    bottom: 4%;
    width: 34%;     /* 前值：left 29% / bottom 0 / width 46%（box-cut 裁緊後 46% 變巨大） */
}
/*〔存查 dead-rules-38〕*/
.mm-home .mm-pickscene-box { display: block; width: 100%; height: auto; }
/* 寄件單：貼在箱體右前面（skew 對齊等角面），白卡＋灰資訊列＋黑條碼。 */
.mm-home .mm-pickscene-label {
    position: absolute;
    right: 11%;
    bottom: 20%;
    width: 30%;   /* 前值：right 17% / bottom 22% / width 24% */
    aspect-ratio: 10 / 12;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    transform: skewY(26deg);          /* box.jpg 等角右面的斜率（目測校準） */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8% 9%;
    box-shadow: var(--al-elev-xs); /*〔存查 c240〕*/
}
.mm-home .mm-pickscene-label-lines {
    display: block;
    height: 42%;
    background: repeating-linear-gradient(to bottom,
        hsl(var(--border)) 0, hsl(var(--border)) 8%, transparent 8%, transparent 26%);
}
.mm-home .mm-pickscene-label-barcode {
    display: block;
    height: 38%;
    background: repeating-linear-gradient(90deg,
        hsl(var(--al-ink)) 0 5%, transparent 5% 8%, hsl(var(--al-ink)) 8% 10%, transparent 10% 16%);
}
/* 條碼槍：右上、槍口（圖的左上）轉向寄件單。 */
.mm-home .mm-pickscene-scanner {
    position: absolute;
    right: 3%;
    top: 0;
    width: 17%;
    height: auto;
    transform: rotate(-28deg);   /* 前值：width 19% */
    filter: drop-shadow(0 18px 22px hsl(var(--al-ink) / .28));
}
/* 掃描光束：從槍口到條碼的金色扇形（越靠條碼越寬、越淡）。 */
.mm-home .mm-pickscene-beam {
    position: absolute;
    inset: 0;
    pointer-events: none;
    clip-path: polygon(80% 11%, 84% 16%, 62% 80%, 51% 69%);   /*〔存查 dead-rules-39〕*/
    background: linear-gradient(215deg, hsl(var(--al-gold) / .85), hsl(var(--al-gold) / .12));
}

/*〔存查 c241〕*/
.mm-home .mm-traits-ctl {
    display: flex;
    justify-content: center;
    /* 場景的 padding-bottom（clamp(2rem,5vw,3.5rem)）是手機下探的讓位，
       鈕貼著那個讓位的下緣即可，自己不再加大間距。 */
    margin-top: 0;
    margin-bottom: .5rem;
}
@media (max-width: 767.98px) {
    /* 窄幅時場景 padding-bottom 歸零、手機上收，這裡自己補一點呼吸。 */
    .mm-home .mm-traits-ctl { margin-top: .75rem; }
}
.mm-home .mm-traits-ctl .mm-traits-themebtn {
    margin-left: 0;
    position: relative;
    width: 1.75rem;
    height: 1.75rem;
}
.mm-home .mm-traits-ctl .mm-traits-themebtn svg { width: .875rem; height: .875rem; }
/* 44×44 熱區：inset 負外擴 (44px − 1.75rem)/2 = 8px。空 content 不遮圖示。 */
.mm-home .mm-traits-ctl .mm-traits-themebtn::after {
    content: '';
    position: absolute;
    inset: calc((1.75rem - 44px) / 2);
}

/*〔存查 c242〕*/
/* ① 暗層回到 clip 語彙：opacity 淡入退場（transition 白名單 L1130 的 .15s 是
   !important，這裡同用 !important 且選擇器更 specific，拖曳才能零延遲跟手）。 */
.mm-home .mm-traits-scene .mm-traits-split-dark,
.mm-home .mm-traits-scene .mm-traits-phone-dark {
    opacity: 1;
    transition: none !important;
}
.mm-home .mm-traits-scene .mm-traits-split-dark {
    clip-path: polygon(74.1% 0, 100% 0, 100% 100%, 60.1% 100%);
}
.mm-home .mm-traits-scene .mm-traits-phone-dark {
    clip-path: polygon(98.8% 0, 100% 0, 100% 100%, 46.8% 100%);
}
/* ② 金色分界線重新出場（㉕ 把它 display:none 掉了；㉕ 那條沒刪，這裡後宣告蓋回）。 */
.mm-home .mm-traits-split-line,
.mm-home .mm-traits-phone-line { display: block; }
.mm-home .mm-traits-split-line {
    clip-path: polygon(74.1% 0, calc(74.1% + 3px) 0, calc(60.1% + 3px) 100%, 60.1% 100%);
}
.mm-home .mm-traits-phone-line {
    clip-path: polygon(98.8% 0, calc(98.8% + 2px) 0, calc(46.8% + 2px) 100%, 46.8% 100%);
}
/* ③ 把手：騎在分界線垂直中點；可視 1.75rem、熱區 ::after 撐到 44×44（WCAG 2.5.8）。
   touch-action:none **只在把手**：從把手起拖不會把頁面一起捲走，截圖其他地方照常捲頁。 */
.mm-home .mm-traits-split { cursor: ew-resize; }
.mm-home .mm-traits-slider {
    position: absolute;
    top: 50%;
    left: 67.1%;                       /* v=65 的中點截距（74.1 − 14/2）；JS 接手後改 inline */
    transform: translate(-50%, -50%);
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid hsl(var(--border));
    border-radius: 999px;
    background: hsl(var(--card));
    color: hsl(var(--al-ink));
    box-shadow: 0 1px 4px hsl(var(--al-ink) / .22);
    cursor: ew-resize;
    touch-action: none;
    z-index: 3;                        /* phonebox 是 z-index:2，把手要壓得過 */
}
.mm-home .mm-traits-slider svg { width: .875rem; height: .875rem; }
.mm-home .mm-traits-slider:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.mm-home .mm-traits-slider::after {
    content: '';
    position: absolute;
    inset: calc((1.75rem - 44px) / 2);   /* 8px 外擴，得到 44×44 熱區 */
    border-radius: inherit;
}
/* 無 JS/無 lucide 時 <i data-lucide> 不會變 svg，改用純 CSS 左右箭頭 fallback（有 svg 就讓位）。 */
.mm-home .mm-traits-slider:not(:has(svg))::before {
    content: '\2194';                  /* ↔ */
    font-size: .8rem;
    line-height: 1;
}
/* ④ 靜態提示字：極小、不動（把手本身就是 affordance，這行只是保險）。 */
.mm-home .mm-traits-dragtip {
    text-align: center;
    font-size: .75rem;
    color: hsl(var(--al-ink) / .55);
    margin: 0 0 .5rem;
}
@media (max-width: 767.98px) {
    .mm-home .mm-traits-dragtip { margin-top: .75rem; }
}

/*〔存查 c243〕*/
@media (min-width: 992px) {
    @supports (min-height: min(1px, 100vh)) {
        .mm-home #home > .container > .row {
            min-height: min(calc(100vh - var(--site-header-h, 64px) - 1px - var(--mm-hero-pad-y) * 2), 44rem);
        }
    }
    @supports (min-height: min(1px, 100svh)) {
        .mm-home #home > .container > .row {
            min-height: min(calc(100svh - var(--site-header-h, 64px) - 1px - var(--mm-hero-pad-y) * 2), 44rem);
        }
    }
}

/*〔存查 c244〕*/
.mm-home .mm-traits-scene { padding-bottom: 0; }
.mm-home .mm-traits-mock {
    position: relative;
    /* flex-basis 不可用：<768 時 scene 轉 column，basis 62rem 會變成「高度」992px
       把 mockup 拉成直條（375 量測 351×992），因此改鎖寬度，兩種主軸方向都正確。 */
    flex: 0 1 auto;
    width: min(100%, 62rem);
    min-width: 0;
    aspect-ratio: 3100 / 1630;
    /* 陰影已烘在素材裡，因此這裡零 box-shadow、零 border（去框裁決不破）。 */
}
.mm-home .mm-traits-mock-base {
    display: block;
    width: 100%;
    height: 100%;
}
/* 筆電螢幕（滑桿軌道）：蓋在 base 上層的絕對定位盒。 */
.mm-home .mm-traits-mock .mm-traits-split {
    position: absolute;
    left: 7.5484%;
    top: 3.8037%;
    width: 61.7097%;
    height: 75.7669%;
    overflow: hidden;
    border-radius: .5% / .8%;   /* base 螢幕角有極小圓角，蓋過頭的方角會壓到 bezel */
}
.mm-home .mm-traits-mock .mm-traits-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mm-home .mm-traits-mock-notch {
    position: absolute;
    left: 44.3806%;
    top: 0;
    width: 11.2911%;
    height: auto;
    pointer-events: none;
}
/* 手機螢幕：仿射近似的四邊形（角度無因次，縮放安全）。 */
.mm-home .mm-traits-mock-phone {
    position: absolute;
    left: 79.7677%;
    top: 29.4049%;
    width: 10.9223%;
    height: 46.2571%;
    transform: rotate(-1.32deg) skewX(-9.5169deg);
    transform-origin: 0 0;
    overflow: hidden;
    border-radius: 13.3% / 6%;   /* ≈45 設計px 的螢幕圓角 */
}
.mm-home .mm-traits-mock-phone img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*〔存查 c245〕*/
.mm-home .mm-pickscene2 {
    position: relative;
    padding-bottom: 6%;                    /* 面單壓出截圖下緣的讓位（場景內，不佔別區） */
}
.mm-home .mm-pickscene2-shot { position: relative; }
/* 面單：CSS 示意（白卡＋線稿＋條碼紋），壓截圖右下角、微轉。 */
.mm-home .mm-pickscene2-label {
    position: absolute;
    right: 14%;
    bottom: 0;
    width: 14%;
    aspect-ratio: 10 / 12;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    transform: rotate(-5deg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.2% 2.4%;
    box-shadow: 0 14px 28px -12px hsl(var(--al-ink) / .45); /*〔存查 d664〕*/
    z-index: 2;
}
/* 條碼槍：面單右上方俯角、槍口（圖的左上）對準面單條碼。 */
.mm-home .mm-pickscene2-scanner {
    position: absolute;
    right: 2%;
    bottom: 22%;
    width: 13%;
    height: auto;
    transform: rotate(-42deg);
    filter: drop-shadow(0 16px 20px hsl(var(--al-ink) / .3));
    z-index: 3;
}
/* 光束：槍口 → 面單條碼的金色細扇形（因果線；座標目測校準）。 */
.mm-home .mm-pickscene2-beam {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    /* 量測校準（1440，scene 1296×817）：條碼區 x 74.6~84%、y 88.4~97%，
       槍口約 (86,61)，光束從槍口收窄擴散到條碼上緣。前值：polygon(87% 63%, 89% 65%, 81% 94%, 76% 91%) */
    clip-path: polygon(86% 60.5%, 88.5% 62.5%, 83% 93%, 76% 90%);
    background: linear-gradient(205deg, hsl(var(--al-gold) / .9), hsl(var(--al-gold) / .15));
}

/*〔存查 c247〕*/
.mm-home .site-mockup .site-mockup-bar {
    flex: 0 0 auto;
    height: auto;
    aspect-ratio: 46.36 / 1;
    min-height: 6px;
}
.mm-home .site-mockup .site-mockup-dot {
    width: .93%;
}

/*〔存查 d669〕*/

/* 前身模板 hero p：20px / line-height 36px / margin 0 0 35px */
.mm-hero-lead {
    font-size: 1.125rem; /* ㉑批1：宣告明確化——本條被 L1311 .mm-home #home > .container p(1.125rem) 恆蓋，實渲染本就 18px；前值：20px */
    line-height: 36px;
    margin: 0 0 35px;
    color: hsl(var(--al-ink-soft));   /* 不是 --muted-foreground，理由見 token 區 */
}
@media (max-width: 575.98px) { .mm-hero-lead { font-size: 1.125rem; /* ㉑批1：同 L6815，被 L1311 恆蓋；前值：17px */ line-height: 30px; } }

/* 前身模板 hero 的 CTA 比一般大一階：padding 20px 37px */
.mm-hero-actions { display: flex; flex-wrap: wrap; gap: var(--al-stack); }
/*〔存查 dead-rules-40〕*/

/* 前身模板 `.banner-mockup-img`：桌機絕對定位、突破 container 右緣、右邊由 hero 裁掉。
   這是前身模板首屏最強的一個手法（畫面「裝不下」，感覺系統很大）。 */
@media (min-width: 992px) {
    .mm-home #home .mm-hero-visual {
        position: absolute;
        top: 50%;
        /*〔存查 dead-rules-41〕*/
        transform: translateY(-50%);
    }
}

/* 前身模板 hero 背景層：只容納 Blade 中唯一一張圖；裁切幾何由既有 ::after 保留。 */
.mm-home .mm-hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mm-home .mm-hero-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* hero min-height 上限原文保留。44rem：691px = 43.2rem 之上最近整 rem。
   IACVT：不支援 min() 時整條宣告會在 computed 階段失效，故兩條都必須包 @supports，
     讓舊瀏覽器跳過整塊並由前面的 calc(100vh/100svh) fallback 接手。 */
@media (min-width: 992px) {
    @supports (min-height: min(1px, 100vh)) {
        .mm-home #home > .container > .row {
            min-height: min(calc(100vh - var(--site-header-h, 64px) - 1px - var(--mm-hero-pad-y) * 2), 44rem);
        }
    }
    @supports (min-height: min(1px, 100svh)) {
        .mm-home #home > .container > .row {
            min-height: min(calc(100svh - var(--site-header-h, 64px) - 1px - var(--mm-hero-pad-y) * 2), 44rem);
        }
    }
}

/* 前身模板 screen/mockup：絕對填滿的直向螢幕容器，不是一般流 browser/card 外框。 */
.mm-home .mm-screen-chrome {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: hsl(var(--background));
    overflow: hidden;
}
/* 撿包場景是唯一不在 device-screen 內的 browser window；它仍走同一套 chrome，
   但外層場景需要正常流尺寸。 */
.mm-home .mm-pickscene2-shot.mm-screen-chrome { position: relative; inset: auto; }

.mm-home .mm-screen-chrome .site-mockup-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: auto;
    min-height: 6px;
    padding: 0 1.2%;
    gap: 0;
    background: hsl(var(--background));
    border-bottom: 1px solid hsl(var(--border));
    /* dot/bar = 0.42：3.5% ÷ 1.62272 = 2.1569% 寬，100/2.1569 = 46.36。 */
    aspect-ratio: 46.36 / 1;
}
.mm-home .mm-screen-chrome .site-mockup-dot {
    flex: 0 0 auto;
    width: .93%;
    min-width: 3px;
    height: auto;
    aspect-ratio: 1;
    margin-right: .62%;
    border-radius: 50%;
    background: hsl(var(--muted-foreground) / .34);
}
.mm-home .mm-screen-chrome .site-mockup-dot:nth-of-type(2) { background: hsl(var(--muted-foreground) / .30); }
.mm-home .mm-screen-chrome .site-mockup-dot:nth-of-type(3) { background: hsl(var(--muted-foreground) / .26); }

/* 原註解逐字保留（不刪只作廢）：截圖吃掉標題列以下的全部空間，無下緣漏縫。
   作廢原因：現在 flex:0 0 auto，高度由截圖比例決定，超出的由 overflow:hidden 裁底。 */
.mm-home .mm-screen-chrome .mm-screen-shot {
    position: static;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    object-fit: contain;
}

/* PSD mockup 手機螢幕：最小平方仿射近似；四角渲染殘差 <1.5px。
   刻意不用 matrix3d：平移量是 px，不會隨容器縮放。 */
.mm-home .mm-traits-mock-phone {
    transform: rotate(-1.32deg) skewX(-9.5169deg);
    transform-origin: 0 0;
}

/* 前身模板單張浮起小卡：不是 `.site-flow` 的桌機五欄流程與連接線。 */
.mm-home .mm-flow-mini {
    padding: 1rem;
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) + 4px);
    background: hsl(var(--card));
    /* 兩層疊：近距離分離感＋前身模板的遠距離抬升感。 */
    box-shadow: var(--al-elev-scene), var(--al-lift-shadow); /* ㉘：第一層→token；前值：0 24px 50px -30px hsl(var(--foreground) / .45) —— 逐位元組相同。第二層 --al-lift-shadow 是前身模板的大範圍柔光（0 0 196px），與 elevation 家族正交，原樣保留 */
}
.mm-home .mm-flow-mini-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    font-size: .875rem;
    font-weight: 500;          /* shadcn：標籤是 medium，不是 bold */
    line-height: 1.2;
    color: hsl(var(--foreground));
}
.mm-home .mm-flow-mini-head [data-lucide],
.mm-home .mm-flow-mini-head svg { width: 16px; height: 16px; }
.mm-home .mm-flow-mini .site-chip-list { gap: var(--al-gap-xs); }
@media (max-width: 767.98px) {
    .mm-home .mm-flow-mini { box-shadow: var(--al-card-shadow); }
}

/* 前身模板數字白卡外觀退回；正常流限制優先：
   不恢復 top:-140px、margin-top:-168px、負 margin-bottom 或任何跨區位移。
   浮起感只由卡片內距、邊框與 box-shadow 建立，元件不依賴前後鄰居。 */
.mm-home #milestone-stats { padding-block: clamp(3.5rem, 7vw, 6rem); }
.mm-home .mm-counterbox {
    position: relative;
    z-index: 1;
    top: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: var(--al-card-y) var(--al-card-x);
    box-shadow: var(--al-lift-shadow), var(--al-elev-sm); /* ㉘：第二層→token；前值：0 1px 3px 0 hsl(var(--foreground) / .06) —— 逐位元組相同。第一層 --al-lift-shadow 是前身模板的大範圍柔光（0 0 196px），與 elevation 家族正交，原樣保留 */
}
.mm-home .mm-counter { text-align: center; }
.mm-home .mm-counter .mm-counter-num {
    font-size: var(--al-type-stat, 2.25rem); /* ㉓批2：計數器→stat，clamp 連續值(40.32px)退場；前值：clamp(1.5rem, 2.8vw, 3rem) */
    font-weight: 400;
    line-height: 1.15;
    position: relative;
    display: inline-block;
    margin: 0 0 var(--al-stack);
    padding: 0 0 var(--al-stack);
    color: hsl(var(--al-ink));
    font-variant-numeric: tabular-nums;   /* 滾動時寬度不跳 */
    white-space: nowrap;
}
.mm-home .mm-counter .mm-counter-num::after {
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 70px;
    height: 2px;
    content: '';
    transform: translateX(-50%);
    background: hsl(var(--al-gold));
}
.mm-home .mm-counter .mm-counter-label {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    color: hsl(var(--muted-foreground));
}
@media (max-width: 991.98px) {
    .mm-home .mm-counterbox { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--al-gap-md); }
}
@media (max-width: 575.98px) {
    .mm-home .mm-counterbox { grid-template-columns: 1fr; }
    .mm-home .mm-counter { padding: var(--al-gap-md) var(--al-stack); }
}

/*〔存查 c249〕*/
.mm-home .mm-pickscene2-waybill {
    position: absolute;
    right: 10%;
    /* 前值：bottom: 0; 旋轉 -5deg 後 bbox 下角會突出場景下緣 14px（1440 量測 842.2 vs 828）
       因此抬 1.7%（= 14/828），旋轉後恰好收在場景內。 */
    bottom: 1.7%;
    width: 26%;
    height: auto;
    transform: rotate(-5deg);
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    box-shadow: 0 14px 28px -12px hsl(var(--al-ink) / .45);
    z-index: 2;
}

/*〔存查 d693〕*/
.mm-home .mm-pickscene2-beam {
    /*〔存查 d694〕*/
    z-index: 3;
    /*〔存查 dead-rules-42〕*/
    clip-path: polygon(78.2% 54.2%, 80.5% 55.3%, 74.5% 85.5%, 66.7% 86.6%);
}

/*〔存查 c251〕*/
.mm-home .mm-pickscene2-scanner {
    right: 9.3%;
    bottom: 17.7%;
    width: 11%;
    transform: rotate(-100deg);
}
.mm-home .mm-pickscene2-beam {
    clip-path: none;
    z-index: 3;
    /*〔存查 dead-rules-43〕*/
    background: conic-gradient(from 205deg at 78.8% 74.2%,
        transparent 0deg,
        hsl(var(--al-gold) / .52) 6deg,
        hsl(var(--al-gold) / .62) 18deg,
        hsl(var(--al-gold) / .52) 31deg,
        transparent 37deg);
    -webkit-mask-image: radial-gradient(ellipse 19% 29.7% at 78.8% 74.2%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
    mask-image: radial-gradient(ellipse 19% 29.7% at 78.8% 74.2%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
}/*〔存查 d698〕*/


/*〔存查 c253〕*/
.mm-home #service::before,
.mm-home #service::after { content: none; }

/*〔存查 c254〕*/
.mm-home #service .mm-cut + .mm-cut,
.mm-home #service > .container > section + .mm-cut,
.mm-home #service .mm-split + .mm-cut,
.mm-home #service .mm-cut,
.mm-home #service #machine-section { margin-top: 32px; }

/* ㊴ 手機版按鈕維持 shadcn 原始外觀，僅以透明偽元素補足 44px 觸控熱區。 */
@media (max-width: 991.98px) {
    .mm-home .btn { position: relative; }

    .mm-home .btn::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 44px;
    }
}

/*〔存查 c255〕*/

/*〔存查 d703〕*/
.mm-home #service::after { background-image: none; }

/*〔存查 c257〕*/

/*〔存查 c258〕*/


/*〔存查 c259〕*/
.mm-home .mm-pickscene2-shot {
    width: 50%;                            /* 螢幕縮到一半寬 */
}
.mm-home .mm-pickscene2-waybill {
    right: 19.33%;
    bottom: 8.17%;
    width: 29%;                            /* 面單放大（對截圖的寬度比 0.26 → 0.58） */
}
.mm-home .mm-pickscene2-scanner {
    right: 6.58%;
    bottom: 49.3%;
    width: 12.25%;
    transform: rotate(-110deg);            /* 窗面法線 (-0.61,+0.80)，朝左下 52.7°，正對右聯 QR */
}
.mm-home .mm-pickscene2-beam {
    /*〔存查 d710〕*/
    background: conic-gradient(from 189deg at 81.14% 40.21%,
        transparent 0deg,
        hsl(var(--al-gold) / .50) 7deg,
        hsl(var(--al-gold) / .62) 22deg,
        hsl(var(--al-gold) / .62) 34deg,
        hsl(var(--al-gold) / .50) 51deg,
        transparent 58deg);
    -webkit-mask-image: radial-gradient(ellipse 9.9% 22.7% at 81.14% 40.21%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
    mask-image: radial-gradient(ellipse 9.9% 22.7% at 81.14% 40.21%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
}

/*〔存查 c261〕*/
.mm-home .mm-pickscene2-waybill {
    right: 20.09%;                         /* 左移 9.85px：-65deg 的槍身橫向吃掉 265.65px，右半 648px 不夠 */
    bottom: 18.80%;                        /* 寄件單上移 59.9px */
}
.mm-home .mm-pickscene2-scanner {
    right: 6.13%;
    bottom: 37.52%;
    transform: rotate(-65deg);             /* 掃描槍向右旋轉 45 度；法線 (-0.99,+0.13)，幾乎正左，正對 QR */
}
.mm-home .mm-pickscene2-beam {
    background: conic-gradient(from 187deg at 79.26% 38.05%,
        transparent 0deg,
        hsl(var(--al-gold) / .50) 6deg,
        hsl(var(--al-gold) / .62) 40deg,
        hsl(var(--al-gold) / .62) 110deg,
        hsl(var(--al-gold) / .50) 147deg,
        transparent 153deg);
    -webkit-mask-image: radial-gradient(ellipse 4.94% 11.36% at 79.26% 38.05%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
    mask-image: radial-gradient(ellipse 4.94% 11.36% at 79.26% 38.05%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
}

/*〔存查 c262〕*/
.mm-home .mm-pickscene2-waybill {
    right: 23.48%;                         /* 面單壓在左邊視窗上（往左 43.9px，壓截圖右緣 83px） */
    bottom: 14.72%;
    width: 32%;                            /* 往左壓解開寬度天花板，29% → 32% */
}
.mm-home .mm-pickscene2-scanner {
    right: 6.95%;
    bottom: 38.64%;                        /* rotate 不變（-65deg，見 ㊷），位置跟著面單往左移 */
}
.mm-home .mm-pickscene2-beam {
    background: conic-gradient(from 230deg at 78.44% 36.93%,
        transparent 0deg,
        hsl(var(--al-gold) / .50) 6deg,
        hsl(var(--al-gold) / .62) 20deg,
        hsl(var(--al-gold) / .62) 47deg,
        hsl(var(--al-gold) / .50) 57deg,
        transparent 63deg);
    -webkit-mask-image: radial-gradient(ellipse 8.33% 19.17% at 78.44% 36.93%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
    mask-image: radial-gradient(ellipse 8.33% 19.17% at 78.44% 36.93%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
}

/*〔存查 c263〕*/
.mm-home .mm-pickscene2-shot .site-mockup-bar {
    aspect-ratio: 23.18 / 1;               /* 截圖砍半，參考寬也砍半，這裡除以 2 才回到原尺寸 27.95px */
}
.mm-home .mm-pickscene2-shot .site-mockup-dot {
    width: 1.86%;
    margin-right: 1.24%;
}
.mm-home .mm-pickscene2-waybill {
    bottom: 16.78%;                        /* 場景高 563.39 → 577.37 的換算，絕對位置不變 */
}
.mm-home .mm-pickscene2-scanner {
    bottom: 40.12%;
}
.mm-home .mm-pickscene2-beam {
    background: conic-gradient(from 230deg at 78.44% 36.03%,
        transparent 0deg,
        hsl(var(--al-gold) / .50) 6deg,
        hsl(var(--al-gold) / .62) 20deg,
        hsl(var(--al-gold) / .62) 47deg,
        hsl(var(--al-gold) / .50) 57deg,
        transparent 63deg);
    -webkit-mask-image: radial-gradient(ellipse 8.33% 18.71% at 78.44% 36.03%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
    mask-image: radial-gradient(ellipse 8.33% 18.71% at 78.44% 36.03%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
}

/*〔存查 c264〕*/
.mm-home .mm-pickscene2-waybill {
    bottom: 25.44%;                        /* 面單再上移（−50.00px；框下緣 27.95 vs 面單上緣 119.49） */
}
.mm-home .mm-pickscene2-scanner {
    bottom: 48.78%;                        /* 同步 −50.00px，維持槍口對準 QR */
}
.mm-home .mm-pickscene2-beam {
    background: conic-gradient(from 230deg at 78.44% 27.38%,
        transparent 0deg,
        hsl(var(--al-gold) / .50) 6deg,
        hsl(var(--al-gold) / .62) 20deg,
        hsl(var(--al-gold) / .62) 47deg,
        hsl(var(--al-gold) / .50) 57deg,
        transparent 63deg);
    -webkit-mask-image: radial-gradient(ellipse 8.33% 18.71% at 78.44% 27.38%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
    mask-image: radial-gradient(ellipse 8.33% 18.71% at 78.44% 27.38%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
}

/*〔存查 c265〕*/
.mm-home .mm-pickscene2-scanner {
    right: 7.20%;
    bottom: 42.15%;
    transform: rotate(-52deg);             /* 條碼槍再往右旋轉（-65 → -52，順時針 13°） */
}
.mm-home .mm-pickscene2-beam {
    background: conic-gradient(from 246deg at 78.46% 29.74%,
        transparent 0deg,
        hsl(var(--al-gold) / .50) 6deg,
        hsl(var(--al-gold) / .62) 20deg,
        hsl(var(--al-gold) / .62) 46deg,
        hsl(var(--al-gold) / .50) 57deg,
        transparent 63deg);
    -webkit-mask-image: radial-gradient(ellipse 8.49% 19.05% at 78.46% 29.74%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
    mask-image: radial-gradient(ellipse 8.49% 19.05% at 78.46% 29.74%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
}

/*〔存查 c266〕*/
.mm-home .mm-pickscene2-scanner {
    right: 8.86%;
    bottom: 32.53%;
    transform: rotate(-32deg);             /* 掃描槍再往右轉 20 度（-52 → -32） */
}
.mm-home .mm-pickscene2-beam {
    background: conic-gradient(from 267deg at 78.02% 33.33%,
        transparent 0deg,
        hsl(var(--al-gold) / .50) 6deg,
        hsl(var(--al-gold) / .62) 20deg,
        hsl(var(--al-gold) / .62) 45deg,
        hsl(var(--al-gold) / .50) 55deg,
        transparent 61deg);
    -webkit-mask-image: radial-gradient(ellipse 8.80% 19.74% at 78.02% 33.33%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
    mask-image: radial-gradient(ellipse 8.80% 19.74% at 78.02% 33.33%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
}

/*〔存查 c267〕*/
.mm-home .mm-pickscene2-waybill {
    right: 26.18%;                         /* 往左壓 34.98px，把右下讓出來當投射空間 */
    bottom: 35.74%;                        /* 往上 59.48px；框下緣 27.95 vs 面單上緣 60.01，沒蓋到 */
}
.mm-home .mm-pickscene2-scanner {
    right: 5.77%;
    bottom: 36.70%;                        /* rotate(-32deg) 不變；只把槍往外挪，d 62 → 145px */
}
.mm-home .mm-pickscene2-beam {
    /* 掃描光專用紅（區域 token）：站上紅色家族色相 357.1 往橙側 +7 銜接槍口橘窗，
       亮度 45.3% → 55% 因為「光」要比「顏料」亮，否則會把底下的字壓暗。 */
    --al-scan-beam: 4 100% 55%;
    background: conic-gradient(from 280deg at 81.11% 29.17%,
        transparent 0deg,
        hsl(var(--al-scan-beam) / .52) 5deg,
        hsl(var(--al-scan-beam) / .70) 11deg,
        hsl(var(--al-scan-beam) / .70) 18deg,
        hsl(var(--al-scan-beam) / .52) 27deg,
        transparent 32deg);
    -webkit-mask-image: radial-gradient(ellipse 16.98% 38.10% at 81.11% 29.17%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
    mask-image: radial-gradient(ellipse 16.98% 38.10% at 81.11% 29.17%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
}

/*〔存查 c268〕*/
.mm-home .mm-pickscene2-scanner {
    right: 16.12%;
    bottom: 6.87%;
    transform: rotate(13deg);              /* 槍再往右旋轉 45 度（-32 → +13，跨過 0° 成直立姿態） */
}
.mm-home .mm-pickscene2-beam {
    background: conic-gradient(from 327deg at 76.21% 51.05%,
        transparent 0deg,
        hsl(var(--al-scan-beam) / .52) 5deg,
        hsl(var(--al-scan-beam) / .70) 11deg,
        hsl(var(--al-scan-beam) / .70) 21deg,
        hsl(var(--al-scan-beam) / .52) 27deg,
        transparent 32deg);
    -webkit-mask-image: radial-gradient(ellipse 21.99% 49.36% at 76.21% 51.05%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
    mask-image: radial-gradient(ellipse 21.99% 49.36% at 76.21% 51.05%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
}

/*〔存查 c269〕*/
.mm-home .mm-traits-mock .mm-traits-shot {
    /* 取樣自 theme-light.png 底邊：rgb(250,250,250) */
    --al-traits-pad: 0 0% 98%;
    object-fit: contain;
    object-position: top;
    background-color: hsl(var(--al-traits-pad));
}
.mm-home .mm-traits-mock .mm-traits-shot.mm-traits-split-dark {
    /* 取樣自 theme-dark.png 底邊中點：rgb(10,10,10)（不是左下角的 23,23,23＝側欄） */
    --al-traits-pad: 0 0% 4%;
}

/*〔存查 c270〕*/
.mm-home .mm-pickscene2-shot.mm-screen-chrome {
    /* 取樣自參考圖（不是憑感覺挑的深灰） */
    --al-chrome-tab:  260 5.5% 10.8%;      /* #1B1A1D 分頁列／工具列 */
    --al-chrome-face: 252 4.8% 20.6%;      /* #333237 分頁／網址列 */
    --al-chrome-icon: 240 5% 68%;
    container-type: inline-size;
    background: hsl(var(--al-chrome-tab));
    border-radius: .7rem .7rem .25rem .25rem;
    overflow: hidden;
    box-shadow: var(--al-elev-lg), var(--al-ring-1) hsl(var(--al-ink) / .55);
}
.mm-home .mm-pickscene2-shot .site-mockup-bar {
    aspect-ratio: 19 / 1;
    align-items: flex-end;
    padding: 0 1.5% 0 1.9%;
    gap: 0;
    background: hsl(var(--al-chrome-tab));
    border-bottom: 0;
}
.mm-home .mm-pickscene2-shot .site-mockup-dot {
    width: 1.05%;
    margin-right: .78%;
    margin-bottom: 1.35%;
    background: hsl(var(--al-win-red));
}
.mm-home .mm-pickscene2-shot .site-mockup-dot:nth-of-type(2) { background: hsl(var(--al-win-yellow)); }
.mm-home .mm-pickscene2-shot .site-mockup-dot:nth-of-type(3) { background: hsl(var(--al-win-green)); }
.mm-home .mm-pickscene2-tab {
    display: flex;
    align-items: center;
    gap: 2.4%;
    flex: 0 0 auto;
    width: 27%;
    height: 74%;
    margin-left: 2.6%;
    padding: 0 2.6%;
    border-radius: .38rem .38rem 0 0;
    background: hsl(var(--al-chrome-face));
    color: hsl(var(--al-ink-on) / .78);
    font-size: 1.72cqw;
    line-height: 1;
    overflow: hidden;
}
.mm-home .mm-pickscene2-tab-fav {
    flex: 0 0 auto;
    width: 3.6cqw;
    max-width: 12%;
    aspect-ratio: 1;
    border-radius: .12rem;
    background: hsl(var(--al-gold));
}
.mm-home .mm-pickscene2-tab-txt {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.mm-home .mm-pickscene2-tab svg,
.mm-home .mm-pickscene2-tab-add {
    flex: 0 0 auto;
    height: 42%;
    width: auto;
    aspect-ratio: 1;
    color: hsl(var(--al-chrome-icon));
}
.mm-home .mm-pickscene2-tab-add { height: 30%; margin-left: 1.8%; margin-bottom: 1.6%; }
.mm-home .mm-pickscene2-tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5%;
    aspect-ratio: 21.6 / 1;
    padding: 0 1.9%;
    background: hsl(var(--al-chrome-tab));
    color: hsl(var(--al-chrome-icon));
}
.mm-home .mm-pickscene2-tools > svg,
.mm-home .mm-pickscene2-tools > i {
    flex: 0 0 auto;
    height: 46%;
    width: auto;
    aspect-ratio: 1;
}
.mm-home .mm-pickscene2-url {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 1.4%;
    height: 62%;
    margin: 0 1.2%;
    padding: 0 1.6%;
    border-radius: 999px;
    background: hsl(var(--al-chrome-face));
    color: hsl(var(--al-ink-on) / .62);
    font-size: 1.62cqw;
    line-height: 1;
}
.mm-home .mm-pickscene2-url svg {
    flex: 0 0 auto;
    height: 62%;
    width: auto;
    aspect-ratio: 1;
    color: hsl(var(--al-chrome-icon));
}
.mm-home .mm-pickscene2-url-txt {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*〔存查 c271〕*/
.mm-home .mm-pickscene2-waybill {
    bottom: 24.04%;                        /* 面單下移（bbox 上緣 60.02 → 155.00） */
}
.mm-home .mm-pickscene2-scanner {
    right: 7.97%;
    bottom: 51.63%;
    transform: rotate(0deg);               /* 新素材翻轉後即為正確姿態，不再靠 rotate 硬轉 */
}
.mm-home .mm-pickscene2-beam {
    background: conic-gradient(from 224deg at 80.70% 21.05%,
        transparent 0deg,
        hsl(var(--al-scan-beam) / .52) 5deg,
        hsl(var(--al-scan-beam) / .70) 12deg,
        hsl(var(--al-scan-beam) / .70) 22deg,
        hsl(var(--al-scan-beam) / .52) 27deg,
        transparent 32deg);
    -webkit-mask-image: radial-gradient(ellipse 16.82% 35.53% at 80.70% 21.05%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
    mask-image: radial-gradient(ellipse 16.82% 35.53% at 80.70% 21.05%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground) / .95) 50%, hsl(var(--foreground) / .6) 80%, transparent 100%);
}

/*〔存查 c272〕*/
.mm-home .mm-pickscene2-shot.mm-screen-chrome {
    display: block;                        /* ㊿ 的 flex column 不再需要（分頁列／工具列已退場） */
    background: none;                      /* 框身由素材提供 */
    border-radius: 0;                      /* 圓角在素材裡 */
    overflow: visible;                     /* 關鍵：hidden 會把素材的外投影剪掉 */
    box-shadow: none;                      /* 關鍵：素材自帶投影，再加一層會變兩圈 */
}
.mm-home .mm-pickscene2-frame {
    display: block;
    width: 100%;
    height: auto;                          /* 由素材長寬比決定盒高，場景高度跟著它 */
}
.mm-home .mm-pickscene2-shot .mm-screen-shot {
    position: absolute;
    left: 0.0232%;
    top: 7.4352%;
    width: 95.2646%;
    height: 86.0807%;                      /* 明寫 height：留 auto 會被 <img> 內在比例覆蓋 */
    object-fit: cover;
    object-position: top;
    border-radius: 0 0 .673cqw .673cqw;    /* = 素材圓角 14.5px ÷ 2154，隨容器等比 */
}
.mm-home .mm-pickscene2-tabtxt {
    position: absolute;
    left: 6.9638%;
    top: 0.0288%;
    width: 16.9452%;
    height: 2.7954%;
    display: flex;
    align-items: center;
    gap: .55cqw;
    font-size: 1.389cqw;                   /* ＝ 9 CSS px @648（素材分頁列只有 14.6px 高） */
    line-height: 1;
    color: hsl(var(--al-ink-on) / .82);
    overflow: hidden;
}
.mm-home .mm-pickscene2-tab-fav {
    flex: 0 0 auto;
    width: 1.25cqw;
    aspect-ratio: 1;
    border-radius: .18cqw;
    background: hsl(var(--al-gold));
}
.mm-home .mm-pickscene2-tab-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.mm-home .mm-pickscene2-urltxt {
    position: absolute;
    left: 9.2851%;
    top: 4.0346%;
    width: 76.6017%;
    height: 1.9020%;
    display: flex;
    align-items: center;
    font-size: 1.235cqw;                   /* ＝ 8 CSS px @648（素材網址 pill 只有 9.9px 高） */
    line-height: 1;
    color: hsl(var(--al-ink-on) / .68);
    white-space: nowrap;
    overflow: hidden;
}

/*〔存查 c273〕*/
.mm-home .mm-pickscene2-waybill {
    right: 17.6932%;                       /* bbox 左緣 640＝場景正中，離視窗右緣 617.4 有 22.6px */
    bottom: 41.5971%;                      /* bbox 上緣 39.79，寄件單置於上方 */
}
.mm-home .mm-pickscene2-scanner {
    right: 3.1144%;
    bottom: -2.9470%;                      /* 負值是對的，見上方註解「bottom 是負的且這是對的」 */
    transform: rotate(90deg);              /* 法線 240.06°(左下) → 330.06°(左上)：槍改成朝左上打 */
}
.mm-home .mm-pickscene2-beam {
    background: conic-gradient(from 323.5deg at 95.0717% 73.0622%,
        transparent 0deg,
        hsl(var(--al-scan-beam) / .52) 2deg,
        hsl(var(--al-scan-beam) / .70) 2.8deg,
        hsl(var(--al-scan-beam) / .70) 10.2deg,
        hsl(var(--al-scan-beam) / .52) 11deg,
        transparent 13deg);
    -webkit-mask-image: radial-gradient(ellipse 37.0370% 80.0414% at 95.0717% 73.0622%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground)) 55%, hsl(var(--foreground) / .85) 82%, hsl(var(--foreground) / .5) 93%, transparent 100%);
    mask-image: radial-gradient(ellipse 37.0370% 80.0414% at 95.0717% 73.0622%,
        hsl(var(--foreground)) 0%, hsl(var(--foreground)) 55%, hsl(var(--foreground) / .85) 82%, hsl(var(--foreground) / .5) 93%, transparent 100%);
}

/*〔存查 c274〕*/
.mm-home .mm-traits-mock-phone img {
    /* 取樣自 mobile-theme-light.png 最底列眾數：rgb(255,255,255)（不是頁底的 250） */
    --al-traits-phone-pad: 0 0% 100%;
    object-fit: contain;
    object-position: top;
    background-color: hsl(var(--al-traits-phone-pad));
}
.mm-home .mm-traits-mock-phone img.mm-traits-phone-dark {
    /* 取樣自 mobile-theme-dark.png 最底列眾數：rgb(23,23,23)（不是頁底的 10） */
    --al-traits-phone-pad: 0 0% 9%;
}


/*〔存查 c275〕*/

/*〔存查 d766〕*/

/*〔存查 d767〕*/
.mm-home #pricing .mm-planpillar > .card-body {
    padding: var(--al-pad-card-y-lg) var(--al-pad-card-x);
    gap: var(--al-gap-stack);
}

/*〔存查 d768〕*/
.mm-home #pricing .mm-planpillar > .card-body > .site-icon-tile {
    margin-inline: auto;
}

/*〔存查 d769〕方案卡標題的字級覆蓋已移除，回落至共用檔的 .site-pillar-title 基底，
   使各頁支柱卡標題一致。原文見存查目錄。*/

/*〔存查 d770〕*/
.mm-home #pricing .mm-plancta {
    margin-top: var(--al-gap-group);
}

/*〔存查 c280〕*/

/*〔存查 c281〕*/

/* ② 截圖視窗：素材內容區 ＋ overflow:hidden（下方截斷的實作處） */
.mm-home .mm-pickscene2-viewport {
    position: absolute;
    left: 0.0466%;
    top: 9.5556%;
    width: 95.5307%;
    height: 82.4444%;
    overflow: hidden;                      /* 關鍵：截圖超出的高度在這裡被切掉 */
    border-radius: 0 0 .675cqw .675cqw;    /* ＝ 素材圓角 14.5px ÷ 2148，隨容器等比 */
}
.mm-home .mm-pickscene2-shot .mm-screen-shot {
    position: static;                      /* ⓺⓷ 的 absolute 退場：定位改由 -viewport 負責 */
    left: auto;
    top: auto;
    display: block;
    width: 100%;                           /* 寬度 100% 放入 */
    height: auto;                          /* 明寫 auto：要讓內在比例把圖撐高、由父層截斷 */
    object-fit: fill;                      /* 盒子已等於內在比例，中和掉繼承來的 cover */
    object-position: top left;
    border-radius: 0;                      /* 圓角改掛在 -viewport 上 */
}

/* ③ 面單 ＋ 條碼槍 */
.mm-home .mm-pickscene2-waybill {
    width: 25%;                            /* 32% → 25%：場景高從 599.69 掉到 485.02（見上方拍板項） */
    right: 19.4941%;                       /* bbox 左緣 710（離視窗右緣 617.4 有 92.6px） */
    bottom: 47.1088%;                      /* bbox 上緣 14，寄件單置於上方 */
}
.mm-home .mm-pickscene2-scanner {
    width: 16.8997%;                       /* 219.02px @1440 */
    right: 0;                              /* 圖右緣＝場景右緣（袖子走出畫面，不是被剪斷） */
    bottom: 0;                             /* 不再用負值（⓺⓸ 是 -2.9470%，那正是被切掉一角的原因） */
    transform: rotate(0deg);               /* 33° 已烤進素材，裁切邊維持水平/垂直 */
    filter: none;                          /* 扁平向量素材不掛模糊投影（前值見上方註解） */
}

/* ④ 光束 */
.mm-home .mm-pickscene2-beam {
    background: conic-gradient(from 327.300deg at 86.2769% 51.4666%,
        transparent 0deg,
        hsl(var(--al-scan-beam) / .50) 0.5deg,
        hsl(var(--al-scan-beam) / .74) 1.3deg,
        hsl(var(--al-scan-beam) / .74) 9.9deg,
        hsl(var(--al-scan-beam) / .50) 10.7deg,
        transparent 11.5deg);
    -webkit-mask-image: radial-gradient(ellipse 19.4444% 51.9563% at 86.2769% 51.4666%,
        hsl(var(--foreground) / .16) 0%, hsl(var(--foreground) / .20) 58%, hsl(var(--foreground) / .45) 74%,
        hsl(var(--foreground)) 82%, hsl(var(--foreground)) 94%, transparent 100%);
    mask-image: radial-gradient(ellipse 19.4444% 51.9563% at 86.2769% 51.4666%,
        hsl(var(--foreground) / .16) 0%, hsl(var(--foreground) / .20) 58%, hsl(var(--foreground) / .45) 74%,
        hsl(var(--foreground)) 82%, hsl(var(--foreground)) 94%, transparent 100%);
}


/*〔存查 c282〕*/

/* ── A. 把各 section 的上下內距收斂到既有 SSOT token `--al-section-pad`（48/64/80 響應式）
      這顆 token 已被 12 條既有規則消費，本段只是讓**落單的幾段**也吃到它，
        沒有動 `--al-sec-y` / `--al-section-pad` 本身（全站節奏 SSOT）。 ── */

/*〔存查 d793〕*/
.mm-home #showcase { padding-block: var(--al-section-pad); }
.mm-home #pricing  { padding-block: var(--al-section-pad); }

/*〔存查 d794〕*/
.mm-home #milestone-stats { padding-block: var(--al-section-pad); }

/*〔存查 d795〕*/
.mm-home section#features-glance.mm-glance { padding-block: var(--al-section-pad); }

/*〔存查 d796〕*/
/*〔存查 c284〕*/
.mm-home #service #machine-section { margin-top: 0; }

/*〔存查 d798〕*/
.mm-home #about { margin-top: 0; }

/*〔存查 c285〕*/

.mm-home {
    /*〔存查 d800〕*/
    --al-scrim-photo: 0 0% 32%;
}

/*〔存查 d801〕*/
.mm-home .mm-boxbg::after {
    background-image:
        radial-gradient(ellipse 46% 62% at 50% 46%,
            hsl(var(--al-scrim-photo) / .68) 0%,
            hsl(var(--al-scrim-photo) / .38) 52%,
            transparent 76%),
        linear-gradient(
            hsl(var(--al-scrim-photo) / .58) 0%,
            hsl(var(--al-scrim-photo) / .58) 100%);
}

/*〔存查 d802〕*/

/*〔存查 c289〕*/

/* ① 灰遮罩退場 → 換成淺色局部底襯。手機優先：預設是最寬的那組。
   這裡的 --al-ink-on 不可以換成 --background（理由見 六）。 */
.mm-home .mm-boxbg::after {
    background-image:
        radial-gradient(ellipse 98% 48% at 50% 40%,
            hsl(var(--al-ink-on) / .74) 0%,
            hsl(var(--al-ink-on) / .56) 55%,
            hsl(var(--al-ink-on) / 0) 100%);
}
@media (min-width: 768px) {
    .mm-home .mm-boxbg::after {
        background-image:
            radial-gradient(ellipse 46% 38% at 50% 39%,
                hsl(var(--al-ink-on) / .68) 0%,
                hsl(var(--al-ink-on) / .48) 55%,
                hsl(var(--al-ink-on) / 0) 100%);
    }
}
@media (min-width: 1200px) {
    .mm-home .mm-boxbg::after {
        background-image:
            radial-gradient(ellipse 34% 34% at 50% 39%,
                hsl(var(--al-ink-on) / .62) 0%,
                hsl(var(--al-ink-on) / .42) 55%,
                hsl(var(--al-ink-on) / 0) 100%);
    }
}

/* ② 照片還原成 L2779 原設計的 saturate(.92)（理由見 ▍四）。
   要退回舊的去飽和：把這一條刪掉即可，L2997 原文還在。 */
.mm-home .mm-boxbg::before { filter: none; }

/*〔存查 d806〕*/
.mm-home #action-box h2 { color: hsl(var(--al-ink)); }
.mm-home #action-box p  { color: hsl(var(--al-ink-2)); }

/*〔存查 d807〕*/
.mm-home #action-box h2,
.mm-home #action-box p {
    text-shadow: 0 1px 2px hsl(var(--al-ink-on) / .78), 0 0 8px hsl(var(--al-ink-on) / .55);
}

/*〔存查 c292〕*/

/*〔存查 d809〕*/

/*〔存查 c294〕*/

.mm-home {
    /* 換底圖 → 重跑濃度掃描 → 只改下面這顆 `-a`。不要改 `--al-scrim-photo`（深色遮罩用的）。 */
    --al-scrim-photo-light:   0 0% 100%;
    --al-scrim-photo-light-a: .54;
}

/* 半透明白紗，整幅平鋪。這一條同時讓先前的橢圓局部底襯（含兩個 media query）退場。 */
.mm-home .mm-boxbg::after {
    background-image: linear-gradient(
        hsl(var(--al-scrim-photo-light) / var(--al-scrim-photo-light-a)) 0%,
        hsl(var(--al-scrim-photo-light) / var(--al-scrim-photo-light-a)) 100%);
}

/*〔存查 c295〕*/

/* ① 換底圖。background-position 的 70% 是對著這張圖定的（理由見 三）；
   換圖必須重新決定，不要沿用。舊圖 L2973–2980 原文一行未刪，要換回去直接註解掉本條。 */
.mm-home .mm-boxbg::before {
    background-image: image-set(
        url("../pic/warehouse-conveyor-1600.webp") 1x,
        url("../pic/warehouse-conveyor-2560.webp") 2x
    );
    background-size: cover;
    background-position: 50% 70%;
}

/* ② 濃度：分寬度取各自的最低可行值（理由見 ▍四）。換圖只要改這兩個數字。 */
.mm-home {
    --al-scrim-photo-light-a: .50;   /* <768：水平裁切、整張圖高度都露出來，需要濃一點 */
}
@media (min-width: 768px) {
    .mm-home { --al-scrim-photo-light-a: .40; }   /* ≥768：垂直裁切、只取 Y=70 那條較亮的帶 */
}

/*〔存查 c296〕*/

/* ① 角色層 token。換底圖 → 重跑掃描 → 只改 `-dark-a` 這一顆。 */
.mm-home {
    --al-scrim-photo-dark:   0 0% 0%;
    --al-scrim-photo-dark-a: .65;
}

/* ② 黑紗，整幅平鋪。同特異性、位置在後，因此蓋掉上面的白紗那條（原文未刪）。 */
.mm-home .mm-boxbg::after {
    background-image: linear-gradient(
        hsl(var(--al-scrim-photo-dark) / var(--al-scrim-photo-dark-a)) 0%,
        hsl(var(--al-scrim-photo-dark) / var(--al-scrim-photo-dark-a)) 100%);
}

/* ③ 文字改回淺色。`--al-ink-on` = `0 0% 98%`，`量測` 亮暗兩態同值（不可用 --background）。
   p 沿用 L3016 的既有做法「白的 88%」，只把 token 換成不翻色的那顆。 */
.mm-home #action-box h2 { color: hsl(var(--al-ink-on)); }
.mm-home #action-box p  { color: hsl(var(--al-ink-on) / .88); }

/* ④ 去飽和設回 L2997 的原設計（理由見 ▍四）。 */
.mm-home .mm-boxbg::before { filter: saturate(.45) contrast(1.04); }

/* ⑤ 文字陰影改回「暗陰影」＝ L3005 原值（理由見 ▍六）。
   WCAG 不認陰影，上面的對比數字沒把它算進去，它是純賺的餘裕。 */
.mm-home #action-box h2,
.mm-home #action-box p {
    text-shadow: 0 1px 3px hsl(var(--al-ink) / .55), 0 0 18px hsl(var(--al-ink) / .35);
}

/*〔存查 c297〕*/

/* ── ① 紅框②：白卡下緣 → 深色 footer 上緣，109 → 44 ── */
/*〔存查 d826〕*/

/*〔存查 c298〕*/
/* `.site-footer-col:has(> .site-footer-media--bottom)` 與 `.site-footer-media--bottom`
   這兩條規則的唯一來源在 site-front.css 檔尾 ㊶ 段 ②，改值請改那裡。 */

/*〔存查 c299〕*/

/* 2026-08-26：機型卡片按鈕邊距補正
   業主回報：「按鈕跟上方文字要有距離啊」「瞭解更多怎麼會貼在上面文字」
   
   現狀（實測 1440 寬）：
   - CTA #1 視覺間距：0px（ulBottomY=2774.578, ctaTop=2774.578）
   - CTA #2 視覺間距：0px（ulBottomY=3368.328, ctaTop=3368.328）
   - 上方 <ul> margin-bottom：0
   
   修正：margin-top: 1.75rem = 28px
   根據：與同頁 `.site-mch-hero-actions` 相同既有值（SSOT）
   特異度：.mm-home #machine-section .mm-mach-cta（與 blade 內嵌規則同級）
*/
.mm-home #machine-section .mm-mach-cta {
    margin-top: 1.75rem;
}