/*〔存查 f0000〕*/


/* ==========================================================================================
   外殼
   header / 主內容區 / footer 三段式外殼。原本住在 layout 的第 1 個 inline style 區塊。
   ========================================================================================== */

:root { --site-header-h: 64px; }

/* 錨點捲動時不要被 sticky header 蓋住標題。
   刻意限定在 .site-main 內：scroll-margin-top 只影響「捲到這個元素」的落點，
     但無差別套在全站 [id] 上會連 modal / dropdown 這種靠 JS 捲動的元件一起吃到。 */
.site-main [id] { scroll-margin-top: calc(var(--site-header-h) + 8px); }

/* ---------- 官網 header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: hsl(var(--card));
    border-bottom: 1px solid hsl(var(--border));
}

.site-header .navbar {
    --bs-navbar-color: hsl(var(--muted-foreground));
    --bs-navbar-hover-color: hsl(var(--foreground));
    --bs-navbar-active-color: hsl(var(--foreground));
    --bs-navbar-toggler-border-color: hsl(var(--border));
    --bs-navbar-toggler-focus-width: 0;
    min-height: var(--site-header-h);
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.site-brand-logo { height: 32px; width: auto; display: block; }

/*〔存查 f0001〕*/
.site-brand-tagline {
    font-size: .75rem;
    line-height: 1;
    color: hsl(var(--muted-foreground));
    letter-spacing: .08em;
    margin-right: -.08em;
    margin-left: .75rem;
    padding-left: .75rem;
    border-left: 1px solid hsl(var(--border));
    white-space: nowrap;
}

.site-nav-link {
    font-size: .875rem;          /* text-sm，與 shadcn 的導覽字級一致 */
    font-weight: 500;
    border-radius: var(--radius-md);
    padding: .375rem .625rem;
    transition: background-color .15s ease, color .15s ease;
}

.site-nav-link:hover,
.site-nav-link:focus-visible {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.site-nav-link.active { color: hsl(var(--foreground)); }

/* 漢堡鈕的 icon 是 Bootstrap 的內嵌 SVG（顏色吃 --bs-navbar-color，已在上面接到 token） */
.site-header .navbar-toggler { padding: .25rem .5rem; }

.site-header .navbar-toggler:focus { box-shadow: var(--al-ring-3) hsl(var(--ring) / .5); } /*〔存查 f0002〕*/

@media (max-width: 991.98px) {
    /* 手機展開時給一點呼吸與分隔，避免選單直接黏在 header 底線上 */
    .site-header .navbar-collapse {
        padding-top: .5rem;
        padding-bottom: .5rem;
        border-top: 1px solid hsl(var(--border));
        margin-top: .5rem;
    }
    .site-header .navbar-nav .btn { width: 100%; }

    /*〔存查 f0003〕*/
    .site-header .site-nav-link,
    .site-header .dropdown-item {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .site-header .navbar-toggler { min-height: 44px; }
}

/* ---------- 主內容區 ---------- */
.site-main { background: hsl(var(--background)); }

/* ---------- 官網 footer ---------- */
/*〔存查 f0004〕*/
/*〔存查 f0005〕*/
.site-footer { text-align: center; }

/*〔存查 f0006〕*/
/*〔存查 f0007〕*/
.site-footer-contact-band { background: hsl(var(--border)); }

/*〔存查 f0008〕*/
.site-footer-brand-band { padding: 2rem 0 1.75rem; }

.site-footer-logo { height: 44px; width: auto; }

.site-footer .h5 { letter-spacing: .04em; }

.site-footer-links { margin-top: .75rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

.site-footer-links a { text-decoration: none; }

/* 這裡的 !important 是必要的不是偷懶：§S-11 的 `.bg-gray-800 .text-silver` 帶 !important，
   不同等強度就蓋不過去，連結會變成 hover 沒有任何回饋（＝看起來不能點）。 */
.site-footer-links a:hover,
.site-footer-links a:focus-visible { color: hsl(var(--dark-panel-foreground)) !important; }

.site-footer p { margin-top: 1.25rem; margin-bottom: 0; font-size: var(--al-type-caption); /*〔存查 f0009〕*/ }

/*〔存查 f0010〕*/
.site-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    text-align: left;
}

.site-footer-bottom-id { display: flex; align-items: center; gap: .75rem; }

/* 縮小：logo 44px → 32px，標語從 .h5 降成 .8125rem */
.site-footer-bottom .site-footer-logo { height: 32px; }

.site-footer-slogan {
    font-size: var(--al-type-caption); /*〔存查 f0011〕*/
    letter-spacing: .04em;
    /* letter-spacing 會在最後一個字元右邊也加一份（CSS 規範不是 bug），
       等量負 margin 補回去，否則右邊看起來比左邊多一截。 */
    margin-right: -.04em;
}

/* 連結列在這個情境下不需要上邊距（它與品牌同一列），字級也跟著縮 */
.site-footer-bottom .site-footer-links { margin-top: 0; font-size: var(--al-type-caption); /*〔存查 f0012〕*/ gap: 1.25rem; justify-content: flex-end; }

/*〔存查 f0013〕*/
.site-footer-tail { display: flex; flex-direction: column; align-items: flex-end; gap: .375rem; }

.site-footer-bottom .site-footer-copy { margin-top: 0; text-align: right; }

/* 窄螢幕回到置中堆疊：手機硬要左右分置會兩邊都太擠 */
@media (max-width: 991.98px) {
    .site-footer-bottom { justify-content: center; text-align: center; }
    .site-footer-bottom-id { flex-direction: column; gap: .5rem; }
    .site-footer-tail { align-items: center; }
    .site-footer-bottom .site-footer-links { justify-content: center; }
    .site-footer-bottom .site-footer-copy { text-align: center; }

    /*〔存查 f0014〕*/
    .site-footer-bottom .site-footer-links { gap: 1rem; }

    .site-footer-bottom .site-footer-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}


/* ==========================================================================================
   共用 UI 語彙
   圖示磚 / 支柱卡 / chip / 照片框。原 includes/_site_ui.blade.php。
   ========================================================================================== */

/* =========================================================================
   官網共用 UI 層 —— 全部是「新增的」class，既有 site-* 的值一個都沒動
   鐵律：零 hex / 零 rgb 字面值，顏色一律 hsl(var(--token))。
   ========================================================================= */

/*〔存查 f0015〕*/
:root { --site-photo-surface: 0 0% 100%; }

/* ---------- 圖示磚變體（既有 .site-icon-tile / -brand 的值一個都不動）---------- */
/* 灰底區塊（.bg-light → --muted）上用：磚與底同色的隱形問題就是靠這顆解掉的 */
.site-icon-tile-onmuted { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }

/* 深底區塊（.bg-gray-800）上用：與 .site-dark-panel 同一套半透明語彙，文字色直接繼承 */
.site-icon-tile-ondark  { background: hsl(var(--dark-panel-foreground) / .10); color: inherit; }
/*〔存查 f0016〕*/

/* ---------- 兩張小卡疊成一欄 ----------
   flex + flex:1 1 0，因此兩張小卡等高，且整欄總高自動等於旁邊那張大卡，
   不必量任何像素、也不受標題折行影響。 */
.site-stack { display: flex; flex-direction: column; gap: 1rem; height: 100%; }

@media (min-width: 992px) { .site-stack { gap: 1.5rem; } }

.site-pillar--stack { flex: 1 1 0; }

.site-pillar--lead .site-pillar-desc  { max-width: 34rem; }

.site-pillar--figured .site-pillar-link { margin-top: auto; }

.site-spec-cell { background: hsl(var(--card)); padding: 1.5rem 1.375rem; display: flex; gap: .875rem; }

/* ---------- 照片框 ---------- */
.site-photo {
    position: relative;
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    background: hsl(var(--site-photo-surface));
}

.site-photo--4x3 { aspect-ratio: 4 / 3; }

/*〔存查 f0017〕*/
.site-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    /*〔存查 f0018〕*/
    padding: var(--al-pad-chip-y) var(--al-pad-chip-x);
    border: 1px solid hsl(var(--border));
    border-radius: 9999px;
    background: hsl(var(--card));
    font-size: .875rem;
    font-weight: 500;
}
/*〔存查 f0019〕*/

.site-chip [data-lucide], .site-chip svg { width: 16px; height: 16px; color: hsl(var(--muted-foreground)); }

.site-chip-list { display: flex; flex-wrap: wrap; gap: .5rem; }

/* 縮一階（給卡片內的小示意圖用，不改 .site-chip 本體） */
.site-chip--xs { font-size: var(--al-type-micro); /*〔存查 f0020〕*/ padding: var(--al-pad-chip-y-xs) var(--al-pad-chip-x-xs); } /*〔存查 f0021〕*/

/* =========================================================================
   微互動 —— shadcn 的語彙是「克制的邊框 + 幾乎看不見的陰影」，不是彈跳與發光
   ========================================================================= */
.site-pillar { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }

.site-pillar:hover,
.site-pillar:focus-within {
    border-color: hsl(var(--foreground) / .22);
    box-shadow: var(--al-elev-md); /*〔存查 f0022〕*/
    transform: translateY(-2px);
}

/* 鍵盤使用者：整張卡是可點的（stretched-link），焦點框要畫在卡上不是只有那行小字 */
.site-pillar:focus-within { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

.site-pillar-link [data-lucide], .site-pillar-link svg { transition: transform .15s ease; }

.site-pillar:hover .site-pillar-link [data-lucide] { transform: translateX(2px); }

.site-spec-cell { transition: background-color .15s ease; }

.site-spec-cell:hover { background: hsl(var(--accent)); }

@media (prefers-reduced-motion: reduce) {
    .site-pillar, .site-pillar-link [data-lucide], .site-spec-cell { transition: none; }
    .site-pillar:hover, .site-pillar:focus-within { transform: none; }
    .site-pillar:hover .site-pillar-link [data-lucide] { transform: none; }
    /* 顏色與陰影的變化要留著 —— 那是「這裡可以點」的回饋，不是裝飾動畫。
       reduced-motion 要拿掉的是位移與過場，不是可用性訊號。 */
}


/* ==========================================================================================
   功能頁導言區
   原 includes/_feature_intro.blade.php。
   ========================================================================================== */

.site-fintro-card {
    display: grid;
    gap: 1.5rem;
    align-items: center;
    /*〔存查 f0023〕*/
    padding: var(--al-pad-card-y) var(--al-pad-card-x);
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    background: hsl(var(--muted) / .35);
}

@media (min-width: 992px) {
    /*〔存查 f0024〕*/
    .site-fintro-card { grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 2.5rem; padding: var(--al-pad-card-y-lg) var(--al-pad-card-x-lg); }
}

.site-fintro-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
    margin-bottom: .625rem;
}

.site-fintro-eyebrow [data-lucide], .site-fintro-eyebrow svg { width: 14px; height: 14px; }

.site-fintro-title {
    font-size: var(--al-type-title); /*〔存查 f0025〕*/
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.35;
    margin: 0 0 .625rem;
}

.site-fintro-lead {
    font-size: 1rem;
    line-height: 1.85;
    color: hsl(var(--muted-foreground));
    margin: 0;
}

.site-fintro-plan {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    background: hsl(var(--card));
    padding: 1.25rem 1.375rem;
}

.site-fintro-plan-recommended { border-color: hsl(var(--primary)); box-shadow: var(--al-ring-1) hsl(var(--primary)); } /*〔存查 f0026〕*/

.site-fintro-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .625rem;
}

.site-fintro-plan-name {
    font-size: .875rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}

.site-fintro-plan-label {
    display: block;
    font-size: var(--al-type-micro); /*〔存查 f0027〕*/
    font-weight: 600;
    letter-spacing: .08em;
    color: hsl(var(--muted-foreground));
    margin-bottom: .125rem;
}

.site-fintro-price { display: flex; align-items: baseline; gap: .375rem; flex-wrap: wrap; }

.site-fintro-price-lead { font-size: .875rem; color: hsl(var(--muted-foreground)); }

.site-fintro-price-num { font-size: 2.125rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }

.site-fintro-price-unit { font-size: .875rem; color: hsl(var(--muted-foreground)); }

.site-fintro-soon { font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }

.site-fintro-note {
    font-size: .8125rem;
    line-height: 1.7;
    color: hsl(var(--muted-foreground));
    margin: .5rem 0 0;
}

.site-fintro-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .875rem;
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
    color: hsl(var(--foreground));
}

.site-fintro-link:hover { text-decoration: underline; color: hsl(var(--foreground)); }

.site-fintro-link [data-lucide], .site-fintro-link svg { width: 14px; height: 14px; }


/* ==========================================================================================
   首屏示意圖
   原 includes/_hero_mockup.blade.php。
   ========================================================================================== */

/*〔存查 f0028〕*/
.site-mockup {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    background: hsl(var(--card));
    box-shadow: var(--al-elev-scene); /*〔存查 f0029〕*/
    overflow: hidden;
}
/* 這條規則原本在多支檔各有一份副本，其餘副本另外帶了下列說明，一併保留：
     〔原 includes/mockups/_m_workspace.blade.php〕---------- 假的應用視窗外框（逐字取自 _hero_mockup.blade.php，值未改）---------- 為什麼不直接用 .card：.card 帶了 --bs-card-* 一整組變數與 card-header / card-body 的內距規則，而這裡要的是「一個視窗外框」——標題列要更矮、 工具列要更緊、表格要貼齊左右邊。用 .card 反而要一路蓋回去。 零 hex / 零 rgb 字面值，一律 hsl(var(--token))。
   */

.site-mockup-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem .875rem;
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--muted) / .6);
}

.site-mockup-dot { width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--border)); flex-shrink: 0; }

.site-mockup-title { font-size: .8125rem; font-weight: 600; margin-left: .25rem; }

.site-mockup-url {
    margin-left: auto;
    font-size: .6875rem;
    color: hsl(var(--muted-foreground));
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    border-radius: 9999px;
    padding: .125rem .625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 46%;
}

.site-mockup-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .75rem .875rem;
    border-bottom: 1px solid hsl(var(--border));
}

/* 假的搜尋框：不是 <input>，避免使用者以為可以打字（也不會被表單自動填入） */
.site-mockup-field {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    color: hsl(var(--muted-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-md);
    padding: .3125rem .625rem;
    background: hsl(var(--background));
    min-width: 0;
}
/* 這條規則原本在多支檔各有一份副本，其餘副本另外帶了下列說明，一併保留：
     〔原 features/picking.blade.php〕假的搜尋框：刻意不是 <input>，避免使用者以為可以打字，也不會被表單自動填入
   */

/*〔存查 f0030〕*/
.site-mockup-field--grow { flex: 1 0 auto; min-width: 0; white-space: nowrap; }

.site-mockup-field [data-lucide], .site-mockup-field svg { width: 14px; height: 14px; flex-shrink: 0; }

.site-mockup-btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    padding: .3125rem .75rem;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    white-space: nowrap;
}

.site-mockup-btn--primary {
    background: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.site-mockup-btn [data-lucide], .site-mockup-btn svg { width: 14px; height: 14px; }

/* 表格：字級縮一階，讓整個「畫面」看起來是被縮小的真實 UI */
.site-mockup .table { font-size: .75rem; margin-bottom: 0; }

.site-mockup .table th, .site-mockup .table td { padding: .5rem .75rem; }

.site-mockup .badge { font-size: .625rem; }

.site-mockup-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .625rem .875rem;
    border-top: 1px solid hsl(var(--border));
    font-size: .6875rem;
    color: hsl(var(--muted-foreground));
}

.site-mockup-foot .pagination { --bs-pagination-font-size: .6875rem; margin-bottom: 0; }

.site-mockup-note {
    margin: .625rem 0 0;
    font-size: .6875rem;
    color: hsl(var(--muted-foreground));
    text-align: center;
}


/* ==========================================================================================
   示意圖：工作台
   原 includes/mockups/_m_workspace.blade.php。
   ========================================================================================== */

/* ---------- 新增：左側功能導覽軌 ----------
   148px 是固定值而不是百分比：導覽項的文字長度是已知的（最長「自動包裝機」五個字），
   用百分比會讓右邊的表格在窄欄裡被壓到不可讀。 */
.site-wsp { display: grid; grid-template-columns: 148px minmax(0, 1fr); }

.site-wsp-rail {
    border-right: 1px solid hsl(var(--border));
    background: hsl(var(--muted) / .35);
    padding: .5rem 0;
}

.site-wsp-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4375rem .75rem;
    font-size: .75rem;
    color: hsl(var(--muted-foreground));
    border-left: 2px solid transparent;
}

.site-wsp-item [data-lucide], .site-wsp-item svg { width: 14px; height: 14px; }

.site-wsp-item--on {
    color: hsl(var(--foreground));
    font-weight: 600;
    background: hsl(var(--accent));
    border-left-color: hsl(var(--primary));
}


/* ==========================================================================================
   示意圖：發票
   原 includes/mockups/_m_invoice.blade.php。
   ========================================================================================== */

.site-inv {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-md);
    background: hsl(var(--card));
    padding: .875rem 1rem 1rem;
}

.site-inv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 700;
}

/* 撕線：發票的視覺記號，用 border 的 dashed 就夠，不需要圖片 */
.site-inv-rule { border-top: 1px dashed hsl(var(--border)); margin: .75rem 0; }

/* 號碼一律灰條佔位，不寫任何看起來像真的發票號碼（做法同 features/print 的 redact） */
.site-inv-redact { height: .5rem; border-radius: 9999px; background: hsl(var(--muted-foreground) / .22); }

.site-inv-redact--sm { width: 46%; }

.site-inv-redact--md { width: 72%; }

.site-inv-lines { display: grid; gap: .375rem; }

.site-inv-codes { display: flex; align-items: center; justify-content: center; gap: .75rem; }

/* 棋盤格：conic-gradient 每 6px 一格，看得出是 QR 的量體但掃不出內容 */
.site-inv-qr {
    width: 52px;
    height: 52px;
    border-radius: 2px;
    background: repeating-conic-gradient(hsl(var(--foreground)) 0 25%, transparent 0 50%) 0 0 / 6px 6px;
    opacity: .85;
    border: 3px solid hsl(var(--card));   /* 內縮的靜區（quiet zone） */
    outline: 1px solid hsl(var(--border));
}

.site-inv-barcode {
    height: 32px;
    border-radius: 2px;
    background-image: repeating-linear-gradient(
        90deg,
        hsl(var(--foreground)) 0 2px,
        transparent 2px 4px,
        hsl(var(--foreground)) 4px 5px,
        transparent 5px 9px
    );
}

.site-inv-states { display: flex; flex-wrap: wrap; gap: .375rem; }

.site-inv-note { margin: .5rem 0 0; font-size: .6875rem; color: hsl(var(--muted-foreground)); text-align: center; }


/* ==========================================================================================
   示意圖：漏斗
   原 includes/mockups/_m_funnel.blade.php。
   ========================================================================================== */

.site-funnel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.5rem 8.5rem;
    align-items: center;
    margin-top: .25rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-md);
    background: hsl(var(--muted) / .35);
    padding: 1rem;
}

.site-funnel-src { display: grid; gap: .375rem; }

.site-funnel-join { position: relative; align-self: stretch; }

/* 垂直收攏線：上下各留 14%，看起來是把五條來源收成一束 */
.site-funnel-join::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 14%;
    bottom: 14%;
    width: 1px;
    background: hsl(var(--border));
}

/* 水平接線：右側多伸 .5rem 貼進工作台方塊 */
.site-funnel-join::after {
    content: "";
    position: absolute;
    left: 50%;
    right: -.5rem;
    top: 50%;
    height: 1px;
    background: hsl(var(--border));
}

.site-funnel-hub {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-md);
    background: hsl(var(--card));
    padding: .875rem .75rem;
    text-align: center;
    font-size: .75rem;
    font-weight: 600;
    box-shadow: var(--al-elev-xs); /*〔存查 f0031〕*/
}

.site-funnel-hub [data-lucide], .site-funnel-hub svg { width: 18px; height: 18px; }


/* ==========================================================================================
   示意圖：機台照
   原 includes/mockups/_m_photo_machine.blade.php。
   ========================================================================================== */

/* 這一顆單獨拉出來，是為了不把 object-position 寫成 inline style
   （inline style 沒有辦法在註解裡說明「46% 是怎麼來的」，換照片的人就會照抄）。 */
.site-photo--machine img { object-position: center 46%; }


/* ==========================================================================================
   串接協助區塊
   原 includes/_integration_help.blade.php。
   ========================================================================================== */

/* 沒有自己的上下 padding，也沒有自己的 .container ——
     它一律接在既有區塊的容器尾巴，垂直節奏由那個區塊負責，
     這樣它在 bg-light 上就是 bg-light，不會在兩個區塊中間切出一條別的底色。 */
.site-ihelp { margin-top: 2rem; }

:root {
    --al-gold-soft: 47 100% 88%;   /* #FFF0C2 淺階，幾何色塊／淡底 */
}

/* 接在區塊尾巴時把上緣拉近清單，讓它讀起來是「同一段的補充」而不是新的一段 */
.site-ihelp-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    /*〔存查 f0032〕*/
    padding: var(--al-pad-strip-y) var(--al-pad-strip-x);
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    background: hsl(var(--muted) / .35);

    background-image: linear-gradient(180deg,
                      hsl(var(--al-gold-soft) / .55) 0%,
                      hsl(var(--background)) 62%);

    /* 對比：卡內說明文字 .site-ihelp-desc 吃 `－－muted-foreground`＝#737373，
       在原本的 rgb(245,245,245) 底上實測 **4.35:1**（未達 4.5，這是全站既有狀態，
       不是這次引入的）；換成霧黃底之後底色更暖更暗，只會更低。
       因此照本檔既有的做法把這一區的灰壓深一階（#525252 neutral-600），
         用的是本檔 :root 既有的 `－－al-ink-soft`，不是硬寫顏色、不是新色。 */
    --muted-foreground: var(--al-ink-soft);
}

@media (min-width: 992px) {
    /*〔存查 f0033〕*/
    .site-ihelp-card { padding: var(--al-pad-strip-y) var(--al-pad-strip-x-lg); flex-wrap: nowrap; }
}

.site-ihelp-body { min-width: 0; }

.site-ihelp-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.5;
    margin: 0 0 .25rem;
}

.site-ihelp-title [data-lucide], .site-ihelp-title svg { width: 16px; height: 16px; flex: 0 0 auto; }

.site-ihelp-desc {
    font-size: .875rem;
    line-height: 1.8;
    color: hsl(var(--muted-foreground));
    margin: 0;
}

.site-ihelp-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    /*〔存查 f0034〕*/
    padding: var(--al-pad-btn-y-compact) var(--al-pad-btn-x-compact);
    border-radius: var(--radius);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.site-ihelp-cta [data-lucide], .site-ihelp-cta svg { width: 16px; height: 16px; }

/* 深底區塊（.bg-gray-800）內的表現：§S-9／§S-11 只負責文字，卡片底與框自己收 */
.site-section-dark .site-ihelp-card,
.bg-gray-800 .site-ihelp-card {
    background: hsl(var(--foreground) / .06);
    border-color: hsl(var(--background) / .18);
}

