/* The home page (docs/home-v3.md): the hero, three chapters on one arrow, nine stages with product shots,
   tools it replaces, security, pricing, questions. Shared header, footer and tokens are in base.css. */
.om-home {
  --ink: #0a0a0a; --ink-2: #737373; --ink-3: #a3a3a3; --line: #e5e5e5; --line-2: #d4d4d4; --fill: #f5f5f5; --fill-2: #ebebeb; --paper: #ffffff;
  --signal: #0c8c5e; --green-3: #e8f5ef; --green-11: #0a7a52; --yellow-3: #fff6d6; --yellow-11: #8a6200; --yellow-9: #f2b600;
  --blue-3: #e8effc; --blue-11: #1d4ed8; --blue-9: #2563eb; --purple-3: #f1ecfe; --purple-11: #5230c2; --gray-11: #525252;
  /* Bands use the app's two fills: hover (#f5f5f5) and pressed (#ebebeb) */
  --band-gray: #f5f5f5; --band-stone: #ebebeb;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --gutter: 64px;
}
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .01em; }
.br::before { content: "[ "; } .br::after { content: " ]"; }


/* Hero */
.hero { text-align: center; padding-top: 72px; padding-bottom: 40px; }
.kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); margin-bottom: 22px; }
.kicker i { width: 7px; height: 7px; background: var(--signal); display: inline-block; }
h1 { font: 600 clamp(40px, 6.6vw, 80px)/1 "Inter Tight", "Inter", sans-serif; letter-spacing: -.045em; margin: 0 auto; max-width: 960px; text-wrap: balance; }
h1 span, h2 span, h3 span { color: var(--ink-3); }
h1 span { display: block; }
.lede { color: var(--ink-2); font-size: 17px; max-width: 560px; margin: 22px auto 30px; text-wrap: balance; }
.signup { display: flex; max-width: 440px; margin: 0 auto; border: 1px solid var(--ink); }
.signup input { flex: 1; min-width: 0; border: 0; padding: 0 14px; height: 46px; outline: none; background: transparent; }
.signup .btn { height: 46px; border: 0; border-left: 1px solid var(--ink); }
.note { color: var(--ink-3); margin-top: 12px; }

/* Bands: the app's gray fills with grain, holding a product frame */
.band { position: relative; padding: 48px; border: 1px solid var(--ink); overflow: hidden; }
.band::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); mix-blend-mode: multiply; opacity: .32; pointer-events: none; }
.band > * { position: relative; }
.b-gray { background: var(--band-gray); } .b-stone { background: var(--band-stone); }

