between two full sections inherits the neighbour's 130px padding on top of its own, so the row floats in a hole. .band-slim drops the section's padding and pulls the row into the space the neighbours already leave — about 72px clear on each side. Typed as section.band-slim so it also beats the .section-sm media queries. */ section.band-slim{ padding:0; margin:-58px 0; } section.band-slim .kpi-row{ margin-top:0; } /* ---------- feature cards ---------- */ .f-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .f-grid.two{ grid-template-columns:repeat(2,1fr); } .f-grid.four{ grid-template-columns:repeat(4,1fr); } .f-card{ background:var(--tile); border:1px solid var(--line); border-radius:var(--r-card); padding:32px 28px; transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s; } .f-card:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -28px rgba(16,16,16,.16); } .f-ico{ width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:var(--cream); color:var(--orange-2); margin-bottom:20px; } .f-card h3{ font-size:20px; letter-spacing:-0.025em; line-height:1.25; } .f-card p{ color:var(--mut); font-size:15px; margin-top:10px; } .f-card .kick{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); display:block; margin-bottom:12px; } a.f-card{ display:block; } a.f-card:hover h3{ color:var(--orange); } /* ---------- link cards (hub pages) ---------- */ .link-card{ display:flex; flex-direction:column; justify-content:space-between; gap:44px; background:var(--tile); border:1px solid var(--line); border-radius:var(--r-card); padding:32px 28px 26px; transition:background .3s, color .3s, border-color .3s, transform .3s; } .link-card:hover{ background:var(--fg); border-color:var(--fg); color:#fff; transform:translateY(-4px); } .link-card h3{ font-size:23px; letter-spacing:-0.025em; line-height:1.2; margin-top:12px; } .link-card p{ color:var(--mut); font-size:15px; margin-top:12px; } .link-card:hover p{ color:rgba(255,255,255,.65); } .link-card .kick{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); } .arrow-btn{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:all .3s; margin-left:auto; } .link-card:hover .arrow-btn{ background:var(--orange); border-color:var(--orange); color:#fff; transform:rotate(-45deg); } /* ---------- split (text + dark visual) ---------- */ /* Each split sits in its own white card, so a page of them reads as a stack of panels rather than copy floating beside screenshots. The dark product mock inside gains contrast from the white ground. */ .split{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(30px, 3.6vw, 56px); align-items:center; background:var(--tile); border:1px solid var(--line); border-radius:32px; padding:clamp(28px, 3.2vw, 48px); } .split + .split{ margin-top:20px; } /* A .split card followed by a card grid (the rollout steps on case-studies) otherwise sits flush against it — both are bordered cards, so they read as one broken box. 20px is the same gap .steps-num uses between its own cards, which keeps the whole group on one rhythm. */ .split + .steps-num{ margin-top:20px; } .split.rev .split-text{ order:2; } .split-text h2{ font-size:clamp(30px,3.8vw,46px); margin:18px 0 16px; } .split-text p{ color:var(--mut); font-size:16.5px; max-width:520px; } .split-text .check-list{ margin-top:26px; } .check-list li{ display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line); font-size:15.5px; } .check-list li:last-child{ border-bottom:0; } .check-list li::before{ content:"✓"; flex:none; width:20px; height:20px; border-radius:50%; background:var(--cream); color:var(--orange-2); font-size:11px; font-weight:700; display:grid; place-items:center; margin-top:2px; } .check-list.on-dark li{ border-color:rgba(255,255,255,.1); } .check-list.on-dark li::before{ background:rgba(255,77,0,.16); color:var(--orange); } /* ---------- tags ---------- */ .tile-kicker{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); margin-bottom:18px; display:block; } .tag-row{ display:flex; flex-wrap:wrap; gap:8px; } .tag{ font-size:13px; font-weight:500; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--tile); color:var(--fg); transition:border-color .25s; } .tag:hover{ border-color:var(--fg); } .tag-group{ margin-bottom:14px; } .tag-group h4{ font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; margin-bottom:9px; color:var(--mut); } /* ---------- dark product frame / mock ---------- */ .frame, .stage{ background:var(--dark); border-radius:20px; overflow:hidden; position:relative; color:#fff; border:1px solid rgba(255,255,255,.08); box-shadow:0 40px 90px -50px rgba(16,16,16,.5); } .frame-bar{ display:flex; align-items:center; gap:7px; padding:13px 18px; border-bottom:1px solid rgba(255,255,255,.07); } .frame-bar i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.15); } .frame-bar i:first-child{ background:var(--orange); } .frame-url{ margin:0 auto; font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.45); background:rgba(255,255,255,.06); border-radius:999px; padding:4px 16px; letter-spacing:.04em; } .frame-body{ padding:26px 28px; text-align:left; } .frame-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; } .frame-fund{ font-weight:600; font-size:15px; } .frame-fund small{ display:block; font-family:var(--mono); font-weight:400; font-size:10.5px; color:rgba(255,255,255,.45); letter-spacing:.1em; margin-top:4px; } .frame-live{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--orange); border:1px solid rgba(255,77,0,.4); padding:4px 10px; border-radius:999px; } .frame-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--orange); animation:pulse 1.6s ease-in-out infinite; } @keyframes pulse{ 50%{ opacity:.2 } } .frame-nav .lab{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45); } .frame-nav .val{ font-family:var(--mono); font-weight:600; font-size:clamp(22px,2.6vw,30px); margin-top:6px; font-variant-numeric:tabular-nums; } .frame-stats{ display:flex; gap:26px; margin-top:18px; flex-wrap:wrap; } .frame-stat .v{ font-weight:700; font-size:17px; color:var(--orange); } .frame-stat .k{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:rgba(255,255,255,.45); margin-top:2px; } .view-h{ display:flex; gap:26px; margin-bottom:18px; flex-wrap:wrap; } .wf{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:10px; height:130px; border-bottom:1px solid rgba(255,255,255,.1); } .wf-col{ position:relative; } .wf-bar{ position:absolute; left:3px; right:3px; border-radius:5px 5px 3px 3px; background:linear-gradient(180deg,#FF7A3D,var(--orange)); } .wf-col.total .wf-bar{ background:linear-gradient(180deg,#fff,#FFD9C4); } .wf-labs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:8px; } .wf-labs span{ font-family:var(--mono); font-size:9.5px; color:rgba(255,255,255,.4); text-align:center; letter-spacing:.05em; } .pos{ display:grid; grid-template-columns:1.1fr 1.6fr auto; gap:14px; align-items:center; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:13.5px; } .pos:last-child{ border-bottom:0; } .pos-bar{ height:6px; background:rgba(255,255,255,.09); border-radius:99px; overflow:hidden; } .pos-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#FF7A3D,var(--orange)); } .pos-val{ font-family:var(--mono); font-size:12px; color:var(--orange); } .deal{ display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:13.5px; } .deal:last-child{ border-bottom:0; } .deal .amt{ font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.6); margin-left:auto; } .pill{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; padding:3px 10px; border-radius:999px; border:1px solid; flex:none; } .pill.done{ color:#7BE0A3; border-color:rgba(123,224,163,.35); } .pill.sign{ color:#fff; border-color:rgba(255,255,255,.3); } .pill.dil{ color:var(--orange); border-color:rgba(255,77,0,.4); } .pill.warn{ color:#FFC46B; border-color:rgba(255,196,107,.4); } /* ---------- dark band ---------- */ .band-dark{ background:var(--dark); color:#fff; border-radius:32px; padding:80px 60px; margin:0 24px; max-width:1132px; margin-inline:auto; position:relative; overflow:hidden; } .band-dark h2{ font-size:clamp(30px,4vw,50px); } .band-dark p{ color:rgba(255,255,255,.66); font-size:17px; max-width:640px; } .band-dark .chip-label{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.6); } .band-dark::before{ content:""; position:absolute; top:-50%; right:-10%; width:60%; height:140%; background:radial-gradient(50% 50% at 50% 50%, rgba(255,77,0,.16), transparent 70%); pointer-events:none; } /* ---------- numbered process ---------- Equal-height tiles with a chevron in each gap. The earlier version staggered the steps down a staircase, which left holes in the row and ran the last rule off the right edge — tiles read as a sequence without needing the stagger. The chevrons are pseudo-elements, so reading order stays a plain numbered list. */ .steps-num{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:s; align-items:stretch; } .steps-num.three{ grid-template-columns:repeat(3,1fr); } .step-n{ position:relative; counter-increment:s; background:var(--tile); border:1px solid var(--line); border-radius:var(--r-card); padding:28px 26px 30px; transition:transform .35s cubic-bezier(.2,.8,.3,1), border-color .35s, box-shadow .35s; } .step-n:hover{ transform:translateY(-5px); border-color:var(--fg); box-shadow:0 26px 52px -30px rgba(16,16,16,.20); } /* the numeral, as a badge */ .step-n::before{ content:"0" counter(s); display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--cream); color:var(--orange-2); font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.08em; margin-bottom:22px; transition:background .35s, color .35s; } .step-n:hover::before{ background:var(--orange); color:#fff; } .step-n h3{ font-size:19px; letter-spacing:-0.02em; line-height:1.3; } .step-n p{ color:var(--mut); font-size:14.5px; margin-top:10px; } /* chevron sitting in the gap, pointing at the next step */ .steps-num > .step-n:not(:last-child)::after{ content:""; position:absolute; top:50%; right:-16px; width:12px; height:12px; margin-top:-6px; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3.5 1.5L8 6l-4.5 4.5' stroke='%23FF4D00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; } /* inverted, for a sequence placed on a dark or orange surface */ .band-dark .step-n, .tint-black .step-n, .tint-orange .step-n{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#fff; } .band-dark .step-n:hover, .tint-black .step-n:hover, .tint-orange .step-n:hover{ border-color:#fff; box-shadow:none; } .band-dark .step-n::before, .tint-black .step-n::before, .tint-orange .step-n::before{ background:rgba(255,255,255,.12); color:#fff; } .band-dark .step-n p, .tint-black .step-n p, .tint-orange .step-n p{ color:rgba(255,255,255,.7); } .band-dark .steps-num > .step-n:not(:last-child)::after, .tint-black .steps-num > .step-n:not(:last-child)::after, .tint-orange .steps-num > .step-n:not(:last-child)::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3.5 1.5L8 6l-4.5 4.5' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ---------- capital lifecycle rail ---------- Nodes on a continuous rail, for showing capital moving through the platform rather than a list of features. Built for a dark surface (inside .frame). */ .flow{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:10px; padding-top:8px; } .flow::before{ content:""; position:absolute; left:10%; right:10%; top:26px; height:1px; background:linear-gradient(90deg, rgba(255,77,0,.7), rgba(255,255,255,.22)); } .flow-node{ position:relative; text-align:center; padding-top:60px; } .flow-node::before{ content:attr(data-step); position:absolute; top:8px; left:50%; transform:translateX(-50%); width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--dark); border:1px solid rgba(255,255,255,.22); font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--orange); transition:background .3s, border-color .3s, color .3s; } .flow-node:hover::before{ background:var(--orange); border-color:var(--orange); color:#fff; } .flow-node h4{ font-size:15px; font-weight:600; letter-spacing:-0.01em; color:#fff; } .flow-node .amt-lab{ display:block; margin-top:8px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); line-height:1.6; } .flow-node p{ color:rgba(255,255,255,.62); font-size:13px; margin-top:10px; text-wrap:pretty; } @media (max-width:900px){ .flow{ grid-template-columns:1fr 1fr; gap:24px 12px; } .flow::before{ display:none; } .flow-node{ padding-top:52px; } } @media (max-width:560px){ .flow{ grid-template-columns:1fr; } } /* ---------- tabs ---------- */ .tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; } .tab{ font-family:var(--font); font-size:14px; font-weight:500; color:var(--mut); background:var(--tile); border:1px solid var(--line); border-radius:999px; padding:10px 18px; cursor:pointer; transition:all .25s; } .tab:hover{ border-color:var(--fg); color:var(--fg); } .tab.active{ background:var(--fg); border-color:var(--fg); color:#fff; } .panel{ display:none; } .panel.active{ display:block; animation:fadeUp .5s cubic-bezier(.2,.8,.3,1); } /* ---------- agent directory ---------- Each agent is a

card: the summary carries the name and one line, expanding to the detail, with a link through to that agent's own page. Native disclosure, so it works with JavaScript off and several can be open at once (the single-open behaviour in caphive.js is scoped to .faq only). */ /* two columns throughout: the four-agent groups fall as a tidy 2x2 and the two-agent groups fill their row, so no group ever leaves an orphan card */ .agent-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; align-items:start; } .agent-card{ background:var(--tile); border:1px solid var(--line); border-radius:var(--r-card); padding:26px 26px 24px; transition:border-color .3s, box-shadow .3s, transform .3s cubic-bezier(.2,.8,.3,1); } .agent-card:hover{ border-color:var(--fg); transform:translateY(-3px); box-shadow:0 24px 48px -30px rgba(16,16,16,.18); } .agent-card[open]{ border-color:var(--fg); transform:none; } .agent-card > summary{ list-style:none; cursor:pointer; display:block; } .agent-card > summary::-webkit-details-marker{ display:none; } .agent-card .kick{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); margin-bottom:12px; } /* Uniform collapsed geometry: the name reserves two lines and the one-liner is clamped to three, so every card in a row is the same size regardless of how long its sentence is. Expanding one card grows only that card. */ .agent-card h3{ font-size:19px; letter-spacing:-0.025em; line-height:1.25; padding-right:38px; min-height:2.5em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .agent-card .one{ color:var(--mut); font-size:14.5px; margin-top:10px; line-height:1.5; min-height:4.5em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* the +/- affordance, matching the FAQ */ .agent-card > summary{ position:relative; } .agent-card > summary::after{ content:"+"; position:absolute; top:-4px; right:0; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-weight:400; font-size:17px; color:var(--mut); transition:background .3s, border-color .3s, color .3s; } .agent-card[open] > summary::after{ content:"–"; background:var(--orange); border-color:var(--orange); color:#fff; } .agent-body{ margin-top:20px; padding-top:20px; border-top:1px solid var(--line); } .agent-body .check-list li{ font-size:14px; padding:9px 0; } .agent-body .ask{ font-size:14px; color:var(--mut); margin-top:14px; text-wrap:pretty; } .agent-body .ask b{ color:var(--fg); font-weight:600; } /* the call to action on each card is a filled button, full card width, so it reads as the obvious next step rather than an afterthought link */ .agent-read{ margin-top:22px; width:100%; justify-content:center; } /* Each category sits in its own bounding box, cards on top of it. The boxes alternate white and a plain neutral grey — no tints, nothing saturated, since the cards inside already carry all the colour the directory needs. The grouping comes from the box edge and the alternation, not from hue. */ .agent-group{ border:1px solid var(--line); border-radius:32px; padding:clamp(28px, 3.2vw, 44px); } .agent-group + .agent-group{ margin-top:20px; } .agent-group .section-head{ margin-bottom:26px; } .ag-white{ background:var(--tile); border-color:var(--line); } /* Neutral, not the warm --cream: grey keeps the panel reading as a container rather than as another brand surface. Cards stay white on top of it. */ .ag-grey{ background:#F1F1F0; border-color:#E3E3E1; } @media (max-width:760px){ .agent-group{ padding:24px 20px; border-radius:24px; } } /* a lightweight fact strip for an agent's own page */ .agent-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; } .agent-fact{ border:1px solid var(--line); background:var(--tile); border-radius:16px; padding:20px 22px; } .agent-fact dt{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin-bottom:8px; } .agent-fact dd{ font-size:15px; font-weight:600; letter-spacing:-0.01em; } @media (max-width:1000px){ .agent-facts{ grid-template-columns:1fr; } } @media (max-width:700px){ .agent-grid{ grid-template-columns:1fr; } } /* ---------- chat mock ---------- */ .chat{ max-width:760px; margin:0 auto; background:var(--dark); color:#fff; border-radius:var(--r-card); overflow:hidden; display:flex; flex-direction:column; min-height:360px; border:1px solid rgba(255,255,255,.08); box-shadow:0 40px 90px -50px rgba(16,16,16,.5); } .chat-head{ display:flex; align-items:center; gap:9px; padding:15px 22px; border-bottom:1px solid rgba(255,255,255,.08); font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); } .chat-head::before{ content:""; width:9px; height:10.4px; background:var(--orange); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); } .chat-head .wordmark{ text-transform:none; letter-spacing:0; } .chat-sub{ margin-left:auto; text-transform:none; letter-spacing:.02em; color:rgba(255,255,255,.35); } .chat-body{ padding:26px; display:flex; flex-direction:column; gap:14px; flex:1; text-align:left; } .msg{ max-width:85%; padding:13px 18px; border-radius:18px; font-size:14.5px; line-height:1.55; } .msg.user{ align-self:flex-end; background:var(--orange); color:#fff; border-bottom-right-radius:6px; } .msg.ai{ align-self:flex-start; background:var(--dark-2); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.9); border-bottom-left-radius:6px; } .msg.typing-cursor::after{ content:"▍"; margin-left:1px; color:var(--orange); animation:blink 1s steps(1) infinite; } @keyframes blink{ 50%{ opacity:0 } } .typing-dots{ display:inline-flex; gap:5px; padding:5px 2px; } .typing-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); animation:bounce 1.2s ease-in-out infinite; } .typing-dots i:nth-child(2){ animation-delay:.15s } .typing-dots i:nth-child(3){ animation-delay:.3s } @keyframes bounce{ 30%{ transform:translateY(-5px); } } .chip{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--orange); border:1px solid rgba(255,77,0,.4); padding:4px 12px; border-radius:999px; } /* ---------- metrics / odometer ---------- */ .metrics-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .metric{ background:var(--tile); border:1px solid var(--line); border-radius:var(--r-card); padding:52px 24px; text-align:center; transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s; } .metric:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -28px rgba(16,16,16,.18); } .metric .num{ font-weight:800; letter-spacing:-0.02em; font-size:clamp(34px,3.4vw,52px); line-height:1; display:flex; align-items:baseline; justify-content:center; gap:10px; } .metric .num .cur{ font-size:.34em; font-weight:600; letter-spacing:.05em; color:var(--mut); } .metric .num .unit{ font-size:.5em; font-weight:800; } .metric .num .suffix{ color:var(--orange); font-size:.6em; } .metric .label{ margin-top:18px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--mut); line-height:1.6; } .odo-digit + .odo-digit{ margin-left:.035em; } .odo{ display:inline-flex; font-variant-numeric:tabular-nums; } .odo-digit{ height:1em; overflow:hidden; display:inline-block; } .odo-reel{ display:flex; flex-direction:column; transform:translateY(0); transition:transform 1.7s cubic-bezier(.16,1,.3,1); } .odo-reel span{ height:1em; line-height:1; display:block; text-align:center; } /* ---------- clients marquee ---------- */ .clients{ padding:64px 0; overflow:hidden; } .clients-label{ text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mut); margin-bottom:34px; } .marquee{ -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .marquee-track{ display:flex; gap:72px; width:max-content; animation:scroll 38s linear infinite; } .marquee:hover .marquee-track{ animation-play-state:paused; } .client{ font-weight:600; font-size:20px; color:#C4BEB3; white-space:nowrap; letter-spacing:-0.01em; transition:color .3s; } .client:hover{ color:var(--fg); } @keyframes scroll{ to{ transform:translateX(-50%); } } /* ---------- case cards ---------- */ .case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .case{ border:1px solid var(--line); border-radius:var(--r-card); padding:30px 28px 26px; background:var(--tile); display:flex; flex-direction:column; gap:56px; justify-content:space-between; transition:background .3s, color .3s, border-color .3s, transform .3s; } .case:hover{ background:var(--fg); border-color:var(--fg); color:#fff; transform:translateY(-4px); } .case-tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); } .case h3{ font-size:22px; margin-top:12px; line-height:1.25; letter-spacing:-0.02em; } .case p{ color:var(--mut); font-size:14.5px; margin-top:10px; } .case:hover p{ color:rgba(255,255,255,.65); } .case-foot{ display:flex; justify-content:flex-end; } .case-arrow{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:all .3s; } .case:hover .case-arrow{ background:var(--orange); border-color:var(--orange); color:#fff; transform:rotate(-45deg); } .case-out{ margin-top:18px; font-size:19px; font-weight:800; letter-spacing:-0.02em; color:var(--orange); } .case-out small{ display:block; font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); margin-top:4px; } .case:hover .case-out small{ color:rgba(255,255,255,.55); } /* ---------- trust strip ---------- */ .trust-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .trust-item{ display:flex; align-items:center; gap:12px; padding:18px 20px; border:1px solid var(--line); background:var(--tile); border-radius:16px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); transition:border-color .25s, color .25s; } /* The shield is already orange, so the hover picks up the border and the label to match it — the same treatment the cards elsewhere use, minus the lift, since a badge is not a link and should not read as one. */ .trust-item:hover{ border-color:var(--orange); color:var(--fg); } .trust-item svg{ flex:none; } /* ---------- testimonial ---------- */ .quote{ background:var(--tile); border:1px solid var(--line); border-radius:var(--r-card); padding:28px; } .quote p{ font-size:15.5px; color:var(--fg); } .quote p::before{ content:"“ "; color:var(--orange); font-family:var(--serif); font-size:22px; } .quote-who{ display:flex; align-items:center; gap:12px; margin-top:22px; } .avatar{ width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--cream); color:var(--orange-2); font-weight:700; font-size:14px; } .quote-who strong{ display:block; font-size:14.5px; } /* The founder's name links out to LinkedIn. a{color:inherit;text-decoration:none} strips every affordance, so the link carries its own rule. */ .quote-who strong a{ border-bottom:1px solid var(--line); } .quote-who strong a:hover{ color:var(--orange-2); border-color:var(--orange-2); } .quote-who span{ font-size:12.5px; color:var(--mut); } /* ---------- founder's message (About) ---------- A two-column letter, not a testimonial: attribution parked in a left rail and the message set straight onto the dark band. This deliberately does not reuse .quote — that is built for a one-line pull quote, so on a four-paragraph letter it drew a card inside the band and repeated its opening quote mark on every paragraph. One oversized mark opens the whole letter instead. .band-dark caps its own p at 640px for a lede; the letter takes the measure back, and both selectors weigh the same so this block has to stay below it. */ .founder{ display:grid; grid-template-columns:200px 1fr; gap:64px; align-items:start; } .founder-who{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; } .founder-who .avatar{ width:52px; height:52px; font-size:15px; background:rgba(255,255,255,.1); color:#fff; } .founder-id{ display:flex; flex-direction:column; gap:3px; } .founder-id strong{ font-size:16px; font-weight:600; color:#fff; letter-spacing:-0.01em; } .founder-id .role{ font-size:13px; color:rgba(255,255,255,.5); } .founder-li{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:7px 14px; transition:color .25s, border-color .25s, background .25s; } .founder-li:hover{ color:#fff; border-color:#fff; background:rgba(255,255,255,.06); } /* The mark sits on its own line rather than hanging in the margin — a negative offset would clip against the band's 24px padding on small screens. */ .founder-note::before{ content:"\201C"; display:block; font-family:var(--serif); font-size:76px; line-height:.55; color:var(--orange); margin-bottom:26px; } .founder-note p{ color:rgba(255,255,255,.78); font-size:16.5px; line-height:1.7; max-width:66ch; } .founder-note p + p{ margin-top:18px; } @media (max-width:1000px){ /* Stacked, with the letter above the attribution that signs it. */ .founder{ grid-template-columns:1fr; gap:30px; } .founder-note{ order:1; } .founder-who{ order:2; flex-direction:row; align-items:center; flex-wrap:wrap; gap:14px; } .founder-li{ margin-left:auto; } } /* ---------- article index ---------- */ .article{ display:grid; grid-template-columns:150px 1fr 44px; gap:28px; align-items:center; padding:26px 4px; border-top:1px solid var(--line); } .articles .article:last-child{ border-bottom:1px solid var(--line); } .article time{ font-family:var(--mono); font-size:12px; color:var(--mut); letter-spacing:.04em; } .article h3{ font-size:clamp(18px,2.2vw,24px); font-weight:600; letter-spacing:-0.02em; line-height:1.3; transition:color .25s; } .article p{ color:var(--mut); font-size:14.5px; margin-top:6px; } .article:hover h3{ color:var(--orange); } .article .go{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:all .3s; justify-self:end; } .article:hover .go{ background:var(--orange); border-color:var(--orange); color:#fff; transform:rotate(-45deg); } /* ---------- FAQ ---------- A group of questions is one box, in the same surface every card on the site uses (--tile on --line at --r-card); inside it the questions stay a hairline-separated list. */ .faq{ background:var(--tile); border:1px solid var(--line); border-radius:var(--r-card); padding:2px 30px; } /* One separator between rows, none above the first or below the last — the box edge already closes the list. */ .faq details + details{ border-top:1px solid var(--line); } .faq summary{ display:flex; align-items:center; gap:18px; cursor:pointer; list-style:none; padding:22px 0; font-size:clamp(17px,2vw,20px); font-weight:600; letter-spacing:-0.02em; transition:color .25s; } .faq summary::-webkit-details-marker{ display:none; } .faq summary:hover{ color:var(--orange); } .faq summary::after{ content:"+"; margin-left:auto; flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-weight:400; font-size:19px; color:var(--mut); transition:all .3s; } .faq details[open] summary::after{ content:"–"; background:var(--orange); border-color:var(--orange); color:#fff; } .faq details > div{ padding:0 44px 24px 0; color:var(--mut); font-size:15.5px; max-width:760px; } .faq details > div p + p{ margin-top:12px; } /* ---------- team ---------- */ .team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .person{ background:var(--tile); border:1px solid var(--line); border-radius:var(--r-card); padding:28px 24px; } .person .pf{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--cream); color:var(--orange-2); font-weight:700; font-size:18px; margin-bottom:18px; } .person h3{ font-size:17px; letter-spacing:-0.02em; } .person .role{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); margin-top:6px; } .person p{ color:var(--mut); font-size:14px; margin-top:12px; } /* ---------- jobs ---------- */ .job{ display:grid; grid-template-columns:1fr auto auto 44px; gap:24px; align-items:center; padding:24px 4px; border-top:1px solid var(--line); } .job-list .job:last-child{ border-bottom:1px solid var(--line); } .job h3{ font-size:19px; font-weight:600; letter-spacing:-0.02em; transition:color .25s; } .job:hover h3{ color:var(--orange); } .job .meta{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); } .job .go{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:all .3s; justify-self:end; } .job:hover .go{ background:var(--orange); border-color:var(--orange); color:#fff; transform:rotate(-45deg); } /* ---------- pricing ---------- */ .plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; } .plan{ background:var(--tile); border:1px solid var(--line); border-radius:var(--r-card); padding:36px 30px; display:flex; flex-direction:column; gap:20px; } .plan.feature{ background:var(--dark); color:#fff; border-color:var(--dark); } .plan.feature .plan-body li{ border-color:rgba(255,255,255,.1); } .plan.feature .plan-body li::before{ background:rgba(255,77,0,.16); color:var(--orange); } .plan.feature p{ color:rgba(255,255,255,.66); } .plan-name{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); } .plan h3{ font-size:28px; letter-spacing:-0.03em; } .plan > p{ color:var(--mut); font-size:15px; } .plan .btn{ justify-content:center; } .plan-body{ flex:1; } /* ---------- comparison table ---------- */ .table-scroll{ overflow-x:auto; } table.cmp{ width:100%; border-collapse:collapse; min-width:640px; } table.cmp th, table.cmp td{ text-align:left; padding:18px 16px; border-bottom:1px solid var(--line); font-size:15px; } table.cmp thead th{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); font-weight:500; } /* Lobster's script glyphs are drawn to connect as lowercase; forced uppercase (inherited from the header above) synthesises capital forms that overlap into an illegible smear, and the header's wide tracking only spreads that damage further. The wordmark keeps its own casing and tight fit here. */ table.cmp thead th .wordmark{ text-transform:none; letter-spacing:0; } table.cmp tbody th{ font-weight:600; } table.cmp td .yes{ color:var(--orange); font-weight:700; } table.cmp td .no{ color:var(--mut); } /* ---------- contact ---------- */ .contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start; } /* The site's only demo form, linked from the homepage as contact.html#demo-request. The nav is fixed, so an anchored jump needs room left above the form or the first field arrives underneath the pill. */ #demo-request{ scroll-margin-top:110px; } .form-card{ background:var(--tile); border:1px solid var(--line); border-radius:var(--r-card); padding:34px; display:flex; flex-direction:column; gap:16px; } .form-card.on-orange{ background:#fff; box-shadow:0 30px 60px -30px rgba(0,0,0,.35); border:0; } .form-card label{ display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); } .form-card input, .form-card select, .form-card textarea{ font-family:var(--font); font-size:15px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--bg); color:var(--fg); } .form-card textarea{ min-height:110px; resize:vertical; } .form-card input:focus, .form-card select:focus, .form-card textarea:focus{ border-color:var(--orange); outline:none; } .form-card .btn{ justify-content:center; margin-top:6px; } .form-note{ font-size:12.5px; color:var(--mut); } /* ---------- booking alternative ---------- The "or pick a time directly" row under the submit button. caphive.js keeps the whole block [hidden] until window.CAPHIVE.bookingUrl is configured, so the rule below only ever paints once a real scheduling link exists. The "or" rule lines are drawn with flex children rather than pseudo-elements so the divider inherits the current colour on both the white and the orange card. */ .booking-alt{ display:flex; align-items:center; gap:14px; margin-top:18px; } .booking-alt[hidden]{ display:none; } .booking-alt > span{ flex:0 0 auto; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; } .booking-alt::before, .booking-alt::after{ content:""; flex:1 1 auto; height:1px; background:currentColor; opacity:.25; } /* Keep the rules on the outside and the button in the middle. */ .booking-alt > span{ order:1; } .booking-alt::before{ order:0; } .booking-alt > .btn{ order:2; flex:0 0 auto; margin-top:0; } .booking-alt::after{ order:3; } /* ---------- honeypot ---------- The bot trap on the demo form. Moved off-screen rather than display:none or visibility:hidden: a bot that parses CSS skips anything obviously hidden, and the whole point is that it should look fillable to a script and be unreachable for a person. tabindex="-1" and aria-hidden in the markup keep keyboard and screen-reader users away from it. */ .hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } /* ---------- orange form ---------- Same markup as .form-card; the fields stay white so contrast on the inputs themselves is unchanged, and the submit button inverts to white-on-orange. */ .form-card.orange{ background:var(--orange); border-color:var(--orange); color:#fff; position:relative; overflow:hidden; isolation:isolate; box-shadow:0 30px 70px -30px rgba(255,77,0,.45); } .form-card.orange::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(70% 60% at 50% 0%, rgba(255,255,255,.22), transparent 70%); } .form-card.orange .tile-kicker{ color:rgba(255,255,255,.9); } .form-card.orange label{ color:#fff; } .form-card.orange input, .form-card.orange select, .form-card.orange textarea{ background:#fff; border-color:transparent; color:var(--fg); } .form-card.orange input::placeholder, .form-card.orange textarea::placeholder{ color:#9A948B; } .form-card.orange input:focus, .form-card.orange select:focus, .form-card.orange textarea:focus{ border-color:#fff; outline:2px solid rgba(255,255,255,.65); outline-offset:1px; } .form-card.orange .btn-primary{ background:#fff; color:var(--orange-2); } .form-card.orange .btn-primary:hover{ background:#fff; box-shadow:0 16px 36px -12px rgba(0,0,0,.3); } .form-card.orange .form-note{ color:rgba(255,255,255,.92); } .form-card.orange .form-note a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.55); } .form-card.orange .form-note a:hover{ border-color:#fff; } .form-card.orange .form-msg{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); color:#fff; } .form-card.orange :focus-visible{ outline-color:#fff; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .form-msg{ display:none; padding:14px 16px; border-radius:14px; font-size:14px; background:var(--cream); color:var(--orange-2); border:1px solid var(--line); } .form-msg.show{ display:block; } .office{ padding:24px 0; border-top:1px solid var(--line); } .office h3{ font-size:18px; letter-spacing:-0.02em; } .office p{ color:var(--mut); font-size:14.5px; margin-top:8px; line-height:1.7; } .contact-ways{ display:grid; gap:16px; margin-top:32px; } .way{ display:flex; gap:16px; align-items:flex-start; padding:22px 24px; border:1px solid var(--line); background:var(--tile); border-radius:18px; } .way h4{ font-size:15.5px; } .way p{ color:var(--mut); font-size:14px; margin-top:4px; } .way a{ color:var(--orange-2); font-weight:500; } .way a:hover{ text-decoration:underline; } /* ---------- legal / prose ---------- */ .prose{ max-width:760px; } .prose h2{ font-size:clamp(24px,3vw,32px); margin:56px 0 16px; letter-spacing:-0.03em; } .prose h3{ font-size:19px; margin:32px 0 10px; letter-spacing:-0.02em; } .prose p, .prose li{ color:var(--mut); font-size:16px; line-height:1.75; } .prose p + p{ margin-top:14px; } /* list-style:none matters on ol: the numbers come from the counter on .prose ol li::before below, so leaving the native marker on renders every item twice ("1. 1. Assume your team…"). */ .prose ul, .prose ol{ margin:14px 0 0 0; padding-left:0; list-style:none; } .prose ul li{ position:relative; padding-left:22px; margin-bottom:10px; } .prose ul li::before{ content:""; position:absolute; left:4px; top:11px; width:6px; height:6px; border-radius:50%; background:var(--orange); } .prose ol{ counter-reset:p; } .prose ol li{ position:relative; padding-left:28px; margin-bottom:10px; counter-increment:p; } .prose ol li::before{ content:counter(p) "."; position:absolute; left:0; top:0; font-family:var(--mono); font-size:13px; color:var(--orange); } .prose a{ color:var(--orange-2); border-bottom:1px solid rgba(224,67,0,.3); } .prose a:hover{ border-color:var(--orange-2); } .prose strong{ color:var(--fg); font-weight:600; } .prose figure{ max-width:100%; } /* Cookie names in the legal tables. Geist Mono is already loaded for the rest of the site, so this only points at it — no extra font request. */ .prose code{ font-family:var(--mono); font-size:.92em; color:var(--fg); overflow-wrap:anywhere; } .prose table{ width:100%; border-collapse:collapse; margin-top:18px; } /* width:100% can't take a table below its min-content width, so a multi-column table (the obligation matrix, the comparison tables in the agent pages) runs off a phone screen and widens the whole document. Only some of them sit in a

we could scroll, so the table becomes its own scroll container: display:block puts the real table in an anonymous box free to exceed the width. Phones only — on desktop the tables still fill the prose column. */ @media (max-width:760px){ .prose table{ display:block; overflow-x:auto; } } .prose th, .prose td{ text-align:left; padding:14px 12px; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--mut); } .prose th{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg); font-weight:500; } .updated{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); padding:14px 18px; border:1px solid var(--line); background:var(--tile); border-radius:14px; display:inline-block; } .toc{ background:var(--tile); border:1px solid var(--line); border-radius:20px; padding:26px 28px; margin:40px 0 0; } .toc h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin-bottom:14px; } .toc li{ margin-bottom:9px; } .toc a{ font-size:15px; color:var(--fg); opacity:.85; } .toc a:hover{ color:var(--orange); opacity:1; } .callout{ border-left:2px solid var(--orange); background:var(--cream); border-radius:0 16px 16px 0; padding:20px 24px; margin:26px 0; } .callout p{ color:var(--fg); font-size:15px; } /* ---------- CTA ---------- */ .cta{ padding:0 24px 130px; } .cta-card{ max-width:1132px; margin:0 auto; border-radius:32px; position:relative; overflow:hidden; background:var(--orange); color:#fff; padding:96px 60px; text-align:center; isolation:isolate; } .cta-card::before{ content:""; position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:120%; height:100%; z-index:-1; background:radial-gradient(50% 60% at 50% 0%, rgba(255,255,255,.22), transparent 70%); } .cta-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; text-align:left; } .cta-card h2{ font-size:clamp(32px,4.4vw,56px); font-weight:800; letter-spacing:-0.04em; margin-bottom:16px; } .cta-card h2 em{ color:#fff; } .cta-card p{ font-size:17px; opacity:.9; } .cta-card .hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px; } .cta-stats{ display:flex; align-items:center; gap:10px; margin-top:30px; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:rgba(255,255,255,.92); transition:opacity .3s; } .cta-stats::before{ content:""; width:7px; height:7px; border-radius:50%; background:#fff; animation:pulse 1.6s ease-in-out infinite; flex:none; } .cta-stats.fade{ opacity:0; } .cta-mail{ display:inline-block; margin-top:16px; font-size:14px; opacity:.85; border-bottom:1px solid rgba(255,255,255,.5); transition:opacity .25s, border-color .25s; } .cta-mail:hover{ opacity:1; border-color:#fff; } /* ---------- footer ---------- */ /* overflow-x only: Lobster's descenders (script font, generous descent) plus .foot-mark's translateY(12%) push the glyph below its own compressed line-height(.92) box — clipping on the y-axis crops the bottom of the giant "CapHive" mark. Only the x-axis needs clipping (guards against the mark's width ever exceeding the viewport at extreme aspect ratios). */ footer{ border-top:1px solid var(--line); padding:80px 0 clamp(60px,10vw,140px); overflow-x:hidden; } .foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:64px; } .foot-brand p{ color:var(--mut); font-size:14.5px; max-width:280px; margin-top:16px; } .foot-brand .addr{ margin-top:20px; font-size:13.5px; line-height:1.7; color:var(--mut); } .foot-brand a.mailto{ color:var(--orange-2); font-weight:500; } .foot-brand a.mailto:hover{ text-decoration:underline; } .foot-col h4{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); margin-bottom:18px; } .foot-col li{ margin-bottom:11px; } .foot-col a{ font-size:15px; color:var(--fg); opacity:.8; transition:opacity .25s, color .25s; } .foot-col a:hover{ opacity:1; color:var(--orange); } .foot-base{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 0; border-top:1px solid var(--line); flex-wrap:wrap; } .foot-base p, .foot-base a{ font-size:13px; color:var(--mut); } .foot-base .legal-links{ display:flex; gap:24px; flex-wrap:wrap; } .foot-base .legal-links a:hover{ color:var(--fg); } /* The oversized footer mark is the word "CapHive", so it takes the brand face directly rather than a nested span. Lobster's single weight and its own sidebearings replace the 800 / -0.05em fitting Geist needed; line-height opens up a little because the script carries descenders the sans did not. */ .foot-mark{ text-align:center; font-family:var(--brand); font-weight:400; letter-spacing:0; line-height:.92; font-size:clamp(90px,18.5vw,250px); color:#EDEAE2; user-select:none; transform:translateY(12%); transition:color .5s; } .foot-mark:hover{ color:var(--orange); } /* ---------- 404 ---------- */ .big-404{ font-weight:800; letter-spacing:-0.06em; line-height:.85; font-size:clamp(120px,26vw,300px); color:var(--cream); } /* ---------- product-page hero variants ---------- Each product page's hero carries the artefact that module actually produces, so the five pages stop reading as one template repeated. The four platform metrics move out of the hero into .stat-band directly below it. */ /* copy beside a dark product frame (Funds, Deals & Secondaries) */ .hero-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center; } .hero-split.tight{ grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); } .hero-split h1{ font-size:clamp(38px,4.5vw,60px); max-width:none; } .hero-split .lede{ max-width:none; } .hero-split .hero-cta{ margin-top:30px; } /* full-column frame under centred copy (Portfolios) */ .hero-wide{ margin-top:56px; } /* four metrics as one divided band rather than four cards */ .stat-band{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:var(--tile); border-radius:var(--r-card); overflow:hidden; } .stat-band > div{ padding:26px 28px; border-left:1px solid var(--line); } .stat-band > div:first-child{ border-left:0; } .stat-band strong{ display:block; font-size:clamp(20px,2vw,27px); font-weight:800; letter-spacing:-0.03em; line-height:1; } .stat-band strong em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--orange); } /* Direct child of the cell, for the same reason as .kpi > span above. */ .stat-band > div > span{ display:block; margin-top:11px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); line-height:1.6; text-wrap:balance; } /* ---------- hero surface tints (product pages only) ---------- Each product hero sits on its own surface so the pages are told apart at a glance: white for Funds, orange for Deals & Secondaries, black for AI Agents. Portfolios and Integrations stay on the page ground — their full-width frame and category band already differentiate them. */ /* The fold should fall below the hero card, never through it. Vertical rhythm scales with viewport height, and the dashboard/chat mock is allowed to crop — it already reads as a screenshot — while the words never do. */ .page-hero.hero-tinted{ padding-top:clamp(92px, 11vh, 112px); } .hero-panel{ border-radius:32px; position:relative; overflow:hidden; isolation:isolate; padding:clamp(34px, 4.2vh, 60px) clamp(24px, 3vw, 56px); } .page-hero.hero-tinted h1{ font-size:clamp(30px, 4.4vw, 56px); } .page-hero.hero-tinted .lede{ margin-top:clamp(14px, 1.8vh, 24px); } .page-hero.hero-tinted .hero-cta{ margin-top:clamp(20px, 2.8vh, 36px); } .page-hero.hero-tinted .article-meta{ margin-top:clamp(16px, 2vh, 26px); padding-top:clamp(14px, 1.8vh, 22px); } .page-hero.hero-tinted .stat-band{ margin-top:clamp(28px, 3.4vh, 52px) !important; } .page-hero .agent-tabs{ margin:clamp(18px, 2.4vh, 40px) 0 clamp(12px, 1.6vh, 24px); } /* the hero card may run wider than the page column — it is the one element on the page that benefits from the extra room */ .page-hero.hero-tinted > .wrap{ max-width:1280px; } /* inside a split the tabs and chat align left and fill their column */ .hero-split .agent-tabs{ justify-content:flex-start; margin-top:0; } .hero-split .chat{ max-width:none; } /* the stat band is a sibling of the split, so it spans the whole card */ .hero-panel > .stat-band{ margin-top:clamp(24px, 3vh, 44px); } /* the visual gives way first */ .page-hero.hero-tinted .frame{ max-height:calc(100vh - 400px); min-height:250px; } .page-hero .chat{ max-height:calc(100vh - 470px); min-height:230px; } .page-hero .chat-body{ padding:clamp(16px, 2vh, 26px); } .page-hero.hero-tinted .hero-marquee{ padding:clamp(14px, 1.8vh, 24px) 0; } @media (max-height:860px){ .page-hero.hero-tinted h1{ font-size:clamp(26px, 3.4vw, 42px); } .page-hero.hero-tinted .lede{ font-size:16px; } } .tint-white .hero-panel{ background:var(--tile); border:1px solid var(--line); box-shadow:0 40px 80px -60px rgba(16,16,16,.28); } .tint-white .stat-band{ background:var(--bg); } .tint-orange .hero-panel{ background:var(--orange); border:1px solid var(--orange); color:#fff; } /* cream needs no text inversion — it is a light surface like white */ .tint-cream .hero-panel{ background:var(--cream); border:1px solid #E2DDD1; box-shadow:0 40px 80px -60px rgba(16,16,16,.22); } /* deep orange is used TOGETHER with .tint-orange, so it inherits every inversion and only swaps the fill. It measures 4.22:1 against white versus 3.33:1 for --orange, so it is the better choice on the longer reads. */ .tint-deep .hero-panel{ background:var(--orange-2); border-color:var(--orange-2); } .tint-black .hero-panel{ background:var(--dark); border:1px solid rgba(255,255,255,.1); color:#fff; } .tint-orange .hero-panel::before, .tint-black .hero-panel::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(65% 55% at 50% 0%, rgba(255,255,255,.18), transparent 70%); } .tint-black .hero-panel::before{ background:radial-gradient(60% 55% at 78% 0%, rgba(255,77,0,.20), transparent 70%); } /* invert type and controls on the orange and black surfaces */ .tint-orange .chip-label, .tint-black .chip-label{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.30); color:#fff; } .tint-black .crumbs{ color:rgba(255,255,255,.6); } .tint-orange .crumbs{ color:rgba(255,255,255,.88); } .tint-orange .crumbs a:hover, .tint-black .crumbs a:hover{ color:#fff; } .tint-black .lede{ color:rgba(255,255,255,.78); } /* full white on orange: alpha-reduced text drops to ~1.5:1 against #FF4D00 */ .tint-orange .lede{ color:#fff; } .tint-black .tile-kicker{ color:rgba(255,255,255,.6); } .tint-orange .tile-kicker{ color:rgba(255,255,255,.9); } .tint-orange h1 em{ color:#fff; } .tint-orange .btn-outline, .tint-black .btn-outline{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; } .tint-orange .btn-outline:hover, .tint-black .btn-outline:hover{ border-color:#fff; } .tint-orange .btn-primary{ background:#fff; color:var(--orange-2); } .tint-orange .btn-primary:hover{ background:#fff; box-shadow:0 16px 36px -12px rgba(0,0,0,.3); } .tint-orange .stat-band, .tint-black .stat-band{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); color:#fff; } .tint-orange .stat-band > div, .tint-black .stat-band > div{ border-left-color:rgba(255,255,255,.16); } .tint-black .stat-band span{ color:rgba(255,255,255,.66); } .tint-orange .stat-band span{ color:rgba(255,255,255,.92); } .tint-orange .stat-band strong em{ color:#fff; } .tint-orange :focus-visible, .tint-black :focus-visible{ outline-color:#fff; } .tint-orange .article-meta, .tint-black .article-meta{ border-top-color:rgba(255,255,255,.22); color:rgba(255,255,255,.82); } .tint-orange .article-meta a, .tint-black .article-meta a{ color:#fff; } /* the chat needs to lift off a black surface */ .tint-black .chat{ background:var(--dark-2); border-color:rgba(255,255,255,.14); } .tint-black .tab{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.72); } .tint-black .tab:hover{ border-color:#fff; color:#fff; } .tint-black .tab.active{ background:#fff; border-color:#fff; color:var(--fg); } @media (max-width:760px){ .page-hero.hero-tinted{ padding-top:104px; } .hero-panel{ padding:40px 24px; border-radius:24px; } .hero-panel > .hero-marquee:last-child{ margin:36px -24px -40px; } } /* integration categories scrolling under the hero (Integrations) */ .hero-marquee{ margin-top:56px; padding:22px 0; border-block:1px solid var(--line); background:var(--tile); } /* inside a hero panel the band spans the full card width and closes it, so the negative margins cancel the panel's padding on three sides */ .hero-panel > .hero-marquee:last-child{ margin:52px -56px -60px; padding:24px 0; border-bottom:0; background:var(--bg); } .hero-marquee .marquee-track{ gap:56px; animation-duration:46s; } .hero-marquee .client{ font-size:16px; font-weight:500; color:#B8B2A6; } .hero-marquee .client:hover{ color:var(--fg); } /* agent tabs above the hero chat (AI Agents) */ .agent-tabs{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:40px 0 24px; } @media (max-width:1000px){ .hero-split, .hero-split.tight{ grid-template-columns:1fr; gap:40px; } .stat-band{ grid-template-columns:1fr 1fr; } .stat-band > div:nth-child(3){ border-left:0; } .stat-band > div:nth-child(n+3){ border-top:1px solid var(--line); } } @media (max-width:620px){ .stat-band{ grid-template-columns:1fr; } .stat-band > div{ border-left:0; } .stat-band > div + div{ border-top:1px solid var(--line); } } /* ---------- blog ---------- */ .article-hero{ padding:150px 0 0; } /* A post is two stacked white cards — intro, then body — both spanning the full column, with the text measure-capped inside so the two share an edge and the reading width stays sane. This restates the padding because .article-hero is declared after the .hero-tinted block and would otherwise win. */ .article-hero.hero-tinted{ padding-top:112px; } .article-measure{ max-width:780px; } .article-card{ background:var(--tile); border:1px solid var(--line); border-radius:32px; padding:60px 56px 48px; box-shadow:0 40px 80px -60px rgba(16,16,16,.28); } .article-hero h1{ font-size:clamp(34px,4.8vw,56px); font-weight:800; letter-spacing:-0.04em; line-height:1.04; } .article-hero .lede{ color:var(--mut); font-size:clamp(17px,2vw,20px); margin-top:22px; text-wrap:pretty; } /* Tinted article heroes sit on a solid ground and invert their text. These must come after the muted .article-hero .lede rule above, which would otherwise repaint the lede grey-on-orange and drop it below readable contrast. */ .tint-orange.article-hero .lede{ color:#fff; } .tint-black.article-hero .lede{ color:rgba(255,255,255,.82); } .tint-orange.article-hero .article-meta, .tint-black.article-hero .article-meta{ color:rgba(255,255,255,.8); border-top-color:rgba(255,255,255,.2); } .article-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); } .article-meta .dot{ opacity:.45; } .article-body{ padding:20px 0 0; } .article-body .prose{ max-width:none; } .article-body .prose > h2:first-child{ margin-top:0; } /* a claim worth slowing down for */ .pull{ margin:44px 0; padding:0 0 0 28px; border-left:2px solid var(--orange); } .pull p{ font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.8vw,30px); line-height:1.25; letter-spacing:-0.02em; color:var(--fg); } .pull cite{ display:block; margin-top:14px; font-family:var(--mono); font-style:normal; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); } .byline{ display:flex; align-items:center; gap:14px; margin-top:56px; padding-top:26px; border-top:1px solid var(--line); } .byline .avatar{ width:44px; height:44px; font-size:15px; } .byline strong{ display:block; font-size:15px; } /* Only the byline's own text column and the lines directly inside it stack. Scoped to direct children on purpose: an unscoped `.byline span` also caught the .avatar (killing its grid centring) and, worse, the nested .wordmark / .wm-cap spans — turning "Cap" and "Hive" into blocks, which broke the byline into one word per line and collapsed the column to min-content width. */ .byline > span:not(.avatar){ display:block; min-width:0; } .byline > span:not(.avatar) > span{ display:block; font-size:13px; color:var(--mut); margin-top:2px; } /* previous / next along the bottom of a post */ .post-nav{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .post-nav a{ border:1px solid var(--line); background:var(--tile); border-radius:var(--r-card); padding:26px 28px; transition:border-color .3s, transform .3s, box-shadow .3s; } .post-nav a:hover{ border-color:var(--fg); transform:translateY(-3px); box-shadow:0 24px 48px -30px rgba(16,16,16,.18); } .post-nav .dir{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin-bottom:12px; } .post-nav strong{ font-size:18px; font-weight:600; letter-spacing:-0.02em; line-height:1.3; text-wrap:balance; } .post-nav a.next{ text-align:right; } /* index: the lead post gets a larger card */ .post-lead{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--tile); transition:border-color .3s, box-shadow .3s; } .post-lead:hover{ border-color:var(--fg); box-shadow:0 30px 60px -40px rgba(16,16,16,.22); } .post-lead-copy{ padding:44px 42px; display:flex; flex-direction:column; justify-content:center; } .post-lead-copy h2{ font-size:clamp(26px,3vw,36px); margin:14px 0 14px; letter-spacing:-0.03em; line-height:1.12; } .post-lead-copy p{ color:var(--mut); font-size:15.5px; } .post-lead-side{ background:var(--dark); color:#fff; padding:44px 42px; display:flex; flex-direction:column; justify-content:space-between; gap:32px; position:relative; overflow:hidden; } .post-lead-side::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 55% at 80% 0%, rgba(255,77,0,.22), transparent 70%); } .post-lead-side blockquote{ font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.4vw,27px); line-height:1.28; letter-spacing:-0.02em; } .post-lead-side .who{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); } @media (max-width:1000px){ .post-lead{ grid-template-columns:1fr; } } @media (max-width:760px){ .article-hero{ padding-top:126px; } .article-body{ padding-top:14px; } .article-card{ padding:32px 24px 28px; border-radius:24px; } .post-nav{ grid-template-columns:1fr; } .post-nav a.next{ text-align:left; } .post-lead-copy, .post-lead-side{ padding:32px 24px; } .pull{ margin:32px 0; padding-left:20px; } } /* ---------- reveal ---------- */ .reveal{ opacity:0; transform:translateY(28px); filter:blur(6px); transition:opacity .8s cubic-bezier(.2,.8,.3,1), transform .8s cubic-bezier(.2,.8,.3,1), filter .8s; } .reveal.in{ opacity:1; transform:none; filter:blur(0); } .reveal[data-delay="1"]{ transition-delay:.08s } .reveal[data-delay="2"]{ transition-delay:.16s } .reveal[data-delay="3"]{ transition-delay:.24s } .reveal[data-delay="4"]{ transition-delay:.32s } .reveal[data-delay="5"]{ transition-delay:.40s } .reveal[data-delay="6"]{ transition-delay:.48s } @keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } } /* ---------- responsive ---------- */ @media (max-width:1000px){ .kpi-row{ grid-template-columns:1fr 1fr; } .f-grid, .f-grid.four{ grid-template-columns:1fr 1fr; } .case-grid{ grid-template-columns:1fr 1fr; } .split{ grid-template-columns:1fr; gap:36px; } .split.rev .split-text{ order:0; } .steps-num, .steps-num.three{ grid-template-columns:1fr 1fr; } /* the chevron would point into the row below, so it comes off */ .steps-num > .step-n:not(:last-child)::after{ display:none; } .metrics-grid{ grid-template-columns:1fr 1fr; } .trust-row{ grid-template-columns:1fr 1fr; } .team-grid{ grid-template-columns:1fr 1fr; } .plan-grid{ grid-template-columns:1fr; } .contact-grid{ grid-template-columns:1fr; gap:40px; } .foot-grid{ grid-template-columns:1fr 1fr 1fr; } .band-dark{ padding:56px 32px; } } @media (max-width:760px){ .nav-links, .login{ display:none; } .nav-toggle{ display:block; } .nav .btn-nav{ display:none; } .page-hero{ padding-top:132px; } .section{ padding:88px 0; } .section-sm{ padding:60px 0; } /* Neighbouring sections only leave 88px here, so the band pulls back less. */ section.band-slim{ margin:-36px 0; } .section-head{ margin-bottom:40px; } .kpi-row{ grid-template-columns:1fr; margin-top:44px; } .f-grid, .f-grid.two, .f-grid.four{ grid-template-columns:1fr; } .case-grid{ grid-template-columns:1fr; } .steps-num, .steps-num.three{ grid-template-columns:1fr; } .step-n{ padding:24px 22px 26px; } .metrics-grid{ grid-template-columns:1fr; } .trust-row{ grid-template-columns:1fr; } .team-grid{ grid-template-columns:1fr; } .article{ grid-template-columns:1fr 44px; } .article time{ grid-column:1 / -1; } .job{ grid-template-columns:1fr 44px; row-gap:8px; } .job .meta{ grid-column:1; } .form-row{ grid-template-columns:1fr; } .split{ padding:26px 22px; border-radius:24px; } /* the box's own side padding is enough at this width */ .faq{ padding:2px 20px; border-radius:18px; } .faq details > div{ padding-right:0; } .cta{ padding-bottom:88px; } .cta-card{ padding:56px 24px; } .cta-grid{ grid-template-columns:1fr; gap:36px; } .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; } .band-dark{ padding:48px 24px; border-radius:24px; margin-inline:0; } } /* ---------- cookie consent ---------- Deliberately quiet: a small card in the bottom-left corner rather than a bar or a modal, so it never covers content and nothing has to be dismissed to read the page. Borrows the floating nav's translucent-white-over-blur treatment so it reads as site chrome. */ .consent{ position:fixed; left:16px; bottom:16px; z-index:55; width:min(340px, calc(100% - 32px)); display:flex; flex-direction:column; gap:12px; padding:16px 18px; border-radius:18px; background:rgba(255,255,255,.94); border:1px solid var(--line); backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%); box-shadow:0 18px 44px -20px rgba(16,16,16,.28); /* revealed by adding .in, so there is no flash before the script decides whether a choice is already stored */ opacity:0; transform:translateY(12px); transition:opacity .3s, transform .3s cubic-bezier(.2,.8,.3,1); } .consent.in{ opacity:1; transform:none; } /* .consent sets display:flex, which outranks the UA stylesheet's [hidden]{display:none} — without this the banner would show even while the hidden attribute is set. */ .consent[hidden]{ display:none; } /* 13px is the footer's text tier, not an arbitrary shrink */ .consent-text{ font-size:13px; line-height:1.5; color:var(--mut); } .consent-text a{ color:var(--fg); text-decoration:underline; text-underline-offset:2px; } .consent-text a:hover{ color:var(--orange); } /* Accept and Decline are the same size and equally visible — the choice must not be weighted towards accepting. */ .consent-actions{ display:flex; gap:8px; } .consent-actions .btn{ flex:1; justify-content:center; } @media (max-width:560px){ .consent{ left:12px; right:12px; bottom:12px; width:auto; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .reveal{ opacity:1 !important; transform:none !important; filter:none !important; } .marquee-track, .ticker-track, .t-track, .case-track{ animation:none; } *{ transition-duration:.01ms !important; animation-duration:.01ms !important; } }