/* 把 .site-ihelp-card 那顆 `－－muted-foreground` 在深底上還原成繼承。
   上面那條靠 `background` 簡寫就自動蓋掉了漸層，但**自訂屬性不吃簡寫**，
     所以要單獨還原一次，否則深底上的說明文字會被壓成 #525252（深底上更看不見）。
   `inherit` ＝ 取父層（.site-ihelp）的計算值，與這次改動前逐位元組相同。
   這是防禦性的：目前兩個落點（＃order-channels／＃print-scope）都是 .bg-light，
     深底路徑沒有實際使用者 —— 但上面那條深底規則本來就是同樣的防禦性寫法，
     這裡只是把它漏掉的那一半補上，維持同一個姿勢。 */
.site-section-dark .site-ihelp-card,
.bg-gray-800 .site-ihelp-card {
    --muted-foreground: inherit;
}


/* ==========================================================================================
   租戶登入／註冊外殼
   原 includes/_auth_shell.blade.php。
   ========================================================================================== */

/*〔存查 f0035〕*/

.site-auth {
    background: hsl(var(--background));
    /*〔存查 f0036〕*/
    padding: 1.5rem 0 3rem;
}

@media (min-width: 992px) {
    /*〔存查 f0037〕*/
    .site-auth { padding: 2rem 0 3.5rem; }
}

/* 單欄、置中、有上限寬度 —— 表單頁的重點是「填得完」，不是鋪滿螢幕。
   量測依據：中文標籤 + 說明句在 30rem 內不折行，行動裝置上左右各留 1rem。 */
.site-auth-shell {
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

/* 註冊頁欄位多（10 個），放寬一階讓「公司名稱 + 未成立公司說明」同列擺得下 */
.site-auth-shell--wide { max-width: 34rem; }

.site-auth-card {
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    /*〔存查 f0038〕*/
    padding: 1.375rem 1.25rem;
    box-shadow: var(--al-elev-sm); /*〔存查 f0039〕*/
}

@media (min-width: 576px) {
    /*〔存查 f0040〕*/
    .site-auth-card { padding: 1.75rem 2rem; }
}

/* ---------- 卡頭 ---------- */
/*〔存查 f0041〕*/
.site-auth-head { text-align: center; margin-bottom: 1.125rem; }

.site-auth-brand { display: inline-block; margin-bottom: 1rem; }

.site-auth-brand img { height: 38px; width: auto; display: block; }

.site-auth-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0;
    color: hsl(var(--foreground));
}

.site-auth-tagline {
    font-size: .8125rem;
    color: hsl(var(--muted-foreground));
    margin: 0 0 .75rem;
}

.site-auth-sub {
    font-size: .9375rem;
    color: hsl(var(--muted-foreground));
    margin: .5rem 0 0;
}

/* ---------- 欄位 ----------
   間距刻意比一般表單鬆（1.375rem）：這幾頁的每個欄位下面幾乎都有一句規則說明，
   擠在一起會讓人分不清哪句說明屬於哪個欄位。 */
.site-auth-field { margin-bottom: 1.375rem; }

.site-auth-field > .form-label {
    font-size: .875rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: .4375rem;
}

.site-auth .form-control,
.site-auth .input-group-text { font-size: .9375rem; }

.site-auth .input-group-text {
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    border-color: hsl(var(--border));
}

/* 尾綴（網域後綴、說明字）用較小的字，避免把輸入框擠掉 */
.site-auth-suffix { font-size: .8125rem; white-space: nowrap; }

/* 欄位下方的規則說明 —— 文案逐字沿用舊版 */
.site-auth-hint {
    display: flex;
    align-items: flex-start;
    gap: .375rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: hsl(var(--muted-foreground));
    margin-top: .4375rem;
}

.site-auth-hint .fa { margin-top: .15em; flex: 0 0 auto; }

/* JS 會把錯誤訊息與網域檢查結果插在 .input-group 之後
   （$field.closest('.input-group').after(...)），所以那層 wrapper 是
   **JS 選擇器**不是排版而已 —— 四頁的每個輸入框都必須保留 .input-group 祖先。 */
.site-auth .invalid-feedback,
.site-auth #host-check-result { margin-top: .4375rem; }

.site-auth .invalid-feedback small,
.site-auth #host-check-result small { font-size: .8125rem; line-height: 1.5; }

/* ---------- 送出鈕 ---------- */
.site-auth-submit {
    width: 100%;
    padding-block: .625rem;
    font-size: 1rem;
    font-weight: 600;
}

/*〔存查 f0042〕*/
.site-auth .site-auth-submit.btn.btn-lg {
    min-height: 40px;              /* shadcn lg = h-10；> 同頁輸入框 36.5px，CTA 不再比輸入框矮 */
    padding-block: .5rem;
    padding-inline: 1.25rem;
    font-size: .9375rem;           /* 與上面 `.site-auth .form-control` 那條的 15px 對齊 */
    font-weight: 600;
    border-radius: var(--radius-md);   /* 與 shadcn-theme.css:7968 同值，寫出來讓本區塊自成一體 */
}

/*〔存查 f0043〕*/
.site-auth .form-control.is-invalid {
    border-color: hsl(var(--destructive));
    background-image: none;
    padding-right: .75rem;
}

/*〔存查 f0044〕*/

/* ---------- 卡片內的次要連結列 ---------- */
.site-auth-links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    justify-content: space-between;
    font-size: .875rem;
    margin-top: 1.25rem;
}

.site-auth-links a {
    color: hsl(var(--foreground));
    text-decoration: none;
    font-weight: 500;
}

.site-auth-links a:hover { text-decoration: underline; }

.site-auth-legal {
    border-top: 1px solid hsl(var(--border));
    margin-top: 1.5rem;
    padding-top: 1rem;
    text-align: center;
    font-size: .75rem;
    line-height: 1.9;
    color: hsl(var(--muted-foreground));
}

.site-auth-legal a { color: hsl(var(--muted-foreground)); text-decoration: none; }

.site-auth-legal a:hover { text-decoration: underline; }

/* ---------- 卡片外的輔助說明 ---------- */
.site-auth-aside {
    margin-top: 1.25rem;
    text-align: center;
    font-size: .875rem;
    color: hsl(var(--muted-foreground));
}

.site-auth-aside a { color: hsl(var(--foreground)); font-weight: 500; }

/* ---------- 人機驗證容器 ---------- */
.site-auth-turnstile { margin-bottom: 1.375rem; }

/* =====================================================================
   Toast（取代 Color Admin 的 gritter）
   ===================================================================== */
.site-auth-toasts {
    position: fixed;
    top: calc(var(--site-header-h, 64px) + .75rem);
    right: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: min(22rem, calc(100vw - 2rem));
}

.site-auth-toast {
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    box-shadow: var(--al-elev-lg); /*〔存查 f0045〕*/
    padding: .75rem .875rem;
}

.site-auth-toast-title {
    font-size: .8125rem;
    font-weight: 700;
    margin-bottom: .125rem;
}

.site-auth-toast-body {
    font-size: .875rem;
    line-height: 1.55;
    color: hsl(var(--muted-foreground));
    overflow-wrap: anywhere;
}

/*〔存查 f0046〕*/
.site-auth .fa {
    /* 預設是一張空 SVG：沒對應到的 fa class 會「不顯示」而不是變成黑方塊 */
    --site-auth-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%2F%3E");
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: var(--site-auth-icon) center / contain no-repeat;
    mask: var(--site-auth-icon) center / contain no-repeat;
}

/* forgot-password 的成功面板用 fa-2x；尺寸走 font-size，width/height 是 1em 所以會跟著放大 */
.site-auth .fa-2x { font-size: 2em; }

.site-auth .fa-spin { animation: site-auth-spin 1s linear infinite; }

@keyframes site-auth-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    /* 放慢但不停：這是「正在處理中」的可用性訊號，不是裝飾動畫 */
    .site-auth .fa-spin { animation-duration: 2.5s; }
}

