.features { --line:#e4e5e0; --ink:#202a33; --muted:#8b9097; --blue:#0049b8; background-color:#fff; background-image:radial-gradient(#d8dcdf70 .65px,transparent .65px); background-size:9px 9px; color:var(--ink); }
.features *, .features *::before, .features *::after { box-sizing:border-box; }
.features svg { flex-shrink:0; stroke-width:1.5; }
.intro { width:83.333333%; margin-inline:auto; padding:100px 0 78px; background:#fff; }
.intro h2 { max-width:660px; margin:0; font-size:32px; line-height:1.23; letter-spacing:-.038em; font-weight:450; text-wrap:pretty; }
.intro strong { color:#20272d; font-weight:550; }
.intro h2 > span { color:#90959d; }
.grid { width:83.333333%; margin-inline:auto; background:#fff; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--line); border-bottom:0; }
.feature { min-width:0; min-height:578px; padding:40px 48px; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:18px minmax(0,1fr) auto; border-bottom:1px solid var(--line); }
.feature:nth-child(even) { border-left:1px solid var(--line); }
.number { font-family:var(--font-mono),monospace; font-size:11px; line-height:1.5; color:#a4a9af; letter-spacing:.04em; }
.artwork { min-width:0; width:100%; aspect-ratio:5/3; min-height:280px; display:flex; align-items:center; justify-content:center; align-self:center; padding-block:24px; }
.caption { min-height:103px; }
.caption h3 { font-size:18px; font-weight:550; line-height:1.35; letter-spacing:-.025em; margin:0; color:#252c32; }
.caption p { max-width:405px; font-size:16px; line-height:1.4; letter-spacing:-.018em; color:#737b83; margin:7px 0 0; }
.featureLink { display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:8px; color:var(--blue); font-size:14px; font-weight:500; text-decoration:none; }
.featureLink:hover { text-decoration:underline; text-underline-offset:4px; }
.featureLink:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.surface { border:1px solid #e9eae8; border-radius:8px; background:#fff; box-shadow:0 2px 3px #10203104,0 4px 11px #10203102; }
.sourcingFragment { width:100%; max-width:410px; position:relative; padding:0 13px 52px 0; }
.filterBuilder { padding:16px 14px 20px; }
.fragmentLabel { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:#555e67; margin-bottom:14px; }
.filterRow { display:flex; align-items:center; gap:5px; margin-top:9px; font-size:12px; line-height:1.4; }
.operator { color:#989ca2; flex-shrink:0; }
.filterRow > .operator:first-child { width:37px; }
.field { display:inline-flex; align-items:center; gap:5px; border:1px solid #eaedee; background:#fff; border-radius:5px; padding:5px 6px; white-space:nowrap; color:#5b626b; min-width:0; }
.field > svg { color:#7c8790; }
.selectedField { background:#f0f5fc; color:#426b9d; border-color:#e2ebf8; }
.selectedProperty { display:flex; align-items:center; gap:10px; position:absolute; bottom:0; right:0; padding:13px 15px; width:calc(100% - 43px); max-width:336px; }
.propertyIcon { display:grid; place-items:center; width:32px; height:34px; background:#f1f5f8; border-radius:5px; color:#718a9f; }
.selectedProperty > div { flex:1; min-width:0; }
.selectedProperty strong { display:block; font-size:13px; font-weight:500; color:#505963; }
.selectedProperty > div > span { display:block; font-size:11px; color:#989fa7; margin-top:4px; }
.checkMark { color:#6182aa; display:grid; place-items:center; background:#f1f6fc; border-radius:50%; width:20px; height:20px; }
.ownerGraph { width:100%; max-width:438px; display:grid; grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr); align-items:center; }
.ownerTrunk { min-width:0; }
.relationshipCard { position:relative; z-index:1; overflow:hidden; }
.relationshipCard header { display:flex; align-items:center; gap:6px; padding:10px 10px 8px; min-height:36px; }
.relationshipCard header strong { font-size:12px; line-height:1.3; font-weight:500; color:#515961; }
.relationshipIcon, .relationshipBlue { display:grid; place-items:center; width:19px; height:19px; flex-shrink:0; border-radius:5px; background:#edf1f3; color:#6d8295; }
.relationshipBlue { background:#eaf1fc; color:#3b6da4; }
.relationshipCard > div { padding:8px 11px 11px; border-top:1px solid #eff0ee; }
.relationshipCard p { font-size:12px; line-height:1.45; color:#6c747c; margin:0; }
.relationshipCard > div > span { display:flex; align-items:center; gap:4px; font-size:11px; color:#a1a7ad; margin-top:5px; }
.verticalWire { width:1px; height:22px; background:#e0e4e5; margin-left:27px; position:relative; }
.verticalWire::before,.verticalWire::after { content:''; position:absolute; left:-2px; width:5px; height:5px; border:1px solid #e0e4e5; border-radius:50%; background:#fff; }
.verticalWire::before { top:-2px; }.verticalWire::after { bottom:-2px; }
.ownerBranches { display:flex; flex-direction:column; gap:28px; }
.graphBranch { position:relative; height:131px; transform:translateY(35px); }
.graphBranch::before { content:''; position:absolute; left:0; width:16px; height:1px; background:#e1e5e6; top:50%; }
.graphBranch i { position:absolute; right:0; width:17px; height:50%; border:1px solid #e1e5e6; border-right:0; }
.graphBranch i:first-child { top:0; border-bottom:0; border-radius:10px 0 0; }
.graphBranch i:last-child { bottom:0; border-top:0; border-radius:0 0 0 10px; }
.graphBranch i::after { content:''; position:absolute; right:-2px; width:5px; height:5px; background:#fff; border:1px solid #e0e4e5; border-radius:50%; }
.graphBranch i:first-child::after { top:-3px; }.graphBranch i:last-child::after { bottom:-3px; }
.outreachFragment { width:100%; max-width:398px; }
.receivedMessage { display:flex; gap:9px; align-items:flex-start; padding:0 14px; margin-bottom:22px; }
.mailAvatar { width:27px; height:27px; display:grid; place-items:center; background:#f3f4f4; border:1px solid #eaeded; border-radius:50%; color:#9aa4ab; flex-shrink:0; }
.receivedMessage strong { font-size:12px; font-weight:500; color:#79828b; }
.receivedMessage p { margin:5px 0 0; font-size:12px; line-height:1.55; color:#9aa1a8; max-width:300px; }
.draftFragment { padding:16px 17px 0; }
.draftFragment header { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.draftFragment header > span { display:flex; gap:6px; align-items:center; color:#547bad; font-size:12px; }
.draftFragment header > small { font-size:11px; color:#a0a5ac; }
.draftFragment > p { font-size:13px; line-height:1.7; color:#5e6974; margin:16px 0 20px; }
.draftFragment footer { border-top:1px solid #edf0f2; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; }
.draftFragment footer > span:first-child { display:flex; align-items:center; gap:5px; font-size:11px; color:#96a0ab; }
.reviewPill { color:#6d84a0; background:#f3f6fb; border:1px solid #e6edf8; padding:3px 6px; border-radius:4px; font-size:10px; }
.analysisFragment { width:100%; max-width:388px; padding:0 45px 42px 0; position:relative; }
.inputEditor { padding:16px; }
.editorTitle { display:block; font-size:12px; font-weight:500; color:#515b65; margin-bottom:17px; }
.inputLabel { display:block; color:#858f99; font-size:11px; margin-bottom:7px; }
.inputField { border:1px solid #e6eaed; border-radius:5px; min-height:33px; padding:7px 9px; display:flex; align-items:center; gap:7px; font-size:12px; line-height:1.35; color:#68747f; }
.inputField > svg:last-child { margin-left:auto; color:#9da6af; }
.focusedField { border-color:#95b0d7; box-shadow:0 0 0 2px #0049b807; }
.inputValues { display:flex; gap:28px; margin:14px 0; }
.inputValues > div { display:flex; flex-direction:column; gap:5px; }
.inputValues span { font-size:11px; color:#9ba3ac; }
.inputValues strong { font-size:12px; font-weight:400; color:#657382; }
.inputField > strong { font-size:11px; color:#8b99a6; font-weight:400; margin-left:auto; }
.scenarioMenu { position:absolute; width:184px; right:0; bottom:0; padding:5px; }
.menuLabel { display:flex; align-items:center; justify-content:space-between; padding:6px 7px 9px; font-size:11px; color:#929ba4; border-bottom:1px solid #f0f2f3; margin-bottom:4px; }
.scenarioMenu > div:not(:first-child) { display:flex; gap:7px; align-items:center; padding:7px; font-size:12px; color:#687681; border-radius:4px; }
.scenarioMenu > div[data-selected] { background:#f1f4f7; color:#3d6089; }
.scenarioMenu > div > svg { margin-left:auto; color:#6d88aa; }
.scenarioIcon { width:7px; height:7px; border:1px solid #b3c0ce; border-radius:2px; }
.scenarioMenu > div[data-selected] .scenarioIcon { background:#4f79a8; border-color:#4f79a8; }
.documentFragment { width:100%; max-width:350px; padding:0 32px 18px 10px; position:relative; }
.documentBehind { position:absolute; inset:8px 24px 21px 20px; border:1px solid #eaedeb; border-radius:7px; background:#fdfdfb; transform:rotate(3deg); }
.documentSheet { position:relative; padding:19px 20px; }
.documentSheet header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.documentSheet header > span:first-child { display:flex; align-items:center; gap:6px; color:#8a969f; font-size:11px; }
.documentSheet header > span:last-child { color:#a7b0b7; font-size:10px; }
.documentTitle { margin:23px 0 19px; }
.documentTitle > span { font-size:11px; color:#8e9aa6; }
.documentTitle h4 { margin:7px 0; color:#4e6173; font-size:21px; font-weight:500; line-height:1.2; letter-spacing:-.025em; }
.documentTitle p { margin:8px 0 0; font-size:11px; color:#9aa7b2; }
.documentSheet ol { list-style:none; margin:0; padding:0; border-top:1px solid #e9edef; }
.documentSheet li { display:flex; align-items:center; gap:9px; border-bottom:1px solid #edf0f2; padding:10px 0; color:#7e8c99; font-size:11px; }
.documentSheet li > span { font-size:10px; font-family:var(--font-mono),monospace; color:#b2bec8; }
.documentSheet li > svg { margin-left:auto; color:#a9b6c2; }
.documentTag { position:absolute; bottom:0; right:0; display:flex; align-items:center; gap:8px; padding:10px 12px; font-size:11px; color:#7c91a3; }
.documentTag > svg:last-child { color:#8ca5bd; }
.pipelineFragment { width:100%; max-width:408px; padding:0 10px 42px 0; position:relative; }
.recordRows { padding:5px 11px; }
.recordHead { display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:10px 4px; font-size:11px; color:#9aa4ac; border-bottom:1px solid #edf0f2; }
.recordHead > span:last-child { padding-left:12px; }
.recordRow { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:10px; padding:14px 4px; font-size:12px; color:#75828c; border-bottom:1px solid #f0f2f3; }
.recordRow:last-child { border:0; }
.recordRow > span:first-child { display:flex; align-items:center; gap:6px; }
.recordRow > span:first-child > svg { color:#9aaab7; }
.stageChip { display:flex; width:fit-content; align-items:center; gap:5px; padding:4px 7px; border-radius:4px; background:#f5f6f6; border:1px solid #edf0f1; color:#939da5; font-size:11px; }
.stageChip > i { width:5px; height:5px; border-radius:50%; background:#bac4cd; }
.recordRow[data-selected] .stageChip { background:#eef4fc; border-color:#e5edf8; color:#6281a4; }
.recordRow[data-selected] .stageChip > i { background:#6a91bb; }
.nextAction { position:absolute; right:0; bottom:0; width:calc(100% - 25px); padding:12px; display:flex; gap:10px; align-items:center; }
.taskCheck { width:18px; height:18px; border:1px solid #cfdbe7; display:grid; place-items:center; color:#6c90b9; border-radius:4px; }
.nextAction > div { flex:1; }
.nextAction small { color:#a6b0b9; font-size:10px; display:block; margin-bottom:4px; }
.nextAction strong { color:#7a8b9b; font-size:12px; font-weight:400; display:block; }
.taskAvatar { width:23px; height:23px; border-radius:50%; background:#eff3f8; color:#95a7bb; display:grid; place-items:center; font-size:9px; }
.coleFragment { width:100%; max-width:394px; padding:0 16px 0 0; }
.coleBrief { padding:15px 17px; }
.coleBrief header { display:flex; gap:7px; align-items:center; color:#a1abb5; font-size:11px; }
.coleBrief header > strong { color:#788a9c; font-size:12px; font-weight:500; }
.coleBrief > p { margin:14px 0 12px; color:#788694; font-size:12px; line-height:1.6; }
.attachment { display:flex; align-items:center; gap:5px; color:#a7b1ba; font-size:11px; }
.coleWire { height:28px; display:flex; align-items:center; justify-content:center; color:#c1ceda; }
.coleOutputs { width:calc(100% - 30px); padding:6px 14px; margin-left:auto; margin-right:-16px; }
.coleOutputs > div { display:flex; align-items:center; gap:9px; color:#8193a4; font-size:12px; padding:8px 0; }
.coleOutputs > div + div { border-top:1px solid #f0f3f5; }
.coleOutputs > div > svg:last-child { margin-left:auto; color:#9ab0c7; }
.connectionsFragment { width:100%; max-width:415px; }
.providers { display:flex; gap:10px; justify-content:center; }
.providers > span { display:flex; align-items:center; justify-content:center; gap:6px; padding:12px 15px; min-height:46px; font-size:12px; color:#738698; }
.claudeMark { font-size:24px; line-height:18px; color:#9aabba; }
.providerWires { height:57px; display:grid; grid-template-columns:repeat(3,1fr); margin-inline:62px; }
.providerWires > i { position:relative; height:31px; border:1px solid #e2e7eb; border-top:0; }
.providerWires > i:first-child { border-right:0; border-bottom-left-radius:11px; }
.providerWires > i:nth-child(2) { border:0; }
.providerWires > i:nth-child(2)::before { content:''; position:absolute; width:1px; height:57px; background:#e2e7eb; top:0; left:50%; }
.providerWires > i:nth-child(2)::after { content:''; position:absolute; width:100%; height:1px; background:#e2e7eb; top:30px; }
.providerWires > i:last-child { border-left:0; border-bottom-right-radius:11px; }
.platformNode { width:258px; margin:auto; display:flex; align-items:center; gap:13px; padding:18px 20px; }
.platformMark { width:38px; height:38px; border-radius:7px; display:grid; place-items:center; color:#7193b6; background:#f0f5fb; border:1px solid #e6edf8; }
.platformNode > div { display:flex; flex-direction:column; gap:4px; }
.platformNode > div > span { color:#a4afb9; font-size:11px; }
.platformNode strong { color:#627c94; font-size:14px; font-weight:500; letter-spacing:-.015em; }
.permissionLine { display:flex; align-items:center; justify-content:center; gap:7px; color:#a2b0bc; font-size:11px; margin-top:17px; }
.permissionLine > span { color:#ced7de; }
@media(min-width:1600px) { .feature { min-height:600px; } }
@media(max-width:1100px) {
  .feature { padding-inline:32px; min-height:560px; }.caption p { font-size:15px; }.filterRow { font-size:11px; gap:4px; }.filterRow > .operator:first-child { width:32px; }.field { padding-inline:5px; gap:4px; }.field > svg { width:11px; }.ownerGraph { grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr); }.relationshipCard header { gap:4px; padding-inline:8px; }.relationshipCard header strong { font-size:11px; }.relationshipCard > div { padding-inline:9px; }.relationshipCard p { font-size:11px; }.relationshipCard > div > span { font-size:10px; }.graphBranch::before { width:11px; }.graphBranch i { width:12px; }.providers { gap:7px; }.providers > span { padding-inline:10px; }.intro { padding-block:82px 65px; }
}
@media(max-width:950px) {
  .grid { width:100%; grid-template-columns:1fr; border-inline:0; }.intro { width:100%; padding-inline:28px; }.feature { min-height:565px; padding:36px 40px; }.feature:nth-child(even) { border-left:0; }.artwork { aspect-ratio:auto; max-width:480px; margin-inline:auto; min-height:310px; }.caption { min-height:83px; }.caption p { font-size:16px; max-width:460px; }.intro { padding:65px 28px 55px; }.intro h2 { font-size:29px; max-width:560px; }.filterRow { font-size:12px; gap:5px; }.filterRow > .operator:first-child { width:37px; }.field { padding-inline:6px; gap:5px; }.field > svg { width:13px; }.ownerGraph { grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr); }.relationshipCard header { gap:6px; padding-inline:10px; }.relationshipCard header strong { font-size:12px; }.relationshipCard > div { padding-inline:11px; }.relationshipCard p { font-size:12px; }.relationshipCard > div > span { font-size:11px; }.graphBranch::before { width:16px; }.graphBranch i { width:17px; }.providers > span { padding-inline:15px; }
}
@media(max-width:480px) {
  .intro { padding-inline:23px; }.feature { min-height:555px; padding:30px 23px; }.intro { padding-block:52px 45px; }.intro h2 { font-size:26px; line-height:1.3; }.artwork { min-height:310px; }.caption { min-height:99px; }.caption h3 { font-size:18px; }.caption p { font-size:15px; }.sourcingFragment { padding-right:0; }.filterBuilder { padding:13px 10px 20px; }.filterRow { font-size:10px; gap:4px; }.field { padding-inline:4px; gap:3px; }.field > svg { width:10px; }.filterRow > .operator:first-child { width:28px; }.selectedProperty { width:calc(100% - 17px); padding:12px; }.selectedProperty strong { font-size:12px; }.selectedProperty > div > span { font-size:10px; }.ownerGraph { grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); }.relationshipCard header { padding:9px 7px 7px; gap:4px; }.relationshipCard header strong { font-size:10px; }.relationshipIcon,.relationshipBlue { width:17px; height:17px; }.relationshipCard > div { padding:7px; }.relationshipCard p { font-size:11px; }.relationshipCard > div > span { font-size:10px; }.graphBranch::before { width:10px; }.graphBranch i { width:11px; }.receivedMessage { padding:0 6px; }.draftFragment { padding:14px 12px 0; }.draftFragment header > small { font-size:10px; }.draftFragment footer { flex-wrap:wrap; gap:8px; }.reviewPill { font-size:9px; }.analysisFragment { padding-right:26px; }.inputEditor { padding:13px; }.inputField { font-size:11px; }.scenarioMenu { width:163px; }.documentFragment { padding-left:0; padding-right:22px; }.documentSheet { padding:16px; }.documentTitle h4 { font-size:20px; }.recordRow { font-size:11px; }.stageChip { font-size:10px; }.nextAction strong { font-size:11px; }.providers { gap:5px; }.providers > span { padding:10px 8px; font-size:10px; gap:4px; }.providers > span > svg { width:14px; }.claudeMark { font-size:20px; }.platformNode { width:238px; padding:16px; }.permissionLine { font-size:10px; gap:5px; }.providerWires { margin-inline:44px; }
}
@media(max-width:360px) {
  .intro { padding-inline:17px; }.feature { padding-inline:17px; min-height:560px; }.filterRow { font-size:9px; gap:3px; }.field { padding-inline:3px; }.filterRow > .operator:first-child { width:25px; }.filterRow .field > svg:not(:last-child) { display:none; }.selectedProperty { padding:10px; gap:7px; }.selectedProperty strong { font-size:11px; }.propertyIcon { width:27px; height:30px; }.relationshipCard header strong { font-size:9px; }.relationshipCard p { font-size:10px; }.relationshipCard > div > span { font-size:9px; }.relationshipCard header { flex-wrap:wrap; }.draftFragment header { flex-wrap:wrap; }.draftFragment > p { font-size:12px; }.scenarioMenu { width:152px; }.inputValues { gap:18px; }.inputField > strong { font-size:10px; }.documentSheet li { font-size:10px; }.providers > span { padding-inline:6px; font-size:9px; }.platformNode { width:218px; }.platformNode strong { font-size:13px; }.permissionLine { flex-wrap:wrap; }.recordRow { gap:5px; font-size:10px; }.stageChip { font-size:9px; }.nextAction { padding:10px; gap:7px; }.nextAction strong { font-size:10px; }.taskAvatar { width:20px; height:20px; font-size:8px; }
}