:root {
  --olive: #6e7b4d;
  --olive-dark: #56613b;
  --charcoal: #1f2833;
  --wood: #b36a2e;
  --tan: #d5b48c;
  --cream: #f7f2ea;
  --cream-light: #fffaf4;
  --bark: #6c4a2f;
  --line: rgba(31, 40, 51, 0.12);
  --muted: rgba(31, 40, 51, 0.65);
  --display: "Nunito", sans-serif;
  --body: "DM Sans", sans-serif;
  --display-xl: clamp(3.65rem, 5.25vw, 5.75rem);
  --display-lg: clamp(2.65rem, 3.8vw, 4rem);
  --section-space: clamp(4rem, 5vw, 5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; color: var(--charcoal); background: var(--cream); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .32; background-image: radial-gradient(rgba(108,74,47,.12) .55px, transparent .55px); background-size: 7px 7px; }
a { color: inherit; }
img, canvas { display: block; max-width: 100%; }
button, input { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { margin-bottom: 0; font-family: var(--display); line-height: 1; letter-spacing: -.04em; }
.section, .site-header, footer { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 100; padding: .7rem 1rem; border-radius: .6rem; color: white; background: var(--charcoal); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.site-header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .72rem; text-decoration: none; }
.brand-mark { width: 4rem; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: #fffaf4; box-shadow: 0 5px 18px rgba(67,47,32,.11); }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-divider { width: 1px; height: 3.5rem; background: var(--olive); }
.brand-copy, .brand-name, .brand-name > span { display: block; }
.brand-name { font-family: var(--display); font-size: 1.56rem; font-weight: 900; line-height: .78; }
.brand-x { color: var(--olive); }
.brand-tagline { display: block; margin-top: .2rem; margin-left: .1rem; color: var(--olive-dark); font-size: .57rem; font-weight: 700; }
nav { display: flex; align-items: center; gap: 1.65rem; font-size: .86rem; font-weight: 600; }
nav a { text-decoration: none; }
nav > a:not(.nav-cta) { color: rgba(31,40,51,.69); }
nav > a:not(.nav-cta):hover { color: var(--charcoal); }
.nav-cta { padding: .72rem 1rem; border-radius: 999px; color: var(--cream); background: var(--charcoal); }

.eyebrow { margin: 0 0 1.2rem; color: var(--olive-dark); font-size: .72rem; font-weight: 800; letter-spacing: .115em; text-transform: uppercase; }
.eyebrow.light { color: #cbd4ae; }
.status-dot { display: inline-block; width: .48rem; aspect-ratio: 1; margin-right: .5rem; border-radius: 50%; background: var(--olive); box-shadow: 0 0 0 4px rgba(110,123,77,.12); }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; padding: .85rem 1.15rem; border-radius: 999px; text-decoration: none; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button-primary { color: var(--cream); background: var(--charcoal); box-shadow: 0 14px 30px rgba(31,40,51,.18); }
.button-primary:hover { background: #111820; }
.button-light { color: var(--charcoal); background: var(--cream); box-shadow: 0 14px 30px rgba(25,31,18,.24); }
.button-light:hover { background: white; }
.text-link { padding: .8rem .2rem; color: var(--charcoal); font-weight: 700; text-underline-offset: .28rem; }
a:focus-visible { outline: 3px solid var(--wood); outline-offset: 4px; }

.hero { min-height: 680px; display: grid; grid-template-columns: 1fr .92fr; align-items: center; gap: 3rem; padding: 2rem 0 3rem; }
.hero-copy { position: relative; z-index: 2; }
h1 { font-size: var(--display-xl); }
.hero-promise { max-width: 620px; margin: 1.15rem 0 0; font-family: var(--display); font-size: clamp(1.08rem, 1.55vw, 1.35rem); font-weight: 800; line-height: 1.35; letter-spacing: -.02em; }
.hero-promise strong { color: var(--olive-dark); }
.hero-lede { max-width: 590px; margin: .85rem 0 0; color: var(--muted); font-size: 1.06rem; line-height: 1.58; }
.hero-actions { display: flex; align-items: center; gap: 1.15rem; margin-top: 1.7rem; }
.hero-art { min-width: 0; min-height: 560px; position: relative; display: grid; place-items: center; isolation: isolate; }
.team-window { min-height: 420px; display: grid; grid-template-columns: 145px 1fr; overflow: hidden; border: 1px solid rgba(31,40,51,.14); border-radius: 1.55rem; background: rgba(255,250,244,.88); box-shadow: 0 30px 72px rgba(75,51,32,.14); backdrop-filter: blur(16px); }
.team-rail { padding: 1.3rem .75rem; border-right: 1px solid var(--line); background: rgba(213,180,140,.18); }
.team-rail > p { margin: 0 .55rem 1.15rem; color: rgba(31,40,51,.48); font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.teammate { display: flex; align-items: center; gap: .62rem; padding: .66rem .55rem; border-radius: .85rem; }
.teammate + .teammate { margin-top: .25rem; }
.teammate.is-active { background: var(--cream-light); box-shadow: 0 5px 18px rgba(67,47,32,.08); }
.avatar { flex: 0 0 auto; width: 32px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: white; font-family: var(--display); font-size: .75rem; font-weight: 900; }
.avatar-kit { background: #7e623f; }
.avatar-sage { background: var(--olive); }
.avatar-ellis { background: #8d6575; }
.teammate strong, .teammate small, .chat-topbar strong, .chat-topbar small { display: block; }
.teammate strong { font-size: .78rem; }
.teammate small { margin-top: .1rem; color: rgba(31,40,51,.5); font-size: .62rem; }
.team-chat { min-width: 0; display: grid; grid-template-rows: 64px 1fr 64px; }
.chat-topbar { display: flex; align-items: center; gap: .7rem; padding: 0 1rem; border-bottom: 1px solid var(--line); }
.chat-topbar strong { font-size: .82rem; }
.chat-topbar small { margin-top: .12rem; color: rgba(31,40,51,.52); font-size: .65rem; }
.chat-topbar i { width: 7px; aspect-ratio: 1; margin-left: auto; border-radius: 50%; background: var(--olive); box-shadow: 0 0 0 4px rgba(110,123,77,.12); }
.chat-thread { padding: 2rem 1.15rem 1rem; }
.chat-bubble { max-width: 315px; margin-bottom: 0; padding: .82rem .9rem; border-radius: 1rem; font-size: .78rem; line-height: 1.5; }
.user-bubble { margin-left: auto; border-bottom-right-radius: .3rem; color: white; background: var(--charcoal); }
.teammate-reply { display: flex; align-items: flex-start; gap: .65rem; margin-top: 1.25rem; }
.team-bubble { border-bottom-left-radius: .3rem; background: white; box-shadow: 0 7px 22px rgba(67,47,32,.08); }
.context-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .65rem; }
.context-chips span { padding: .34rem .48rem; border: 1px solid rgba(110,123,77,.21); border-radius: .5rem; color: var(--olive-dark); background: rgba(110,123,77,.07); font-size: .58rem; font-weight: 700; }
.chat-composer { align-self: center; min-height: 42px; display: flex; align-items: center; gap: 1rem; margin: 0 1rem; padding: 0 .65rem 0 .85rem; border: 1px solid var(--line); border-radius: .8rem; color: rgba(31,40,51,.38); background: rgba(255,255,255,.55); font-size: .7rem; }
.chat-composer b { width: 26px; aspect-ratio: 1; display: grid; place-items: center; margin-left: auto; border-radius: 50%; color: white; background: var(--olive); }
.patch-frame { position: relative; z-index: 2; width: min(100%, 500px); aspect-ratio: .94; overflow: hidden; border: 10px solid var(--bark); border-radius: 48% 52% 46% 54% / 49% 46% 54% 51%; background: repeating-radial-gradient(ellipse at 47% 48%, transparent 0 43px, rgba(108,74,47,.13) 44px 46px, transparent 47px 72px), radial-gradient(ellipse at 47% 48%, #f2d6aa 0, #dfb77f 66%, #c58a4e 100%); box-shadow: inset 0 0 0 3px rgba(255,250,244,.3), inset 0 0 34px rgba(108,74,47,.2), 0 30px 70px rgba(67,47,32,.18), 0 0 0 8px rgba(179,106,46,.14); }
.patch-frame::before { content:""; position:absolute; inset:7px; z-index:0; border:1px solid rgba(108,74,47,.19); border-radius:48% 52% 46% 54% / 49% 46% 54% 51%; box-shadow:inset 0 0 0 7px rgba(255,250,244,.045); }
.patch-frame::after { content:""; position:absolute; inset:auto 12% 4% 12%; height:8%; z-index:3; border-radius:50%; background:rgba(67,47,32,.14); filter:blur(12px); }
.patch-frame .patch-media { position:absolute; inset:0; z-index:2; display:grid; place-items:center; }
.patch-frame .patch-media img { width:88%; height:100%; object-fit:contain; }
.orbit { position:absolute; z-index:-1; aspect-ratio:1; border:1px solid rgba(110,123,77,.2); border-radius:50%; }
.orbit-one { width:570px; }
.orbit-two { width:650px; }
.piece { position:absolute; z-index:4; display:flex; align-items:center; gap:.45rem; padding:.75rem .85rem; border:1px solid rgba(31,40,51,.1); border-radius:.85rem; color:rgba(31,40,51,.78); background:rgba(255,250,244,.92); box-shadow:0 12px 30px rgba(67,47,32,.11); font-size:.72rem; font-weight:800; backdrop-filter:blur(10px); transform:translate(-50%,-50%); }
.piece span { width:11px; aspect-ratio:1; border:1.5px solid var(--olive); border-radius:3px; box-shadow:inset 0 0 0 2px rgba(110,123,77,.1); }
.piece-goal { left:calc(50% - 200px); top:calc(50% - 256px); }
.piece-files { left:calc(50% + 225px); top:calc(50% - 175px); }
.piece-settings { left:calc(50% + 310px); top:calc(50% + 36px); }
.piece-preferences { left:calc(50% - 200px); top:calc(50% + 256px); }
.piece-tools { left:calc(50% - 250px); top:50%; }
.patch-caption { position:absolute; z-index:5; right:calc(3% + -42px); bottom:calc(5% + 27px); min-width:176px; padding:.72rem .85rem; border:1px solid rgba(255,250,244,.13); border-radius:.9rem; color:white; background:var(--bark); box-shadow:0 13px 30px rgba(67,47,32,.24); transform:rotate(-1.5deg); }
.patch-caption span, .patch-caption strong { display:block; }
.patch-caption span { color:#e8d4b9; font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.patch-caption strong { margin-top:.25rem; font-family:var(--display); font-size:.92rem; }

.problem { min-height: 610px; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 4.5rem; padding: var(--section-space) 0; }
h2 { font-size: var(--display-lg); }
.problem-copy > p:not(.eyebrow):not(.problem-callout) { max-width: 510px; margin: 1.25rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.62; }
.problem-callout { max-width: 510px; margin: 1.45rem 0 0; padding-left: 1rem; border-left: 3px solid var(--olive); font-family: var(--display); font-size: 1.05rem; font-weight: 800; line-height: 1.35; }
.sprawl-board { min-height: 430px; position: relative; }
.sprawl-card { position: absolute; width: 225px; min-height: 112px; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--cream-light); box-shadow: 0 15px 36px rgba(67,47,32,.11); }
.sprawl-card span, .sprawl-card strong, .sprawl-card small { display: block; }
.sprawl-card span { color: var(--olive-dark); font-size: .61rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sprawl-card strong { margin-top: .55rem; font-size: .84rem; }
.sprawl-card small { margin-top: .4rem; color: rgba(31,40,51,.48); font-size: .67rem; }
.card-files { left: 3%; top: 5%; transform: rotate(-3deg); }
.card-thread { right: 1%; top: 17%; transform: rotate(2deg); }
.card-draft { left: 0; bottom: 12%; transform: rotate(2deg); }
.card-task { right: 8%; bottom: 2%; transform: rotate(-2deg); }
.sprawl-center { position:absolute; left:50%; top:50%; width:210px; min-height:98px; display:flex; align-items:center; gap:.8rem; padding:.95rem; border:1px solid rgba(31,40,51,.06); border-radius:1.15rem; color:var(--cream); background:var(--charcoal); box-shadow:0 18px 42px rgba(31,40,51,.2); transform:translate(-50%,-50%) rotate(-1deg); }
.sprawl-center > span { width:44px; aspect-ratio:1; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:var(--charcoal); background:#cbd4ae; font-family:var(--display); font-size:.68rem; font-weight:900; }
.sprawl-center small, .sprawl-center strong { display:block; }
.sprawl-center small { color:#cbd4ae; font-size:.56rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.sprawl-center strong { margin-top:.28rem; font-family:var(--display); font-size:.82rem; line-height:1.2; }
.sprawl-line { position: absolute; left: 50%; top: 50%; width: 185px; height: 1px; border-top: 1px dashed rgba(108,74,47,.26); transform-origin: left; }
.line-one { transform: rotate(-141deg); }.line-two { transform: rotate(-36deg); }.line-three { transform: rotate(42deg); }.line-four { transform: rotate(141deg); }

.teammate-bridge { color: var(--cream); background: var(--charcoal); }
.bridge-inner { padding: var(--section-space) 0; }
.bridge-inner h2 { max-width: none; }
.bridge-statement { max-width: none; margin: 1.25rem 0 0; color: rgba(247,242,234,.7); font-family: var(--display); font-size: clamp(1.55rem, 2.45vw, 2.2rem); font-weight: 800; line-height: 1.22; }
.bridge-statement em { color: #cbd4ae; font-style: normal; }
.bridge-proof { display:grid; grid-template-columns:.85fr 1.15fr; gap:1.2rem; margin-top:3rem; }
.teammate-roster { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; }
.roster-card { min-height:158px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1rem .7rem; border:1px solid rgba(247,242,234,.1); border-radius:1.2rem; color:rgba(247,242,234,.72); background:rgba(247,242,234,.04); text-align:center; }
.roster-card.is-active { border-color:rgba(203,212,174,.42); background:rgba(110,123,77,.18); box-shadow:inset 0 0 0 1px rgba(203,212,174,.08); }
.roster-card .avatar { width:54px; font-size:1rem; box-shadow:0 0 0 6px rgba(247,242,234,.05); }
.roster-card > span:nth-child(2) { margin-top:.8rem; }
.roster-card strong, .roster-card small { display:block; }
.roster-card strong { color:white; font-family:var(--display); font-size:.9rem; }
.roster-card small { margin-top:.16rem; font-size:.62rem; }
.roster-card i { position:absolute; right:.55rem; top:.55rem; padding:.26rem .43rem; border-radius:999px; color:var(--charcoal); background:#cbd4ae; font-size:.52rem; font-style:normal; font-weight:900; text-transform:uppercase; }
.bridge-message { padding:1.45rem; border:1px solid rgba(247,242,234,.12); border-radius:1.3rem; background:rgba(247,242,234,.055); }
.bridge-message-head { display:flex; align-items:center; gap:.8rem; }
.bridge-message-head .avatar { width:46px; }
.bridge-message-head strong, .bridge-message-head small { display:block; }
.bridge-message-head strong { color:white; font-family:var(--display); }
.bridge-message-head small { margin-top:.12rem; color:#cbd4ae; font-size:.65rem; }
.bridge-message > p { margin:1.15rem 0 0; color:rgba(247,242,234,.76); font-size:.96rem; line-height:1.58; }
.bridge-gain { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.15rem; }
.bridge-gain span { display:flex; align-items:center; gap:.42rem; padding:.48rem .58rem; border:1px solid rgba(203,212,174,.16); border-radius:.55rem; color:rgba(247,242,234,.7); background:rgba(110,123,77,.1); font-size:.66rem; font-weight:700; }
.bridge-gain span::before { content:"✓"; color:#cbd4ae; }
.bridge-guide { grid-template-columns:minmax(280px,.78fr) minmax(440px,1.22fr); align-items:stretch; gap:1.35rem; }
.bridge-patch-stage { min-height:390px; position:relative; overflow:hidden; border:1px solid rgba(247,242,234,.12); border-radius:1.45rem; background:radial-gradient(circle at 50% 46%,rgba(247,242,234,.11),transparent 54%),rgba(247,242,234,.045); }
.bridge-guide-ring { position:absolute; width:310px; aspect-ratio:1; left:50%; top:48%; border:1px solid rgba(203,212,174,.22); border-radius:50%; box-shadow:0 0 0 28px rgba(203,212,174,.035),0 0 0 62px rgba(203,212,174,.022); transform:translate(-50%,-50%); }
.bridge-patch-media { position:absolute; z-index:1; width:350px; height:350px; left:50%; top:44%; display:grid; place-items:center; transform:translate(-50%,-50%); }
.bridge-patch-media img { width:100%; height:100%; object-fit:contain; }
.bridge-patch-stage > p { position:absolute; z-index:3; right:2rem; bottom:2rem; min-width:100px; margin:0; padding:.75rem .9rem; border-radius:.8rem; color:var(--cream); background:var(--bark); box-shadow:0 12px 28px rgba(0,0,0,.2); transform:rotate(-1.5deg); }
.bridge-patch-stage > p small,.bridge-patch-stage > p strong{display:block}.bridge-patch-stage > p small{color:#dfcfbf;font-size:.55rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.bridge-patch-stage > p strong{margin-top:.25rem;font-family:var(--display);font-size:1rem}
.bridge-teammate-response { min-height:390px; display:grid; grid-template-rows:auto 1fr auto; gap:1.1rem; padding:1.3rem; border:1px solid rgba(247,242,234,.12); border-radius:1.45rem; background:rgba(247,242,234,.055); }
.bridge-teammate-head { display:flex; align-items:center; gap:1rem; }
.bridge-teammate-head > span:last-child { min-width:0; }
.bridge-teammate-head small,.bridge-teammate-head strong { display:block; }
.bridge-teammate-head small { color:#cbd4ae; font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.bridge-teammate-head strong { margin-top:.18rem; color:white; font-family:var(--display); font-size:1.15rem; }
.bridge-teammate-head i { position:absolute; right:1.3rem; top:1.3rem; display:flex; align-items:center; gap:.4rem; padding:.35rem .55rem; border:1px solid rgba(203,212,174,.24); border-radius:999px; color:#d6dda9; background:rgba(110,123,77,.12); font-size:.58rem; font-style:normal; font-weight:800; text-transform:uppercase; }
.bridge-teammate-head i::before { content:""; width:6px; aspect-ratio:1; border-radius:50%; background:#aebd7f; box-shadow:0 0 0 4px rgba(174,189,127,.1); }
.bridge-teammate-response { position:relative; }
.bridge-teammate-response blockquote { position:relative; align-self:center; margin:0; padding:1.4rem 1.45rem; border:1px solid rgba(247,242,234,.11); border-radius:1.1rem; background:rgba(31,40,51,.26); }
.bridge-teammate-response blockquote::before { content:""; position:absolute; left:1.6rem; top:-9px; width:16px; height:16px; border-left:1px solid rgba(247,242,234,.11); border-top:1px solid rgba(247,242,234,.11); background:var(--charcoal); transform:rotate(45deg); }
.bridge-teammate-response blockquote strong { position:relative; display:block; max-width:520px; color:white; font-family:var(--display); font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.18; }
.bridge-teammate-response .opening-quote { position:absolute; left:-.48em; }
.bridge-teammate-response blockquote p { max-width:520px; margin:.8rem 0 0; color:rgba(247,242,234,.68); font-size:.84rem; line-height:1.55; }
.bridge-teammate-knows { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.bridge-teammate-knows span { display:flex; align-items:center; gap:.45rem; min-width:0; padding:.7rem .75rem; border:1px solid rgba(203,212,174,.15); border-radius:.7rem; color:rgba(247,242,234,.72); background:rgba(110,123,77,.1); font-size:.64rem; font-weight:700; }
.bridge-teammate-knows span::before { content:"✓"; color:#cbd4ae; font-weight:900; }

.how { padding: var(--section-space) 0; }
.section-heading { max-width: 740px; }
.section-heading h2 span { color: var(--olive-dark); }
.section-heading > p:last-child { max-width: 570px; margin: 1.2rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:3rem; }
.how-story { display:grid; grid-template-rows:auto 1fr; gap:1rem; min-width:0; }
.context-flow-visual { display:grid; place-items:center; overflow:hidden; aspect-ratio:1; margin:0; border:1px solid var(--line); border-radius:1.25rem; background:#fcf6f1; box-shadow:0 18px 46px rgba(67,47,32,.08); }
.context-flow-visual img { display:block; width:95%; height:95%; margin:0; object-fit:contain; }
.how-card { position: relative; min-height: 190px; padding: 1.6rem; border: 1px solid var(--line); border-radius: 1.25rem; background: rgba(255,250,244,.74); box-shadow: 0 12px 30px rgba(67,47,32,.065); }
.step-number { position: absolute; right: 1.25rem; top: 1.25rem; color: rgba(31,40,51,.35); font-size: .67rem; font-weight: 800; }
.how-icon { height: 140px; position: relative; overflow: hidden; margin-bottom: 1.2rem; border-radius: .9rem; background: rgba(213,180,140,.16); }
.how-diagram { width:100%; height:100%; }
.diagram-panel { fill:rgba(255,250,244,.52); stroke:rgba(31,40,51,.06); }
.diagram-line { fill:none; stroke:rgba(31,40,51,.22); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.diagram-line.is-selected { stroke:var(--olive); stroke-width:3; }
.diagram-node, .source-node, .snippet-node { fill:white; stroke:rgba(31,40,51,.12); }
.diagram-node.is-root { fill:rgba(213,180,140,.28); }
.diagram-node.is-selected, .source-node.is-selected, .snippet-node.is-selected { fill:rgba(110,123,77,.18); stroke:rgba(110,123,77,.55); }
.diagram-dot { fill:var(--olive); }
.diagram-check { fill:none; stroke:white; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.diagram-hub { fill:rgba(110,123,77,.12); stroke:var(--olive); stroke-width:2; }
.diagram-hub-inner { fill:var(--olive); }
.diagram-arrow { fill:none; stroke:var(--olive); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.context-node { fill:white; stroke:rgba(31,40,51,.12); }
.context-line { fill:rgba(31,40,51,.16); }
.context-line.short { fill:rgba(110,123,77,.5); }
.how-card h3 { font-size: 1.4rem; }
.how-card > p { margin: .85rem 0 0; color: var(--muted); font-size: .87rem; line-height: 1.6; }
.map-icon i { position: absolute; left: 28px; width: 130px; height: 27px; border: 1px solid rgba(31,40,51,.12); border-radius: .45rem; background: white; box-shadow: 0 4px 12px rgba(67,47,32,.06); }
.map-icon i:nth-child(1){top:28px}.map-icon i:nth-child(2){top:70px;left:56px}.map-icon i:nth-child(3){top:112px;left:86px}
.map-icon b { position:absolute; left:42px; top:55px; width:1px; height:72px; background:var(--olive); box-shadow:28px 42px 0 var(--olive); }
.look-icon i { position:absolute; width:72px; aspect-ratio:1; left:50%; top:50%; border:7px solid var(--olive); border-radius:50%; transform:translate(-55%,-58%); }
.look-icon b { position:absolute; left:61%; top:62%; width:45px; height:8px; border-radius:99px; background:var(--olive); transform:rotate(43deg); }
.look-icon span { position:absolute; width:116px; height:44px; left:24px; top:28px; border:1px solid rgba(31,40,51,.13); border-radius:.6rem; background:white; }
.focus-icon i { position:absolute; width:115px; height:34px; left:50%; border-radius:.55rem; background:rgba(31,40,51,.1); transform:translateX(-50%); }
.focus-icon i:nth-child(1){top:25px}.focus-icon i:nth-child(2){top:69px;background:var(--olive)}.focus-icon i:nth-child(3){top:113px}
.focus-icon b { position:absolute; inset:57px 44px; border:1px solid rgba(110,123,77,.35); border-radius:.8rem; box-shadow:0 0 0 8px rgba(110,123,77,.07); }

.patch-section { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 4rem; padding: var(--section-space) 0; }
.patch-copy > p:not(.eyebrow) { max-width: 520px; margin: 1.4rem 0 0; color: var(--muted); line-height: 1.68; }
.setup-list { display: grid; gap: .45rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.setup-list li { display: flex; align-items: flex-start; gap: .85rem; padding: .75rem; border-radius: .9rem; }
.setup-list li > span { width: 27px; aspect-ratio: 1; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: white; background: var(--olive); font-size: .67rem; font-weight: 800; }
.setup-list strong, .setup-list small { display:block; }.setup-list strong{font-size:.85rem}.setup-list small{margin-top:.22rem;color:var(--muted);font-size:.74rem;line-height:1.4}
.setup-window { overflow:hidden; border:1px solid rgba(31,40,51,.14); border-radius:1.6rem; background:var(--cream-light); box-shadow:0 30px 74px rgba(67,47,32,.14); }
.setup-topbar { min-height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 1.1rem; border-bottom:1px solid var(--line); font-size:.72rem; font-weight:700; }
.setup-topbar small { color:var(--olive-dark); }
.setup-content { min-height:420px; display:grid; grid-template-columns:1fr 205px; }
.setup-form { padding:1.5rem; }
.setup-form label { display:block; padding:.8rem .9rem; border:1px solid var(--line); border-radius:.75rem; background:white; }
.setup-form label + label { margin-top:.65rem; }
.setup-form label span, .setup-form label strong { display:block; }.setup-form label span{color:rgba(31,40,51,.48);font-size:.62rem;font-weight:700}.setup-form label strong{margin-top:.3rem;font-size:.83rem}
.source-label { display:flex; justify-content:space-between; margin:1.2rem 0 .6rem; font-size:.68rem; font-weight:700; }.source-label small{color:rgba(31,40,51,.48)}
.source-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }.source-grid span{display:flex;align-items:center;justify-content:space-between;padding:.68rem;border:1px solid var(--line);border-radius:.65rem;background:white;font-size:.65rem;font-weight:600}.source-grid b{color:var(--olive)}
.ready-row { display:flex;align-items:center;gap:.7rem;margin-top:1.2rem;padding:.8rem;border-radius:.75rem;background:rgba(110,123,77,.1)}
.ready-row i { width:29px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;color:white;background:var(--olive);font-style:normal;font-size:.72rem}.ready-row strong,.ready-row small{display:block}.ready-row strong{font-size:.72rem}.ready-row small{margin-top:.18rem;color:var(--muted);font-size:.6rem}
.onboarding-patch { position:relative; overflow:hidden; border-left:1px solid var(--line); background:linear-gradient(180deg,rgba(110,123,77,.06),rgba(213,180,140,.16)); }
.patch-ring { position:absolute; width:175px;aspect-ratio:1;left:50%;top:38%;border:1px solid rgba(110,123,77,.25);border-radius:50%;box-shadow:0 0 0 20px rgba(110,123,77,.05);transform:translate(-50%,-50%)}
.onboarding-patch-media { position:absolute;z-index:1;width:215px;height:215px;left:50%;top:18%;display:grid;place-items:center;transform:translateX(-50%); }
.onboarding-patch-media img { width:86%;height:100%;object-fit:contain; }
.onboarding-patch p { position:absolute;z-index:2;left:1rem;right:1rem;bottom:5rem;margin:0;padding:.72rem;border:1px solid var(--line);border-radius:.75rem;background:rgba(255,250,244,.92);text-align:center;box-shadow:0 8px 22px rgba(67,47,32,.09)}
.onboarding-patch p strong,.onboarding-patch p span{display:block}.onboarding-patch p strong{font-family:var(--display);font-size:.82rem}.onboarding-patch p span{margin-top:.18rem;color:var(--muted);font-size:.62rem}

.use-cases { padding: var(--section-space) 0; border-top:1px solid var(--line); }
.routing-board { margin-top:3rem; padding:1.6rem; border:1px solid var(--line); border-radius:1.5rem; background:rgba(255,250,244,.62); box-shadow:0 18px 42px rgba(67,47,32,.07); }
.routing-spark { max-width:560px; display:flex; align-items:center; gap:1rem; margin-inline:auto; padding:1rem 1.15rem; border:1px solid rgba(179,106,46,.23); border-radius:1rem; background:var(--cream-light); box-shadow:0 8px 22px rgba(67,47,32,.07); }
.routing-spark small, .routing-spark strong, .routing-outcome small, .routing-outcome strong { display:block; }
.routing-spark small, .routing-outcome small { color:var(--olive-dark); font-size:.6rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.routing-spark strong { margin-top:.3rem; font-family:var(--display); font-size:1.05rem; line-height:1.25; }
.spark-symbol,.outcome-check { width:48px; aspect-ratio:1; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; font-size:1.2rem; }
.spark-symbol { color:var(--bark); background:rgba(179,106,46,.13); }
.outcome-check { color:white; background:var(--olive); }
.routing-label { position:relative; display:grid; place-items:center; height:76px; }
.routing-label::before { content:""; position:absolute; top:0; bottom:0; width:1px; background:rgba(31,40,51,.19); }
.routing-label span { position:relative; z-index:1; padding:.42rem .65rem; border:1px solid rgba(110,123,77,.22); border-radius:999px; color:var(--olive-dark); background:var(--cream); font-size:.58rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.routing-stage { max-width:900px; position:relative; margin-inline:auto; }
.route-lines { position:absolute; inset:0 0 auto; width:100%; height:130px; overflow:visible; }
.route-path { fill:none; stroke:rgba(31,40,51,.2); stroke-width:1.5; stroke-dasharray:5 6; }
.route-path.is-selected { stroke:var(--olive); stroke-width:3; stroke-dasharray:none; }
.route-dot { fill:#c8c2b8; }.route-dot.is-selected{fill:var(--olive);stroke:rgba(110,123,77,.2);stroke-width:8}
.routing-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding-top:104px; }
.route-choice { min-height:170px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.1rem; border:1px solid var(--line); border-radius:1.1rem; color:rgba(31,40,51,.62); background:rgba(255,255,255,.55); text-align:center; }
.route-choice.is-selected { border-color:var(--olive); color:var(--cream); background:var(--charcoal); box-shadow:0 14px 34px rgba(31,40,51,.18); transform:translateY(-4px); }
.route-choice .avatar { width:46px; font-size:.88rem; }
.route-choice small { margin-top:.7rem; color:var(--olive-dark); font-size:.56rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.route-choice.is-selected small { color:#cbd4ae; }
.route-choice strong { margin-top:.22rem; color:var(--charcoal); font-family:var(--display); font-size:1rem; }
.route-choice.is-selected strong { color:white; }
.route-choice p { margin:.45rem 0 0; font-size:.67rem; line-height:1.35; }
.route-choice i { position:absolute; right:.6rem; top:.6rem; padding:.3rem .45rem; border-radius:999px; color:var(--charcoal); background:#cbd4ae; font-size:.5rem; font-style:normal; font-weight:900; text-transform:uppercase; }
.teammate-portrait { width:78px; height:78px; flex:0 0 auto; border:1px solid rgba(108,74,47,.15); border-radius:1rem; background-color:var(--cream); background-image:url("assets/teammate-cast-source.png"); background-repeat:no-repeat; background-size:700px 450px; box-shadow:0 7px 18px rgba(67,47,32,.13); }
.teammate-alex { background-position:-483px -146px; }.teammate-mary{background-position:-160px -146px}.teammate-sue{background-position:-266px -146px}
.route-choice.is-selected .teammate-portrait { border-color:rgba(203,212,174,.55); box-shadow:0 0 0 5px rgba(203,212,174,.08),0 8px 18px rgba(0,0,0,.24); }
.outcome-route-line { display:block; width:min(100%,900px); height:44px; margin:-4px auto 0; overflow:visible; }
.outcome-route-line path { fill:none; stroke:var(--olive); stroke-width:3; vector-effect:non-scaling-stroke; }
.routing-outcome { max-width:560px; display:flex; align-items:center; gap:1rem; margin:0 auto; padding:1rem 1.15rem; border:1px solid rgba(110,123,77,.25); border-radius:1rem; background:rgba(110,123,77,.08); }
.routing-outcome strong { max-width:420px; margin-top:.3rem; font-family:var(--display); font-size:1.05rem; line-height:1.25; }
.spark-line { margin:1.8rem 0 0;text-align:center;font-family:var(--display);font-size:1.05rem;font-weight:800; }

.proof { color:var(--cream);background:var(--charcoal); }
.proof-inner { padding:var(--section-space) 0; }
.proof-heading { display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:end}.proof-heading .eyebrow{grid-column:1/-1;margin-bottom:-1.5rem}.proof-heading > p:last-child{margin:0 0 .35rem;color:rgba(247,242,234,.64);line-height:1.65}
.proof-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3.1rem}.proof-card{padding:1.05rem;border:1px solid rgba(247,242,234,.12);border-radius:1.15rem;background:rgba(247,242,234,.045)}
.proof-visual { height:140px;position:relative;overflow:hidden;padding:1rem;border-radius:.8rem;background:rgba(247,242,234,.055)}
.proof-number{margin:1.2rem 0 .55rem;color:#cbd4ae;font-size:.62rem;font-weight:800}.proof-card h3{font-size:1.45rem}.proof-card > p:last-child{margin:.8rem 0 0;color:rgba(247,242,234,.61);font-size:.82rem;line-height:1.6}
.tree-visual{display:grid;align-content:center;gap:.42rem}.tree-visual span{position:relative;margin-left:calc(var(--level,0)*16px);font-family:monospace;font-size:.68rem;color:rgba(247,242,234,.7)}.tree-visual span:nth-child(2){margin-left:16px}.tree-visual span:nth-child(3){margin-left:32px}.tree-visual span:nth-child(4){margin-left:48px;color:#d6dda9}.tree-visual span::before{content:"└";margin-right:.5rem;color:rgba(247,242,234,.3)}
.gather-visual { display:grid;grid-template-columns:1fr 1fr;gap:.55rem;align-content:center}.context-stack{display:grid;gap:.38rem;min-width:0;padding:.6rem;border:1px solid rgba(247,242,234,.11);border-radius:.65rem;background:rgba(247,242,234,.04)}.context-stack small{font-size:.5rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.context-stack span{overflow:hidden;padding:.4rem .45rem;border-radius:.4rem;font-size:.56rem;font-weight:700;line-height:1;white-space:nowrap;text-overflow:ellipsis}.context-stack.is-stale small{color:rgba(247,242,234,.4)}.context-stack.is-stale span{color:rgba(247,242,234,.38);background:rgba(247,242,234,.045);text-decoration:line-through}.context-stack.is-fresh{border-color:rgba(203,212,174,.42);background:rgba(110,123,77,.17)}.context-stack.is-fresh small{color:#d6dda9}.context-stack.is-fresh span{color:rgba(247,242,234,.82);background:rgba(110,123,77,.24)}.gather-visual i{position:absolute;right:1rem;bottom:.45rem;padding:.28rem .48rem;border-radius:999px;color:var(--charcoal);background:#cbd4ae;font-size:.55rem;font-style:normal;font-weight:800}
.diff-visual{display:grid;align-content:center;gap:.6rem}.diff-visual span{padding:.6rem .7rem;border-radius:.5rem;font-family:monospace;font-size:.66rem}.diff-visual span:first-child{color:#cbd4ae;background:rgba(110,123,77,.2)}.diff-visual span:nth-child(2){color:#e4ba9d;background:rgba(179,106,46,.14)}.diff-visual i{justify-self:start;padding:.3rem .5rem;border:1px solid rgba(247,242,234,.12);border-radius:999px;color:rgba(247,242,234,.62);font-size:.55rem;font-style:normal}

.closing { padding:5.5rem 0; }
.closing-card { position:relative;overflow:hidden;min-height:340px;display:flex;align-items:flex-end;justify-content:space-between;gap:3rem;padding:clamp(2.2rem,4.5vw,4rem);border-radius:1.7rem;color:var(--cream);background:var(--olive-dark);isolation:isolate}
.closing-card > div { max-width:700px}.closing-card h2{font-size:clamp(2.7rem,4.1vw,4.1rem)}.closing-card p:last-child{max-width:550px;margin:1.2rem 0 0;color:rgba(247,242,234,.7);line-height:1.6}.closing-card .button{flex:0 0 auto}
.cut-shape{position:absolute;z-index:-1;border:1px solid rgba(247,242,234,.13);border-radius:2rem;transform:rotate(28deg)}.cut-one{width:320px;height:135px;right:-75px;top:-30px}.cut-two{width:250px;height:95px;left:44%;bottom:-62px}
footer { min-height:110px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;border-top:1px solid var(--line)}footer p{margin:0;color:var(--muted);font-size:.8rem}footer p:nth-child(2){font-family:var(--display);color:var(--olive-dark);font-weight:800}footer p:last-child{justify-self:end}

.reveal { opacity:0;transform:translateY(22px);transition:opacity .72s ease,transform .72s cubic-bezier(.2,.75,.2,1)}.reveal.is-visible{opacity:1;transform:none}

@media (max-width: 1050px) {
  .hero { grid-template-columns:1fr;gap:1rem;padding-top:3rem }.hero-copy{max-width:820px}.hero-art{width:min(700px,100%);margin-inline:auto}.problem{grid-template-columns:1fr;gap:2.5rem}.sprawl-board{width:min(680px,100%);margin-inline:auto}.patch-section{grid-template-columns:1fr;gap:3rem}.setup-window{width:min(780px,100%);margin-inline:auto}
}

@media (max-width: 820px) {
  nav > a:not(.nav-cta){display:none}.how-grid,.proof-grid{grid-template-columns:1fr}.how-card{min-height:auto}.how-icon{height:180px}.bridge-proof,.proof-heading{grid-template-columns:1fr}.bridge-guide{grid-template-columns:1fr}.bridge-patch-stage{min-height:360px}.proof-heading .eyebrow{margin-bottom:0}.proof-card{display:grid;grid-template-columns:170px 1fr;column-gap:1.1rem}.proof-visual{grid-row:1/4}.proof-number{margin-top:1rem}.proof-card>p:last-child{margin-bottom:1rem}
}

@media (max-width: 620px) {
  .section,.site-header,footer{width:min(100% - 32px,1180px)}.site-header{min-height:76px}.brand-mark{width:2.55rem}.brand-divider{height:2.2rem}.brand-name{font-size:.84rem}.brand-tagline{display:none}.nav-cta{padding:.62rem .78rem;font-size:.75rem}
  .hero{min-height:auto;padding:2.6rem 0 2.75rem}.eyebrow{margin-bottom:.85rem}h1{font-size:clamp(3rem,13.2vw,4rem)}.hero-promise{margin-top:1rem;font-size:1.05rem}.hero-lede{margin-top:.75rem;font-size:.98rem;line-height:1.55}.hero-actions{flex-wrap:nowrap;gap:.9rem;margin-top:1.4rem}.hero-actions .button{min-height:50px;padding:.75rem 1rem;font-size:.9rem}.hero-actions .text-link{font-size:.9rem}.hero-art{min-height:540px}.patch-frame{width:min(92vw,400px);border-width:8px}.orbit-one{width:min(105vw,470px)}.orbit-two{width:min(123vw,550px)}.piece{padding:.52rem .58rem;font-size:.59rem}.piece-goal{left:calc(50% - min(32.7vw,169px));top:calc(50% - min(52vw,217px))}.piece-files{left:calc(50% + min(37.5vw,173px));top:calc(50% - min(37vw,156px))}.piece-settings{left:calc(50% + min(37.5vw,173px));top:calc(50% + min(37vw,156px))}.piece-preferences{left:calc(50% - min(32.7vw,169px));top:calc(50% + min(52vw,217px))}.piece-tools{left:calc(50% - min(38vw,169px));top:calc(50% + min(26vw,116px))}.patch-caption{right:1%;bottom:3%;min-width:158px;padding:.65rem .72rem}.patch-caption strong{font-size:.76rem}
  .problem{min-height:auto;padding:4rem 0}.problem-copy>p:not(.eyebrow):not(.problem-callout){font-size:.96rem}.sprawl-board{min-height:520px}.sprawl-card{width:190px}.card-files{left:0}.card-thread{right:0}.card-draft{left:0}.card-task{right:0}.sprawl-line{width:140px}.sprawl-center{width:178px;min-height:88px;padding:.75rem}.sprawl-center>span{width:38px}
  .bridge-inner,.how,.proof-inner,.use-cases{padding:4rem 0}.bridge-statement{font-size:1.45rem}.teammate-roster{gap:.45rem}.roster-card{min-height:135px;padding:.8rem .4rem}.roster-card .avatar{width:44px}.roster-card i{position:static;margin-top:.5rem}.bridge-gain span{padding:.5rem}.bridge-patch-stage{min-height:320px}.bridge-patch-media{width:300px;height:300px}.bridge-teammate-response{min-height:340px;padding:1rem}.bridge-teammate-knows{grid-template-columns:1fr}.section-heading>p:last-child{font-size:.95rem}.context-flow-visual{border-radius:1rem}.context-flow-visual img{width:100%;height:100%;object-fit:contain}.how-grid{margin-top:2.5rem}
  .patch-section{padding:4rem 0}.setup-content{grid-template-columns:1fr}.onboarding-patch{min-height:280px;border-left:0;border-top:1px solid var(--line)}.onboarding-patch-media{top:2%;width:180px;height:180px}.patch-ring{top:34%}.onboarding-patch p{left:auto;bottom:1.2rem;width:180px}
  .routing-board{margin-top:2.5rem;padding:1rem}.routing-choices{gap:.5rem}.route-choice{min-height:170px;padding:.8rem .45rem}.route-choice p{display:none}.route-choice i{position:static;margin-top:.55rem}.teammate-portrait{width:64px;height:64px}.routing-outcome{margin-top:0}.proof-card{display:block}.proof-visual{height:145px}.closing{padding:4.5rem 0}.closing-card{min-height:460px;align-items:flex-start;flex-direction:column;border-radius:1.35rem}.closing-card h2{font-size:2.5rem}footer{grid-template-columns:1fr auto;padding:1.5rem 0}footer p:nth-child(2){display:none}
}

@media (max-width: 410px) {
  .brand{gap:.45rem}.brand-mark{width:2.3rem}.brand-divider{height:2rem}.nav-cta{font-size:0}.nav-cta::after{content:"Follow";font-size:.72rem}.hero-art{min-height:540px}.patch-frame{width:min(92vw,400px);border-width:7px}.sprawl-card{width:165px}.teammate-roster{grid-template-columns:1fr}.roster-card{min-height:96px;display:grid;grid-template-columns:auto 1fr auto;column-gap:.8rem;text-align:left}.roster-card>span:nth-child(2){margin-top:0}.roster-card i{margin-top:0}.bridge-source-list article{grid-template-columns:34px 1fr 22px;padding:.65rem}.bridge-source-list i{width:34px}.routing-board{padding:.75rem}.routing-spark,.routing-outcome{padding:.8rem}.routing-spark strong,.routing-outcome strong{font-size:.9rem}.routing-choices{gap:.35rem}.route-choice{min-height:150px;padding:.65rem .3rem}.teammate-portrait{width:64px;height:64px}.teammate-alex{background-position:-490px -153px}.teammate-mary{background-position:-167px -153px}.teammate-sue{background-position:-273px -153px}.route-choice strong{font-size:.85rem}.route-choice small{font-size:.48rem}.route-choice i{font-size:.44rem}.source-grid{grid-template-columns:1fr}.setup-content{min-height:700px}
}

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