.site-auth .fa-globe{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'%2F%3E%3Cpath%20d%3D'M12%202a14.5%2014.5%200%200%200%200%2020%2014.5%2014.5%200%200%200%200-20'%2F%3E%3Cpath%20d%3D'M2%2012h20'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-user{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'7'%20r%3D'4'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-key{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2.586%2017.414A2%202%200%200%200%202%2018.828V21a1%201%200%200%200%201%201h3a1%201%200%200%200%201-1v-1a1%201%200%200%201%201-1h1a1%201%200%200%200%201-1v-1a1%201%200%200%201%201-1h.172a2%202%200%200%200%201.414-.586l.814-.814a6.5%206.5%200%201%200-4-4z'%2F%3E%3Ccircle%20cx%3D'16.5'%20cy%3D'7.5'%20r%3D'.5'%20fill%3D'currentColor'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-check-double{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M18%206%207%2017l-5-5'%2F%3E%3Cpath%20d%3D'm22%2010-7.5%207.5L13%2016'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-store{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M15%2021v-5a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v5'%2F%3E%3Cpath%20d%3D'M17.774%2010.31a1.12%201.12%200%200%200-1.549%200%202.5%202.5%200%200%201-3.451%200%201.12%201.12%200%200%200-1.548%200%202.5%202.5%200%200%201-3.452%200%201.12%201.12%200%200%200-1.549%200%202.5%202.5%200%200%201-3.77-3.248l2.889-4.184A2%202%200%200%201%207%202h10a2%202%200%200%201%201.653.873l2.895%204.192a2.5%202.5%200%200%201-3.774%203.244'%2F%3E%3Cpath%20d%3D'M4%2010.95V19a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-8.05'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-building{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M10%2012h4'%2F%3E%3Cpath%20d%3D'M10%208h4'%2F%3E%3Cpath%20d%3D'M14%2021v-3a2%202%200%200%200-4%200v3'%2F%3E%3Cpath%20d%3D'M6%2010H4a2%202%200%200%200-2%202v7a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2h-2'%2F%3E%3Cpath%20d%3D'M6%2021V5a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v16'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-id-card{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M16%2010h2'%2F%3E%3Cpath%20d%3D'M16%2014h2'%2F%3E%3Cpath%20d%3D'M6.17%2015a3%203%200%200%201%205.66%200'%2F%3E%3Ccircle%20cx%3D'9'%20cy%3D'11'%20r%3D'2'%2F%3E%3Crect%20x%3D'2'%20y%3D'5'%20width%3D'20'%20height%3D'14'%20rx%3D'2'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-envelope{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'm22%207-8.991%205.727a2%202%200%200%201-2.009%200L2%207'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'20'%20height%3D'16'%20rx%3D'2'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-mobile-screen-button{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20width%3D'14'%20height%3D'20'%20x%3D'5'%20y%3D'2'%20rx%3D'2'%20ry%3D'2'%2F%3E%3Cpath%20d%3D'M12%2018h.01'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-question-circle{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'%2F%3E%3Cpath%20d%3D'M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203'%2F%3E%3Cpath%20d%3D'M12%2017h.01'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-info-circle{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'%2F%3E%3Cpath%20d%3D'M12%2016v-4'%2F%3E%3Cpath%20d%3D'M12%208h.01'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-check-circle{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'%2F%3E%3Cpath%20d%3D'm9%2012%202%202%204-4'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-exclamation-circle{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'%2F%3E%3Cline%20x1%3D'12'%20x2%3D'12'%20y1%3D'8'%20y2%3D'12'%2F%3E%3Cline%20x1%3D'12'%20x2%3D'12.01'%20y1%3D'16'%20y2%3D'16'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-arrow-left{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'm12%2019-7-7%207-7'%2F%3E%3Cpath%20d%3D'M19%2012H5'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-search{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'm21%2021-4.34-4.34'%2F%3E%3Ccircle%20cx%3D'11'%20cy%3D'11'%20r%3D'8'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-user-plus{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2'%2F%3E%3Ccircle%20cx%3D'9'%20cy%3D'7'%20r%3D'4'%2F%3E%3Cline%20x1%3D'19'%20x2%3D'19'%20y1%3D'8'%20y2%3D'14'%2F%3E%3Cline%20x1%3D'22'%20x2%3D'16'%20y1%3D'11'%20y2%3D'11'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-home{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M15%2021v-8a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v8'%2F%3E%3Cpath%20d%3D'M3%2010a2%202%200%200%201%20.709-1.528l7-6a2%202%200%200%201%202.582%200l7%206A2%202%200%200%201%2021%2010v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-spinner{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M21%2012a9%209%200%201%201-6.219-8.56'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-link{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71'%2F%3E%3Cpath%20d%3D'M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-external-link-alt{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M15%203h6v6'%2F%3E%3Cpath%20d%3D'M10%2014%2021%203'%2F%3E%3Cpath%20d%3D'M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6'%2F%3E%3C%2Fsvg%3E")}

.site-auth .fa-sign-in-alt{--site-auth-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'm10%2017%205-5-5-5'%2F%3E%3Cpath%20d%3D'M15%2012H3'%2F%3E%3Cpath%20d%3D'M15%203h4a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202h-4'%2F%3E%3C%2Fsvg%3E")}


/* ==========================================================================================
   首頁
   原 welcome_shadcn.blade.php。這一段是全站 site-* 版面的「母本」——其餘各頁的副本都是從這裡複製出去的。
   ========================================================================================== */

/*〔存查 f0047〕*/

/* ---------- 區塊節奏 ---------- */
/*〔存查 f0048〕*/
.site-section { padding: 3.5rem 0; }
/*〔存查 f0049〕*/

/* ⚠ 死碼：已被 L4464 那段取代（**第三代**；中間還隔著第二代 L4223）。改值請改 L4464。 */
@media (min-width: 992px) { .site-section { padding: 5rem 0; } }

.site-section-head { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; }

.site-section-title {
    /* ㉑批1存查（原文未刪）：font-size: clamp(1.625rem, 3vw, 2.25rem); ← 由 L4380＋檔尾㉑階梯接手 */
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: .75rem;
}

.site-section-desc { color: hsl(var(--muted-foreground)); margin-bottom: 0; }

/*〔存查 f0050〕*/
.bg-gray-800 .site-section-desc,
.bg-gray-800 .site-service-desc,
.bg-gray-800 .site-pillar-desc { color: inherit; opacity: .75; }
/*〔存查 f0051〕*/

/*〔存查 f0052〕*/
.site-dark-panel {
    border: 1px solid hsl(var(--dark-panel-foreground) / .16);
    border-radius: var(--radius-xl);
    background: hsl(var(--dark-panel-foreground) / .07);
    padding: 1.75rem 1.25rem;
    height: 100%;
}
/*〔存查 f0053〕*/

.site-dark-panel [data-lucide], .site-dark-panel svg { width: 28px; height: 28px; }

/* ---------- eyebrow 小標 ---------- */
.site-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    border-radius: 9999px;
    padding: .25rem .75rem;
}
/*〔存查 f0054〕*/

.site-eyebrow [data-lucide], .site-eyebrow svg { width: 14px; height: 14px; }

/* letter-spacing 會在最後一個字元右邊也加一份（CSS 規範，不是 bug）→ 看起來像
   右內距比左內距寬。等量負 margin 補回去。 */
.site-eyebrow-text { letter-spacing: .08em; margin-right: -.08em; }
/*〔存查 f0055〕*/

/* ---------- #home hero ---------- */
.site-hero {
    position: relative;
    overflow: hidden;
    /*〔存查 f0056〕*/
    padding: 3rem 0 3.5rem;
    background: hsl(var(--muted) / .45);
    border-bottom: 1px solid hsl(var(--border));
}
/*〔存查 f0057〕*/

/* ⚠ 死碼：已被 L4239 那段取代；而 padding-top 在 >=992 還會再被 L4608 的
   `.site-hero:not(.site-section)` (0,2,0) 蓋成 4rem。改值請先看 L4608。 */
@media (min-width: 992px) { .site-hero { padding: 4.5rem 0 5rem; } }

/* 品牌黃只做一層很淡的光暈（重點色用在 CTA 上，不是整片底） */
.site-hero::before {
    content: "";
    position: absolute;
    top: -30%;
    left: -10%;
    width: 55%;
    height: 130%;
    background: radial-gradient(closest-side, hsl(var(--primary) / .22), transparent);
    pointer-events: none;
}

.site-hero > .container { position: relative; }

.site-hero-logo { height: 40px; width: auto; }

.site-hero-title {
    font-size: clamp(1.875rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 0;
}

.site-hero-lead {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: hsl(var(--muted-foreground));
    max-width: 34rem;
}

.site-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* CTA 的「外觀」全部來自主題 §29.4 的 .btn-cta-primary / -secondary（L2518）——
   那是主題裡唯一為行銷型大按鈕準備的東西。這裡只補「尺寸與排版」，不碰顏色。 */
.site-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    /*〔存查 f0058〕*/
    padding: var(--al-pad-btn-y-cta) var(--al-pad-btn-x-cta);
    border-radius: var(--radius-md);
    font-size: .875rem;            /* shadcn sm：text-sm。前值：1rem */
    /* line-height 必須寫死，不可繼承：首頁包裹層給的是 26px、其餘頁面是 24px，
       繼承會讓同一顆按鈕在首頁比別頁高 2px（26+12+2=40 vs 24+12+2=38）。
       1.25rem（20px）＝ shadcn text-sm 配對的行高。 */
    line-height: 1.25rem;
    font-weight: 500;
    text-decoration: none;
    /* shadcn sm＝h-9＝36px 總高。本專案 box-sizing 為 border-box（前一版 min-height 48
       ＋內距 24 ＋框線 2 算繪 50 可證），border 已含在 36 之內，故直接寫 36。
       內容 20（行高）＋內距 12 ＋框線 2 ＝ 34 ≤ 36，高度由 min-height 決定，恆為 36。
       前值：48px（行銷型大按鈕，註記「觸控目標 ≥ 44px」）。 */
    min-height: 36px;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/*〔存查 f0059〕*/

.site-cta [data-lucide], .site-cta svg { width: 16px; height: 16px; }

@media (max-width: 575.98px) { .site-cta { width: 100%; } }


/* ==========================================================================================
   串接協助區塊
   原 includes/_integration_help.blade.php。
   ========================================================================================== */

@media (max-width: 575.98px) { .site-ihelp-cta { width: 100%; } }


/* ==========================================================================================
   首頁
   原 welcome_shadcn.blade.php。這一段是全站 site-* 版面的「母本」——其餘各頁的副本都是從這裡複製出去的。
   ========================================================================================== */

/* ---------- 圖示磚 ---------- */
.site-icon-tile {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
    flex-shrink: 0;
}
/*〔存查 f0060〕*/

.site-icon-tile [data-lucide], .site-icon-tile svg { width: 22px; height: 22px; }

.site-icon-tile-brand { background: hsl(var(--primary) / .18); }

/* ---------- 主軸四卡（印單 / 發票 / 撿包系統 / 自動包裝機） ---------- */
.site-pillar { height: 100%; }
/*〔存查 f0061〕*/

.site-pillar .card-body { display: flex; flex-direction: column; gap: .75rem; }

.site-pillar-title { font-size: 1.0625rem; font-weight: 700; margin: 0; }
/*〔存查 f0062〕*/


/* ==========================================================================================
   共用 UI 語彙
   圖示磚 / 支柱卡 / chip / 照片框。原 includes/_site_ui.blade.php。
   ========================================================================================== */

/* ---------- 主推卡（有 mockup 的那兩張）----------
   標題的字級／字重／字距覆蓋已移除，回落至本檔 .site-pillar-title 基底，
   使各頁支柱卡標題一致。原文見存查目錄。 */


/* ==========================================================================================
   首頁
   原 welcome_shadcn.blade.php。這一段是全站 site-* 版面的「母本」——其餘各頁的副本都是從這裡複製出去的。
   ========================================================================================== */

.site-pillar-link {
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.site-pillar-link [data-lucide], .site-pillar-link svg { width: 15px; height: 15px; }

/* ---------- #service 原六格 ---------- */
.site-service { display: flex; gap: .875rem; height: 100%; }
/* 這條規則原本在多支檔各有一份副本，其餘副本另外帶了下列說明，一併保留：
     〔原 pages/features.blade.php〕---------- 原六格 ----------
   */

.site-service-title { font-size: 1rem; font-weight: 700; margin: 0 0 .25rem; }

.site-service-desc { color: hsl(var(--muted-foreground)); font-size: .875rem; margin: 0; }

/* ---------- #milestone ---------- */
.site-milestone { text-align: center; padding: .5rem 0; }

.site-milestone-num {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.site-milestone-title { font-size: .875rem; margin-bottom: .25rem; }

/*〔存查 f0063〕*/
/* 垂直內距從 .5rem 收到 .375rem：承載盒 28px 比原本的 16px 圖示高，
   不收的話 chip 會長到 44px 顯得笨重；收完是 40px。 */
.site-chip-brand { padding: var(--al-pad-chip-y-lead) var(--al-pad-chip-x) var(--al-pad-chip-y-lead) var(--al-pad-chip-x-lead); } /*〔存查 f0064〕*/

.site-chip-mark {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: var(--radius-md);
    background: hsl(var(--card));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/*〔存查 f0065〕*/
.site-chip-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- 商標免責 ----------
   低調但**看得見**：走 muted 前景色 + 上分隔線，不是藏起來。 */
.site-legal {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
    font-size: .8125rem;
    line-height: 1.7;
    color: hsl(var(--muted-foreground));
}
/* 這條規則原本在多支檔各有一份副本，其餘副本另外帶了下列說明，一併保留：
     〔原 features/order.blade.php〕低調但**看得見**：走 muted 前景色 + 上分隔線，不是藏起來。
   */

.site-cap-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .625rem; }
/*〔存查 f0066〕*/

@media (min-width: 768px) { .site-cap-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.site-cap-list li { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--al-type-body); /*〔存查 f0067〕*/ }

.site-cap-list [data-lucide], .site-cap-list svg { width: 17px; height: 17px; margin-top: .1875rem; flex-shrink: 0; }

.site-note { font-size: var(--al-type-caption); /*〔存查 f0068〕*/ color: hsl(var(--muted-foreground)); margin: .75rem 0 0; }
/* 這條規則原本在多支檔各有一份副本，其餘副本另外帶了下列說明，一併保留：
     〔原 pages/pricing.blade.php〕(8) 註記與 CTA 區塊盒
   */

/* ---------- #pricing ---------- */
.site-plan { height: 100%; position: relative; }
/* 這條規則原本在多支檔各有一份副本，其餘副本另外帶了下列說明，一併保留：
     〔原 pages/pricing.blade.php〕(7) 方案卡（首頁 #pricing 的原始定義，一個數值都沒改）
   */

.site-plan-recommended { border-color: hsl(var(--primary)); box-shadow: var(--al-ring-1) hsl(var(--primary)); }
/*〔存查 f0069〕*/

.site-plan-price { font-size: 2rem; /*〔存查 f0070〕*/ font-weight: 800; letter-spacing: -.02em; }

.site-plan-tenure { font-size: var(--al-type-caption); /*〔存查 f0071〕*/ color: hsl(var(--muted-foreground)); }

.site-plan-features { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; }

.site-plan-features li { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; }

.site-plan-features [data-lucide], .site-plan-features svg { width: 16px; height: 16px; margin-top: .125rem; flex-shrink: 0; }

.site-plan-tick-off { color: hsl(var(--muted-foreground)); opacity: .45; }

/* ---------- #action-box ---------- */
/*〔存查 f0072〕*/
.site-action-box { border-radius: var(--radius-xl); padding: 2rem 1.5rem; }
/*〔存查 f0073〕*/

/*〔存查 f0074〕*/
@media (min-width: 992px) { .site-action-box { padding: 2.5rem; } }

/* ---------- #contact ---------- */
.site-contact-card { height: 100%; display: flex; flex-direction: column; text-align: center; }
/* 這條規則原本在多支檔各有一份副本，其餘副本另外帶了下列說明，一併保留：
     〔原 pages/contact.blade.php〕⑦⑧⑨ 聯絡卡（首頁 #contact 的三顆，逐字沿用）
   */

.site-contact-qr { max-width: 160px; width: 100%; height: auto; }

.site-contact-logo { max-width: 150px; width: 100%; height: auto; }

/* 深底上的媒體外框：與 .site-dark-panel 同一套語言（白 16% 細框） */
.site-media-frame { border: 1px solid hsl(var(--dark-panel-foreground) / .16); border-radius: var(--radius-xl); overflow: hidden; }


/* ==========================================================================================
   方案價格頁
   原 pages/pricing.blade.php。
   ========================================================================================== */

/* 深底區塊：底色與「標題／.text-silver」的翻轉交給 §S-9 的 .bg-gray-800 與 §S-11，
   這裡只負責把 §S-11 管不到的自訂說明文字 class 接回 inherit（否則會吃到給白底用的灰）。 */
.bg-gray-800 .site-section-desc,
.bg-gray-800 .site-pillar-desc { color: inherit; opacity: .75; }
/*〔存查 f0075〕*/

/* =========================================================================
   以下為本頁新增（首頁與主題都沒有的東西，理由逐條寫在各區塊上方）
   ========================================================================= */

/*〔存查 f0076〕*/
.site-pricing-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }

.site-pricing-card:hover { border-color: hsl(var(--primary) / .55); }

@media (min-width: 992px) {
    .site-pricing-card:hover { transform: translateY(-4px); }
    .site-pricing-card.site-plan-recommended { transform: translateY(-4px); box-shadow: var(--al-ring-2) hsl(var(--primary)); } /*〔存查 f0077〕*/
    .site-pricing-card.site-plan-recommended:hover { transform: translateY(-8px); }
}

/*〔存查 f0078〕*/
@media (max-width: 991.98px) {
    .site-pricing-card.site-plan-recommended::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        background: hsl(var(--primary));
    }
}

/*〔存查 f0079〕*/
.site-pricing-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 1.5rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid hsl(var(--border));
}

.site-pricing-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--al-type-caption); /*〔存查 f0080〕*/
    color: hsl(var(--muted-foreground));
}

.site-pricing-legend-item [data-lucide], .site-pricing-legend-item svg { width: 15px; height: 15px; flex-shrink: 0; }

/* 「不標示」那一項本來就沒有圖示 → 給一個等寬的空盒占位，三項的文字才會在同一條基線上。 */
.site-pricing-legend-blank { display: inline-block; width: 15px; flex-shrink: 0; }

/* ---------- (c) 缺資料時的提示 ----------
   只負責置中與寬度上限，外觀走主題的 .alert。 */
.site-pricing-notice { max-width: 46rem; margin-left: auto; margin-right: auto; }


/* ==========================================================================================
   關於我們
   原 pages/about.blade.php。
   ========================================================================================== */

/* 深底區塊的說明文字：§S-11 只認 h1~h6 / .text-silver / .text-muted，
   管不到本頁自訂的 .site-*-desc → 落在深底上會是給白底用的灰，對比不足。
   用 (0,2,0) 的後代選擇器接回 inherit。 */
.bg-gray-800 .site-section-desc { color: inherit; opacity: .75; }
/* 這條規則原本在多支檔各有一份副本，其餘副本另外帶了下列說明，一併保留：
     〔原 pages/contact.blade.php〕深底區塊：底色與「標題／.text-silver」的翻轉交給 §S-9 的 .bg-gray-800 與 §S-11， 這裡只負責把 §S-11 管不到的自訂說明文字 class 接回 inherit （否則會吃到 --muted-foreground，那是給白底用的灰，落在深底上對比不足）。 選擇器只列本頁真的用到的那幾顆；首頁版另外還掛了 .site-service-desc / .site-pillar-desc，本頁沒有那兩個元素，值與行為完全相同。
   */

/* ---------- 里程碑數字 ---------- */
/* ---------- 數字帶 ----------
   一整條 hairline 分隔的四格，不是四張各自為政的卡片。
   線的做法：grid 的 gap 設 1px，容器底色透出來就是線 —— 換欄數不用重算邊框。 */
.site-about-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: hsl(var(--dark-panel-foreground) / .14);
    border: 1px solid hsl(var(--dark-panel-foreground) / .14);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

@media (max-width: 767.98px) { .site-about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.site-about-stat {
    background: hsl(var(--dark-panel-foreground) / .05);
    padding: 1.5rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    transition: background-color .15s ease;
}

.site-about-stat:hover { background: hsl(var(--dark-panel-foreground) / .09); }

@media (prefers-reduced-motion: reduce) { .site-about-stat { transition: none; } }

/* 圖示與標籤同一行：圖示是標籤的前綴，不是獨立一層 */
.site-about-stat-label {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    line-height: 1.4;
    color: inherit;
    opacity: .7;
}

.site-about-stat-label [data-lucide],
.site-about-stat-label svg { width: 14px; height: 14px; flex-shrink: 0; }

/* 數字自適應：160,000,000 有 11 個字元、60 只有 2 個。
   用 clamp + tabular-nums，長的自動收、短的不會顯得空；
   tabular-nums 讓滾動動畫跑數字時寬度不跳動。 */
.site-about-stat-num {
    font-size: clamp(1.375rem, 2.1vw, 1.875rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

/* =========================================================================
   以下兩顆是本頁**唯一新增**的 class（其餘全部沿用既有 .site-* 體系）
   ========================================================================= */

/*〔存查 f0081〕*/
.site-about-narrative {
    font-size: var(--al-type-body); /*〔存查 f0082〕*/
    line-height: 1.85;
    color: hsl(var(--foreground));
    margin: 0;
}

/*〔存查 f0083〕*/
.site-about-quote-mark { color: hsl(var(--primary)); line-height: 1; }

.site-about-quote-mark [data-lucide], .site-about-quote-mark svg { width: 32px; height: 32px; }

/* =========================================================================
   以下三顆是「熊貓視覺 / 肥宅叔叔頻道」區塊新增的（一律 .site-about- 前綴）
   ========================================================================= */

/*〔存查 f0084〕*/
.site-about-panda { text-align: center; }

.site-about-panda-img {
    display: inline-block;
    width: 100%;
    max-width: 300px;      /* 素材 fatboysusu.png 是 811×955，實體像素遠高於顯示需求，可放大 */
    height: auto;
}

@media (max-width: 575.98px) { .site-about-panda-img { max-width: 180px; } }

/*〔存查 f0085〕*/
.site-about-channels { display: flex; flex-wrap: wrap; gap: .5rem; }

.site-about-channel {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;              /* 觸控目標 ≥ 44px */
    padding: .5rem .875rem;
    border: 1px solid hsl(var(--border));
    /*〔存查 f0086〕*/
    border-radius: var(--radius);
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    font-size: .875rem;
    /*〔存查 f0087〕*/
    font-weight: 500;
    text-decoration: none;
    /*〔存查 f0088〕*/
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.site-about-channel:hover,
.site-about-channel:focus-visible {
    background: hsl(var(--muted));
    border-color: hsl(var(--foreground) / .35);
    color: hsl(var(--foreground));
}

/*〔存查 f0089〕*/

.site-about-channel [data-lucide], .site-about-channel svg { width: 18px; height: 18px; }


/* ==========================================================================================
   聯絡我們
   原 pages/contact.blade.php。
   ========================================================================================== */

/* =========================================================================
   ⑩ 以下是本頁自造（.site-contact-* 前綴，避開 site-pm-* / site-print-* /
      site-about-* / site-pricing-* 等其他新頁的命名）
   ========================================================================= */

/* 卡片頂部：圖示磚在置中的卡裡要自己居中（.site-icon-tile 只管盒子不管對齊） */
.site-contact-head { display: flex; justify-content: center; margin-bottom: .875rem; }

.site-contact-title { font-size: var(--al-type-heading); /*〔存查 f0090〕*/ font-weight: 700; margin: 0 0 .5rem; }

.site-contact-note { color: hsl(var(--muted-foreground)); font-size: .9375rem; margin: 0 0 1rem; }

/* 聯絡明細清單：卡片本身是置中的，但「統編／電話／地址」三行**必須靠左**——
   地址是本頁最長也最需要逐字讀的一行，置中的多行地址會讓每一行起點都不一樣，
   讀起來要重新對焦。這是唯一一處刻意脫離卡片置中的區塊。 */
.site-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .625rem;
    text-align: start;
}

.site-contact-list li { display: flex; align-items: flex-start; gap: .625rem; font-size: .9375rem; line-height: 1.6; }

.site-contact-ico {
    width: 17px;
    height: 17px;
    margin-top: .21875rem;      /* 與第一行文字的視覺基線對齊 */
    flex-shrink: 0;
    color: hsl(var(--muted-foreground));
}

/* 可點的那幾行：平時看起來就是文字，hover 才給回饋 —— 電話與地圖是「動作」不是「導覽」，
   不需要一直用連結色喊人。 */
.site-contact-link { color: inherit; text-decoration: none; }

.site-contact-link:hover,
.site-contact-link:focus-visible { color: hsl(var(--foreground)); text-decoration: underline; }

.site-contact-map {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .25rem;
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
}

.site-contact-map [data-lucide], .site-contact-map svg { width: 13px; height: 13px; }

.site-contact-map:hover, .site-contact-map:focus-visible { text-decoration: underline; }

/* LINE ID 那一行：放大 + 可選取，讓人一眼抄得走（很多人是用手機看、自己輸入 ID 加好友） */
.site-contact-id {
    display: inline-block;
    font-size: var(--al-type-heading); /*〔存查 f0091〕*/
    font-weight: 700;
    letter-spacing: .02em;
    user-select: all;
}

/* QR 與按鈕：兩張 LINE 卡的底部區塊要等高對齊，所以固定用同一組間距 */
.site-contact-media { margin: 0 0 1rem; }

.site-contact-actions { margin-top: auto; }


/* ==========================================================================================
   自動包裝機規格頁
   原 pages/machine.blade.php。
   ========================================================================================== */

/* =========================================================================
   ② 本頁專屬 site-mch-*
   ========================================================================= */

/*〔存查 f0092〕*/
/*〔存查 f0093〕*/
.site-mch-hero { position: relative; overflow: hidden; padding: 3.25rem 0 3rem; }

/*〔存查 f0094〕*/
@media (min-width: 992px) { .site-mch-hero { padding: 5rem 0 4.5rem; } }

.site-mch-hero-bg { position: absolute; inset: 0; z-index: 0; }

/*〔存查 f0095〕*/
.site-mch-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .70; }

/* 由下往上加深：讓文字落區的對比穩定，不受背景照片明暗變化影響 */
/*〔存查 f0096〕*/
.site-mch-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, hsl(var(--dark-panel) / .25) 0%, hsl(var(--dark-panel) / .68) 62%, hsl(var(--dark-panel) / .90) 100%);
}

.site-mch-hero-inner { position: relative; z-index: 2; }

/* 深底上的 eyebrow：亮底那顆是 --card 白底，直接用會變成一顆白藥丸 */
.site-mch-eyebrow-ondark {
    color: inherit;
    border-color: hsl(var(--dark-panel-foreground) / .28);
    background: hsl(var(--dark-panel-foreground) / .10);
}

.site-mch-h1 {
    font-size: clamp(1.875rem, 4.5vw, 3rem) /*〔存查 f0097〕*/;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 1rem 0 0;
}

.site-mch-lead { font-size: var(--al-type-subtitle); /*〔存查 f0098〕*/ line-height: 1.75; margin: .75rem 0 0; max-width: 34rem; }

.site-mch-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* 深底上的次要 CTA：.btn-cta-secondary 是 --card 白底，在這裡會變成一顆實心白鈕，
   視覺重量會壓過品牌黃的主要動作 → 換成半透明恆亮前景（與 .site-icon-tile-ondark 同語彙）。 */
/* ★★★ 2026-08-26 更正上面這個結論（原文逐字保留不刪 —— 它對 .site-mch-cta-ondark 仍然成立，
     只有「深底的 .btn-cta-secondary 也走這套」這個部分過期了）：
       ① 業主定調「瞭解更多統一 SSOT」⇒ 深底不再另立一套外框鈕。改用下方〔存查 f0099b〕的
          token 翻面，讓 shadcn-theme.css〔存查 s0229〕的 .btn-cta-secondary 在深淺底都是
          唯一權威。★ 那條元件規則一個字都沒有改。
       ② 上面說的「會壓過品牌黃的主要動作」，對 #machine-section 那三顆**不成立**：實測那三顆
          所在容器的品牌黃主要動作數量為 0（單顆按鈕，沒有黃鈕可壓）。該理由只對其餘 9 處
          （.site-action-box 內黃鈕並排）成立，而業主看過 /pricing 並排實測後仍選擇統一。
       ③ ⛔ 不可以「直接拿掉本覆寫、讓它回落成近黑實心」：--dark 是 0 0% 9%，與深底 .bg-gray-800
          同值，實測 12 顆有 10 顆對比度 1.00:1（另兩顆 1.22 / 1.55），按鈕本體會整顆消失、
          只剩一行浮字。⇒ 所以是翻面，不是移除。
     ★ .site-mch-cta-ondark 留在本規則：machine.blade.php 仍在用它，而它沒有掛
       .btn-cta-secondary，配色完全靠這裡，拿掉會失去樣式。 */
/* ★★★ 2026-08-26（第三段，同日稍晚）業主再次改變方向 —— 上面兩段一個字都沒刪，因為它們
     記錄的實測數值本輪全部仍然有效，只有「深底走 token 翻面」這個做法被推翻：
       ⑴ 業主指著 /machine 的「看三款機型 →」說：「我覺得這按鈕比較漂亮」「可以把剛剛改的
          白色按鈕改為這種嗎」「透明白框」。⇒ 深底次要 CTA 改回**半透明底 + 白框 + 白字**，
          也就是本規則 f0099 原本的長相。
       ⑵ 做法：把 .site-section-dark .btn-cta-secondary **放回本規則的選擇器清單**（正常態與
          hover / focus-visible 兩段都放回），讓它與 .site-mch-cta-ondark 吃同一組宣告 ——
          業主指的那顆就是 .site-mch-cta-ondark，所以這是「照現成的那顆」，沒有自創新數值。
          ★ 元件規則 .btn-cta-secondary（shadcn-theme.css〔存查 s0229〕）依然一個字都沒改。
       ⑶ 上一段的〔存查 f0099b〕token 翻面已移除（詳見下方保留的原註解）。
       ⑷ 上一段第 ② 點那個實測事實**仍然成立且要留著**：#machine-section 那三顆的品牌黃主要
          動作數量 primarySiblings = 0 ⇒ 最上面那句「會壓過品牌黃的主要動作」對那三顆不成立，
          該理由只對其餘 9 處（.site-action-box 內黃鈕並排）成立。
       ⑸ 上一段第 ③ 點也仍然成立：⛔ 不可以只是「拿掉本覆寫」讓它回落成近黑實心（--dark 與
          深底 .bg-gray-800 同為 0 0% 9%，實測 12 顆有 10 顆對比 1.00:1）。本輪不是拿掉覆寫，
          是把覆寫**放回來**。
     ★ home.css 的 .site-section-dark a:not(.btn):not(.site-cta) 與本輪無關，保留不動：
       .site-cta 不是 .btn，原本的 :not(.btn) 擋不住金色，而 home.css 只有首頁載入
       ⇒ 少了 :not(.site-cta) 會變成「只有首頁那三顆是黃字、其他 9 頁白字」的 SSOT 破口。 */
/*〔存查 f0099〕*/
.site-mch-cta-ondark,
.site-section-dark .btn-cta-secondary {
    color: hsl(var(--dark-panel-foreground));
    border: 1px solid hsl(var(--dark-panel-foreground) / .28);
    background: hsl(var(--dark-panel-foreground) / .08);
}

.site-mch-cta-ondark:hover,
.site-mch-cta-ondark:focus-visible,
.site-section-dark .btn-cta-secondary:hover,
.site-section-dark .btn-cta-secondary:focus-visible {
    color: hsl(var(--dark-panel-foreground));
    background: hsl(var(--dark-panel-foreground) / .16);
    border-color: hsl(var(--dark-panel-foreground) / .45);
}

/*〔存查 f0099b〕此處原有一條 .site-section-dark 的 token 翻面規則（--dark: 0 0% 98%；
   --dark-foreground: 0 0% 9%），2026-08-26 業主改回半透明白框後已移除，回落至上方 f0099。
   ⛔ 原註解逐字保留於下，它記錄的量測仍是有效證據（若日後又要走翻面路線，直接看這裡）：
   ┌───────────────────────────────────────────────────────────────────────────────────
   │ 深底表面的 token 翻面。.btn-cta-secondary 在亮底是 zinc 近黑實心；深底沿用**同一條**元件
   │ 規則，只把它讀的兩顆 token 換成 shadcn 自己 .dark 區塊裡的值
   │ （shadcn-theme.css 的 .dark：--dark: 0 0% 98%；--dark-foreground: 0 0% 9%）
   │ ⇒ 同一種樣式隨表面翻面：一樣實心填滿、一樣無視覺外框、幾何完全不變。沒有自己調新顏色。
   │ ★ 實測 blast radius：注入本規則後掃 10 頁共 552 個 .site-section-dark 子孫，算繪值改變的
   │   只有目標按鈕自己（含它的 svg/path 子節點），其餘 0 個 —— 深底區塊裡沒有別的 --dark 使用者。
   │   （掃描器先用「翻 --dark-panel-foreground」當誘餌驗過會紅：12 個子孫命中 11 個。）
   └─────────────────────────────────────────────────────────────────────────────────── */

/*〔存查 f0100〕*/
.site-mch-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: hsl(var(--dark-panel-foreground) / .18);
    border: 1px solid hsl(var(--dark-panel-foreground) / .18);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-top: 2rem;
}

@media (max-width: 575.98px) { .site-mch-stats { grid-template-columns: 1fr; } }

.site-mch-stat { background: hsl(var(--dark-panel) / .55); padding: 1.125rem 1.25rem; }

.site-mch-stat-num { font-size: clamp(1.375rem, 3.2vw, 1.875rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }

.site-mch-stat-label { font-size: .8125rem; margin: .25rem 0 0; opacity: .72; }

.site-mch-stats-note { font-size: .75rem; margin: .625rem 0 0; opacity: .6; }

/* ---------- 麵包屑 ---------- */
.site-mch-crumb { border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--card)); }

.site-mch-crumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: .75rem 0;
    font-size: var(--al-type-caption); /*〔存查 f0101〕*/
    color: hsl(var(--muted-foreground));
}

.site-mch-crumb li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }

.site-mch-crumb a { color: inherit; text-decoration: none; }

.site-mch-crumb a:hover { color: hsl(var(--foreground)); }

.site-mch-crumb .site-mch-crumb-current { color: hsl(var(--foreground)); font-weight: 600; }

/*〔存查 f0102〕*/
.site-mch-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    background: hsl(var(--border));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    overflow: hidden;
}

@media (max-width: 991.98px) { .site-mch-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 575.98px) { .site-mch-flow { grid-template-columns: 1fr; } }

.site-mch-step {
    background: hsl(var(--card));
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    transition: background-color .15s ease;
}

.site-mch-step:hover { background: hsl(var(--accent)); }

.site-mch-step-no { font-size: .75rem; font-weight: 700; letter-spacing: .12em; color: hsl(var(--muted-foreground)); }

.site-mch-step-name { font-size: 1rem; font-weight: 700; margin: 0; }

.site-mch-step-desc { font-size: .8125rem; color: hsl(var(--muted-foreground)); margin: 0; }

.site-mch-note {
    margin: 1.25rem auto 0;
    max-width: 46rem;
    text-align: center;
    font-size: .875rem;
    color: hsl(var(--muted-foreground));
}

/*〔存查 f0103〕*/
.site-photo.site-mch-shot img { object-fit: contain; padding: .75rem; }


/* ==========================================================================================
   共用 UI 語彙
   圖示磚 / 支柱卡 / chip / 照片框。原 includes/_site_ui.blade.php。
   ========================================================================================== */

.site-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ==========================================================================================
   自動包裝機規格頁
   原 pages/machine.blade.php。
   ========================================================================================== */

.site-mch-shot--4x3 { aspect-ratio: 4 / 3; }

.site-mch-shot--3x4 { aspect-ratio: 3 / 4; }

.site-mch-shot--1x1 { aspect-ratio: 1 / 1; }

/*〔存查 f0104〕*/
.site-mch-shot--zoom img { transform: scale(1.15); }

/* ---------- 機型卡 ---------- */
.site-mch-badge {
    display: inline-flex;
    align-items: center;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .25rem .625rem;
    border-radius: 9999px;
    background: hsl(var(--primary) / .18);
    color: hsl(var(--foreground));
    align-self: flex-start;
}

.site-mch-price { display: flex; align-items: baseline; gap: .375rem; margin-top: auto; padding-top: .25rem; }

.site-mch-price-num { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }

.site-mch-price-unit { font-size: .8125rem; color: hsl(var(--muted-foreground)); }

/*〔存查 f0105〕*/
.site-mch-model-desc { flex-grow: 0; }

.site-mch-cardfoot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    margin-top: auto;
    padding-top: .25rem;
}

.site-mch-cardfoot .site-mch-price { margin-top: 0; padding-top: 0; }

/* 小卡：照片在左、文字在右。照片欄用固定寬度而不是百分比 ——
   百分比會讓照片跟著卡片寬度縮放，兩張小卡的機器就會一大一小。 */
.site-mch-mini { display: flex; gap: 1rem; }

.site-mch-mini-media { width: 122px; flex-shrink: 0; }

/* 小圖框只有 122px 寬，沿用大圖那份 .75rem 內距會吃掉五分之一的可視面積。
   特異度要 (0,3,1) 才蓋得過上面的 .site-photo.site-mch-shot img。 */
.site-photo.site-mch-shot.site-mch-mini-media img { padding: .375rem; }

.site-mch-mini-body { display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; min-width: 0; }

@media (max-width: 575.98px) { .site-mch-mini { flex-direction: column; } .site-mch-mini-media { width: 100%; max-width: 200px; } }

/*〔存查 f0106〕*/
.site-mch-table-wrap {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    overflow: auto;
}

.site-mch-table-wrap:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

.site-mch-table { width: 100%; min-width: 46rem; border-collapse: collapse; margin: 0; font-size: .875rem; }

.site-mch-table th, .site-mch-table td {
    padding: .875rem 1rem;
    border-bottom: 1px solid hsl(var(--border));
    vertical-align: top;
    text-align: left;
}

.site-mch-table tbody tr:last-child th,
.site-mch-table tbody tr:last-child td { border-bottom: 0; }

.site-mch-table thead th { background: hsl(var(--muted)); font-weight: 700; white-space: nowrap; }

/* 首欄釘住：水平捲動時「這一列在講什麼」不可以捲出畫面 */
.site-mch-table-rowhead {
    position: sticky;
    left: 0;
    background: hsl(var(--card));
    font-weight: 600;
    white-space: nowrap;
    color: hsl(var(--foreground));
}

.site-mch-table thead .site-mch-table-rowhead { background: hsl(var(--muted)); }

/* 滑過整列一起變色：選擇器同時涵蓋資料格與列名格。
   2026-08-26 追加列名格（th）。原本只選 td，而列名格是 th
   ⇒ 一列被切成兩段：右邊變色、最左邊維持原底色。
   ★ 為什麼不能把列名格的底色拿掉改成透明：那顆底色是釘住首欄的配套，
     橫向捲動時首欄疊在資料格上方，底色一透明下層內容就會透出來。
   ★ 為什麼不需要 !important：靠選擇器本身的特異度就贏得過那顆底色 ——
     本規則是 (0,2,3)〔1 個類別 ＋ 1 個 :hover ＋ 3 個元素〕，
     首欄底色那條是 (0,1,0)〔單一類別〕，同一份樣式表內前者勝出。
   ★ 用逗號串兩個選擇器而不是 :is()：本檔其餘規則一律是逗號串，
     且兩個選擇器共用同一個宣告區塊，不會產生重複的宣告。 */
.site-mch-table tbody tr:hover td,
.site-mch-table tbody tr:hover th { background: hsl(var(--accent)); }

.site-mch-table-lead { color: hsl(var(--muted-foreground)); }

.site-mch-table-na { color: hsl(var(--muted-foreground)); }

.site-mch-table-price { font-weight: 800; }

/* ---------- 購買保障（四格）----------
   沿用 _site_ui 的 .site-spec-grid（灰底上浮白色 hairline 面板），只把欄數換成 4。 */
/*〔存查 f0107〕*/
.site-spec-grid.site-mch-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 991.98px) { .site-spec-grid.site-mch-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 575.98px) { .site-spec-grid.site-mch-grid-4 { grid-template-columns: 1fr; } }


/* ==========================================================================================
   共用 UI 語彙
   圖示磚 / 支柱卡 / chip / 照片框。原 includes/_site_ui.blade.php。
   ========================================================================================== */

/* ---------- 灰底上的白色 hairline 面板 ----------
   線就是 gap：格子之間的 1px 縫隙讓底色透出來當分隔線
   因此換欄數（3 → 2 → 1）不用重算任何 border，也不會出現雙線或斷線。 */
.site-spec-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: hsl(var(--border));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    overflow: hidden;
}

@media (max-width: 991.98px) { .site-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 575.98px) { .site-spec-grid { grid-template-columns: 1fr; } }


/* ==========================================================================================
   示意圖：工作台
   原 includes/mockups/_m_workspace.blade.php。
   ========================================================================================== */

/* 窄螢幕：直軌改成橫向捲動的頁籤列，作用中的指示線從左邊移到下緣 */
@media (max-width: 575.98px) {
    .site-wsp { grid-template-columns: 1fr; }
    .site-wsp-rail {
        display: flex;
        gap: .25rem;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid hsl(var(--border));
    }
    .site-wsp-item { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
    .site-wsp-item--on { border-left-color: transparent; border-bottom-color: hsl(var(--primary)); }
}


/* ==========================================================================================
   示意圖：漏斗
   原 includes/mockups/_m_funnel.blade.php。
   ========================================================================================== */

@media (max-width: 575.98px) {
    .site-funnel { grid-template-columns: 1fr; }
    .site-funnel-join { display: none; }
}


/* ==========================================================================================
   自動包裝機規格頁
   原 pages/machine.blade.php。
   ========================================================================================== */

.site-mch-cell-title { font-size: .9375rem; font-weight: 700; margin: 0 0 .25rem; }

.site-mch-cell-desc { font-size: .875rem; color: hsl(var(--muted-foreground)); margin: 0; }

/*〔存查 f0108〕*/
.site-mch-stack-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .25rem; }

.site-mch-stack-kicker {
    display: block;
    font-size: var(--al-type-micro); /*〔存查 f0109〕*/
    font-weight: 700;
    letter-spacing: .12em;
    color: hsl(var(--muted-foreground));
    /* letter-spacing 會在最後一個字元右邊也加一份 → 等量負 margin 補回去 */
    margin-right: -.12em;
    margin-bottom: .125rem;
}

.site-mch-stack-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }

.site-mch-stack-list li { display: flex; align-items: flex-start; gap: .5rem; font-size: .9375rem; line-height: 1.6; }

.site-mch-stack-list [data-lucide], .site-mch-stack-list svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: .3125rem;
    color: hsl(var(--primary));
}

