/* Shared editorial pages: the same paper, ink and restrained geometry as home. */
.wrap { width: min(calc(100% - 80px), 1280px); }
.topbar { min-height: 96px; }
.topbar nav { display:flex; gap:32px; align-items:center; }
.topbar nav a { font-size:14px; text-decoration:none; color:var(--muted); }
.topbar nav a:hover { color:var(--ink); }
.lang { white-space:nowrap; border-left:1px solid var(--line); padding-left:24px; }
.lang [aria-current] { color:var(--ink); font-weight:600; }
.content-main { max-width:none; padding-top:0; overflow-wrap:normal; }
.hero { padding:100px 0 88px; border-bottom:1px solid var(--line); }
.hero .eyebrow { margin-bottom:28px; }
.hero h1 { max-width:1000px; font-size:clamp(44px,5.5vw,76px); line-height:1.04; letter-spacing:-.045em; font-weight:500; margin-bottom:30px; text-wrap:balance; }
.intro { max-width:700px; font-size:20px; line-height:1.65; color:var(--muted); margin-bottom:32px; }
.cta { display:inline-flex; justify-content:center; align-items:center; min-height:48px; background:var(--accent); color:var(--paper); border:0; border-radius:4px; padding:12px 22px; font-family:inherit; font-size:15px; font-weight:600; line-height:1.5; text-decoration:none; cursor:pointer; }
.cta:hover { background:var(--ink); }
.article { max-width:none; padding:28px 0 0; }
.article section { display:grid; grid-template-columns:1fr 1.45fr; gap:80px; padding:44px 0; border-bottom:1px solid var(--line); }
.article h2 { margin:0; max-width:420px; font-size:30px; font-weight:500; line-height:1.2; letter-spacing:-.025em; text-wrap:balance; }
.article p { font-size:18px; color:var(--muted); line-height:1.8; margin:0; max-width:720px; }
.article > h2 { margin:48px 0 20px; }
.article > p { margin-bottom:32px; }
.resources { padding:80px 0; }
.resources > h2 { font-size:38px; font-weight:500; letter-spacing:-.035em; margin:0 0 36px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.card { padding:30px 30px 30px 0; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line); }
.card + .card { border-left:1px solid var(--line); padding-left:30px; }
.card h2 { font-size:23px; font-weight:500; line-height:1.25; margin:0 0 16px; letter-spacing:-.025em; }
.card p { font-size:16px; color:var(--muted); }
.card::after { content:'↗'; display:block; margin-top:28px; font-size:24px; color:var(--accent); }
.card:hover h2 { text-decoration:underline; text-underline-offset:5px; }
.demo-section { display:grid; grid-template-columns:1fr 1.45fr; gap:80px; padding:56px; background:#e8eef0; scroll-margin-top:24px; }
.demo-section h2 { margin:0; font-size:44px; font-weight:500; letter-spacing:-.035em; line-height:1.08; }
.demo-section form { min-width:0; }
.demo-section label { display:block; font-size:14px; margin:20px 0 7px; }
.demo-section label:first-child { margin-top:0; }
.demo-section input,.demo-section textarea { width:100%; padding:12px 14px; border:1px solid #a6b6bd; background:var(--paper); border-radius:3px; font:inherit; }
.demo-section textarea { min-height:110px; resize:vertical; }
.demo-section small { display:block; margin:20px 0; color:var(--muted); }
.flow { padding:48px; margin:48px 0; background:var(--ink); color:var(--paper); font-size:clamp(18px,2.5vw,30px); line-height:2; border-radius:4px; }
footer { background:var(--paper); }
@media(max-width:800px) {
 .wrap { width:calc(100% - 40px); }
 .topbar { align-items:flex-start; padding:24px 0; gap:20px; }
 .topbar nav { justify-content:flex-end; flex-wrap:wrap; gap:12px 20px; }
 .lang { padding-left:0; border:0; }
 .hero { padding:64px 0 52px; }
 .intro { font-size:18px; }
 .article section { grid-template-columns:1fr; gap:20px; padding:32px 0; }
 .article h2 { font-size:27px; }
 .article p { font-size:17px; }
 .cards { grid-template-columns:1fr; }
 .card + .card { border-left:0; padding-left:0; }
 .resources { padding:56px 0; }
 .resources > h2 { font-size:32px; }
 .demo-section { grid-template-columns:1fr; gap:32px; padding:28px 22px; }
 .demo-section h2 { font-size:36px; }
 .flow { padding:24px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
/* Product stories: large canvases and diagrams, sharing the homepage's visual language. */
.brand-mark { width:40px; height:40px; flex:none; }
.topic-hero { padding:76px 0 54px; border-bottom:0; display:grid; grid-template-columns:1.2fr 1fr; column-gap:100px; }
.topic-hero .eyebrow { grid-column:1/-1; margin-bottom:26px; text-transform:uppercase; font-size:12px; letter-spacing:.09em; }
.topic-hero h1 { font-size:clamp(42px,4.8vw,70px); grid-row:2/4; max-width:760px; }
.topic-hero .intro { font-size:18px; padding-top:4px; }
.topic-hero .cta { justify-self:start; align-self:start; }
.topic-explorer { background:var(--ink); color:var(--paper); margin:0 0 100px; border:1px solid #536771; }
.explorer-top { display:flex; justify-content:space-between; gap:18px; border-bottom:1px solid #536771; padding:18px 28px; font:11px/1.5 'SFMono-Regular',Consolas,monospace; letter-spacing:.06em; color:#b9c6cd; }
.explorer-layout { display:grid; grid-template-columns:1.5fr 1fr; min-height:410px; }
.diagram { position:relative; min-width:0; min-height:400px; background-image:radial-gradient(#536771 1px,transparent 1px); background-size:22px 22px; isolation:isolate; }
.diagram svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.diagram path { fill:none; stroke:#536771; stroke-width:1.4; vector-effect:non-scaling-stroke; transition:stroke .3s; }
.diagram path.is-active { stroke:#bedbe6; stroke-width:2; stroke-dasharray:10 5; animation:trace-path 1.2s ease-out 1; }
.diagram-node { position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); width:27%; min-height:72px; padding:14px 10px; border:1px solid #536771; border-radius:3px; background:#21323d; color:#b9c6cd; cursor:pointer; text-align:left; transition:background .25s,border-color .25s; }
.diagram-node span { display:block; font:10px/1.5 monospace; margin-bottom:7px; opacity:.75; }
.diagram-node strong { display:block; font-size:clamp(12px,1.2vw,17px); line-height:1.25; font-weight:500; overflow-wrap:anywhere; }
.diagram-node.is-active { background:#edf3f3; border-color:#edf3f3; color:var(--ink); }
.diagram-node:hover { border-color:#f6f6f2; }
.topic-explorer :focus-visible { outline:2px solid #a8d8ea; outline-offset:5px; }
.explorer-detail { padding:36px; border-left:1px solid #536771; }
.explorer-index { color:#b9c6cd; font:12px/1.5 monospace; margin:0 0 28px; }
.explorer-detail h2 { color:var(--paper); font-size:30px; font-weight:500; letter-spacing:-.025em; line-height:1.15; margin:0 0 20px; }
.explorer-description { color:#b9c6cd; font-size:16px; line-height:1.65; min-height:106px; }
.explorer-fact { border-top:1px solid #536771; padding-top:24px; }
.explorer-fact strong { display:block; font-size:clamp(22px,2.4vw,38px); line-height:1.2; letter-spacing:-.03em; font-weight:500; }
.explorer-fact span { display:block; margin-top:12px; color:#b9c6cd; font-size:13px; }
.explorer-controls { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #536771; }
.explorer-controls button { text-align:left; background:transparent; border:0; padding:22px 28px; color:#b9c6cd; font:inherit; font-size:14px; cursor:pointer; border-bottom:3px solid transparent; }
.explorer-controls button + button { border-left:1px solid #536771; }
.explorer-controls button[aria-pressed=true] { background:#2b3e49; color:var(--paper); border-bottom-color:#bedbe6; }
.chapter-heading { display:grid; grid-template-columns:1fr 1.45fr; gap:80px; border-bottom:1px solid var(--line); padding-bottom:40px; }
.chapter-heading .eyebrow { font-size:11px; letter-spacing:.08em; padding-top:10px; }
.chapter-heading h2 { font-size:clamp(38px,4vw,60px); line-height:1.06; letter-spacing:-.04em; margin:0; font-weight:500; max-width:600px; }
.article-heading { display:flex; gap:24px; }
.article-heading .section-index { padding-top:4px; flex:none; font:12px/1.5 monospace; color:var(--muted); }
@keyframes trace-path { from { stroke-dashoffset:90; } to { stroke-dashoffset:0; } }
@media(max-width:1000px) { .topic-hero { gap:32px; }.explorer-layout { grid-template-columns:1.2fr 1fr; }.explorer-detail { padding:28px; }.diagram-node strong { font-size:14px; } }
@media(max-width:720px) {
 .topbar { flex-wrap:wrap; }.topbar nav { width:100%; justify-content:space-between; gap:12px; }.topbar nav a { font-size:12px; }
 .topic-hero { display:block; padding:48px 0 36px; }.topic-hero h1 { font-size:44px; }.topic-hero .intro { font-size:17px; }
 .explorer-layout { grid-template-columns:1fr; }.diagram { min-height:310px; }.diagram-node { min-height:66px; padding:10px 8px; }.diagram-node strong { font-size:12px; }
 .explorer-detail { border-left:0; border-top:1px solid #536771; padding:26px; }.explorer-description { min-height:80px; }.explorer-detail h2 { font-size:27px; }
 .explorer-controls button { padding:18px 10px; font-size:12px; }.explorer-top { padding:16px; font-size:9px; }
 .topic-explorer { margin-bottom:60px; }.chapter-heading { display:block; padding-bottom:26px; }.chapter-heading h2 { font-size:38px; }.article-heading { gap:15px; }
}
@media(prefers-reduced-motion:reduce) { .diagram path.is-active { animation:none; }.diagram-node,.diagram path { transition:none; } }