/* Single-page handbook structure */
.handbook-map { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:3rem; padding:4rem 0; border-top:1px solid var(--line); }
.handbook-map h2 { max-width:580px; margin:.25rem 0 1rem; color:var(--navy); font-size:clamp(2rem,3.3vw,3.25rem); font-weight:500; letter-spacing:-.055em; line-height:1; }
.handbook-map__steps { display:grid; gap:0; margin:0; padding:0; list-style:none; border:1px solid var(--line); background:#fff; }
.handbook-map__steps li { display:grid; grid-template-columns:48px 1fr; gap:.8rem; align-items:center; min-height:70px; padding:.8rem 1rem; border-bottom:1px solid var(--line); }
.handbook-map__steps li:last-child { border-bottom:0; }
.handbook-map__steps b { color:var(--purple); font-size:.75rem; }
.handbook-map__steps strong,.handbook-map__steps small { display:block; }
.handbook-map__steps strong { color:var(--navy); font-size:.92rem; font-weight:700; }
.handbook-map__steps small { margin-top:.1rem; color:var(--muted); font-size:.78rem; }

/* Ecommerce navigation reference */
.nav-anatomy { border:1px solid var(--line); background:#fff; box-shadow:0 10px 25px #1f3a6d12; }
.nav-anatomy__bar { display:flex; justify-content:flex-end; gap:1.4rem; padding:.45rem 1rem; color:#fff; background:var(--navy); font-size:.68rem; font-weight:500; }
.nav-anatomy__identity { display:grid; grid-template-columns:210px minmax(180px,1fr) auto auto; gap:1rem; align-items:center; min-height:94px; padding:1rem; }
.nav-anatomy__identity img { width:190px; height:auto; }
.nav-anatomy__identity input { width:100%; padding:.72rem .85rem; border:1px solid var(--line); color:var(--ink); font:400 .82rem "new-hero",sans-serif; }
.nav-anatomy__account,.nav-anatomy__cart { padding:.65rem .75rem; border:0; background:transparent; color:var(--navy); font:500 .75rem "new-hero",sans-serif; white-space:nowrap; }
.nav-anatomy__cart { border-radius:3px; background:var(--purple); color:#fff; }
.nav-anatomy__categories { display:flex; align-items:center; min-height:50px; padding:0 1rem; border-top:1px solid var(--line); }
.nav-anatomy__categories button,.nav-anatomy__categories a { display:inline-flex; align-items:center; gap:.35rem; min-height:50px; padding:0 .75rem; border:0; background:transparent; color:var(--ink); font:500 .78rem "new-hero",sans-serif; text-decoration:none; white-space:nowrap; }
.nav-anatomy__categories button.active { color:var(--navy); background:var(--soft); }
.nav-anatomy__categories a:hover,.nav-anatomy__categories button:hover { color:var(--purple); }
.nav-anatomy__categories button:first-child::before { content:"\f0c9"; }.nav-anatomy__categories button:nth-child(2)::before { content:"\f02c"; }.nav-anatomy__categories a[href="#commerce"]::before { content:"\f155"; }.nav-anatomy__categories a[href="#patterns"]::before { content:"\f06d"; }.nav-anatomy__categories a[href="#components"]::before { content:"\f059"; }
.nav-anatomy__categories > span { flex:1; }
.usage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.usage-grid article { padding:1.1rem 1.2rem; border-top:3px solid var(--gold); background:#fff; }
.usage-grid b { color:var(--navy); font-size:.85rem; font-weight:700; }
.usage-grid p { margin:.5rem 0 0; color:var(--muted); font-size:.82rem; line-height:1.45; }

/* Dashboard reference */
.dashboard-demo { display:grid; grid-template-columns:190px minmax(0,1fr); min-height:610px; border:1px solid var(--line); background:#fff; box-shadow:0 12px 26px #1f3a6d12; }
.dashboard-side { display:flex; flex-direction:column; gap:.25rem; padding:1.15rem .75rem; background:var(--navy); }
.dashboard-side img { width:150px; margin:0 .5rem 1.6rem; filter:brightness(0) invert(1); }
.dashboard-side a { padding:.7rem .75rem; color:#dce5f8; border-radius:3px; font-size:.82rem; font-weight:500; text-decoration:none; }
.nav-anatomy__categories button::before,.nav-anatomy__categories a::before,.dashboard-side a::before,.metric-grid article::before { font-family:"Font Awesome 6 Free"; font-weight:900; }
.dashboard-side a::before { display:inline-block; width:1.25rem; }.dashboard-side a:nth-of-type(1)::before { content:"\f3fd"; }.dashboard-side a:nth-of-type(2)::before { content:"\f570"; }.dashboard-side a:nth-of-type(3)::before { content:"\f06d"; }.dashboard-side a:nth-of-type(4)::before { content:"\f0c0"; }.dashboard-side a:nth-of-type(5)::before { content:"\f201"; }.dashboard-side a:nth-of-type(6)::before { content:"\f013"; }
.dashboard-side a:hover,.dashboard-side a.active { background:#ffffff1f; color:#fff; }
.dashboard-side > span { flex:1; }
.dashboard-main { min-width:0; padding:1.5rem; background:#f7f9fc; }
.dashboard-topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; }
.dashboard-topbar .eyebrow { margin-bottom:.25rem; }
.dashboard-topbar h3 { margin:0; color:var(--navy); font-size:1.45rem; font-weight:500; letter-spacing:-.035em; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; }
.metric-grid article { position:relative; padding:1rem; border:1px solid var(--line); background:#fff; }
.metric-grid article::before { position:absolute; top:1rem; right:1rem; color:#a6b0c1; font-size:.9rem; }.metric-grid article:nth-child(1)::before { content:"\f570"; }.metric-grid article:nth-child(2)::before { content:"\f071"; }.metric-grid article:nth-child(3)::before { content:"\f201"; }.metric-grid article:nth-child(4)::before { content:"\f00c"; }
.metric-grid span,.metric-grid small { display:block; font-size:.72rem; }
.metric-grid span { color:var(--muted); }
.metric-grid strong { display:block; margin:.4rem 0; color:var(--navy); font-size:1.6rem; font-weight:700; letter-spacing:-.05em; }
.metric-grid small { color:var(--muted); }
.positive { color:var(--green)!important; }.warning { color:var(--orange)!important; }.purple { color:var(--purple)!important; }
.dashboard-content { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(220px,.8fr); gap:.8rem; margin-top:.8rem; }
.dashboard-chart,.dashboard-alerts,.dashboard-table { padding:1rem; border:1px solid var(--line); background:#fff; }
.dashboard-chart>div:first-child,.dashboard-table>div { display:flex; justify-content:space-between; gap:.75rem; color:var(--navy); font-size:.82rem; }
.dashboard-chart>div:first-child span { color:var(--muted); font-size:.72rem; }
.chart-bars { display:flex; align-items:end; gap:4%; height:158px; margin-top:1rem; padding:.6rem .2rem 0; border-bottom:1px solid var(--line); }
.chart-bars i { flex:1; min-width:7px; background:linear-gradient(to top,var(--purple),#a890ff); }
.chart-bars i:nth-child(1){height:35%}.chart-bars i:nth-child(2){height:48%}.chart-bars i:nth-child(3){height:41%}.chart-bars i:nth-child(4){height:62%}.chart-bars i:nth-child(5){height:54%}.chart-bars i:nth-child(6){height:70%}.chart-bars i:nth-child(7){height:67%}.chart-bars i:nth-child(8){height:83%}.chart-bars i:nth-child(9){height:76%}.chart-bars i:nth-child(10){height:92%}.chart-bars i:nth-child(11){height:86%}.chart-bars i:nth-child(12){height:100%}
.dashboard-alerts>b { color:var(--navy); font-size:.82rem; }.dashboard-alerts ul { display:grid; gap:.85rem; margin:1rem 0 0; padding:0; list-style:none; }.dashboard-alerts li { display:grid; grid-template-columns:8px 1fr auto; gap:.5rem; align-items:start; color:var(--ink); font-size:.76rem; }.dashboard-alerts a,.dashboard-table a { color:var(--purple); font-size:.72rem; font-weight:700; text-decoration:none; }.dot { display:block; width:8px; height:8px; margin-top:.18rem; border-radius:50%; background:currentColor; }
.dashboard-table { margin-top:.8rem; }.dashboard-table table { width:100%; margin-top:.9rem; border-collapse:collapse; text-align:left; }.dashboard-table th { color:var(--muted); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }.dashboard-table th,.dashboard-table td { padding:.65rem .3rem; border-bottom:1px solid var(--line); font-size:.76rem; }.dashboard-table td { color:var(--ink); }.status-pill { display:inline-block; padding:.18rem .42rem; border-radius:99px; font-size:.66rem; font-weight:700; }.status-pill.shipped { color:var(--green); background:#e9f7ef; }.status-pill.pending { color:#9d5100; background:#fff3dc; }

/* Status language: color belongs to the indicator, never the text. */
.status { color:var(--swav-text-color, var(--ink)) !important; }
.status i { flex:0 0 8px; }
.status.in-stock i { background:var(--swav-colorwheel-success-green, var(--green)) !important; }
.status.limited i { background:var(--swav-colorwheel-warning-border, var(--orange)) !important; }
.status.backorder i { background:var(--swav-colorwheel-accent-purple, var(--purple)) !important; }
.status.out i { background:var(--swav-colorwheel-error-red, var(--red)) !important; }
.dashboard-principles { margin-top:1rem; }

/* Button system: visual priority mirrors decision priority. */
.button-system { border-top:1px solid var(--swav-colorwheel-gray-border); }
.button-showcase { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.button-showcase > article { display:grid; align-content:start; gap:1rem; min-height:240px; padding:1.5rem; border:1px solid var(--swav-colorwheel-gray-border); background:var(--swav-colorwheel-white); }
.button-showcase__primary { background:#edf3fb !important; border-top:3px solid var(--swav-colorwheel-accent-purple) !important; }
.button-showcase__gradient { position:relative; overflow:hidden; isolation:isolate; color:#fff; border-color:#17305e !important; background:radial-gradient(ellipse 90% 120% at 95% 5%,rgba(253,203,105,.32),transparent 56%),linear-gradient(112deg,#152e5e 0%,#5724e8 52%,#8a63e9 100%) !important; }.button-showcase__gradient::after { position:absolute; inset:0; z-index:-1; content:""; background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px); opacity:.15; }.button-showcase__gradient .label,.button-showcase__gradient p { color:#fff !important; }.button-showcase__gradient .button-gradient { color:#fff; border:1px solid rgb(255 255 255 / .5); background:rgb(255 255 255 / .14); box-shadow:0 8px 18px rgb(0 0 0 / .16); }.button-showcase__gradient .button-gradient:hover { color:var(--navy); border-color:var(--gold); background:var(--gold); }
.button-showcase .button { justify-self:start; gap:.6rem; min-height:48px; border-radius:0; }
.button-showcase p:not(.label) { max-width:38ch; margin:0; color:var(--muted); font-size:var(--swav-text-sm); line-height:1.55; }
.button-rules { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.button-rules article { padding:1.1rem 1.2rem; border-top:3px solid var(--swav-colorwheel-accent); background:var(--swav-colorwheel-light-gray); }
.button-rules b { color:var(--navy); font-size:var(--swav-text-sm); font-weight:700; }.button-rules p { margin:.45rem 0 0; color:var(--muted); font-size:var(--swav-text-xs); line-height:1.5; }

/* Gradient system: the hero/CTA atmospheric field is reserved for narrative surfaces. */
.gradient-system { border-top:1px solid var(--swav-colorwheel-gray-border); }
.gradient-specimen-grid { display:grid; grid-template-columns:1.35fr .9fr; gap:1rem; }
.gradient-specimen { min-height:360px; padding:2rem; border:1px solid var(--swav-colorwheel-gray-border); }
.gradient-specimen--signal { position:relative; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; isolation:isolate; color:#fff; background:radial-gradient(ellipse 52% 78% at 83% 44%,rgba(73,111,174,.82) 0%,rgba(35,67,126,.48) 43%,transparent 76%),radial-gradient(ellipse 40% 64% at 36% 80%,rgba(19,50,108,.72) 0%,transparent 74%),linear-gradient(112deg,#050d1b 0%,#0a1933 29%,#152e5e 62%,#24447b 100%); }
.gradient-specimen--signal::after { position:absolute; inset:0; z-index:-1; content:""; background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 13px); opacity:.12; }
.gradient-specimen--signal .label { color:var(--gold); }.gradient-specimen h3 { max-width:420px; margin:0; font-size:var(--swav-text-3xl); font-weight:500; letter-spacing:-.04em; line-height:1.05; }.gradient-specimen--signal h3 { color:#fff; }.gradient-specimen p:not(.label) { max-width:470px; margin:.9rem 0 0; font-size:var(--swav-text-sm); line-height:1.6; }.gradient-specimen--signal p:not(.label) { color:#dce5f8; }
.gradient-specimen__token { color:rgb(255 255 255 / .72); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:var(--swav-text-xs); }
.gradient-specimen--solid { display:flex; flex-direction:column; justify-content:space-between; background:var(--swav-colorwheel-white); }.gradient-specimen--solid h3 { color:var(--navy); }.gradient-specimen--solid p:not(.label) { color:var(--muted); }
.solid-surface-row { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }.solid-surface-row span { padding:1.1rem .55rem; border:1px solid var(--swav-colorwheel-gray-border); color:var(--ink); background:#fff; font-size:var(--swav-text-xs); text-align:center; }.solid-surface-row span:nth-child(2) { background:var(--swav-colorwheel-off-white); }.solid-surface-row span:nth-child(3) { border-color:var(--navy); color:#fff; background:var(--navy); }
.gradient-rules { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem; }.gradient-rules article { display:grid; grid-template-columns:28px 1fr; gap:.75rem; padding:1.15rem; border-top:3px solid var(--swav-colorwheel-accent); background:var(--swav-colorwheel-white); }.gradient-rules i { color:var(--swav-colorwheel-success-green); }.gradient-rules b { display:block; color:var(--navy); font-size:var(--swav-text-sm); }.gradient-rules p { margin:.35rem 0 0; color:var(--muted); font-size:var(--swav-text-xs); line-height:1.5; }
@media (max-width:760px) { .button-showcase,.button-rules,.gradient-specimen-grid,.gradient-rules { grid-template-columns:1fr; }.gradient-specimen { min-height:300px; }.button-showcase > article { min-height:0; } }

/* Full-width conversion CTA: hero-gradient language, but at a more focused scale. */
.full-cta { position:relative; isolation:isolate; overflow:hidden; padding:6.5rem 0; color:#fff; background:radial-gradient(ellipse 48% 105% at 86% 46%,rgba(73,111,174,.72) 0%,rgba(35,67,126,.34) 46%,transparent 75%),radial-gradient(ellipse 44% 92% at 12% 108%,rgba(14,59,145,.52) 0%,transparent 70%),linear-gradient(112deg,#050d1b 0%,#0a1933 32%,#152e5e 67%,#24447b 100%); }
.full-cta::before { position:absolute; inset:-18%; z-index:-1; content:""; background:radial-gradient(ellipse 46% 70% at 77% 40%,rgba(120,170,255,.28),transparent 68%),radial-gradient(ellipse 40% 70% at 24% 78%,rgba(14,59,145,.36),transparent 70%); animation:cta-ambient-drift 20s ease-in-out infinite alternate; will-change:transform; }
.full-cta::after { position:absolute; inset:0; z-index:-1; content:""; background:repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 1px,transparent 1px 14px); opacity:.1; mix-blend-mode:soft-light; animation:hero-texture-breathe 9s ease-in-out infinite; pointer-events:none; }
@keyframes cta-ambient-drift { 0% { transform:translate3d(-1.2%,-1%,0) scale(1); } 50% { transform:translate3d(1.3%,1.1%,0) scale(1.03); } 100% { transform:translate3d(.4%,-1.5%,0) scale(1.015); } }
.full-cta__inner { position:relative; }
.full-cta .eyebrow { display:inline-block; margin-bottom:1rem; padding:.42rem .7rem; color:var(--gold); background:rgb(253 203 105 / .13); }
.full-cta__content { display:flex; align-items:flex-end; justify-content:space-between; gap:3.5rem; padding-top:1.15rem; border-top:1px solid rgb(255 255 255 / .22); }
.full-cta__copy { max-width:730px; }.full-cta h2 { max-width:660px; margin:0; color:#fff; font-family:"new-hero",Arial,sans-serif; font-size:clamp(2.7rem,4.8vw,5rem); font-weight:500; letter-spacing:-.045em; line-height:1.02; }
.full-cta p { max-width:590px; margin:1.35rem 0 0; color:#dce5f8; font-family:"new-hero",Arial,sans-serif; font-size:var(--swav-text-lg); font-weight:400; line-height:var(--swav-line-height); }
.full-cta__actions { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:flex-end; }.full-cta .button { gap:.6rem; min-height:52px; padding:.8rem 1.15rem; border-radius:0; font-family:"new-hero",Arial,sans-serif; font-weight:700; white-space:nowrap; }.full-cta .button-primary { color:var(--navy); background:var(--gold); box-shadow:0 10px 22px rgb(0 0 0 / .16); }

/* Canonical hero pattern: adapted from the Streakwave Calculators hero. */
.hero--calculator { position:relative; display:flex; align-items:center; min-height:540px; padding:96px 0 104px; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse 52% 78% at 83% 44%,rgba(73,111,174,.82) 0%,rgba(35,67,126,.48) 43%,transparent 76%),radial-gradient(ellipse 40% 64% at 36% 80%,rgba(19,50,108,.72) 0%,transparent 74%),linear-gradient(112deg,#050d1b 0%,#0a1933 29%,#152e5e 62%,#24447b 100%); }
.hero--calculator::before { position:absolute; inset:-12%; z-index:-1; content:""; background:radial-gradient(ellipse 44% 68% at 78% 38%,rgba(120,170,255,.34),transparent 68%),radial-gradient(ellipse 46% 66% at 24% 76%,rgba(14,59,145,.42),transparent 70%),linear-gradient(90deg,rgba(12,21,33,.92) 0%,rgba(31,58,109,.80) 43%,rgba(12,21,33,.55) 100%); animation:hero-ambient-drift 18s ease-in-out infinite alternate; will-change:transform; }
.hero--calculator::after { position:absolute; inset:0; z-index:-1; content:""; background:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 1px,transparent 1px 13px); opacity:.1; mix-blend-mode:soft-light; animation:hero-texture-breathe 9s ease-in-out infinite; pointer-events:none; }
@keyframes hero-ambient-drift { 0% { transform:translate3d(-1.5%,-1%,0) scale(1); } 50% { transform:translate3d(1.5%,1%,0) scale(1.035); } 100% { transform:translate3d(.5%,-1.5%,0) scale(1.018); } }
@keyframes hero-texture-breathe { 0%,100% { opacity:.07; } 50% { opacity:.14; } }
@media (prefers-reduced-motion:reduce) { .hero--calculator::before,.hero--calculator::after,.full-cta::before,.full-cta::after { animation:none; } }
.hero__inner { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,360px); gap:3rem; align-items:end; width:var(--shell); margin:auto; }
.hero--calculator .eyebrow { display:inline-block; margin-bottom:18px; padding:7px 14px; color:var(--gold); background:rgba(253,203,105,.16); font-size:var(--swav-text-label); }
.hero--calculator h1 { max-width:850px; color:#fff; font-size:clamp(3.1rem,5.4vw,6rem); font-weight:500; letter-spacing:-.025em; text-shadow:0 3px 18px rgba(0,0,0,.32); text-transform:uppercase; }
.hero--calculator .hero-copy { max-width:760px; color:rgba(255,255,255,.94) !important; font-size:clamp(1.2rem,1.55vw,1.5rem) !important; }
.hero--calculator .button-primary { color:var(--navy); background:var(--gold); }
.hero--calculator .button-primary:hover { background:var(--swav-colorwheel-accent-hover); }
.hero--calculator .button-secondary { border-color:rgba(255,255,255,.38); color:#fff; background:rgba(255,255,255,.12); }
.hero--calculator .button-secondary:hover { border-color:rgba(255,255,255,.55); color:#fff; background:rgba(255,255,255,.2); }
.hero--calculator .hero-card { align-self:end; padding:1.5rem; border:1px solid rgba(255,255,255,.22); border-left:3px solid var(--gold); background:rgba(12,21,33,.62); backdrop-filter:blur(8px); }
.hero--calculator .hero-card h2 { color:#fff; font-size:var(--swav-h4); font-weight:500; }
.hero--calculator .hero-card p { color:rgba(255,255,255,.82); }
.hero-card__rules { display:grid; gap:.35rem; margin:1.2rem 0 0; padding:1rem 0 0; border-top:1px solid rgba(255,255,255,.2); color:#fff; font-size:var(--swav-text-xs); list-style:none; }
.hero-card__rules li::before { margin-right:.45rem; color:var(--gold); content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; }
.full-cta .button-primary:hover { background:#f6b93f; }
.full-cta .button-secondary { border-color:rgb(255 255 255 / .75); color:#fff; background:transparent; }
.full-cta .button-secondary:hover { border-color:#fff; background:rgb(255 255 255 / .1); }

@media (max-width:900px) { .nav-anatomy__identity { grid-template-columns:170px minmax(150px,1fr) auto; }.nav-anatomy__cart { display:none; }.nav-anatomy__categories { overflow-x:auto; }.dashboard-demo { grid-template-columns:150px minmax(0,1fr); }.dashboard-side img { width:120px; }.metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-content { grid-template-columns:1fr; } }
@media (max-width:620px) { .handbook-map,.usage-grid { grid-template-columns:1fr; }.nav-anatomy__bar { justify-content:flex-start; overflow-x:auto; }.nav-anatomy__identity { grid-template-columns:1fr auto; min-height:0; }.nav-anatomy__identity img { width:170px; }.nav-anatomy__identity label { grid-column:1/-1; grid-row:2; }.nav-anatomy__categories > span,.nav-anatomy__categories a:nth-of-type(n+2) { display:none; }.dashboard-demo { grid-template-columns:1fr; }.dashboard-side { display:grid; grid-template-columns:1fr 1fr; padding:.8rem; }.dashboard-side img { grid-column:1/-1; width:140px; margin:0 0 .65rem; }.dashboard-side > span { display:none; }.dashboard-main { padding:1rem; }.dashboard-topbar { align-items:flex-start; flex-direction:column; }.metric-grid { grid-template-columns:1fr 1fr; }.dashboard-table { overflow-x:auto; }.dashboard-table table { min-width:440px; } }
@media (max-width:760px) { .full-cta { padding:4rem 0; }.full-cta__content { align-items:flex-start; flex-direction:column; }.full-cta__actions { justify-content:flex-start; }.full-cta h2 { font-size:clamp(2.35rem,11vw,3.5rem); } }
@media (max-width:760px) { .hero--calculator { min-height:0; padding:72px 0; }.hero__inner { grid-template-columns:1fr; gap:2rem; }.hero--calculator h1 { font-size:clamp(3rem,15vw,4.6rem); }.hero--calculator .hero-card { max-width:520px; } }

/* Full token palette: grouped by intended decision, rather than treated as decoration. */
.foundation-grid .panel--palette { grid-column:span 2; min-height:0; }
.palette-intro { max-width:68ch; margin:0 0 1.4rem; color:var(--muted); font-size:var(--swav-text-sm); }
.palette-group { margin-top:1.35rem; padding-top:1.15rem; border-top:1px solid var(--swav-colorwheel-gray-border); }
.palette-group > b { display:block; margin-bottom:.85rem; color:var(--navy); font-size:var(--swav-text-sm); font-weight:700; }
.panel--palette .swatches { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem 1rem; }
.panel--palette .swatches > div { grid-template-columns:30px minmax(0,1fr); align-items:center; column-gap:.55rem; }
.panel--palette .swatches strong { display:block; color:var(--ink); font-size:var(--swav-text-xs); font-weight:700; line-height:1.2; }
.panel--palette .swatches code { display:block; overflow:hidden; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.62rem; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.panel--palette .swatch { width:28px; height:28px; }
.print-color-guidance { display:grid; grid-template-columns:minmax(180px,.42fr) minmax(0,1fr); gap:1.5rem; margin-top:1rem; padding:1.35rem 1.5rem; border-top:3px solid var(--swav-colorwheel-primary); background:var(--swav-colorwheel-light-gray); }.print-color-guidance .label { margin-bottom:.35rem; }.print-color-guidance h3 { margin:0; color:var(--navy); font-size:var(--swav-text-xl); font-weight:500; letter-spacing:-.03em; }.print-color-guidance p:last-child { max-width:76ch; margin:0; color:var(--muted); font-size:var(--swav-text-sm); line-height:1.6; }.print-color-guidance b { color:var(--ink); }.print-color-guidance strong { color:var(--navy); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.76rem; }
.swatch.navy-hover { background:#295288; }.swatch.purple-hover { background:#421ec4; }.swatch.gold-hover { background:#e4b44d; }.swatch.muted { background:#444; }.swatch.white { background:#fff; }.swatch.black { background:#000; }.swatch.light-gray { background:#f6f6f6; }.swatch.off-white { background:#f9f9f9; }.swatch.border { background:#ddd; }.swatch.table-header { background:#f0f0f0; }.swatch.search-bg { background:#f5f5f5; }.swatch.input-border { background:#b0b0b0; }.swatch.placeholder { background:#aaa; }.swatch.muted-icon { background:#888; }.swatch.info-bg { background:#e0f0ff; }.swatch.info-border { background:#39f; }.swatch.warning-bg { background:#fff4cc; }.swatch.warning-border { background:#e6b800; }.swatch.error-bg { background:#ffe6e6; }.swatch.error-red { background:#c00; }.swatch.success { background:#2e8540; }
@media (max-width:900px) { .foundation-grid .panel--palette { grid-column:auto; }.panel--palette .swatches { grid-template-columns:1fr; } }
@media (max-width:620px) { .print-color-guidance { grid-template-columns:1fr; gap:.45rem; padding:1.2rem; } }

/* Logo system: original vector is the master; variations never alter its geometry. */
.logo-system { border-top:1px solid var(--swav-colorwheel-gray-border); }
.logo-master { padding:1.4rem 2rem 1.1rem; border:1px solid var(--swav-colorwheel-gray-border); background:var(--swav-colorwheel-white); }
.logo-master__meta,.logo-master__foot { display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font-size:var(--swav-text-xs); }
.logo-master__meta { align-items:center; }.logo-master__foot { padding-top:.95rem; border-top:1px solid var(--swav-colorwheel-gray-border); }
.logo-master > img { display:block; width:min(100%,820px); margin:4rem auto; }
.logo-variants { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.logo-variants article { border:1px solid var(--swav-colorwheel-gray-border); background:var(--swav-colorwheel-white); }
.logo-variants article > div:last-child { display:grid; gap:.25rem; padding:1rem; border-top:1px solid var(--swav-colorwheel-gray-border); }
.logo-variants b { color:var(--navy); font-size:var(--swav-text-sm); }.logo-variants small { color:var(--muted); font-size:var(--swav-text-xs); }
.logo-variant { display:grid; place-items:center; min-height:156px; padding:2rem; }.logo-variant img { width:min(100%,290px); height:auto; }
.logo-variant--paper { background:var(--swav-colorwheel-white); }.logo-variant--navy { background:var(--navy); }.logo-variant--navy img { filter:brightness(0) invert(1); }.logo-variant--neutral { background:#edf0ef; }.logo-variant--neutral img { filter:grayscale(1) brightness(0); }
.logo-guidance { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.5rem; }.logo-guidance article h3,.logo-misuse h3 { margin:1rem 0 .45rem; color:var(--navy); font-size:var(--swav-text-xl); font-weight:500; letter-spacing:-.025em; }.logo-guidance article p { max-width:60ch; margin:0; color:var(--muted); font-size:var(--swav-text-sm); }
.clearspace-diagram,.minimum-size { display:grid; place-items:center; min-height:220px; padding:2.5rem; background:var(--swav-colorwheel-light-gray); }
.clearspace-box { position:relative; display:grid; place-items:center; width:min(100%,480px); padding:2.7rem; border:1px dashed #78909c; }.clearspace-box::after { position:absolute; inset:2.7rem; border:1px dashed #aebbc2; content:""; pointer-events:none; }.clearspace-box img { position:relative; z-index:1; width:100%; }.clearspace-x { position:absolute; z-index:2; color:var(--navy); font-family:ui-monospace,monospace; font-size:.76rem; font-style:normal; }.clearspace-x--top { top:1.1rem; left:50%; }.clearspace-x--right { top:50%; right:1.1rem; }.clearspace-x--bottom { bottom:1.1rem; left:50%; }.clearspace-x--left { top:50%; left:1.1rem; }
.minimum-size { justify-items:start; align-content:center; gap:1.15rem; background:var(--swav-colorwheel-white); border:1px solid var(--swav-colorwheel-gray-border); }.minimum-size img { width:200px; }.minimum-size small { color:var(--muted); font-size:var(--swav-text-xs); line-height:1.5; text-transform:uppercase; }.dimension-line { position:relative; width:200px; padding-top:.5rem; border-top:1px solid var(--muted); color:var(--muted); font-family:ui-monospace,monospace; font-size:.68rem; text-align:center; }.dimension-line::before,.dimension-line::after { position:absolute; top:-4px; width:1px; height:7px; background:var(--muted); content:""; }.dimension-line::before { left:0; }.dimension-line::after { right:0; }
.logo-misuse { display:grid; grid-template-columns:minmax(180px,.55fr) minmax(0,1.45fr); gap:2.5rem; align-items:start; margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--swav-colorwheel-gray-border); }.logo-misuse h3 { margin-top:0; }.logo-misuse__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--swav-colorwheel-gray-border); }.logo-misuse__grid article { min-width:0; padding:1rem; border-right:1px solid var(--swav-colorwheel-gray-border); }.logo-misuse__grid article:last-child { border-right:0; }.misuse-art { display:grid; place-items:center; min-height:75px; overflow:hidden; }.misuse-art img { width:100%; max-width:190px; }.misuse-art--stretch img { transform:scaleY(1.45); }.misuse-art--rotate img { transform:rotate(-10deg); }.misuse-art--shadow img { filter:drop-shadow(3px 4px 1px #82939f); }.misuse-art--recolor img { filter:sepia(1) saturate(1.3) hue-rotate(330deg); }.logo-misuse__grid p { margin:.9rem 0 0; color:var(--muted); font-size:var(--swav-text-xs); }.logo-misuse__grid i { color:var(--swav-colorwheel-error-red); }
@media (max-width:760px) { .logo-master { padding:1rem; }.logo-master > img { margin:2.5rem auto; }.logo-master__meta,.logo-master__foot { align-items:flex-start; flex-direction:column; gap:.25rem; }.logo-variants,.logo-guidance { grid-template-columns:1fr; }.logo-misuse { grid-template-columns:1fr; gap:1rem; }.logo-misuse__grid { grid-template-columns:1fr 1fr; }.logo-misuse__grid article:nth-child(2) { border-right:0; }.logo-misuse__grid article:nth-child(-n+2) { border-bottom:1px solid var(--swav-colorwheel-gray-border); }.clearspace-diagram,.minimum-size { min-height:195px; padding:2rem; } }

/* Typography system: New Hero is the complete Streakwave web type system. */
.typography-system { border-top:1px solid var(--swav-colorwheel-gray-border); }
.type-family-grid { display:grid; grid-template-columns:1fr; gap:1rem; }.type-family { padding:2rem; border:1px solid var(--swav-colorwheel-gray-border); background:var(--swav-colorwheel-white); }.type-family--hero { background:#edf3fb; }.type-family h3 { max-width:440px; margin:0 0 .7rem; color:var(--navy); font-size:var(--swav-text-2xl); font-weight:500; letter-spacing:-.035em; line-height:1.05; }.type-family p:not(.label) { max-width:620px; margin:0; color:var(--muted); font-size:var(--swav-text-sm); }
.type-giant-newhero { margin:.1rem 0 1.2rem; color:var(--navy); font-size:clamp(7.5rem,15vw,13rem); font-weight:500; letter-spacing:-.1em; line-height:.72; }
.type-weights { display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; margin-top:2.4rem; padding-top:1rem; border-top:1px solid #a9bbd7; }.type-weights span { display:grid; gap:.15rem; min-width:90px; }.type-weights b { color:var(--ink); font-size:var(--swav-text-sm); }.type-weights small { color:var(--muted); font-size:var(--swav-text-xs); }
.type-scale-guide { margin-top:2.75rem; border-top:1px solid var(--swav-colorwheel-gray-border); }.type-scale-row { display:grid; grid-template-columns:145px minmax(0,1fr) 155px; gap:1.5rem; align-items:center; min-height:104px; padding:1.35rem 0; border-bottom:1px solid var(--swav-colorwheel-gray-border); }.type-scale-label,.type-scale-row > span:last-child { color:var(--muted); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:var(--swav-text-xs); line-height:1.55; }.type-scale-row > span:last-child { text-align:right; }.type-scale-row strong,.type-scale-row p { margin:0; }.type-scale-h1 { color:var(--navy); font-size:var(--swav-h1); font-weight:500; letter-spacing:-.05em; line-height:1.05; }.type-scale-h2,.type-scale-display { color:var(--navy); font-size:var(--swav-h2); font-weight:500; letter-spacing:-.045em; line-height:1.1; }.type-scale-h3 { color:var(--navy); font-size:var(--swav-h3); font-weight:500; letter-spacing:-.035em; line-height:1.15; }.type-scale-row p { max-width:620px; color:var(--ink); font-size:var(--swav-text-md); line-height:var(--swav-line-height); }.type-scale-label-sample { color:var(--navy); font-size:var(--swav-text-label); font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.type-rules { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.5rem; }.type-rules article { display:grid; grid-template-columns:28px 1fr; gap:.75rem; padding:1.15rem; border-top:3px solid var(--gold); background:var(--swav-colorwheel-white); }.type-rules i { color:var(--swav-colorwheel-success-green); }.type-rules b { display:block; color:var(--navy); font-size:var(--swav-text-sm); }.type-rules p { margin:.35rem 0 0; color:var(--muted); font-size:var(--swav-text-xs); line-height:1.5; }
@media (max-width:760px) { .type-family-grid,.type-rules { grid-template-columns:1fr; }.type-family { padding:1.5rem; }.type-scale-row { grid-template-columns:1fr auto; gap:.6rem 1rem; min-height:0; }.type-scale-row > :nth-child(2) { grid-column:1/-1; grid-row:2; }.type-scale-row > span:last-child { text-align:right; }.type-scale-h1 { font-size:var(--swav-text-4xl); }.type-scale-h2 { font-size:var(--swav-text-3xl); }.type-scale-h3 { font-size:var(--swav-text-2xl); } }