.site-mch-stack-foot {
    margin: .25rem 0 0;
    padding-top: .75rem;
    border-top: 1px solid hsl(var(--border));
    font-size: .8125rem;
    color: hsl(var(--muted-foreground));
}

/* 銜接說明：兩張卡講「各自做什麼」，這一條講「接點在哪」 */
.site-mch-bridge {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1.25rem 1.375rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    background: hsl(var(--muted) / .35);
}

.site-mch-bridge-text { margin: 0; font-size: .9375rem; line-height: 1.8; color: hsl(var(--muted-foreground)); }

.site-mch-bridge-text strong { color: hsl(var(--foreground)); }

/*〔存查 f0110〕*/
.site-mch-planband { margin-top: 2rem; }

.site-mch-planband .site-fintro { padding: 0; border-bottom: 0; }


/* ==========================================================================================
   功能頁導言區
   原 includes/_feature_intro.blade.php。
   ========================================================================================== */

.site-fintro { padding: 2.5rem 0; border-bottom: 1px solid hsl(var(--border)); }

@media (min-width: 992px) { .site-fintro { padding: 3.25rem 0; } }


/* ==========================================================================================
   自動包裝機規格頁
   原 pages/machine.blade.php。
   ========================================================================================== */

/* ---------- 搭配輸送帶 ---------- */
.site-mch-acc-group + .site-mch-acc-group { margin-top: 2.5rem; }

.site-mch-acc-group-title { display: flex; align-items: center; gap: .75rem; font-size: var(--al-type-heading); /*〔存查 f0111〕*/ font-weight: 700; margin: 0 0 1.25rem; }

.site-mch-acc-title { font-size: 1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.site-mch-acc-desc { font-size: .875rem; color: hsl(var(--muted-foreground)); margin: 0; }

.site-mch-acc-price { font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; margin-top: auto; }

.site-mch-acc-price span { font-size: .8125rem; font-weight: 500; color: hsl(var(--muted-foreground)); margin-left: .25rem; }

.site-mch-acc-note {
    margin: 2rem auto 0;
    max-width: 46rem;
    text-align: center;
    font-size: .8125rem;
    color: hsl(var(--muted-foreground));
}

/* ---------- 影片 ---------- */
.site-mch-video-frame {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: hsl(var(--dark-panel));
}

.site-mch-video-title { font-size: 1rem; font-weight: 600; text-align: center; margin: 1rem 0 0; }

/*〔存查 f0112〕*/
.site-mch-contact-media img {
    max-width: 148px;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid hsl(var(--border));
    background: hsl(var(--site-photo-surface));
}

.site-mch-contact-line { margin: 0; font-size: .9375rem; color: hsl(var(--muted-foreground)); }

.site-mch-contact-line strong { color: hsl(var(--foreground)); }


/*〔存查 f0113〕*/

/* ---------- 以下為條款頁專屬（site-legal- 前綴） ---------- */

/* 版心：長行讀不下去，所以鎖行寬；行高放寬到 1.85。 */
.site-legal-doc {
    max-width: 44rem;
    margin: 0 auto;
    font-size: 1rem;
}

.site-legal-doc p,
.site-legal-doc li {
    line-height: 1.85;
    overflow-wrap: anywhere;       /* 條款內含長網址，避免撐破版心 */
}

/* 章節目錄 */
.site-legal-toc {
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.375rem;
    margin-bottom: 2.75rem;
}

.site-legal-toc-title {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin: 0 0 .75rem -.0em;
    color: hsl(var(--muted-foreground));
}

.site-legal-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .25rem;
    counter-reset: sitelegal;
}

@media (min-width: 768px) { .site-legal-toc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.site-legal-toc-list li { counter-increment: sitelegal; }

.site-legal-toc-list a {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    font-size: .9375rem;
    line-height: 1.6;
    text-decoration: none;
    color: hsl(var(--muted-foreground));
    border-radius: var(--radius-md);
    padding: .25rem .5rem;
}

.site-legal-toc-list a::before {
    content: counter(sitelegal) ".";
    flex-shrink: 0;
    opacity: .6;
    font-variant-numeric: tabular-nums;
}

.site-legal-toc-list a:hover,
.site-legal-toc-list a:focus-visible {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

/* 章節 */
.site-legal-section + .site-legal-section { margin-top: 2.75rem; }

.site-legal-h2 {
    font-size: var(--al-type-title); /*〔存查 f0114〕*/
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 1.125rem;
    padding-bottom: .625rem;
    border-bottom: 1px solid hsl(var(--border));
}

.site-legal-h3 {
    font-size: var(--al-type-heading); /*〔存查 f0115〕*/
    font-weight: 700;
    margin: 1.75rem 0 .625rem;
}

.site-legal-h3:first-child { margin-top: 0; }

.site-legal-p { margin: 0 0 1.125rem; }

.site-legal-p:last-child { margin-bottom: 0; }

/* 導言與更新日期 */
.site-legal-lead {
    font-size: var(--al-type-subtitle); /*〔存查 f0116〕*/
    line-height: 1.9;
    color: hsl(var(--muted-foreground));
    margin: 0 0 1.5rem;
}

.site-legal-updated {
    display: inline-block;
    font-size: .875rem;
    color: hsl(var(--muted-foreground));
    background: hsl(var(--muted) / .6);
    border: 1px solid hsl(var(--border));
    border-radius: 9999px;
    padding: .1875rem .75rem;
    margin: 0 0 1.25rem;
}

/* 條列 */
.site-legal-list {
    list-style: none;
    margin: 0 0 1.125rem;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.site-legal-list li { position: relative; padding-left: 1.125rem; }

.site-legal-list li::before {
    content: "";
    position: absolute;
    left: .1875rem;
    top: .8em;
    width: 5px;
    height: 5px;
    border-radius: 9999px;
    background: hsl(var(--muted-foreground));
    opacity: .55;
}

/* 定義式小標（舊檔以「- 」開頭的那幾行） */
.site-legal-term {
    font-weight: 600;
    margin: 1.5rem 0 .375rem;
}

/* 資訊框（客服聯絡方式那類要一眼找得到） */
.site-legal-note {
    border: 1px solid hsl(var(--border));
    background: hsl(var(--muted) / .45);
    border-radius: var(--radius-lg);
    padding: 1rem 1.125rem;
    margin: 0 0 1.125rem;
}

.site-legal-note-line { margin: 0; }

.site-legal-note-line + .site-legal-note-line { margin-top: .25rem; }

/* 頁尾：其他條款與聯絡入口 */
.site-legal-related {
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid hsl(var(--border));
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.site-legal-related-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.site-legal-related-links a {
    font-size: .9375rem;
    text-decoration: none;
    color: hsl(var(--muted-foreground));
}

.site-legal-related-links a:hover,
.site-legal-related-links a:focus-visible { color: hsl(var(--foreground)); }


/* ==========================================================================================
   功能頁：訂單
   原 features/order.blade.php。
   ========================================================================================== */

/* =========================================================================
   以下是本頁**唯一新增**的 class（其餘全部沿用既有 .site-* 體系）
   ========================================================================= */

/*〔存查 f0117〕*/
.site-pain {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .8125rem;
    line-height: 1.6;
    color: hsl(var(--muted-foreground));
    background: hsl(var(--muted));
    border-radius: var(--radius-md);
    padding: .5rem .75rem;
    margin: 0;
}

.site-pain [data-lucide], .site-pain svg { width: 15px; height: 15px; margin-top: .125rem; flex-shrink: 0; }


/* ==========================================================================================
   功能頁：印單
   原 features/print.blade.php。
   ========================================================================================== */

/* 深底區塊：底色與「標題／.text-silver」的翻轉交給 §S-9 的 .bg-gray-800 與 §S-11，
   這裡只負責把 §S-11 管不到的自訂說明文字 class 接回 inherit（否則會吃到給白底用的灰）。
   本頁新增的 .site-step-desc 一併掛在這條上。 */
.bg-gray-800 .site-section-desc,
.bg-gray-800 .site-pillar-desc,
.bg-gray-800 .site-step-desc { color: inherit; opacity: .75; }

/* 首頁的 .site-chip 全部是 <span>（純標示），本頁有一顆是 <a>（連到首頁的撿包系統段落）。
   Bootstrap 的 a 預設帶底線，掛在 chip 上會變成「圓角框裡有一條底線」——
   這一條只是把它接回 chip 該有的外觀，不是另一種 chip。 */
a.site-chip { text-decoration: none; align-self: flex-start; }

a.site-chip:hover, a.site-chip:focus-visible { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

/* =========================================================================
   以下為本頁新增（首頁與主題都沒有的東西，理由逐條寫在各區塊上方）
   ========================================================================= */

/*〔存查 f0118〕*/
.site-compare { height: 100%; }

.site-compare .card-body { display: flex; flex-direction: column; gap: 1rem; }

.site-compare-head { display: flex; align-items: center; gap: .75rem; }

.site-compare-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .625rem; }

.site-compare-list li { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--al-type-body); /*〔存查 f0119〕*/ }

.site-compare-list [data-lucide], .site-compare-list svg { width: 17px; height: 17px; margin-top: .1875rem; flex-shrink: 0; }

.site-compare-before .site-compare-list [data-lucide],
.site-compare-before .site-compare-list svg { color: hsl(var(--muted-foreground)); }

.site-compare-after .site-compare-list [data-lucide],
.site-compare-after .site-compare-list svg { color: hsl(var(--primary)); }

/*〔存查 f0120〕*/
.site-step-num {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: hsl(var(--dark-panel-foreground) / .14);
    border: 1px solid hsl(var(--dark-panel-foreground) / .22);
    flex-shrink: 0;
}

.site-step-title { font-size: 1rem; font-weight: 700; margin: .875rem 0 .375rem; }

.site-step-desc { font-size: var(--al-type-body); /*〔存查 f0121〕*/ margin: 0; }

/*〔存查 f0122〕*/
.site-print-win {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    background: hsl(var(--card));
    box-shadow: var(--al-elev-scene); /*〔存查 f0123〕*/
    overflow: hidden;
}

.site-print-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem .875rem;
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--muted) / .6);
}

.site-print-dot { width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--border)); flex-shrink: 0; }

.site-print-title { font-size: .8125rem; font-weight: 600; margin-left: .25rem; }

.site-print-tag {
    margin-left: auto;
    font-size: .6875rem;
    color: hsl(var(--muted-foreground));
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    border-radius: 9999px;
    padding: .125rem .625rem;
    white-space: nowrap;
}

.site-print-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .75rem .875rem;
    border-bottom: 1px solid hsl(var(--border));
}

/* 假的欄位：刻意不是 <input>，避免使用者以為可以打字，也不會被瀏覽器自動填入 */
.site-print-field {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    color: hsl(var(--muted-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-md);
    padding: .3125rem .625rem;
    background: hsl(var(--background));
}

.site-print-field [data-lucide], .site-print-field svg { width: 14px; height: 14px; flex-shrink: 0; }

.site-print-btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-left: auto;
    font-size: .75rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    padding: .3125rem .75rem;
    border: 1px solid hsl(var(--primary));
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    white-space: nowrap;
}

.site-print-btn [data-lucide], .site-print-btn svg { width: 14px; height: 14px; }

.site-print-body { display: grid; grid-template-columns: 1fr; gap: .875rem; padding: .875rem; }

@media (min-width: 576px) { .site-print-body { grid-template-columns: 1.05fr .95fr; } }

.site-print-picks { display: grid; gap: .5rem; align-content: start; }

.site-print-pick {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-md);
    padding: .5rem .625rem;
    font-size: .75rem;
}

.site-print-pick [data-lucide], .site-print-pick svg { width: 15px; height: 15px; flex-shrink: 0; }

.site-print-pick--on { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .1); }

.site-print-pick-name { font-weight: 600; }

.site-print-pick-meta { margin-left: auto; color: hsl(var(--muted-foreground)); font-size: .6875rem; white-space: nowrap; }

/* 面單預覽：外框比例接近 10×15 直式標籤 */
.site-print-label {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-md);
    background: hsl(var(--background));
    padding: .625rem;
    display: grid;
    gap: .5rem;
    align-content: start;
}

.site-print-label-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .6875rem;
    font-weight: 700;
    border-bottom: 1px dashed hsl(var(--border));
    padding-bottom: .5rem;
}

.site-print-label-rows { display: grid; gap: .375rem; }

/* 個資欄位一律灰條佔位，不放任何假姓名／電話／地址 */
.site-print-redact { height: .5rem; border-radius: 9999px; background: hsl(var(--muted-foreground) / .22); }

.site-print-redact--sm { width: 55%; }

.site-print-redact--md { width: 78%; }

/* 條碼：純 CSS 漸層畫的，不是圖檔 */
.site-print-barcode {
    height: 36px;
    border-radius: 2px;
    background-image: repeating-linear-gradient(
        90deg,
        hsl(var(--foreground)) 0 2px,
        transparent 2px 4px,
        hsl(var(--foreground)) 4px 5px,
        transparent 5px 9px
    );
}

.site-print-label-no {
    font-size: .625rem;
    letter-spacing: .12em;
    margin-right: -.12em;          /* letter-spacing 尾字補正，同 .site-eyebrow-text */
    text-align: center;
    color: hsl(var(--muted-foreground));
}

.site-print-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .625rem .875rem;
    border-top: 1px solid hsl(var(--border));
    font-size: .6875rem;
    color: hsl(var(--muted-foreground));
}

.site-print-note {
    margin: .625rem 0 0;
    font-size: .6875rem;
    color: hsl(var(--muted-foreground));
    text-align: center;
}


/* ==========================================================================================
   功能頁：揀貨
   原 features/picking.blade.php。
   ========================================================================================== */

/* 深底區塊的說明文字：§S-11 只認 h1~h6 / .text-silver / .text-muted，
   本頁自訂的 .site-*-desc 它管不到 → 會落在給白底用的灰，對比不足。
   用 (0,2,0) 的後代選擇器接回 inherit。新增的 .site-flow-desc 一起接。 */
.bg-gray-800 .site-section-desc,
.bg-gray-800 .site-pillar-desc,
.bg-gray-800 .site-flow-desc { color: inherit; opacity: .75; }


/* ==========================================================================================
   首頁
   原 welcome_shadcn.blade.php。這一段是全站 site-* 版面的「母本」——其餘各頁的副本都是從這裡複製出去的。
   ========================================================================================== */

.site-pillar-desc { color: hsl(var(--muted-foreground)); font-size: .9375rem; margin: 0; flex-grow: 1; }


/* ==========================================================================================
   共用 UI 語彙
   圖示磚 / 支柱卡 / chip / 照片框。原 includes/_site_ui.blade.php。
   ========================================================================================== */

/*〔存查 f0124〕*/
.site-pillar--figured .site-pillar-desc { flex-grow: 0; }


/* ==========================================================================================
   功能頁：揀貨
   原 features/picking.blade.php。
   ========================================================================================== */

/*〔存查 f0125〕*/

/* =====================================================================
   ② 本頁新造的 class（既有的接不住，理由逐條寫在旁邊）
   ===================================================================== */

/*〔存查 f0126〕*/
.site-flow {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.75rem;
}

@media (min-width: 992px) {
    .site-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
}

.site-flow-step { position: relative; }

.site-flow-head { position: relative; margin-bottom: .875rem; }

/* 連接線：只在 lg 以上畫，從圓心右緣拉到下一步的圓。
   手機是單欄堆疊，橫線沒有意義，而豎線會穿過文字 → 直接不畫，改由「步驟 N」承擔順序。 */
@media (min-width: 992px) {
    .site-flow-step:not(:last-child) .site-flow-head::after {
        content: "";
        position: absolute;
        top: 21px;                    /* 圓（44px）的垂直中心 */
        left: 52px;                   /* 圓右緣 44px + 8px 留白 */
        right: -1.25rem;              /* 吃掉 grid gap，接到下一步 */
        height: 2px;
        border-radius: 1px;
        background: hsl(var(--border));
    }
}

.site-flow-index {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    margin-right: -.1em;              /* letter-spacing 尾巴補償，同 .site-eyebrow-text */
    color: hsl(var(--muted-foreground));
    text-transform: uppercase;
}

/*〔存查 f0127〕*/
.site-flow-title { font-size: 1rem; font-weight: 700; }

.site-flow-desc { color: hsl(var(--muted-foreground)); font-size: .875rem; line-height: 1.75; margin: 0; }

/* ---------- .site-scan-*：掃描核對畫面 ----------
   既有 mockup 只有「表格列表」一種內容，這裡要的是「掃描區 + 逐筆核對清單」，
   兩者的資訊結構不同（前者每列同權重，後者有「已核對 / 待核對」兩種狀態與進度）。 */
.site-scan-stage {
    margin: .875rem;
    border: 1px dashed hsl(var(--border));
    border-radius: var(--radius-lg);
    background: hsl(var(--muted) / .45);
    padding: 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* 條碼：純 CSS 條紋，不是圖檔。粗細不規則才像真的條碼。 */
.site-scan-code {
    height: 46px;
    border-radius: 2px;
    background:
        repeating-linear-gradient(90deg,
            hsl(var(--foreground)) 0 2px, transparent 2px 5px,
            hsl(var(--foreground)) 5px 9px, transparent 9px 11px,
            hsl(var(--foreground)) 11px 12px, transparent 12px 16px,
            hsl(var(--foreground)) 16px 19px, transparent 19px 23px);
    opacity: .8;
}

.site-scan-beam {
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 1rem;
    height: 2px;
    border-radius: 1px;
    background: hsl(var(--primary));
    box-shadow: 0 0 12px 2px hsl(var(--primary) / .65);
    animation: site-scan-sweep 2.4s ease-in-out infinite;
}

@keyframes site-scan-sweep {
    0%   { transform: translateY(0); opacity: .3; }
    50%  { transform: translateY(44px); opacity: 1; }
    100% { transform: translateY(0); opacity: .3; }
}

/* 會動的東西一律給退場路徑：關掉動畫後光束停在掃描區中間，畫面仍然讀得懂。 */
@media (prefers-reduced-motion: reduce) {
    .site-scan-beam { animation: none; transform: translateY(22px); opacity: .85; }
}

.site-scan-caption {
    margin: .625rem 0 0;
    font-size: .6875rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
}

.site-scan-list { list-style: none; padding: 0 .875rem .25rem; margin: 0; }

.site-scan-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem 0;
    border-bottom: 1px solid hsl(var(--border));
    font-size: .75rem;
}

.site-scan-item:last-child { border-bottom: 0; }

