:root {
  --ink: #101014;
  --ink-2: #1b1c22;
  --paper: #f7f7f4;
  --panel: #efefec;
  --white: #fff;
  --muted: #6f7077;
  --muted-2: #999aa0;
  --line: #deded9;
  --indigo: #6366f1;
  --indigo-soft: #e9eaff;
  --green: #10b981;
  --amber: #f59e0b;
  --red: #f43f5e;
  --blue: #3b82f6;
  --purple: #8b5cf6;
  --pink: #f472b6;
  --max: 1248px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 30px;
  --ease: cubic-bezier(.2,.75,.25,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
::selection { color: white; background: var(--indigo); }

.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 10px 14px; border-radius: 9px; color: white; background: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.reading-progress { position: fixed; z-index: 200; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.reading-progress span { display: block; width: 0; height: 100%; background: var(--indigo); }

.case-top { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: 86px; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand-link { width: 138px; }
.brand-link img { width: 100%; }
.case-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.case-status i, .project-facts dd i, .browser-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(16,185,129,.1); }
.portfolio-jump { justify-self: end; display: flex; gap: 8px; align-items: center; text-decoration: none; font-size: 12px; font-weight: 650; }
.portfolio-jump span { transition: transform .25s var(--ease); }
.portfolio-jump:hover span { transform: translate(3px,-3px); }

.hero { min-height: 1360px; padding: 170px var(--gutter) 120px; position: relative; overflow: hidden; background: radial-gradient(circle at 76% 10%, rgba(99,102,241,.15), transparent 31%), linear-gradient(var(--paper), #f1f1ed); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(16,16,20,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(16,16,20,.08) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, #000 0%, transparent 70%); }
.hero-copy, .project-facts, .hero-product { position: relative; z-index: 1; max-width: var(--max); margin-inline: auto; }
.kicker, .section-index, .workflow-label { margin: 0; color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.hero h1 { max-width: 1110px; margin: 30px 0 0; font-size: clamp(58px, 7.25vw, 108px); line-height: .94; letter-spacing: -.072em; font-weight: 540; }
.hero h1 span { color: var(--indigo); }
.hero-lede { max-width: 720px; margin: 42px 0 0 auto; color: #46474e; font-size: clamp(19px, 2vw, 25px); line-height: 1.5; letter-spacing: -.025em; }
.hero-actions { max-width: 720px; margin: 28px 0 0 auto; display: flex; align-items: center; gap: 28px; }
.primary-action, .quiet-action { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 53px; padding: 0 22px; border-radius: 14px; text-decoration: none; font-size: 13px; font-weight: 700; }
.primary-action { color: white; background: var(--ink); box-shadow: 0 18px 34px rgba(16,16,20,.12); transition: transform .25s var(--ease), background .25s; }
.primary-action:hover { background: var(--indigo); transform: translateY(-3px); }
.primary-action span, .quiet-action span { transition: transform .25s var(--ease); }
.primary-action:hover span { transform: translate(3px,-3px); }
.quiet-action { padding-inline: 0; }
.quiet-action:hover span { transform: translateY(4px); }
.project-facts { margin-top: 85px; display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.project-facts div { min-width: 0; padding: 24px 24px 24px 0; display: grid; gap: 8px; }
.project-facts div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.project-facts dt { color: var(--muted-2); font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.project-facts dd { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; }

.hero-product { margin-top: 74px; perspective: 1800px; }
.product-browser { overflow: hidden; border: 1px solid rgba(15,23,42,.13); border-radius: 24px; background: #f8fafc; box-shadow: 0 55px 110px rgba(26,27,34,.18), 0 2px 1px rgba(255,255,255,.9) inset; transform: rotateX(1deg); transform-origin: center top; }
.browser-bar { height: 43px; padding: 0 17px; display: grid; grid-template-columns: 1fr minmax(180px,380px) 1fr; align-items: center; gap: 16px; color: #64748b; background: #eef0f4; border-bottom: 1px solid #dfe3e8; font-size: 8px; }
.browser-dots { display: flex; gap: 6px; }.browser-dots i { width: 8px; height: 8px; border-radius: 50%; background: #c6cad1; }
.browser-url { padding: 7px 15px; border: 1px solid #e0e3e8; border-radius: 7px; text-align: center; background: rgba(255,255,255,.72); }
.browser-live { justify-self: end; display: flex; align-items: center; gap: 7px; }
.context-float { position: absolute; z-index: 4; padding: 13px 16px; border: 1px solid rgba(255,255,255,.72); border-radius: 13px; color: #373943; background: rgba(255,255,255,.78); box-shadow: 0 16px 38px rgba(16,16,20,.12); backdrop-filter: blur(15px); font-size: 9px; font-weight: 680; }
.context-float span { margin-right: 8px; color: var(--indigo); font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; }
.context-float-a { top: 100px; left: -32px; }.context-float-b { right: -25px; bottom: 110px; }
.app-preview { min-height: 650px; color: #0f172a; background: #f8fafc; }
.app-nav { height: 62px; padding: 0 24px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid #e2e8f0; background: white; }
.app-nav > img { width: 126px; }
.app-nav .weather { margin-left: auto; display: flex; align-items: center; gap: 7px; color: #64748b; font-size: 9px; }
.app-nav .weather > svg { width:15px; height:15px; fill:none; stroke:var(--amber); stroke-width:1.7; stroke-linecap:round; }.app-nav .weather > span { display: grid; }.app-nav .weather strong { color: #0f172a; font-size: 11px; }.app-nav .weather small { font-size: 7px; }
.app-nav nav { display: flex; gap: 2px; }
.app-nav nav .nav-item { padding: 8px 9px; display:inline-flex; align-items:center; gap:5px; border-radius: 10px; color: #64748b; background: transparent; font-size: 8px; font-weight: 650; }
.app-nav nav .nav-item svg { width:11px; height:11px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.app-nav nav .nav-item b { font-weight:650; }
.app-nav nav .nav-item.active { color: white; background: var(--indigo); box-shadow: 0 3px 8px rgba(99,102,241,.23); }
.dashboard-body { padding: 22px 28px 28px; }
.dashboard-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dashboard-title h2 { margin: 0 0 4px; font-size: 17px; }.dashboard-title p { margin: 0; color: #64748b; font-size: 8px; }
.dashboard-title > div:last-child { display: flex; gap: 7px; }
.dashboard-title button, .sales-head button { height: 29px; padding: 0 10px; border: 1px solid #e2e8f0; border-radius: 8px; color: #475569; background: white; font-size: 7px; font-weight: 650; }
.dashboard-title button { display:inline-flex; align-items:center; gap:5px; }.dashboard-title button svg { width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sales-card { margin-top: 15px; padding: 17px 20px 12px; position:relative; border: 1px solid #e2e8f0; border-radius: 15px; background: white; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.sales-head { display: flex; align-items: center; justify-content: space-between; }.sales-head > strong { font-size: 10px; }.sales-head > div { display: flex; align-items: center; gap: 5px; }.sales-head span { min-width: 62px; text-align: center; font-size: 7px; font-weight: 700; }.sales-head button:nth-of-type(n+2) { width: 28px; padding: 0; }
.chart-key { margin: 9px 0; display: flex; flex-wrap: wrap; gap: 13px; color: #64748b; font-size: 6px; }.chart-key span { display: flex; gap: 5px; align-items: center; }.chart-key i { width: 12px; border-top: 2px solid #22c55e; }.chart-key .dash { border-style: dashed; }.chart-key .blue { border-color: #60a5fa; }.chart-key .best { width: 7px; height: 7px; border: 2px solid var(--amber); border-radius: 50%; }
.sales-chart { position: relative; height: 185px; margin-left: 20px; background: repeating-linear-gradient(to bottom, #e2e8f0 0, #e2e8f0 1px, transparent 1px, transparent 42px); }
.sales-chart svg { position: absolute; inset: 0 0 19px; width: 100%; height: calc(100% - 19px); overflow: visible; }.sales-chart path { fill: none; stroke-linecap: round; }.sales-chart .previous { stroke: #60a5fa; stroke-width: 2; }.sales-chart .current { stroke: #22c55e; stroke-width: 2.6; }.sales-chart .forecast { stroke: #22c55e; stroke-width: 2; stroke-dasharray: 6 5; }.sales-chart .today { stroke: #94a3b8; stroke-width: 1; stroke-dasharray: 4 4; }.sales-chart .best-day { fill: white; stroke: var(--amber); stroke-width: 3; }
.sales-chart .axis { position: absolute; left: -21px; color: #94a3b8; font-size: 6px; }.sales-chart .y40 { top: -3px; }.sales-chart .y30 { top: 39px; }.sales-chart .y20 { top: 81px; }.sales-chart .y10 { top: 123px; }
.chart-days { position: absolute; bottom: 1px; left: 0; right: 0; display: flex; justify-content: space-between; color: #94a3b8; font-size: 6px; }
.metric-label { margin: 14px 0 8px; display: grid; gap: 2px; }.metric-label strong { font-size: 10px; }.metric-label span { color: #64748b; font-size: 6px; }
.metric-bento { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }.metric-bento article { border: 1px solid #e2e8f0; border-radius: 13px; background: white; box-shadow: 0 1px 2px rgba(15,23,42,.04); }.metric-bento article > span { color: #64748b; font-size: 6px; font-weight: 760; letter-spacing: .08em; }
.unit-card, .mix-card { grid-column: span 2; min-height: 119px; padding: 13px; }
.unit-card { display: grid; grid-template-columns: 1fr auto; }.unit-card > div strong { font-size: 30px; }.unit-card > div b { margin-left: 5px; color: #2e9f57; padding: 4px 6px; border-radius: 99px; background: rgba(73,214,123,.14); font-size: 6px; }.unit-card p { grid-column: 1/-1; align-self: end; margin: 0; display: flex; justify-content: space-between; color: #64748b; font-size: 6px; }.unit-card p em, .unit-card small em { font-style: normal; }.unit-card > i { grid-column: 1/-1; height: 5px; border-radius: 5px; background: #f1f5f9; overflow: hidden; }.unit-card > i b { display: block; width: 64%; height: 100%; border-radius: inherit; background: #49d67b; }.unit-card small { grid-column: 1/-1; color: #64748b; font-size: 6px; }.unit-card small em { float: right; }
.mix-card { position: relative; display: flex; flex-direction: column; }.mix-card > strong { margin-top: 5px; font-size: 16px; }.mix-card > small { color: #64748b; font-size: 6px; }.mini-donut { position: absolute; top: 12px; right: 20px; width: 68px; height: 68px; border-radius: 50%; background: conic-gradient(#4fb0c6 0 43%,#8d80c3 43% 64%,#94a3b8 64%); }.mini-donut::after { content:""; position:absolute; inset:15px; border-radius:50%; background:white; }.mix-card p { margin: auto 0 0; display: flex; gap: 6px; color: #64748b; font-size: 6px; }.mix-card p i { width: 5px; height: 5px; border-radius: 50%; background: #4fb0c6; }.mix-card p i:nth-of-type(2) { background:#8d80c3; }.mix-card p i:nth-of-type(3) { background:#94a3b8; }
.dashboard-callout { width:145px; min-height:32px; padding:8px 10px; position:absolute; z-index:5; display:grid; grid-template-columns:21px 1fr; align-items:center; gap:6px; overflow:hidden; border:1px solid rgba(255,255,255,.78); border-radius:10px; color:#343640; background:rgba(255,255,255,.88); box-shadow:0 11px 26px rgba(15,23,42,.13); backdrop-filter:blur(12px); cursor:help; outline:none; transition:width .3s var(--ease), transform .3s var(--ease), box-shadow .3s; }
.dashboard-callout > span { width:21px; height:21px; display:grid; place-items:center; border-radius:7px; color:white; background:var(--indigo); font-family:"SFMono-Regular",Consolas,monospace; font-size:6px; }.dashboard-callout > strong { font-size:7px; white-space:nowrap; }.dashboard-callout > p,.mix-card .dashboard-callout > p { grid-column:1/-1; max-height:0; margin:0; display:block; overflow:hidden; color:#64748b; font-size:7px; line-height:1.5; opacity:0; transition:max-height .3s var(--ease), margin-top .3s var(--ease), opacity .2s; }
.dashboard-callout:hover,.dashboard-callout:focus-visible { width:235px; transform:translateY(-3px); box-shadow:0 17px 34px rgba(15,23,42,.18); }.dashboard-callout:hover > p,.dashboard-callout:focus-visible > p { max-height:70px; margin-top:4px; opacity:1; }.callout-sales { top:91px; right:23px; }.callout-mix { right:9px; bottom:9px; width:118px; }.callout-mix:hover,.callout-mix:focus-visible { width:220px; }
.mini-metric { min-height: 65px; padding: 11px; display: flex; flex-direction: column; justify-content: space-between; }.mini-metric strong { font-size: 20px; }.mini-metric.teal strong { color:#4fb0c6; }.mini-metric.coral strong { color:#f78f69; }.mini-metric.sage strong { color:#5d996e; }.mini-metric.violet strong { color:#8d80c3; }

.context-section, .access-section, .strategy-section, .workflows-section, .system-section, .impact-section, .reflection-section { padding: 140px var(--gutter); }
.context-section { color: white; background: var(--ink); }
.section-heading, .context-layout, .device-experience, .strategy-intro, .strategy-loop, .workflow, .system-grid, .impact-section > *, .reflection-section > * { max-width: var(--max); margin-inline: auto; }
.section-heading { display: grid; grid-template-columns: 1fr 3fr; gap: 40px; }
.section-heading h2 { max-width: 960px; margin: -10px 0 0; font-size: clamp(46px, 6vw, 82px); line-height: .98; letter-spacing: -.06em; font-weight: 520; }
.section-deck { grid-column: 2; max-width: 690px; margin: 26px 0 0; color: var(--muted); font-size: 18px; line-height: 1.6; }
.context-section .section-index { color: #777985; }.context-section .section-heading h2 { color: white; }
.context-layout { margin-top: 105px; display: grid; grid-template-columns: .95fr 1.2fr; gap: 11vw; align-items: start; }
.context-statement > p { margin: 0; color: #c9cad0; font-size: clamp(24px,3vw,36px); line-height: 1.34; letter-spacing: -.035em; }
.context-statement aside { margin-top: 75px; padding-top: 24px; border-top: 1px solid #313239; display: grid; gap: 12px; }.context-statement aside span { color: #777985; font-family: "SFMono-Regular",Consolas,monospace; font-size: 9px; letter-spacing:.1em; text-transform:uppercase; }.context-statement aside strong { max-width: 450px; color: white; font-size: 16px; line-height: 1.55; }
.role-stack { display: grid; border-top: 1px solid #34353d; }
.role-stack article { padding: 27px 0; display: grid; grid-template-columns: 40px 1fr auto; gap: 18px; align-items: start; border-bottom: 1px solid #34353d; transition: padding .3s var(--ease), border-color .3s; }
.role-stack article:hover { padding-left: 14px; border-color: #6667f1; }
.role-stack article > span { color: #6f717d; font-family:"SFMono-Regular",Consolas,monospace; font-size:9px; }.role-stack h3 { margin:0 0 8px; font-size:21px; }.role-stack p { margin:0; max-width:390px; color:#989aa5; line-height:1.55; font-size:14px; }.role-stack b { padding:7px 9px; border:1px solid #3a3b43; border-radius:99px; color:#a2a4ae; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }

.access-section { background: white; }
.device-scroll-track { height:300vh; max-width:var(--max); margin:90px auto 0; position:relative; }
.device-experience { height:calc(100vh - 44px); min-height:620px; margin-top:0; position:sticky; top:22px; display: grid; grid-template-columns: .72fr 1.28fr; overflow: hidden; border: 1px solid #e0e0dc; border-radius: var(--radius); background: var(--panel); }
.device-copy { padding: 45px; display: flex; flex-direction: column; }
.device-tabs { display: grid; }
.device-tabs button { padding: 20px 0; display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items:center; border:0; border-bottom:1px solid #d7d7d2; color:#77787e; background:transparent; text-align:left; font-size:18px; cursor:pointer; transition:color .25s,padding .25s var(--ease); }.device-tabs button:first-child { border-top:1px solid #d7d7d2; }.device-tabs button span { font-family:"SFMono-Regular",Consolas,monospace; font-size:9px; }.device-tabs button.active { padding-left:12px; color:var(--ink); font-weight:680; }.device-tabs button.active span { color:var(--indigo); }
.device-tabs button:focus-visible { outline:2px solid var(--indigo); outline-offset:-2px; border-radius:10px; }
.device-notes { margin-top:auto; }.device-notes article { display:none; }.device-notes article.active { display:grid; animation:fade-up .45s var(--ease); }.device-notes p { margin:0; color:var(--muted); font-family:"SFMono-Regular",Consolas,monospace; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }.device-notes strong { margin-top:10px; font-size:42px; letter-spacing:-.05em; }.device-notes span { margin-top:15px; color:#585960; font-size:14px; line-height:1.6; }
.device-scroll-hint { margin:26px 0 0; display:flex; align-items:center; gap:10px; color:#96979d; font-family:"SFMono-Regular",Consolas,monospace; font-size:8px; letter-spacing:.07em; text-transform:uppercase; }.device-scroll-hint i { width:7px; height:22px; position:relative; border-left:1px solid #a2a3aa; }.device-scroll-hint i::after { content:""; width:5px; height:5px; position:absolute; left:-3px; bottom:0; border-right:1px solid #a2a3aa; border-bottom:1px solid #a2a3aa; transform:rotate(45deg); }
.device-stage { min-width:0; min-height:0; padding:60px; display:grid; place-items:center; position:relative; color:white; background:radial-gradient(circle at 60% 40%,#39357a 0,#20213a 35%,#13141c 72%); }
.device-panel { width:100%; height:100%; position:relative; display:grid; place-items:center; }.device-panel[hidden] { display:none; }.device-panel.active { animation:device-in .55s var(--ease); }
.stage-caption { position:absolute; bottom:0; left:0; color:#a9abb7; font-family:"SFMono-Regular",Consolas,monospace; font-size:8px; letter-spacing:.08em; text-transform:uppercase; }
.access-phone { width:315px; min-height:560px; padding:0 19px 26px; color:#0f172a; border:7px solid #2d303c; border-radius:38px; background:#f8fafc; box-shadow:0 35px 70px rgba(0,0,0,.35); }
.phone-screen-head { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:12px 0 15px; border-bottom:1px solid #e2e8f0; }.phone-screen-head button { width:24px; height:24px; padding:0; border:0; background:transparent; text-align:left; }.phone-screen-head > div { display:grid; text-align:center; }.phone-screen-head strong { font-size:11px; }.phone-screen-head small { color:#94a3b8; font-size:6px; }.mobile-group { margin:20px 0 10px; color:#94a3b8; font-size:7px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }.mobile-fields { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.mobile-fields label { display:grid; gap:5px; color:#64748b; font-size:7px; }.mobile-fields input,.mobile-fields select { width:100%; height:40px; padding:0 10px; border:1px solid #e2e8f0; border-radius:9px; color:#0f172a; background:white; font-size:9px; }.phone-action { width:100%; height:42px; margin-top:28px; border:0; border-radius:9px; color:white; background:var(--indigo); font-size:9px; font-weight:720; }.phone-action span { float:right; margin-right:8px; }
.mini-desktop { width:min(690px,100%); overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:16px; background:#f8fafc; box-shadow:0 35px 70px rgba(0,0,0,.3); }.mini-desktop-nav { height:52px; padding:0 18px; display:flex; gap:18px; align-items:center; color:#64748b; background:white; font-size:8px; }.mini-desktop-nav img { width:104px; margin-right:auto; }.mini-desktop-nav b { padding:8px 10px; border-radius:9px; color:white; background:var(--indigo); }.mini-desktop-body { height:390px; padding:40px; position:relative; color:#0f172a; background:repeating-linear-gradient(to bottom,#f8fafc 0,#f8fafc 71px,#e2e8f0 72px); }.mini-desktop-body > div { display:grid; gap:7px; }.mini-desktop-body small { color:#64748b; font-size:9px; }.mini-desktop-body strong { font-size:42px; }.mini-desktop-body span { color:var(--green); font-size:10px; }.mini-desktop-body svg { position:absolute; inset:100px 30px 30px; width:calc(100% - 60px); height:calc(100% - 130px); }.mini-desktop-body path { fill:none; stroke:#22c55e; stroke-width:5; stroke-linecap:round; }
.mini-tv { width:min(670px,100%); padding:28px; border:8px solid #2e3038; border-radius:14px; background:#11131a; box-shadow:0 35px 70px rgba(0,0,0,.35); }.tv-top { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding-bottom:22px; border-bottom:1px solid #2b2e38; }.tv-top img { width:100px; }.tv-top strong { font-size:14px; }.tv-top span { justify-self:end; color:#7edcb9; font-size:8px; }.mini-tv ol { list-style:none; margin:0; padding:12px 0 0; }.mini-tv li { min-height:72px; display:grid; grid-template-columns:34px 100px 1fr 35px; gap:10px; align-items:center; border-bottom:1px solid #262933; }.mini-tv li b { color:#777c8c; }.mini-tv li strong { font-size:11px; }.mini-tv li i { height:12px; border-radius:4px; background:linear-gradient(90deg,var(--blue) var(--w),#2e3140 var(--w)); }.mini-tv li em { font-style:normal; font-size:11px; text-align:right; }

.strategy-section { background:var(--paper); }
.strategy-intro { max-width:750px; margin-top:55px; margin-left:max(var(--gutter),calc((100% - var(--max))/2 + var(--max)*.25)); color:#56575e; font-size:19px; line-height:1.65; }
.strategy-loop { margin-top:90px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.strategy-loop article { min-height:390px; padding:26px; display:flex; flex-direction:column; border-right:1px solid var(--line); transition:background .35s var(--ease),transform .35s var(--ease); }.strategy-loop article:first-child { border-left:1px solid var(--line); }.strategy-loop article:hover { background:white; transform:translateY(-8px); }.strategy-loop article > span { color:var(--muted-2); font-family:"SFMono-Regular",Consolas,monospace; font-size:9px; }.strategy-loop article > i { width:48px; height:48px; margin-top:58px; display:grid; place-items:center; border:1px solid var(--line); border-radius:14px; color:var(--indigo); background:white; font-style:normal; font-size:18px; }.strategy-loop h3 { margin:28px 0 10px; font-size:29px; letter-spacing:-.04em; }.strategy-loop p { margin:0; color:var(--muted); font-size:14px; line-height:1.58; }.strategy-loop b { margin-top:auto; color:#76777e; font-size:9px; letter-spacing:.05em; text-transform:uppercase; }

.workflows-section { max-width:none; background:#e9e9e5; }
.workflow { margin-top:90px; min-height:720px; overflow:hidden; border-radius:var(--radius); display:grid; grid-template-columns:.86fr 1.14fr; }
.workflow-copy { padding:clamp(42px,5vw,72px); position:relative; display:flex; flex-direction:column; justify-content:center; }
.workflow-number { position:absolute; top:30px; right:34px; color:#777984; font-family:"SFMono-Regular",Consolas,monospace; font-size:9px; }.workflow-label { margin-bottom:25px; }.workflow-copy h3 { max-width:520px; margin:0; font-size:clamp(42px,4.6vw,65px); line-height:1; letter-spacing:-.06em; font-weight:520; }.workflow-copy > p:not(.workflow-label) { max-width:510px; margin:28px 0 0; color:inherit; opacity:.67; font-size:16px; line-height:1.65; }.workflow-copy ul { list-style:none; margin:30px 0 0; padding:0; display:grid; gap:12px; font-size:12px; }.workflow-copy li { display:flex; align-items:flex-start; gap:9px; }.workflow-copy li::before { content:"✓"; color:#a7a3ff; flex:none; }.interaction-note { margin-top:40px; display:flex; align-items:center; gap:11px; }.interaction-note > i { width:8px; height:8px; border-radius:50%; background:var(--indigo); box-shadow:0 0 0 5px rgba(99,102,241,.14); }.interaction-note span { display:grid; gap:3px; font-size:10px; color:inherit; opacity:.67; }.interaction-note strong { color:inherit; font-family:"SFMono-Regular",Consolas,monospace; font-size:8px; letter-spacing:.08em; text-transform:uppercase; }
.workflow-capture { color:white; background:var(--ink); }.workflow-capture .workflow-label { color:#858793; }.capture-demo { min-height:720px; overflow:hidden; background:#1d1d27; }.capture-demo img { width:100%; height:100%; min-height:720px; display:block; object-fit:cover; object-position:center; }

.workflow-performance { background:white; }.workflow-performance .workflow-copy { border-right:1px solid #ededE9; }.leaderboard-demo { align-self:center; margin:54px 50px 54px 0; padding:28px; border:1px solid #e2e8f0; border-radius:20px; background:#f8fafc; box-shadow:0 25px 65px rgba(15,23,42,.08); }
.board-top { display:flex; justify-content:space-between; gap:10px; }.board-top button,.board-filters button { padding:8px 10px; border:1px solid #e2e8f0; border-radius:8px; color:#64748b; background:white; font-size:7px; font-weight:650; cursor:pointer; }.board-actions { display:flex; gap:6px; }.board-actions button.active { color:#4f46e5; border-color:#c7d2fe; background:#eef2ff; }
.board-filters { margin:18px 0; display:flex; flex-wrap:wrap; gap:5px; }.board-filters button { display:flex; align-items:center; gap:5px; }.board-filters button.active { color:#0f172a; border-color:#94a3b8; box-shadow:0 2px 5px rgba(15,23,42,.05); }.board-filters i { width:7px; height:7px; border-radius:2px; }
.honda { background:var(--blue)!important; }.acura { background:var(--purple)!important; }.used { background:var(--pink)!important; }.purchase { background:var(--amber)!important; }
.board-layout { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:18px; }.scoreboard { list-style:none; margin:0; padding:0; display:grid; gap:4px; }.scoreboard li { min-height:60px; display:grid; grid-template-columns:28px 76px minmax(0,1fr) 28px; gap:7px; align-items:center; border-bottom:1px solid #edf0f4; }.scoreboard li > em { font-style:normal; font-size:11px; text-align:center; }.scoreboard li > strong { color:#334155; font-size:8px; }.scoreboard li > b { color:#64748b; font-size:8px; text-align:right; }.deal-strip { display:flex; flex-wrap:wrap; gap:4px; }.deal-square { width:20px; height:20px; padding:0; border:0; border-radius:5px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.04); cursor:pointer; transition:transform .18s var(--ease),filter .18s,opacity .22s,width .22s; }.deal-square.split { width:9px; }.deal-square:hover,.deal-square:focus-visible { z-index:2; outline:3px solid white; box-shadow:0 0 0 5px rgba(99,102,241,.22); transform:translateY(-4px) scale(1.08); }.deal-square.filtered { width:0; margin-left:-4px; opacity:0; pointer-events:none; }
.deal-inspector { min-height:220px; padding:18px; border:1px solid #e2e8f0; border-radius:14px; background:white; transition:transform .3s var(--ease),box-shadow .3s; }.deal-inspector.engaged { transform:translateY(-4px); box-shadow:0 14px 30px rgba(15,23,42,.08); }.deal-inspector > span { color:#94a3b8; font-family:"SFMono-Regular",Consolas,monospace; font-size:7px; text-transform:uppercase; letter-spacing:.1em; }.inspector-color { width:28px; height:6px; margin:18px 0 16px; border-radius:4px; }.deal-inspector p { margin:0; color:#64748b; font-size:8px; }.deal-inspector h4 { margin:5px 0 20px; font-size:15px; line-height:1.25; }.deal-inspector dl { margin:0; display:grid; gap:8px; }.deal-inspector dl div { display:flex; justify-content:space-between; gap:10px; padding-top:8px; border-top:1px solid #f1f5f9; font-size:7px; }.deal-inspector dt { color:#94a3b8; }.deal-inspector dd { margin:0; color:#334155; font-weight:700; text-align:right; }.board-footnote { margin:18px 0 0; padding-top:13px; border-top:1px solid #e2e8f0; color:#94a3b8; font-size:7px; }.board-footnote span { display:inline-block; width:9px; height:15px; margin-right:6px; vertical-align:middle; border-radius:4px; background:var(--purple); }

.workflow-operations { color:white; background:var(--ink-2); }.workflow-operations .workflow-copy { border-right:1px solid #31323a; }.operations-demo { align-self:center; margin:54px 50px 54px 0; min-height:540px; overflow:hidden; border:1px solid #343642; border-radius:20px; color:#0f172a; background:#f8fafc; box-shadow:0 30px 70px rgba(0,0,0,.22); }.operations-nav { padding:11px; display:flex; gap:5px; border-bottom:1px solid #e2e8f0; background:white; }.operations-nav button { flex:1; padding:9px 7px; border:0; border-radius:8px; color:#64748b; background:transparent; font-size:8px; font-weight:680; cursor:pointer; }.operations-nav button.active { color:white; background:var(--indigo); box-shadow:0 4px 10px rgba(99,102,241,.2); }
.operation-panel { padding:28px; animation:fade-up .42s var(--ease); }.operation-panel[hidden] { display:none; }.operation-panel header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px; }.operation-panel header p { margin:0 0 4px; color:#94a3b8; font-size:7px; text-transform:uppercase; letter-spacing:.1em; }.operation-panel header h4 { margin:0; font-size:18px; }.operation-panel header > strong { color:var(--green); font-size:10px; }.operation-panel header > strong.alert { padding:5px 8px; border-radius:99px; color:#e11d48; background:#fff1f2; font-size:7px; }
.spiff-grid { display:grid; gap:10px; }.spiff-grid article { padding:14px; display:grid; grid-template-columns:35px 1fr auto; align-items:center; gap:11px; border:1px solid #e2e8f0; border-radius:11px; background:white; }.spiff-grid article > i { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:#94a3b8; background:#f1f5f9; font-style:normal; }.spiff-grid article > div { display:grid; gap:4px; }.spiff-grid article strong { font-size:9px; }.spiff-grid article span { color:#94a3b8; font-size:7px; }.spiff-grid article > b { color:#64748b; font-size:9px; }.spiff-grid article.complete { border-color:#a7f3d0; background:#ecfdf5; }.spiff-grid article.complete > i { color:white; background:var(--green); }.spiff-grid article.complete strong { color:#065f46; }.spiff-grid article.complete > b { color:var(--green); }
.loaner-list { display:grid; gap:10px; }.loaner-list article { padding:15px; display:flex; justify-content:space-between; align-items:center; gap:20px; border:1px solid #e2e8f0; border-radius:11px; background:white; }.loaner-list article > div { display:grid; gap:4px; }.loaner-list strong { font-size:9px; }.loaner-list span { color:#94a3b8; font-size:7px; }.loaner-list b { color:#64748b; font-size:6px; }.loaner-list article.overdue { border-color:#fecdd3; background:#fff1f2; }.loaner-list article.overdue b { color:#e11d48; }
.map-panel { padding:0; }.map-panel header { padding:25px 28px 0; }.map-panel img { width:100%; height:365px; object-fit:cover; }.map-key { padding:11px 28px; display:flex; gap:14px; }.map-key span { display:flex; align-items:center; gap:5px; color:#64748b; font-size:7px; }.map-key i { width:7px; height:7px; border-radius:2px; background:#06b6d4; }.map-key span:nth-child(2) i { background:#f97316; }.map-key span:nth-child(3) i { background:var(--purple); }
.people-list { display:grid; }.people-list article { padding:13px 0; display:grid; grid-template-columns:38px 1fr auto; gap:11px; align-items:center; border-top:1px solid #e2e8f0; }.people-list article > i { width:35px; height:35px; display:grid; place-items:center; border-radius:50%; color:#4338ca; background:#e0e7ff; font-size:8px; font-weight:800; font-style:normal; }.people-list article > div { display:grid; gap:4px; }.people-list strong { font-size:9px; }.people-list span { color:#94a3b8; font-size:7px; }.people-list b { padding:6px 8px; border-radius:7px; color:white; background:var(--indigo); font-size:6px; word-spacing:3px; }

.system-section { background:white; }.system-grid { margin-top:85px; display:grid; grid-template-columns:.8fr 1.2fr; gap:18px; }.token-panel,.component-panel { min-height:500px; padding:30px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); }.token-panel > p,.component-panel header span { margin:0 0 35px; color:var(--muted); font-family:"SFMono-Regular",Consolas,monospace; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }.swatches { display:grid; }.swatches button { min-height:77px; padding:0; display:grid; grid-template-columns:34px 1fr auto; gap:13px; align-items:center; border:0; border-bottom:1px solid var(--line); color:var(--muted); background:transparent; text-align:left; cursor:pointer; }.swatches button:first-child { border-top:1px solid var(--line); }.swatches button i { width:30px; height:30px; border-radius:9px; background:var(--tone); transition:transform .25s var(--ease); }.swatches button span { font-size:14px; }.swatches button b { font-family:"SFMono-Regular",Consolas,monospace; font-size:8px; font-weight:500; }.swatches button.active { color:var(--ink); }.swatches button.active i { transform:scale(1.18) rotate(-5deg); }
.swatches button:focus-visible { outline:2px solid var(--indigo); outline-offset:-2px; border-radius:12px; }
.component-panel { background:#13141a; color:white; }.component-panel header { display:flex; justify-content:space-between; }.component-panel header span { margin:0; color:#858793; }.component-panel header b { color:#7bd8b5; font-size:8px; }.component-panel article { max-width:430px; margin:45px auto 0; padding:25px; display:grid; grid-template-columns:1fr auto; border:1px solid #e2e8f0; border-radius:18px; color:#0f172a; background:white; box-shadow:0 30px 70px rgba(0,0,0,.25); }.component-panel article > div small { display:block; color:#64748b; font-size:7px; letter-spacing:.1em; }.component-panel article > div strong { display:block; margin-top:8px; font-size:44px; }.sample-state { align-self:start; padding:6px 8px; border-radius:99px; color:#4338ca; background:#eef2ff; font-size:8px; font-weight:750; }.component-panel article p { grid-column:1/-1; margin:32px 0 8px; display:flex; justify-content:space-between; color:#64748b; font-size:8px; }.component-panel article > i { grid-column:1/-1; height:7px; border-radius:7px; overflow:hidden; background:#f1f5f9; }.component-panel article > i em { display:block; width:64%; height:100%; border-radius:inherit; background:var(--sample-tone,var(--indigo)); transition:background .25s; }.component-panel article button { grid-column:1/-1; height:42px; margin-top:25px; border:0; border-radius:9px; color:white; background:var(--sample-tone,var(--indigo)); font-size:9px; font-weight:720; transition:background .25s; cursor:pointer; }.component-panel article button span { float:right; margin-right:8px; }

.impact-section { color:white; background:var(--ink); display:grid; grid-template-columns:1fr 1fr; gap:9vw; align-items:center; }.impact-copy { max-width:560px; justify-self:end; }.impact-copy .section-index { color:#7d7f8a; }.impact-copy h2 { margin:25px 0 0; font-size:clamp(48px,5.5vw,76px); line-height:1; letter-spacing:-.06em; font-weight:520; }.impact-copy > p:not(.section-index) { margin:28px 0 35px; color:#aaaCB5; font-size:16px; line-height:1.68; }.impact-copy .primary-action { color:var(--ink); background:white; }.impact-copy .primary-action:hover { color:white; background:var(--indigo); }
.impact-facts { max-width:600px; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #34353d; border-left:1px solid #34353d; }.impact-facts article { min-height:210px; padding:26px; display:flex; flex-direction:column; border-right:1px solid #34353d; border-bottom:1px solid #34353d; }.impact-facts span { color:#767884; font-family:"SFMono-Regular",Consolas,monospace; font-size:8px; text-transform:uppercase; letter-spacing:.1em; }.impact-facts strong { margin-top:auto; font-size:34px; letter-spacing:-.04em; }.impact-facts p { margin:7px 0 0; color:#858793; font-size:10px; line-height:1.4; }.source-note { grid-column:1/-1; max-width:var(--max)!important; width:100%; margin-top:20px!important; color:#686a75; font-size:9px; text-align:right; }

.reflection-section { display:grid; grid-template-columns:.7fr 2fr; gap:8vw; align-items:start; background:var(--paper); }.reflection-section > .section-index { margin-inline:0; justify-self:end; }.reflection-copy { max-width:890px; margin:0; }.reflection-copy h2 { margin:0; font-size:clamp(44px,5.3vw,74px); line-height:1.03; letter-spacing:-.06em; font-weight:520; }.reflection-copy p { max-width:680px; margin:35px 0 0; color:#55565d; font-size:17px; line-height:1.7; }
.next-section { padding:90px var(--gutter) 150px; color:white; background:var(--indigo); }.next-section > * { max-width:var(--max); margin-inline:auto; }.next-section > p { margin-top:0; margin-bottom:65px; color:#d9d8ff; font-family:"SFMono-Regular",Consolas,monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; }.next-section a { display:grid; grid-template-columns:1fr auto; align-items:end; text-decoration:none; font-size:clamp(48px,7vw,98px); line-height:.95; letter-spacing:-.065em; }.next-section a span { grid-column:1/-1; margin-bottom:16px; color:#d8d7ff; font-family:"SFMono-Regular",Consolas,monospace; font-size:10px; letter-spacing:.06em; }.next-section a b { font-weight:400; transition:transform .3s var(--ease); }.next-section a:hover b { transform:translate(8px,-8px); }

.case-dock { position:fixed; z-index:100; left:50%; bottom:22px; transform:translateX(-50%); padding:8px; display:flex; gap:2px; align-items:center; border:1px solid rgba(255,255,255,.32); border-radius:22px; background:rgba(43,44,48,.72); box-shadow:0 15px 40px rgba(0,0,0,.2); backdrop-filter:blur(18px) saturate(1.2); }
.case-dock a { min-width:74px; height:48px; padding:0 14px; display:grid; place-items:center; border-radius:15px; color:#e2e2e4; text-decoration:none; font-family:"SFMono-Regular",Consolas,monospace; font-size:9px; text-transform:uppercase; transition:color .22s,background .22s,transform .22s var(--ease); }.case-dock a:hover { color:white; transform:translateY(-2px); }.case-dock a.active { color:var(--ink); background:white; }.case-dock .dock-portfolio { min-width:74px; color:var(--ink); background:white; font-size:15px; }
footer { padding:38px var(--gutter) 110px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; color:#8b8d98; background:#0b0c10; font-size:9px; }footer img { width:116px; }footer p { margin:0; }footer p:last-child { text-align:right; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .75s var(--ease),transform .75s var(--ease); }.reveal.visible { opacity:1; transform:none; }
@keyframes fade-up { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes device-in { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } }

@media (max-width: 1050px) {
  .case-status { display:none; }.case-top { grid-template-columns:1fr 1fr; }
  .hero { min-height:auto; }.project-facts { grid-template-columns:1fr 1fr; }.project-facts div:nth-child(3) { padding-left:0; border-left:0; }.project-facts div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .app-nav .weather { display:none; }.app-nav nav { margin-left:auto; }.app-nav nav .nav-item b { display:none; }
  .section-heading { grid-template-columns:1fr; }.section-deck { grid-column:1; }.context-layout { gap:7vw; }
  .device-experience { grid-template-columns:1fr; }.device-copy { min-height:390px; }.device-notes { margin-top:55px; }.device-stage { min-height:680px; }
  .strategy-loop { grid-template-columns:1fr 1fr; }.strategy-loop article:nth-child(3) { border-left:1px solid var(--line); border-top:1px solid var(--line); }.strategy-loop article:nth-child(4) { border-top:1px solid var(--line); }
  .workflow { grid-template-columns:1fr; }.workflow-copy { min-height:600px; }.workflow-performance .workflow-copy,.workflow-operations .workflow-copy { border-right:0; }.leaderboard-demo,.operations-demo { margin:0 50px 60px; }.capture-demo { min-height:720px; }
  .impact-section { grid-template-columns:1fr; }.impact-copy { max-width:780px; justify-self:auto; }.impact-facts { max-width:780px; }.source-note { text-align:left; }
}

@media (max-width: 720px) {
  :root { --gutter:20px; --radius:22px; }
  .case-top { height:68px; }.brand-link { width:112px; }.portfolio-jump { font-size:10px; }
  .hero { padding-top:120px; padding-bottom:85px; }.hero h1 { font-size:clamp(49px,14.3vw,68px); }.hero-lede { margin-top:32px; font-size:17px; }.hero-actions { margin-top:28px; flex-direction:column; align-items:flex-start; gap:18px; }.project-facts { grid-template-columns:1fr; margin-top:60px; }.project-facts div,.project-facts div+div { padding:17px 0; border-left:0; border-bottom:1px solid var(--line); }.project-facts div:last-child { border-bottom:0; }
  .hero-product { margin-top:50px; margin-inline:-8px; }.browser-bar { grid-template-columns:auto 1fr; }.browser-live { display:none; }.browser-url { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.context-float { display:none; }.app-preview { min-height:520px; }.app-nav { padding-inline:13px; }.app-nav > img { width:100px; }.app-nav nav .nav-item { display:none; }.app-nav nav .nav-item.active,.app-nav nav .nav-item:last-child { display:block; }.dashboard-body { padding:14px; }.dashboard-title h2 { font-size:14px; }.dashboard-title > div:last-child button:last-child { display:none; }.sales-card { padding:13px; }.sales-head > div button:first-child { display:none; }.sales-chart { height:175px; }.metric-bento { grid-template-columns:1fr 1fr; }.unit-card,.mix-card { grid-column:1/-1; }.mini-metric:nth-of-type(n+5) { display:none; }
  .context-section,.access-section,.strategy-section,.workflows-section,.system-section,.impact-section,.reflection-section { padding:90px var(--gutter); }.section-heading h2 { margin-top:10px; font-size:42px; }.section-deck { font-size:16px; }.context-layout { margin-top:60px; grid-template-columns:1fr; }.context-statement > p { font-size:25px; }.role-stack { margin-top:25px; }.role-stack article { grid-template-columns:30px 1fr; }.role-stack article > b { grid-column:2; width:max-content; }
  .device-experience { margin-top:55px; }.device-copy { padding:25px; min-height:430px; }.device-stage { min-height:590px; padding:32px 20px 45px; }.access-phone { width:290px; }.mini-desktop-nav span { display:none; }.mini-desktop-nav b { margin-left:auto; }.mini-desktop-body { height:300px; padding:28px; }.mini-tv { padding:16px; }.mini-tv li { grid-template-columns:24px 70px 1fr 28px; }.tv-top img { width:80px; }
  .strategy-intro { margin:35px 0 0; font-size:17px; }.strategy-loop { margin-top:55px; grid-template-columns:1fr; }.strategy-loop article,.strategy-loop article:first-child,.strategy-loop article:nth-child(3) { min-height:310px; border-left:1px solid var(--line); border-top:0; border-bottom:1px solid var(--line); }.strategy-loop article > i { margin-top:38px; }.strategy-loop article:hover { transform:none; }
  .workflow { margin-top:48px; border-radius:22px; }.workflow-copy { min-height:auto; padding:45px 25px 55px; }.workflow-copy h3 { font-size:42px; }.capture-demo,.capture-demo img { min-height:680px; }.workflow-performance .workflow-copy { min-height:auto; }.leaderboard-demo,.operations-demo { margin:0 14px 20px; padding:18px; }.board-filters button { font-size:0; }.board-filters button i { width:12px; height:12px; }.board-filters button:first-child { font-size:7px; }.board-layout { grid-template-columns:1fr; }.scoreboard li { grid-template-columns:22px 62px minmax(0,1fr) 22px; }.deal-square { width:16px; height:16px; }.deal-square.split { width:8px; }.deal-inspector { min-height:auto; display:grid; grid-template-columns:1fr auto; column-gap:15px; }.deal-inspector .inspector-color { grid-column:1/-1; margin-block:12px; }.deal-inspector p,.deal-inspector h4 { grid-column:1; }.deal-inspector h4 { margin-bottom:0; }.deal-inspector dl { grid-column:2; grid-row:3/5; min-width:100px; }.operations-demo { min-height:500px; padding:0; }.operations-nav { overflow:auto; }.operations-nav button { min-width:68px; }.operation-panel { padding:21px; }.map-panel { padding:0; }.map-panel header { padding:21px 21px 0; }.map-panel img { height:280px; }.people-list article { grid-template-columns:35px 1fr; }.people-list article > b { grid-column:2; width:max-content; }
  .system-grid { margin-top:55px; grid-template-columns:1fr; }.token-panel,.component-panel { min-height:440px; padding:22px; }.component-panel article { padding:20px; }
  .impact-facts { grid-template-columns:1fr; }.impact-facts article { min-height:160px; }.reflection-section { grid-template-columns:1fr; }.reflection-section > .section-index { justify-self:start; }.reflection-copy h2 { margin-top:30px; font-size:42px; }
  .next-section { padding:75px 20px 125px; }.next-section a { font-size:45px; }.case-dock { bottom:12px; padding:6px; max-width:calc(100% - 20px); }.case-dock a { min-width:0; width:64px; height:44px; padding:0 7px; font-size:7px; }.case-dock .dock-portfolio { min-width:44px; width:44px; }
  footer { grid-template-columns:1fr; padding-bottom:100px; }footer p:last-child { text-align:left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; }
  .reveal { opacity:1; transform:none; }
}

/* Revision: render-led access, expandable strategy, source leaderboard, and operations overview. */
.render-stage { padding: 42px; }
.access-render { width: 100%; height: 100%; margin: 0; display: grid; grid-template-rows: auto auto; gap: 17px; align-content: center; }
.access-render img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: 18px; filter: drop-shadow(0 28px 55px rgba(0,0,0,.28)); }
.access-render-mobile img,.access-render-desktop img { object-position: center; }
.access-render-tv img { object-position: center 52%; }
.access-render figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; color: #8d909e; font-family: "SFMono-Regular",Consolas,monospace; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.access-render figcaption strong { color: #f3f4f8; font: inherit; }
.access-render figcaption span { text-align: right; }

.strategy-loop { align-items: start; }
.strategy-loop .strategy-card { min-height: 350px; padding: 26px; display: flex; flex-direction: column; position: relative; overflow: hidden; cursor: pointer; outline: none; transition: min-height .42s var(--ease), background .35s var(--ease), transform .35s var(--ease), box-shadow .35s; }
.strategy-loop .strategy-card:hover,.strategy-loop .strategy-card:focus-visible,.strategy-loop .strategy-card.expanded { min-height: 520px; z-index: 2; background: white; box-shadow: 0 24px 55px rgba(16,16,20,.08); transform: translateY(-8px); }
.strategy-card > span { color: var(--muted-2); font-family: "SFMono-Regular",Consolas,monospace; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.strategy-loop .strategy-card h3 { margin-top: 75px; }
.strategy-loop .strategy-card > p { margin: 0; max-width: 220px; color: #55575f; font-size: 15px; line-height: 1.55; }
.strategy-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .42s var(--ease), opacity .25s; }
.strategy-more > dl { min-height: 0; overflow: hidden; margin: 26px 0 0; }
.strategy-more dl div { padding: 12px 0; border-top: 1px solid var(--line); }
.strategy-more dt { color: var(--muted-2); font-family: "SFMono-Regular",Consolas,monospace; font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.strategy-more dd { margin: 6px 0 0; color: #383941; font-size: 12px; line-height: 1.5; }
.strategy-card:hover .strategy-more,.strategy-card:focus-visible .strategy-more,.strategy-card.expanded .strategy-more { grid-template-rows: 1fr; opacity: 1; }
.strategy-loop .strategy-card > b { margin-top: auto; padding-top: 22px; display: flex; justify-content: space-between; color: #777980; font-family: "SFMono-Regular",Consolas,monospace; font-size: 8px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.strategy-card > b i { color: var(--indigo); font-size: 13px; font-style: normal; transition: transform .3s var(--ease); }
.strategy-card:hover > b i,.strategy-card:focus-visible > b i,.strategy-card.expanded > b i { transform: rotate(45deg); }

.fs-board { align-self: center; margin: 48px 44px 48px 0; overflow: visible; border: 1px solid #e2e8f0; border-radius: 20px; background: white; box-shadow: 0 24px 60px rgba(15,23,42,.1); font-family: Inter,"Helvetica Neue",Arial,sans-serif; }
.fs-toolbar { min-height: 58px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #f1f5f9; border-radius: 20px 20px 0 0; background: #f8fafc; }
.fs-toolbar strong { color: #1e293b; font-size: 12px; }.fs-filter { min-height: 31px; padding: 0 8px 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e2e8f0; border-radius: 11px; color: #64748b; background: white; font-size: 8px; font-weight: 650; }.fs-filter svg { width:12px; height:12px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.fs-filter select { max-width: 114px; border: 0; outline: 0; color: inherit; background: transparent; font: inherit; }
.fs-legend { padding: 12px 16px 6px; display: flex; flex-wrap: wrap; gap: 13px; }.fs-legend span { display: flex; align-items: center; gap: 6px; color: #64748b; font-size: 7px; }.fs-legend i { width: 13px; height: 13px; border-radius: 4px; }
.fs-rows { list-style: none; margin: 0; padding: 9px 16px 16px; display: grid; gap: 10px; }.fs-rows li { min-height: 30px; display: grid; grid-template-columns: 21px 66px minmax(0,1fr) 28px; align-items: center; gap: 7px; transition: opacity .22s, background .22s; }.fs-rows li > em { color: #64748b; font-size: 9px; font-style: normal; text-align: center; }.fs-rows li > strong { color: #334155; font-size: 8px; }.fs-rows li > b { color: #64748b; font-size: 8px; text-align: right; }.fs-deals { min-width: 0; display: flex; flex-wrap: wrap; gap: 3px; }.fs-group { display: flex; gap: 3px; }
.fs-deal { width: 22px; height: 22px; padding: 0; position: relative; flex: 0 0 auto; border: 0; border-radius: 6px; cursor: default; transition: width .22s var(--ease), margin .22s, opacity .18s, transform .18s var(--ease), filter .18s; }.fs-deal.split { width: 11px; }.fs-group:has(.fs-deal:not(.filtered):nth-child(2)) .fs-deal { border-radius: 2px; }.fs-group:has(.fs-deal:not(.filtered):nth-child(2)) .fs-deal:first-child { border-radius: 6px 2px 2px 6px; }.fs-group:has(.fs-deal:not(.filtered):nth-child(2)) .fs-deal:last-child { border-radius: 2px 6px 6px 2px; }.fs-deal.spiff::before { content: ""; position: absolute; right: 2px; bottom: 2px; width: 5px; height: 5px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 4px rgba(74,222,128,.65); }.fs-deal.today { box-shadow: 0 0 0 2px color-mix(in srgb,currentColor 45%,transparent),0 0 8px currentColor; }.fs-deal:hover,.fs-deal:focus-visible { z-index: 20; outline: 3px solid white; box-shadow: 0 0 0 5px rgba(99,102,241,.22); transform: translateY(-4px) scale(1.08); }
.fs-deal::after { content: attr(data-customer) "\A" attr(data-category) "\A" attr(data-note); position: absolute; z-index: 50; left: 50%; bottom: calc(100% + 8px); min-width: 142px; padding: 10px 11px; border: 1px solid #e2e8f0; border-radius: 12px; color: #64748b; background: white; box-shadow: 0 12px 28px rgba(15,23,42,.15); font-size: 8px; font-weight: 550; line-height: 1.55; text-align: left; white-space: pre-line; opacity: 0; pointer-events: none; transform: translate(-50%,6px); transition: opacity .16s,transform .16s var(--ease); }.fs-deal:hover::after,.fs-deal:focus-visible::after { opacity: 1; transform: translate(-50%,0); }.fs-deal.filtered { width: 0; margin-left: -3px; opacity: 0; pointer-events: none; }
.fs-deal.honda.today { box-shadow: 0 0 0 2px rgba(59,130,246,.45),0 0 8px rgba(59,130,246,.55); }.fs-deal.acura.today { box-shadow: 0 0 0 2px rgba(139,92,246,.45),0 0 8px rgba(139,92,246,.55); }.fs-deal.used.today { box-shadow: 0 0 0 2px rgba(244,114,182,.45),0 0 8px rgba(244,114,182,.55); }.fs-deal.purchase.today { box-shadow: 0 0 0 2px rgba(245,158,11,.45),0 0 8px rgba(245,158,11,.55); }
.fs-board-note { margin: 0; padding: 11px 16px 14px; border-top: 1px solid #f1f5f9; color: #94a3b8; font-size: 7px; line-height: 1.45; }

.ops-workspace { align-self: center; margin: 48px 44px 48px 0; min-height: 600px; overflow: hidden; border: 1px solid #dfe3e8; border-radius: 20px; color: #0f172a; background: #f8fafc; box-shadow: 0 28px 65px rgba(0,0,0,.24); }
.ops-header { height: 69px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e2e8f0; background: white; }.ops-header > div:first-child { display: grid; gap: 3px; }.ops-header span,.ops-overview-grid header span,.ops-priority > div:nth-child(2) > span { color: #94a3b8; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }.ops-header h4 { margin: 0; font-size: 16px; }.ops-sync { display: flex; align-items: center; gap: 7px; color: #64748b; font-size: 7px; }.ops-sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(16,185,129,.1); }
.ops-priority { margin: 18px; padding: 15px; display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; border: 1px solid #fecdd3; border-radius: 13px; background: #fff1f2; }.priority-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--red); font-weight: 800; }.ops-priority > div:nth-child(2) { display: grid; gap: 3px; }.ops-priority strong { color: #881337; font-size: 10px; }.ops-priority p { margin: 0; color: #9f1239; font-size: 7px; }.ops-priority button,.ops-detail button { min-height: 32px; padding: 0 11px; border: 0; border-radius: 8px; color: white; background: #e11d48; font-size: 7px; font-weight: 700; cursor: pointer; }.ops-priority button span { margin-left: 6px; }.ops-detail { margin: -9px 18px 18px; padding: 13px 15px; display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 10px; align-items: center; border: 1px solid #e2e8f0; border-radius: 11px; background: white; animation: fade-up .3s var(--ease); }.ops-detail[hidden] { display: none; }.ops-detail span { color: #94a3b8; font-size: 7px; }.ops-detail strong { font-size: 8px; }.ops-detail button { background: var(--indigo); }
.ops-overview-grid { padding: 0 18px 18px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 11px; }.ops-overview-grid article { min-width: 0; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 13px; background: white; }.ops-overview-grid article > header { padding: 13px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; border-bottom: 1px solid #f1f5f9; }.ops-overview-grid header > div { display: grid; gap: 3px; }.ops-overview-grid header strong { font-size: 10px; }.ops-overview-grid header > b { color: #64748b; font-size: 7px; }
.ops-loaners > div { padding: 4px 12px 9px; }.ops-loaners p { margin: 0; padding: 8px 0; display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: center; border-bottom: 1px solid #f1f5f9; }.ops-loaners p:last-child { border: 0; }.ops-loaners p > i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }.ops-loaners p > i.overdue { background: var(--red); }.ops-loaners p span { display: grid; gap: 2px; }.ops-loaners p strong { font-size: 8px; }.ops-loaners p small { color: #94a3b8; font-size: 6px; }.ops-loaners p > b { color: #64748b; font-size: 6px; }.ops-loaners p:first-child > b { color: #e11d48; }
.ops-lot img { width: 100%; height: 132px; object-fit: cover; }.ops-lot > div { padding: 7px 12px; display: flex; gap: 10px; }.ops-lot > div span { display: flex; align-items: center; gap: 4px; color: #64748b; font-size: 6px; }.ops-lot > div i { width: 6px; height: 6px; border-radius: 2px; background: #06b6d4; }.ops-lot > div span:nth-child(2) i { background: #f97316; }.ops-lot > div span:nth-child(3) i { background: var(--purple); }
.ops-team,.ops-spiff { padding-bottom: 12px; }.ops-avatars { padding: 14px 13px 10px; display: flex; }.ops-avatars i,.ops-avatars span { width: 31px; height: 31px; margin-right: -5px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; color: #4338ca; background: #e0e7ff; font-size: 6px; font-weight: 800; font-style: normal; }.ops-avatars span { color: #64748b; background: #f1f5f9; }.ops-team > p { margin: 2px 13px 0; color: #64748b; font-size: 7px; }.ops-team > p strong { color: #0f172a; }.ops-spiff { border-color:#c7d2fe!important; background:linear-gradient(145deg,#fff 45%,#eef2ff)!important; }.ops-spiff header > b { color:#4f46e5; }.spiff-achievement { margin:11px 13px 8px; display:grid; grid-template-columns:30px 1fr; gap:9px; align-items:center; }.spiff-achievement > i { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:white; background:var(--green); font-size:12px; font-style:normal; box-shadow:0 6px 14px rgba(16,185,129,.2); }.spiff-achievement > span { display:grid; gap:2px; }.spiff-achievement strong { font-size:8px; }.spiff-achievement small { color:#64748b; font-size:6px; }.spiff-actions { margin:0 13px; display:grid; grid-template-columns:.72fr 1.28fr; gap:6px; }.spiff-actions button { min-height:28px; padding:0 7px; border:1px solid #e2e8f0; border-radius:7px; color:#64748b; background:white; font-size:6px; font-weight:760; cursor:pointer; }.spiff-actions .spiff-approve { color:white; border-color:var(--indigo); background:var(--indigo); }.spiff-actions .spiff-deny:hover { color:#be123c; border-color:#fecdd3; background:#fff1f2; }.spiff-actions .spiff-approve:hover { background:#4f46e5; }

.component-panel .semantic-preview { max-width: 430px; min-height: 360px; margin: 42px auto 0; padding: 25px; display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-radius: 18px; color: #0f172a; background: white; box-shadow: 0 30px 70px rgba(0,0,0,.25); transition: border-color .25s; }
.semantic-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: white; background: var(--sample-tone,var(--indigo)); font-size: 20px; transition: background .25s; }.semantic-eyebrow { margin: 22px 0 0!important; color: #94a3b8!important; font-family: "SFMono-Regular",Consolas,monospace; font-size: 7px!important; letter-spacing: .09em; text-transform: uppercase; }.semantic-title { margin: 7px 0 0; font-size: 25px; letter-spacing: -.04em; }.semantic-description { margin: 10px 0 20px!important; color: #64748b!important; font-size: 10px!important; line-height: 1.55; }.semantic-preview dl { margin: 0 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.semantic-preview dl div { padding: 10px; border-radius: 9px; background: #f8fafc; }.semantic-preview dt { color: #94a3b8; font-size: 6px; text-transform: uppercase; letter-spacing: .08em; }.semantic-preview dd { margin: 4px 0 0; color: #334155; font-size: 8px; font-weight: 700; }.component-panel .semantic-cta { width: 100%; height: 42px; margin-top: auto; border: 0; border-radius: 9px; color: white; background: var(--sample-tone,var(--indigo)); font-size: 9px; font-weight: 720; transition: background .25s,transform .2s; cursor: pointer; }.component-panel .semantic-cta:hover { transform: translateY(-2px); }.component-panel .semantic-cta span { float: right; margin-right: 8px; }

@media (max-width:1050px) {
  .device-scroll-track { height:auto; margin-top:90px; }
  .device-scroll-track .device-experience { height:auto; min-height:720px; margin-top:0; position:relative; top:auto; }
  .device-scroll-hint { display:none; }
  .fs-board,.ops-workspace { margin: 0 44px 60px; }
  .strategy-loop .strategy-card:hover,.strategy-loop .strategy-card:focus-visible,.strategy-loop .strategy-card.expanded { min-height: 500px; }
}

@media (max-width:720px) {
  .device-scroll-track { margin-top:55px; }
  .device-scroll-track .device-experience { min-height:0; margin-top:0; }
  .dashboard-callout { display:none; }
  .device-stage.render-stage { min-height: 0; padding: 18px 14px 30px; }.access-render { height: auto; gap: 12px; }.access-render img { border-radius: 14px; }.access-render figcaption { flex-direction: column; align-items: flex-start; gap: 5px; }.access-render figcaption span { text-align: left; }
  .strategy-loop .strategy-card,.strategy-loop .strategy-card:hover,.strategy-loop .strategy-card:focus-visible,.strategy-loop .strategy-card.expanded { min-height: auto; transform: none; }.strategy-loop .strategy-card h3 { margin-top: 42px; }.strategy-loop .strategy-card > p { max-width: none; }.strategy-more { grid-template-rows: 0fr; }.strategy-card.expanded .strategy-more,.strategy-card:focus-visible .strategy-more { grid-template-rows: 1fr; opacity: 1; }.strategy-card:hover:not(.expanded):not(:focus-visible) .strategy-more { grid-template-rows: 0fr; opacity: 0; }
  .fs-board,.ops-workspace { margin: 0 12px 20px; }.fs-toolbar { align-items: center; }.fs-filter { padding-inline: 8px; }.fs-legend { gap: 8px; }.fs-legend span { font-size: 0; }.fs-legend i { width: 12px; height: 12px; }.fs-rows { padding-inline: 10px; gap: 12px; }.fs-rows li { grid-template-columns: 20px 57px minmax(0,1fr) 22px; gap: 4px; }.fs-deal { width: 17px; height: 17px; }.fs-deal.split { width: 8px; }.fs-deal::after { left: 0; transform: translate(0,6px); }.fs-deal:hover::after,.fs-deal:focus-visible::after { transform: translate(0,0); }
  .ops-workspace { min-height: auto; }.ops-priority { grid-template-columns: 34px 1fr; }.ops-priority button { grid-column: 2; width: max-content; }.ops-detail { grid-template-columns: 1fr 1fr; }.ops-detail button { grid-column: 1/-1; }.ops-overview-grid { grid-template-columns: 1fr; }.ops-lot img { height: 180px; }
  .component-panel .semantic-preview { padding: 20px; min-height: 340px; }
}

/* Audience cards reveal the context behind each access mode. */
.role-stack .role-card { grid-template-columns: 64px minmax(0,1fr) auto; gap: 18px; padding: 25px 0; position: relative; outline: none; cursor: pointer; transition: margin .32s var(--ease), padding .32s var(--ease), background .32s, border-radius .32s, box-shadow .32s; }
.role-stack .role-card:hover,.role-stack .role-card:focus-visible,.role-stack .role-card.expanded { margin-inline: -18px; padding: 30px 18px; border-color: transparent; border-radius: 18px; background: #191a20; box-shadow: 0 20px 42px rgba(0,0,0,.18); }
.role-ident { display: grid; justify-items: start; gap: 13px; }
.role-ident > span { color: #6f717d; font-family: "SFMono-Regular",Consolas,monospace; font-size: 9px; }
.role-ident > i { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #393a43; border-radius: 12px; color: #aaa6ff; background: #202129; font-style: normal; transition: color .25s, background .25s, border-color .25s, transform .3s var(--ease); }
.role-ident svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.role-card:hover .role-ident > i,.role-card:focus-visible .role-ident > i,.role-card.expanded .role-ident > i { color: white; border-color: #6366f1; background: #6366f1; transform: rotate(-4deg) scale(1.04); }
.role-content { min-width: 0; }
.role-content h3 { margin: 0 0 8px; font-size: 21px; }
.role-content > p { margin: 0; max-width: 430px; color: #989aa5; line-height: 1.55; font-size: 14px; }
.role-detail { max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: 0 22px; transition: max-height .42s var(--ease), margin .32s var(--ease), opacity .22s; }
.role-card:hover .role-detail,.role-card:focus-visible .role-detail,.role-card.expanded .role-detail { max-height: 190px; margin-top: 22px; opacity: 1; }
.role-detail > div { padding: 13px 0; border-top: 1px solid #30313a; display: grid; gap: 6px; }
.role-detail .role-uses { grid-column: 1 / -1; }
.role-detail span { color: #6f717d; font-family: "SFMono-Regular",Consolas,monospace; font-size: 7px; letter-spacing: .09em; text-transform: uppercase; }
.role-detail strong { color: #d7d8de; font-size: 11px; line-height: 1.45; font-weight: 600; }
.role-stack .role-card > b { align-self: start; padding: 7px 9px; border: 1px solid #3a3b43; border-radius: 99px; color: #a2a4ae; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }

@media (max-width:720px) {
  .role-stack .role-card { grid-template-columns: 52px minmax(0,1fr); padding: 24px 0; }
  .role-stack .role-card:hover,.role-stack .role-card:focus-visible,.role-stack .role-card.expanded { margin-inline: -12px; padding: 28px 12px; }
  .role-stack .role-card > b { grid-column: 2; width: max-content; }
  .role-detail { grid-template-columns: 1fr; }
  .role-detail .role-uses { grid-column: 1; }
  .role-card:hover:not(.expanded):not(:focus-visible) .role-detail { max-height: 0; margin-top: 0; opacity: 0; }
  .role-card.expanded .role-detail,.role-card:focus-visible .role-detail { max-height: 280px; margin-top: 22px; opacity: 1; }
}

/* The close proves live scale, then turns that scale into design principles. */
.network-section { padding-block:150px 110px; position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:minmax(0,.84fr) minmax(560px,1.16fr); grid-template-areas:"intro console" "brands brands" "note note"; gap:82px clamp(55px,7vw,105px); color:white; background:radial-gradient(circle at 76% 22%,rgba(99,102,241,.2),transparent 34%),#0b0c10; }
.network-section::before { content:"LIVE / NATIONWIDE"; position:absolute; z-index:-1; left:var(--gutter); top:72px; color:rgba(255,255,255,.025); font-size:clamp(82px,12vw,180px); font-weight:780; line-height:.8; letter-spacing:-.075em; white-space:nowrap; }
.network-section > * { width:100%; max-width:none; margin:0; }
.network-intro { grid-area:intro; align-self:center; }.network-intro .section-index { color:#777985; }.network-status { width:max-content; margin:32px 0 25px; padding:7px 10px; display:flex; align-items:center; gap:8px; border:1px solid #2f3140; border-radius:99px; color:#afb1bd; background:rgba(255,255,255,.035); font-family:"SFMono-Regular",Consolas,monospace; font-size:8px; letter-spacing:.06em; text-transform:uppercase; }.network-status i,.network-console header > b i { width:7px; height:7px; border-radius:50%; background:#f59e0b; box-shadow:0 0 0 5px rgba(245,158,11,.1); }.network-section[data-live-state="connected"] .network-status i { background:var(--green); box-shadow:0 0 0 5px rgba(16,185,129,.1); }.network-section[data-live-state="fallback"] .network-status i { background:#94a3b8; box-shadow:none; }
.network-intro h2 { max-width:650px; margin:0; font-size:clamp(54px,6vw,86px); font-weight:530; line-height:.93; letter-spacing:-.067em; }.network-intro h2 span { color:#8b88ff; }.network-intro > p:not(.section-index) { max-width:610px; margin:32px 0 0; color:#a6a8b2; font-size:16px; line-height:1.7; }.network-actions { margin-top:38px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }.network-actions .primary-action { color:#0b0c10; background:white; }.network-actions .primary-action:hover { color:white; background:var(--indigo); }.network-actions small { color:#6f717d; font-family:"SFMono-Regular",Consolas,monospace; font-size:8px; }
.network-console { grid-area:console; align-self:center; overflow:hidden; border:1px solid #30313b; border-radius:26px; background:linear-gradient(145deg,rgba(31,32,39,.98),rgba(17,18,24,.98)); box-shadow:0 42px 100px rgba(0,0,0,.34); }.network-console > header { min-height:76px; padding:0 23px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid #30313b; }.network-console header > div { display:grid; gap:5px; }.network-console header span { color:#71737f; font-family:"SFMono-Regular",Consolas,monospace; font-size:7px; letter-spacing:.09em; text-transform:uppercase; }.network-console header strong { font-size:15px; }.network-console header > b { padding:7px 9px; display:flex; align-items:center; gap:8px; border:1px solid rgba(16,185,129,.22); border-radius:99px; color:#86efac; background:rgba(16,185,129,.08); font-family:"SFMono-Regular",Consolas,monospace; font-size:7px; letter-spacing:.08em; text-transform:uppercase; }.network-console header > b i { width:6px; height:6px; background:var(--green); box-shadow:0 0 0 4px rgba(16,185,129,.1); animation:network-pulse 1.8s ease-in-out infinite; }
.network-metrics { display:grid; grid-template-columns:1fr 1fr; }.network-metrics article { min-height:195px; padding:24px; display:flex; flex-direction:column; border-right:1px solid #30313b; border-bottom:1px solid #30313b; }.network-metrics article:nth-child(2n) { border-right:0; }.network-metrics span { color:#777985; font-family:"SFMono-Regular",Consolas,monospace; font-size:8px; letter-spacing:.09em; text-transform:uppercase; }.network-metrics strong { margin-top:auto; font-size:clamp(34px,4vw,54px); font-weight:600; letter-spacing:-.055em; }.network-metrics p { margin:6px 0 0; color:#81838e; font-size:9px; }
.brand-proof { grid-area:brands; min-width:0; padding-top:32px; display:grid; grid-template-columns:290px minmax(0,1fr); gap:45px; align-items:center; border-top:1px solid #292a32; }.brand-proof > div:first-child { display:grid; gap:7px; }.brand-proof > div:first-child span { color:#6f717c; font-family:"SFMono-Regular",Consolas,monospace; font-size:8px; letter-spacing:.09em; text-transform:uppercase; }.brand-proof > div:first-child strong { max-width:260px; font-size:16px; line-height:1.4; }.brand-window { min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent); }.brand-track { width:max-content; display:flex; align-items:center; gap:13px; animation:brand-network-scroll 34s linear infinite; }.brand-track > span { color:#747681; font-size:10px; }.brand-item { width:155px; height:82px; padding:14px; flex:0 0 auto; display:grid; place-items:center; border:1px solid #292b35; border-radius:15px; background:#16171d; }.brand-item img { max-width:112px; max-height:43px; display:block; object-fit:contain; filter:grayscale(1) brightness(1.55); opacity:.72; }.brand-item span { color:#b0b2bb; font-size:9px; font-weight:650; }.network-section .source-note { grid-area:note; width:100%; max-width:none!important; margin:0!important; padding-top:18px; border-top:1px solid #292a32; color:#62646f; text-align:left; }
@keyframes network-pulse { 50% { opacity:.35; transform:scale(.78); } }
@keyframes brand-network-scroll { to { transform:translateX(calc(-50% - 6.5px)); } }

.scale-section { position:relative; display:grid; grid-template-columns:minmax(0,.88fr) minmax(560px,1.12fr); grid-template-areas:"heading lessons" "close close"; gap:95px clamp(60px,8vw,125px); background:#f1f1ed; }.scale-section > * { width:100%; max-width:none; margin:0; }.scale-heading { grid-area:heading; }.scale-heading .section-index { color:#777980; }.scale-heading h2 { max-width:600px; margin:26px 0 0; font-size:clamp(53px,6vw,88px); font-weight:520; line-height:.93; letter-spacing:-.067em; }.scale-heading > p:last-child { max-width:540px; margin:32px 0 0; color:#55575e; font-size:17px; line-height:1.72; }.scale-lessons { grid-area:lessons; border-top:1px solid #cacbc7; }.scale-lessons article { min-height:176px; padding:27px 0; display:grid; grid-template-columns:48px 1fr; gap:20px; border-bottom:1px solid #cacbc7; }.scale-lessons article > span { color:#777980; font-family:"SFMono-Regular",Consolas,monospace; font-size:9px; }.scale-lessons article > div { display:grid; align-content:start; gap:12px; }.scale-lessons h3 { margin:0; font-size:27px; font-weight:600; letter-spacing:-.035em; }.scale-lessons p { max-width:560px; margin:0; color:#5e6067; font-size:14px; line-height:1.65; }.scale-close { grid-area:close; padding:42px 0 0; display:grid; grid-template-columns:180px minmax(0,1fr) auto; gap:35px; align-items:end; border-top:1px solid #cacbc7; }.scale-close p { margin:0; color:#777980; font-family:"SFMono-Regular",Consolas,monospace; font-size:8px; letter-spacing:.09em; text-transform:uppercase; }.scale-close > strong { max-width:820px; font-size:clamp(25px,3.1vw,44px); font-weight:540; line-height:1.12; letter-spacing:-.045em; }.scale-close a { padding-bottom:5px; color:#4f46e5; font-size:11px; font-weight:700; text-decoration:none; white-space:nowrap; }.scale-close a span { margin-left:8px; transition:transform .25s; }.scale-close a:hover span { display:inline-block; transform:translate(4px,-4px); }

@media (max-width:1050px) {
  .network-section,.scale-section { grid-template-columns:1fr; }
  .network-section { grid-template-areas:"intro" "console" "brands" "note"; }.network-intro { max-width:790px; }.network-console { max-width:790px; }.brand-proof { grid-template-columns:240px minmax(0,1fr); }
  .scale-section { grid-template-areas:"heading" "lessons" "close"; }.scale-heading { max-width:780px; }.scale-lessons { max-width:780px; }.scale-close { grid-template-columns:150px 1fr; }.scale-close a { grid-column:2; }
}

@media (max-width:720px) {
  .network-section { padding-block:100px 75px; gap:58px; }.network-section::before { top:45px; font-size:69px; }.network-intro h2 { font-size:52px; }.network-intro > p:not(.section-index) { font-size:15px; }.network-actions { align-items:flex-start; flex-direction:column; }.network-console { border-radius:21px; }.network-console > header { min-height:68px; padding-inline:17px; }.network-metrics article { min-height:145px; padding:17px; }.network-metrics strong { font-size:31px; }.network-metrics p { font-size:7px; line-height:1.45; }.brand-proof { grid-template-columns:1fr; gap:22px; }.brand-proof > div:first-child strong { max-width:none; }.brand-window { margin-inline:-20px; }.brand-item { width:132px; height:70px; }.network-section .source-note { line-height:1.55; }
  .scale-section { gap:58px; }.scale-heading h2 { font-size:50px; }.scale-heading > p:last-child { font-size:15px; }.scale-lessons article { min-height:0; grid-template-columns:34px 1fr; gap:12px; }.scale-lessons h3 { font-size:23px; }.scale-close { padding-top:30px; grid-template-columns:1fr; gap:18px; }.scale-close a { grid-column:1; }
}

.brand-item { border-color:#dedfdd; background:#f4f4f1; }
.brand-item img { filter:grayscale(1); opacity:.66; }
.brand-item span { color:#34353c; }