/* v3.6 · banner illustration, card rhythm, one process line, FAQ size, quiet related row
   every px is a multiple of 3; letter-spacing 0 */

/* ---------- 1 · service banner: see v35.css (v3.6 block) + _build/hero_visuals.py ---------- */

/* ---------- 2 · cards: safe padding · title · hairline · body ---------- */
main .bc{padding:36px}
main .bc .bd{gap:0}
main .bc .bd>h3{padding-bottom:18px}
main .bc .bd>.bd-b{gap:15px;padding-top:18px;border-top:1px solid rgba(20,18,16,.1)}
main .bc .bd-b b{margin-bottom:3px}
main .bc.t-org .bd>.bd-b{border-top-color:rgba(255,255,255,.35)}
main .ic-card .bc-top+.bd,main .ic-card .bc-top+h3{margin-top:42px}
main .num-card{gap:0}
main .num-card>.kv{margin-bottom:18px}
main .num-card>.kl+.ks{margin-top:12px;padding-top:12px;border-top:1px solid rgba(20,18,16,.1)}
main .num-card.t-org>.kl+.ks{border-top-color:rgba(255,255,255,.35)}
main .num-card>.open{margin-top:18px;padding-top:15px}
main .brand-card .open{margin-top:6px;padding-top:15px;border-top:1px solid rgba(20,18,16,.1)}
main a.path h3.big+p{padding-top:18px;border-top:1px solid rgba(20,18,16,.1)}
main .svc{gap:0}
main .svc>.chip{margin-bottom:18px}
main .svc>h3{padding-bottom:15px}
main .svc>h3+p{padding-top:15px;border-top:1px solid rgba(20,18,16,.1)}
main .svc>.svc-b{padding-top:24px}
/* core cards() */
main .card{padding:36px 33px}
main .card>.ic{margin-bottom:15px}
main .card>h3+p{padding-top:15px;border-top:1px solid var(--line)}
main .sec.warm .card>h3+p,main .sec.tint .card>h3+p{border-top-color:rgba(20,18,16,.1)}
@media (max-width:759px){
 main .bc{padding:27px}
 main .ic-card .bc-top+.bd,main .ic-card .bc-top+h3{margin-top:30px}
 main .card{padding:30px 27px}
 main .svc{padding:27px}
}

/* ---------- 3 · one process pattern: thin line, a numbered node per step ---------- */
/* shared node: 42px ring, number inside; line: 1.5px orange dashed through the node centres */
main .chain-card{padding:42px 36px}
main .chain li{gap:12px;padding-right:24px}
main .chain li>b{margin-top:9px}
main .chain p{padding-right:0;font-size:15px;line-height:1.75}
/* core steps() (counter numbers) and the v1 text-number variant (.pj-n .st-n) */
main .steps{gap:0}
main .steps>div{position:relative;padding:63px 24px 0 0!important;display:grid;gap:12px;align-content:start}
main .steps>div::before,main .steps.pj-n>div>.st-n{position:absolute!important;left:0;top:0;z-index:1;box-sizing:border-box;width:42px!important;height:42px!important;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--ink);display:grid!important;place-items:center;padding:0!important;margin:0!important;border:0!important;font:500 12px/1 var(--latin)!important;color:var(--ink)!important}
main .steps.pj-n>div::before{display:none!important}
main .steps>div::after{content:""!important;position:absolute!important;left:0!important;right:0!important;top:21px!important;width:auto!important;height:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;transform:none!important;border-top:1.5px dashed var(--orange);z-index:0}
main .steps>div:last-child::after{right:auto!important;width:21px!important}
main .steps>div.is-now::before,main .steps.pj-n>div.is-now>.st-n{background:var(--orange);box-shadow:none;color:#fff!important}
main .steps h3{font-size:18px;line-height:1.45}
main .steps p:empty{display:none}
@media (max-width:981px){main .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}}
/* mobile: the same line turns vertical */
@media (max-width:759px){
 main .steps,main .pj-e2e .steps{grid-template-columns:1fr!important;row-gap:0!important}
 main .steps>div{padding:9px 0 30px 63px!important;min-height:72px}
 main .steps>div::before,main .steps.pj-n>div>.st-n{top:0}
 main .steps>div::after{left:21px!important;right:auto!important;top:0!important;bottom:0!important;width:0!important;border-top:0;border-left:1.5px dashed var(--orange)}
 main .steps>div:first-child::after{top:21px!important}
 main .steps>div:last-child::after{bottom:auto!important;height:21px!important;width:0!important}
 main .steps>div:only-child::after{display:none}
 main .chain-card{padding:27px 24px}
 main .chain li{grid-template-columns:42px minmax(0,1fr);align-items:start;column-gap:21px;row-gap:9px;padding:0 0 27px}
 main .chain li>.n,main .chain li>.ic{grid-row:1/span 3}
 main .chain li>b,main .chain li>p,main .chain li>.chip{grid-column:2;margin-top:0}
 main .chain li>b{padding-top:9px}
 main .chain li::after{top:0;bottom:0}
 main .chain li:first-child::after{top:21px}
 main .chain li:last-child::after{height:21px}
}