.site-scan-item [data-lucide], .site-scan-item svg { width: 15px; height: 15px; flex-shrink: 0; }

.site-scan-name { flex: 1 1 auto; min-width: 0; }

.site-scan-count { font-variant-numeric: tabular-nums; color: hsl(var(--muted-foreground)); white-space: nowrap; }

.site-scan-item--done { color: hsl(var(--success)); }

.site-scan-item--done .site-scan-name { color: hsl(var(--foreground)); }

.site-scan-item--wait { color: hsl(var(--muted-foreground)); }

/* ---------- .site-log-*：出貨紀錄時間軸 ----------
   .table 排不出這個東西：這裡要的是「時間戳記串成一條軸」，
   時間欄要對齊、每筆之間要有連續的軸線，表格列之間天生是斷開的。 */
.site-log-list { list-style: none; padding: .875rem; margin: 0; }

.site-log-item {
    position: relative;
    display: flex;
    gap: .75rem;
    padding-bottom: .875rem;
}

.site-log-item:last-child { padding-bottom: 0; }

.site-log-time {
    font-size: .6875rem;
    font-variant-numeric: tabular-nums;
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
    padding-top: .0625rem;
    flex: 0 0 auto;
}

.site-log-rail { position: relative; flex: 0 0 9px; }

.site-log-dot {
    position: absolute;
    top: .3125rem;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: hsl(var(--border));
}

.site-log-item--now .site-log-dot { background: hsl(var(--primary)); box-shadow: var(--al-ring-3) hsl(var(--primary) / .25); } /*〔存查 f0128〕*/

/* 軸線：從這一點連到下一點；最後一筆不畫 */
.site-log-item:not(:last-child) .site-log-rail::after {
    content: "";
    position: absolute;
    top: 1.0625rem;
    left: 4px;
    bottom: -.3125rem;
    width: 1px;
    background: hsl(var(--border));
}

.site-log-body { min-width: 0; }

.site-log-title { font-size: .75rem; font-weight: 600; }

.site-log-meta { font-size: .6875rem; color: hsl(var(--muted-foreground)); margin-top: .125rem; }


/* ==========================================================================================
   功能頁：發票
   原 features/invoice.blade.php。
   ========================================================================================== */

/*〔存查 f0129〕*/

/* ───────────────────────────────────────────────────────────
   ▲▲ 以上為照抄 ▲▲ ／ ▼▼ 以下為本頁新增 ▼▼
   ─────────────────────────────────────────────────────────── */

/*〔存查 f0130〕*/
.site-swap { height: 100%; }

.site-swap .card-body { display: flex; flex-direction: column; gap: 0; }

.site-swap-row { display: flex; align-items: flex-start; gap: .75rem; }

/* ★2026-08-26〔存查〕：目前 DOM 是 row → divider → row，兩個 row 中間永遠隔著
   .site-swap-divider，這條 + 選擇器實際上從未生效（相鄰兄弟選到的是 divider 不是
   下一個 row）。保留不刪，留給「以後拿掉 divider 直接兩個 row 相鄰」的情境；
   目前的間距治本在下面 .site-swap-divider 本身（margin 上下對稱），不依賴這條。 */
.site-swap-row + .site-swap-row { margin-top: .875rem; }

.site-swap-icon {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

.site-swap-icon [data-lucide], .site-swap-icon svg { width: 15px; height: 15px; }

.site-swap-icon--after { background: hsl(var(--primary) / .18); color: hsl(var(--foreground)); }

.site-swap-label {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin-right: -.08em;        /* letter-spacing 尾字補償，同 .site-eyebrow-text */
    color: hsl(var(--muted-foreground));
    display: block;
    margin-bottom: .125rem;
}

.site-swap-text { font-size: .9375rem; margin: 0; color: hsl(var(--muted-foreground)); }

.site-swap-text--after { color: hsl(var(--foreground)); font-weight: 600; }

/* 兩列之間的分隔：用細線而不是箭頭符號，箭頭留給 .site-flow 專用，
   兩種都用會讓「對照」與「流程」看起來是同一件事。
   ★2026-08-26：原值 margin: .875rem 0 0（只有上邊距、下邊距 0）造成虛線與
   下方「現在」列距離 0px，跟虛線與上方「以前」列的 .875rem 不對稱（業主回報
   「跟上方虛線距離不夠」）。父層 .card-body 是 flex column + gap:0，
   flex 子項的 margin 不會 collapse，直接影響最終間距。改成上下對稱各 .875rem，
   由 divider 自己完整負責兩側留白，不依賴 .site-swap-row + .site-swap-row
   那條在目前 DOM 下並不會生效的規則。 */
.site-swap-divider { border-top: 1px dashed hsl(var(--border)); margin: .875rem 0; }

/* ★2026-08-26 業主：「你這邊卡片的排版應該三張的中心線要對齊 高度一致才會好看」
   ▍實測（1440px，改動前）：三張卡 height 全部 167.5px ——【卡片本來就等高】。
     不齊的是中間那條虛線：距卡頂 94.5 / 72 / 94.5px，差 22.5px 剛好是一行。
     真因是「以前」那一列的行數不同（卡①③兩行、卡②一行），而 .card-body 是
     flex column ⇒ 虛線位置 = padding + 以前列高 + margin，以前列一長，虛線就往下掉。
     ⇒ 治法是讓三張卡的「以前」列共用同一個高度，
       ⛔ 不是給卡片加高度（卡片已經齊了，加高度是在修一個沒壞的東西）。

   ▍為什麼用 subgrid，而不是給「以前」列一個 min-height：
     實測 1024px 時分岔的是【現在】那一列（列高 63.5 / 41 / 63.5），
     而【以前】列在該寬度三張反而一樣 ⇒「哪一列會分岔」是隨視窗寬度變的，
     不是固定在「以前」那一列。
     ① min-height 是綁死在「兩行」的魔術數字，同時綁著字級、行高、視窗寬度、文案
        四件事，任何一項被改就靜默失準（例如文案變三行，又不齊了）。
     ② 三張卡接進同一個 grid、逐層 subgrid，列軌道高度 = 三張卡取最大值，
        沒有任何數字要維護，文案幾行都對得齊。
     ★★ 各張卡自己開自己的 grid 是不會互相對齊的 —— 跨卡片對齊一定要來自
        共同祖先的同一組軌道，所以 row → col → card → card-body 四層都得接上，
        中間斷掉任何一層就失效。

   ▍作用範圍刻意收窄，讓「改壞」的面積趨近於零：
     - @media (min-width: 992px)：與 .col-lg-4 自己的斷點一致。未達此寬度三張卡各自
       堆成一列，「對齊」本來就不適用 ⇒ 整段不套用，維持 Bootstrap 原本的 flex。
     - @supports (grid-template-rows: subgrid)：不支援 subgrid 的瀏覽器整段跳過，
       退回改動前的樣子（虛線不齊，但版面完好），不會壞掉。
     - .site-swap-grid 是為了這次對齊而新增的 class，只掛在本頁那一個 .row 上。 */
@media (min-width: 992px) {
    @supports (grid-template-rows: subgrid) {

        /* 第 1 層：把 Bootstrap 的 .row（flex）換成 grid，三個列軌道 = 以前／虛線／現在。
           橫向間距改由 column-gap 提供，值就是 .g-lg-4 設定的 --bs-gutter-x（1.5rem），
           所以下面要把 .row > * 的左右 padding 與 .row 的負左右 margin 一起歸零 ——
           兩者相加原本就等於零，改完卡片左右邊界仍落在與改動前完全相同的位置。
           row-gap 必須顯式歸零：--bs-gutter-y 在 lg 是 1.5rem，若讓它變成列間距，
           三個軌道之間會被塞進 24px。 */
        .site-swap-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: auto auto auto;
            column-gap: var(--bs-gutter-x);
            row-gap: 0;
            margin: 0;
        }

        /* 第 2～4 層：逐層把父層那三個列軌道往下接。
           subgrid 的軌道線與父層對齊，各層自己的 border / padding 會從首尾軌道扣掉；
           三張卡的 border（1px）與 .card-body padding（16px）完全相同 ⇒ 扣掉的量一樣，
           對齊不受影響。 */
        .site-swap-grid > .col-lg-4,
        .site-swap-grid .site-swap,
        .site-swap-grid .site-swap .card-body {
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 3;
            row-gap: 0;
        }

        /* .col-lg-4 原本的寬度與 gutter padding 交給 grid 接手（見第 1 層的說明）。 */
        .site-swap-grid > .col-lg-4 {
            width: auto;
            max-width: none;
            padding-left: 0;
            padding-right: 0;
            margin-top: 0;
        }
    }
}

/*〔存查 f0131〕*/
.site-flow-node { display: flex; align-items: center; gap: .625rem; }

.site-flow-node [data-lucide], .site-flow-node svg { width: 20px; height: 20px; flex-shrink: 0; }

.site-flow-label {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin-right: -.08em;
    opacity: .7;
}

.site-flow-arrow {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .875rem 0;
    font-size: .75rem;
    font-weight: 600;
    opacity: .7;
}

.site-flow-arrow::before,
.site-flow-arrow::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px dashed currentColor;
    opacity: .5;
}

.site-flow-arrow [data-lucide], .site-flow-arrow svg { width: 16px; height: 16px; }

.site-flow-result { font-size: .9375rem; line-height: 1.7; margin: .5rem 0 0; opacity: .85; }

/*〔存查 f0132〕*/
.site-kv { padding: .25rem .25rem .5rem; }

.site-kv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .625rem .625rem;
    font-size: .8125rem;
}

.site-kv-row + .site-kv-row { border-top: 1px solid hsl(var(--border)); }

.site-kv-key { color: hsl(var(--muted-foreground)); }

.site-kv-val { font-weight: 600; text-align: right; }


/* ==========================================================================================
   功能頁：自動包裝機
   原 features/packing-machine.blade.php。
   ========================================================================================== */

/*〔存查 f0133〕*/

/* ---------- hero ---------- */
.site-pm-hero {
    position: relative;
    overflow: hidden;
    /*〔存查 f0134〕*/
    padding: 3rem 0 3.5rem;
    background: hsl(var(--muted) / .45);
    border-bottom: 1px solid hsl(var(--border));
}

/*〔存查 f0135〕*/
@media (min-width: 992px) { .site-pm-hero { padding: 4.5rem 0 5rem; } }

/* 品牌黃只做一層很淡的光暈（重點色用在 CTA 上，不是整片底）。與首頁 hero 同手法。 */
.site-pm-hero::before {
    content: "";
    position: absolute;
    top: -30%;
    left: -10%;
    width: 55%;
    height: 130%;
    background: radial-gradient(closest-side, hsl(var(--primary) / .22), transparent);
    pointer-events: none;
}

.site-pm-hero > .container { position: relative; }

.site-pm-title {
    font-size: clamp(1.875rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 0;
}

.site-pm-lead {
    font-size: var(--al-type-subtitle); /*〔存查 f0136〕*/
    line-height: 1.75;
    color: hsl(var(--muted-foreground));
    max-width: 34rem;
}

.site-pm-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- 媒體外框（banner 與影片共用同一顆） ----------
   banner 與 YouTube 用同一個外框，兩者在頁面上才會是同一種「物件」。
     影片那顆額外要 overflow:hidden 才切得到圓角（iframe 是 replaced element）。 */
.site-pm-frame {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    background: hsl(var(--card));
    box-shadow: var(--al-elev-scene); /*〔存查 f0137〕*/
    overflow: hidden;
    padding: .75rem;
}

.site-pm-frame-flush { padding: 0; }

/* 影片要滿框，不留內距 */
.site-pm-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

/* 深底區塊裡的外框：白卡底會變成一塊突兀的白 → 改吃深面板的半透明白。 */
/*〔存查 f0138〕*/
.bg-gray-800 .site-pm-frame {
    background: hsl(var(--dark-panel-foreground) / .07);
    border-color: hsl(var(--dark-panel-foreground) / .16);
    box-shadow: none;
}

/* ---------- 效率數據 ----------
   數字獨立成一層、不塞在段落裡：kicker（單型）/ 數字 / 單位 三層，
     三格共用同一條基線，掃一眼就能比大小。 */
.site-pm-stat { text-align: center; padding: .25rem 0; }

.site-pm-stat-kicker {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    margin-right: -.08em;         /* letter-spacing 的尾巴補回來，同 .site-eyebrow-text */
    margin-bottom: .5rem;
    padding: .125rem .625rem;
    border-radius: 9999px;
    border: 1px solid hsl(var(--dark-panel-foreground) / .28);
}

.site-pm-stat-num {
    font-size: clamp(2rem, 5.5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;   /* 數字等寬 → 三格不會左右跳動 */
    white-space: nowrap;
}

.site-pm-stat-unit { font-size: .5em; font-weight: 700; margin-left: .125rem; }

.site-pm-stat-label { font-size: .875rem; margin-top: .375rem; opacity: .75; }

/* 三格之間的分隔線：手機是上下堆疊 → 分隔線也要跟著轉向。 */
@media (min-width: 768px) {
    .site-pm-stat-col + .site-pm-stat-col { border-left: 1px solid hsl(var(--dark-panel-foreground) / .16); }
}

/* ---------- 工序流程 ----------
   四道工序用等寬格子而不是時間軸：時間軸會暗示「要等」，
     這裡要傳達的是「同一台機器上連續完成」。 */
.site-pm-flow { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 992px) { .site-pm-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }

/*〔存查 f0139〕*/
@media (max-width: 575.98px) { .site-pm-flow { grid-template-columns: 1fr; } }

.site-pm-step {
    position: relative;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    background: hsl(var(--card));
    padding: 1.25rem 1rem;
    height: 100%;
    text-align: center;
}

.site-pm-step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    font-size: .6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-bottom: .625rem;
}

.site-pm-step-title { font-size: 1rem; font-weight: 700; margin: .625rem 0 0; }

/* 桌機才畫箭頭：手機是 2×2 網格，橫向箭頭會指到錯的格子。
   用 ::after 畫在格子外側，不佔版面寬度。 */
@media (min-width: 992px) {
    .site-pm-step::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -.625rem;
        width: .375rem;
        height: .375rem;
        border-top: 1px solid hsl(var(--border));
        border-right: 1px solid hsl(var(--border));
        transform: translateY(-50%) rotate(45deg);
    }
    .site-pm-flow > *:last-child .site-pm-step::after { content: none; }
}

.site-pm-flow-end {
    margin: 1.25rem 0 0;
    text-align: center;
    font-weight: 700;
}

/*〔存查 f0140〕*/
.site-pm-compare { display: grid; gap: 1.25rem; }

