/* ==== WKH UI PASS · PIXEL 2026-10-23 ====
   Scope: P0 + quick P1 from PIXEL_UI_Review_20261023. Four-colour rule kept:
   #0B0F1A / #FFFFFF / #C9CDD4 / #14F0DF (alpha variants only). 8pt spacing scale. */

/* ---------- P0-1  Post header hijacked by global <header> (sticky glass bar, flex row) ---------- */
article.post header.post-head{position:static;display:block;height:auto;min-height:0;padding:0;margin:0;border:0;background:none;
 -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;z-index:auto;gap:0;justify-content:flex-start;max-width:820px}
.post-head .eyebrow{display:inline-block;margin:0 0 16px}
.post-head a.eyebrow{margin-right:16px}.post-head span.eyebrow{color:var(--muted)}
.post-head h1{display:block;margin-top:16px;font-size:clamp(34px,4.6vw,60px);line-height:1.18;letter-spacing:-.02em;white-space:normal}
.post-head .lead{margin-top:24px;font-size:18px;line-height:1.8;max-width:680px}
.post-hero{margin-top:48px}
@media(max-width:800px){.post-head h1{font-size:clamp(30px,8vw,40px)}.post-head .lead{font-size:17px}}

/* ---------- P0-2  Quote footer hijacked by global <footer> (60px padding, hairline, column flex) ---------- */
.quote footer{padding:16px 0 0;margin:0;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px;position:static}
.quote footer:before{display:none}
.quote footer strong,.quote footer span{display:inline;white-space:normal;word-break:normal;overflow-wrap:normal}
.quote footer strong{font-size:15px}
.quote footer span{font-size:12px;color:var(--muted)}
.quote footer{flex-direction:column;gap:4px}
.quote{padding:32px}
.quote p{font-size:16px;line-height:1.85;color:#fff;margin:0}
.quotes{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:1000px){.quotes{grid-template-columns:1fr}}

/* ---------- P0-3  Mobile hero: 2-col grid survived into 375 (late .hero override beat the media query) ---------- */
@media(max-width:800px){
 .hero{grid-template-columns:1fr!important;gap:40px;padding-top:40px;padding-bottom:72px}
 .hero-copy{width:100%}
 .hero-copy h1{white-space:normal;font-size:clamp(36px,10vw,48px);line-height:1.08}
 .hero p{max-width:none}
 .hero .store,.hero .architecture{max-width:420px;width:100%;justify-self:center}
 .hero-actions .button{width:100%;justify-content:center}
}

/* ---------- P0-4  Mobile header too tall (169px) / nav wraps 2 rows ---------- */
@media(max-width:1000px){
 header{padding:14px 5vw;row-gap:8px}
 nav{gap:0 18px;align-items:center}
 nav a{padding:10px 2px;min-height:44px;display:inline-flex;align-items:center;font-size:13px}
 .nav-cta{min-height:44px;padding:0 14px!important;font-size:12px}
}
@media(max-width:800px){
 header{padding:12px 6vw;position:static}nav{gap:0 14px;font-size:12px}nav a{font-size:12px;padding:10px 0}
 .wordmark img{height:24px}
 nav{font-size:13px}
}

/* ---------- P0-5  Contrast / legibility: CJK outline text (1px stroke) unreadable at body sizes ---------- */
.outline{color:var(--accent);-webkit-text-stroke:0;text-shadow:0 0 24px rgba(20,240,223,.35)}
.hero-copy h1 .outline,h2 .outline{-webkit-text-stroke:0}

/* ---------- P0-6  Tap targets >= 44px (mobile) ---------- */
@media(max-width:800px){
 .text-link{min-height:44px;display:inline-flex;align-items:center;padding-bottom:0;border-bottom:0;box-shadow:inset 0 -1px 0 var(--accent)}
 .footer-base a,.footer-grid a,.quote a{display:inline-block;padding:8px 0;margin:-8px 0}
 .footer-base{font-size:11px;line-height:1.8}
 .faq summary{min-height:56px}
 summary{min-height:44px;display:flex;align-items:center}
 .hero-foot{display:none}  /* 7-9px decorative labels: noise on mobile */
 .object-label,.dimension{font-size:10px}
}
/* ---------- P1  Body legibility: min 16px body on mobile, muted text at AA ---------- */
@media(max-width:800px){
 .cause-list p,.layer-answer,.cards p,.plan p,ul.inc li,.faq details p,.post-card p,.quote p,details,details p,legend,label,.footer-grid p{font-size:16px}
 .muted,.pf-meta,.post-card .muted{font-size:14px}
 small,.fine,ul.pay{font-size:12px!important}
}
.muted{color:var(--muted)}
.eyebrow{color:var(--accent)}

/* ---------- P1  Progress label: smaller, non-intrusive (was 10px mono + box at bottom-right on every page) ---------- */
.progress-label{font:600 10px/1 "Space Grotesk",monospace;letter-spacing:.14em;padding:8px 10px;border-radius:4px;right:16px;bottom:16px;color:var(--muted);opacity:.8}
@media(max-width:800px){.progress-label{display:none}}

/* ---------- P1  Spacing rhythm to 8pt scale ---------- */
section{padding:112px 7vw}
.hero{padding-top:72px;padding-bottom:112px}
.eyebrow{margin-bottom:24px}
p{margin-top:24px}
.button{margin-top:32px;padding:0 28px;min-height:56px;align-items:center;border-radius:4px;font-size:15px;letter-spacing:.01em}
.hero-actions{gap:12px 16px}
.cards,.pf-grid,.post-grid,.quotes,.faq{margin-top:48px}
.cards{gap:24px}.pf-grid,.post-grid{gap:24px}
.cards article{padding:32px}
.cards h3{font-size:22px;line-height:1.35}
.cards p{margin-top:16px}
.plan .button{min-height:56px}
.footer-grid{margin-top:64px;padding-top:40px}
.footer-base{margin-top:48px;padding-top:24px}
@media(max-width:800px){section{padding:72px 6vw}.hero{padding-top:40px}.cards article{padding:24px}}

/* ---------- P1  CTA hierarchy: one primary per view; secondary = ghost ---------- */
.button{box-shadow:0 8px 24px -12px rgba(20,240,223,.45)}
.button:hover{box-shadow:0 12px 32px -10px rgba(20,240,223,.6);transform:translateY(-1px)}
.button.ghost,.button.ghost:hover{box-shadow:none}
.nav-cta{min-height:40px;display:inline-flex;align-items:center;border-radius:4px}
.inner-hero .text-link{display:inline-flex;align-items:center;gap:8px;margin-top:32px;min-height:48px;padding:0 24px;border:1px solid var(--accent);border-radius:4px;color:var(--accent);border-bottom:1px solid var(--accent)}
.inner-hero .text-link:hover{background:var(--accent);color:var(--bg);text-shadow:none}

/* ---------- P1  Glass panel consistency: one radius, one border, one shadow ---------- */
.cards article,.pf,.post-card,form,.lead-form,.plan,.diagnosis form,.template-shelf>div span,.hero-copy,.finale-top>div:first-child,.footer-grid>div,.quote{border-radius:8px;border-color:rgba(255,255,255,.10)}
.cards article,.pf,.post-card,.plan,.footer-grid>div,.quote{box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 24px 48px -32px rgba(0,0,0,.8)}
.hero-copy{padding:48px}
@media(max-width:800px){.hero-copy{padding:28px 24px}}

/* ---------- P1  Accent discipline: dial back glow on structural lines ---------- */
.drawing-grid{background-image:linear-gradient(rgba(20,240,223,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(20,240,223,.06) 1px,transparent 1px)}
.blueprint-svg{filter:drop-shadow(0 0 6px rgba(20,240,223,.25))}
body.b:after{background:radial-gradient(ellipse at 50% 0%,rgba(20,240,223,.06),transparent 65%)}
.progress i{box-shadow:0 0 8px rgba(20,240,223,.5)}

/* ---------- P1  Portfolio / blog imagery: tonal treatment so bright stock art sits in the dark palette ---------- */
.pf img{filter:saturate(.85) contrast(1.02);transition:filter .35s}
.pf:hover img{filter:saturate(1)}
.post-card img{filter:saturate(.8) brightness(.92);transition:filter .35s}
.post-card:hover img{filter:saturate(1) brightness(1)}
.post-card>div{padding:24px}
.post-hero{filter:saturate(.9)}

/* ---------- P1  Mobile dead space under inner-hero architecture object ---------- */
@media(max-width:800px){
 .inner-hero{padding-bottom:56px}
 .inner-hero .architecture{height:300px;transform:none;margin-top:-8px}
 .architecture{height:320px}
 .building-section{gap:24px}
}

/* ---------- P1  Footer rhythm ---------- */
footer{padding:72px 7vw 40px}
.footer-top strong{font-size:24px;line-height:1.4}
.footer-grid>div{padding:24px}
.footer-base{font-size:11px;letter-spacing:.06em}
@media(max-width:800px){footer{padding:56px 6vw 64px}}

/* ---------- Motion restraint ---------- */
.cards article:hover,.pf:hover,.post-card:hover,.plan:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.button:hover{transform:none}}

/* ---------- R3 (WEBB merge 2026-10-23): extend PIXEL pass to R2 content blocks ---------- */
/* blog inline figures: same glass radius/border as other panels, 8pt rhythm, tonal image treatment */
.post-fig{margin-top:40px;padding:12px;border-radius:8px;border-color:rgba(255,255,255,.10);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 24px 48px -32px rgba(0,0,0,.8)}
.post-fig+.post-fig{margin-top:16px}
.post-fig img{border-radius:4px;filter:saturate(.9);transition:filter .35s}
.post-fig:hover img{filter:saturate(1)}
.post-fig figcaption{font-size:12px;line-height:1.7;color:var(--muted);padding:12px 4px 0}
/* comparison tables: glass panel consistency + mobile scroll hint */
.tbl-wrap{margin-top:32px;border-radius:8px;border-color:rgba(255,255,255,.10);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 24px 48px -32px rgba(0,0,0,.8);max-width:100%}
table.cmp{font-size:16px;line-height:1.7}
table.cmp th,table.cmp td{padding:16px}
@media(max-width:800px){table.cmp{font-size:14px}table.cmp th,table.cmp td{padding:12px}table.cmp tbody th{white-space:normal;min-width:120px}}
/* payment badges / fine print */
ul.pay{margin-top:24px}
ul.pay li{min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.pay-badges{gap:8px;margin-left:0}
.pay-badges img{width:40px;height:26px;border-radius:4px}
@media(max-width:800px){ul.pay li{align-items:flex-start}.pay-badges{width:100%;margin-top:4px}}
/* expert CTA strip: 8pt padding, radius 8, directional shadow, buttons >= 56px */
.expert-cta{padding-top:48px;padding-bottom:48px}
.expert-cta-panel{padding:40px;gap:32px 40px;border-radius:8px;border-color:rgba(255,255,255,.10);border-left:3px solid var(--accent);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 24px 48px -32px rgba(0,0,0,.8)}
.expert-cta-panel .eyebrow{margin-bottom:16px}
.expert-cta-panel h2{margin-top:0}
.expert-cta-panel p{margin-top:16px;font-size:16px}
.expert-cta-actions{gap:12px 16px}
.expert-cta-actions .button{margin-top:0;min-height:56px}
@media(max-width:800px){.expert-cta{padding-top:40px;padding-bottom:40px}.expert-cta-panel{padding:24px}.expert-cta-actions .button{width:100%;justify-content:center}}
/* next-step / contact cards: keep tap targets */
.next-step .button{min-height:56px}
/* ---------- R3: mobile header <= 96px without hamburger (P2-1 deferred): logo row + single scrollable nav row ---------- */
@media(max-width:800px){
 header{position:sticky;display:flex;flex-wrap:wrap;align-items:center;padding:12px 6vw 0;row-gap:0;min-height:0;height:auto}
 .wordmark img{height:22px}
 nav{width:100%;display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;gap:0 16px;height:44px;align-items:center;font-size:13px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
 nav::-webkit-scrollbar{display:none}
 nav a{flex:none;white-space:nowrap;min-height:44px;padding:0;font-size:13px}
 nav>a:first-child{display:inline-flex}
 .nav-cta{min-height:32px;padding:0 12px!important;font-size:12px;margin-left:auto;margin-right:12%}
}

/* ---------- R5  merged NEXT CTA + /who/ persona cards ---------- */
.next-step .next-lead{max-width:640px;margin:20px auto 0;font-size:17px;line-height:1.7;color:var(--muted)}
.next-step .text-link{display:block;margin-top:20px}
.who-cards{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.who-card{display:flex;flex-direction:column}
.who-card h3{font-size:28px;margin-top:12px}
.who-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:20px;flex:1}
.who-steps li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;padding-top:16px;border-top:1px solid rgba(255,255,255,.10)}
.who-steps .step-no{font:600 13px/1 Inter,sans-serif;letter-spacing:.12em;color:var(--accent);padding-top:6px}
.who-steps p{margin:0;font-size:16px;line-height:1.7;color:#e6e9ee}
.who-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:32px}
.who-actions .button{margin-top:0;min-height:56px}
@media(max-width:800px){.who-cards{grid-template-columns:1fr}.who-card h3{font-size:24px}.who-actions .button{width:100%;justify-content:center}}

/* ==== R6 BLOG PLP/PDP · mirror aldone.ai/blog (CW 2026-10-24 01:42) ==== */
/* wkh-blog.css — R6 blog PLP/PDP mirror of aldone.ai/blog (aldone-blog-v7.css), WKH tokens.
   Aldone → WKH: ink→#0B0F1A, paper→#FFFFFF, secondary→#C9CDD4, muted→#8E95A3, tif→#14F0DF, card #1E1E24→glass panel, line .12
   Poppins→Space Grotesk; maxw 1248; breakpoints 1100/1000/860/600. */
:root{--bl-line:rgba(255,255,255,.12);--bl-card:rgba(20,25,37,.72);--bl-card2:#11161F;--bl-sec:#C9CDD4;--bl-muted:#8E95A3}

/* ---- hero search (Aldone .search) ---- */
.blog-search{display:flex;gap:4px;margin-top:30px;max-width:510px;background:rgba(17,22,31,.85);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:5px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.blog-search:focus-within{border-color:var(--accent)}
.blog-search input{flex:1;min-width:0;background:transparent;border:0;color:#fff;padding:12px 16px;font:500 15px/1.4 "Space Grotesk","Noto Sans TC",sans-serif}
.blog-search input::placeholder{color:var(--bl-muted);opacity:1}
.blog-search input:focus{outline:none}
.blog-search .go{flex-shrink:0;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:0 22px;font:500 12px/1 "Space Grotesk","Noto Sans TC",sans-serif;letter-spacing:.06em;cursor:pointer;min-height:44px}
.blog-search .go:hover{border-color:var(--accent);color:var(--accent)}
.inner-hero .blog-search+.text-link{margin-top:28px}

/* ---- list section ---- */
section.blog-list{padding-top:48px}
section.blog-list>*{max-width:1248px;margin-left:auto;margin-right:auto}
/* chips (Aldone .chips/.chip) */
.chips{display:flex;flex-wrap:wrap;gap:9px;padding:0 0 8px}
.chip{background:transparent;color:var(--bl-muted);border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:10px 16px;font:400 12px/1.7 "Space Grotesk","Noto Sans TC",sans-serif;letter-spacing:.04em;cursor:pointer;min-height:44px;transition:color .2s,border-color .2s,background .2s}
.chip:hover{color:#fff;border-color:rgba(255,255,255,.45)}
.chip.on{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);color:#fff;font-weight:500;box-shadow:inset 0 -2px 0 var(--accent)}
/* featured (Aldone .feat) */
.feat{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.75fr);background:var(--bl-card);border:1px solid var(--bl-line);border-radius:18px;margin:28px auto 36px;min-height:360px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 24px 48px -32px rgba(0,0,0,.8)}
.feat>*{min-width:0}
.feat .l{padding:42px 46px;display:flex;flex-direction:column;justify-content:center}
.feat .cat{color:var(--accent);font:500 11px/1.6 "Space Grotesk","Noto Sans TC",sans-serif;letter-spacing:.08em}
.feat h2{font-size:clamp(25px,2.7vw,35px);line-height:1.5;margin:18px 0;letter-spacing:-.02em;color:#fff}
.feat p{font-size:14px;color:var(--bl-sec);line-height:1.9;max-width:640px;margin:0}
.feat .meta{margin-top:26px;font:400 11px/1.6 "Space Grotesk","Noto Sans TC",sans-serif;color:var(--bl-muted);letter-spacing:.04em}
.feat .r{position:relative;display:flex;background:var(--bl-card2);border-left:1px solid var(--bl-line);isolation:isolate;min-height:240px}
.feat .r img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.8) brightness(.9);transition:filter .35s}
.feat .r::after{content:"";position:absolute;width:32px;height:2px;background:var(--accent);bottom:38px;left:38px;z-index:1}
.feat:hover{border-color:rgba(20,240,223,.45);transform:translateY(-2px)}
.feat:hover .r img{filter:saturate(1) brightness(1)}
/* grid + card (Aldone .grid/.pcard) */
.blog-list .grid,.post-more .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:0}
.pcard.post-card{display:flex;flex-direction:column;background:var(--bl-card);border:1px solid var(--bl-line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,border-color .2s}
.pcard.post-card:hover{transform:translateY(-3px);border-color:rgba(20,240,223,.45)}
.pcard.post-card>div.top{display:block;height:140px;padding:0;gap:0;flex:none;background:var(--bl-card2);border-bottom:1px solid var(--bl-line);overflow:hidden;position:relative}
.pcard .top img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:auto;filter:saturate(.8) brightness(.92);transition:filter .35s}
.pcard:hover .top img{filter:saturate(1) brightness(1)}
.pcard.post-card>div.cb{padding:25px 27px 27px;display:flex;flex-direction:column;flex:1;gap:0}
.pcard .cat{color:var(--bl-muted);font:500 11px/1.6 "Space Grotesk","Noto Sans TC",sans-serif;letter-spacing:.06em;text-transform:uppercase}
.pcard h3{color:#fff;font-size:18px;line-height:1.65;margin:13px 0 14px;letter-spacing:-.015em}
.pcard p{font-size:13px;line-height:1.9;color:var(--bl-sec);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard .meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:19px;border-top:1px solid var(--bl-line);font:400 11px/1.6 "Space Grotesk","Noto Sans TC",sans-serif;color:var(--bl-muted);letter-spacing:.04em}
.pcard .cb>.meta{margin-top:26px}
.pcard .cb>p+.meta,.pcard .cb>h3+.meta{margin-top:auto;padding-top:19px}
.pcard .cb>h3+.meta{margin-top:0}
.pcard .meta .more{color:var(--accent);font-weight:500}
.blog-empty{margin-top:28px;color:var(--bl-muted);font-size:15px}
.post-card[hidden]{display:none!important}

/* ---- PDP ---- */
/* R3 header rule `nav{overflow-x:auto;height:..}` (≤800) leaks onto in-article navs — reset */
nav.crumbs,nav.post-toc,nav.post-pn{width:auto;height:auto;min-height:0;max-height:none;overflow:visible;flex-wrap:wrap;align-items:stretch;justify-content:flex-start;font-size:inherit;-webkit-mask-image:none;mask-image:none}
@media(max-width:800px){nav.crumbs,nav.post-toc,nav.post-pn{width:auto;height:auto;overflow:visible;overflow-x:visible;display:block;gap:0;-webkit-mask-image:none;mask-image:none}nav.post-pn{display:grid}}
article.post{padding:0 0 10px;max-width:none;margin:0}
article.post .wrap{max-width:1248px;margin:0 auto;padding:0 32px}
.crumbs,nav.crumbs{display:block;gap:0;color:var(--bl-muted);padding:28px 0 0;font:400 11px/1.9 "Space Grotesk","Noto Sans TC",sans-serif;letter-spacing:.04em;overflow-wrap:anywhere}
.crumbs a{color:var(--bl-sec);text-decoration:none;white-space:normal;padding:0}.crumbs a:hover{color:var(--accent)}
.crumbs .cur{color:var(--bl-muted)}
article.post header.ahero{position:static;display:block;height:auto;min-height:0;max-width:none;margin:0 0 50px;padding:55px 0 52px;border:0;border-bottom:1px solid var(--bl-line);background:none}
.ahero .cat{display:inline-block;color:var(--accent);background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:6px;padding:5px 11px;font:500 11px/1.6 "Space Grotesk","Noto Sans TC",sans-serif;letter-spacing:.06em;text-transform:uppercase}
.ahero h1{display:block;max-width:1040px;font-size:clamp(35px,4vw,54px);line-height:1.4;font-weight:600;letter-spacing:-.035em;margin:24px 0;color:#fff;white-space:normal}
.ahero .meta{font:400 12px/1.7 "Space Grotesk","Noto Sans TC",sans-serif;color:var(--bl-muted);letter-spacing:.04em}
.article{max-width:824px;margin:0 auto;padding:0 26px 25px;color:var(--bl-sec)}
.article .post-hero{margin:0 0 34px;border-radius:12px;border:1px solid var(--bl-line);filter:saturate(.9)}
.article .post-body{max-width:none;margin-top:0}
nav.post-toc,.post-toc{display:block;gap:0;font-size:13px;background:var(--bl-card);border:1px solid var(--bl-line);border-radius:12px;padding:25px 28px;margin:0 0 34px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.post-toc b{display:block;font:700 13px/1.6 "Space Grotesk","Noto Sans TC",sans-serif;letter-spacing:.1em;color:#fff}
.post-toc ul{list-style:none;margin:8px 0 0;padding:0;font-size:13px;line-height:1.85}
.post-toc li{margin:4px 0;padding:0}
.post-toc a{color:var(--bl-sec);text-decoration:none;white-space:normal;padding:0}.post-toc a:hover{color:var(--accent)}
.article .post-body p,.article .post-body li{color:var(--bl-sec);font-size:17px;line-height:2}
.article .post-body p{margin:21px 0;max-width:none}
.article .post-body strong{color:#fff;font-weight:600}
.article .post-body h2{font-size:28px;line-height:1.55;margin:52px 0 22px;color:#fff;letter-spacing:-.025em;scroll-margin-top:105px}
.article .post-body h3{font-size:21px;line-height:1.65;color:#fff;margin:32px 0 13px;scroll-margin-top:105px}
.article .post-body a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(20,240,223,.4);text-underline-offset:4px}
.article .post-body a:hover{text-decoration-color:var(--accent)}
.article .post-body ul,.article .post-body ol{margin:20px 0 20px 25px;padding:0;font-size:17px}
.article .post-body li{padding-left:5px;margin:10px 0}
.article .post-body li::marker{color:var(--bl-muted)}
.article .post-body blockquote{background:var(--bl-card);border-left:2px solid var(--accent);border-radius:0 9px 9px 0;color:var(--bl-sec);padding:19px 24px;margin:28px 0}
.article .post-body .tbl-wrap{margin:30px 0}
.article .post-body table.cmp{font-size:13px}
.article .post-body table.cmp th,.article .post-body table.cmp td{padding:14px 17px;line-height:1.8;vertical-align:top}
.article .post-body table.cmp th{color:#fff;font-weight:500}
.article .post-body .post-fig{margin:34px 0 0}
.article .post-body .post-fig+.post-fig{margin-top:16px}
.article .post-body .post-fig+p{margin-top:28px}
/* tail: author box + related list + prev/next (Aldone .author-box / .hm-related) */
.article-tail{border-top:1px solid var(--bl-line);margin-top:45px;padding-top:22px}
.author-box{background:var(--bl-card);border:1px solid var(--bl-line);border-radius:12px;color:var(--bl-muted);padding:23px 25px;font-size:12px;line-height:1.95;margin:28px 0 8px}
.author-box b{color:#fff;font-weight:500}
.author-box a{color:var(--accent);text-decoration:none;margin-left:6px}
.post-related{display:block;margin:32px 0 8px}
.post-related>b{display:block;color:var(--bl-muted);font:500 15px/1.6 "Space Grotesk","Noto Sans TC",sans-serif}
.post-related a{display:block;padding:17px 0;border-bottom:1px solid var(--bl-line);text-decoration:none;font-size:14px;font-weight:400;color:var(--bl-sec)}
.post-related a:hover{color:var(--accent)}
nav.post-pn,.post-pn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:36px;font-size:14px}.post-pn>*{min-width:0}
.post-pn a{display:block;min-width:0;white-space:normal;overflow-wrap:anywhere;padding:18px 20px;border:1px solid var(--bl-line);border-radius:12px;text-decoration:none;color:#fff;font-size:14px;line-height:1.6;background:var(--bl-card);transition:border-color .2s}
.post-pn a:hover{border-color:rgba(20,240,223,.45)}
.post-pn a small{display:block;font:500 11px/1.6 "Space Grotesk","Noto Sans TC",sans-serif;letter-spacing:.08em;color:var(--accent);margin-bottom:6px}
.post-pn a.next{text-align:right}
/* related grid section (Aldone RELATED) */
section.post-more{border-top:1px solid var(--bl-line);padding:62px 7vw 82px}
section.post-more>*{max-width:1248px;margin-left:auto;margin-right:auto}
section.post-more h2{font-size:30px;margin:17px 0 28px;letter-spacing:-.025em}
section.post-more .grid{margin-top:0}
section.post-more .pcard h3{font-size:16px}
section.post-more>.text-link{display:inline-block;margin-top:36px}

/* ---- responsive (Aldone 1100/1000/860/600) ---- */
@media(max-width:1100px){.feat .l{padding:34px}.feat{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);min-height:0}.feat h2{font-size:27px}.blog-list .grid,.post-more .grid{gap:20px}}
@media(max-width:1000px){.blog-list .grid,.post-more .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ahero{padding:40px 0;margin-bottom:35px}.ahero h1{font-size:40px}}
@media(max-width:860px){.pcard.post-card>div.cb{padding:23px}.pcard.post-card>div.top{height:108px}.chips{gap:8px}.chip{font-size:11px;padding:10px 12px}.article{padding:0 22px 20px}}
@media(max-width:600px){
 .blog-list .grid,.post-more .grid{grid-template-columns:minmax(0,1fr);gap:20px}
 .feat{grid-template-columns:minmax(0,1fr);margin:25px 0 24px;border-radius:13px}
 .feat .l{padding:27px 24px;order:2}.feat .r{order:1;border-left:0;border-bottom:1px solid var(--bl-line);min-height:160px}.feat .r::after{left:auto;right:24px;bottom:20px}
 .feat h2{font-size:25px;line-height:1.6;margin:16px 0}.feat p{font-size:13px}.feat .meta{margin-top:21px}
 .pcard.post-card>div.cb{padding:24px}.pcard h3{font-size:19px}
 .blog-search{margin-top:26px}.blog-search input{padding:11px 10px;font-size:16px}.blog-search .go{padding:0 15px}
 article.post .wrap{padding:0 22px}.crumbs{padding-top:22px;font-size:10px}
 article.post header.ahero{padding:31px 0 32px;margin-bottom:30px}.ahero h1{font-size:32px;line-height:1.5;margin:20px 0;overflow-wrap:anywhere}.ahero .meta{font-size:11px}
 .article .post-body p,.article .post-body li,.article .post-body ul{font-size:16px}
 .article .post-body h2{font-size:25px;margin:40px 0 18px}.article .post-body h3{font-size:19px}
 .article .post-body table.cmp th,.article .post-body table.cmp td{padding:11px 12px;min-width:96px;font-size:12px}
 .post-toc{padding:20px}.author-box{padding:20px}
 nav.post-pn,.post-pn{grid-template-columns:minmax(0,1fr);gap:12px}.post-pn a.next{text-align:left}
 section.post-more{padding:40px 6vw 52px}section.post-more h2{font-size:27px}
}
@media(prefers-reduced-motion:reduce){.pcard.post-card:hover,.feat:hover{transform:none}}

/* ==== R7 (2026-10-24, CW F1-F13 / D22-D33) · WEBB + PIXEL under GCM ====
   Art Direction v1: #0B0F1A / #FFFFFF / #C9CDD4 / #14F0DF only. Glass (backdrop-filter) only on Tier-1 cards. */
:root{--bg7:#0B0F1A;--ink-2:#0f1524;--ink-3:#141b2d;--line7:rgba(255,255,255,.08);--line7-2:rgba(255,255,255,.16);--grot:"Space Grotesk",system-ui,sans-serif;--tc:"Noto Sans TC","Space Grotesk",system-ui,sans-serif;--gutter:clamp(20px,5vw,72px);--ease7:cubic-bezier(.22,.61,.36,1);--text:#F2F5F9}

/* sticky hero fix: overflow-x:hidden on html/body creates a scroll container and breaks position:sticky; clip does not */
html,body{overflow-x:clip!important;overflow-y:visible!important}
main{overflow-x:clip}
/* ---------- Glass removal outside cards (AD §5) ---------- */
header{background:rgba(11,15,26,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
.progress-label{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0f131f}
.finale-top>div:first-child{padding:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.inner-hero .architecture-object{filter:none}
.blueprint-svg{filter:none}
.outline{text-shadow:none}
.b section{background-image:none}

/* ---------- Nav: links in <nav>, WhatsApp icon + CTA in .nav-tools (sibling, never clipped by nav scroll) ---------- */
header{display:flex;align-items:center;gap:24px}
header nav{margin-left:auto}
.nav-tools{display:flex;align-items:center;gap:10px;flex:none}
.nav-wa{color:var(--accent)!important;font:500 12px/1 var(--grot);letter-spacing:.04em;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 10px;border:1px solid rgba(20,240,223,.35);border-radius:4px}
.nav-wa:hover{background:rgba(20,240,223,.1)}
.nav-wa svg{width:16px;height:16px;fill:currentColor;flex:none}
.nav-cta{margin:0!important}
@media(max-width:1000px){header{flex-wrap:wrap;row-gap:0}.nav-tools{order:2;margin-left:auto}header nav{order:3;width:100%;margin-left:0}}
@media(max-width:800px){header{position:sticky;top:0;padding:10px 6vw 0}.nav-wa span{display:none}.nav-wa{width:32px;min-height:32px;padding:0;justify-content:center}.nav-cta{min-height:32px!important;padding:0 10px!important;font-size:11px!important;white-space:nowrap}header nav{-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}}
.hero7 .hero-foot7{right:calc(var(--gutter) + 120px)}
/* ---------- Layer tags with employee label ---------- */
.layer-tag{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.layer-tag .emp{font:500 10px/1 var(--grot);letter-spacing:.14em;color:var(--bg7);background:var(--accent);padding:5px 8px;border-radius:3px;text-transform:none}
.emp-note{margin-top:14px;font-size:15px;color:#e6e9ee;border-left:2px solid var(--accent);padding-left:14px;line-height:1.75}
.proof-live{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 22px;font:500 12px/1.6 var(--grot);letter-spacing:.06em;color:var(--muted)}
.proof-live b{display:block;color:#fff;font-size:18px;letter-spacing:-.01em}

/* ================= HERO (ported from proto_hero, D28 5 beats · D29 T3) ================= */
.hero7{position:relative;height:520vh;padding:0!important;border-bottom:0;--p:0;--bp:0;--rise:0;--l0:0;--l1:0;--l2:0;--site:0;--zoom:0;--fade:0;--mx:0;--my:0;display:block!important;min-height:0!important}
.hero7 .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg7);isolation:isolate}
.hero7 .bg-grid{position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:80px 80px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 70% 60% at 60% 50%,#000 30%,transparent 100%);transform:translate3d(0,calc(var(--p) * -60px),0)}
.hero7 .bg-glow{position:absolute;z-index:0;width:60vw;height:60vw;right:-10vw;top:0;border-radius:50%;background:radial-gradient(circle,rgba(20,240,223,.10),transparent 60%);transform:translate3d(calc(var(--p) * -120px),calc(var(--p) * 80px),0) scale(calc(1 + var(--p) * .4));opacity:.9}
.hero7 .layer-back{position:absolute;inset:0;z-index:1;display:flex;align-items:flex-start;justify-content:flex-end;padding:14vh var(--gutter) 0;pointer-events:none;overflow:hidden}
.hero7 .eyebrow-big{font:700 clamp(48px,7vw,110px)/1 var(--grot);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);white-space:nowrap;transform:translate3d(calc(var(--mx) * -14px),calc(var(--my) * -10px + var(--p) * -40px),0);opacity:calc(1 - var(--site))}
.hero7 .layer-front{position:absolute;z-index:3;left:var(--gutter);top:50%;width:min(600px,46vw);translate:0 -50%;pointer-events:none;transform:translate3d(calc(var(--mx) * 10px),calc(var(--p) * -30px),0);opacity:calc(1 - var(--zoom) * 1.6)}
.hero7 .layer-front .cta7,.hero7 .layer-front a{pointer-events:auto}
.hero7 .kicker{font:500 12px/1 var(--grot);letter-spacing:.18em;color:var(--accent);margin:0 0 18px;text-transform:uppercase}
.hero7 h1.tagline{color:#fff;font:700 clamp(30px,3.9vw,56px)/1.18 var(--tc);letter-spacing:-.02em;min-height:2.36em;word-break:keep-all;overflow-wrap:normal;white-space:normal;margin:0}
.hero7 .caret{display:inline-block;width:3px;height:.9em;background:var(--accent);vertical-align:-.08em;margin-left:4px;animation:blink7 1s steps(2) infinite}
.hero7 .caret.done{animation:none;opacity:0}
@keyframes blink7{50%{opacity:0}}
.hero7 .sub{margin:18px 0 0;font-size:clamp(14px,1.25vw,18px);line-height:1.6;color:var(--muted);max-width:560px;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease7),transform .6s var(--ease7)}
.hero7 .sub.show{opacity:1;transform:none}
.hero7 .cta7{display:flex;align-items:center;gap:26px;margin-top:30px;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease7) .15s,transform .6s var(--ease7) .15s}
.hero7 .cta7.show{opacity:1;transform:none}
.hero7 .cta7 .button{margin-top:0}
.hero7 .link7{font:500 14px/1 var(--grot);color:var(--muted);border-bottom:1px solid var(--line7-2);padding-bottom:3px;text-decoration:none}
.hero7 .link7:hover{color:#fff;border-color:#fff}
.hero7 .world{position:absolute;inset:0;z-index:2;perspective:1200px;perspective-origin:64% 44%;pointer-events:none}
.hero7 .rig{position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;transform-style:preserve-3d;transform:translate3d(calc(13vw - var(--zoom) * 16vw),calc(0vh - var(--rise) * 20px + var(--zoom) * 3vh),0) scale(calc(1.05 + var(--rise) * .1 + var(--zoom) * 1.35)) rotateX(calc(var(--bp) * -14deg + var(--my) * -5deg)) rotateY(calc(var(--bp) * -34deg + var(--mx) * 12deg + var(--site) * 22deg - var(--zoom) * 22deg)) rotateX(calc(var(--zoom) * 22deg));will-change:transform}
.hero7 .blueprint{position:absolute;inset:0;width:100%;height:100%;stroke:var(--accent);stroke-width:1;transform-origin:50% 50%;transform:rotateX(calc(var(--bp) * 90deg)) scale(calc(1 - var(--bp) * .3));opacity:calc(1 - var(--rise));fill:none;max-width:none}
.hero7 .bp-grid{stroke:rgba(20,240,223,.14);stroke-dasharray:3 6}
.hero7 .bp-dim{stroke:rgba(255,255,255,.25)}
.hero7 .tower{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:translate3d(0,-64px,0)}
.hero7 .ground{position:absolute;left:-200px;top:-86px;width:400px;height:300px;transform:rotateX(90deg) translateZ(-64px);background:radial-gradient(ellipse at 50% 50%,rgba(20,240,223,.10),transparent 65%);opacity:var(--rise)}
.hero7 .slab{position:absolute;left:-130px;width:260px;height:64px;transform-style:preserve-3d;--D:170px;--W:260px;--H:64px;--lit:0;opacity:calc(min(1, var(--rise) * 3) * (1 - min(1, var(--site) * 1.5)));transform:translate3d(0,calc(var(--yb) + (1 - var(--rise)) * 140px * var(--order)),0);pointer-events:auto;cursor:pointer}
.hero7 .s0{--yb:-144px;--order:3;--lit:var(--l0)}.hero7 .s1{--yb:-72px;--order:2;--lit:var(--l1)}.hero7 .s2{--yb:0px;--order:1;--lit:var(--l2)}
.hero7 .f{position:absolute;left:0;top:0;width:var(--W);height:var(--H);border:1px solid rgba(255,255,255,.14);backface-visibility:hidden}
.hero7 .f.front{transform:translateZ(calc(var(--D) / 2));background:linear-gradient(180deg,#171f33,#0f1524);border-color:rgba(20,240,223,calc(.14 + var(--lit) * .55));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 calc(var(--lit) * 50px) rgba(20,240,223,calc(var(--lit) * .35))}
.hero7 .f.side{width:var(--D);left:auto;right:0;transform-origin:100% 50%;transform:rotateY(90deg) translateX(calc(var(--D) / 2));background:linear-gradient(90deg,#0d1322,#121a2c);border-color:rgba(20,240,223,calc(.10 + var(--lit) * .4))}
.hero7 .f.top{height:var(--D);top:0;transform-origin:50% 0;transform:rotateX(90deg) translateY(calc(var(--D) / -2));background:linear-gradient(135deg,rgba(20,240,223,calc(.10 + var(--lit) * .3)),#1a2338 55%);border-color:rgba(20,240,223,calc(.22 + var(--lit) * .6))}
.hero7 .slab .lbl{position:absolute;left:18px;top:50%;transform:translate3d(0,-50%,calc(var(--D) / 2 + 1px));font:500 11px/1 var(--grot);letter-spacing:.2em;color:rgba(242,245,249,calc(.35 + var(--lit) * .65))}
.hero7 .slab .lbl::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:1px;opacity:var(--lit);box-shadow:0 0 12px var(--accent)}
.hero7 .site-face{position:absolute;left:-190px;top:-230px;width:380px;height:238px;transform:translateZ(calc(40px + var(--site) * 70px));opacity:var(--site);border:1px solid rgba(20,240,223,.5);border-radius:6px;overflow:hidden;background:#0f1524;box-shadow:0 0 0 1px rgba(255,255,255,.04),0 30px 80px -20px rgba(0,0,0,.8),0 0 60px rgba(20,240,223,calc(var(--site) * .25))}
.hero7 .site-face img{width:100%;height:100%;object-fit:cover;object-position:top;opacity:.95;display:block}
.hero7 .site-chrome{position:absolute;left:0;right:0;top:0;height:18px;background:rgba(11,15,26,.9);border-bottom:1px solid var(--line7);display:flex;gap:4px;align-items:center;padding:0 8px}
.hero7 .site-chrome i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2)}
.hero7 .emp-cards{position:absolute;right:var(--gutter);top:50%;width:240px;transform:translateY(calc(-50% - 20px));z-index:3;opacity:calc(1 - var(--site) * 1.5)}
.hero7 .ecard{position:relative;width:240px;margin-bottom:12px;padding:14px 16px;border:1px solid var(--line7-2);border-radius:10px;background:rgba(15,21,36,.96);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 20px 50px -20px rgba(0,0,0,.8);opacity:var(--o);transform:translate3d(calc((1 - var(--o)) * 20px),0,0)}
.hero7 .ecard b{display:block;font:700 14px/1 var(--tc);color:#fff;margin-bottom:6px}
.hero7 .ecard b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--accent);margin-right:8px;box-shadow:0 0 10px var(--accent)}
.hero7 .ecard p{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0}
.hero7 .c0{--o:var(--l0)}.hero7 .c1{--o:var(--l1)}.hero7 .c2{--o:var(--l2)}
.hero7 .reveal{position:absolute;inset:0;z-index:4;display:grid;place-content:end start;padding:0 var(--gutter) 10vh;gap:14px;pointer-events:none;opacity:var(--fade);transform:translate3d(0,calc((1 - var(--fade)) * 24px),0);background:linear-gradient(0deg,rgba(11,15,26,.96) 30%,rgba(11,15,26,.2))}
.hero7 .reveal .eyebrow{margin:0}
.hero7 .reveal h2{color:#fff;font:700 clamp(28px,3.2vw,46px)/1.2 var(--tc);letter-spacing:-.02em;max-width:620px;margin:0}
.hero7 .reveal p{color:var(--muted);max-width:520px;font-size:16px;margin:0}
.hero7 .beat-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line7);z-index:5}
.hero7 .beat-bar i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p))}
.hero7 .hero-foot7{position:absolute;left:var(--gutter);right:var(--gutter);bottom:18px;z-index:5;display:flex;justify-content:space-between;font:500 10px/1.6 var(--grot);letter-spacing:.14em;color:var(--muted);opacity:calc(1 - var(--fade))}
@media (max-width:900px){
  .hero7{height:220vh}
  .hero7 .world{perspective:900px;perspective-origin:50% 40%;inset:56px 0 40% 0}
  .hero7 .rig{width:300px;height:300px;margin:-150px 0 0 -150px;left:50%;top:50%;transform:translate3d(0,calc(var(--site) * 90px),0) scale(calc(.8 + var(--site) * .05)) rotateX(calc(var(--bp) * -14deg)) rotateY(calc(var(--bp) * -30deg + var(--site) * 20deg))}
  .hero7 .slab{--D:140px;--W:220px;--H:52px;left:-110px}
  .hero7 .s0{--yb:-116px}.hero7 .s1{--yb:-58px}.hero7 .s2{--yb:0px}
  .hero7 .site-face{left:-140px;top:-170px;width:280px;height:175px}
  .hero7 .layer-front{top:auto;bottom:64px;left:20px;right:20px;width:auto;translate:none;transform:none;opacity:1}
  .hero7 .kicker{font-size:11px;margin-bottom:10px;letter-spacing:.12em}
  .hero7 h1.tagline{font-size:clamp(26px,7.4vw,32px);min-height:0}
  .hero7 .sub{margin-top:10px;font-size:14px}
  .hero7 .cta7{margin-top:18px;gap:16px;flex-wrap:wrap}
  .hero7 .cta7 .button{min-height:48px;padding:0 20px;font-size:14px}
  .hero7 .layer-back{padding-top:12vh;justify-content:center}
  .hero7 .eyebrow-big{font-size:21vw}
  .hero7 .emp-cards,.hero7 .reveal,.hero7 .hero-foot7{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero7{height:100vh;height:100svh}
  .hero7 .stage{--p:.7;--bp:1;--rise:1;--l0:1;--l1:1;--l2:1;--site:1;--zoom:0;--fade:0;--mx:0;--my:0}
  .hero7 .caret{animation:none;opacity:0}
  .hero7 .sub,.hero7 .cta7{opacity:1;transform:none;transition:none}
}

/* ================= Reviews carousel (§3.4) ================= */
.qc{position:relative;margin-top:48px}
.qc-track{list-style:none;margin:0;padding:4px 0 8px;display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;align-items:stretch;-webkit-overflow-scrolling:touch}
.qc-track::-webkit-scrollbar{display:none}
.qc-track:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.qc-track>li{flex:0 0 calc((100% - 48px) / 3);scroll-snap-align:start;display:flex;min-width:0}
@media(max-width:1000px){.qc-track>li{flex-basis:calc((100% - 24px) / 2)}}
@media(max-width:600px){.qc-track>li{flex-basis:100%}}
.qc-track .quote{width:100%;margin:0}
.qc .quote p.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.qc .expand{align-self:flex-start;background:none;border:0;color:var(--accent);font:500 13px/1 var(--grot);letter-spacing:.06em;padding:4px 0;cursor:pointer;margin-top:-10px}
.qc-nav{display:flex;align-items:center;gap:18px;margin-top:24px}
.qc-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line7-2);background:transparent;color:#fff;font:500 18px/1 var(--grot);cursor:pointer;transition:border-color .25s,color .25s}
.qc-btn:hover{border-color:var(--accent);color:var(--accent)}
.qc-btn:disabled{opacity:.3;cursor:default}
.qc-dots{display:flex;gap:8px;flex-wrap:wrap}
.qc-dots button{width:8px;height:8px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.2);cursor:pointer;transition:background .25s,transform .25s}
.qc-dots button[aria-current="true"]{background:var(--accent);transform:scale(1.25);box-shadow:0 0 10px var(--accent-glow)}
@media(prefers-reduced-motion:reduce){.qc-track{scroll-behavior:auto}}

/* ================= Plan card (D22 single package) ================= */
.plan7{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;margin-top:48px;align-items:stretch}
.plan7 .plan{display:flex;flex-direction:column}
.plan7 .plan .button{margin-top:auto}
.plan .price-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-top:18px}
.plan .price-row .price{margin-top:0}
.plan .price-row .plus{font:500 13px/1.5 var(--grot);letter-spacing:.06em;color:var(--muted)}
.plan .price-row .plus b{display:block;color:#fff;font-size:16px}
.plan .button[data-stripe]{position:relative}
.plan .stripe-note{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.6}
.plan .second{display:block;margin-top:14px;text-align:center}
@media(max-width:1000px){.plan7{grid-template-columns:1fr}}
.emp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.emp-grid article{display:flex;flex-direction:column}
.emp-grid .emp-role{font-size:15px;color:#e6e9ee;margin-top:10px}
.emp-grid ul.inc{margin-top:18px;flex:1}
.emp-grid .fee{margin-top:22px;padding-top:16px;border-top:1px solid var(--line7);font:500 12px/1.6 var(--grot);letter-spacing:.06em;color:var(--muted)}
.emp-grid .fee b{display:block;color:var(--accent);font-size:15px;letter-spacing:0;font-family:var(--tc)}
@media(max-width:1000px){.emp-grid{grid-template-columns:1fr}}
.cmp-wrap{margin-top:48px;overflow-x:auto;border:1px solid rgba(255,255,255,.10);border-radius:8px;background:var(--panel)}
table.cmp7{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.6}
table.cmp7 th,table.cmp7 td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line7)}
table.cmp7 thead th{font:700 12px/1.4 var(--grot);letter-spacing:.12em;color:var(--accent);text-transform:uppercase;background:rgba(20,240,223,.06);border-bottom:1px solid rgba(20,240,223,.35)}
table.cmp7 tbody th{color:#fff;font-weight:700}
table.cmp7 td{color:var(--muted)}
table.cmp7 td.yes{color:#fff}
table.cmp7 td.yes::before{content:"✓ ";color:var(--accent)}
table.cmp7 tbody tr:last-child th,table.cmp7 tbody tr:last-child td{border-bottom:0}
.pay-line{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:40px;font-size:13px;color:var(--muted)}
.pay-line .pay-badges{margin:0}

/* ================= Diagnosis + lead-form merged (D30 方案 A) ================= */
.diagnosis form.lead-form{padding:35px}
.lead-form fieldset{border:0;padding:0;margin:22px 0 0}
.lead-form legend{font-size:15px;color:#fff;font-weight:700;margin-bottom:10px;display:flex;gap:10px}
.lead-form legend span{color:var(--accent);font:500 11px/1.8 var(--grot);letter-spacing:.14em}
.lead-form fieldset label{flex-direction:row;align-items:center;gap:8px;margin:8px 18px 0 0;display:inline-flex;font-size:14px;letter-spacing:0;color:#e6e9ee}
.lead-form fieldset input[type=radio]{width:18px;height:18px}
.lead-form .step{margin-top:28px;padding-top:24px;border-top:1px solid var(--line7)}
.lead-form .step h4{font-size:16px;color:#fff;margin:0}
.lead-form .step-tag{font:500 11px/1 var(--grot);letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:10px}
.lead-form .result{margin-top:20px}
.lead-form .result ul{margin:10px 0 0;padding-left:18px;color:#e6e9ee;font-size:15px;line-height:1.8}
.lead-form .result li::marker{color:var(--accent)}
.lead-form .button.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.lead-form .button.primary:hover{background:#5ff5ea;color:var(--bg)}
.lead-form small{display:block;margin-top:14px;font-size:12px;color:var(--muted);line-height:1.7}
.lead-form .status{margin-top:16px;font-size:14px;color:#fff;border-left:2px solid var(--accent);padding-left:14px;line-height:1.7}
.lead-form .status a{color:var(--accent)}
.lead-form textarea{width:100%;min-height:96px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);color:#fff;border-radius:2px;font-size:15px;font-family:inherit;resize:vertical}
.lead-form textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-dim)}
.lead-form .checks label{flex-direction:row;align-items:flex-start;gap:10px;margin:12px 0 0;font-size:14px;letter-spacing:0;color:#e6e9ee;line-height:1.6}
.lead-form .checks input{width:18px;height:18px;flex:none;margin-top:3px}
.lead-form label>input[type=text],.lead-form label>input[type=tel],.lead-form label>input[type=email],.lead-form label>input[type=url]{width:100%}

/* ================= FAQ after lead-form / Next ================= */
.next-step .cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px}
.next-step .cta-row .button{margin-top:32px}
.next-step .cta-row .text-link{margin-top:32px}
@media(max-width:800px){.next-step .cta-row .text-link{margin-top:8px}}

/* ================= Footer (mirror aldone.ai, §3.3) ================= */
footer{padding:64px 7vw 32px}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px 32px}
.ft-grid .ft-brand strong{display:block;font-size:18px;line-height:1.5;color:#fff;margin-top:0;max-width:260px}
.ft-grid .footer-logo{margin-bottom:18px}
.ft-grid h4{font:500 11px/1 var(--grot);letter-spacing:.18em;color:var(--accent);text-transform:uppercase;margin:0 0 16px}
.ft-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ft-grid li,.ft-grid p{font-size:14px;line-height:1.7;margin:0;color:var(--muted)}
.ft-grid a{color:var(--muted)}
.ft-grid a:hover{color:var(--accent)}
.ft-grid .ft-co p+p{margin-top:8px}
.ft-grid .ft-co .soc{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px}
.footer-base{margin-top:48px;padding-top:24px;border-top:1px solid var(--line7);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;font-size:11px;letter-spacing:.04em;color:var(--muted)}
.footer-base a:hover{color:var(--accent)}
@media(max-width:1000px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ft-grid{grid-template-columns:1fr;gap:32px}footer{padding:56px 6vw 56px}}

/* ================= /how-it-works/ + /welcome/ ================= */
.steps3{counter-reset:s;grid-template-columns:repeat(3,minmax(0,1fr))}
.steps3 article{position:relative}
.steps3 .day{font:700 12px/1 var(--grot);letter-spacing:.16em;color:var(--accent);display:inline-block;margin-bottom:14px;padding:6px 10px;border:1px solid rgba(20,240,223,.4);border-radius:3px}
@media(max-width:1000px){.steps3{grid-template-columns:1fr}}
.welcome-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:6vw;align-items:start}
.welcome-grid ol{margin:24px 0 0;padding-left:20px;color:var(--muted);font-size:15px;line-height:1.9}
.welcome-grid ol li::marker{color:var(--accent);font-family:var(--grot)}
.welcome-grid .plan-pill{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:10px 14px;border:1px solid rgba(20,240,223,.4);border-radius:4px;font:500 12px/1 var(--grot);letter-spacing:.1em;color:var(--accent)}
.welcome-grid .plan-pill b{color:#fff;font-family:var(--tc);letter-spacing:0;font-size:14px}
@media(max-width:1000px){.welcome-grid{grid-template-columns:1fr}}
.legal .post-body .v-note{border:1px dashed rgba(20,240,223,.5);border-radius:6px;padding:16px 18px;color:var(--muted);font-size:14px;margin-top:40px}
.legal .post-body .v-note b{color:var(--accent)}

/* ================= Blog PDP 2025 note (D31) ================= */
.post-note{margin:0 0 28px;padding:12px 16px;border-left:2px solid var(--accent);background:rgba(20,240,223,.05);font-size:14px;line-height:1.7;color:var(--muted)}
.post-body .post-note{margin-top:0}

/* ================= Misc ================= */
.who-card .who-emp{margin-top:20px;padding-top:16px;border-top:1px solid var(--line7);font-size:14px;color:var(--muted);line-height:1.7}
.who-card .who-emp b{color:var(--accent);font-weight:700}
.home-plans .plan7{max-width:1100px}

/* ==== R8 (2026-10-24, CW D34-D40) · WEBB + WRITE under GCM — appended after R7 layer ==== */
/* ---------- Single plan card (D34-D38) ---------- */
.plan7-one{grid-template-columns:minmax(0,1fr);max-width:860px}
.home-plans .plan7-one{max-width:860px}
.plan8 h3{font-size:clamp(20px,2vw,26px);line-height:1.35}
.plan8 .inc-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:18px 32px;margin-top:22px}
.plan8 .inc-h{display:block;font:500 11px/1 var(--grot);letter-spacing:.16em;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.plan8 .inc{margin-top:0}
.plan8 .emp-inc li b{color:#fff}
.plan8 .inc-base{margin-top:20px;padding-top:18px;border-top:1px solid var(--line7)}
.plan8 .plan-cta{justify-content:flex-start;gap:14px 26px;margin-top:28px}
.plan8 .plan-cta .button{margin-top:0}
.plan8 .plan-cta .text-link{margin-top:0}
.plan8 .price-row .plus b{font-size:14px}
@media(max-width:700px){.plan8 .inc-grid{grid-template-columns:1fr}}
.side-line{margin-top:26px;font-size:14px;line-height:1.7}
.side-line a{color:var(--accent)}
.side-line+.side-line{margin-top:8px}
/* ---------- Diagnosis v2 (D39) ---------- */
.lead-form .q-sub{margin:8px 0 0;font-size:14px}
.chips8{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.chip8{position:relative;display:block;margin:0;cursor:pointer}
.chip8 input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chip8 span{display:flex;align-items:center;min-height:48px;padding:12px 14px 12px 40px;border:1px solid var(--line7-2);border-radius:6px;background:var(--bg);color:#e6e9ee;font-size:14.5px;line-height:1.45;letter-spacing:0;transition:border-color .2s,background .2s,box-shadow .2s;position:relative}
.chip8 span::before{content:"";position:absolute;left:14px;top:50%;width:16px;height:16px;margin-top:-8px;border:1px solid var(--line7-2);border-radius:4px;background:#0f131f;transition:all .2s}
.chip8 span:hover{border-color:rgba(20,240,223,.5)}
.chip8 input:checked+span{border-color:var(--accent);background:rgba(20,240,223,.06);box-shadow:0 0 0 1px var(--accent) inset}
.chip8 input:checked+span::before{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 3px #0f131f}
.chip8 input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.lead-form .other8{margin-top:14px;font-size:13px}
.aux8{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;margin-top:22px}
.aux8 fieldset{margin:0}
.aux8 legend{font-size:13px;color:#fff;font-weight:700;display:flex;gap:8px;align-items:baseline;margin-bottom:10px}
.aux8 legend span{color:var(--muted);font:500 10px/1 var(--grot);letter-spacing:.14em;text-transform:uppercase}
.aux8 fieldset[hidden]{display:none}
.pills8{display:flex;flex-wrap:wrap;gap:8px}
.pill8{position:relative;margin:0;cursor:pointer}
.pill8 input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pill8 span{display:inline-block;padding:8px 12px;border:1px solid var(--line7-2);border-radius:999px;font-size:12.5px;line-height:1.3;color:var(--muted);letter-spacing:0;background:var(--bg);transition:all .2s}
.pill8 input:checked+span{border-color:var(--accent);color:#fff;background:rgba(20,240,223,.1)}
.pill8 input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.lead-form .result{margin-top:24px;padding:22px 22px 20px;border:1px solid rgba(20,240,223,.35);border-radius:8px;background:rgba(20,240,223,.04)}
.lead-form .result .eyebrow{margin:0 0 10px}
.lead-form .result .r-head{font-size:17px;font-weight:700;color:#fff;line-height:1.5;margin:0}
.lead-form .result .r-body{margin:10px 0 0;font-size:14.5px;line-height:1.75;color:#e6e9ee}
.lead-form .result .r-body b{color:var(--accent)}
.lead-form .result .r-next{margin:12px 0 0;font-size:14px;color:var(--muted);line-height:1.7}
.lead-form .result .r-fine,.lead-form .status .r-fine{display:block;margin-top:10px;font-size:12px;color:var(--muted);line-height:1.6}
.lead-form .result>b{color:#fff}
.lead-form .row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.lead-form label[hidden]{display:none}
.lead-form .status .button{display:inline-block}
@media(max-width:700px){.chips8{grid-template-columns:1fr}.aux8{grid-template-columns:1fr}.lead-form .row{grid-template-columns:1fr}.diagnosis form.lead-form{padding:24px 18px}}
/* ---------- Footer 5 cols (資源 / 觀點) ---------- */
.ft-grid{grid-template-columns:1.3fr 1fr 1fr 1fr 1.2fr}
@media(max-width:1000px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ft-grid{grid-template-columns:1fr}}
/* ---------- /next-gen-website/ + /geo-website/ (D40) ---------- */
.prose8{max-width:760px;margin-top:28px}
.prose8 p{font-size:16px;line-height:1.9;color:#e6e9ee;margin:0 0 16px}
.prose8 p b,.prose8 li b{color:#fff}
.prose8 ul.inc,.prose8 ol.pre8{margin:18px 0 20px}
.prose8 ol.pre8{padding-left:22px;color:#e6e9ee;font-size:15.5px;line-height:1.8}
.prose8 ol.pre8 li{margin:0 0 10px}
.prose8 ol.pre8 li::marker{color:var(--accent);font-family:var(--grot);font-weight:700}
.cite{font-size:10px;vertical-align:super;line-height:0}
.cite a{color:var(--accent);text-decoration:none;border:0}
.shifts8{list-style:none;margin:36px 0 0;padding:0;max-width:960px}
.shifts8 li{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:26px 0;border-top:1px solid var(--line7)}
.shifts8 li:last-child{border-bottom:1px solid var(--line7)}
.shifts8 .n8{font:700 44px/1 var(--grot);letter-spacing:-.03em;color:#fff;text-shadow:0 0 18px rgba(20,240,223,.25)}
.shifts8 h3{font-size:19px;margin:0 0 8px;color:#fff}
.shifts8 p{margin:0;font-size:15px;line-height:1.8;color:var(--muted)}
.tbl-wrap{margin-top:36px;overflow-x:auto;border:1px solid rgba(255,255,255,.10);border-radius:8px;-webkit-overflow-scrolling:touch}
.tbl8{width:100%;border-collapse:collapse;min-width:560px;font-size:14.5px;line-height:1.7}
.tbl8 th,.tbl8 td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line7)}
.tbl8 thead th{font:500 11px/1.4 var(--grot);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);background:#0f131f}
.tbl8 tbody th{color:#fff;font-weight:700;white-space:nowrap}
.tbl8 td{color:#e6e9ee}
.tbl8 td.old8{color:var(--muted)}
.tbl8 tr:last-child td,.tbl8 tr:last-child th{border-bottom:0}
.eras8{min-width:720px}
.eras8 td.geo8{color:#fff;background:rgba(20,240,223,.04)}
.dot8{display:inline-block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);margin-right:8px;vertical-align:middle}
.dot8.on{background:var(--accent);box-shadow:0 0 10px var(--accent)}
.layers8{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:14px;max-width:860px}
.layers8 .layer8{position:relative;padding:22px 24px 22px 28px;border:1px solid var(--line7);border-radius:6px;background:linear-gradient(180deg,#1B2130,#0F131F)}
.layers8 .layer8::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);opacity:.35;transition:opacity .4s,box-shadow .4s}
section.in-view .layers8 .layer8::before{opacity:1;box-shadow:0 0 14px var(--accent);transition-delay:calc(var(--i) * .18s)}
.layers8 .eyebrow{margin:0 0 6px}
.layers8 h3{font-size:19px;margin:0 0 8px;color:#fff}
.layers8 p{margin:0;font-size:15px;line-height:1.8;color:var(--muted)}
.stats8{list-style:none;margin:36px 0 10px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.stats8 li{padding:22px 0 0;border-top:1px solid var(--line7)}
.stats8 .stat8{display:block;font:700 clamp(34px,3.6vw,52px)/1 var(--grot);letter-spacing:-.03em;color:#fff;padding-bottom:12px;position:relative}
.stats8 .stat8::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:2px;background:var(--accent)}
.stats8 p{margin:14px 0 0;font-size:14px;line-height:1.75;color:var(--muted)}
.two8{columns:2;column-gap:40px;max-width:960px}
.two8 li{break-inside:avoid}
.shops8{grid-template-columns:repeat(3,minmax(0,1fr))}
.shops8 .q8{font-size:14px;color:var(--accent);line-height:1.7;margin-top:10px}
.shops8 p{font-size:14px;line-height:1.75}
.shops8 p b{color:#fff}
.honest8{position:relative}
.honest8 .prose8{padding:34px 36px;border:1px solid var(--line7-2);border-radius:8px;max-width:820px}
.honest8 .prose8 p:last-child{margin:0;color:#fff;font-weight:700}
.refs8 ol{margin:24px 0 0;padding-left:22px;max-width:860px;font-size:12.5px;line-height:1.7;color:var(--muted)}
.refs8 ol li{margin:0 0 8px}
.refs8 a{color:var(--accent)}
.inner-hero .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.inner-hero .cta-row .text-link{margin-top:0}
.inner-hero .cta-row+.text-link{display:inline-block;margin-top:6px}
@media(max-width:900px){.stats8{grid-template-columns:1fr}.shops8{grid-template-columns:1fr}.two8{columns:1}.shifts8 li{grid-template-columns:64px 1fr}.shifts8 .n8{font-size:32px}.honest8 .prose8{padding:24px 20px}}
/* ---------- Sticky header fully opaque on mobile (R8 QA: form text bled through at 94% alpha) ---------- */
@media(max-width:800px){header{background:#0B0F1A}}

/* ==== R8.3 (2026-10-24) posts_new: GEO answer block + FAQ accordion + strong labels ==== */
.article .post-body p.answer{position:relative;margin:28px 0 34px;padding:22px 26px 22px 30px;border-left:2px solid var(--accent,#14F0DF);border-radius:0 12px 12px 0;background:rgba(20,240,223,.06);color:#fff;font-size:17px;line-height:1.9}
.article .post-body p.answer::before{content:"ANSWER";position:absolute;top:-10px;left:28px;font:600 10px/1 "Space Grotesk","Noto Sans TC",sans-serif;letter-spacing:.18em;color:var(--accent,#14F0DF);background:#0B0F1A;padding:2px 8px}
.article .post-body strong{color:#fff;font-weight:600}
.article .post-body ol{margin:20px 0 20px 25px;padding:0;font-size:17px}
.article .post-body ol li,.article .post-body ul li{margin:8px 0;line-height:1.85}
.article .post-body .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0}
.article .post-body table.cmp{width:100%;border-collapse:collapse;min-width:560px}
.article .post-body table.cmp th,.article .post-body table.cmp td{border-bottom:1px solid var(--bl-line,rgba(255,255,255,.1));text-align:left}
.post-faq{margin:44px 0 10px}
.post-faq h2{margin-bottom:14px}
.post-faq details{border:1px solid var(--bl-line,rgba(255,255,255,.1));border-radius:12px;background:var(--bl-card,rgba(255,255,255,.03));margin:10px 0;padding:0 20px}
.post-faq summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;position:relative;font-size:16px;line-height:1.6;color:#fff;font-weight:500}
.post-faq summary::-webkit-details-marker{display:none}
.post-faq summary::after{content:"+";position:absolute;right:0;top:14px;font-size:20px;color:var(--accent,#14F0DF);transition:transform .2s}
.post-faq details[open] summary::after{transform:rotate(45deg)}
.post-faq details p{margin:0 0 18px;font-size:15.5px;line-height:1.85;color:var(--bl-sec,rgba(255,255,255,.72))}
@media(max-width:800px){.article .post-body p.answer{padding:18px 18px 18px 22px;font-size:16px}.article .post-body ol{font-size:16px}.post-faq summary{font-size:15px}}

/* ==== R8.6 (2026-10-24 17:18-17:26 CW) — card padding token · diagnosis chips compress · article thumbs ==== */
/* ---------- 2. Glass card inner padding token (CW: plan card text too tight on mobile) ---------- */
:root{--card-pad:32px;--card-pad-m:22px}
.plan,.plan.plan8,.cards article,.who-card,.lead-form,.diagnosis form.lead-form,.welcome-grid form,.qc .quote,.quote{padding:var(--card-pad)}
.diagnosis form.lead-form,.lead-form{padding:35px}
.plan h3,.plan8 h3,.cards article h3,.who-card h3,.emp-grid article h3{line-height:1.25}
.inc li,.plan .inc li,.plan8 .inc li,.emp-grid .inc li,.who-card ul li{padding-left:24px;padding-right:2px}
.plan .inc li::before,.inc li::before{left:2px}
.plan8 .stripe-note,.plan8 .muted.fine{padding-right:4px}
@media(max-width:480px){
 :root{--card-pad-m:22px}
 .plan,.plan.plan8,.cards article,.who-card,.emp-grid article,.qc .quote,.quote,.lead-form,.diagnosis form.lead-form,.welcome-grid form,.lead-form .result{padding:var(--card-pad-m)}
 .plan.featured:before{right:var(--card-pad-m)}
 .plan8 h3{font-size:20px;line-height:1.25;letter-spacing:-.01em}
 .plan .price{font-size:40px}
 .plan .price-row{gap:6px 14px}
 .plan8 .inc-grid{gap:18px;margin-top:18px}
 .plan8 .inc-base{margin-top:18px;padding-top:16px}
 .inc li{font-size:14px;line-height:1.6;padding-left:24px}
 .plan8 .plan-cta{margin-top:22px}
 .plan8 .plan-cta .button{width:100%;justify-content:center}
 .faq summary{padding:18px 0;font-size:16px;line-height:1.4}
 .faq details p{font-size:14.5px;padding:0 0 20px}
 .faq details[open]{margin:0 -4px;padding:0 4px}
 .who-card .who-emp{margin-top:16px;padding-top:14px}
 .welcome-grid .plan-pill{padding:10px 12px;font-size:11px;line-height:1.4}
 .lead-form input,.lead-form select{padding:0 14px}
 .lead-form label{display:block}
 .lead-form .status{padding-left:12px}
 .lead-form .result{padding:var(--card-pad-m)}
}
/* ---------- 3. Diagnosis Step 1: 10 options -> compact chips (2-col mobile, 3-col desktop) ---------- */
.chips8{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.chip8 span{min-height:44px;padding:9px 12px 9px 36px;font-size:14px;line-height:1.3;border-radius:6px}
.chip8 span::before{left:12px;width:16px;height:16px;margin-top:-8px}
.chip8 input:checked+span{border-color:var(--accent);background:rgba(20,240,223,.07);box-shadow:0 0 0 1px var(--accent) inset}
.chip8 input:checked+span::before{background:var(--accent);border-color:var(--accent);box-shadow:none}
.chip8 input:checked+span::after{content:"";position:absolute;left:17px;top:50%;width:5px;height:9px;margin-top:-6px;border:solid #0B0F1A;border-width:0 2px 2px 0;transform:rotate(45deg)}
.lead-form .other8{margin-top:12px}
.lead-form .other8 input{height:44px}
.aux8{gap:14px 24px;margin-top:18px}
.aux8 fieldset{min-width:0;min-inline-size:0}
.aux8 legend{margin-bottom:8px}
@media(max-width:700px){
 .chips8{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .chip8 span{font-size:14px;min-height:44px;padding:8px 10px 8px 34px;letter-spacing:-.01em}
 .chip8 span::before{left:11px}
 .chip8 input:checked+span::after{left:16px}
 .aux8{grid-template-columns:minmax(0,1fr);gap:12px}
 .aux8 fieldset{min-width:0;min-inline-size:0;max-width:100%}
 .lead-form .other8{margin-top:10px}
 .lead-form .q-sub{margin-top:6px}
 .chips8{margin-top:14px}
 .pills8{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 2px 6px;margin:0 -2px;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
 .pills8::-webkit-scrollbar{display:none}
 .pill8{flex:0 0 auto;scroll-snap-align:start}
 .pill8 span{white-space:nowrap;padding:9px 13px;font-size:13px;min-height:36px;display:inline-flex;align-items:center}
 .lead-form .q-sub{font-size:13px;margin-top:4px;line-height:1.5}
 .diagnosis form.lead-form{padding:20px 18px}
 .lead-form .step-tag{margin-bottom:6px}
 .chips8{gap:6px;margin-top:12px}
 .chip8 span{min-height:44px;padding:6px 8px 6px 32px;line-height:1.25}
 .chip8 span::before{left:10px}
 .chip8 input:checked+span::after{left:15px}
 .lead-form .other8{margin-top:10px;font-size:12.5px}
 .lead-form .other8 input{height:40px;margin-top:4px}
 .aux8{margin-top:12px;gap:10px}
 .aux8 legend{margin-bottom:6px;font-size:12.5px}
 .pills8{padding:1px 2px 4px}
 .pill8 span{min-height:34px;padding:7px 12px;font-size:12.5px}
 .lead-form [data-step1]{margin-top:14px;width:100%;justify-content:center}
 .diagnosis form.lead-form h3{font-size:19px;line-height:1.3}
}
/* ---------- 1. Article thumbnails (PLP card + PDP header) ---------- */
.pcard.post-card>div.top{height:150px}
.pcard.post-card>div.top img{filter:none}
.pcard:hover .top img{filter:brightness(1.06)}
.feat .r img{filter:none}
.post-cover{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:1px solid var(--bl-line,rgba(201,205,212,.12));margin:26px 0 0;box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.ahero.post-head+.post-cover,.post-head .post-cover{margin-top:28px}
@media(max-width:860px){.pcard.post-card>div.top{height:120px}.post-cover{border-radius:10px;margin-top:20px}}

/* R8.7 SEO copy: about H1 sub-line */
.inner-hero h1 small{display:block;font-size:.42em;font-weight:500;letter-spacing:.02em;color:var(--accent);margin-top:10px}

/* ==== R9.0 · CW 2026-10-30 rulings #7 #11 #15 #28 #30 #32 ==== */
/* #7 footer type + spacing：統一 Noto Sans TC 體系、行距收緊、「·」間距統一 */
footer .ft-co p{font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;line-height:1.55;letter-spacing:.01em;font-size:14px}
footer .ft-co .soc a{font-size:14px}
footer .ft-co p+p{margin-top:6px}
.footer-base{font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;font-size:12px;line-height:1.6;letter-spacing:.02em}
.ft-brand p{line-height:1.6}
/* #9 dash 改細 */
.dash-sm{font-size:.85em;opacity:.8;margin:0 2px}
/* #11 scroll-cue 修 font（跟返 body 字體，唔用 mono 斜體感） */
.scroll-cue{font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;font-size:14px;letter-spacing:.06em;font-style:normal;opacity:.75}
/* #15 who 分流副題 */
.who-sub{margin:10px 0 6px;color:var(--muted,#9aa3b2);font-size:17px}
/* #28 contact mobile STEP 1 chips 右邊切字 */
@media(max-width:480px){
  .chips8{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .chip8 span{font-size:13px;line-height:1.3;white-space:normal;word-break:break-word;display:block;padding-right:2px}
  .chip8{min-width:0}
  .lead-form .step-tag{white-space:normal}
  .pills8 .pill8 span{font-size:12.5px}
}
/* #30 比較表 mobile：橫向 scroll + 提示 */
.tbl-wrap{position:relative}
@media(max-width:800px){
  .tbl-wrap::after{content:"← 左右掃睇全表 →";display:block;text-align:center;font-size:12px;color:var(--muted,#9aa3b2);padding:8px 0;border-top:1px dashed rgba(255,255,255,.12)}
  .tbl-wrap table{min-width:640px}
}
/* #32 About H1 重排：雙行唔好斷開怪位，small 細行有呼吸位 */
.inner-hero h1{text-wrap:balance}
.inner-hero h1 small{display:block;margin-top:14px;font-size:.42em;letter-spacing:.08em;color:var(--muted,#9aa3b2);font-weight:500}
/* #16 自家品牌欄 */
.pf-own{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){.pf-own{grid-template-columns:1fr}}
/* #32 About H1：兩句各自唔斷行，字級自動縮 */
.inner-hero h1 .nw{white-space:nowrap}
.inner-hero h1:has(.nw){font-size:clamp(24px,4.6vw,56px)}
@media(max-width:480px){.inner-hero h1:has(.nw){font-size:clamp(20px,6.4vw,30px)}}