.hv5{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw) !important;margin-right:0 !important;background:var(--paper);color:var(--ink);font:400 16px/1.8 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
.hv5>*{margin-block:0 !important}
.hv5 *,.hv5 *:before,.hv5 *:after{box-sizing:border-box}
.hv5 a{color:inherit;text-decoration:none}
.hv5 p,.hv5 h1,.hv5 h2,.hv5 h3,.hv5 h4,.hv5 ul,.hv5 ol,.hv5 li,.hv5 figure,.hv5 details,.hv5 summary{margin:0;padding:0}
.hv5 ul,.hv5 ol{list-style:none}
.hv5 p:empty{display:none !important}
.hv5 :where(.is-layout-flow,.is-layout-constrained,.is-layout-flex)>*{margin-block:0}
.hv5 :is(h1,h2,h3,h4){color:inherit;font-family:var(--serif);text-transform:none}
.hv5 .wp-block-button__link{background:none;color:inherit;padding:0;border:0;border-radius:0;box-shadow:none;font:inherit;letter-spacing:inherit;text-align:left;width:auto;min-height:0}
.hv5 .wp-block-buttons{margin:0}
.hv5 img{max-width:100%;height:auto}
body:has(.hv5){background:#F4F2ED;overflow-x:hidden}
body:has(.hv5) [data-vertical-spacing]{padding-top:0 !important;padding-bottom:0 !important}
body:has(.hv5) .hero-section,body:has(.hv5) .entry-header{display:none !important}
html:has(.hv5){scroll-behavior:smooth}
.hv5 [id]{scroll-margin-top:80px}
/* v5「一個網站的誕生」預覽稿：之後轉成原生區塊，樣式移到外掛 */
.hv5{--ink:#0F1A24;--paper:#F4F2ED;--paper2:#ECE8DF;--or:#E8704A;--b:#1F5E95;--sub:#5B6470;--line:rgba(15,26,36,.12);
--serif:"Noto Serif TC","Songti TC",serif;--sans:"Noto Sans TC",system-ui,sans-serif;--disp:"Instrument Serif","Noto Serif TC",serif;--mono:"JetBrains Mono",ui-monospace,monospace}
.hv5 .w{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.hv5 .btn>.wp-block-button__link{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 10px 0 26px;border-radius:999px;font:700 15px/1 var(--sans);letter-spacing:.06em;transition:transform .3s}
.hv5 .btn.pri>.wp-block-button__link{background:var(--ink);color:var(--paper)}
.hv5 .btn.pri>.wp-block-button__link i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--or);color:#fff;font-style:normal}
.hv5 .btn.ghost>.wp-block-button__link{padding:0 4px;border-bottom:1.5px solid currentColor;border-radius:0;min-height:40px}
.hv5 .btn>.wp-block-button__link:hover{transform:translateY(-2px)}
/* ---------- 序幕 ---------- */
.hv5 .prologue{position:relative;overflow:hidden;padding:clamp(20px,3vw,44px) 0 clamp(28px,3.5vw,52px)}
.hv5 .prologue .w{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(24px,4vw,64px);align-items:center}
.hv5 .act{font:500 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--b);display:flex;align-items:center;gap:12px}
.hv5 .act:after{content:"";width:56px;height:1px;background:currentColor;opacity:.5}
.hv5 .eyebrow{margin-top:0;font:700 14px/1.6 var(--sans);letter-spacing:.12em;color:var(--b)}
.hv5 .eyebrow em{font-style:normal;color:var(--or);margin:0 .5em}
.hv5 h1{margin-top:14px;font:900 clamp(30px,4.4vw,64px)/1.25 var(--serif);letter-spacing:.02em}
@media (max-width:360px){.hv5 h1{font-size:29px;letter-spacing:0}}
.hv5 h1 span{display:block;white-space:nowrap}
.hv5 h1 :is(b,strong){color:var(--b);font-weight:900}
.hv5 .lead{margin-top:24px;max-width:31em;font-size:clamp(16px,1.3vw,18px);line-height:1.95;color:var(--sub)}
.hv5 .lead strong{color:var(--ink);font-weight:500}
@media (min-width:861px){.hv5 .lead span, .hv5 .lead strong{display:inline-block}}
.hv5 .acts{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.hv5 .sign{margin-top:28px;font:400 13px/1.7 var(--mono);color:var(--sub);letter-spacing:.04em}
/* 散落的碎片 */
.hv5 .scatter{position:relative;aspect-ratio:1/1;max-width:520px;width:100%;justify-self:end}
.hv5 .scatter:before{content:"";position:absolute;inset:12% 10%;border:1.5px dashed rgba(31,94,149,.35);border-radius:18px}
.hv5 .frag{position:absolute;background:#fff;border-radius:12px;box-shadow:0 1px 0 rgba(15,26,36,.06),0 22px 44px -22px rgba(15,26,36,.35);padding:14px 16px;font-size:13px;line-height:1.6;transform:rotate(var(--r,0deg));animation:drift 9s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes drift{0%,100%{translate:0 0}50%{translate:0 -8px}}
.hv5 .frag small{display:block;font:500 10.5px/1.4 var(--mono);letter-spacing:.08em;color:var(--sub);margin-bottom:6px}
.hv5 .f-ig{left:0;top:2%;width:46%;--r:-6deg}
.hv5 .f-ig .ph{aspect-ratio:1/1;border-radius:8px;background:linear-gradient(135deg,#E9DCCB,#D7C2A8);margin-bottom:8px;display:grid;place-items:center;font:italic 400 22px/1 var(--disp);color:#7A6248}
.hv5 .f-ig .mt{display:flex;justify-content:space-between;color:var(--sub);font-size:12px}
.hv5 .f-line{right:2%;top:10%;width:46%;--r:5deg;--d:-3s;background:#F2F7F0}
.hv5 .f-line .bub{display:inline-block;background:#fff;border-radius:14px 14px 14px 4px;padding:6px 12px;margin-top:4px;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.hv5 .f-line .bub.me{background:#B9E7A4;border-radius:14px 14px 4px 14px;float:right;clear:both}
.hv5 .f-line .typing{clear:both;padding-top:6px;color:var(--sub);font-size:12px}
.hv5 .f-card{left:6%;bottom:8%;width:50%;--r:4deg;--d:-5s;background:var(--ink);color:var(--paper)}
.hv5 .f-card small{color:rgba(244,242,237,.6)}
.hv5 .f-card :is(b,strong){display:block;font:700 18px/1.3 var(--serif);letter-spacing:.06em}
.hv5 .f-card span{display:block;margin-top:10px;font:400 11px/1.6 var(--mono);color:rgba(244,242,237,.7)}
.hv5 .f-sheet{right:0;bottom:2%;width:44%;--r:-4deg;--d:-7s}
.hv5 .f-sheet table{width:100%;border-collapse:collapse;font:400 11px/1.9 var(--mono)}
.hv5 .f-sheet td{border-bottom:1px solid var(--line);padding:0 4px}
.hv5 .f-sheet td:last-child{text-align:right;color:var(--or)}
.hv5 .f-q{right:4%;top:53%;--r:-2deg;--d:-2s;padding:8px 14px;background:var(--or);color:#fff;font:700 13px/1.4 var(--sans);border-radius:999px}
@media (prefers-reduced-motion:reduce){.hv5 .frag{animation:none}}
@media (max-width:860px){
.hv5 .prologue .w{grid-template-columns:1fr}
.hv5 .scatter{justify-self:center;max-width:440px;margin-top:8px}
}
@media (max-width:420px){.hv5 .frag{font-size:12px;padding:11px 12px}.hv5 .f-card :is(b,strong){font-size:15px}}
/* 序幕插圖（gpt-image-2，沿用首頁 A 現代社論風、女性 A） */
.hv5 .pro-art{justify-self:end;width:100%;max-width:940px}
@media (min-width:1200px){.hv5 .pro-art{width:118%;margin-right:-10%}}
.hv5 .pro-art img{display:block;width:100%;height:auto;position:relative}
@media (max-width:860px){.hv5 .pro-art{justify-self:center;width:100%;max-width:600px;margin:4px 0 0}}
/* ---------- 範例網站展示 ---------- */
.hv5 .showcase{padding:clamp(64px,8vw,120px) 0;background:var(--paper2)}
.hv5 .sc-head{max-width:40em}
.hv5 .kicker{font:500 12px/1 var(--mono);letter-spacing:.18em;color:var(--b);display:flex;align-items:center;gap:12px}
.hv5 .kicker:after{content:"";width:56px;height:1px;background:currentColor;opacity:.5}
.hv5 .showcase h2{margin-top:18px;font:900 clamp(28px,3.4vw,44px)/1.35 var(--serif);letter-spacing:.02em}
.hv5 .showcase h2 :is(b,strong){color:var(--b);font-weight:900}
.hv5 .sc-lead{margin-top:16px;color:var(--sub);line-height:1.9}
.hv5 .sc-tabs{margin-top:36px;display:flex;gap:10px;flex-wrap:wrap}
.hv5 .sc-tab>.wp-block-button__link{appearance:none;border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:12px 22px;cursor:pointer;text-align:left;font:700 15px/1.3 var(--sans);letter-spacing:.06em;transition:background .25s,color .25s,border-color .25s}
.hv5 .sc-tab>.wp-block-button__link small{display:block;margin-top:2px;font:400 12px/1.4 var(--sans);letter-spacing:.02em;color:var(--sub)}
.hv5 .sc-tab>.wp-block-button__link[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.hv5 .sc-tab>.wp-block-button__link[aria-selected="true"] small{color:rgba(244,242,237,.7)}
.hv5 .sc-tab>.wp-block-button__link:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.hv5 .sc-panel{margin-top:40px;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,64px);align-items:center}
.hv5 .sc-panel[hidden]{display:none}
.hv5 .stage{position:relative;padding:0 8% 9% 0}
.hv5 .laptop{background:var(--ink);border-radius:14px 14px 4px 4px;padding:12px 12px 14px;box-shadow:0 40px 70px -40px rgba(15,26,36,.55)}
.hv5 .laptop img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:4px;background:#fff}
.hv5 .laptop:after{content:"";display:block;height:12px;margin:14px -5% 0;background:linear-gradient(#cfd3d8,#aeb4bb);border-radius:0 0 14px 14px}
.hv5 .phone{position:absolute;right:0;bottom:0;width:24%;background:var(--ink);border-radius:26px;padding:8px;box-shadow:0 30px 50px -24px rgba(15,26,36,.6)}
.hv5 .phone img{display:block;width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:19px;background:#fff}
.hv5 .sc-tag{display:inline-block;font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--or);background:rgba(232,112,74,.1);padding:7px 11px;border-radius:999px}
.hv5 .sc-name{margin-top:16px;font:900 clamp(24px,2.4vw,32px)/1.35 var(--serif)}
.hv5 .sc-for{margin-top:6px;color:var(--sub)}
.hv5 .sc-points{margin-top:22px;list-style:none;display:grid;gap:14px}
.hv5 .sc-points li{position:relative;padding-left:28px;line-height:1.75}
.hv5 .sc-points li:before{content:"+";position:absolute;left:0;top:-.1em;font:400 24px/1 var(--disp);color:var(--or)}
.hv5 .sc-points :is(b,strong){display:block;font-weight:700}
.hv5 .sc-points span{color:var(--sub);font-size:15px}
.hv5 .sc-go{margin-top:28px}
.hv5 .sc-note{margin-top:14px;font-size:13px;color:var(--sub)}
@media (max-width:860px){.hv5 .sc-panel{grid-template-columns:1fr}.hv5 .stage{padding:0 10% 12% 0}.hv5 .phone{width:28%}}
@media (max-width:420px){.hv5 .sc-tab>.wp-block-button__link{flex:1;padding:10px 12px;text-align:center}.hv5 .sc-tab>.wp-block-button__link small{display:none}}
/* ---------- 拆解一個網站（10/20 縮小：桌機四欄、手機橫向小卡） ---------- */
.hv5 .anatomy{padding:clamp(56px,7vw,100px) 0}
.hv5 .anatomy h2{margin-top:18px;font:900 clamp(26px,3vw,40px)/1.35 var(--serif);letter-spacing:.02em}
.hv5 .anatomy h2 :is(b,strong){color:var(--b);font-weight:900}
.hv5 .an-grid{margin-top:36px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hv5 .an-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.hv5 .an-card:before{content:"";display:block;aspect-ratio:3/2;border-bottom:1px solid var(--line);background:#F8F6F3 center/cover no-repeat}
.hv5 .an-body{padding:16px 18px 20px;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:start}
.hv5 .an-no{grid-row:span 3;font:italic 400 30px/1 var(--disp);color:var(--or)}
.hv5 .an-q{font:500 11px/1.6 var(--mono);letter-spacing:.04em;color:var(--b)}
.hv5 .an-card h3{font:900 18px/1.4 var(--serif)}
.hv5 .an-card p.d{color:var(--sub);font-size:14px;line-height:1.75}
.hv5 .an-opt{grid-column:1/-1;border:1.5px dashed rgba(31,94,149,.45);border-radius:16px;padding:16px 22px;display:grid;grid-template-columns:auto 1fr auto;column-gap:16px;row-gap:2px;align-items:center}
.hv5 .an-opt .an-no{grid-column:1;grid-row:1/3;color:var(--b)}
.hv5 .an-opt h3{grid-column:2;grid-row:1;font:900 18px/1.4 var(--serif)}
.hv5 .an-opt h3 small{margin-left:10px;font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--b);vertical-align:middle}
.hv5 .an-opt p{grid-column:2;grid-row:2;color:var(--sub);font-size:14px;line-height:1.75}
.hv5 .an-opt:after{content:"+";grid-column:3;grid-row:1/3;width:44px;height:44px;border-radius:50%;border:1.5px dashed rgba(31,94,149,.45);display:grid;place-items:center;font:400 24px/1 var(--disp);color:var(--b)}
@media (max-width:1100px){.hv5 .an-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
.hv5 .an-grid{grid-template-columns:1fr;gap:12px}
.hv5 .an-card{flex-direction:row;align-items:stretch}
.hv5 .an-card:before{flex:0 0 38%;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line);background-size:cover}
.hv5 .an-body{padding:12px 14px;grid-template-columns:1fr}
.hv5 .an-no{grid-row:auto;font-size:22px}
.hv5 .an-q{display:none}
.hv5 .an-card h3{font-size:16px}
.hv5 .an-card p.d{font-size:13px;line-height:1.65}
.hv5 .an-opt{grid-template-columns:auto 1fr;padding:14px 16px}.hv5 .an-opt:after{content:"+";display:none}
}
/* ---------- 更多範例（精簡小卡牆） ---------- */
.hv5 .more{padding:clamp(56px,7vw,100px) 0;background:var(--paper2)}
.hv5 .more h2{margin-top:18px;font:900 clamp(26px,3vw,40px)/1.35 var(--serif);letter-spacing:.02em}
.hv5 .more h2 :is(b,strong){color:var(--b);font-weight:900}
.hv5 .mo-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hv5 .mo-nav{display:flex;gap:10px;flex:none}
.hv5 .mo-nav button{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);font:400 20px/1 var(--sans);cursor:pointer;transition:background .2s,opacity .2s}
.hv5 .mo-nav button:hover{background:var(--ink);color:var(--paper)}
.hv5 .mo-nav button:disabled{opacity:.35;cursor:default;background:#fff;color:var(--ink)}
.hv5 .mo-grid{margin-top:28px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 18px;margin-right:calc(50% - 50vw);padding-right:clamp(20px,4vw,48px);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hv5 .mo-grid::-webkit-scrollbar{display:none}
.hv5 .mo-card{flex:0 0 clamp(260px,26vw,380px);scroll-snap-align:start}
.hv5 .mo-card{display:block;color:var(--ink)}
.hv5 .mo-card figure{aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 18px 30px -24px rgba(15,26,36,.45);transition:transform .3s,box-shadow .3s}
.hv5 .mo-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.hv5 .mo-card:hover figure{transform:translateY(-3px);box-shadow:0 24px 36px -24px rgba(15,26,36,.55)}
.hv5 .mo-meta{margin-top:10px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.hv5 .mo-meta :is(b,strong){font:700 15px/1.4 var(--sans)}
.hv5 .mo-meta span{font:400 12px/1.4 var(--mono);color:var(--sub);white-space:nowrap}
.hv5 .mo-all{margin-top:28px}
@media (max-width:860px){.hv5 .mo-grid{margin-left:calc(-1*clamp(20px,4vw,48px));padding-left:clamp(20px,4vw,48px);scroll-padding-left:clamp(20px,4vw,48px)}.hv5 .mo-card{flex-basis:62%}.hv5 .mo-nav{display:none}.hv5 .mo-meta :is(b,strong){font-size:14px}}
/* ---------- 怎麼開始：兩種方案 ---------- */
.hv5 .plans{padding:clamp(56px,7vw,100px) 0}
.hv5 .plans h2{margin-top:18px;font:900 clamp(26px,3vw,40px)/1.35 var(--serif);letter-spacing:.02em}
.hv5 .plans h2 :is(b,strong){color:var(--b);font-weight:900}
.hv5 .pl-grid{margin-top:32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hv5 .pl-card{border-radius:20px;padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;background:#fff;border:1px solid var(--line)}
.hv5 .pl-card.dark{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.hv5 .pl-en{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--or)}
.hv5 .pl-card h3{margin-top:12px;font:900 clamp(20px,1.9vw,26px)/1.4 var(--serif)}
.hv5 .pl-for{margin-top:6px;font-size:14px;color:var(--sub)}
.hv5 .pl-card.dark .pl-for{color:rgba(244,242,237,.7)}
.hv5 .pl-price{margin-top:18px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:6px}
.hv5 .pl-card.dark .pl-price{border-color:rgba(244,242,237,.18)}
.hv5 .pl-price :is(b,strong){font:400 clamp(32px,3vw,42px)/1 var(--disp);letter-spacing:.01em}
.hv5 .pl-price span{font-size:14px;color:var(--sub)}
.hv5 .pl-card.dark .pl-price span{color:rgba(244,242,237,.7)}
.hv5 .pl-price.txt :is(b,strong){font:900 20px/1.4 var(--serif)}
.hv5 .pl-list{margin-top:16px;list-style:none;display:grid;gap:10px;flex:1}
.hv5 .pl-list li{position:relative;padding-left:22px;font-size:15px;line-height:1.7}
.hv5 .pl-list li:before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--b)}
.hv5 .pl-card.dark .pl-list li:before{background:var(--or)}
.hv5 .pl-act{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.hv5 .pl-card.dark .btn.pri>.wp-block-button__link{background:var(--paper);color:var(--ink)}
.hv5 .btn.line>.wp-block-button__link{border:1.5px solid var(--ink);padding:0 22px;min-height:48px}
.hv5 .pl-note{margin-top:14px;font-size:13px;color:var(--sub)}
.hv5 .pl-card.dark .pl-note{color:rgba(244,242,237,.6)}
.hv5 .pl-help{margin-top:18px;font-size:14px;color:var(--sub)}
.hv5 .pl-help a{color:var(--b);border-bottom:1px solid currentColor}
@media (max-width:860px){.hv5 .pl-grid{grid-template-columns:1fr}}
/* ---------- 誰幫你做：設計師凱瑞（深色引言帶，緊湊橫排） ---------- */
.hv5 .maker{padding:clamp(36px,4.5vw,56px) 0;background:var(--ink);color:var(--paper)}
.hv5 .mk-row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3vw,40px);align-items:center}
.hv5 .mk-photo{width:clamp(84px,8vw,112px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid rgba(244,242,237,.25)}
.hv5 .mk-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.hv5 .maker .kicker{color:#8FC0EA}
.hv5 .mk-quote{margin-top:10px;font:900 clamp(22px,2.4vw,32px)/1.45 var(--serif);letter-spacing:.02em}
.hv5 .mk-quote em{font-style:normal;color:#F3A487}
.hv5 .mk-quote .nw{display:inline-block;white-space:nowrap}
.hv5 .mk-sub{margin-top:8px;color:rgba(244,242,237,.72);font-size:14px;line-height:1.8}
.hv5 .mk-sub span{display:inline-block}
.hv5 .mk-who{margin-top:6px;font-size:13px;color:rgba(244,242,237,.55)}
.hv5 .maker .btn.pri>.wp-block-button__link{background:var(--paper);color:var(--ink);white-space:nowrap}
@media (max-width:960px){.hv5 .mk-row{grid-template-columns:auto 1fr}.hv5 .mk-act{grid-column:1/-1}}
@media (max-width:560px){.hv5 .mk-row{grid-template-columns:1fr;gap:14px}.hv5 .mk-photo{width:72px}}
/* ---------- 收尾：預約＋常見問題 ---------- */
.hv5 .closing{padding:clamp(56px,7vw,100px) 0}
.hv5 .cl-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:start}
.hv5 .cl-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(24px,2.6vw,34px);position:sticky;top:24px}
.hv5 .closing h2{margin-top:16px;font:900 clamp(26px,2.8vw,36px)/1.4 var(--serif);letter-spacing:.02em}
.hv5 .closing h2 :is(b,strong){color:var(--b);font-weight:900}
.hv5 .cl-card p.l{margin-top:12px;color:var(--sub);line-height:1.9;font-size:15px}
.hv5 .cl-card p.l span{display:inline-block}
.hv5 .cl-acts{margin-top:22px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hv5 .cl-meta{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--sub)}
.hv5 .cl-meta span:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--or);margin-right:8px;vertical-align:middle}
.hv5 .faq{border-top:1px solid var(--line)}
.hv5 .faq details{border-bottom:1px solid var(--line)}
.hv5 .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 2px;font:700 16px/1.5 var(--sans)}
.hv5 .faq summary::-webkit-details-marker{display:none}
.hv5 .faq summary:after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font:400 20px/1 var(--disp);color:var(--b);transition:transform .25s}
.hv5 .faq details[open] summary:after{transform:rotate(45deg)}
.hv5 .faq details p{padding:0 2px 18px;color:var(--sub);font-size:15px;line-height:1.9;max-width:36em}
.hv5 .faq-h{font:500 12px/1 var(--mono);letter-spacing:.18em;color:var(--b);margin-bottom:6px}
@media (max-width:860px){.hv5 .cl-grid{grid-template-columns:1fr}.hv5 .cl-card{position:static}}
.hv5 .pro-art{position:relative}
.hv5 .pro-art:before{content:"";position:absolute;inset:4% 2% 8% 6%;background:radial-gradient(closest-side,rgba(143,192,234,.42),rgba(232,112,74,.14) 60%,transparent 100%);filter:blur(10px);pointer-events:none}
.hv5 .chip{position:absolute;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border:1px solid rgba(15,26,36,.08);border-radius:12px;padding:9px 13px;font:500 13px/1.3 var(--sans);color:var(--ink);box-shadow:0 14px 28px -16px rgba(15,26,36,.45);white-space:nowrap;animation:drift 8s ease-in-out infinite}
.hv5 .chip.c1:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#2E9E6B;box-shadow:0 0 0 4px rgba(46,158,107,.15)}
.hv5 .chip :is(b,strong){color:var(--or);font-weight:700;letter-spacing:.04em}
.hv5 .chip.c1{left:2%;bottom:16%}
.hv5 .chip.c2{right:0;bottom:4%;animation-delay:-4s}
@keyframes drift{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media (prefers-reduced-motion:reduce){.hv5 .chip{animation:none}}
@media (max-width:420px){.hv5 .chip{font-size:11.5px;padding:7px 10px}}
/* 首屏調整：柔光、特色列 */
.hv5 .prologue .w{position:relative}
.hv5 .feats{margin-top:30px;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:560px}
.hv5 .feats li{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.hv5 .feats li:before{content:"";background:rgba(232,112,74,.12) center/20px no-repeat;grid-row:span 2;width:38px;height:38px;border-radius:11px;background:rgba(232,112,74,.12);color:var(--or);display:grid;place-items:center}
.hv5 .feats :is(b,strong){font:700 14px/1.35 var(--sans)}
.hv5 .feats small{font-size:12px;color:var(--sub);line-height:1.4}
@media (max-width:560px){.hv5 .feats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:22px}.hv5 .feats li{grid-template-columns:1fr;text-align:center;justify-items:center;row-gap:6px}.hv5 .feats li:before{content:"";background:rgba(232,112,74,.12) center/20px no-repeat;grid-row:auto;width:34px;height:34px}.hv5 .feats :is(b,strong){font-size:12.5px}.hv5 .feats small{display:none}}
/* ===== 第一輪品質提升（得獎等級目標）===== */
/* 1. 字體細節：平衡換行、避免孤字、說明文字加深 */
.hv5 h1, .hv5 h2, .hv5 h3, .hv5 .mk-quote{text-wrap:balance}
.hv5 p, .hv5 li, .hv5 .sc-lead{text-wrap:pretty}
.hv5{--sub:#4F5967}
.hv5 .sc-lead{font-size:clamp(15px,1.15vw,17px);max-width:38em}
.hv5 .showcase h2, .hv5 .anatomy h2, .hv5 .more h2, .hv5 .plans h2, .hv5 .closing h2{letter-spacing:-.005em}
/* 2. 紙張顆粒質感 */
body:has(.hv5):after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,")}
/* 3. 章節編號系統 */
.hv5 .kicker em{display:inline;font:italic 400 30px/1 var(--disp);letter-spacing:0;color:var(--or);margin-right:2px;opacity:1;width:auto;height:auto;background:none}
.hv5 .maker .kicker em{color:#F3A487}
/* 4. 進場動畫（有 JS 才隱藏；減少動態時不做） */
.hv5 .js-rv [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.hv5 .js-rv [data-rv].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hv5 .js-rv [data-rv]{opacity:1;transform:none;transition:none}}
/* 5. 微互動 */
.hv5 .btn>.wp-block-button__link i{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.hv5 .btn>.wp-block-button__link:hover i{transform:translate(2px,-2px) rotate(8deg)}
.hv5 .btn.ghost>.wp-block-button__link{transition:color .25s,border-color .25s}
.hv5 .btn.ghost>.wp-block-button__link:hover{color:var(--or);border-color:var(--or)}
.hv5 .an-card, .hv5 .pl-card{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.hv5 .an-card:hover, .hv5 .pl-card:hover{transform:translateY(-4px);box-shadow:0 28px 44px -30px rgba(15,26,36,.45)}
.hv5 .mo-card img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hv5 .mo-card:hover img{transform:scale(1.035)}
.hv5 .mo-card:hover .mo-meta :is(b,strong){color:var(--b)}
.hv5 .stage .laptop, .hv5 .stage .phone{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hv5 .stage:hover .phone{transform:translateY(-8px)}
/* 6. 頁籤：滑動指示條＋內容淡入 */
.hv5 .sc-tabs{position:relative;display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.hv5 .sc-tab>.wp-block-button__link{border:0;background:transparent;position:relative;z-index:1;transition:color .3s}
.hv5 .sc-tab>.wp-block-button__link[aria-selected="true"]{background:transparent;border-color:transparent}
.hv5 .sc-ind{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:var(--ink);transition:transform .5s cubic-bezier(.2,.7,.2,1),width .5s cubic-bezier(.2,.7,.2,1);z-index:0}
@media (min-width:961px){.hv5 .showcase .sc-top{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}.hv5 .showcase .sc-top .sc-tabs{flex:none;margin:0 0 6px}}
.hv5 .sc-panel:not([hidden]){animation:panelIn .6s cubic-bezier(.2,.7,.2,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:420px){.hv5 .sc-tabs{display:flex}}
/* 7. 一致的鍵盤焦點 */
.hv5 a:focus-visible, .hv5 button:focus-visible, .hv5 summary:focus-visible, .hv5 [tabindex]:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:8px}
/* ===== 第二輪品質提升 ===== */
/* 標題排法輪替：拆解段左右分欄、方案段置中 */
@media (min-width:961px){
.hv5 .anatomy .sc-head{max-width:none;display:grid;grid-template-columns:1.1fr .9fr;column-gap:64px;align-items:end}
.hv5 .anatomy .sc-head .kicker{grid-column:1/-1}
.hv5 .anatomy .sc-head .sc-lead{margin:0 0 8px;justify-self:end;max-width:24em}
}
.hv5 .plans .sc-head{margin:0 auto;text-align:center}
.hv5 .plans .sc-head .kicker{justify-content:center}
.hv5 .plans .sc-head .kicker em{margin-right:2px}
.hv5 .plans .sc-head .sc-lead{margin-left:auto;margin-right:auto}
.hv5 .pl-help{text-align:center}
/* 拆解卡片編號改等寬小字，避免跟章節編號撞 */
.hv5 .an-no{font:500 12px/1 var(--mono)!important;letter-spacing:.1em;color:var(--or);padding-top:4px}
.hv5 .an-opt .an-no{color:var(--b)}
/* 常見問題標題 */
.hv5 .faq-h{font:900 clamp(22px,2vw,28px)/1.4 var(--serif)!important;letter-spacing:0!important;color:var(--ink)!important;margin-bottom:14px!important}
/* 首屏上緣 */
.hv5 .prologue{padding-top:clamp(28px,3.4vw,52px)!important}
/* 身分跑馬燈 */
.hv5 .roles{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);overflow:hidden;padding:14px 0}
.hv5 .roles-track{display:flex;width:max-content;animation:roles 48s linear infinite}
.hv5 .roles:hover .roles-track{animation-play-state:paused}
.hv5 .roles ul{display:flex;list-style:none;gap:0;padding-right:0}
.hv5 .roles li{display:flex;align-items:center;white-space:nowrap;font:500 15px/1 var(--sans);letter-spacing:.06em;color:var(--ink)}
.hv5 .roles li:after{content:"+";margin:0 26px;font:400 20px/1 var(--disp);color:var(--or)}
.hv5 .roles li.hl{color:var(--b);font-weight:700}
@keyframes roles{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.hv5 .roles-track{animation:none}}
/* ---------- 招牌互動 A：拆解段捲動拼裝（桌機 ≥1024、未開減少動態才啟用） ---------- */
.hv5 .asm-stick{display:none}
.hv5 .anatomy.asm-on .an-wrap{margin-top:40px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(40px,5vw,80px);align-items:start}
.hv5 .anatomy.asm-on .asm-stick{display:block;position:sticky;top:max(88px,calc(50vh - 300px))}
.hv5 .anatomy.asm-on .an-grid{margin-top:0;grid-template-columns:1fr;gap:0;padding:0 0 12vh}
.hv5 .anatomy.asm-on .an-card{background:none;border:0;border-left:2px solid var(--line);border-radius:0;min-height:14vh;justify-content:center;opacity:.32;transition:opacity .5s,border-color .5s}
.hv5 .anatomy.asm-on .an-card:hover{transform:none;box-shadow:none}
.hv5 .anatomy.asm-on .an-card:before{display:none}
.hv5 .anatomy.asm-on .an-body{padding:8px 0 8px 28px}
.hv5 .anatomy.asm-on .an-card h3{font-size:21px}
.hv5 .anatomy.asm-on .an-card p.d{font-size:16px;max-width:24em}
.hv5 .anatomy.asm-on .an-card.is-on{opacity:1}
.hv5 .anatomy.asm-on .an-card.is-cur{border-left-color:var(--or)}
.hv5 .anatomy.asm-on .an-opt{margin-top:2vh;opacity:.32;transition:opacity .5s}
.hv5 .anatomy.asm-on .an-opt.is-on{opacity:1}
.hv5 .asm{background:#fff;border:1px solid rgba(255,255,255,.9);border-radius:22px;box-shadow:0 0 0 1px rgba(45,62,140,.1),0 40px 70px -40px rgba(45,62,140,.42);overflow:hidden}
.hv5 .asm-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line)}
.hv5 .asm-bar i{width:10px;height:10px;border-radius:50%;background:#D9D4C9}
.hv5 .asm-bar i:first-child{background:var(--or)}
.hv5 .asm-bar span{margin-left:12px;flex:1;max-width:260px;padding:5px 12px;border-radius:999px;background:var(--paper);font:500 11.5px/1 var(--mono);letter-spacing:.04em;color:var(--sub)}
.hv5 .asm-body{padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#F8F6F3}
.hv5 .slot{position:relative;border:1.5px dashed rgba(15,26,36,.16);border-radius:12px;transition:border-color .6s}
.hv5 .slot:before{content:attr(data-l);position:absolute;inset:0;display:grid;place-items:center;font:500 12px/1 var(--mono);letter-spacing:.12em;color:rgba(15,26,36,.32);transition:opacity .4s}
.hv5 .slot .pc{position:relative;display:block;opacity:0;transform:translate(var(--fx,0),var(--fy,40px)) rotate(var(--fr,0deg)) scale(.92);transition:opacity .5s,transform .95s cubic-bezier(.2,.9,.25,1.12)}
.hv5 .slot .pc img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.hv5 .slot:not(.s5){aspect-ratio:3/2}
.hv5 .slot.s5{grid-column:1/-1}
.hv5 .slot.s5 .pc{display:flex;align-items:center;gap:16px;padding:6px 14px;font:500 12px/1.4 var(--mono);letter-spacing:.08em;color:rgba(31,94,149,.85)}
.hv5 .slot.s5 .pc img{width:96px;flex:none;border-radius:8px}
.hv5 .slot.on{border-color:transparent}
.hv5 .slot.on:before{opacity:0}
.hv5 .slot.on .pc{opacity:1;transform:none}
.hv5 .slot.s1{--fx:-90px;--fy:-30px;--fr:-6deg}
.hv5 .slot.s2{--fx:110px;--fy:-10px;--fr:5deg}
.hv5 .slot.s3{--fx:-100px;--fy:30px;--fr:4deg}
.hv5 .slot.s4{--fx:0px;--fy:80px;--fr:-3deg}
.hv5 .slot.s5{border-color:rgba(31,94,149,.4)}
.hv5 .slot.s5:before{color:rgba(31,94,149,.55)}
.hv5 .slot.s5 .pc{--fx:0px;--fy:0px;transform:scale(.96)}
.hv5 .asm-meta{margin-top:18px;display:flex;align-items:center;gap:12px;font:500 12px/1.4 var(--mono);letter-spacing:.08em;color:var(--sub)}
.hv5 .asm-meta .bar{flex:0 0 120px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.hv5 .asm-meta .bar i{display:block;height:100%;width:calc(var(--p,0)*25%);background:var(--or);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.hv5 .asm-meta :is(b,strong){color:#2E9E6B;font-weight:500;opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s}
.hv5 .asm-meta.done :is(b,strong){opacity:1;transform:none}
/* ---------- 招牌互動 B：首屏游標視差（滑鼠裝置、未開減少動態才啟用） ---------- */
.hv5 .pro-art.plx img{transform:translate3d(calc(var(--px,0)*-10px),calc(var(--py,0)*-8px),0)}
.hv5 .pro-art.plx .chip.c1{transform:translate3d(calc(var(--px,0)*22px),calc(var(--py,0)*18px),0)}
.hv5 .pro-art.plx .chip.c2{transform:translate3d(calc(var(--px,0)*30px),calc(var(--py,0)*24px),0)}
.hv5 .pro-art.plx:before{transform:translate3d(calc(var(--px,0)*16px),calc(var(--py,0)*14px),0)}
/* ===== WordPress 區塊對應（make_home_v5.py 加的） ===== */
.hv5 .an-card.k1:before{background-image:url("https://caryplus.com/wp-content/uploads/2026/10/hv5-part-about.jpg")}
.hv5 .an-card.k2:before{background-image:url("https://caryplus.com/wp-content/uploads/2026/10/hv5-part-services.jpg")}
.hv5 .an-card.k3:before{background-image:url("https://caryplus.com/wp-content/uploads/2026/10/hv5-part-articles.jpg")}
.hv5 .an-card.k4:before{background-image:url("https://caryplus.com/wp-content/uploads/2026/10/hv5-part-booking.jpg")}
.hv5 .feats li.f1:before{background-image:url("data:image/svg+xml,")}
.hv5 .feats li.f2:before{background-image:url("data:image/svg+xml,")}
.hv5 .feats li.f3:before{background-image:url("data:image/svg+xml,")}
.hv5 .pro-art .wp-block-image{margin:0}
.hv5 .pro-art img{aspect-ratio:3/2;object-fit:contain}
.hv5 .chip{margin:0}
.hv5 .feats li{list-style:none}
.hv5 .feats small{display:block}
.hv5 .sc-tabs{flex-wrap:nowrap}
.hv5 .sc-tabs .wp-block-button{margin:0}
.hv5 .sc-tab>.wp-block-button__link small{display:block}
.hv5 .sc-tab>.wp-block-button__link{display:block;text-decoration:none}
.hv5 .stage .wp-block-image{margin:0}
.hv5 .sc-tag{display:inline-block !important}
.hv5 .an-body .an-no, .hv5 .an-body .an-q{margin:0}
.hv5 .an-opt h3 small{display:inline}
.hv5 .mo-card{position:relative}
.hv5 .mo-card figure{margin:0}
.hv5 .mo-card figure a:after{content:"";position:absolute;inset:0;z-index:1}
.hv5 .mo-card figure a:focus-visible{outline:none}
.hv5 .mo-card:has(a:focus-visible){outline:2px solid var(--or);outline-offset:4px;border-radius:12px}
.hv5 .mo-meta span{display:inline}
.hv5 .mk-row>.wp-block-image{margin:0}
.hv5 .pl-help a{text-decoration:none}
.hv5 .faq .wp-block-details{margin:0}
.hv5 .faq details>p{margin:0}
.hv5 .roles .roles-list{flex:none}