/* A shared Seventh Genesis visual language for every illustrative example. */
:root{--art-stage:#e9eef0;--art-card:#fafcfc;--art-ink:#20383e;--art-muted:#4f686f;--art-line:#cad8dd;--art-accent:#256c78;--art-tint:#e0ebed;--art-shadow:#334c5614;--art-fins:#ccdce0}
html[data-theme=dark]{--art-stage:#142229;--art-card:#101b22;--art-ink:#edf1f0;--art-muted:#a7b9c0;--art-line:#34474f;--art-accent:#d8b37c;--art-tint:#20343e;--art-shadow:#0003;--art-fins:#28424e}
.story-panel{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.story-copy{min-width:0}.story-visual.sg-visual{background:var(--art-stage);color:var(--art-ink);display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:19px;padding:30px;min-height:510px;overflow:hidden;container-type:inline-size;border-right:1px solid var(--line)}
.visual-meta,.visual-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;line-height:1.4}
.visual-meta{font:500 10px/1.5 var(--body);letter-spacing:1.1px;color:var(--art-muted)}.visual-tag{font-size:9px;letter-spacing:.9px;border:1px solid var(--art-line);padding:4px 7px;flex-shrink:0}
.visual-frame{background:var(--art-card);border:1px solid var(--art-line);box-shadow:0 18px 35px var(--art-shadow);position:relative;min-width:0;overflow:hidden}
.demo-topbar{padding:17px 20px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid var(--art-line)}
.demo-brand{display:flex;gap:8px;align-items:center;flex-shrink:0}.demo-brand svg{width:24px;height:25px;fill:var(--art-accent)}.demo-brand>span{font:600 11px/1.15 var(--heading);letter-spacing:.4px}.demo-brand>span>span{display:block;font:500 8px/1.4 var(--body);letter-spacing:1.7px;margin-top:3px}.demo-nav{font-size:10px;color:var(--art-muted);line-height:1.4;text-align:right}.demo-nav>span{margin-left:8px;color:var(--art-accent);font-size:15px}
.demo-eyebrow{display:block;font:500 9px/1.6 var(--body);letter-spacing:1.4px;color:var(--art-muted)}
.commerce-content{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);padding:25px 21px 21px;align-items:center;gap:2px;min-height:255px}
.product-copy{position:relative;z-index:2;min-width:0}.product-copy>strong{display:block;font:500 clamp(23px,6.8cqw,36px)/1.12 var(--heading);letter-spacing:-1.2px;margin:14px 0}.product-copy>p{color:var(--art-muted);font-size:12px;line-height:1.6}.demo-cta{display:inline-flex;gap:12px;align-items:center;font:500 10px/1.5 var(--body);margin-top:20px;padding-bottom:6px;border-bottom:1px solid var(--art-accent);color:var(--art-ink)}.demo-cta b{font-size:16px;font-weight:400;color:var(--art-accent)}
.product-stage{position:relative;min-width:0;height:230px;display:grid;place-items:center;isolation:isolate}.product-stage img{position:absolute;inset:0;height:100%;width:100%;max-height:100%;min-height:0;object-fit:contain;z-index:1;filter:drop-shadow(0 12px 12px var(--art-shadow))}.product-orbit{width:100%;aspect-ratio:1;position:absolute;border-radius:50%;background:radial-gradient(circle,var(--art-tint),transparent 72%);z-index:-1}
.product-caption{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:15px 20px;border-top:1px solid var(--art-line)}.product-caption strong{display:block;font:500 12px var(--heading)}.product-caption span{display:block;font:10px/1.5 var(--body);color:var(--art-muted);margin-top:4px}.product-caption>span{font:9px var(--mono);white-space:nowrap;margin:0}
.visual-footer{font-size:12px;color:var(--art-muted);margin-top:1px}.visual-footer>span:last-child{color:var(--art-accent);font-size:19px;line-height:1}
.brand-composition{position:relative;isolation:isolate;padding:28px 25px 24px;overflow:hidden;min-height:268px}.brand-composition>strong{font:500 clamp(29px,8.8cqw,46px)/1.08 var(--heading);letter-spacing:-1.7px;display:block;margin:17px 0}.brand-composition em{font-style:normal;color:var(--art-accent)}.brand-composition>p{font-size:13px;line-height:1.55;color:var(--art-muted);margin-top:17px}.brand-signature{font-size:10px;line-height:1.5;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:25px;position:relative}.brand-signature b{font-size:20px;font-weight:400;color:var(--art-accent)}.brand-fins{position:absolute;inset:0 0 0 48%;display:flex;align-items:stretch;gap:10px;z-index:-1;transform:skew(-22deg) translateX(45px);opacity:.55;mask-image:linear-gradient(0deg,#000,transparent)}.brand-fins i{flex:1;background:linear-gradient(90deg,transparent,var(--art-fins));border-right:1px solid var(--art-line);min-width:15px}.channel-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--art-line);background:var(--art-tint)}.channel-strip span{padding:12px;text-align:center;font-size:11px;color:var(--art-muted)}.channel-strip span+span{border-left:1px solid var(--art-line)}
.systems-content{padding:24px 20px 20px}.systems-content>strong{font:500 clamp(24px,6.6cqw,31px)/1.2 var(--heading);letter-spacing:-.9px;display:block;margin:14px 0 23px}.system-flow{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:17px}.system-flow li{display:flex;align-items:center;gap:12px;position:relative;background:var(--art-card);border:1px solid var(--art-line);padding:13px 12px}.system-flow li+li:before{content:'';width:1px;height:18px;background:var(--art-line);position:absolute;top:-18px;left:24px}.system-number{font:10px var(--mono);color:var(--art-accent);flex-shrink:0}.system-flow li>div{min-width:0}.system-flow strong{font:500 13px/1.4 var(--heading);display:block;letter-spacing:-.1px}.system-flow p{color:var(--art-muted);font-size:11px;line-height:1.5;margin-top:3px}.system-symbol{font:17px var(--body);color:var(--art-accent);margin-left:auto}.system-flow .human-step{border-color:var(--art-accent);background:var(--art-tint)}.systems-note{font-size:11px;color:var(--art-muted);border-top:1px solid var(--art-line);padding:12px 20px;display:flex;gap:9px;align-items:center}.systems-note span{color:var(--art-accent);font-size:16px}
/* Keep imagery behind copy, with the same treatment at tablet and phone sizes. */
@media(max-width:1000px){.story-panel{grid-template-columns:1fr}.story-visual.sg-visual{border-right:0;border-bottom:1px solid var(--line);min-height:0;padding:32px max(28px,9%);gap:20px}.story-copy{padding:35px;max-width:none}.visual-frame{width:100%;max-width:500px;align-self:center}.visual-meta,.visual-footer{width:100%;max-width:500px;align-self:center}.commerce-content{min-height:270px;padding:28px 24px}.product-stage{height:240px}.brand-composition{padding:30px;min-height:290px}.systems-content{padding:28px}.system-flow{gap:20px}.system-flow li{padding:15px}.system-flow li+li:before{height:21px;top:-21px}.system-flow strong{font-size:15px}.system-flow p{font-size:12px}.systems-note{padding:14px 28px;font-size:12px}.demo-nav{font-size:11px}}
@media(max-width:600px){.story-visual.sg-visual{padding:24px 18px;gap:16px}.visual-meta{font-size:9px;letter-spacing:.6px}.visual-tag{font-size:8px;padding:3px 5px}.demo-topbar{padding:15px}.demo-nav{font-size:10px}.demo-brand svg{width:21px;height:23px}.demo-brand>span{font-size:10px}.demo-brand>span>span{font-size:8px;letter-spacing:1.2px}.commerce-content{padding:22px 15px;min-height:235px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.demo-eyebrow{font-size:8px;letter-spacing:.9px}.product-copy>strong{font-size:clamp(24px,7.8cqw,31px);letter-spacing:-1px;margin:14px 0}.product-copy>p{font-size:11px}.product-stage{height:205px}.demo-cta{font-size:9px;gap:7px;margin-top:17px}.product-caption{padding:13px 15px}.product-caption strong{font-size:12px}.product-caption span{font-size:9px}.visual-footer{font-size:11px}.brand-composition{padding:25px 20px;min-height:265px}.brand-composition>strong{font-size:clamp(32px,10.2cqw,42px)}.brand-composition>p{font-size:13px}.brand-signature{font-size:9px;margin-top:24px}.channel-strip span{font-size:11px;padding:11px 6px}.systems-content{padding:23px 15px 18px}.systems-content>strong{font-size:25px}.system-flow{gap:17px}.system-flow li{padding:13px 10px;gap:9px}.system-flow strong{font-size:13px}.system-flow p{font-size:11px}.system-flow li+li:before{height:18px;top:-18px;left:21px}.system-symbol{font-size:15px}.systems-note{padding:12px 15px;font-size:11px}.story-copy{padding:28px 24px}.story-switcher button{font-size:13px;line-height:1.5;min-height:65px}}
@media(max-width:360px){.story-visual.sg-visual{padding:20px 12px}.visual-meta{font-size:8px}.demo-topbar{padding:13px 12px}.demo-nav{font-size:9px;max-width:88px}.commerce-content{padding:20px 12px;min-height:220px;gap:0;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}.product-stage{height:185px}.product-copy>strong{font-size:22px;letter-spacing:-1px}.product-copy>p{font-size:10px}.demo-cta{font-size:8px;gap:5px}.product-caption{padding-inline:12px}.visual-footer{font-size:10px}.systems-content{padding-inline:12px}.system-flow strong{font-size:12px}.system-flow p{font-size:10px}.system-flow li{gap:7px;padding:12px 8px}.system-symbol{font-size:13px}.brand-composition{padding:24px 17px}.brand-signature{font-size:8px}.story-switcher button{font-size:12px}}
@media(min-width:761px) and (max-width:900px){.hero-architecture{left:33%}html[data-theme=dark] .hero-architecture{background:linear-gradient(90deg,#162127 0%,#162127b8 40%,#1621273d),none 65% center/cover}.hero-editorial>p{position:relative}}
@media(min-width:761px) and (max-width:900px){html[data-theme=light] .hero-architecture{background:linear-gradient(90deg,#eff2f2 0%,#eff2f2e8 35%,#eff2f24d 80%),none 60% center/cover}}