/* Desktop 1-4: 1960 x 1080, centered 1379px grid. */
.flow-section{scroll-margin-top:180px}
.flow-section .flow-details h3{font-size:36px;line-height:34px;margin:31px 0 37px}
.flow-section .flow-details>p{font-size:24px;line-height:30px;max-width:256px;color:#888}
.flow-connector{position:absolute;height:0;border-top:1px dotted #689bb0;transform-origin:left center;pointer-events:none;z-index:2}
.flow-connector::after{content:"";position:absolute;right:0;top:-3px;width:5px;height:5px;border-right:1px solid #689bb0;border-top:1px solid #689bb0;transform:rotate(45deg)}
.flow-comment[data-level]::before{content:attr(data-level);position:absolute;right:calc(100% + 16px);top:2px;font-size:10px;white-space:nowrap;color:#888}
.flow-section{padding:136px 0 100px;overflow:visible}
.flow-heading{display:grid;grid-template-columns:minmax(0,400px) minmax(0,896px);gap:82px;align-items:start;margin-bottom:-20px}
.flow-heading h2{font-size:64px;line-height:1.19;font-weight:600;color:var(--accent);margin:0}
.flow-controls{align-self:start;justify-self:end;margin-top:30px;gap:48px;min-height:68px;align-items:start}
.flow-controls button{font-size:20px;font-weight:600;color:var(--accent);padding:12px 0 25px;min-height:68px}
.flow-body{display:grid;grid-template-columns:minmax(0,400px) minmax(0,896px);gap:82px;align-items:start;min-height:525px}
.flow-details{padding-top:179px}.flow-details .eyebrow{font-size:20px}.flow-details h3{font-size:36px;font-weight:700;margin:24px 0 32px;color:#111}.flow-details>p{font-size:24px;line-height:1.3;max-width:290px;color:#888}
.flow-canvas{position:relative;background:#f3f6f7;border-left:2px solid var(--accent);min-height:525px;padding:24px 30px;min-width:0}
.collected-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px}
.flow-comment{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;margin-bottom:12px;min-width:0;font-size:16px;line-height:1.5}
.flow-comment.level-1,.flow-comment.level-2{margin-left:24px}.flow-comment p{margin:0;color:#111}.flow-name{color:#888}.flow-comment small,.flow-meta{font-size:11px;color:#888;display:block;line-height:1.55}
.comment-person{width:18px;height:18px;border-radius:50%;background:#fff;color:#9fa6a9;display:grid;place-items:center}.comment-person svg{width:13px;height:13px;stroke-width:1.25}
.flow-meta{display:flex;gap:4px;align-items:center}.flow-meta svg{width:12px;height:12px;stroke-width:1.2}
.flow-comment mark{background:#dce8ed;color:#111;border-bottom:1px solid #3f7188;box-decoration-break:clone}
.grouped-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1fr);gap:14px;align-items:start}
.thread-sheet{border:3px solid #fff;border-radius:8px;padding:12px;box-shadow:0 3px 3px #22333b20;min-width:0}
.grouped-columns .flow-comment{font-size:11px;line-height:1.45;grid-template-columns:12px minmax(0,1fr);gap:6px;margin-bottom:12px}.grouped-columns .flow-comment small,.grouped-columns .flow-meta{font-size:8px}.grouped-columns .flow-comment.level-1,.grouped-columns .flow-comment.level-2{margin-left:14px}.grouped-columns .comment-person{width:12px;height:12px;outline:1px dotted #689bb0;outline-offset:4px}
.merged-chain{font-size:12px;line-height:1.5;margin-bottom:22px}.merged-chain:last-child{margin-bottom:0}.chain-note{font-size:12px;line-height:1.35;font-weight:600;color:var(--accent);margin-top:12px;padding:8px 4px;border-top:1px solid #d3e1e7}
.comment-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:26px}.comment-tags span{padding:4px 8px;border-radius:8px;background:#ffffff70;box-shadow:0 2px 3px #263b4010;font-size:17px;font-weight:600;color:#65adca}
.filtered-columns{display:grid;grid-template-columns:minmax(0,1.25fr) 64px minmax(0,1fr);gap:30px;align-items:stretch;padding:18px 6px}
.clipboard-illustration{position:relative;border:3px solid #fff;border-radius:8px;padding:24px 20px 14px;box-shadow:0 4px 3px #243e4d22;min-width:0}
.clipboard-clip{position:absolute;top:-12px;left:calc(50% - 42px);width:84px;height:22px;border:2px solid #c5d7df;background:#e8f0f3;border-radius:5px}
.clipboard-heading{display:flex;align-items:center;gap:8px;border-bottom:1px solid #d3e0e7;padding-bottom:12px;font-size:17px;color:var(--accent)}
.clipboard-text p{font-size:14px;line-height:1.55;margin:20px 0 28px}.clipboard-text p:last-child{margin-bottom:6px}
.branch-links{display:flex;flex-direction:column;justify-content:space-around;color:#5e91a7}.branch-links svg{width:56px;height:30px;stroke-width:1.5}
.outcomes{display:flex;flex-direction:column;justify-content:space-between;gap:36px}.outcome{border:2px solid #fff;border-radius:8px;padding:18px 16px;background:#ffffff55;box-shadow:0 3px 4px #223e481c}.outcome h4{font-size:18px;font-weight:500;color:var(--accent);margin:0 0 16px}.outcome p,.outcome li{font-size:15px;line-height:1.6;color:#111}.outcome ul{padding-left:18px;margin:0}
html[lang=en] .flow-heading h2{font-size:48px;line-height:1.2}html[lang=en] .flow-controls{gap:30px}html[lang=en] .flow-controls button{font-size:17px}html[lang=en] .flow-details>p{font-size:21px}html[lang=en] .flow-comment{font-size:14px}html[lang=en] .grouped-columns .flow-comment{font-size:11px}
@media(min-width:1700px){.container{width:min(1379px,calc(100% - 128px))}.hero{padding-top:17px;padding-bottom:24px}.hero h1{height:219px;line-height:238px;margin-bottom:23px}.hero-line{line-height:47px}.hero-description{font-size:32px;line-height:47px;margin-top:0}.hero .product-scene{margin-top:44px;height:515px}.figma-product{width:642px;height:515px;flex-basis:642px}.hero .scene-layer{gap:76px}.hero-action{margin-top:10px}.hero-action .button{min-height:46px}.process-inner{min-height:100px}}
@media(max-width:1699px){.flow-heading,.flow-body{grid-template-columns:minmax(0,.9fr) minmax(0,1.8fr);gap:50px}.flow-heading h2{font-size:48px}.flow-section{padding-top:100px}.flow-controls{gap:28px;margin-top:14px}.flow-controls button{font-size:17px}.flow-heading{margin-bottom:14px}.flow-details{padding-top:115px}.flow-details h3{font-size:30px}.flow-details>p{font-size:20px}.flow-canvas{padding:20px;min-height:490px}.collected-columns{gap:24px}.flow-comment{font-size:14px}.filtered-columns{grid-template-columns:minmax(0,1.25fr) 30px minmax(0,1fr);gap:14px}.branch-links svg{width:30px}.clipboard-text p{font-size:12px}.outcome p,.outcome li{font-size:13px}.grouped-columns{gap:8px}.thread-sheet{padding:8px}.comment-tags span{font-size:14px}.flow-details h3{overflow-wrap:normal}}
@media(max-width:1100px){.flow-heading,.flow-body{gap:28px}.flow-heading h2,html[lang=en] .flow-heading h2{font-size:36px}.flow-controls{gap:18px}.flow-controls button,html[lang=en] .flow-controls button{font-size:14px}.flow-canvas{padding:16px}.flow-comment.level-1,.flow-comment.level-2{margin-left:10px}.collected-columns{gap:16px}.flow-details>p,html[lang=en] .flow-details>p{font-size:18px}}
@media(max-width:900px){.flow-section{padding-block:64px}.flow-heading{display:flex;gap:20px;margin-bottom:24px}.flow-controls{align-self:stretch;justify-content:flex-end;margin-top:0;min-height:44px}.flow-controls button{min-height:44px;padding-bottom:12px}.flow-body{grid-template-columns:1fr}.flow-details{padding:0;display:grid;grid-template-columns:44px 1fr;column-gap:12px}.flow-details h3{margin:0 0 12px;font-size:27px}.flow-details>p{grid-column:2;max-width:none}.flow-canvas{min-height:480px}.flow-comment{font-size:15px}.grouped-columns .flow-comment{font-size:12px}.clipboard-text p{font-size:14px}}
@media(max-width:600px){.flow-heading h2,html[lang=en] .flow-heading h2{font-size:36px}.flow-heading{gap:20px}.flow-controls{justify-content:space-between;gap:8px;flex-wrap:nowrap}.flow-controls button,html[lang=en] .flow-controls button{font-size:13px;white-space:normal;flex:1}.flow-body{gap:24px}.flow-canvas{min-height:0;padding:20px 14px}.collected-columns{grid-template-columns:1fr;gap:0}.flow-comment,html[lang=en] .flow-comment{font-size:14px;margin-bottom:20px}.grouped-columns{grid-template-columns:1fr;gap:24px}.grouped-columns .flow-comment,html[lang=en] .grouped-columns .flow-comment{font-size:13px}.grouped-columns .flow-comment small,.grouped-columns .flow-meta{font-size:11px}.grouped-columns>div:nth-child(2){order:3}.comment-tags{display:none}.merged-chain,.chain-note{font-size:14px}.filtered-columns{grid-template-columns:1fr;padding:12px 0;gap:24px}.branch-links{display:none}.clipboard-text p{font-size:14px}.outcomes{gap:20px}.outcome h4{font-size:18px}.outcome p,.outcome li{font-size:14px}.flow-details .eyebrow{font-size:17px}.flow-details h3{font-size:26px}.flow-details>p,html[lang=en] .flow-details>p{font-size:17px}}
@media(prefers-reduced-motion:reduce){.flow-canvas,.flow-canvas *{animation:none!important;transition:none!important}}
/* Match frame coordinates without scaling text or rasterizing the diagram. */
@media(min-width:1700px){
 .flow-section{position:relative;height:904px;padding:0;--heading-y:136px;--canvas-y:268px;--canvas-x:482px;--canvas-w:896px;--detail-y:447px}
 .flow-section[data-active-flow="1"]{--heading-y:158px;--canvas-y:274px;--canvas-x:429px;--canvas-w:950px;--detail-y:469px}
 .flow-section[data-active-flow="2"]{--heading-y:158px;--canvas-y:310px;--detail-y:469px}
 .flow-heading{display:block;margin:0}.flow-heading h2{position:absolute;top:var(--heading-y);left:0;font-size:64px;line-height:76px;font-weight:600}
 .flow-controls{position:absolute;top:calc(var(--heading-y) + 27px);right:0;width:350px;margin:0;gap:0;justify-content:space-between;height:68px}
 .flow-controls button{font-size:20px;line-height:25px;padding:18px 0 24px;font-weight:600;border-bottom-width:1px}
 .flow-body{display:block;min-height:0}.flow-details{position:absolute;top:var(--detail-y);left:0;padding:0;width:320px}
 .flow-details .eyebrow{display:block;font-size:20px;line-height:25px}
 .flow-canvas{position:absolute;top:var(--canvas-y);left:var(--canvas-x);width:var(--canvas-w);height:525px;min-height:525px;padding:17px 31px}
 .collected-columns{gap:50px}.collected-columns .flow-comment{min-height:88px;margin-bottom:12px;line-height:24px;gap:10px}
 .collected-columns .flow-comment small{line-height:24px}.collected-columns .flow-meta{line-height:13px}
 .collected-columns .flow-comment p{white-space:nowrap;font-size:16px}
 .grouped-columns{grid-template-columns:296px 256px 296px;gap:10px;padding-left:22px;align-items:start}
 [data-active-flow="1"] .flow-canvas{height:566px;padding:28px 17px 28px 31px}
 .grouped-columns .thread-sheet{padding:7px 7px;border-width:4px}
 .grouped-columns .source-sheet{height:344px}.grouped-columns .merged-sheet{height:485px;margin-top:6px;padding:11px 22px}
 .grouped-columns .flow-comment{position:relative;min-height:56px;margin-bottom:8px;font-size:10.27px;line-height:15.4px}
 .grouped-columns .flow-comment p{font-size:10.27px;line-height:15.4px;white-space:nowrap}
 .grouped-columns .flow-comment small{font-size:7px;line-height:15.4px}.grouped-columns .flow-meta{font-size:7px;line-height:8px}
 .merged-chain{height:128px;margin:0;font-size:10px;line-height:16px}.merged-chain p{margin:0}.merged-chain:last-child{height:auto}
 .chain-note{font-size:11px;line-height:14px;margin-top:17px;padding:6px 4px;border:1px solid white;box-shadow:0 3px 4px #00000015;text-align:center}
 .comment-tags{max-width:244px;margin:30px auto 0;gap:0 16px}.comment-tags span{font-size:20px;padding:4px 8px;line-height:30px}
 .filtered-columns{height:100%;padding:24px 6px;grid-template-columns:330px 1fr 266px;gap:32px}
 .clipboard-text p{font-size:14px;margin:16px 0 28px}.outcome h4{font-size:20px}
 html[lang=en] .flow-canvas{height:auto;min-height:525px}
 html[lang=en] .collected-columns .flow-comment p,html[lang=en] .grouped-columns .flow-comment p{white-space:normal}
 html[lang=en] .grouped-columns .source-sheet,html[lang=en] .grouped-columns .merged-sheet{height:auto;min-height:344px}
 html[lang=en] .merged-chain{height:auto;min-height:128px}
 .hero{padding-bottom:12px}
}
@media(max-width:1699px){.flow-section .flow-details h3{font-size:30px;line-height:1.2;margin:24px 0}.flow-section .flow-details>p{font-size:20px;line-height:1.5}}
@media(max-width:900px){.flow-section .flow-details h3{font-size:27px;margin:0 0 12px}.flow-section .flow-details>p{font-size:18px;max-width:none}.flow-connector{display:none}.flow-comment[data-level]::before{display:none}}
@media(max-width:600px){.flow-section .flow-details h3{font-size:26px}.flow-section .flow-details>p{font-size:17px}}
@property --ring-angle{syntax:'<angle>';inherits:false;initial-value:360deg}
.flow-comment mark{background-color:transparent;border:0;background-image:linear-gradient(#d1e0e7,#d1e0e7),linear-gradient(#20627f,#20627f);background-repeat:no-repeat;background-position:left top,left bottom;background-size:100% 100%,100% 1px;padding-bottom:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.grouped-columns .comment-person{position:relative;outline:none}
.annotation-ring{position:absolute;inset:-9px;border:1px dashed #20627f;border-radius:50%;pointer-events:none;mask-image:conic-gradient(#000 var(--ring-angle),transparent 0);--ring-angle:360deg}
.outcome{position:relative;border:0;border-radius:0;background:transparent;box-shadow:none;padding:12px 22px 22px;isolation:isolate;min-height:182px}
.outcome::before{content:"";position:absolute;inset:0;background:url('assets/figma-folder.svg') center / 100% 100% no-repeat;z-index:-1}
.outcome h4{height:34px;line-height:25px;font-size:20px;font-weight:400;margin:0 0 18px;color:#03587c}
.outcome ul,.outcome>p{background:white;border-radius:18px;box-shadow:inset 0 3px 3px #00000024;padding:18px 20px 18px 32px;margin:0;font-size:16px;line-height:24px;min-height:102px}
.outcome li{font-size:16px;line-height:24px}.outcome>p{padding-left:22px}
html[lang=en] .outcome h4{font-size:17px;height:auto;min-height:34px}html[lang=en] .outcome li,html[lang=en] .outcome>p{font-size:14px}
@media(max-width:1100px){.outcome{padding-inline:14px}.outcome h4{font-size:16px}.outcome li,.outcome>p{font-size:13px}.outcome ul{padding-left:24px}}
@media(min-width:1700px){.flow-section .flow-details>p{max-width:340px}.process-inner a,.process-inner .small-label{font-size:16px}.process-inner a span{font-size:16px}}
@media(min-width:1700px){html[lang=en] .flow-controls{width:480px;gap:24px}html[lang=en] .flow-controls button{font-size:16px}}
@media(min-width:1700px){.outcome{padding-inline:16px}.outcome ul{padding-left:24px;padding-right:10px}}

/* V09: annotation positions belong to each row at every breakpoint. */
.grouped-columns .flow-comment{position:relative}
.flow-comment[data-level]::before{display:block;right:calc(100% + 20px);top:0;font-size:12px;line-height:18px}
.grouped-columns{padding-left:44px;grid-template-columns:minmax(0,296fr) minmax(0,256fr) minmax(0,296fr);gap:12px}
.grouped-columns .source-sheet{position:relative}
.grouped-columns .chain-note{border:1px solid #fff;box-shadow:0 3px 4px #00000012;padding:7px 5px;text-align:center;font-size:12px;line-height:16px}
.comment-tags{position:relative;display:block;width:100%;max-width:244px;height:126px;margin:30px auto 0;padding:0}
.comment-tags span{position:absolute;display:grid;place-items:center;width:44%;height:42px;padding:0;font-size:20px;font-weight:600;color:#65adca;background:#ffffff50;border-radius:12px;box-shadow:0 3px 4px #00000009}
.scattered-tags span:nth-child(1){left:0;top:3px}.scattered-tags span:nth-child(2){left:52%;top:0}.scattered-tags span:nth-child(3){left:26%;top:39px}.scattered-tags span:nth-child(4){left:4%;top:80px}.scattered-tags span:nth-child(5){left:56%;top:71px}
.ordered-tags span:nth-child(odd){left:0}.ordered-tags span:nth-child(even){left:53%}.ordered-tags span:nth-child(-n+2){top:0}.ordered-tags span:nth-child(n+3):nth-child(-n+4){top:39px}.ordered-tags span:nth-child(n+5){top:78px}
.clipboard-text p{font-family:"Microsoft YaHei UI","Microsoft YaHei","Segoe UI",sans-serif;font-size:17px;line-height:1.7;margin:20px 0 28px}
.clipboard-heading{font-size:21px}.clipboard-heading svg{width:24px;height:24px;flex:none}
html[lang=en] .clipboard-text p{font-family:var(--type-family);font-size:16px;line-height:1.65}
@media(min-width:1700px){
 .grouped-columns{grid-template-columns:minmax(0,296fr) minmax(0,256fr) minmax(0,296fr);padding-left:22px;gap:10px}
 [data-active-flow="2"] .flow-canvas{height:auto;min-height:525px}
 [data-active-flow="2"] .filtered-columns{height:auto;min-height:475px;grid-template-columns:minmax(0,360px) minmax(32px,1fr) 266px;gap:24px}
 .clipboard-text p{font-size:16px;line-height:1.6;margin:16px 0 24px}
 .flow-section[data-active-flow="2"]{height:1030px}
}
@media(min-width:901px) and (max-width:1699px){
 .grouped-columns .flow-comment{font-size:12px;line-height:18px;margin-bottom:12px}
 .grouped-columns .flow-comment p{font-size:12px;line-height:18px}
 .grouped-columns .flow-comment small,.grouped-columns .flow-meta{font-size:9px}
 .grouped-columns .flow-comment.level-1,.grouped-columns .flow-comment.level-2{margin-left:8px}
 .comment-tags span{font-size:16px;height:36px}.comment-tags{max-width:230px}
 .flow-comment[data-level]::before{right:calc(100% + 14px);font-size:11px}
 .clipboard-text p{font-size:17px;line-height:1.65}
 .filtered-columns{grid-template-columns:minmax(0,1.3fr) 28px minmax(0,1fr);gap:16px}
}
@media(max-width:900px){
 .grouped-columns{padding-left:36px;grid-template-columns:1fr}
 .flow-comment[data-level]::before{right:calc(100% + 18px);font-size:11px}
 .comment-tags{display:block;margin-bottom:20px}
 .grouped-columns>div:nth-child(2){order:3}
 .grouped-columns .flow-comment{font-size:14px;line-height:1.6}
 .clipboard-text p,html[lang=en] .clipboard-text p{font-size:17px;line-height:1.7}
}
/* Fit the opening scene to browser content height, not monitor resolution. */
@media(min-width:901px){
 .hero{box-sizing:border-box;height:calc(100svh - 96px);min-height:560px;display:flex;flex-direction:column;align-items:center;padding:14px 0 12px;gap:0}
 .hero h1{height:auto;line-height:1.16;margin-bottom:12px;flex:none}
 .hero .product-scene{height:auto;min-height:0;flex:1;margin-top:24px;margin-bottom:0}
 .hero .scene-layer{height:100%;gap:64px}
 .hero .progressive-product{height:100%;aspect-ratio:642/515;max-width:642px;width:auto}
 .hero .figma-product{height:100%;width:100%;object-fit:contain;flex-basis:auto}
 .hero-action{flex:none;margin-top:12px}.hero-action .button{min-height:46px}
}
@media(min-width:901px) and (max-height:900px){
 .hero h1{font-size:132px;line-height:1.1;margin-bottom:8px}
 .hero-line{font-size:34px;line-height:44px}.hero-description{font-size:20px;line-height:30px;margin-top:0}
 .hero .product-scene{margin-top:14px}.hero .scene-layer{gap:44px}
}
@media(min-width:901px) and (max-height:680px){
 .hero{min-height:470px}.hero h1{font-size:96px}.hero-line{font-size:30px;line-height:38px}.hero-description{font-size:18px;line-height:28px}
}
@media(min-width:1700px){
 [data-active-flow="1"] .flow-canvas{height:610px}
 .grouped-columns .source-sheet{height:410px}
 .grouped-columns .flow-comment{font-size:12px;line-height:16px;min-height:64px;margin-bottom:8px}
 .grouped-columns .flow-comment p{font-size:12px;line-height:16px;white-space:normal}
 .grouped-columns .flow-comment small,.grouped-columns .flow-meta{font-size:9px;line-height:13px}
 .grouped-columns .merged-sheet{height:550px}
 .merged-chain{font-size:13px;line-height:18px}
 html[lang=en] .grouped-columns .source-sheet,html[lang=en] .grouped-columns .merged-sheet{height:auto;min-height:410px}
}
/* V10: four distinct comment-to-comment destinations, static dashed arrows. */
.flow-connector{border-top:1.5px dashed #347b99;z-index:2}
.flow-connector::after{border-color:#347b99;width:4px;height:4px;top:-2.75px}
.mapped-comment{display:block}.mapped-text{position:relative}.chain-separator{color:#5c7783}
.grouped-columns .merged-chain{height:auto;min-height:128px;margin:0 0 24px}
.grouped-columns .merged-chain:last-child{min-height:0;margin-bottom:0}
.grouped-columns .merged-sheet{height:auto;min-height:550px}
.comment-tags span{background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.95);backdrop-filter:blur(12px) saturate(115%);-webkit-backdrop-filter:blur(12px) saturate(115%);box-shadow:inset 0 1px 1px #fff,inset 0 -1px 2px #d9e5e940,0 3px 5px #283b4310;border-radius:12px}
@media(min-width:1700px){
 .flow-section[data-active-flow="1"]{--canvas-x:359px;--canvas-w:1020px;height:1060px}
 [data-active-flow="1"] .flow-canvas{height:auto;min-height:610px}
 [data-active-flow="1"] .grouped-columns{grid-template-columns:minmax(0,296fr) minmax(0,300fr) minmax(0,296fr);gap:18px}
 [data-active-flow="1"] .merged-chain{font-size:14px;line-height:20px}
}
@media(min-width:901px) and (max-width:1699px){
 [data-active-flow="1"] .flow-heading,[data-active-flow="1"] .flow-body{grid-template-columns:minmax(0,.75fr) minmax(0,2.1fr);gap:42px}
 [data-active-flow="1"] .grouped-columns{grid-template-columns:minmax(0,296fr) minmax(0,300fr) minmax(0,296fr)}
 [data-active-flow="1"] .merged-chain{font-size:13px;line-height:19px}
}
/* Keep the original frame and lower divider; change only the requested desktop offsets. */
@media(min-width:1700px){
 .process-inner{min-height:80px}
 .flow-section{height:924px}
 .flow-section[data-active-flow="1"]{height:1080px}
 .flow-section[data-active-flow="2"]{height:1050px}
 .flow-heading h2,.flow-controls,.flow-details,.flow-canvas{translate:0 -40px}
}