.demos-hero{background:radial-gradient(circle at 86% 5%,#e2f1e5,transparent 34%),var(--paper);padding:40px 0 62px;border-bottom:1px solid var(--line)}
.demos-breadcrumb{display:flex;gap:12px;align-items:center;color:#82958a;font-size:12px}.demos-breadcrumb a:hover{color:var(--teal)}
.demos-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:9%;align-items:end;padding:94px 0 60px}
.demos-hero h1{font-family:var(--serif);font-size:clamp(42px,4.5vw,68px);line-height:1.35;letter-spacing:-.06em;margin:23px 0 0}.demos-hero h1 em{font-style:normal;color:#358c76}
.demos-intro p{color:#4d6660;line-height:2;font-size:15px;margin:0 0 22px}.demos-intro .demos-caveat{font-size:12px;color:#71867a;border-left:2px solid #90bea6;padding-left:17px;margin:0}
.demos-jump{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #cadbcd;border-bottom:1px solid #cadbcd}.demos-jump a{padding:22px 14px;font-size:12px;font-weight:700;color:#4e7567;border-right:1px solid #cadbcd;transition:background .2s,color .2s}.demos-jump a:first-child{padding-left:0}.demos-jump a:last-child{border-right:0}.demos-jump a:hover{background:#e4f0e5;color:var(--deep)}
.demo-section{padding:105px 0;scroll-margin-top:84px;background:#fff}.demo-section-tinted{background:#f0f5ef}.demo-grid{display:grid;grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr);gap:8%;align-items:center}
.demo-index{display:inline-block;color:#368b75;font-size:12px;font-weight:700;letter-spacing:.08em;border-bottom:1px solid #abcdbb;padding-bottom:12px}.demo-copy h2{font-family:var(--serif);font-size:clamp(29px,2.7vw,43px);letter-spacing:-.055em;line-height:1.5;margin:29px 0 22px}.demo-copy>p{font-size:14px;color:#5c7269;line-height:2;margin:0;max-width:460px}.demo-meta{display:flex;gap:9px;flex-wrap:wrap;margin:29px 0}.demo-meta span{border:1px solid #bfd4c5;border-radius:2px;padding:8px 11px;color:#567e6c;font-size:11px}.demo-related,.demo-related-pair{font-size:12px;font-weight:700;color:#287766}.demo-related{display:inline-flex;gap:18px;border-bottom:1px solid #8eb9a3;padding-bottom:7px}.demo-related:hover{color:var(--deep)}.demo-related-pair{display:flex;gap:22px;flex-wrap:wrap}
.demo-player{background:#102321;border:1px solid #28483f;border-radius:8px;padding:10px;box-shadow:0 25px 60px rgba(16,45,45,.13)}.demo-player video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#081310;border-radius:3px}.demo-player>span{display:block;color:#90aca0;font-size:10px;letter-spacing:.04em;padding:11px 5px 3px}
.demos-cta{background:var(--deep);color:#fff;padding:76px 0}.demos-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:40px}.demos-cta h2{font-family:var(--serif);font-size:clamp(30px,3vw,43px);letter-spacing:-.05em;margin:20px 0 10px}.demos-cta p{color:#abc7bb;font-size:13px;line-height:1.8;margin:0}.demos-cta .button-primary{background:#c7e9db;color:var(--deep);flex:none}.demos-cta .button-primary:hover{background:#e0f4e8}
@media(max-width:900px){.demos-hero-grid{gap:5%}.demo-grid{gap:5%}}
@media(max-width:760px){.demos-hero{padding:27px 0 42px}.demos-hero-grid{grid-template-columns:1fr;gap:27px;padding:65px 0 42px}.demos-hero h1{font-size:clamp(37px,7vw,52px)}.demos-jump{grid-template-columns:repeat(2,1fr)}.demos-jump a:nth-child(2){border-right:0}.demos-jump a:nth-child(-n+2){border-bottom:1px solid #cadbcd}.demos-jump a:first-child{padding-left:14px}.demo-section{padding:73px 0;scroll-margin-top:68px}.demo-grid{grid-template-columns:1fr;gap:31px}.demo-copy h2{font-size:clamp(29px,6vw,39px)}.demo-meta{margin:23px 0}.demos-cta-inner{display:block}.demos-cta .button{margin-top:30px}}
@media(max-width:480px){.demos-hero-grid{padding-top:48px}.demos-intro p{font-size:14px}.demo-section{padding:60px 0}.demo-player{padding:6px}.demos-cta{padding:60px 0}}
@media(prefers-reduced-motion:reduce){.demos-jump a{transition:none}}