/* Shared design system — tokens, reset, .wrap, .grid-bg, .label, buttons and .reveal — lives in assets/base.css (linked BEFORE this file in each page's ). This file holds only sector / workflow / user-guide page styles. Fonts: assets/fonts.css. Header: assets/header.css. */ /* content pages use a looser body line-height than the homepage */ body{line-height:1.7} /* nav: see assets/header.css (shared header — linked in every page's ) */ /* hero */ .shero{position:relative;z-index:2;padding:130px 0 40px} .shero h1{font-size:clamp(2.2rem,6.5vw,60px);text-transform:uppercase;margin:18px 0 0;letter-spacing:-.03em;line-height:1.02} .shero .lead{font-size:20px;color:#c9d2dd;max-width:60ch;margin-top:20px;line-height:1.5} /* featured image */ .feature{position:relative;z-index:2;margin:34px 0 0} .feature .fimg{position:relative;overflow:hidden;border:1px solid var(--line);aspect-ratio:21/9;background:#000} .feature .fimg img{width:100%;height:100%;object-fit:cover} .feature .corner{position:absolute;inset:0;pointer-events:none} .feature .corner::before,.feature .corner::after{display:none} .feature .corner::before{top:10px;left:10px;border-right:0;border-bottom:0} .feature .corner::after{bottom:10px;right:10px;border-left:0;border-top:0} /* content layout */ .sec{position:relative;z-index:2;padding:64px 0} .layout{display:grid;grid-template-columns:1.5fr .9fr;gap:48px;align-items:start} .prose h2{font-size:clamp(1.7rem,3.6vw,36px);text-transform:uppercase;margin:0 0 18px;letter-spacing:-.02em} .prose h2:not(:first-child){margin-top:44px} .prose>h3{font-size:clamp(1.05rem,2vw,20px);margin:28px 0 12px;letter-spacing:-.01em;color:var(--ink)} .prose p{color:#cdd6e0;margin-bottom:18px;font-size:16px;line-height:1.6} .prose ul{margin:0 0 18px;padding-left:22px} .prose li{color:#cdd6e0;font-size:16px;line-height:1.6;margin-bottom:8px} .prose li::marker{color:var(--neon)} .prose a{color:var(--neon)} .benefits{position:sticky;top:96px;background:var(--panel);border:1px solid var(--line);padding:28px 26px; clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)} .benefits h3{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--neon);margin-bottom:18px} .benefits ul{list-style:none} .benefits li{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line);color:#dbe3ec;font-size:15px} .benefits li:first-child{border-top:none} .benefits li::before{content:"";width:16px;height:16px;flex:0 0 auto;margin-top:4px;background:var(--neon); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat} /* gallery (masonry) */ .gallery-head{display:flex;align-items:center;gap:14px;margin:0 0 26px} .gallery-head .label{margin:0} .gallery{columns:3;column-gap:14px} .gallery .cell{break-inside:avoid;margin-bottom:14px;overflow:hidden;border:1px solid var(--line);position:relative;cursor:pointer;background:#000} .gallery img{width:100%;transition:.5s;opacity:.92} .gallery .cell:hover img{transform:scale(1.05);opacity:1} /* cta */ .scta{position:relative;z-index:2;text-align:center;padding:90px 0 110px} .scta h2{font-size:clamp(1.9rem,4.5vw,40px);text-transform:uppercase;max-width:18ch;margin:14px auto 0;letter-spacing:-.02em} .scta p{color:var(--muted);max-width:48ch;margin:16px auto 0} .btnrow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px} /* buttons: see assets/base.css. NOTE base uses padding 14px 24px; these pages previously used 26px — now unified to 24px. */ footer{border-top:1px solid var(--line);background:var(--bg2);position:relative;z-index:2;padding:30px 0; font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);text-align:center} /* lightbox (.reveal: see assets/base.css) */ .lightbox{position:fixed;inset:0;z-index:100;background:rgba(4,5,7,.92);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:30px} .lightbox.on{display:flex} .lightbox img{max-width:92vw;max-height:88vh;border:1px solid var(--neon)} .lightbox .x{position:absolute;top:20px;right:26px;font-size:30px;color:#fff;cursor:pointer;font-family:var(--display)} @media(max-width:900px){.layout{grid-template-columns:1fr;gap:30px}.benefits{position:static}.gallery{columns:2}} @media(max-width:560px){.gallery{columns:1}.feature .fimg{aspect-ratio:4/3}.shero{padding-top:104px}}