/* 沿用全站的暖白、森林綠與之約卡片主題色。 */
[data-plan-id] { --plan-color: #52634b; cursor: default; }
[data-plan-id="xingfu"] { --plan-color: #9a754b; }
[data-plan-id="zungui"] { --plan-color: #92683f; }
[data-plan-id="zunrong"] { --plan-color: #816044; }
[data-plan-id^="haiyang-"] { --plan-color: #3e6b82; }
.hf-plan-toggle { display: block; width: 100%; padding: .75rem .4rem; border-radius: .6rem; background: var(--plan-color); color: white; font-size: .8rem; font-weight: 700; border: 1px solid var(--plan-color); }
.hf-plan-toggle[aria-pressed="true"] { background: white; color: var(--plan-color); }
/* 自然葬卡片版面小，主鈕不用實心；但也不能跟底下的 PDF 連結一樣是底線文字，
   否則一張卡上三個底線元素並排，主要動作認不出來。用外框鈕拉開層級。 */
[data-plan-id^="haiyang-"] .hf-plan-toggle, [data-plan-id^="senlin-"] .hf-plan-toggle { width: auto; background: transparent; border: 1px solid var(--plan-color); border-radius: 999px; color: var(--plan-color); margin-top: .75rem; padding: .5rem 1rem; text-decoration: none; }
[data-plan-id^="haiyang-"] .hf-plan-toggle[aria-pressed="true"], [data-plan-id^="senlin-"] .hf-plan-toggle[aria-pressed="true"] { background: var(--plan-color); color: #fdfcf8; }
.hf-contract-links { display: flex; flex-wrap: wrap; gap: .35rem .65rem; font-size: .8rem; color: #596153; margin-top: .75rem; }
.hf-contract-links > span { flex-basis: 100%; }
.hf-contract-links a { padding: .4rem 0; text-decoration: underline; text-underline-offset: .25em; }
.hf-contract-links .hf-contract-link { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; flex: 1 1 calc(50% - .35rem); min-width: 0; min-height: 40px; width: auto; margin-top: 0; padding: .55rem .35rem; line-height: 1.3; text-decoration: none; white-space: nowrap; }
.hf-contract-links .hf-contract-link:hover { filter: brightness(.95); }
.hf-contract-links--self-only .hf-contract-link { flex-basis: 100%; }
[data-plan-id^="haiyang-"] > .hf-plan-toggle, [data-plan-id^="senlin-"] > .hf-plan-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 5.35rem; min-height: 0; line-height: 1.3; vertical-align: middle; }
[data-plan-id^="haiyang-"] > .hf-contract-links--self-only, [data-plan-id^="senlin-"] > .hf-contract-links--self-only { display: inline-flex; width: auto; gap: 0; margin: .75rem 0 0 .35rem; vertical-align: middle; }
[data-plan-id^="haiyang-"] > .hf-contract-links--self-only .hf-contract-link, [data-plan-id^="senlin-"] > .hf-contract-links--self-only .hf-contract-link { flex: 0 0 auto; min-width: 5.35rem; min-height: 0; width: auto; margin: 0; padding: .5rem 1rem; line-height: 1.3; }
[data-compare-header-count], .hf-compare-count { background: #b48a51; color: white; border-radius: 50%; min-width: 1.4rem; padding: .1rem .35rem; font-size: .75rem; text-align: center; }
.hf-compare-car { z-index: 60; font-size: 1.8rem; opacity: 0; visibility: hidden; transform: translateX(6rem); transition: transform .25s, opacity .25s, visibility .25s; }
.hf-compare-car.is-visible { opacity: 1; visibility: visible; transform: translateX(0); }
#hf-compare-car.hf-compare-car-independent { position: fixed; right: 1rem; bottom: 160px; }
/* 比較頁本身已有「選擇／調整之約」入口，浮動比較車在此是重複入口，
   且在窄螢幕會蓋住比較表右側欄位，因此整頁不顯示。 */
.hf-compare-page #hf-compare-car { display: none; }
.hf-compare-count { position: absolute; right: -.2rem; top: -.25rem; line-height: 1.4; }
.hf-count-bump { animation: hf-count-bump .25s ease-out; }
@keyframes hf-count-bump { 50% { transform: scale(1.2); } }
#hf-compare-panel { position: fixed; inset: 1rem 1rem 1rem auto; width: min(440px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); margin: auto 0; padding: 1.5rem; border: 1px solid #d9d3c7; border-radius: 1.1rem; background: #fdfcf8; color: #33412f; box-shadow: 0 20px 80px #19201540; overflow-y: auto; }
#hf-compare-panel::backdrop { background: #1b24194d; }
.hf-compare-panel-head { position: sticky; top: -1.5rem; z-index: 3; background: #fdfcf8; padding: .5rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hf-compare-panel-head h2 { font: 700 1.35rem 'Noto Serif TC', serif; }
.hf-compare-panel-head button { min-width: 44px; min-height: 44px; }
#hf-compare-replacement:not(:empty) { margin: 1rem 0; padding: 1rem; background: #eee7d8; }
.hf-compare-choice { display: flex; gap: .8rem; justify-content: space-between; align-items: center; padding: .85rem 0; border-bottom: 1px solid #e4e1d9; }
.hf-compare-choice small { display: block; color: #68705f; font-size: .8rem; margin-top: .25rem; }
.hf-compare-choice button, .hf-compare-toolbar button, #hf-compare-cancel { padding: .6rem .7rem; min-height: 44px; border: 1px solid #738268; border-radius: .45rem; color: #42543a; background: #fdfcf8; flex-shrink: 0; font-size: .8rem; }
.hf-compare-choice button[aria-pressed="true"] { background: #e7ece2; }
.hf-compare-choices { margin: 1.5rem 0; }
.hf-compare-choices h3 { color: #7a6645; letter-spacing: .12em; font-weight: 700; margin-bottom: .5rem; }
.hf-compare-muted { opacity: .25; }
.hf-compare-replace { display: block; width: 100%; text-align: left; padding: 1rem; border: 2px solid #738268; margin: .6rem 0; border-radius: .5rem; }
.hf-compare-replace:hover { background: #e4eadc; }
.hf-compare-replace small { display: block; color: #68705f; font-size: .8rem; margin-top: .25rem; }
.hf-compare-primary { display: inline-flex; align-items: center; justify-content: center; padding: .85rem 1.5rem; border-radius: 999px; background: #52634b; color: white; font-weight: 700; }
#hf-compare-panel > .hf-compare-primary { display: flex; position: sticky; bottom: 0; margin-top: 1rem; }
.hf-compare-toast { position: fixed; z-index: 60; right: 5.5rem; width: max-content; max-width: min(420px, calc(100vw - 7rem)); border: 1px solid #d7d1c3; border-radius: .7rem; padding: .9rem 1rem; background: #fdfcf8; color: #34412d; box-shadow: 0 5px 24px #27322026; font-size: .85rem; animation: hf-toast-in .2s ease-out; }
.hf-compare-toast::after { content: ''; position: absolute; left: 100%; top: 50%; width: 1.3rem; height: 1px; background: #8d9a7e; }
.hf-compare-toast a { display: inline-block; margin-left: .7rem; padding: .4rem 0; text-decoration: underline; text-underline-offset: .3em; font-weight: 700; }
@keyframes hf-toast-in { from { opacity: 0; transform: translateX(.7rem); } }
.hf-compare-page { color: #34412d; margin: 0; font-family: 'Noto Sans TC', sans-serif; }
.hf-compare-page #navbar { background-color: #F7F5F0 !important; background-image: none !important; }
.hf-compare-main { position: relative; z-index: 1; width: min(1200px, calc(100% - 10rem)); margin: 0 auto; padding: 8rem 0 6rem; }
.hf-compare-page .hf-footer-transition { z-index: 0 !important; }
.hf-compare-back .fa-arrow-right-long { transform: scaleX(-1); }
.hf-compare-intro { position: relative; padding: 2rem 0 3rem; overflow: hidden; }
.hf-compare-watermark { position: absolute; top: 0; right: 0; color: #52634b0c; font: italic 8rem Georgia, serif; pointer-events: none; }
.hf-compare-eyebrow { color: #967b53; font-size: .8rem; letter-spacing: .22em; font-weight: 700; }
.hf-compare-intro h1 { text-wrap: balance; position: relative; font: 700 clamp(1.8rem, 4vw, 3rem)/1.6 'Noto Serif TC', serif; margin: .6rem 0 1rem; }
.hf-compare-intro > p:last-child { line-height: 1.9; color: #69715f; max-width: 40rem; }
.hf-compare-gallery { margin: 0 0 2.6rem; }
.hf-compare-gallery-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.hf-compare-gallery-head h2 { font: 700 1.45rem/1.5 'Noto Serif TC', serif; }
.hf-compare-gallery-head p { flex: 0 0 auto; padding: .2rem 0 .2rem .8rem; border-left: 2px solid #b9a174; color: #52634b; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hf-compare-gallery-shell { position: relative; }
.hf-compare-gallery-shell::before, .hf-compare-gallery-shell::after { content: ''; position: absolute; z-index: 2; top: 0; bottom: 0; width: 2.8rem; pointer-events: none; }
.hf-compare-gallery-shell::before { left: 0; background: linear-gradient(90deg, #f7f5f0 0%, rgba(247,245,240,0) 100%); }
.hf-compare-gallery-shell::after { right: 0; background: linear-gradient(270deg, #f7f5f0 0%, rgba(247,245,240,0) 100%); }
.hf-compare-gallery-track { display: grid; grid-auto-flow: column; grid-auto-columns: 145.2px; gap: 1rem; overflow-x: auto; padding: .35rem .1rem 1rem; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
.hf-compare-gallery-track::-webkit-scrollbar { display: none; }
.hf-compare-gallery-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.hf-compare-gallery-card { --plan-color: #52634b; --plan-surface: #dde1d7; --plan-ink: #34412d; position: relative; display: block; width: 145.2px; height: 242px; min-width: 0; aspect-ratio: 3 / 5; overflow: hidden; padding: 0; border: 2px solid color-mix(in srgb, var(--plan-color) 78%, #fff); border-radius: 8px; appearance: none; background-color: var(--plan-surface); background-image: var(--hf-card-image); background-position: center; background-repeat: no-repeat; background-size: cover; color: var(--plan-ink); text-align: left; scroll-snap-align: start; box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--plan-color) 55%, transparent), 0 2px 5px rgba(40,48,35,.12); cursor: pointer; isolation: isolate; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; animation: hf-gallery-card-in .45s both; }
.hf-compare-gallery-card:nth-child(2) { animation-delay: .04s; }
.hf-compare-gallery-card:nth-child(3) { animation-delay: .08s; }
.hf-compare-gallery-card:nth-child(4) { animation-delay: .12s; }
.hf-compare-gallery-card:nth-child(5) { animation-delay: .16s; }
.hf-compare-gallery-card[data-plan-id="pushi"] { --plan-surface: #e2e1d7; }
.hf-compare-gallery-card[data-plan-id="fuqi"] { --plan-surface: #d8ddd1; }
.hf-compare-gallery-card[data-plan-id="yuanrong"] { --plan-surface: #cdd5c7; }
.hf-compare-gallery-card[data-plan-id="xingfu"] { --plan-color: #8a6b43; --plan-surface: #ddd3bf; --plan-ink: #59462e; }
.hf-compare-gallery-card[data-plan-id="zungui"] { --plan-color: #815e38; --plan-surface: #d3c4ae; --plan-ink: #4e3b29; }
.hf-compare-gallery-card[data-plan-id="zunrong"] { --plan-color: #73553b; --plan-surface: #c6b7a3; --plan-ink: #46362b; }
.hf-compare-gallery-card[data-plan-id="haiyang-a"] { --plan-color: #3e6b76; --plan-surface: #c6d7d9; --plan-ink: #294e57; }
.hf-compare-gallery-card[data-plan-id="haiyang-b"] { --plan-color: #356474; --plan-surface: #b9cfd4; --plan-ink: #274b57; }
.hf-compare-gallery-card[data-plan-id="haiyang-c"] { --plan-color: #315b69; --plan-surface: #acc4cb; --plan-ink: #244550; }
.hf-compare-gallery-card[data-plan-id="senlin-a"] { --plan-color: #557052; --plan-surface: #cad5c4; --plan-ink: #334c32; }
.hf-compare-gallery-card[data-plan-id="senlin-b"] { --plan-color: #496546; --plan-surface: #bbcbb4; --plan-ink: #2f482e; }
.hf-compare-gallery-card[data-plan-id="senlin-c"] { --plan-color: #405d3e; --plan-surface: #acbea5; --plan-ink: #293f29; }
.hf-compare-gallery-card:hover { transform: translateY(-3px); border-color: var(--plan-color); box-shadow: 0 18px 30px -18px color-mix(in srgb, var(--plan-color) 70%, transparent), 0 4px 8px rgba(40,48,35,.13); }
.hf-compare-gallery-card:active { transform: translateY(-1px) scale(.985); }
.hf-compare-gallery-card[aria-pressed="true"] { border-color: var(--plan-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--plan-color) 22%, transparent), 0 18px 30px -18px color-mix(in srgb, var(--plan-color) 70%, transparent); }
.hf-compare-gallery-card::after { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(255,255,252,.16), transparent 62%); pointer-events: none; }
.hf-compare-gallery-number { position: absolute; z-index: 2; top: 6.5%; left: 8%; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.hf-compare-gallery-number-line { position: absolute; z-index: 2; top: 14%; left: 10%; width: 24%; height: 1px; background: var(--plan-color); transform: rotate(-14deg); transform-origin: left center; }
.hf-compare-gallery-tier { position: absolute; z-index: 2; top: 21%; left: 8%; max-width: 84%; padding: 5px 10px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--plan-color) 11%, rgba(255,255,255,.68)); font-size: 11px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.hf-compare-gallery-name { position: absolute; z-index: 2; top: 34%; left: 8%; max-width: 88%; overflow: hidden; font: 700 20px/1.2 'Noto Serif TC', serif; text-overflow: ellipsis; white-space: nowrap; }
.hf-compare-gallery-divider { position: absolute; z-index: 2; top: 49%; left: 9%; width: 15%; height: 1px; background: color-mix(in srgb, var(--plan-color) 60%, transparent); }
.hf-compare-gallery-price { position: absolute; z-index: 2; top: 54%; left: 8%; max-width: 88%; font: 700 16px/1.2 'Noto Serif TC', serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hf-compare-gallery-check { position: absolute; z-index: 2; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border: 1px solid rgba(255,255,255,.72); border-radius: 4px; background: var(--plan-color); color: #fff; box-shadow: 0 5px 14px -8px rgba(31,42,28,.8); font-size: 10px; font-weight: 700; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; }
.hf-compare-gallery-card[aria-pressed="true"] .hf-compare-gallery-check { opacity: 1; transform: translateY(0); }
.hf-compare-gallery-nav { position: absolute; z-index: 4; top: calc(50% - 1.6rem); display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border: 1px solid rgba(82,99,75,.24); border-radius: 50%; background: rgba(253,252,248,.94); color: #52634b; box-shadow: 0 12px 28px -16px rgba(42,53,37,.75); transition: opacity .2s ease, transform .2s ease, background-color .2s ease; }
.hf-compare-gallery-nav:hover:not(:disabled) { transform: scale(1.05); background: #fff; }
.hf-compare-gallery-nav:disabled { opacity: .28; cursor: default; }
.hf-compare-gallery-nav--prev { left: -1.6rem; }
.hf-compare-gallery-nav--next { right: -1.6rem; }
@keyframes hf-gallery-card-in { from { opacity: .35; transform: scale(.97); } }
@media (min-width: 1280px) {
   .hf-compare-gallery-head, .hf-compare-gallery-shell { width: 68%; margin-left: auto; }
}
@media (min-width: 768px) and (max-width: 1279px) {
   .hf-compare-gallery-track { grid-auto-columns: 145.2px; }
}
/* 比較頁專用的頁內字級控制。手機隱藏浮動工具列後，字級調整必須仍然可用，
   而且不能像浮動層那樣蓋住比較表。桌機的浮動工具列在 1200px 內容區之外，
   不會擋到表格，因此桌機維持原本的浮動控制、這一組不顯示。 */
.hf-compare-font { display: none; align-items: center; justify-content: flex-end; gap: .5rem; padding: 1rem 0 0; font-size: .8rem; color: #68705f; }
.hf-compare-font button { min-width: 44px; min-height: 44px; border: 1px solid #738268; border-radius: .45rem; color: #42543a; background: #fdfcf8; }
.hf-compare-toolbar {
   position: sticky;
   top: 6rem;
   z-index: 40;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: .8rem 1rem;
   padding: 1.2rem 0;
   border: 0;
   border-radius: 0;
   background: transparent;
   box-shadow: none;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
}
.hf-compare-toolbar.is-floating { isolation: isolate; }
.hf-compare-toolbar.is-floating::after { content: ''; position: absolute; z-index: 0; top: var(--hf-compare-gradient-top, -1rem); bottom: 0; left: 50%; right: auto; width: 100vw; height: auto; transform: translateX(-50%); background: linear-gradient(180deg, rgba(238,231,216,.88) 0%, rgba(238,231,216,.5) 68%, rgba(238,231,216,.04) 100%); pointer-events: none; }
.hf-compare-toolbar.is-floating > * { position: relative; z-index: 1; }
.hf-compare-toolbar > button[data-compare-open] { margin-left: auto; }
.hf-compare-toolbar label { display: flex; gap: .5rem; align-items: center; min-height: 44px; }
.hf-compare-toolbar input { width: 1.15rem; height: 1.15rem; accent-color: #52634b; }
.hf-compare-toolbar small { color: #68705f; }
/* 特異性要壓過上面的 .hf-compare-toolbar button 通則，否則圓角與內距吃不到。 */
.hf-compare-toolbar .hf-compare-diff-toggle { display: inline-flex; align-items: center; gap: .55rem; padding: .6rem 1.15rem; border: 1px solid #738268; border-radius: 999px; background: #fdfcf8; color: #42543a; font-size: .85rem; font-weight: 700; }
.hf-compare-toolbar .hf-compare-diff-toggle[aria-pressed="true"] { background: #52634b; border-color: #52634b; color: #fdfcf8; }
.hf-compare-toolbar .hf-compare-diff-toggle small { font-weight: 400; color: #68705f; }
.hf-compare-toolbar .hf-compare-diff-toggle[aria-pressed="true"] small { color: #dfe6d8; }
.hf-compare-toolbar .hf-compare-diff-toggle[disabled] { opacity: .5; }
.hf-compare-scroll-hint { color: #727963; font-size: .75rem; padding-bottom: .6rem; }
.hf-compare-table-scroll { overflow-x: auto; max-width: 100%; border: 1px solid #d9dbd0; border-radius: .7rem; background: #fcfbf8; }
.hf-compare-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; line-height: 1.7; }
.hf-compare-table th, .hf-compare-table td { min-width: 210px; max-width: 250px; padding: 1.2rem; vertical-align: top; text-align: left; border-bottom: 1px solid #e1e2d8; border-right: 1px solid #e1e2d8; overflow-wrap: anywhere; }
.hf-compare-table tr > :first-child { position: sticky; left: 0; z-index: 2; min-width: 150px; width: 150px; background: #f3f3eb; box-shadow: 2px 0 3px #2830200a; }
.hf-compare-table thead th { background: #e9ede3; }
.hf-compare-table thead h2 { font: 700 1.35rem 'Noto Serif TC', serif; margin: .6rem 0; }
.hf-compare-table small { display: block; font-size: .72rem; font-weight: 400; color: #66745d; margin: .4rem 0; }
.hf-compare-table thead button { color: #68705f; text-decoration: underline; margin-top: .5rem; min-height: 44px; }
.hf-compare-group th, .hf-compare-group td { background: #e7e9df !important; font-size: .8rem; padding-top: .6rem; padding-bottom: .6rem; }
.hf-compare-contract-links { display: grid; gap: .55rem; }
.hf-compare-contract-links .hf-compare-contract-link { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; min-height: 44px; margin-top: 0; padding: .65rem .55rem; border-radius: .6rem; line-height: 1.3; text-decoration: none; }
.hf-compare-contract-links .hf-compare-contract-link:hover { filter: brightness(.95); }
.hf-price-info { display: inline; margin-left: .35rem; font-size: .8rem; }
.hf-price-info summary { display: inline; cursor: pointer; color: #7e6742; }
.hf-price-info p { font-weight: 400; padding: .6rem; background: #eee7d8; margin-top: .4rem; }
.hf-compare-empty { padding: 1.5rem; border: 1px dashed #c6cbbf; border-radius: 8px; background: rgba(253,252,248,.62); }
.hf-compare-empty strong { display: block; font: 700 1.1rem 'Noto Serif TC', serif; }
.hf-compare-empty p { margin-top: .4rem; color: #69715f; font-size: .85rem; }
.hf-compare-price-note { margin-top: .8rem; font-size: .78rem; color: #68705f; }
.hf-compare-disclosures { margin-top: 2.5rem; border-top: 1px solid #d4d5c8; }
.hf-compare-disclosures details { border-bottom: 1px solid #d4d5c8; padding: 1.3rem 0; }
.hf-compare-disclosures summary { cursor: pointer; font-weight: 700; }
.hf-compare-disclosures ul { margin: 1rem 0 0 1.3rem; list-style: disc; color: #69715f; line-height: 2; }
.hf-compare-cta { padding-top: 3rem; padding-bottom: 8rem; }
.hf-compare-cta h2 { font: 700 1.5rem/1.6 'Noto Serif TC', serif; }
.hf-compare-cta p { margin: 1rem 0 1.5rem; color: #69715f; }
.hf-compare-cta > div { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; }
.hf-compare-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); }
#hf-compare-panel :focus-visible, .hf-compare-main :focus-visible, [data-plan-id] :focus-visible, .hf-compare-car:focus-visible { outline: 3px solid #b48a51; outline-offset: 3px; }
@media (max-width: 767px) {
   .hf-compare-toolbar { top: 5.5rem; }
   #hf-floating-tools { bottom: calc(5.9rem + env(safe-area-inset-bottom, 0px)); }
  /* 比較表需要整個螢幕寬度，固定在右側的浮動工具列在垂直方向必然蓋住某段欄位，
     怎麼調位置都無解。因此窄螢幕整組隱藏，字級控制改由頁內的 .hf-compare-font 提供。 */
  .hf-compare-page #hf-floating-tools { display: none; }
  .hf-compare-page .hf-compare-font { display: flex; }
   #hf-compare-car.hf-compare-car-independent { position: fixed; right: 1rem; bottom: calc(5.9rem + env(safe-area-inset-bottom, 0px)); }
  .hf-compare-toast { bottom: 152px; right: 5rem; max-width: calc(100vw - 6rem); font-size: .8rem; }
  .hf-compare-toast::after { display: none; }
  .hf-compare-toast a { margin-left: 0; display: block; }
  .hf-compare-panel-head { top: -1rem; }
  #hf-compare-panel { inset: .6rem; width: calc(100% - 1.2rem); max-height: calc(100dvh - 1.2rem); padding: 1rem; }
   .hf-compare-main { width: calc(100% - 2rem); padding: 7rem 0 4rem; }
   .hf-compare-cta { padding-bottom: 6rem; }
  .hf-compare-intro { padding-bottom: 2rem; }
  .hf-compare-watermark { font-size: 5rem; }
   .hf-compare-gallery { margin-bottom: 1.6rem; }
   .hf-compare-gallery-head { align-items: center; }
   .hf-compare-gallery-head h2 { font-size: 1.2rem; }
   .hf-compare-gallery-track { grid-auto-columns: 145.2px; gap: .625rem; padding-right: 1.5rem; touch-action: pan-y pinch-zoom; }
   .hf-compare-gallery-shell::before, .hf-compare-gallery-shell::after { width: 1.5rem; }
   .hf-compare-gallery-nav { top: calc(50% - 1.4rem); width: 2.8rem; height: 2.8rem; }
   .hf-compare-gallery-nav--prev { left: -.4rem; }
   .hf-compare-gallery-nav--next { right: -.4rem; }
   .hf-compare-gallery-copy { min-height: 6.2rem; }
  .hf-compare-table th, .hf-compare-table td { min-width: 38vw; width: 38vw; max-width: 38vw; padding: .85rem .65rem; font-size: .8rem; }
  .hf-compare-table tr > :first-child { min-width: 28vw; width: 28vw; max-width: 28vw; }
  .hf-compare-table thead h2 { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
   .hf-compare-car, .hf-count-bump, .hf-compare-toast, .hf-compare-gallery-card { animation: none; transition: none; }
   .hf-compare-gallery-track { scroll-behavior: auto; }
   .hf-compare-gallery-visual::before, .hf-compare-gallery-visual::after { transition: none; }
}