@media (min-width: 992px) { .site-pm-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.site-pm-machine { height: 100%; }

.site-pm-machine .card-body { display: flex; flex-direction: column; gap: 1rem; }

.site-pm-machine-head { display: flex; align-items: center; gap: .875rem; }

.site-pm-spec { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }

.site-pm-spec li {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: .75rem;
    align-items: baseline;
    padding: .625rem 0;
    border-top: 1px solid hsl(var(--border));
    font-size: .9375rem;
}

.site-pm-spec li:first-child { border-top: 0; }

.site-pm-spec-key { color: hsl(var(--muted-foreground)); font-size: .8125rem; }

.site-pm-spec-val { font-weight: 600; }

/* ---------- 深底區塊裡的自訂文字 ----------
   §S-11 只認 h1~h6 / .text-silver / .text-muted，管不到本頁自訂的 class，
   不接回 inherit 會拿到給白底用的灰。 */
.bg-gray-800 .site-pm-lead,
.bg-gray-800 .site-pm-spec-key,
.bg-gray-800 .site-note { color: inherit; opacity: .75; }

.bg-gray-800 .site-pm-step {
    background: hsl(var(--dark-panel-foreground) / .07);
    border-color: hsl(var(--dark-panel-foreground) / .16);
}


/* ==========================================================================================
   註冊頁補充
   原 auth/register.blade.php。
   ========================================================================================== */

/* popover 觸發圖示 —— 值沿用舊版（cursor + hover 變色），顏色改走 token */
.site-auth .fa-question-circle { cursor: pointer; transition: color .15s ease; }

.site-auth .fa-question-circle:hover { color: hsl(var(--primary)); }

/* 「未成立公司」那顆尾綴在窄螢幕會把輸入框壓到剩幾個字 → 換行成整列 */
@media (max-width: 575.98px) {
    .site-auth-note-suffix { flex: 1 0 100%; border-radius: 0 0 var(--radius) var(--radius) !important; }
}

/* ---------- 個資法同意勾選 ----------
   顏色一律走 token（--foreground / --primary / --destructive），不寫死色碼。
   .form-check-input 本身已由 shadcn-theme.css 統一上色，這裡只處理版面。 */
.site-auth-agree { margin-bottom: 1.375rem; }

.site-auth-agree-check {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding-left: 0;          /* 覆蓋 Bootstrap .form-check 的 1.5em 縮排（改用 flex 排版） */
    margin-bottom: 0;
    cursor: pointer;
}

.site-auth-agree-check .form-check-input {
    float: none;              /* 同上：.form-check-input 出廠是 float:left + 負 margin */
    margin: .1875rem 0 0;
    flex: 0 0 auto;
    cursor: pointer;
}

.site-auth-agree-check .form-check-label {
    font-size: .875rem;
    line-height: 1.6;
    cursor: pointer;
}

.site-auth-agree a {
    color: hsl(var(--foreground));
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-auth-agree a:hover { color: hsl(var(--primary)); }

/* 錯誤插槽：預設不佔位，showAgreeError() 加上 .is-shown 才出現 */
.site-auth-agree-error {
    display: none;
    margin-top: .4375rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: hsl(var(--destructive));
}

.site-auth-agree-error.is-shown { display: block; }

.site-auth-agree .form-check-input.is-invalid { border-color: hsl(var(--destructive)); }


/* ==========================================================================================
   查詢頁補充
   原 auth/lookup.blade.php。
   ========================================================================================== */

/* 查詢方式的兩顆 radio —— 做成可點的整塊，觸控目標比裸 radio 大得多 */
.site-auth-choices { display: flex; flex-wrap: wrap; gap: .75rem; }

.site-auth-choice {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 10rem;
    margin: 0;
    padding: .625rem .875rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.site-auth-choice:hover { background: hsl(var(--accent)); }

.site-auth-choice:has(.form-check-input:checked) {
    border-color: hsl(var(--foreground) / .35);
    background: hsl(var(--accent));
}

.site-auth-choice:has(.form-check-input:focus-visible) {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.site-auth-choice .form-check-input { margin: 0; flex: 0 0 auto; }

.site-auth-choice-text {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .9375rem;
    font-weight: 500;
}

/* 查詢結果卡 —— alert 走主題 token，內部連結不要撞到 alert 自己的配色 */
.site-auth #lookup-result .alert { border-radius: var(--radius-lg); }

.site-auth #lookup-result .alert-heading { font-size: 1.0625rem; font-weight: 700; }


/* ==========================================================================================
   footer 聯絡三欄
   原 includes/_footer_contact.blade.php 的 body inline style。
   ========================================================================================== */

/*〔存查 f0141〕*/

/*〔存查 f0142〕*/

/* 卡內文字色：把 §S-11 的深底翻色轉回來（理由見下方 .site-footer-col 的說明）。
   只作用在 .site-footer-col 之內，footer 其餘部分（品牌區、政策連結）不受影響。 */
.site-footer-col h2,
.site-footer-col h3,
.site-footer-col .h5,
.site-footer-col .h6 { color: hsl(var(--foreground)) !important; }

.site-footer-col,
.site-footer-col p,
.site-footer-col li,
.site-footer-col span { color: hsl(var(--foreground)); }

.site-footer-col .text-silver,
.site-footer-col .text-muted { color: hsl(var(--muted-foreground)) !important; }

.site-footer-col a { color: hsl(var(--foreground)); }

.site-footer-col a:hover,
.site-footer-col a:focus-visible { color: hsl(var(--foreground)) !important; text-decoration: underline; }

/* 卡片內的圖示磚回到亮底版本（-ondark 那顆是給深底用的，在白卡上會變成一塊淺灰） */
.site-footer-col .site-footer-tile {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
}

/* QR 與 logo 的白色承載盒在白卡上已無作用，收掉它的邊界感 */
.site-footer-col .site-footer-media { background: transparent; padding: 0; }

/* 聯絡區與既有品牌區之間的分隔：hairline，不是實線塊。
   用恆亮前景的低 alpha，深底上剛好可見，且不必知道底色是什麼。 */
/*〔存查 f0143〕*/
.site-footer-sep {
    border: 0;
    border-top: 1px solid hsl(var(--dark-panel-foreground) / .15);
    opacity: 1;
}

/* 每一欄：直向堆疊、水平置中。
   height:100% + margin-top:auto（在 .site-footer-cta 上），因此三欄的行動連結
   會對齊到同一條底線，不必量任何像素。 */
/*〔存查 f0144〕*/
.site-footer-col {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    padding: 1.75rem 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

/* ---------- 圖示磚（深底專用）----------
   盒子的值與各頁 .site-icon-tile 同規格（44px / --radius-lg / 置中），
   底色採 _site_ui.blade.php 的 .site-icon-tile-ondark 語彙。 */
.site-footer-tile {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: hsl(var(--dark-panel-foreground) / .10);
    color: inherit;
    margin-bottom: .75rem;
}

.site-footer-tile [data-lucide],
.site-footer-tile svg { width: 22px; height: 22px; }

/* ---------- 標題與說明 ---------- */
.site-footer-ctitle {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    letter-spacing: .01em;
}

.site-footer-org { font-weight: 700; font-size: var(--al-type-caption); /*〔存查 f0145〕*/ margin-bottom: .75rem; }

.site-footer-note { font-size: .875rem; margin-bottom: .5rem; }

/*〔存查 f0146〕*/
.site-footer-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    gap: .4375rem;
    width: 100%;
}

.site-footer-list li {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .5rem;
    font-size: .875rem;
    line-height: 1.6;
}

.site-footer-ico {
    width: 15px;
    height: 15px;
    margin-top: .21875rem;   /* 與第一行文字的視覺基線對齊 */
    flex-shrink: 0;
    opacity: .65;
}

/* 可點的那幾行：平時就是文字，hover 才給回饋（電話是「動作」不是「導覽」）。
   不寫顏色，直接繼承 §S-9 給的 --dark-panel-foreground。 */
.site-footer-link { color: inherit; text-decoration: none; }

.site-footer-link:hover,
.site-footer-link:focus-visible { color: inherit; text-decoration: underline; }

/* LINE ID：放大 + 可整串選取（很多人是用手機看、自己輸入 ID 加好友） */
.site-footer-id {
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    user-select: all;
}

/*〔存查 f0147〕*/
.site-footer-media {
    display: block;
    width: 100%;
    max-width: 124px;             /* footer 每頁都在，因此給上限，不放原尺寸
                                     （QR 原圖 213px／360px，放原尺寸會多吃一倍高度） */
    margin-inline: auto;          /* block 元素置中靠這行，不是 text-align */
    margin-bottom: .75rem;
    padding: .375rem;
    border-radius: var(--radius-lg);
    background: hsl(var(--site-photo-surface, 0 0% 100%));
    line-height: 0;               /* 去掉 inline 圖片底下那條基線空隙 */
}

.site-footer-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* 熊貓 logo 是**直式**素材（811×955），同樣寬度下它比方形 QR 高 18%。
   它又不需要被掃描，因此收到 96px，讓公司欄的總高與兩張 LINE 卡拉平，
   整個 footer 的高度才由「最矮的那個上限」決定而不是最高的。 */
.site-footer-media--logo { max-width: 96px; padding: .5rem; }

/* 公司欄沒有行動連結（logo 本身就是那個連結），因此由它自己吃掉剩餘高度，
   三欄的最後一個元素才會落在同一條底線上。 */
.site-footer-media--bottom { margin-top: auto; }

/* ---------- 行動連結 ---------- */
.site-footer-cta {
    margin-top: auto;             /* 三欄底部對齊 */
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: var(--al-type-caption); /*〔存查 f0148〕*/
    font-weight: 600;
    text-decoration: none;
    color: inherit;
}

.site-footer-cta:hover,
.site-footer-cta:focus-visible { color: inherit; text-decoration: underline; }

.site-footer-cta [data-lucide],
.site-footer-cta svg { width: 14px; height: 14px; }

/* ---------- 手機 ----------
   單欄時三張 QR 上下排會把 footer 拉得很長，因此縮一階並收窄欄間距。 */
@media (max-width: 575.98px) {
    .site-footer-media { max-width: 112px; }
    .site-footer-media--logo { max-width: 88px; }
    /*〔存查 f0149〕*/
}


/*〔存查 f0150〕*/

/*〔存查 f0151〕*/

/* 區塊上下內距（上一版 2.25rem / 3.25rem；再上一版 3.5rem / 5rem） */
/* ⚠ 死碼：已被 L4460 那段取代（**第三代**）。改值請改那裡。 */
.site-section { padding: 3rem 0; }

/* ⚠ 死碼：已被 L4464 那段取代（**第三代**）。改值請改那裡。 */
@media (min-width: 992px) { .site-section { padding: 4.5rem 0; } }

/* 區塊標題與內容之間（上一版 1.75rem；再上一版 2.5rem）
   這一格是節奏的關鍵：它必須明顯小於區塊間距、又明顯大於段落間距，
     三者拉不開的話「換區塊」與「換段落」在視覺上會是同一件事。 */
.site-section-head { margin-bottom: 2.5rem; }

/*〔存查 f0152〕*/
/* ⚠ 部分死碼：>=992 時 padding-top 會被 L4608 的 `.site-hero:not(.site-section)` (0,2,0) 蓋成 4rem。
   本行在 <992 仍然生效（2.5rem 0 3rem）。 */
.site-hero { padding: 2.5rem 0 3rem; }

/*〔存查 f0153〕*/
@media (min-width: 992px) { .site-hero { padding: 3.5rem 0 4rem; } }

/*〔存查 f0154〕*/

/*〔存查 f0155〕*/
/*〔存查 f0156〕*/
.site-mch-hero { padding: 2.5rem 0 3rem; }

/*〔存查 f0157〕*/
/*〔存查 f0158〕*/
.site-pm-hero { padding: 2.5rem 0 3rem; }

@media (min-width: 992px) {
    /*〔存查 f0159〕*/
    /*〔存查 f0160〕*/
    .site-mch-hero { padding: 3.5rem 0 4rem; }

    /*〔存查 f0161〕*/
    /*〔存查 f0162〕*/
    .site-pm-hero { padding: 3.5rem 0 4rem; }
}

/* 深色行動盒與收尾區塊（上一版 1.75rem / 2.25rem 2.5rem） */
.site-action-box { padding: 2rem; }

@media (min-width: 992px) { .site-action-box { padding: 2.75rem 3rem; } }

/* footer 兩帶（上一版 2.25rem / 1.5rem 0 1.25rem） */
/*〔存查 f0163〕*/
.site-footer-contact-band { padding-top: 2.75rem; }

.site-footer-brand-band { padding: 1.75rem 0 1.5rem; }

/* ═══ 字級 ═══
   只動字級與行高，不碰顏色、字重、字距（與上一版相同的邊界）。 */

/* 頁面主標（上一版 clamp(1.625rem, 3.6vw, 2.5rem)；再上一版上限 3rem） */
.site-hero-title { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }

/*〔存查 f0164〕*/
.site-mch-h1 { font-size: clamp(1.875rem, 4.5vw, 3rem); }

/* 區塊標題（上一版 clamp(1.375rem, 2.4vw, 1.75rem)；再上一版 2.25rem） */
/* ㉑批1存查（原文未刪）：.site-section-title { font-size: clamp(1.375rem, 2.4vw, 1.875rem); } ← 由 L4380＋檔尾㉑階梯接手 */

/* 導言（上一版 .9375rem / 1.7） */
.site-hero-lead { font-size: var(--al-type-subtitle); /*〔存查 f0165〕*/ line-height: 1.75; }

/* 區塊副標與正文（上一版 .9375rem / 1.7）
   中文行高比英文需要更多：1.8 是中文長段落的下限，低於它會黏在一起。 */
.site-section-desc { font-size: var(--al-type-body); /*〔存查 f0166〕*/ line-height: 1.8; }

/* 卡片標題與內文（上一版 1rem / .875rem 1.7） */
.site-pillar-title { font-size: var(--al-type-heading); } /*〔存查 f0167〕*/

.site-pillar-desc { font-size: var(--al-type-body); /*〔存查 f0168〕*/ line-height: 1.8; }

.site-service-title { font-size: 1rem; }

.site-service-desc { font-size: .875rem; line-height: 1.75; }

/* 註腳與法律聲明（上一版 .75rem / 1.6）
   12px 在中文是可讀性的臨界值，抬到 13px。 */
.site-note, .site-legal { font-size: var(--al-type-caption); /*〔存查 f0169〕*/ line-height: 1.65; }

/*〔存查 f0170〕*/
#lookup-icon .lookup-icon-phone { display: none; }
#lookup-icon.is-phone .lookup-icon-email { display: none; }
#lookup-icon.is-phone .lookup-icon-phone { display: inline-block; }

/*〔存查 f0171〕*/

/*〔存查 f0172〕*/
.site-hero-title { font-size: clamp(1.875rem, 4.5vw, 3rem); }

/*〔存查 f0173〕*/
.site-section-title { font-size: var(--al-type-title); } /* ㉒SSOT：改引用角色層，響應式住進 token；原引用存查：var(--al-text-2xl) */ /*〔存查 f0174〕*/

/*〔存查 f0175〕*/
.site-milestone-num { font-size: var(--al-type-stat); } /*〔存查 f0176〕*/

/*〔存查 f0177〕*/
.site-section { padding: 4rem 0; }

@media (min-width: 768px)  { .site-section { padding: 5.5rem 0; } }

@media (min-width: 992px)  { .site-section { padding: 7rem 0; } }

@media (min-width: 1400px) { .site-section { padding: 8rem 0; } }

/*〔存查 f0178〕*/
@media (max-width: 575.98px) { .site-section { padding: 3rem 0; } }

/*〔存查 f0179〕*/
.site-section-head { max-width: 42rem; margin-bottom: var(--al-head-gap); }

/* 原本此處另有一條 min-width:992 的覆寫，值已收進檔尾的 --al-head-gap
   （同值搬遷，算繪不變）。 */

/*〔存查 f0180〕*/
.site-hero-title,
.site-section-title { text-wrap: initial; /*〔存查 f0181〕*/ }

/*〔存查 f0182〕*/
.site-band { padding: 2.5rem 0; }

@media (min-width: 992px) { .site-band { padding: 3.5rem 0; } }

/*〔存查 f0183〕*/

/*〔存查 f0184〕*/
@media (min-width: 992px) {
    .site-hero:not(.site-section),
    .site-mch-hero:not(.site-section),
    .site-pm-hero:not(.site-section) { padding-top: 4rem; }
}

/*〔存查 f0185〕*/
/*〔存查 f0186〕*/
@media (min-width: 768px) {
    .site-onboard .site-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .site-onboard .site-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.site-onboard .site-flow-title { margin: .125rem 0 .375rem; }

/*〔存查 f0187〕*/
.site-voice {
    position: relative;
    height: 100%;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    padding: 2.75rem 1.5rem 1.75rem;
    text-align: center;
}

/* 佔位狀態：虛線 + 去掉卡片底色，讓它明顯不是完成品 */
.site-voice--placeholder {
    border-style: dashed;
    border-color: hsl(var(--border));
    background: transparent;
}

/* 圓形頭像，壓在卡片上緣（參考站與絕大多數見證卡的共同慣例） */
.site-voice-avatar {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    border: 1px solid hsl(var(--border));
    flex-shrink: 0;
}

/* 佔位頭像也用虛線，與卡片一致 */
.site-voice--placeholder .site-voice-avatar { border-style: dashed; }

.site-voice-avatar [data-lucide], .site-voice-avatar svg { width: 24px; height: 24px; }

.site-voice-quote {
    font-size: var(--al-type-body); /*〔存查 f0188〕*/
    line-height: 1.8;
    color: hsl(var(--muted-foreground));
    margin: 0 0 1.25rem;
}

.site-voice-name { font-weight: 700; display: block; }

.site-voice-role { font-size: .8125rem; color: hsl(var(--muted-foreground)); display: block; }

/*〔存查 f0189〕*/

/*〔存查 f0190〕*/
/*〔存查 f0191〕*/
.site-statband {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem;
}

.site-statband > * {
    padding-left: .75rem;
    padding-right: .75rem;
}

/* 單欄：不可以有 border-left（左右沒有鄰居）。除第一格外一律畫上線。 */
.site-statband > :not(:first-child) {
    border-top: 1px solid hsl(var(--dark-panel-foreground) / .16);
    padding-top: 1.5rem;
}

/*〔存查 f0192〕*/
@media (min-width: 576px) {
    .site-statband { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .site-statband > :nth-child(2n) {
        border-left: 1px solid hsl(var(--dark-panel-foreground) / .16);
    }

    .site-statband > :nth-child(2) {
        border-top: 0;
        padding-top: .5rem;
    }
}

/*〔存查 f0193〕*/
@media (min-width: 992px) {
    .site-statband { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .site-statband > :not(:first-child) {
        border-left: 1px solid hsl(var(--dark-panel-foreground) / .16);
    }

    .site-statband > :nth-child(n+3) {
        border-top: 0;
        padding-top: .5rem;
    }
}

/*〔存查 f0194〕*/
.site-statband > * {
    container-type: inline-size;
}

.site-statband .site-milestone-num {
    font-size: clamp(1.875rem, 2.6vw, 2.875rem);
    font-size: min(clamp(2rem, 4vw, 3rem), 14.5cqw);
}

/*〔存查 f0195〕*/
.site-splithead { text-align: left; }

.site-splithead .site-section-title { margin-bottom: 1rem; }

.site-splithead .site-section-desc { margin-bottom: 0; }

/*〔存查 f0196〕*/
@media (min-width: 992px) {
    .site-splithead--sticky {
        position: sticky;
        top: 6rem;
    }
}

/*〔存查 f0197〕*/
.site-device {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 60rem;
    margin-inline: auto;
}

/*〔存查 f0198〕*/
.site-device > .site-mockup {
    order: 1;
    width: 94%;
    border: .625rem solid hsl(var(--foreground) / .85);
    border-bottom-width: .75rem;
    border-radius: calc(var(--radius) + .375rem);
}

/* 底座：一條與螢幕同色系、略深的橫條 ＋ 中央的拇指凹槽（::after）。 */
.site-device > .site-device-base {
    order: 2;
    position: relative;
    width: 100%;
    height: .8125rem;
    background: hsl(var(--foreground) / .78);
    border-radius: 0 0 calc(var(--radius) * .8) calc(var(--radius) * .8);
    box-shadow: var(--al-elev-scene); /*〔存查 f0199〕*/
}

.site-device > .site-device-base::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6rem;
    height: .3125rem;
    background: hsl(var(--foreground) / .55);
    border-radius: 0 0 .3125rem .3125rem;
}

/* 「＊此為系統畫面示意」那行：order:3 讓它留在整台筆電**外面**（見上方說明）。 */
.site-device > .site-mockup-note {
    order: 3;
    margin-top: .75rem;
}

/* 窄螢幕把機殼收薄：390px 下 .625rem×2 的邊框會吃掉表格本來就不夠的寬度。
   底座同時收薄，維持「底座比螢幕厚一點」的比例。 */
@media (max-width: 575.98px) {
    .site-device > .site-mockup {
        width: 97%;
        border-width: .3125rem;
        border-bottom-width: .4375rem;
    }

    .site-device > .site-device-base { height: .5625rem; }

    .site-device > .site-device-base::after { width: 3.5rem; height: .1875rem; }
}

/*〔存查 f0200〕*/

/*〔存查 f0201〕*/
.site-hp {
    --hp-ink:   243 46% 20%;   /* 深靛藍畫布（漸層起點） */
    --hp-ink-2: 252 42% 29%;   /* 畫布漸層另一端，帶一點紫，避免整塊死板 */
    --hp-head:  243 52% 20%;   /* 首頁標題色：深靛藍，不是純黑 */
    --hp-c1:     44 100% 50%;  /* 琥珀 —— 品牌黃的鄰居 */
    --hp-c2:    256  66% 64%;  /* 紫 */
    --hp-c3:    222  88% 58%;  /* 藍 */
    --hp-c4:     20  90% 61%;  /* 橘珊瑚 */
    --hp-on-ink:  0   0% 100%; /* 落在深靛藍場上的文字色（見 ⑦ 的示意圖註腳） */
}

/* ---------- ② 幾何原件（通用，後續區塊可重用） ----------
   整組 pointer-events:none：純裝飾，不可以擋到任何可點擊元素。
   aria-hidden 由 blade 那端負責（螢幕閱讀器完全跳過）。 */
.site-hp-geo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/*〔存查 f0202〕*/
.site-hp-dot {
    position: absolute;
    border-radius: 50%;
    display: block;
    z-index: 1;
}

.site-hp-blob {
    position: absolute;
    display: block;
}

/* ---------- ③ hero 版面（只在首頁生效） ---------- */

/*〔存查 f0203〕*/
.site-hp #home {
    background: hsl(var(--background));
}

/* 關掉品牌黃光暈（原規則 L1315 一個字都沒動，這裡只是覆寫掉它的 content）。 */
.site-hp #home::before { content: none; }

/* 文字層永遠在幾何之上。 */
.site-hp #home > .container {
    position: relative;
    z-index: 2;
}

/*〔存查 f0204〕*/
@media (min-width: 992px) {
    .site-hp #home {
        min-height: min(86vh, 780px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* flex 子項要自己撐滿寬度，否則 .container 的 max-width 會失效。 */
    .site-hp #home > .container { width: 100%; }
}

/*〔存查 f0205〕*/
.site-hp-geo--hero { display: none; }

@media (min-width: 992px) {
    .site-hp-geo--hero { display: block; }

    /* 主色塊：有機圓角矩形，左緣一道大圓弧，右緣貼齊被 overflow 裁掉。 */
    .site-hp-canvas {
        position: absolute;
        top: -28%;
        right: -8%;
        left: 57%;
        height: 156%;
        background: linear-gradient(160deg, hsl(var(--hp-ink)), hsl(var(--hp-ink-2)));
        border-radius: 44% 0 0 42% / 36% 0 0 40%;
        display: block;
        z-index: 0;
    }

    /* 斜切：白色楔形切掉主色塊左下角，做出一條**不是水平**的分界線。
       用 clip-path 而不是 transform:rotate —— 旋轉的矩形四個角都要另外處理，
         clip-path 直接就是要的形狀。 */
    .site-hp-slice {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        /*〔存查 f0206〕*/
        height: 25%;
        background: hsl(var(--background));
        clip-path: polygon(0 0, 100% 46%, 100% 100%, 0 100%);
        display: block;
        z-index: 2;
    }

    /*〔存查 f0207〕*/

    /* 圓 A：最大的一顆，左半露到白底上（跨過分界 = 讓兩個色域咬在一起，不是各自為政）。
       位置卡在示意畫面**上方**那條帶狀空間 —— 那是右半唯一不會被卡片遮住的地方，
         擺在別處等於畫了看不到的東西。 */
    .site-hp-dot--a {
        width: 300px;
        height: 300px;
        top: -13%;
        right: 25%;
        background: hsl(var(--hp-c3));
    }

    /* 圓 B：右上角外緣，一部分被畫面裁掉。 */
    .site-hp-dot--b {
        width: 190px;
        height: 190px;
        top: -6%;
        right: -4%;
        background: hsl(var(--hp-c2));
    }

    /*〔存查 f0208〕*/
    .site-hp-dot--c {
        width: 96px;
        height: 96px;
        top: 4%;
        right: 14%;
        background: hsl(var(--hp-c1));
    }

    /*〔存查 f0209〕*/
    .site-hp-dot--d {
        width: 240px;
        height: 240px;
        bottom: -8%;
        right: -4%;
        background: hsl(var(--hp-c4));
        z-index: 3;
    }
}

/*〔存查 f0210〕*/
/*〔存查 hp-01〕此處原有兩條 .site-hp 作用域規則（.site-hero-title / .site-hero-lead），已移除。
   移除前實測：兩者在 .site-hp 作用域內各命中 0 個元素。*/

/*〔存查 f0213〕*/
/*〔存查 f0214〕*/
/*〔存查 hp-02〕此處原有一條 .site-hp .site-cta 作用域規則，已移除。
   移除後回落至本檔 .site-cta 基底規則。*/

/*〔存查 f0215〕*/
/*〔存查 f0216〕*/
@media (min-width: 992px) {
    .site-hp .site-hp-hero-visual {
        position: relative;
        z-index: 3;
    }

    .site-hp .site-hp-hero-visual > .site-mockup {
        width: calc(100% + 3rem);
        max-width: none;
        filter: drop-shadow(0 40px 60px hsl(var(--hp-ink) / .35));
    }

    /*〔存查 f0217〕*/
    .site-hp .site-hp-hero-visual > .site-mockup-note {
        color: hsl(var(--hp-on-ink) / .82);
    }
}

/* 超寬螢幕才讓示意畫面伸更多：992~1199 的欄寬只有 432px，
   一次伸 7rem 會把「狀態」整欄推出畫面外 —— 突破邊界是構圖，把資訊推光不是。 */
@media (min-width: 1200px) {
    .site-hp .site-hp-hero-visual > .site-mockup { width: calc(100% + 7rem); }
}

/* ---------- ⑧ 響應式 ----------
   硬判準：390 / 768 / 1440 三個寬度都必須 scrollWidth <= innerWidth（零橫向捲軸）。 */

/*〔存查 f0218〕*/
@media (min-width: 576px) and (max-width: 991.98px) {
    .site-hp-geo--hero {
        display: block;
        bottom: auto;
        height: 170px;
        overflow: hidden;
    }

    .site-hp-canvas {
        position: absolute;
        top: -16%;
        right: -12%;
        left: 48%;
        height: 106%;
        background: linear-gradient(160deg, hsl(var(--hp-ink)), hsl(var(--hp-ink-2)));
        /* 下緣也給圓角：色塊自己的高度**收在帶子裡面**（-16%+106% = 90% < 100%），
           讓下緣露出自己的弧線，而不是被帶子的 overflow 切成一條直線。 */
        border-radius: 46% 0 34% 44% / 40% 0 46% 42%;
        display: block;
        z-index: 0;
    }

    .site-hp-slice { display: none; }

    .site-hp-dot--a {
        width: 150px;
        height: 150px;
        top: -34%;
        right: 20%;
        background: hsl(var(--hp-c3));
    }

    .site-hp-dot--b {
        width: 92px;
        height: 92px;
        top: 22%;
        right: -4%;
        background: hsl(var(--hp-c2));
    }

    .site-hp-dot--c, .site-hp-dot--d { display: none; }
}

/*〔存查 f0219〕*/
@media (max-width: 575.98px) {
    .site-hp-geo--hero {
        display: block;
        bottom: auto;
        height: 120px;
        overflow: hidden;
    }

    .site-hp-canvas {
        position: absolute;
        top: -20%;
        right: -20%;
        left: 56%;
        height: 104%;
        background: linear-gradient(160deg, hsl(var(--hp-ink)), hsl(var(--hp-ink-2)));
        /* 同 768 級：下緣收在帶子裡，露出自己的弧線。 */
        border-radius: 50% 0 38% 46% / 44% 0 48% 44%;
        display: block;
        z-index: 0;
    }

    .site-hp-slice { display: none; }

    .site-hp-dot--a {
        width: 86px;
        height: 86px;
        top: -26%;
        right: 12%;
        background: hsl(var(--hp-c3));
    }

    .site-hp-dot--b {
        width: 52px;
        height: 52px;
        top: 30%;
        right: -5%;
        background: hsl(var(--hp-c1));
    }

    .site-hp-dot--c, .site-hp-dot--d { display: none; }

    /* 既有規則 L1379 讓 `.site-cta` 在 <576 變成 width:100%，膠囊照樣成立，不必改。 */
}

/*〔存查 f0220〕*/


/* ══════════════════════════════════════════════════════════════════════════════════════════
   ⓐ 通則（一律 .site-hp 前綴）
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/*〔存查 f0221〕*/
/*〔存查 hp-03〕此處原有一條 .site-hp .site-section-title 作用域規則，已移除。
   移除後回落至本檔 .site-section-title 基底規則。*/

/*〔存查 f0224〕*/
.site-hp .bg-gray-800 .site-section-title { color: hsl(var(--hp-on-ink)); }

/*〔存查 hp-04〕方案卡副標的行高覆蓋已移除，回落至本檔 .site-section-desc 基底行高，
   使各頁副標行高一致。原文見存查目錄。*/

/*〔存查 f0225〕*/
.site-hp .bg-gray-800 .site-section-desc { opacity: .9; }

/*〔存查 f0226〕*/
.site-hp .site-hp-headdot::after {
    content: "";
    display: inline-block;
    width: .42em;
    height: .42em;
    border-radius: 50%;
    margin-left: .42em;
    vertical-align: .22em;
    background: hsl(var(--hp-c1));
}

.site-hp .site-hp-headdot--c1::after { background: hsl(var(--hp-c1)); }
.site-hp .site-hp-headdot--c2::after { background: hsl(var(--hp-c2)); }
.site-hp .site-hp-headdot--c3::after { background: hsl(var(--hp-c3)); }
.site-hp .site-hp-headdot--c4::after { background: hsl(var(--hp-c4)); }

/* ---------- ⓐ-4 圓角加大：參考站沒有任何直角 ----------
   圖示磚全部改正圓（44px 方磚 → 44px 圓）。尺寸放大只發生在 #integration 與 #onboarding。 */
.site-hp .site-icon-tile { border-radius: 50%; }

.site-hp .site-photo { border-radius: 1.5rem; }

.site-hp .site-media-frame { border-radius: 1.5rem; }

.site-hp .site-dark-panel { border-radius: 1.25rem; }

/*〔存查 f0227〕*/
.site-hp #integration .card,
.site-hp #faq .card,
.site-hp #pricing .card { border-radius: 1.25rem; }

/*〔存查 f0228〕*/


/* ══════════════════════════════════════════════════════════════════════════════════════════
   ⓑ 區塊層級的定位與裁切（這一段是所有幾何能成立的地基）
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ---------- ⓑ-1 定位脈絡：裝飾層要有 absolute 的參考框 ---------- */
.site-hp #channels,
.site-hp #about,
.site-hp #milestone,
.site-hp #service,
.site-hp #integration,
.site-hp #machine-section,
.site-hp #onboarding,
.site-hp #voice,
.site-hp #pricing,
.site-hp #faq,
.site-hp #action-box,
.site-hp #contact { position: relative; }

/*〔存查 f0229〕*/
.site-hp #channels > .container,
.site-hp #about > .container,
.site-hp #milestone > .container,
.site-hp #service > .container,
.site-hp #integration > .container,
.site-hp #machine-section > .container,
.site-hp #onboarding > .container,
.site-hp #voice > .container,
.site-hp #pricing > .container,
.site-hp #faq > .container,
.site-hp #action-box > .container,
.site-hp #contact > .container {
    position: relative;
    z-index: 1;
}

/*〔存查 f0230〕*/
.site-hp #channels,
.site-hp #about,
.site-hp #milestone,
.site-hp #service,
.site-hp #integration,
.site-hp #machine-section,
.site-hp #onboarding,
.site-hp #voice,
.site-hp #pricing,
.site-hp #action-box,
.site-hp #contact { overflow: hidden; }

/*〔存查 f0231〕*/
.site-hp .site-hp-organic {
    background: hsl(var(--card));
}

/* 有機色帶本體：形狀由 clip-path（斜上緣）＋ border-radius（巨大圓角）合成。
   兩者是**交集**：先照 border-radius 圓角化，再被 clip-path 切一刀，兩個效果同時保留。
   clamp 的下限 120px 是給 390px 用的（340px 的圓角在手機上會把整塊吃光）。 */
.site-hp .site-hp-band {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 0;
    /*〔存查 f0232〕*/
    background: hsl(var(--hp-ink) / .055);
}

/* #integration：斜線由左上往右下、巨大圓角在**右下** */
.site-hp #integration .site-hp-band {
    border-radius: 0 0 clamp(120px, 22vw, 340px) 0;
    clip-path: polygon(0 0, 100% 3.5%, 100% 100%, 0 100%);
}

/* #faq：與 #integration **鏡像** —— 斜線反向、巨大圓角在**左下**。
   兩區只隔了 #onboarding / #voice / #pricing，形狀若相同會讀成「同一張圖用了兩次」。 */
.site-hp .site-hp-organic--flip .site-hp-band {
    border-radius: 0 0 0 clamp(120px, 22vw, 340px);
    clip-path: polygon(0 3.5%, 100% 0, 100% 100%, 0 100%);
}


/*〔存查 f0233〕*/

.site-hp .site-hp-orbit { position: relative; }

/* 預設關閉；只在 ≥992 打開（見上方理由）。
   用 (0,2,0) 的 `.site-hp .site-hp-orbit-*` 蓋掉 `.site-hp-dot` 的 display:block。 */
.site-hp .site-hp-orbit-planet,
.site-hp .site-hp-orbit-sat { display: none; }

@media (min-width: 992px) {

    .site-hp .site-hp-orbit-planet {
        display: block;
        position: absolute;
        width: 88%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: linear-gradient(150deg, hsl(var(--hp-ink)), hsl(var(--hp-ink-2)));
        z-index: 0;
    }

    .site-hp .site-hp-orbit-sat {
        display: block;
        z-index: 3;
    }

    /* 主體（照片／筆電）壓在行星上，且**不要邊框**：立體感全部交給陰影。
       陰影用 hp-ink 的低透明度而不是純黑 —— 純黑陰影在彩色幾何旁邊會顯髒。 */
    .site-hp .site-hp-orbit > .site-photo,
    .site-hp .site-hp-orbit > .site-device {
        position: relative;
        z-index: 2;
    }

    .site-hp .site-hp-orbit > .site-photo {
        border-color: transparent;
        box-shadow: var(--al-elev-scene); /*〔存查 f0234〕*/
    }

    /* ---------- #about：行星偏左下，露出左下弦月 ---------- */
    .site-hp #about .site-hp-orbit-planet {
        left: -9%;
        bottom: -11%;
    }

    .site-hp #about .site-hp-orbit-sat--1 {
        width: 84px;
        height: 84px;
        left: -13%;
        top: 30%;
        background: hsl(var(--hp-c4));
    }

    .site-hp #about .site-hp-orbit-sat--2 {
        width: 52px;
        height: 52px;
        left: 12%;
        bottom: -8%;
        background: hsl(var(--hp-c2));
    }

    .site-hp #about .site-hp-orbit-sat--3 {
        width: 32px;
        height: 32px;
        left: 40%;
        bottom: -3%;
        background: hsl(var(--hp-c3));
    }

    /*〔存查 f0235〕*/
    /*〔存查 f0236〕*/
    .site-hp #service .site-hp-orbit-planet {
        width: 52%;
        left: -2%;
        top: -8%;
    }

    .site-hp #service .site-hp-orbit-sat--1 {
        width: 72px;
        height: 72px;
        left: -6%;
        top: 44%;
        background: hsl(var(--hp-c1));
    }

    .site-hp #service .site-hp-orbit-sat--2 {
        width: 44px;
        height: 44px;
        left: 15%;
        top: -14%;
        background: hsl(var(--hp-c3));
    }

    .site-hp #service .site-hp-orbit-sat--3 {
        width: 26px;
        height: 26px;
        left: 3%;
        top: 76%;
        background: hsl(var(--hp-c4));
    }
}


