/* 栏目内容布局；品牌数值由 design-system.css 提供，展品不加载本文件。 */
.content-page { min-height:100dvh; display:flex; flex-direction:column }
main { flex:1; padding-bottom:64px }
.wrap { width:min(var(--ds-container),calc(100% - 2 * var(--ds-gutter))); margin-inline:auto }
.entry { padding-block:72px 48px }
.kicker { color:var(--ds-accent); font-size:13px; font-weight:650; margin:0 0 16px }
h1 { font-size:var(--ds-type-display); line-height:1.15; letter-spacing:-.04em; margin:0 0 24px }
h2 { font-size:var(--ds-type-title); line-height:1.3; letter-spacing:-.025em; margin:0 0 20px }
h3 { font-size:21px; line-height:1.35; margin:0 0 12px }
p { margin:0 0 16px }
.summary { font-size:19px; line-height:1.8; max-width:680px; color:var(--ds-muted) }
.meta { justify-self:start; display:inline-block; font-size:12px; color:var(--ds-muted); background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:99px; padding:7px 14px }
.stack { padding-block:40px }
.stack>.wrap>p:not(.kicker):not(.actions) { max-width:790px; color:var(--ds-muted); line-height:1.9 }
.blocks,.recap,.pair { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:32px }
.blocks article,.recap article,.pair>div { background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-panel); padding:28px }
.blocks article p,.recap article p { color:var(--ds-muted); font-size:15px; margin:0 }
.blocks article::before { content:'↗'; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; color:var(--ds-accent); background:var(--ds-accent-soft); margin-bottom:20px }
.recap,.pair { grid-template-columns:repeat(2,minmax(0,1fr)) }
.pair { max-width:760px }
.pair-label { font-size:12px; color:var(--ds-accent); font-weight:650 }
.pair p:last-child { margin:0 }
.more { color:var(--ds-accent); text-decoration:none; font-size:14px; font-weight:650; display:inline-block; margin-top:20px }
.more:hover { text-decoration:underline }
.actions { display:flex; flex-wrap:wrap; gap:24px }
.rows { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:32px }
.row { padding:28px; border:1px solid var(--ds-border); border-radius:var(--ds-radius-card); background:var(--ds-surface); display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:24px }
.row p { color:var(--ds-muted); font-size:15px; margin:0; max-width:460px }
.status { display:inline-flex; align-items:center; min-height:40px; padding:8px 16px; font-size:13px; border-radius:var(--ds-radius-control); color:var(--ds-accent); background:var(--ds-accent-soft); text-decoration:none }
a.status:hover { background:var(--ds-accent); color:white }
span.status { background:var(--ds-canvas); color:var(--ds-muted) }
.page-lab .row:last-child { background:var(--ds-cool); border-color:#dce8f8 }
.page-notes .rows { grid-template-columns:1fr; max-width:760px }
.page-notes .row { padding:40px; background:var(--ds-surface) }
.product-entry { display:grid; grid-template-columns:1fr 1fr; column-gap:64px; align-content:center; align-items:start }
.product-entry> :not(figure) { grid-column:1 }
.product-entry .summary { font-size:18px }
.hero-shot { grid-column:2; grid-row:1/6; margin:0; min-height:380px; border-radius:var(--ds-radius-card); background:var(--ds-warm); padding:36px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:24px }
.page-bridge .hero-shot { background:var(--ds-cool) }
figcaption { font-size:11px; color:var(--ds-muted); text-align:center }
.window { width:100%; border:1px solid var(--ds-border); background:white; border-radius:16px; box-shadow:var(--ds-shadow); overflow:hidden }
.window-bar { font-size:12px; font-weight:650; padding:14px 20px; border-bottom:1px solid var(--ds-border) }
.window-body { display:flex; min-height:230px }
.rail { background:#f9fafc; padding:20px 14px; display:flex; flex-direction:column; gap:16px; font-size:11px; min-width:72px; border-right:1px solid var(--ds-border); color:var(--ds-muted) }
.rail b { color:var(--ds-accent) }
.pane { padding:20px; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:20px }
.bubble { font-size:12px; line-height:1.8; padding:12px 14px; border-radius:12px; background:var(--ds-canvas); margin:0 0 12px }
.bubble.me { background:var(--ds-accent-soft) }
.composer { color:var(--ds-muted); font-size:11px; border:1px solid var(--ds-border); padding:10px; border-radius:10px; margin:0 }
.phone { width:210px; max-width:100%; background:white; border:1px solid #dce7f6; border-radius:28px; padding:12px 16px 24px; box-shadow:var(--ds-shadow) }
.phone-notch { width:65px; height:6px; border-radius:20px; background:var(--ds-border); margin:0 auto 24px }
.phone-screen .k { font-size:11px; color:var(--ds-muted); margin-bottom:16px }
.ask { display:flex; gap:8px; font-size:12px }
.ask span { flex:1; text-align:center; padding:8px; border:1px solid var(--ds-border); border-radius:8px }
.ask .yes { color:white; background:var(--ds-accent); border-color:var(--ds-accent) }
@media(max-width:1000px) { .product-entry { column-gap:32px } .hero-shot { padding:24px } }
@media(max-width:760px) {
 .entry { padding-block:48px 24px }
 .summary { font-size:17px }
 .stack { padding-block:28px }
 .blocks,.recap,.pair,.rows { grid-template-columns:1fr; gap:16px; margin-top:24px }
 .product-entry { display:block }
 .hero-shot { margin-top:24px; min-height:320px; padding:24px }
 .blocks article,.recap article,.pair>div,.row { padding:24px }
 .page-notes .row { padding:28px }
 .window-body { min-height:220px }
 .pane { padding:14px }
 main { padding-bottom:40px }
}
@media(max-width:360px) { .hero-shot { padding:18px } .rail { min-width:55px; padding:16px 10px } .bubble { padding:10px; font-size:11px } }

.product-screenshot { margin:32px 0 0; padding:16px; background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-panel) }
.product-screenshot img { width:100%; height:auto; border-radius:12px }
.product-screenshot figcaption { margin-top:16px }
.article-date,.article-byline { font-size:13px; color:var(--ds-muted) }
.reading { max-width:800px; padding-block:56px 24px }
.article-header { padding-bottom:28px; border-bottom:1px solid var(--ds-border) }
.article-header .more { margin:0 0 32px }
.article-header h1 { font-size:clamp(30px,3.6vw,48px); line-height:1.35 }
.article-header .summary { font-size:18px }
.article-body { padding-top:32px; font-size:17px; line-height:1.95; overflow-wrap:anywhere }
.article-body>p { margin-bottom:24px }
.article-body h2 { font-size:26px; margin:48px 0 20px }
.article-callout { padding:24px 28px; border-left:3px solid var(--ds-accent); border-radius:0 16px 16px 0; background:var(--ds-accent-soft); margin:32px 0 }
.article-callout p { margin:0 }
.article-next { display:flex; flex-wrap:wrap; gap:12px; margin-top:40px }
@media(max-width:760px) { .reading { padding-top:32px } .article-body { font-size:16px } .article-body h2 { font-size:23px } .article-callout { padding:20px } .product-screenshot { padding:10px } }