/* App frame (the real app's square style) */
.app { background: var(--paper); border: 1px solid var(--ink); display: grid; grid-template-columns: 196px 1fr; font-size: 12.5px; text-align: left; min-height: 380px; }
.app .side { border-right: 1px solid var(--ink); display: flex; flex-direction: column; }
.app .ws { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; border-bottom: 1px solid var(--ink); font-weight: 600; }
.app .srch { margin: 10px; height: 28px; border: 1px solid var(--ink); display: flex; align-items: center; gap: 6px; padding: 0 8px; color: var(--ink-2); }
.app .sec { padding: 10px 12px 4px; color: var(--ink-2); font-size: 10.5px; }
.app .it { display: flex; align-items: center; gap: 8px; height: 28px; margin: 0 8px; padding: 0 8px; color: rgba(10,10,10,.85); font-weight: 500; }
.app .it.on { background: var(--ink); color: #fff; }
.app .it svg { width: 14px; height: 14px; flex: none; }
.app .main { min-width: 0; display: flex; flex-direction: column; }
.app .ph { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--ink); }
.app .ph b { font: 600 15px "Inter Tight", sans-serif; letter-spacing: -.01em; }
.app .ph b span { color: var(--ink-3); }
.ic { width: 14px; height: 14px; }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 6px; border: 1px solid currentColor; font-size: 11px; font-weight: 500; white-space: nowrap; }
.t-green { background: var(--green-3); color: var(--green-11); } .t-yellow { background: var(--yellow-3); color: var(--yellow-11); } .t-blue { background: var(--blue-3); color: var(--blue-11); } .t-purple { background: var(--purple-3); color: var(--purple-11); } .t-gray { background: var(--fill); color: var(--gray-11); }
img.av { object-fit: cover; padding: 0; }
.lg { object-fit: contain; flex: none; display: inline-block; vertical-align: middle; }
.av { width: 28px; height: 28px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 9.5px; font-weight: 600; flex: none; background: var(--fill-2); }
table.tb { width: 100%; border-collapse: collapse; }
.tb th { text-align: left; font: 500 10.5px var(--mono); color: var(--ink-2); padding: 7px 10px; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.tb td { padding: 0 10px; height: 38px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tb td + td, .tb th + th { border-left: 1px solid var(--line); }
.tb tr.open td { background: var(--ink); color: #fff; border-color: var(--ink); }
.tb tr.open .sub { color: #fff; }
.tb tr.open .tag { color: #fff; background: none; }
.sub { color: var(--ink-2); }
.who { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.chk { width: 13px; height: 13px; border: 1px solid var(--ink); display: inline-grid; place-items: center; flex: none; }
.chk.on { background: var(--ink); }
.chk.on::after { content: ""; width: 6px; height: 3px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.fit { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.q { width: 12px; height: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.q i { background: var(--signal); } .q i.off { background: var(--line-2); }

/* Sections */
.works { padding-top: 28px; padding-bottom: 8px; }
.works .row { display: grid; grid-template-columns: 220px repeat(7, 1fr); border: 1px solid var(--ink); }
.works .row > * { height: 64px; display: grid; place-items: center; border-left: 1px solid var(--ink); font-weight: 600; letter-spacing: -.01em; color: #3a3a3a; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.works .wl { display: flex !important; align-items: center; justify-content: center; gap: 8px; }
.works .row > :first-child { border-left: 0; place-items: center start; padding: 0 16px; font-weight: 400; color: var(--ink-2); }

.chapter { position: relative; padding: 96px 0 40px; }
.chapter > .wrap { position: relative; }
.chead { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; padding-left: var(--gutter); margin-bottom: 28px; }
h2 { font: 600 clamp(32px, 4.4vw, 54px)/1.02 "Inter Tight", sans-serif; letter-spacing: -.04em; margin: 0; text-wrap: balance; }
.chead p { color: var(--ink-2); margin: 0; max-width: 440px; justify-self: end; }

/* Pipeline stage bar: chevrons, sticky through the chapter */
.stages { position: sticky; top: var(--header-h); z-index: 20; background: var(--paper); padding: 10px 0 10px var(--gutter); margin-bottom: 8px; }
.chev { display: flex; }
.chev a { position: relative; flex: 1; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 18px 0 30px; background: var(--fill); color: var(--ink-2); font-weight: 500; font-size: 14px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%); margin-left: -12px; transition: background .25s, color .25s; }
.chev a:first-child { margin-left: 0; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); padding-left: 18px; }
.chev a .n { font-family: var(--mono); font-size: 11px; }
.chev a.done { background: var(--fill-2); color: var(--ink); }
.chev a.on { background: var(--ink); color: #fff; }
.chev a .ck { width: 14px; height: 14px; display: none; }
.chev a.done .ck { display: block; }

/* The arrow: one line down the gutter, drawn as you scroll, with a node per stage */
.flow { position: absolute; left: 0; top: 0; bottom: 0; width: var(--gutter); pointer-events: none; }
.flow .rail { position: absolute; left: 15px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.flow .ink { position: absolute; left: 14px; top: 0; width: 3px; height: 0; background: var(--ink); }
.flow .head { position: absolute; left: 7px; width: 17px; height: 12px; transform: translateY(-2px); }
.stage { position: relative; padding: 56px 0 24px var(--gutter); }
.stage .node { position: absolute; left: 4px; top: 60px; transform: translateY(-50%); width: 24px; height: 24px; border: 1px solid var(--ink); background: var(--paper); display: grid; place-items: center; font: 500 11px var(--mono); transition: background .25s, color .25s; z-index: 2; }
.stage.reached .node { background: var(--ink); color: #fff; }
.shead { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 22px; }
.shead .lbl { color: var(--ink-2); margin-bottom: 8px; }
h3 { font: 600 clamp(24px, 2.8vw, 34px)/1.08 "Inter Tight", sans-serif; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.shead p { color: var(--ink-2); margin: 28px 0 0; max-width: 460px; }
.shead ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: 14px; }
.shead li { display: flex; gap: 8px; } .shead li::before { content: ""; width: 7px; height: 7px; margin-top: 8px; background: var(--ink); flex: none; }

/* Scout */
.sentence { font: 600 22px/1.25 "Inter Tight", sans-serif; letter-spacing: -.025em; padding: 18px 16px 6px; max-width: 760px; }
.sentence u { text-decoration: none; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 1.5px no-repeat; transition: background-size .7s cubic-bezier(.2,.8,.2,1); }
.in .sentence u { background-size: 100% 1.5px; }
.in .sentence u:nth-of-type(2) { transition-delay: .15s; } .in .sentence u:nth-of-type(3) { transition-delay: .3s; } .in .sentence u:nth-of-type(4) { transition-delay: .45s; }
.meta { display: flex; align-items: center; gap: 14px; padding: 6px 16px 12px; color: var(--ink-2); }
.meta b { color: var(--ink); font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--ink); margin: 0 16px 10px; }
.seg span { padding: 4px 10px; font-size: 12px; } .seg span + span { border-left: 1px solid var(--ink); } .seg .on { background: var(--ink); color: #fff; }
.rows tr { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s cubic-bezier(.2,.8,.2,1); }
.in .rows tr { opacity: 1; transform: none; }
.in .rows tr:nth-child(2) { transition-delay: .08s; } .in .rows tr:nth-child(3) { transition-delay: .16s; } .in .rows tr:nth-child(4) { transition-delay: .24s; } .in .rows tr:nth-child(5) { transition-delay: .32s; }
.bulk { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--ink); }
.quote { margin-left: auto; color: var(--ink-2); }

/* Campaigns */
.canvas { flex: 1; display: grid; grid-template-columns: 1fr 300px; min-height: 0; }
.dots { background-color: var(--fill); background-image: radial-gradient(#cfcfcf 1px, transparent 1px); background-size: 16px 16px; display: flex; flex-direction: column; align-items: center; padding: 22px 16px; gap: 0; }
.step { width: 100%; max-width: 330px; background: #fff; border: 1px solid var(--ink); padding: 10px 12px; display: flex; gap: 10px; align-items: center; }
.step .si { width: 26px; height: 26px; border: 1px solid var(--ink); display: grid; place-items: center; flex: none; }
.step small { display: block; color: var(--ink-2); font-size: 11px; }
.wait { height: 30px; display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 11px; }
.wait::before { content: ""; width: 1px; height: 100%; background: var(--ink); }
.endf { background: var(--ink); color: #fff; padding: 4px 12px; font-size: 11.5px; font-weight: 500; }
.people { border-left: 1px solid var(--ink); display: flex; flex-direction: column; }
.people .hd { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--ink); font-weight: 600; }
.pr { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.pr .nm { flex: 1; min-width: 0; } .pr .nm b { display: block; font-weight: 600; } .pr .nm span { color: var(--ink-2); font-size: 11px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr .tag { transition: background .3s, color .3s; }
.approved .pr .state { background: var(--green-3); color: var(--green-11); }
.approve.done { background: var(--green-11); border-color: var(--green-11); }

/* Inbox */
.inbox { flex: 1; display: grid; grid-template-columns: 230px 1fr; min-height: 0; }
.threads { border-right: 1px solid var(--ink); }
.tabs3 { display: flex; border-bottom: 1px solid var(--ink); }
.tabs3 span { flex: 1; text-align: center; padding: 7px 0; font-size: 11.5px; } .tabs3 span + span { border-left: 1px solid var(--ink); } .tabs3 .on { background: var(--ink); color: #fff; }
.th { display: flex; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.th.on { background: var(--ink); color: #fff; } .th.on .sub { color: #bdbdbd; }
.th .un { width: 6px; height: 6px; background: var(--blue-9); margin-top: 6px; flex: none; }
.th b { font-weight: 600; display: block; } .th .sub { font-size: 11px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.conv { display: flex; flex-direction: column; min-width: 0; }
.msgs { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.bub { max-width: 82%; border: 1px solid var(--ink); padding: 8px 10px; background: #fff; }
.bub.me { align-self: flex-end; background: var(--band-gray); }
.bub .m { color: var(--ink-2); font-size: 10.5px; margin-bottom: 2px; }
.reply { margin: 0 14px 14px; border: 1px solid var(--ink); }
.reply .tx { padding: 10px 12px; min-height: 64px; }
.reply .tx .cur { display: inline-block; width: 1px; height: 14px; background: var(--ink); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.reply .rb { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 11.5px; }

.next { padding: 40px 0 120px var(--gutter); }
.next .box { border: 1px dashed var(--ink-3); padding: 22px; display: flex; align-items: center; gap: 14px; color: var(--ink-2); }
.next .box b { color: var(--ink); }

@media (max-width: 900px) {
  :root { --gutter: 44px; }
  .works .row { grid-template-columns: repeat(4, 1fr); }
  .works .row > :first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--ink); }
  .works .row > :nth-child(6) { border-left: 0; } .works .row > :nth-child(n+2) { border-top: 0; }
  .works .row > :nth-child(n+6) { border-top: 1px solid var(--ink); }
  .chead, .shead { grid-template-columns: 1fr; } .chead p { justify-self: start; } .shead p { margin-top: 0; }
  .band { padding: 16px; }
  .app { grid-template-columns: 1fr; } .app .side { display: none; }
  .app, .canvas, .inbox { grid-template-columns: minmax(0, 1fr) !important; }
  .app .ph b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .step { max-width: none; } .people { border-left: 0; border-top: 1px solid var(--ink); }
  .inbox { grid-template-columns: 1fr; } .threads { display: none; }
  .tb .hide-s { display: none; }
  .chev a { font-size: 12px; padding: 0 10px 0 22px; gap: 6px; } .chev a .n { display: none; } .chev a:first-child { padding-left: 12px; }
  .flow { left: -8px; } .stage .node { left: 0; font-size: 0; width: 16px; height: 16px; }
  .crumb { display: none; }
  .seg { display: flex; overflow-x: auto; } .seg span { white-space: nowrap; }
  .scroll-x { overflow-x: auto; }
}
@media (max-width: 520px) { .sentence { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .rows tr { opacity: 1; transform: none; } .sentence u { background-size: 100% 1.5px; }
}

/* Full page additions */
.chapter { padding-top: 120px; }
.chapter:first-of-type { padding-top: 96px; }
.flow-all { position: relative; }
.flow-all > .flow { top: 0; bottom: 0; }
.chapter .wrap { padding-left: 24px; }
.chev-cap { color: var(--ink-2); margin-bottom: 10px; }
.stage .shot { position: relative; }

/* Scout signals column */
.sig { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.sig i { width: 6px; height: 6px; background: var(--signal); flex: none; }

/* Campaign lead magnet */
.magnet { margin-top: 8px; display: flex; gap: 10px; align-items: center; border: 1px dashed var(--ink); padding: 8px; background: var(--band-stone); }
.magnet .pdf { width: 30px; height: 38px; border: 1px solid var(--ink); background: #fff; display: grid; place-items: center; font: 500 8px var(--mono); flex: none; }
.magnet b { font-weight: 600; display: block; }
.magnet small { color: var(--ink-2); font-size: 11px; }

/* Inbox weekly learning strip */
.learn { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: end; padding: 10px 14px; border-top: 1px solid var(--ink); }
.learn .bars { display: flex; align-items: end; gap: 6px; height: 34px; }
.learn .bars i { flex: 1; background: var(--fill-2); border: 1px solid var(--ink); height: var(--h); transform-origin: bottom; transform: scaleY(.15); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.in .learn .bars i { transform: none; }
.in .learn .bars i:nth-child(2) { transition-delay: .1s; } .in .learn .bars i:nth-child(3) { transition-delay: .2s; } .in .learn .bars i:nth-child(4) { transition-delay: .3s; }
.learn .bars i:last-child { background: var(--ink); }
.learn .big { font: 600 22px/1 "Inter Tight", sans-serif; letter-spacing: -.02em; }

/* Unify */
.unify { display: grid; grid-template-columns: 250px 90px 1fr; min-height: 380px; }
.srcs { padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; justify-content: center; border-right: 1px solid var(--ink); background: var(--fill); }
.src { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ink); background: #fff; padding: 8px 10px; opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .4s cubic-bezier(.2,.8,.2,1); }
.in .src { opacity: 1; transform: none; }
.in .src:nth-child(2) { transition-delay: .1s; } .in .src:nth-child(3) { transition-delay: .2s; } .in .src:nth-child(4) { transition-delay: .3s; } .in .src:nth-child(5) { transition-delay: .4s; }
.src .k { width: 22px; height: 22px; border: 1px solid var(--ink); display: grid; place-items: center; font: 500 9px var(--mono); flex: none; }
.src b { font-weight: 600; display: block; } .src small { color: var(--ink-2); font-size: 11px; }
.wires { position: relative; }
.wires svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wires path { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset .9s ease; }
.in .wires path { stroke-dashoffset: 0; }
.rec { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.rec .top2 { display: flex; align-items: center; gap: 12px; }
.rec .top2 .av { width: 40px; height: 40px; font-size: 13px; }
.rec h4 { margin: 0; font: 600 18px "Inter Tight", sans-serif; letter-spacing: -.02em; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); }
.facts div { padding: 8px 10px; } .facts div + div { border-left: 1px solid var(--ink); }
.facts small { display: block; color: var(--ink-2); font: 500 10px var(--mono); }
.tl { border: 1px solid var(--ink); }
.tl div { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tl div:last-child { border-bottom: 0; }
.tl .when { margin-left: auto; color: var(--ink-3); font-size: 11px; }

/* Meetings */
.meet { display: grid; grid-template-columns: 1fr 280px; min-height: 380px; }
.meet .l { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.meet .r { border-left: 1px solid var(--ink); display: flex; flex-direction: column; }
.card { border: 1px solid var(--ink); background: #fff; }
.card .ch { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--ink); font-weight: 600; }
.card .ch .mono { margin-left: auto; color: var(--ink-2); font-weight: 400; }
.card .cb { padding: 10px; }
.fact { display: flex; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.fact:last-child { border-bottom: 0; }
.fact q { display: block; color: var(--ink-2); font-size: 11.5px; quotes: "\201C" "\201D"; margin-top: 2px; }
.upd { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.upd .ok { width: 22px; height: 22px; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.upd .no { width: 22px; height: 22px; border: 1px solid var(--ink); display: grid; place-items: center; flex: none; }
.upd span { flex: 1; } .upd s { color: var(--ink-3); }

/* Context */
.ctx { display: flex; flex-direction: column; min-height: 400px; }
.ctx .thread2 { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 0 auto; width: 100%; }
.ask { align-self: flex-end; border: 1px solid var(--ink); background: var(--fill); padding: 8px 12px; }
.ans { display: flex; gap: 10px; }
.ans .body { flex: 1; }
.ans ul { margin: 6px 0 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.ans li { display: flex; gap: 8px; } .ans li::before { content: ""; width: 6px; height: 6px; background: var(--ink); margin-top: 7px; flex: none; }
.cite { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--ink); padding: 0 5px; font: 500 10.5px var(--mono); margin-left: 4px; vertical-align: 1px; white-space: nowrap; }
.ans li { opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s; }
.in .ans li { opacity: 1; transform: none; }
.in .ans li:nth-child(2) { transition-delay: .25s; } .in .ans li:nth-child(3) { transition-delay: .5s; }
.composer2 { margin: 0 auto 16px; width: calc(100% - 40px); max-width: 760px; border: 1px solid var(--ink); display: flex; align-items: center; padding: 8px 8px 8px 12px; color: var(--ink-3); }
.composer2 .go { margin-left: auto; width: 28px; height: 28px; background: var(--ink); color: #fff; display: grid; place-items: center; }

/* Library */
.lib { padding: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.item { border: 1px solid var(--ink); background: #fff; display: flex; flex-direction: column; }
.item .thumb { aspect-ratio: 16 / 9; border-bottom: 1px solid var(--ink); display: grid; place-items: center; font: 500 10px var(--mono); color: var(--ink-2); position: relative; overflow: hidden; }
.item .thumb::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); mix-blend-mode: multiply; opacity: .25; }
.item .ib { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.item b { font-weight: 600; font-size: 12px; line-height: 1.3; }
.item .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.item .tags span { font-size: 10px; border: 1px solid var(--line-2); padding: 0 4px; color: var(--ink-2); }
.item.match { outline: 2px solid var(--ink); outline-offset: -1px; }
.item.match .ib::before { content: "Match"; align-self: flex-start; font: 500 10px var(--mono); background: var(--ink); color: #fff; padding: 1px 5px; }
.libbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--ink); }

/* Streaming-style proposal: the buyer's own dark brand */
.prop { background: #0f1115; color: #f5f5f5; display: flex; flex-direction: column; min-height: 440px; font-size: 12.5px; }
.prop .pnav { display: flex; align-items: center; gap: 18px; padding: 12px 18px; color: #a3a3a3; }
.prop .pnav b { color: #fff; font-weight: 600; margin-right: 10px; }
.prop .pnav .on { color: #fff; }
.prop .billboard { position: relative; margin: 0 18px; padding: 26px 22px; min-height: 170px; background: linear-gradient(90deg, #0f1115 40%, transparent), #2b3a4a; border: 1px solid #2a2f37; overflow: hidden; }
.prop .billboard::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 55%; background: repeating-linear-gradient(135deg, #34485c 0 18px, #2d3f51 18px 36px); opacity: .9; z-index: 0; }
.prop .billboard > * { position: relative; z-index: 1; max-width: 46%; }
.prop .billboard small { font: 500 10.5px var(--mono); color: #9fb3c8; letter-spacing: .04em; }
.prop .billboard h4 { margin: 6px 0 8px; font: 600 24px/1.1 "Inter Tight", sans-serif; letter-spacing: -.02em; }
.prop .billboard p { margin: 0 0 12px; color: #c9ced6; }
.prop .play { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #0f1115; padding: 6px 12px; font-weight: 600; }
.prop .play2 { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #5b6470; color: #fff; padding: 6px 12px; margin-left: 6px; }
.prop .rowt { padding: 14px 18px 6px; font-weight: 600; }
.prop .rowt span { color: #8a919c; font-weight: 400; margin-left: 6px; }
.prop .tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 0 18px; }
.prop .tile { aspect-ratio: 16 / 9; border: 1px solid #2a2f37; padding: 8px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; transform: translateY(6px); opacity: 0; transition: opacity .4s, transform .4s; }
.in .prop .tile { opacity: 1; transform: none; }
.prop .tile b { font-size: 11px; font-weight: 600; line-height: 1.25; position: relative; }
.prop .tile small { font: 500 9.5px var(--mono); color: #c9ced6; position: relative; }
.prop .tile.seen::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--w); background: #f2b600; }
.prop .t1 { background: #3a2f4f; } .prop .t2 { background: #2f4a44; } .prop .t3 { background: #4a3a2b; } .prop .t4 { background: #2b3a4f; } .prop .t5 { background: #4f2f3a; }
.in .prop .tiles .tile:nth-child(2) { transition-delay: .06s; } .in .prop .tiles .tile:nth-child(3) { transition-delay: .12s; } .in .prop .tiles .tile:nth-child(4) { transition-delay: .18s; } .in .prop .tiles .tile:nth-child(5) { transition-delay: .24s; }
.prop .pad { height: 16px; }

/* Send and close */
.send { display: grid; grid-template-columns: 1fr 300px; min-height: 380px; }
.mail { padding: 16px; display: flex; flex-direction: column; gap: 0; }
.mail .f { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.mail .f span:first-child { width: 56px; color: var(--ink-2); }
.mail .bodytx { padding: 12px 0; line-height: 1.6; }
.linkcard { display: flex; border: 1px solid var(--ink); max-width: 420px; }
.linkcard .lt { width: 120px; background: #0f1115; display: grid; place-items: center; color: #fff; font: 600 13px "Inter Tight", sans-serif; flex: none; }
.linkcard .lb { padding: 10px; } .linkcard .lb b { display: block; } .linkcard .lb small { color: var(--ink-2); }
.mail .sendrow { margin-top: auto; display: flex; gap: 8px; align-items: center; padding-top: 12px; }
.feed { border-left: 1px solid var(--ink); display: flex; flex-direction: column; }
.feed .ch { padding: 10px 12px; border-bottom: 1px solid var(--ink); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.ev { display: flex; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s; }
.in .ev { opacity: 1; transform: none; }
.in .ev:nth-child(3) { transition-delay: .3s; } .in .ev:nth-child(4) { transition-delay: .6s; } .in .ev:nth-child(5) { transition-delay: .9s; } .in .ev:nth-child(6) { transition-delay: 1.2s; }
.ev .d { width: 8px; height: 8px; background: var(--ink); margin-top: 5px; flex: none; }
.ev small { display: block; color: var(--ink-3); font-size: 11px; }
.won { margin-top: auto; padding: 12px; border-top: 1px solid var(--ink); display: flex; align-items: center; gap: 8px; }
.won .tag { transition: background .3s, color .3s; }
.closed .won .tag { background: var(--green-3); color: var(--green-11); }

/* Tools it replaces */
.replace { padding-top: 120px; padding-bottom: 40px; }
.replace .grid5 { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--ink); margin-top: 32px; }
.replace .tool { padding: 18px; display: flex; flex-direction: column; gap: 10px; min-height: 210px; }
.replace .tool + .tool { border-left: 1px solid var(--ink); }
.replace .tool .art { height: 70px; border: 1px solid var(--ink); position: relative; overflow: hidden; display: grid; place-items: center; }
.replace .tool .art svg { width: 26px; height: 26px; position: relative; z-index: 1; }
.replace .tool .art::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); mix-blend-mode: multiply; opacity: .3; }
.replace .tool b { font-weight: 600; }
.replace .tool p { margin: 0; color: var(--ink-2); font-size: 13px; }
.replace .tool .now { margin-top: auto; font: 500 11px var(--mono); }
.replace .sum { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid var(--ink); border-top: 0; padding: 16px 18px; background: var(--ink); color: #fff; }

/* Security */
.sec2 { padding-top: 120px; padding-bottom: 40px; }
.sec2 .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ink); margin-top: 32px; }
.sec2 .grid4 > div { padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; min-height: 190px; }
.sec2 .grid4 > div + div { border-left: 1px solid var(--ink); }
.sec2 .n { font: 500 11px var(--mono); color: var(--ink-2); }
.sec2 b { font: 600 17px "Inter Tight", sans-serif; letter-spacing: -.01em; }
.sec2 p { margin: 0; color: var(--ink-2); font-size: 13.5px; }

/* Pricing */
.pricing { padding-top: 120px; padding-bottom: 40px; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ink); margin-top: 32px; }
.plan { padding: 22px 18px; display: flex; flex-direction: column; gap: 12px; }
.plan + .plan { border-left: 1px solid var(--ink); }
.plan.pop { background: var(--band-stone); position: relative; }
.plan.pop::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); mix-blend-mode: multiply; opacity: .25; pointer-events: none; }
.plan > * { position: relative; }
.plan .pn { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.plan .price { font: 600 34px/1 "Inter Tight", sans-serif; letter-spacing: -.03em; }
.plan .price small { font: 400 13px "Inter", sans-serif; color: var(--ink-2); letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 7px; font-size: 13.5px; }
.plan li { display: flex; gap: 8px; } .plan li::before { content: ""; width: 6px; height: 6px; background: var(--ink); margin-top: 8px; flex: none; }
.plan .btn { justify-content: center; margin-top: auto; }
.fine { color: var(--ink-2); margin-top: 12px; }

/* FAQ */
.faq { padding-top: 120px; padding-bottom: 40px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; }
.faq details { border-top: 1px solid var(--ink); padding: 16px 0; }
.faq details:last-child { border-bottom: 1px solid var(--ink); }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; font: 400 18px/1 var(--mono); }
.faq details[open] summary::after { content: "−"; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { color: var(--ink-2); margin: 10px 0 0; max-width: 640px; }

/* Closing */
.closing { margin-top: 120px; }
.closing .band { text-align: center; padding: 80px 24px; }
.closing h2 { max-width: 760px; margin: 0 auto 26px; }


@media (max-width: 900px) {
  .unify { grid-template-columns: minmax(0, 1fr); } .wires { display: none; } .srcs { border-right: 0; border-bottom: 1px solid var(--ink); }
  .meet, .send { grid-template-columns: minmax(0, 1fr); } .meet .r, .feed { border-left: 0; border-top: 1px solid var(--ink); }
  .lib { grid-template-columns: repeat(2, 1fr); }
  .prop .billboard > * { max-width: 100%; } .prop .billboard::after { opacity: .25; width: 100%; }
  .prop .tiles { grid-template-columns: repeat(5, 46%); overflow-x: auto; }
  .facts { grid-template-columns: 1fr; } .facts div + div { border-left: 0; border-top: 1px solid var(--ink); }
  .replace .grid5, .sec2 .grid4, .plans { grid-template-columns: minmax(0, 1fr); }
  .replace .tool + .tool, .sec2 .grid4 > div + div, .plan + .plan { border-left: 0; border-top: 1px solid var(--ink); }
  .replace .sum { flex-direction: column; align-items: flex-start; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .learn { grid-template-columns: minmax(0, 1fr); }
  .prop .pnav span:not(.mono) { display: none; } .prop .pnav .mono { display: none; }
  .prop .billboard { margin: 0 12px; padding: 18px 14px; }
  .chev a { font-size: 11.5px; line-height: 1.2; }
}
@media (prefers-reduced-motion: reduce) {
  .src, .ans li, .prop .tile, .ev { opacity: 1; transform: none; } .wires path { stroke-dashoffset: 0; } .learn .bars i { transform: none; }
}

/* Buttons drawn inside product shots */
.om-home .ui-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--ink); background: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.om-home .ui-btn.pri { background: var(--ink); color: #fff; }
.om-home .ui-btn.done { background: var(--green-11); border-color: var(--green-11); }
.om-home .hero .btn, .om-home .closing .btn, .om-home .plan .btn, .om-home .sum .btn { border-radius: 0; }
.om-home img.av { display: inline-block; }
.om-home .lg { display: inline-block; }
.om-home .signup .btn { height: 46px; border-left: 1px solid var(--ink); }

.om-home .grow { flex: 1; }

/* ---------- Room to breathe ----------
   More space on the homepage: a wider page, bigger gaps between sections and between each section's words and its
   screenshot, larger body text, and more padding inside the product frames and cards. Phones get a lighter version. */
.om-home .wrap { max-width: 1320px; }
@media (min-width: 768px) { .om-home .wrap { padding-inline: 48px; } }
.om-home .hero { padding-top: 120px; padding-bottom: 72px; }
.om-home .kicker { margin-bottom: 32px; }
.om-home .lede { font-size: 19px; line-height: 1.55; max-width: 600px; margin: 32px auto 40px; }
.om-home .note { margin-top: 16px; }
.om-home .hero .band { margin-top: 24px; }
.om-home .band { padding: 72px; }
.om-home .works { padding-top: 48px; padding-bottom: 24px; }
.om-home .chapter { padding-top: 200px; padding-bottom: 64px; }
.om-home .chapter:first-of-type { padding-top: 160px; }
.om-home .chead { gap: 48px; margin-bottom: 48px; }
.om-home .chead p { font-size: 17px; line-height: 1.6; max-width: 460px; }
.om-home .stages { margin-bottom: 24px; }
.om-home .stage { padding-top: 128px; padding-bottom: 32px; }
.om-home .stage .node { top: 132px; }
.om-home .shead { gap: 64px; margin-bottom: 56px; }
.om-home .shead p { font-size: 17px; line-height: 1.6; max-width: 500px; }
.om-home .shead ul { margin-top: 24px; gap: 10px; font-size: 15px; }
.om-home .replace, .om-home .sec2, .om-home .pricing, .om-home .faq { padding-top: 200px; padding-bottom: 48px; }
.om-home .replace .grid5, .om-home .sec2 .grid4, .om-home .plans { margin-top: 56px; }
.om-home .replace .tool { padding: 28px 24px; min-height: 240px; }
.om-home .replace .tool p, .om-home .sec2 p { font-size: 14.5px; line-height: 1.55; }
.om-home .replace .sum { padding: 20px 24px; }
.om-home .sec2 .grid4 > div { padding: 32px 28px; min-height: 230px; gap: 14px; }
.om-home .plan { padding: 32px 28px; gap: 16px; }
.om-home .plan ul { gap: 10px; font-size: 14.5px; }
.om-home .fine { margin-top: 20px; }
.om-home .faq { gap: 96px; }
.om-home .faq details { padding: 22px 0; }
.om-home .closing { margin-top: 200px; margin-bottom: 120px; }
.om-home .closing .band { padding: 120px 32px; }
.om-home .closing h2 { margin-bottom: 36px; }
@media (max-width: 900px) {
  .om-home .hero { padding-top: 72px; padding-bottom: 40px; }
  .om-home .lede { font-size: 17px; margin: 24px auto 32px; }
  .om-home .band { padding: 16px; }
  .om-home .chapter, .om-home .chapter:first-of-type { padding-top: 120px; padding-bottom: 32px; }
  .om-home .chead, .om-home .shead { gap: 20px; margin-bottom: 32px; }
  .om-home .chead p, .om-home .shead p { font-size: 16px; }
  .om-home .stage { padding-top: 72px; }
  .om-home .stage .node { top: 76px; }
  .om-home .replace, .om-home .sec2, .om-home .pricing, .om-home .faq { padding-top: 120px; }
  .om-home .replace .grid5, .om-home .sec2 .grid4, .om-home .plans { margin-top: 32px; }
  .om-home .faq { gap: 24px; }
  .om-home .closing { margin-top: 120px; margin-bottom: 64px; }
  .om-home .closing .band { padding: 72px 20px; }
}

/* ---------- Replace five tools: a drawn scene per tool ----------
   Each card shows the part of Omniscient that replaces the tool, drawn like the product shots above: white frames
   with black borders on a dotted gray ground. They build in once when the row comes into view. */
.replace .tool .art.ra { height: 188px; display: flex; align-items: center; justify-content: center; padding: 14px; background-color: var(--fill); background-image: radial-gradient(#cfcfcf 1px, transparent 1px); background-size: 14px 14px; text-align: left; font-size: 10.5px; line-height: 1.25; }
.ra > :first-child { width: 100%; position: relative; z-index: 1; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.replace .tool:hover .ra > :first-child { transform: translateY(-3px); }
.ra svg { width: 11px; height: 11px; flex: none; }
.ra b { font-weight: 600; }
.ra i { font-style: normal; }

/* Lead database: a search and three scored leads. */
.ra-leads .rw { background: #fff; border: 1px solid var(--ink); }
.ra-leads .rq { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-bottom: 1px solid var(--ink); font: 500 9.5px var(--mono); white-space: nowrap; overflow: hidden; }
.ra-leads .rq span { overflow: hidden; text-overflow: ellipsis; }
.ra-leads .rl { display: grid; grid-template-columns: 20px 1fr auto; gap: 7px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.ra-leads .rl:last-child { border-bottom: 0; }
.ra-leads .av { width: 20px; height: 20px; font-size: 7.5px; }
.ra-leads .nm { min-width: 0; } .ra-leads .nm b, .ra-leads .nm i { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-leads .nm i { color: var(--ink-2); font-size: 9px; margin-top: 1px; }
.ra-leads .sc { font: 600 10px var(--mono); padding: 1px 4px; background: var(--ink); color: #fff; }
.ra-leads .sc.lo { background: #fff; color: var(--ink); border: 1px solid var(--ink); padding: 0 3px; }

/* LinkedIn outreach: a three-step sequence with an approval. */
.ra-li .seq { display: flex; flex-direction: column; align-items: stretch; }
.ra-li .sn { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; background: #fff; border: 1px solid var(--ink); white-space: nowrap; }
.ra-li .sn b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ra-li .sn.on { outline: 1px solid var(--ink); }
.ra-li .ok { font-size: 9px; padding: 0 4px; border: 1px solid currentColor; color: var(--green-11); background: var(--green-3); }
.ra-li .ap { font-size: 9px; padding: 1px 5px; background: var(--ink); color: #fff; }
.ra-li .mut { font-size: 9px; color: var(--ink-2); }
.ra-li .wt { position: relative; display: block; height: 18px; padding-left: calc(50% + 6px); font: 500 8.5px/18px var(--mono); color: var(--ink-2); }
.ra-li .wt::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--ink); }

/* CRM: a small pipeline board, the open deal in black. */
.ra-crm .kb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; align-items: start; }
.ra-crm .col { display: flex; flex-direction: column; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--ink); min-height: 120px; }
.ra-crm .ch { font: 500 8.5px var(--mono); color: var(--ink-2); padding: 1px 1px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-crm .cd { display: flex; flex-direction: column; gap: 1px; padding: 4px 5px; border: 1px solid var(--ink); background: #fff; }
.ra-crm .cd b { font-size: 9.5px; } .ra-crm .cd i { font: 500 8.5px var(--mono); color: var(--ink-2); }
.ra-crm .cd.hot { background: var(--ink); color: #fff; } .ra-crm .cd.hot i { color: #c9c9c9; }
.ra-crm .cd.won { border-color: var(--green-11); background: var(--green-3); } .ra-crm .cd.won i { color: var(--green-11); }

/* Call notes: the call's waveform and the facts pulled from it. */
.ra-call .cw { background: #fff; border: 1px solid var(--ink); padding: 8px 9px 4px; }
.ra-call .wave { display: flex; align-items: flex-end; gap: 2px; height: 30px; padding-bottom: 6px; }
.ra-call .wave i { width: 3px; background: var(--ink); transform-origin: bottom; }
.ra-call .wave span { margin-left: auto; align-self: flex-start; font: 500 8.5px var(--mono); color: var(--ink-2); }
.ra-call .fx { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-top: 1px solid var(--line); white-space: nowrap; }
.ra-call .fx > span { font-size: 8.5px; padding: 0 4px; border: 1px solid currentColor; flex: none; }
.ra-call .fx b { font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
.ra-call .t-b { color: var(--green-11); background: var(--green-3); } .ra-call .t-t { color: var(--yellow-11); background: var(--yellow-3); } .ra-call .t-d { color: var(--purple-11); background: var(--purple-3); }

/* Proposals and content: the buyer's proposal page, and that they've read it. */
.ra-prop { position: relative; }
.ra-prop .pp { background: #0f1115; border: 1px solid var(--ink); color: #fff; padding-bottom: 7px; }
.ra-prop .ph { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 7px; font-size: 8.5px; color: #a3a3a3; white-space: nowrap; }
.ra-prop .ph span { font: 600 8.5px var(--mono); color: #fff; } .ra-prop .ph i { overflow: hidden; text-overflow: ellipsis; }
.ra-prop .hero { margin: 0 7px; padding: 9px 8px; background: #222a35; border: 1px solid #2a2f37; }
.ra-prop .hero b { display: block; font: 600 10.5px/1.2 "Inter Tight", sans-serif; letter-spacing: -.01em; margin-bottom: 7px; }
.ra-prop .play { display: inline-block; font-size: 8.5px; font-weight: 600; background: #fff; color: #0f1115; padding: 2px 6px; }
.ra-prop .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px 7px 0; }
.ra-prop .tiles i { aspect-ratio: 16 / 9; border: 1px solid #2a2f37; background: #161b22; }
.ra-prop .seen { position: absolute; z-index: 2; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; background: #fff; border: 1px solid var(--ink); font: 500 9px var(--mono); }

/* They build in once, when the row comes into view. */
.grid5[data-anim] .ra-leads .rl, .grid5[data-anim] .ra-li .sn, .grid5[data-anim] .ra-li .wt, .grid5[data-anim] .ra-crm .cd, .grid5[data-anim] .ra-call .fx, .grid5[data-anim] .ra-prop .tiles i, .grid5[data-anim] .ra-prop .seen { opacity: 0; transform: translateY(5px); transition: opacity .4s, transform .4s cubic-bezier(.2,.8,.2,1); }
.grid5[data-anim] .ra-call .wave i { transform: scaleY(.15); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.grid5.in .ra-leads .rl, .grid5.in .ra-li .sn, .grid5.in .ra-li .wt, .grid5.in .ra-crm .cd, .grid5.in .ra-call .fx, .grid5.in .ra-prop .tiles i, .grid5.in .ra-prop .seen { opacity: 1; transform: none; }
.grid5.in .ra-call .wave i { transform: none; }
.ra-leads .rl:nth-child(3), .ra-li > .seq > :nth-child(2), .ra-li > .seq > :nth-child(3), .ra-crm .col:nth-child(2) .cd, .ra-call .fx:nth-of-type(3), .ra-prop .tiles i:nth-child(2) { transition-delay: .1s !important; }
.ra-leads .rl:nth-child(4), .ra-li > .seq > :nth-child(4), .ra-li > .seq > :nth-child(5), .ra-crm .col:nth-child(3) .cd, .ra-call .fx:nth-of-type(4), .ra-prop .tiles i:nth-child(3) { transition-delay: .2s !important; }
.ra-prop .seen { transition-delay: .45s !important; }
.ra-call .wave i:nth-child(1) { height: 30%; } .ra-call .wave i:nth-child(2) { height: 55%; } .ra-call .wave i:nth-child(3) { height: 80%; } .ra-call .wave i:nth-child(4) { height: 45%; }
.ra-call .wave i:nth-child(5) { height: 100%; } .ra-call .wave i:nth-child(6) { height: 60%; } .ra-call .wave i:nth-child(7) { height: 35%; } .ra-call .wave i:nth-child(8) { height: 70%; }
.ra-call .wave i:nth-child(9) { height: 90%; } .ra-call .wave i:nth-child(10) { height: 40%; } .ra-call .wave i:nth-child(11) { height: 25%; } .ra-call .wave i:nth-child(12) { height: 65%; }
.ra-call .wave i:nth-child(13) { height: 85%; } .ra-call .wave i:nth-child(14) { height: 50%; } .ra-call .wave i:nth-child(15) { height: 30%; } .ra-call .wave i:nth-child(16) { height: 75%; }
.ra-call .wave i:nth-child(17) { height: 45%; } .ra-call .wave i:nth-child(18) { height: 20%; }
@media (max-width: 900px) {
  .replace .tool .art.ra { height: 220px; }
  .ra > :first-child { max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .grid5[data-anim] .ra *, .grid5[data-anim] .ra .wave i { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.replace .grid5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .replace .grid5 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Three things it does ----------
   The words stay put on the left and change as each screen scrolls by, after Lightfield. Each screen is shown in
   full, sized to fit its frame (home.js sets the zoom), and plays what's going on in it each time it comes in. */
.shows { display: grid; grid-template-columns: minmax(290px, 27%) minmax(0, 1fr); gap: 48px; max-width: 1680px; margin: 0 auto; padding: 40px 40px 0; }
.shows-pin { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: flex; align-items: center; }
.st-box { position: relative; width: 100%; min-height: 300px; }
.st { position: absolute; left: 0; right: 0; top: 50%; opacity: 0; transform: translateY(calc(-50% + 16px)); transition: opacity .45s, transform .45s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.st.on { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.st-n { display: block; color: var(--ink-3); margin-bottom: 16px; }
.st h2, .show-m h2 { font: 600 40px/1.04 "Inter Tight", sans-serif; letter-spacing: -.04em; max-width: 12ch; }
.st p, .show-m p { margin: 20px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 380px; }
.show { min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; padding: 48px 0; }
.show-m { display: none; }
.show-stage { border: 1px solid var(--ink); background-color: var(--fill); background-image: radial-gradient(#cfcfcf 1px, transparent 1px); background-size: 16px 16px; padding: 32px; }
.screen-fit { width: 100%; }
.screen-fit > * { width: 920px; }
.screen-fit .unify { min-height: 0; }
.prop { position: relative; }

/* What each screen plays. Scout: the search underlines, rows arrive, the count runs. CRM: sources slide in, wires
   draw, the timeline fills in. Deal Room: tiles fill, the watch bar runs, and a notice says who's watching. */
.show-stage .rows tr { transition-duration: .5s; }
.in .rows tr:nth-child(2) { transition-delay: .25s; } .in .rows tr:nth-child(3) { transition-delay: .5s; } .in .rows tr:nth-child(4) { transition-delay: .75s; } .in .rows tr:nth-child(5) { transition-delay: 1s; }
.show-stage .tl div { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s cubic-bezier(.2,.8,.2,1); }
.in .tl div { opacity: 1; transform: none; }
.in .tl div:nth-child(1) { transition-delay: 1.1s; } .in .tl div:nth-child(2) { transition-delay: 1.35s; } .in .tl div:nth-child(3) { transition-delay: 1.6s; } .in .tl div:nth-child(4) { transition-delay: 1.85s; }
.show-stage .prop .tile.seen::after { width: 0; transition: width 2.4s linear .8s; }
.in .prop .tile.seen::after { width: var(--w); }
.ptoast { position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; background: #fff; color: var(--ink); border: 1px solid var(--ink); opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s cubic-bezier(.2,.8,.2,1); }
.ptoast img { border-radius: 999px; object-fit: cover; }
.ptoast span { font-size: 12px; line-height: 1.35; } .ptoast small { display: block; color: var(--ink-2); font-size: 11px; }
.in .ptoast { opacity: 1; transform: none; transition-delay: 1.6s; }
.ptoast::before { content: ""; position: absolute; left: 30px; top: 9px; width: 8px; height: 8px; border-radius: 999px; background: var(--signal); border: 2px solid #fff; }

@media (max-width: 900px) {
  .shows { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 24px 16px 0; }
  .shows-side { display: none; }
  .show { min-height: 0; padding: 48px 0; gap: 24px; }
  .show-m { display: block; }
  .show-m h2 { font-size: 30px; }
  .show-stage { padding: 14px; }
  .screen-fit .side { display: none; }
  .screen-fit .app { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .show-stage .tl div, .ptoast { opacity: 1; transform: none; transition: none; }
  .show-stage .prop .tile.seen::after { width: var(--w); transition: none; }
  .st { transition: none; }
}