/*〔存查 f0237〕*/

@media (min-width: 992px) {

    /*〔存查 f0238〕*/
    .site-hp #service .site-device {
        max-width: none;
        margin-inline: 3rem 0;
        margin-top: 1.5rem;
        width: calc(100% + 4rem);
    }

    /* ③ 淺機身：邊框只留一條很淡的界線，立體感交給陰影。 */
    .site-hp #service .site-device > .site-mockup {
        border-color: hsl(var(--foreground) / .20);
        box-shadow: var(--al-elev-scene); /*〔存查 f0239〕*/
    }

    .site-hp #service .site-device > .site-device-base {
        background: hsl(var(--foreground) / .26);
        box-shadow: var(--al-elev-lg); /*〔存查 f0240〕*/
    }

    /* 拇指凹槽跟著淺化，否則會在淺底座上變成一條突兀的深痕。 */
    .site-hp #service .site-device > .site-device-base::after {
        background: hsl(var(--foreground) / .30);
    }

    /*〔存查 f0241〕*/
    .site-hp #service .site-device > .site-device-base::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 4%;
        right: 4%;
        height: 46px;
        pointer-events: none;
        background: radial-gradient(ellipse at 50% 0%,
                    hsl(var(--hp-ink) / .30) 0%,
                    hsl(var(--hp-ink) / .12) 45%,
                    hsl(var(--hp-ink) / 0) 72%);
    }
}

/* ≥1200 才伸得更多：992~1199 的欄寬只有 542px，一次伸 9rem 會把表格切掉太多，
   讀起來像壞掉而不像構圖（同第 1 輪 hero 對 7rem 的判斷）。 */
@media (min-width: 1200px) {
    .site-hp #service .site-device {
        margin-inline: 5rem 0;
        margin-top: 2rem;
        width: calc(100% + 9rem);
    }
}


/*〔存查 f0242〕*/

/* ---------- #2 #channels：只在 ≥1200 於左右頁緣各露半顆圓 ----------
   <1200 一律關掉：.container 幾乎貼滿視窗，頁緣沒有空間，放了就會壓到 chip。
   (1,2,0) 的特異度蓋得過 `.site-hp-dot` 的 display:block。 */
.site-hp #channels .site-hp-g1,
.site-hp #channels .site-hp-g2 { display: none; }

@media (min-width: 1200px) {
    .site-hp #channels .site-hp-g1 {
        display: block;
        width: 128px;
        height: 128px;
        left: -74px;
        top: 50%;
        margin-top: -64px;
        background: hsl(var(--hp-c2) / .16);
    }

    .site-hp #channels .site-hp-g2 {
        display: block;
        width: 72px;
        height: 72px;
        right: -28px;
        top: 16%;
        background: hsl(var(--hp-c1) / .30);
    }
}

/*〔存查 f0243〕*/
.site-hp #milestone {
    background-image: linear-gradient(145deg, hsl(var(--hp-ink)), hsl(var(--hp-ink-2)));
}

.site-hp #milestone .site-hp-g1 {
    width: 420px;
    height: 420px;
    left: -150px;
    bottom: -200px;
    background: hsl(var(--hp-c3) / .22);
}

.site-hp #milestone .site-hp-g2 {
    width: 220px;
    height: 220px;
    right: -74px;
    top: -96px;
    background: hsl(var(--hp-c2) / .30);
}

.site-hp #milestone .site-hp-g3 {
    width: 88px;
    height: 88px;
    right: 16%;
    bottom: -34px;
    background: hsl(var(--hp-c1) / .55);
}

/*〔存查 f0244〕*/
.site-hp #milestone .site-milestone-num { color: hsl(var(--hp-c1)); }

/* 分隔線改用 hp-on-ink：原值走 --dark-panel-foreground，在新的深靛底上偏冷。 */
.site-hp #milestone .site-statband > :not(:first-child) { border-color: hsl(var(--hp-on-ink) / .18); }

@media (min-width: 576px) {
    .site-hp #milestone .site-statband > :nth-child(2n) { border-left-color: hsl(var(--hp-on-ink) / .18); }
}

@media (min-width: 992px) {
    .site-hp #milestone .site-statband > :not(:first-child) { border-left-color: hsl(var(--hp-on-ink) / .18); }
}

/* ---------- #6 #integration：原型 B ---------- */
.site-hp #integration .site-hp-g1 {
    width: 300px;
    height: 300px;
    left: -150px;
    top: 24%;
    background: hsl(var(--hp-c3) / .10);
}

.site-hp #integration .site-hp-g2 {
    width: 230px;
    height: 230px;
    right: -115px;
    bottom: 18%;
    background: hsl(var(--hp-c4) / .12);
}

/* 圖示磚：44px 方磚 → 64px 正圓；淺灰帶上要用白面才浮得起來（原值 --muted 會融進背景）。 */
.site-hp #integration .site-icon-tile {
    width: 64px;
    height: 64px;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
}

.site-hp #integration .site-icon-tile [data-lucide],
.site-hp #integration .site-icon-tile svg {
    width: 26px;
    height: 26px;
}

/*〔存查 f0245〕*/
.site-hp #integration > .container > .row > :first-child .site-icon-tile {
    background: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

/*〔存查 f0246〕*/
.site-hp #machine-section {
    background-image: linear-gradient(200deg, hsl(var(--hp-ink-2)), hsl(var(--hp-ink)));
}

.site-hp #machine-section .site-hp-g1 {
    width: 470px;
    height: 470px;
    right: -170px;
    top: -170px;
    background: hsl(var(--hp-c2) / .20);
}

.site-hp #machine-section .site-hp-g2 {
    width: 270px;
    height: 270px;
    left: -100px;
    bottom: -120px;
    background: hsl(var(--hp-c3) / .24);
}

.site-hp #machine-section .site-hp-g3 {
    width: 110px;
    height: 110px;
    left: 7%;
    top: 16%;
    background: hsl(var(--hp-c1) / .5);
}

/* 包裝機照片「浮出」：拿掉細框，換成大而散的陰影（與原型 A 的主體同一套語言）。 */
.site-hp #machine-section .site-media-frame {
    border-color: transparent;
    box-shadow: var(--al-elev-scene); /*〔存查 f0247〕*/
}

/* 三顆亮點面板跟著換成深靛場上的白面（原值走 --dark-panel-foreground，在新底色上偏冷）。 */
.site-hp #machine-section .site-dark-panel {
    background: hsl(var(--hp-on-ink) / .07);
    border-color: hsl(var(--hp-on-ink) / .16);
}

/* ---------- #8 #onboarding：白底＋四色步驟圓（全頁唯一四色並置）---------- */
.site-hp #onboarding .site-hp-g1 {
    width: 380px;
    height: 380px;
    right: -160px;
    top: -140px;
    background: hsl(var(--hp-c2) / .08);
}

.site-hp #onboarding .site-hp-g2 {
    width: 240px;
    height: 240px;
    left: -110px;
    bottom: -90px;
    background: hsl(var(--hp-c3) / .09);
}

/* 44px 方磚 → 64px 正圓。圖示顏色四顆一律 hp-head（深靛）而不是各自的 accent：
   accent 色的線條壓在同色系的淺底上對比不足（琥珀最嚴重），
   因此讓「顏色」由底色承擔、「可讀」由圖示承擔，兩者分工。 */
.site-hp #onboarding .site-icon-tile {
    width: 64px;
    height: 64px;
    color: hsl(var(--hp-head));
}

.site-hp #onboarding .site-icon-tile [data-lucide],
.site-hp #onboarding .site-icon-tile svg {
    width: 26px;
    height: 26px;
}

.site-hp #onboarding .site-flow-step:nth-child(1) .site-icon-tile { background: hsl(var(--hp-c1) / .30); }
.site-hp #onboarding .site-flow-step:nth-child(2) .site-icon-tile { background: hsl(var(--hp-c2) / .24); }
.site-hp #onboarding .site-flow-step:nth-child(3) .site-icon-tile { background: hsl(var(--hp-c3) / .20); }
.site-hp #onboarding .site-flow-step:nth-child(4) .site-icon-tile { background: hsl(var(--hp-c4) / .24); }

/*〔存查 f0248〕*/
@media (min-width: 992px) {
    .site-hp #onboarding .site-flow-step:not(:last-child) .site-flow-head::after {
        top: 31px;
        left: 72px;
    }
}

/* ---------- #9 #voice：只動背景（見 blade 該區的裁決註解）---------- */
.site-hp #voice .site-hp-g1 {
    width: 270px;
    height: 270px;
    left: -100px;
    top: -80px;
    background: hsl(var(--hp-c2) / .10);
}

.site-hp #voice .site-hp-g2 {
    width: 150px;
    height: 150px;
    right: 7%;
    top: 10%;
    background: hsl(var(--hp-c1) / .13);
}

.site-hp #voice .site-hp-g3 {
    width: 340px;
    height: 340px;
    right: -150px;
    bottom: -130px;
    background: hsl(var(--hp-c3) / .09);
}

.site-hp #voice .site-hp-g4 {
    width: 78px;
    height: 78px;
    left: 12%;
    bottom: 9%;
    background: hsl(var(--hp-c4) / .14);
}

/* ---------- #10 #pricing：白底＋ink 外框推薦卡 ---------- */
.site-hp #pricing .site-hp-g1 {
    width: 520px;
    height: 520px;
    right: -230px;
    top: -170px;
    background: hsl(var(--hp-c2) / .07);
}

.site-hp #pricing .site-hp-g2 {
    width: 180px;
    height: 180px;
    left: -84px;
    bottom: 14%;
    background: hsl(var(--hp-c1) / .11);
}

/* 重音改成 ink 外框（原值是 --primary 品牌黃的 1px 外框）：
   「推薦」徽章本來就是黃色 —— 卡框也黃，兩者互相稀釋；
   換成深靛之後，黃徽章反而變成整張卡上唯一的亮點。 */
.site-hp #pricing .site-plan-recommended {
    border-color: hsl(var(--hp-head));
    box-shadow: var(--al-ring-2) hsl(var(--hp-head)), var(--al-elev-scene); /*〔存查 f0249〕*/
}

/* ---------- #11 #faq：原型 B 反向（形狀規則在 ⓑ-4）---------- */
.site-hp #faq .site-hp-g1 {
    width: 280px;
    height: 280px;
    right: -140px;
    top: 20%;
    background: hsl(var(--hp-c2) / .10);
}

.site-hp #faq .site-hp-g2 {
    width: 190px;
    height: 190px;
    left: -95px;
    bottom: 22%;
    background: hsl(var(--hp-c1) / .12);
}

/*〔存查 f0250〕*/
.site-hp #action-box .site-action-box {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(135deg, hsl(var(--hp-ink)), hsl(var(--hp-ink-2)));
    border-radius: 2.5rem 1.25rem 2.5rem 1.25rem;
}

@media (min-width: 992px) {
    .site-hp #action-box .site-action-box { border-radius: 5rem 1.75rem 5rem 1.75rem; }
}

/* 內容層要抬到裝飾層之上（理由同 ⓑ-2）。 */
.site-hp #action-box .site-action-box > .row {
    position: relative;
    z-index: 1;
}

.site-hp #action-box .site-hp-g1 {
    width: 300px;
    height: 300px;
    right: -110px;
    top: -140px;
    background: hsl(var(--hp-c2) / .28);
}

.site-hp #action-box .site-hp-g2 {
    width: 170px;
    height: 170px;
    left: -70px;
    bottom: -80px;
    background: hsl(var(--hp-c3) / .30);
}

.site-hp #action-box .site-hp-g3 {
    width: 64px;
    height: 64px;
    right: 26%;
    bottom: 14%;
    background: hsl(var(--hp-c1) / .55);
}

/* ---------- #13 #contact：白底＋單顆大柔和圓（收尾要輕）---------- */
.site-hp #contact .site-hp-g1 {
    width: 560px;
    height: 560px;
    left: 50%;
    margin-left: -280px;
    top: -200px;
    background: hsl(var(--hp-c3) / .07);
}

.site-hp #contact .site-hp-g2 {
    width: 110px;
    height: 110px;
    right: 11%;
    bottom: 16%;
    background: hsl(var(--hp-c1) / .16);
}


/*〔存查 f0251〕*/

@media (max-width: 767.98px) {

    .site-hp #milestone .site-hp-g1 { width: 240px; height: 240px; left: -110px; bottom: -110px; }
    .site-hp #milestone .site-hp-g2 { width: 130px; height: 130px; right: -50px; top: -56px; }
    .site-hp #milestone .site-hp-g3 { width: 54px; height: 54px; right: 12%; bottom: -20px; }

    .site-hp #integration .site-hp-g1 { width: 180px; height: 180px; left: -95px; }
    .site-hp #integration .site-hp-g2 { width: 140px; height: 140px; right: -75px; }

    .site-hp #machine-section .site-hp-g1 { width: 260px; height: 260px; right: -110px; top: -110px; }
    .site-hp #machine-section .site-hp-g2 { width: 160px; height: 160px; left: -70px; bottom: -70px; }
    .site-hp #machine-section .site-hp-g3 { width: 62px; height: 62px; left: 5%; top: 9%; }

    .site-hp #onboarding .site-hp-g1 { width: 220px; height: 220px; right: -100px; top: -80px; }
    .site-hp #onboarding .site-hp-g2 { width: 150px; height: 150px; left: -75px; bottom: -55px; }

    .site-hp #voice .site-hp-g1 { width: 160px; height: 160px; left: -70px; top: -50px; }
    .site-hp #voice .site-hp-g2 { width: 88px; height: 88px; right: 5%; top: 7%; }
    .site-hp #voice .site-hp-g3 { width: 200px; height: 200px; right: -95px; bottom: -80px; }
    .site-hp #voice .site-hp-g4 { width: 46px; height: 46px; }

    .site-hp #pricing .site-hp-g1 { width: 300px; height: 300px; right: -140px; top: -100px; }
    .site-hp #pricing .site-hp-g2 { width: 110px; height: 110px; left: -55px; }

    .site-hp #faq .site-hp-g1 { width: 170px; height: 170px; right: -90px; }
    .site-hp #faq .site-hp-g2 { width: 120px; height: 120px; left: -62px; }

    .site-hp #action-box .site-hp-g1 { width: 180px; height: 180px; right: -70px; top: -84px; }
    .site-hp #action-box .site-hp-g2 { width: 110px; height: 110px; left: -50px; bottom: -55px; }
    .site-hp #action-box .site-hp-g3 { width: 40px; height: 40px; right: 14%; bottom: 8%; }

    .site-hp #contact .site-hp-g1 { width: 320px; height: 320px; margin-left: -160px; top: -120px; }
    .site-hp #contact .site-hp-g2 { width: 64px; height: 64px; right: 8%; bottom: 12%; }
}


/*〔存查 f0252〕*/

/*〔存查 f0253〕*/
.site-auth .form-control,
.site-auth .input-group-text {
    min-height: 32px;
    padding: 5px 12px;      /* 5 + 20(line-height) + 5 + 2(border) = 32，全站 32px SSOT */
    font-size: 14px;        /* shadcn Input = text-sm */
    line-height: 20px;
}

.site-auth .form-control {
    border-radius: var(--radius-md);   /* shadcn Input = rounded-md；內側接縫仍歸 Bootstrap，見上方特異度說明 */
}

/* 手機 16px：iOS Safari 對 <16px 的輸入框會在 focus 時自動放大整頁，而且放大後不會還原。
   這是「防瀏覽器介入」不是設計字級 —— 條文與斷點逐字沿用 §S-89。
   高度不受影響：16 字仍配 line-height 20px，5+20+5+2 = 32px 不變。 */
@media (max-width: 768px) {
    .site-auth .form-control { font-size: 16px; }
}

/*〔存查 f0254〕*/
@media (max-width: 575.98px) {
    .site-auth .form-control,
    .site-auth .input-group-text {
        min-height: 44px;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    /*〔存查 f0255〕*/
    .site-auth .btn.btn-lg { min-height: 44px; }

    .site-auth .site-auth-submit.btn.btn-lg { min-height: 44px; }
}

/*〔存查 f0256〕*/
.site-auth .input-group-text.site-auth-suffix { font-size: .8125rem; }

/*〔存查 f0257〕*/
.site-auth-field > .form-label {
    font-weight: 500;
    margin-bottom: .5rem;
}

/*〔存查 f0258〕*/
.site-auth .site-auth-submit.btn.btn-lg {
    font-size: 14px;
    font-weight: 500;
}

/*〔存查 f0259〕*/
.site-auth .site-auth-hint,
.site-auth .invalid-feedback small,
.site-auth #host-check-result small,
.site-auth .site-auth-agree-error { font-size: 14px; }

/*〔存查 f0260〕*/
.site-auth-hint > [data-lucide],
.site-auth-hint > svg { margin-top: .25em; }

/*〔存查 f0261〕*/
.site-auth [data-bs-toggle="popover"] { cursor: pointer; transition: color .15s ease; }

.site-auth [data-bs-toggle="popover"]:hover { color: hsl(var(--primary)); }

/*〔存查 f0262〕*/
.site-auth .form-control.is-invalid:focus {
    box-shadow: var(--al-ring-2) hsl(var(--background)), 0 0 0 4px hsl(var(--destructive) / .4); /*〔存查 f0263〕*/
    border-color: hsl(var(--destructive));
}

/*〔存查 f0264〕*/
.site-auth .form-control.is-valid {
    border-color: hsl(var(--success, var(--border)));
    background-image: none;
    padding-right: 12px;    /* 與本區塊 ① 的 padding 同值，不用 .75rem 以免與 ① 打架 */
}


/*〔存查 f0265〕*/

/*〔存查 f0266〕*/
[id^="site-mch-"] {
    --mch-sec-y:    3rem;   /* 48px */
    --mch-head-gap: 2rem;   /* 32px */
}

@media (min-width: 768px) {
    [id^="site-mch-"] { --mch-sec-y: 4rem; /* 64px */ }
}

@media (min-width: 992px) {
    [id^="site-mch-"] { --mch-sec-y: 5rem; /* 80px */ --mch-head-gap: 3rem; /* 48px */ }
}

/*〔存查 f0267〕*/
section[id^="site-mch-"].site-section {
    padding-top:    var(--mch-sec-y);
    padding-bottom: var(--mch-sec-y);
}

/*〔存查 f0268〕*/
section[id^="site-mch-"] .site-section-head { margin-bottom: var(--mch-head-gap); }


/*〔存查 f0269〕*/
#site-mch-models .site-pillar,
#site-mch-accessories .site-pillar { overflow: hidden; }

#site-mch-models .site-mch-cardmedia,
#site-mch-accessories .site-mch-cardmedia {
    border: 0;
    border-bottom: 1px solid hsl(var(--border));
    border-radius: 0;
}