/* ---------- 4 · FAQ: larger questions, title left / list right, orange plus ---------- */
main .faq summary{font-size:18px!important;font-weight:500!important;line-height:1.5;padding:27px 0;color:var(--ink)}
@media (max-width:759px){main .faq summary{padding:24px 0}}

/* ---------- 5 · related services: a quiet supporting row ---------- */
main .sec.rel-sec{padding-block:72px}
main .sh.sh-rel{margin-bottom:24px!important}
main .sh.sh-rel .h2{font-size:21px!important;line-height:1.4!important}
.rel-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap)}
.rel-i{display:grid;grid-template-columns:minmax(0,1fr) 18px;column-gap:18px;row-gap:6px;align-items:center;padding:21px 0 24px;border-top:1px solid var(--line);color:var(--body);text-decoration:none}
.rel-t{font-size:18px;line-height:1.45;font-weight:500;color:var(--ink);transition:color .2s ease}
.rel-d{grid-column:1;font-size:15px;line-height:1.6;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel-a{grid-column:2;grid-row:1/span 2;width:18px;height:18px;color:var(--muted);transition:color .2s ease,transform .2s ease}
.rel-a svg{width:18px;height:18px;display:block}
@media (hover:hover) and (pointer:fine){.rel-i:hover .rel-t,.rel-i:hover .rel-a{color:var(--orange)}.rel-i:hover .rel-a{transform:translateX(3px)}}
.rel-i:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media (max-width:759px){
 main .sec.rel-sec{padding-block:57px}
 .rel-list{grid-template-columns:1fr}
 .rel-i{padding:18px 0}
 .rel-i:last-child{border-bottom:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){.rel-a{transition:none}}

*,*::before,*::after{letter-spacing:0!important}
/* icon row has one height (48 or 57 px icons) so titles in a row start on one line */
main .ic-card>.bc-top{min-height:57px}
@media (max-width:759px){main .ic-card>.bc-top{min-height:0}}

/* ---------- 6 · number safe zone: big figures scale to the card, never touch the edge ---------- */
main .num-card,main .svc-n,main .stats>div{container-type:inline-size}
main .num-card>.kv{font-size:clamp(33px,25cqi,84px)!important;white-space:nowrap;max-width:100%}
main .num-card>.kv.sm{font-size:clamp(21px,12cqi,39px)!important;white-space:normal}
main .svc-n .kv{font-size:clamp(33px,24cqi,57px)!important;white-space:nowrap}
main .num-card{padding:36px}
main .stats>div .v{font-size:clamp(24px,18cqi,51px)!important}
@media (max-width:759px){main .stats>div .v{white-space:normal!important}}
/* stats row: 2 × 2 on phones (overrides the v3.2 four-column rule), one column on the narrowest screens */
@media (max-width:759px){main .stats,main .stats.c3{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:12px}}
@media (max-width:360px){main .stats,main .stats.c3{grid-template-columns:1fr!important}}

/* subheading when one section carries two lists */
main .sub-h{font-size:18px;line-height:1.45;font-weight:500;color:var(--ink);margin:0 0 18px}
/* v3.7 · stacked process strips: 105px apart with a faint hairline; each subheading sits 18px above its own strip, 51px below the line */
main .bento+.sub-h{margin-top:54px;padding-top:51px;border-top:1px solid rgba(20,18,16,.08)}
main .bento:has(>.chain-card)+.bento:has(>.chain-card){margin-top:54px;padding-top:51px;border-top:1px solid rgba(20,18,16,.08)}
@media (max-width:759px){main .bento+.sub-h,main .bento:has(>.chain-card)+.bento:has(>.chain-card){margin-top:45px;padding-top:45px}}

/* ---------- 7 · no outer frames: wrappers around a whole block sit on the section itself ---------- */
main .chain-card,main .spec-card,main .bars-card,main .flow-card{background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;padding:0!important;min-height:0!important}
main .tbl{border:0!important;border-radius:0!important;box-shadow:none!important;background:none!important;border-top:1px solid var(--line)!important}
main .tbl tr:last-child>*{border-bottom:1px solid var(--line)}
main .tbl tbody th{background:none!important}
main .pj-e2e{background:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important}
@media (max-width:759px){main .chain-card{padding:0!important}}

/* ---------- 8 · one card surface: neutral, no border, one radius, one padding; a single orange emphasis card per page ---------- */
main .sec.warm,main .sec.tint{background:#F6F5F2!important}
main .bc:not(.chain-card):not(.spec-card):not(.bars-card):not(.flow-card),main .svc,main .card,main .source-card{border-radius:21px!important;box-shadow:none!important;border:0!important}
main .bc:not(.t-org):not(.chain-card):not(.spec-card):not(.bars-card):not(.flow-card),main .svc,main .card,main .source-card{background:#F6F5F2!important;color:var(--body)}
main .sec.warm :is(.bc:not(.t-org):not(.chain-card):not(.spec-card):not(.bars-card):not(.flow-card),.svc,.card,.source-card),main .sec.tint :is(.bc:not(.t-org):not(.chain-card):not(.spec-card):not(.bars-card):not(.flow-card),.svc,.card,.source-card){background:#FFFFFF!important}
main .bc.t-org{background:#FE5000!important}
main .bc .chip,main .svc .chip,main .card .chip{background:#FFFFFF!important;color:var(--ink)}
main .sec.warm .bc .chip,main .sec.tint .bc .chip,main .sec.warm .card .chip,main .sec.tint .card .chip{background:#F6F5F2!important}
main .ill-card,main .case-card .case-ill{background:none}
@media (hover:hover) and (pointer:fine){
 main a.card:hover,main a.bc:not(.t-org):hover,main a.svc:hover{background:#EFEDE9!important}
 main .sec.warm a.card:hover,main .sec.tint a.card:hover{background:#FFFFFF!important}
 main a.card:hover .ic,main a.bc:hover .ic,main a.svc:hover .ic{color:var(--orange)}
}
main .card .ic{--ic-bg:transparent}
/* guideline 6.0 · key figures in TASA Orbiter, highlighted in 曙光橙 on neutral cards */
main .num-card:not(.t-org)>.kv{color:#FE5000}
main .num-card:not(.t-org)>.kv small{color:var(--ink)}

/* ---------- 9 · PROBLEM → SOLUTION pairs (v3.7): both heads as column labels, one row per pair ---------- */
/* 問題 = quiet neutral surface, muted text · 解法 = white card, ink text · the thin orange arrow is the only link between them */
main .ps-heads,main .ps-row{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr)}
main .ps-heads{align-items:start;margin-bottom:48px}
main .ps-h{display:grid;gap:18px;align-content:start}
main .ps-h .t{display:grid;gap:18px}
main .ps-h .h2{font-size:clamp(24px,2.4vw,33px);line-height:1.36}
main .ps-h .d{display:grid;gap:15px}
main .ps-h .d .lead{font-size:15px;line-height:1.8}
main .ps-hp .h2{color:var(--body)}
main .ps-rows{list-style:none;margin:0;padding:0;display:grid;gap:18px}
main .ps-row{align-items:stretch}
main .ps-p,main .ps-s{display:flex;flex-direction:column;gap:12px;min-width:0}
main .ps-c{flex:1 1 auto;display:flex;flex-direction:column;border-radius:21px;padding:30px 33px}
main .ps-pc{background:#ECEAE6}
main .ps-sc{background:#FFFFFF}
main .ps-top{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:18px}
main .ps-tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:12px;font:500 12px/1 var(--font)}
main .ps-pc .ps-tag{background:rgba(20,18,16,.07);color:var(--muted)}
main .ps-sc .ps-tag{background:var(--ink);color:#FFFFFF}
main .ps-sc .ps-tag.x{background:#F6F5F2;color:var(--muted)}
main .ps-top .k{font:500 12px/1 var(--latin);color:var(--muted);text-transform:uppercase}
main .ps-c h3{margin:0;padding-bottom:15px;font-size:18px;line-height:1.45;font-weight:500}
main .ps-c h3+p{margin:0;padding-top:15px;border-top:1px solid rgba(20,18,16,.1);font-size:15px;line-height:1.75}
main .ps-pc h3{color:var(--body)}
main .ps-pc h3+p{color:var(--muted)}
main .ps-sc h3{font-size:21px;color:var(--ink)}
main .ps-sc h3+p{color:var(--body)}
main .ps-c .svc-l{margin-top:auto;padding-top:18px}
main .ps-s>.num-card{flex:0 0 auto;padding:30px 33px}
main .ps-ar{display:flex;align-items:center;justify-content:center;color:var(--orange)}
main .ps-ar svg{width:42px;height:12px;display:block}
main .ps-ar.none svg{display:none}
/* one card answering several: it keeps its own height (centred); a thin orange bracket gathers the several side */
main .ps-row.mp:not(.ms)>.ps-pan>.ps-s>.ps-c,main .ps-row.ms:not(.mp)>.ps-pan>.ps-p>.ps-c{flex:0 0 auto}
main .ps-row.mp:not(.ms)>.ps-pan>.ps-s,main .ps-row.ms:not(.mp)>.ps-pan>.ps-p{justify-content:center}
main .ps-ar{position:relative}
main .ps-row.mp .ps-ar::before,main .ps-row.ms .ps-ar::after{content:"";position:absolute;top:48px;bottom:48px;width:9px;border:1.5px solid var(--orange);opacity:.55}
main .ps-row.mp .ps-ar::before{left:9px;border-left:0;border-radius:0 9px 9px 0}
main .ps-row.ms .ps-ar::after{right:9px;border-right:0;border-radius:9px 0 0 9px}
main .ps-after{margin-top:72px}
/* four problems answered together: problems as a 2 × 2 block so both sides stay close in height */
main .ps-row.p2 .ps-p{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
main .ps-row.p2 .ps-pc{padding:27px}
@media (max-width:981px){main .ps-heads,main .ps-row{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr)}main .ps-ar svg{width:30px}}
/* phones: each pair stacks · problem, down arrow, solution */
@media (max-width:759px){
 main .ps-heads{grid-template-columns:1fr;row-gap:36px;margin-bottom:39px}
 main .ps-gap{display:none}
 main .ps-row{grid-template-columns:1fr}
 main .ps-rows{gap:36px}
 main .ps-ar{height:42px}
 main .ps-ar svg{width:30px;transform:rotate(90deg)}
 main .ps-row.p2 .ps-p{grid-template-columns:1fr}
 main .ps-row .ps-ar::before,main .ps-row .ps-ar::after{display:none}
 main .ps-p.none,main .ps-ar.none{display:none}
 main .ps-c,main .ps-s>.num-card{padding:24px}
 main .ps-after{margin-top:48px}
}

/* ---------- 9b · PROBLEM → SOLUTION layout variants for review (v3.8) ----------
   ?ps=a stacked narrative rows · ?ps=b two-column table · ?ps=c tabs by problem (accordion on phones) → .ps-va / .ps-vb / .ps-vc
   one shared markup (pages_services.ps_block); the toggle only adds .ps-va / .ps-vb / .ps-vc to .ps-sec. Default = 9 above. */
main .ps-tab,main .ps-cols{display:none}
main .ps-pan{display:contents}

/* ===== a · stacked narrative rows ===== */
/* one head: problem title left (col 1–6); problem lead, then the solution heading + lead, on the right (col 8–12) */
main .ps-sec.ps-va .ps-heads{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:0;margin-bottom:57px}
main .ps-sec.ps-va .ps-h{display:contents}
main .ps-sec.ps-va .ps-gap{display:none}
main .ps-sec.ps-va .ps-hp>.t{grid-column:1/7;grid-row:1/span 3}
main .ps-sec.ps-va .ps-hp>.d{grid-column:8/13;grid-row:1;padding-top:30px}
main .ps-sec.ps-va .ps-hp .h2{color:var(--ink)}
main .ps-sec.ps-va .ps-hs>.t{grid-column:8/13;grid-row:2;gap:12px;margin-top:27px;padding-top:24px;border-top:1px solid rgba(20,18,16,.1)}
main .ps-sec.ps-va .ps-hs .h2{font-size:21px;line-height:1.45;color:var(--ink)}
main .ps-sec.ps-va .ps-hs>.d{grid-column:8/13;grid-row:3;margin-top:12px}
main .ps-sec.ps-va .ps-rows{gap:0;border-top:1px solid rgba(20,18,16,.12);counter-reset:psr}
main .ps-sec.ps-va .ps-row{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start;padding:42px 0;border-bottom:1px solid rgba(20,18,16,.12);counter-increment:psr}
main .ps-sec.ps-va .ps-row::before{content:counter(psr,decimal-leading-zero);grid-column:1/3;grid-row:1/span 3;font:500 15px/1 var(--latin);color:var(--muted);padding-top:6px}
main .ps-sec.ps-va .ps-p,main .ps-sec.ps-va .ps-ar,main .ps-sec.ps-va .ps-s{grid-column:3/13}
main .ps-sec.ps-va .ps-p{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:36px;justify-content:stretch}
main .ps-sec.ps-va .ps-pc{background:none;border-radius:0;padding:0;max-width:720px}
main .ps-sec.ps-va .ps-pc .ps-top{margin-bottom:12px}
main .ps-sec.ps-va .ps-pc h3{padding-bottom:9px;font-size:18px;color:var(--body)}
main .ps-sec.ps-va .ps-pc h3+p{padding-top:0;border-top:0;color:var(--muted)}
main .ps-sec.ps-va .ps-pc .svc-l{padding-top:12px}
main .ps-sec.ps-va .ps-ar{position:relative;display:flex;justify-content:flex-start;align-items:center;height:30px;margin:21px 0}
main .ps-sec.ps-va .ps-ar svg{width:30px;height:12px;transform:rotate(90deg);transform-origin:center;margin-left:-9px}
main .ps-sec.ps-va .ps-ar::before{display:none}
main .ps-sec.ps-va .ps-ar::after{content:"";display:block;position:absolute;left:36px;right:0;top:50%;bottom:auto;width:auto;border:0;border-top:1px solid rgba(20,18,16,.1);border-radius:0;opacity:1}
main .ps-sec.ps-va .ps-p.none,main .ps-sec.ps-va .ps-ar.none{display:none}
main .ps-sec.ps-va .ps-s{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:18px}
main .ps-sec.ps-va .ps-row>.ps-pan>.ps-s>.ps-c,main .ps-sec.ps-va .ps-row>.ps-pan>.ps-p>.ps-c{flex:none}
main .ps-sec.ps-va .ps-sc{padding:30px 33px}
main .ps-sec.ps-va .ps-row.p2 .ps-p{grid-template-columns:none;gap:0 36px}
main .ps-sec.ps-va .ps-row.p2 .ps-pc{padding:0}

/* ===== b · two-column table ===== */
main .ps-sec.ps-vb .ps-heads{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:0;margin-bottom:48px}
main .ps-sec.ps-vb .ps-gap{display:none}
main .ps-sec.ps-vb .ps-hs{padding-left:33px}
main .ps-sec.ps-vb .ps-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);position:sticky;top:93px;z-index:5;background:#F6F5F2;box-shadow:inset 0 -1px 0 rgba(20,18,16,.18)}
main .ps-sec.ps-vb .ps-cols span{padding:18px 33px 18px 0;font-size:15px;line-height:1.5;font-weight:500;color:var(--muted)}
main .ps-sec.ps-vb .ps-cols span+span{padding-left:33px;color:var(--ink);background:#FFFFFF;border-radius:21px 21px 0 0}
main .ps-sec.ps-vb .ps-rows{gap:0}
main .ps-sec.ps-vb .ps-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
main .ps-sec.ps-vb .ps-ar{display:none}
main .ps-sec.ps-vb .ps-p,main .ps-sec.ps-vb .ps-s{display:flex;flex-direction:column;gap:0;justify-content:flex-start!important}
main .ps-sec.ps-vb .ps-p{padding:0 33px 0 0}
main .ps-sec.ps-vb .ps-s{background:#FFFFFF;padding:0 33px}
main .ps-sec.ps-vb .ps-row+.ps-row>.ps-pan>.ps-p{border-top:1px solid rgba(20,18,16,.12)}
main .ps-sec.ps-vb .ps-row+.ps-row>.ps-pan>.ps-s{box-shadow:inset 0 1px 0 rgba(20,18,16,.08)}
main .ps-sec.ps-vb .ps-row:last-child>.ps-pan>.ps-s{border-radius:0 0 21px 21px}
main .ps-sec.ps-vb .ps-row:first-child>.ps-pan>.ps-s{border-radius:0 0 0 0}
main .ps-sec.ps-vb .ps-row:only-child>.ps-pan>.ps-s{border-radius:0 0 21px 21px}
main .ps-sec.ps-vb .ps-c{flex:none!important;background:none;border-radius:0;padding:33px 0}
main .ps-sec.ps-vb .ps-c+.ps-c{border-top:1px dashed rgba(20,18,16,.12)}
main .ps-sec.ps-vb .ps-top{min-height:12px;margin-bottom:12px}
main .ps-sec.ps-vb .ps-row:not(:has(.k,.x)) .ps-top{display:none}
main .ps-sec.ps-vb .ps-top .ps-tag:not(.x){display:none}
main .ps-sec.ps-vb .ps-c h3{font-size:18px;padding-bottom:12px}
main .ps-sec.ps-vb .ps-c h3+p{padding-top:0;border-top:0}
main .ps-sec.ps-vb .ps-pc h3{color:var(--body)}
main .ps-sec.ps-vb .ps-sc h3{position:relative;padding-left:21px}
main .ps-sec.ps-vb .ps-sc h3::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;background:var(--orange)}
main .ps-sec.ps-vb .ps-sc h3+p{padding-left:21px}
main .ps-sec.ps-vb .ps-s>.num-card{margin:33px 0 0;background:#FE5000!important;padding:27px 30px}
main .ps-sec.ps-vb .ps-row.p2 .ps-p{display:flex}
main .ps-sec.ps-vb .ps-row.p2 .ps-pc{padding:27px 0}
main .ps-sec.ps-vb .ps-ar::before,main .ps-sec.ps-vb .ps-ar::after{display:none}

/* ===== c · tabs by problem (phones: accordion) ===== */
main .ps-sec.ps-vc .ps-rows{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:repeat(var(--n),auto) 1fr;column-gap:48px;row-gap:0;align-items:start}
main .ps-sec.ps-vc .ps-row{display:contents}
main .ps-sec.ps-vc .ps-tab{grid-column:1;display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:center;column-gap:18px;width:100%;margin:0;padding:24px 21px;border:0;border-top:1px solid rgba(20,18,16,.12);border-radius:0;background:none;text-align:left;font:inherit;color:var(--body);cursor:pointer;transition:background-color .2s ease,color .2s ease}
main .ps-sec.ps-vc .ps-row:last-child .ps-tab{border-bottom:1px solid rgba(20,18,16,.12)}
main .ps-sec.ps-vc .ps-tl{display:grid;gap:6px}
main .ps-sec.ps-vc .ps-tt{font-size:18px;line-height:1.45;font-weight:500}
main .ps-sec.ps-vc .ps-tab .ps-tag{justify-self:start;grid-column:1;margin-top:9px}
main .ps-sec.ps-vc .ps-tab i{grid-column:2;grid-row:1;width:9px;height:9px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);justify-self:center;color:var(--muted)}
main .ps-sec.ps-vc .ps-row.is-on .ps-tab{background:#FFFFFF;border-radius:15px;border-color:transparent;color:var(--ink)}
main .ps-sec.ps-vc .ps-row.is-on .ps-tab i{color:var(--orange)}
main .ps-sec.ps-vc .ps-row.is-on+.ps-row .ps-tab{border-top-color:transparent}
main .ps-sec.ps-vc .ps-tab:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
@media (hover:hover) and (pointer:fine){main .ps-sec.ps-vc .ps-row:not(.is-on) .ps-tab:hover{color:var(--ink)}main .ps-sec.ps-vc .ps-row:not(.is-on) .ps-tab:hover i{color:var(--orange)}}
main .ps-sec.ps-vc .ps-pan{display:none;grid-column:2;grid-row:1/span var(--n1)}
main .ps-sec.ps-vc .ps-row.is-on .ps-pan{display:flex;flex-direction:column}
main .ps-sec.ps-vc .ps-p{display:grid;gap:24px}
main .ps-sec.ps-vc .ps-pc{background:none;border-radius:0;padding:0}
main .ps-sec.ps-vc .ps-pc .ps-top{margin-bottom:12px}
main .ps-sec.ps-vc .ps-pc h3{padding-bottom:9px;color:var(--body)}
main .ps-sec.ps-vc .ps-pc h3+p{padding-top:0;border-top:0;color:var(--muted)}
main .ps-sec.ps-vc .ps-ar{position:relative;justify-content:flex-start;height:30px;margin:21px 0}
main .ps-sec.ps-vc .ps-ar svg{width:30px;transform:rotate(90deg);margin-left:-9px}
main .ps-sec.ps-vc .ps-ar::before{display:none}
main .ps-sec.ps-vc .ps-ar::after{content:"";display:block;position:absolute;left:36px;right:0;top:50%;bottom:auto;width:auto;border:0;border-top:1px solid rgba(20,18,16,.1);border-radius:0;opacity:1}
main .ps-sec.ps-vc .ps-p.none,main .ps-sec.ps-vc .ps-ar.none{display:none}
main .ps-sec.ps-vc .ps-s{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;justify-content:stretch!important}
main .ps-sec.ps-vc .ps-row.p2 .ps-p{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 36px}
main .ps-sec.ps-vc .ps-row.p2 .ps-pc{padding:0}

@media (max-width:981px){
 main .ps-sec.ps-va .ps-row::before{grid-column:1/13;grid-row:auto;padding:0 0 18px}
 main .ps-sec.ps-va .ps-p,main .ps-sec.ps-va .ps-ar,main .ps-sec.ps-va .ps-s{grid-column:1/13}
 main .ps-sec.ps-vc .ps-rows{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:30px}
}
@media (max-width:759px){
 main .ps-sec.ps-va .ps-heads{grid-template-columns:1fr;margin-bottom:39px}
 main .ps-sec.ps-va .ps-hp>.t,main .ps-sec.ps-va .ps-hp>.d,main .ps-sec.ps-va .ps-hs>.t,main .ps-sec.ps-va .ps-hs>.d{grid-column:1;grid-row:auto}
 main .ps-sec.ps-va .ps-hp>.d{padding-top:21px}
 main .ps-sec.ps-va .ps-row{grid-template-columns:1fr;padding:36px 0}
 main .ps-sec.ps-va .ps-row::before{grid-column:1}
 main .ps-sec.ps-va .ps-p,main .ps-sec.ps-va .ps-ar,main .ps-sec.ps-va .ps-s{grid-column:1}
 main .ps-sec.ps-va .ps-p,main .ps-sec.ps-va .ps-s{grid-auto-flow:row;row-gap:24px}
 main .ps-sec.ps-va .ps-s{row-gap:12px}
 main .ps-sec.ps-va .ps-ar{height:30px;margin:18px 0}
 main .ps-sec.ps-va .ps-ar svg{transform:rotate(90deg)}
 main .ps-sec.ps-va .ps-sc{padding:24px}

 main .ps-sec.ps-vb .ps-heads{grid-template-columns:1fr;row-gap:36px;margin-bottom:39px}
 main .ps-sec.ps-vb .ps-hs{padding-left:0}
 main .ps-sec.ps-vb .ps-cols{display:none}
 main .ps-sec.ps-vb .ps-rows{gap:24px}
 main .ps-sec.ps-vb .ps-row{grid-template-columns:1fr}
 main .ps-sec.ps-vb .ps-p{padding:0;border-top:1px solid rgba(20,18,16,.12)!important}
 main .ps-sec.ps-vb .ps-p.none{display:none}
 main .ps-sec.ps-vb .ps-s{border-radius:21px!important;box-shadow:none!important;padding:0 24px}
 main .ps-sec.ps-vb .ps-c{padding:24px 0}
 main .ps-sec.ps-vb .ps-top .ps-tag:not(.x){display:inline-flex}
 main .ps-sec.ps-vb .ps-s>.num-card{margin-top:24px}

 main .ps-sec.ps-vc .ps-rows{display:block}
 main .ps-sec.ps-vc .ps-row{display:block;border-top:1px solid rgba(20,18,16,.12)}
 main .ps-sec.ps-vc .ps-row:last-child{border-bottom:1px solid rgba(20,18,16,.12)}
 main .ps-sec.ps-vc .ps-tab{border:0!important;padding:21px 0;border-radius:0!important;background:none!important}
 main .ps-sec.ps-vc .ps-tab i{transform:rotate(135deg)}
 main .ps-sec.ps-vc .ps-row.is-on .ps-tab i{transform:rotate(-45deg)}
 main .ps-sec.ps-vc .ps-row:last-child .ps-tab{border-bottom:0}
 main .ps-sec.ps-vc .ps-pan{padding:0 0 30px}
 main .ps-sec.ps-vc .ps-row.p2 .ps-p{grid-template-columns:1fr}
 main .ps-sec.ps-vc .ps-sc,main .ps-sec.ps-vc .ps-s>.num-card{padding:24px}
}
@media (prefers-reduced-motion:reduce){main .ps-sec.ps-vc .ps-tab{transition:none}}

/* ---------- 10 · grov service pages (ATP, Horizon AI 導入) on the service-page system (v3.8) ---------- */
/* request sample: a neutral surface like every other card, no dark panel */
.svc-grov main .pj-code{background:#F6F5F2;border-radius:21px;padding:27px 33px;gap:15px}
.svc-grov main .pj-code pre{color:var(--ink);font-size:15px}
.svc-grov main .pj-code+.bento,.svc-grov main .bento+.bento,.svc-grov main .bento+.pj-code{margin-top:var(--col-gap)}
.svc-grov main .bento+.note-bar{margin-top:21px}
.svc-grov main .tx-card .bc-top+.bd{margin-top:42px}
.svc-grov main .bc .pj-plist{margin-top:6px;border-top-color:rgba(20,18,16,.1)}
.svc-grov main .bc>.svc-l{margin-top:auto;padding-top:18px}
/* related row: partner marks carry their logo in place of the title */
.rel-logo{display:block;height:27px;width:auto}
.rel-marks+.rel-links{margin-top:0}
.rel-marks .rel-i:last-child{border-bottom:0}
@media (max-width:759px){.svc-grov main .pj-code{padding:21px 24px}.svc-grov main .pj-code pre{font-size:12px}.svc-grov main .tx-card .bc-top+.bd{margin-top:30px}.rel-marks .rel-i:last-child{border-bottom:0}}
/* flagship pages: related links use the same quiet row (after the resource posts it sits 57px below them) */
main .posts+.pj-relrow{margin-top:57px}
main .pj-relrow>.sub-h{margin-bottom:18px}
@media (max-width:759px){.svc-grov .hero-full .copy>.h1{font-size:min(39px,8.4vw)!important}}

/* ---------- 9 · v3.9 related row: 2.5x the air above it (72 -> 180, phones 57 -> 144), no divider over it ----------
   service / flagship / grov pages share .rel-sec (pages_services.related, pages_projects.related_of / rel_of);
   flagship posts + related row: 57 -> 144; article prose 「相關服務：」 / 「相關產品與服務：」 line (.rel-p, normalize.py): 20 -> 51 */
main .sec.rel-sec{padding-top:180px}
main .sec.rel-sec::before{display:none!important;content:none!important}
main .sec.rel-sec{border-top:0!important}
main .posts+.pj-relrow{margin-top:144px;padding-top:0;border-top:0}
main .prose p.rel-p{margin-top:51px;padding-top:0;border-top:0}
@media (max-width:759px){
 main .sec.rel-sec{padding-top:144px}
 main .posts+.pj-relrow{margin-top:108px}
 main .prose p.rel-p{margin-top:42px}
}

/* ---------- 12 · v3.9 number / stat cards: content from the top; label, figure, 人數上限, hairline and body share
   one set of row tracks across a row (subgrid), so every hairline and baseline lines up.
   A size container cannot be a subgrid, so in these rows the container moves from the card to the grid (.bento /
   .stats) and the figure size is worked out from the card's share of it: --s = columns spanned of 12 (card width =
   s/12 of the grid minus its share of the gaps), --n = stats columns. Same result as the per-card 25cqi / 18cqi. ---------- */
main .num-card{justify-content:flex-start;align-content:start}
main .num-card>.kv small.pre{line-height:1}
@supports (grid-template-rows:subgrid){
 main .bento:not(:has(>:not(.num-card))){container-type:inline-size;--pad:72px}
 main .bento:not(:has(>:not(.num-card)))>.num-card{container-type:normal;display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:0;align-content:start;--s:4;
  --cw:calc(var(--s) * 100cqi / 12 - (1 - var(--s) / 12) * var(--col-gap) - var(--pad))}
 main .bento:not(:has(>:not(.num-card)))>.num-card:has(>.ks){grid-row:span 3}
 main .bento:not(:has(>:not(.num-card)))>.num-card:has(>.open){grid-row:span 4}
 main .bento:not(:has(>:not(.num-card)))>.num-card>*{align-self:start}
 main .bento:not(:has(>:not(.num-card)))>.num-card>.kv{align-self:last baseline;font-size:clamp(33px,calc(var(--cw) * .25),84px)!important}
 main .bento:not(:has(>:not(.num-card)))>.num-card>.kv.sm{font-size:clamp(21px,calc(var(--cw) * .12),39px)!important}
 main .bento>.num-card.span-3{--s:3} main .bento>.num-card.span-6{--s:6} main .bento>.num-card.span-8{--s:8} main .bento>.num-card.span-12{--s:12}
 main .stats{container-type:inline-size;--n:4}
 main .stats.c3{--n:3}
 main .stats>div{container-type:normal;grid-row:span 3;grid-template-rows:subgrid;row-gap:9px}
 main .stats>div>.v{align-self:last baseline;font-size:clamp(24px,calc((100cqi - (var(--n) - 1) * var(--col-gap)) / var(--n) * .18),51px)!important}
 @media (max-width:1101px){main .bento>.num-card:is(.span-3,.span-4){--s:6} main .bento>.num-card.span-4:last-child:nth-child(odd){--s:12}}
 @media (max-width:981px){main .gp .gp-ev .stats{--n:2}}
 @media (max-width:900px){main .fx .stats{--n:2}}
 @media (max-width:759px){main .stats,main .stats.c3{--n:2}}
 @media (max-width:759px){main .bento>.num-card{--s:6!important} main .bento>.num-card:last-child:nth-child(odd),main .bento>.num-card.cmp{--s:12!important}}
 @media (max-width:360px){main .stats,main .stats.c3{--n:1}}
}

/* ---------- 11 · v3.9 service rail: one card width (never below 300 px, phones 270 px); the figure column takes the
   free width (it is a size container, so it would otherwise collapse), short labels and the link stay on one line ---------- */
main .rail{grid-auto-columns:max(300px,calc((100% - 11*var(--col-gap))/12*4 + 3*var(--col-gap)))}
main .svc{min-width:0}
main .svc>.svc-b{align-items:flex-end}
main .svc-b>.svc-n{flex:1 1 auto;min-width:0}
main .svc-n .kv,main .svc-n .kl,main .svc-n .u{white-space:nowrap}
main .svc-n .kl{overflow:hidden;text-overflow:ellipsis;max-width:100%}
main .svc-b>.arr{flex:none}
@media (max-width:1101px){main .rail{grid-auto-columns:max(300px,calc((100% - var(--col-gap))/2.2))}}
@media (max-width:759px){main .rail{grid-auto-columns:max(270px,84%)}}
/* even spacing above related rows: flagship inline row matches the ~219px content gap of .rel-sec pages */
main .posts+.pj-relrow{margin-top:216px}
@media (max-width:759px){main .posts+.pj-relrow{margin-top:150px}}

/* ---------- 13 · v3.10 heading breaks (normalize.py heads()): Latin terms inside CJK headings stay whole ---------- */
main :is(h1,h2,h3) .nbh{white-space:nowrap}

/* ---------- 14 · v3.10 sub-block spacing tokens: a new sub-block inside a section never sits on the block above it,
   and a hairline always has air on both sides.
   --sub-gap  : cards / block -> next sub-block heading (no hairline)       desktop 132 · phones 84
   --line-gap : content -> hairline and hairline -> heading (x2 = sub-gap)   desktop 66  · phones 42
   --fn-gap   : block -> its footnote (「＊ …」, note bars, disclaimers)        desktop 36  · phones 30 ---------- */
:root{--sub-gap:132px;--line-gap:66px;--fn-gap:36px}
@media (max-width:759px){:root{--sub-gap:84px;--line-gap:42px;--fn-gap:30px}}
/* flagship: 「從場地設計到叢集維運…」 after the stat cards (cyberjaya) */
main .pj-e2e.mt-l{margin-top:var(--sub-gap)}
.fx main .pj-e2e.mt-l{margin-top:var(--line-gap);padding-top:var(--line-gap)!important}
/* service pages: second step list under a hairline (e.g. ../konstra-ai/site/index.html 場地整備五項) */
main .bento+.sub-h{margin-top:var(--line-gap);padding-top:var(--line-gap)}
@media (max-width:759px){main .bento+.sub-h{margin-top:var(--line-gap);padding-top:var(--line-gap)}}
/* flagship: diagram label 「合作架構」 / 「三網分離架構」 gets its own room above the diagram */
main .pj-lyr .ph{margin-bottom:30px}
@media (max-width:981px){main .pj-pod{gap:42px}}
/* article tag row and group spirit / quote rules: text no longer sits on the hairline */
main .art-tags{margin-top:var(--line-gap);padding-top:var(--line-gap)}
main .gp-sp-foot{margin-top:calc(var(--line-gap) - 24px);padding-top:var(--line-gap)}
main .gp-2r blockquote{margin-top:var(--line-gap);padding-top:var(--line-gap)}
/* footnotes: clear air between a block and its 「＊ …」 note (consecutive notes stay together) */
main :not(.pj-fn)+p.pj-fn{margin-top:var(--fn-gap)}
.svc-grov main .bento+.note-bar,main .bento+.note-bar{margin-top:var(--fn-gap)}
main .parts+p.fine,main .rows+p.fine{margin-top:var(--fn-gap)}
/* compute site panels keep the note pinned to the panel bottom (margin-top:auto); the extra air goes in padding */
main .cd-panel>:is(.cd-act,.cd-tl)+p.fine{padding-top:calc(var(--fn-gap) - 18px)}
/* home: globe card -> 「探索可交付算力」 list is its own sub-block */
main .globe-stage+.v1list{margin-top:calc(var(--sub-gap) - 12px)}
/* FAQ questions use the same phrase joints as headings (normalize heads()) */
main .faq summary{word-break:keep-all;overflow-wrap:break-word;line-break:strict}
main .faq summary .nbh{white-space:nowrap}
.cta .nw,.kf .nw{white-space:nowrap}