/*〔存查 f0270〕*/
#site-mch-models .site-mch-cardmedia img,
#site-mch-accessories .site-mch-cardmedia img { padding: .5rem; }

/*〔存查 f0271〕*/
#site-mch-models .site-mch-shot--zoom img { padding: 0; }


/*〔存查 f0272〕*/
#site-mch-models .site-mch-model-action { padding: 0 1rem 1rem; }

#site-mch-models .site-mch-detail-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 40px;                       /* shadcn h-10 */
    padding: .5rem 1rem;
    border-radius: var(--radius-lg);        /* 10px —— 與正式站同值 */
    background: hsl(var(--dark-panel));
    color: hsl(var(--primary));
    font-size: .875rem;                     /* text-sm */
    font-weight: 500;                       /* font-medium */
    letter-spacing: .04em;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

#site-mch-models .site-mch-detail-btn:hover,
#site-mch-models .site-mch-detail-btn:focus-visible {
    background: hsl(var(--foreground));
    color: hsl(var(--primary));
    text-decoration: none;
}

/*〔存查 f0273〕*/
@media (max-width: 575.98px) {
    #site-mch-models .site-mch-detail-btn { min-height: 44px; }
}

/* 深底上的 lucide 圖示永遠只有 1em（主題明訂 width/height: 1em），因此這裡明寫尺寸，
   與本檔 L1469 的 `.site-cta [data-lucide]` 同一個做法，只是尺寸配 text-sm 降到 16px。 */
#site-mch-models .site-mch-detail-btn [data-lucide],
#site-mch-models .site-mch-detail-btn svg { width: 16px; height: 16px; }

/* 卡片內距維持 Bootstrap 預設 16px（本來就在 4px 尺規上），不另外調 ——
   正式站是 22/24/14 的不對稱內距，那是舊版視覺；本站所有 .card 都是 16px，
   為了一頁改掉它會讓這三張卡與全站其他卡片對不齊。這是刻意不做，不是漏做。 */


/*〔存查 f0274〕*/

/*〔存查 f0275〕*/
.site-mch-bridge-text--incard {
    margin-top: .25rem;   /* + card-body 的 gap 12px = 16px */
    font-size: .875rem;
}

.site-cardplan {
    margin-top: .75rem;   /* + card-body 的 gap 12px = 24px；不畫線，只留白 */
    display: grid;
    gap: .5rem;
}

.site-cardplan-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

/* 「所屬方案」小標。letter-spacing 會在最後一個字元右邊也加一份 → 等量負 margin 補回去
   （與本檔 .site-mch-stack-kicker 同一個做法，值也刻意取同一個 .12em，兩顆小標才對得齊）。 */
.site-cardplan-label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: hsl(var(--muted-foreground));
    margin-right: -.12em;
    margin-bottom: .125rem;
}

.site-cardplan-name {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.4;
    margin: 0;
}

.site-cardplan-price { display: flex; align-items: baseline; gap: .375rem; flex-wrap: wrap; }

.site-cardplan-price-lead { font-size: .875rem; color: hsl(var(--muted-foreground)); }

.site-cardplan-price-num {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
}

@media (min-width: 992px) { .site-cardplan-price-num { font-size: 1.875rem; } }

/* 方案未啟用時走這一顆（與 .site-fintro-soon 同語意，尺寸落在尺規上的 20px）。 */
.site-cardplan-soon { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }

.site-cardplan-note {
    margin: 0;
    font-size: .75rem;
    line-height: 1.7;
    color: hsl(var(--muted-foreground));
}

.site-cardplan-link {
    display: inline-flex;
    align-items: center;
    justify-self: start;      /* 父層是 grid：橫向要收的是 justify-self（align-self 管的是縱向，
                                 寫錯不會報錯，只會留下一條整列寬的可點區）。 */
    gap: .25rem;
    margin-top: .25rem;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    color: hsl(var(--foreground));
}

.site-cardplan-link:hover { text-decoration: underline; color: hsl(var(--foreground)); }

.site-cardplan-link [data-lucide], .site-cardplan-link svg { width: 14px; height: 14px; }

/*〔存查 f0276〕*/
:root {
    --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、實績數字上界 */
}

/*〔存查 f0277〕*/
@media (min-width: 768px) {
    /* ㉒SSOT存查（原文未刪）：.site-section-title { font-size: var(--al-text-2xl); } ← 響應式已移入 --al-type-title 角色 token（檔尾㉒），本條退役 */
}
@media (min-width: 1200px) {
    /* ㉒SSOT存查（原文未刪）：.site-section-title { font-size: var(--al-text-3xl); } ← 同上，由 --al-type-title 接手 */
}

/*〔存查 f0278〕*/

/*〔存查 f0279〕*/
:root {
    /* 第 2 層：字級角色（唯一可以引用 --al-text-* 的地方） */
    --al-type-hero:     var(--al-text-3xl);
    --al-type-stat:     var(--al-text-3xl);
    --al-type-title:    var(--al-text-2xl);
    --al-type-heading:  var(--al-text-lg);
    --al-type-subtitle: var(--al-text-base);
    --al-type-body:     var(--al-text-base);
    --al-type-caption:  var(--al-text-sm);
    --al-type-micro:    var(--al-text-xs);
    /* 行高角色（與字級角色配對使用） */
    --al-leading-hero:     1.15;
    --al-leading-stat:     1.1;
    --al-leading-title:    1.25;
    --al-leading-heading:  1.4;
    --al-leading-subtitle: 1.6;
    --al-leading-body:     1.7;
    --al-leading-caption:  1.6;
    --al-leading-micro:    1.4;
}
@media (min-width: 768px) {
    :root {
        --al-type-hero:     var(--al-text-4xl);
        --al-type-stat:     var(--al-text-4xl);
        --al-type-heading:  var(--al-text-xl);
        --al-type-subtitle: var(--al-text-lg);
    }
}
/*〔存查 f0280〕*/
@media (min-width: 992px) {
    :root {
        --al-type-hero: var(--al-text-5xl);
    }
}
@media (min-width: 1200px) {
    :root {
        /* ㉓批2存查（原文未刪）：--al-type-hero:  var(--al-text-5xl); ← 已提前到上方 992 斷點 */
        --al-type-title: var(--al-text-3xl);
    }
}

/*〔存查 f0281〕*/

/*〔存查 f0282〕*/


/*〔存查 f0283〕*/

/*〔存查 f0284〕*/
.site-hp #pricing .row:has(.site-pricing-card) {
    max-width: 71.5rem;
    margin-left: auto;
    margin-right: auto;
}

/*〔存查 f0285〕*/
/*〔存查 f0286〕*/
.site-hp #pricing .site-pricing-card,
.site-hero--banner .site-pricing-card {
    border-radius: var(--radius-xl);
    box-shadow: var(--al-elev-sm); /*〔存查 f0287〕*/
}

:root {
    /* #525252 neutral-600。值與註解逐字取自 home.css L18。 */
    --al-ink-soft: 0 0% 32%;
}

/* 作用域刻意只框到「那張卡」而不是整個 #order-hero：首頁那條也只框 #pricing 一區，
   兩邊的射程對齊；hero 左欄的 .site-hero-lead 等文字不受影響（已實測顏色未變）。 */
.site-hero--banner .site-pricing-card { --muted-foreground: var(--al-ink-soft); }

/*〔存查 f0288〕*/
.site-hp #pricing .site-pricing-card .card-body,
.site-hero--banner .site-pricing-card .card-body { padding: 2.5rem 2rem; }

/*〔存查 f0289〕*/
.site-hp #pricing .site-pricing-card .site-pillar-title,
.site-hero--banner .site-pricing-card .site-pillar-title { margin-bottom: .25rem; }
.site-hp #pricing .site-pricing-card .site-section-desc,
.site-hero--banner .site-pricing-card .site-section-desc { margin-bottom: 1rem; }
.site-hp #pricing .site-plan-priceline,
.site-hero--banner .site-pricing-card .site-plan-priceline { margin: 0 0 .25rem; line-height: var(--al-leading-stat); }

/*〔存查 f0290〕*/
.site-hero--banner .site-pricing-card .site-cardplan { margin-top: 0; gap: 0; }

/*〔存查 f0291〕*/
.site-hp #pricing .site-pricing-card p.site-plan-tenure,
.site-hero--banner .site-pricing-card p.site-plan-tenure { margin-bottom: 0; }

/*〔存查 f0292〕*/

/*〔存查 f0293〕*/
.site-hp #pricing .site-plan-price,
.site-hero--banner .site-pricing-card .site-plan-price { font-size: var(--al-type-stat); }

.site-hp #pricing .site-plan-priceline .site-plan-tenure:first-child,
.site-hero--banner .site-pricing-card .site-plan-priceline .site-plan-tenure:first-child {
    vertical-align: calc(var(--al-type-stat) * .21);
    margin-right: calc(var(--al-type-stat) * .042);
}

/*〔存查 f0294〕*/
.site-hp #pricing .site-plan-tag,
.site-hero--banner .site-pricing-card .site-plan-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: .3125rem .75rem;
    border-radius: var(--radius-xl);
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-size: var(--al-type-micro);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

/*〔存查 f0295〕*/
.site-hp #pricing .site-pricing-card.site-plan-recommended,
.site-hero--banner .site-pricing-card.site-plan-recommended {
    border-color: hsl(var(--primary));
    box-shadow: var(--al-elev-sm); /*〔存查 f0296〕*/
    transform: none;
}

.site-hp #pricing .site-pricing-card.site-plan-recommended:hover,
.site-hero--banner .site-pricing-card.site-plan-recommended:hover { transform: translateY(-4px); }

/*〔存查 f0297〕*/
.site-hp #pricing .site-plan-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.site-hp #pricing .site-plan-meta > span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/*〔存查 f0298〕*/
.site-hp #pricing .site-plan-meta { margin-top: 1.5rem; }

.site-hp #pricing .site-plan-meta [data-lucide],
.site-hp #pricing .site-plan-meta svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: hsl(var(--primary));
}

/*〔存查 f0299〕*/
.site-hp #pricing .site-section-head { margin-bottom: 3rem; }

/*〔存查 f0300〕*/
.site-hp #pricing .site-pricing-card.site-plan-recommended::before,
.site-hero--banner .site-pricing-card.site-plan-recommended::before { display: none; }


/*〔存查 f0301〕*/
:root {
    /* 高度（elevation）—— 語意是「這個元件離頁面多高」 */
    --al-elev-xs:    0 1px 2px 0 hsl(var(--foreground) / .04);      /* 幾乎貼平，只是脫離背景 */
    --al-elev-sm:    0 1px 3px 0 hsl(var(--foreground) / .06);      /* 卡片靜止態（㉗ 的單層 .06） */
    --al-elev-md:    0 6px 20px -12px hsl(var(--foreground) / .35); /* hover ／ 浮起 */
    --al-elev-lg:    0 10px 30px -12px hsl(var(--foreground) / .35);/* 浮層：toast ／ popover */
    --al-elev-scene: 0 24px 50px -30px hsl(var(--foreground) / .45);/* 大型場景浮卡：裝置 mockup */

    /* 描邊環（ring）—— 只放幾何，顏色由使用處給（見上方說明） */
    --al-ring-1: 0 0 0 1px;
    --al-ring-2: 0 0 0 2px;
    --al-ring-3: 0 0 0 3px;

    /*〔存查 f0302〕*/
    --al-radius-slab: 1.5rem;
}


/*〔存查 f0303〕*/

:root {
    /* ── 第 1 層：階梯（Tailwind ／ shadcn 官方 spacing scale，值即名）────────────
       只有第 2 層可以引用這一層；元件請引用第 2 層。 */
    --al-space-px:    1px;        /* tw px   髮絲、1px 描邊 */
    --al-space-2:     .125rem;    /* tw 0.5  視覺微調 */
    --al-space-4:     .25rem;     /* tw 1    最小可感間距 */
    --al-space-6:     .375rem;    /* tw 1.5  緊的圖示↔文字 */
    --al-space-8:     .5rem;      /* tw 2    全站主力：圖示↔文字、chip 內 */
    --al-space-10:    .625rem;    /* tw 2.5  按鈕 lg 的垂直內距 */
    --al-space-12:    .75rem;     /* tw 3    清單項↔清單項 */
    --al-space-14:    .875rem;    /* tw 3.5  chip 水平內距 */
    --al-space-16:    1rem;       /* tw 4    段落↔段落、按鈕預設水平內距 */
    --al-space-20:    1.25rem;    /* tw 5 */
    --al-space-24:    1.5rem;     /* tw 6    卡片內距、欄↔欄 */
    --al-space-28:    1.75rem;    /* tw 7 */
    --al-space-32:    2rem;       /* tw 8    卡片內距（桌機） */
    --al-space-36:    2.25rem;    /* tw 9 */
    --al-space-40:    2.5rem;     /* tw 10 */
    --al-space-44:    2.75rem;    /* tw 11 */
    --al-space-48:    3rem;       /* tw 12   區塊上下內距（手機） */
    --al-space-56:    3.5rem;     /* tw 14 */
    --al-space-64:    4rem;       /* tw 16   區塊上下內距（平板） */
    --al-space-72:    4.5rem;     /* tw 18 */
    --al-space-80:    5rem;       /* tw 20   區塊上下內距（桌機） */
    --al-space-96:    6rem;       /* tw 24 */
    --al-space-112:   7rem;       /* tw 28 */
    --al-space-128:   8rem;       /* tw 32 */

    /*〔存查 f0304〕*/

    /*〔存查 f0305〕*/
    --al-pad-btn-y-sm:  var(--al-space-6);    /*  6 */
    --al-pad-btn-x-sm:  var(--al-space-12);   /* 12 */
    --al-pad-btn-y:     var(--al-space-8);    /*  8  shadcn default（py-2） */
    --al-pad-btn-x:     var(--al-space-16);   /* 16  shadcn default（px-4） */
    --al-pad-btn-y-lg:  var(--al-space-10);   /* 10 */
    --al-pad-btn-x-lg:  var(--al-space-24);   /* 24  shadcn lg（px-6） */
    --al-pad-btn-y-xl:  var(--al-space-16);   /* 16  hero 主 CTA */
    --al-pad-btn-x-xl:  var(--al-space-32);   /* 32  hero 主 CTA */

    /*〔存查 f0306〕*/
    /* 這兩顆只有 .site-cta 在用（已 grep 全專案確認，零其他引用），改值不會外溢。
       收斂到 shadcn sm（py 6／px-3 12）。前值：y = var(--al-space-12)（12）、
       x = var(--al-space-24)（24），註記為「行銷型大按鈕（min-height 48 觸控目標）」。
       值與上方 --al-pad-btn-y-sm／-x-sm 相同是刻意的：角色不同（cta 是行銷按鈕、
       sm 是表單按鈕），但目前規格一致；不要為了去重把 .site-cta 改指 -sm。 */
    --al-pad-btn-y-cta: var(--al-space-6);    /*  6  shadcn sm（py） */
    --al-pad-btn-x-cta: var(--al-space-12);   /* 12  shadcn sm（px-3） */

    /*〔存查 f0307〕*/
    --al-pad-btn-y-compact: var(--al-space-10);  /* 10 */
    --al-pad-btn-x-compact: var(--al-space-16);  /* 16 */

    /* 卡片：手機一階、桌機一階。shadcn 官方 Card 只有一個 p-6（24）。
       .site-auth-card 刻意**不**納入這組角色 —— 見本段末尾「auth 卡為什麼不收斂」。 */
    --al-pad-card-y:    var(--al-space-24);   /* 24 */
    --al-pad-card-x:    var(--al-space-24);   /* 24 */
    --al-pad-card-y-lg: var(--al-space-32);   /* 32 */
    --al-pad-card-x-lg: var(--al-space-32);   /* 32 */

    /* chip ／ badge ／ tag */
    --al-pad-chip-y:     var(--al-space-8);   /*  8 */
    --al-pad-chip-x:     var(--al-space-14);  /* 14 */
    --al-pad-chip-y-xs:  var(--al-space-4);   /*  4  ← --xs 後綴是既有的合法尺寸分級 */
    --al-pad-chip-x-xs:  var(--al-space-8);   /*  8 */
    /*〔存查 f0308〕*/
    --al-pad-strip-y:    var(--al-space-20);  /* 20  上下（兩個斷點都一樣） */
    --al-pad-strip-x:    var(--al-space-24);  /* 24  左右（手機） */
    --al-pad-strip-x-lg: var(--al-space-28);  /* 28  左右（>=992） */

    /*〔存查 f0309〕*/
    --al-pad-chip-x-lead: var(--al-space-6);  /*  6  左內距 */
    /*〔存查 f0310〕*/
    --al-pad-chip-y-lead: var(--al-space-6);  /*  6  上下 */

    /*〔存查 f0311〕*/
    --al-gap-inline-tight: var(--al-space-6);   /*  6  更緊的圖示↔文字 */
    --al-gap-inline:       var(--al-space-8);   /*  8  主力：圖示↔文字、chip 內 */
    --al-gap-stack:        var(--al-space-12);  /* 12  清單項↔清單項 */
    --al-gap-stack-lg:     var(--al-space-16);  /* 16  段落↔段落 */
    --al-gap-group:        var(--al-space-24);  /* 24  卡片↔卡片、欄↔欄 */
}

/*〔存查 f0312〕*/


/*〔存查 f0313〕*/

/* ── ① 白卡下緣 → 深色 footer 上緣：109 → 44（全站，不再只有首頁）── */
.site-footer-contact      { padding-bottom: 0; }    /* 既有 L4001 原值 2rem   (32) */
.site-footer-sep          { margin: 21px 0 0; }     /* 既有 L4034 原值 0 0 2rem     */
.site-footer-contact-band { padding-bottom: 22px; } /* 既有 L4324 原值 2.75rem (44) */

/*〔存查 f0314〕*/
.site-footer-col:has(> .site-footer-media--bottom) { padding-bottom: 0; }
.site-footer-media--bottom { margin-bottom: 0; }

/*〔存查 f0315〕*/

/*〔存查 f0316〕*/
.site-hero--banner { padding-top: 2rem; }
@media (min-width: 992px) {
    /* 兩顆類別是必要的，不是保險：見上方特異度 ② —— 少一顆就輸給 L4644 的
       `.site-hero:not(.site-section)`，而且是靜默的。 */
    .site-hero.site-hero--banner { padding-top: 2.5rem; }
}

/*〔存查 f0317〕行高與字距的覆蓋已移除，回落至本檔 .site-hero-title 基底，
   使各頁主標題的字級節奏一致。此處只保留斷行方式，不再影響量值。原文見存查目錄。*/
.site-hero--banner .site-hero-title {
    text-wrap: balance;
}

/*〔存查 f0318〕*/
.site-hero--banner .site-hero-lead { text-wrap: pretty; }

/*〔存查 f0319〕*/
/* ㉚ 區塊垂直節奏收斂到單一 token
   ─────────────────────────────────────────────────────────────────────
   為什麼要有這一段：首頁（home.css，只有首頁載入）早就把區塊上下內距收斂到
   `－－al-section-pad`，值是 48 ／ 64 ／ 80（＠768 與 ＠1200 兩個斷點）。
   但那顆 token 宣告在 `.mm-home` 底下，**其餘 17 支前台頁面完全取用不到**
   （getComputedStyle 在 /features/order 的 section 上讀 `－－al-section-pad`
     回傳空字串，不是「讀到預設值」而是「這顆變數在那裡不存在」）。
   於是功能頁 ／ 內容頁走的是本檔 L3517-3526 那一組寫死值：
       ≤575.98  → 3rem   ＝ 48
       base     → 4rem   ＝ 64
       ≥768     → 5.5rem ＝ 88
       ≥992     → 7rem   ＝ 112
       ≥1400    → 8rem   ＝ 128
   兩套節奏並存，因此 1440 寬時「區塊 ↔ 區塊」的接縫首頁是 80＋80＝160，
   功能頁卻是 128＋128＝256（1.6 倍）。這就是視覺上「功能頁比首頁鬆」的來源。

   做法：把首頁那把尺搬到 `:root`（＝全站都拿得到），`.site-section` 改吃它。
   ・首頁不受影響 ── `.mm-home` 自己那份 `－－al-section-pad: var(－－al-sec-y)`
     特異度 (0,1,0) 但作用在後代，對首頁內的元素永遠是較近的祖先，因此仍然勝出；
     而且兩邊的值本來就一模一樣（48 ／ 64 ／ 80），量測 Δ＝0。
   ・/machine 不受影響 ── `section[id^="site-mch-"].site-section` (0,2,0) 較本條
     (0,1,0) 高一級，仍由 `－－mch-sec-y` 主宰。
   ・#about-milestone 不受影響 ── about.blade.php 內嵌 `#about-milestone` (1,0,0)。

   原本那五條（L3517-3526）一行都沒有刪，仍原地保留：本條靠「排在全檔最後」
   贏過它們，把它們留著是為了萬一要回退時看得到來源值。
   只寫 `padding-block`，不寫 `padding` 簡寫，左右內距仍由原本那五條給 0。
   ─────────────────────────────────────────────────────────────────────
   原值（供回退）：.site-section { padding: 4rem 0 }
                  ＠768 5.5rem ／ ＠992 7rem ／ ＠1400 8rem ／ ＠max-575.98 3rem */
:root {
    --al-section-pad: 48px;
}

@media (min-width: 768px) {
    :root { --al-section-pad: 64px; }
}

@media (min-width: 1200px) {
    :root { --al-section-pad: 80px; }
}

.site-section { padding-block: var(--al-section-pad); }


/* 區塊標題群與其下內容的距離，與 --al-section-pad 同一層的節奏 token。
   值與收斂前的兩條硬寫值完全相同（2.5rem ／ 3.5rem 起於 992），
   本次只是把值搬進 token，算繪結果不變。
   消費端：.site-section-head 的 margin-bottom。
   刻意保留自訂值的兩處（各自有理由，見該處註解）：
     - section 前綴 site-mch- 的機台頁：走 --mch-head-gap
     - 首頁的方案區：對齊舊版節奏 */
:root {
    --al-head-gap: 2.5rem;   /* 40px */
}

@media (min-width: 992px) {
    :root { --al-head-gap: 3.5rem; }   /* 56px */
}