/* ══════════ 0917c · capitalq.html — client feedback batch 4 (track "cqpage")
The CapitalQ page rebuilt to the client's NEW COPY and order:
hero · The Old Way · The Better Way · The Journey · One Place · CapitalQ™ Features · months→minutes strip ·
Meet Q · Before the First Meeting · With CapitalQ™, you can: · Prefer It Done For You? · Close (homepage .xk).
Loaded after style.css + fix-0917b-cqnine.css on capitalq.html only; every selector is scoped to an id on this page.
Gold comes only from the tokens. Square corners throughout (the CapitalQ orb is the one round thing: it is WebGL).
Brief: .claude/CLIENT-FEEDBACK-0917c.md
══════════ */
/* ───────────────────────── 1 · HERO ───────────────────────── */
#top .cqp-kick{ display: inline-flex; align-items: center; gap: 12px; }
#top .cqp-kick__orb{ display: inline-block; flex: none; width: 46px; height: 46px; margin: -12px 0 -12px -6px; }
#top .cqp-kick__orb .cq-orb{ width: 100%; height: 100%; }
#top .cqp-hero__copy{ max-width: min(62%, 860px); }
#top .cqp-hero__think{
margin-top: clamp(22px, 2.6vw, 34px); max-width: 48ch;
font-size: clamp(1.06rem, 1.36vw, 1.3rem); line-height: 1.5; font-weight: 500; color: #F4F8FB; text-wrap: pretty;
}
#top .cqp-hero__fit{
margin-top: 12px; max-width: 54ch;
font-size: clamp(.98rem, 1.12vw, 1.1rem); line-height: 1.6; color: rgba(244,248,251,.74); text-wrap: pretty;
}
#top .cqp-hero__stop{
margin-top: clamp(22px, 2.6vw, 32px); padding-left: 16px; border-left: 2px solid var(--accent);
font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.25; font-weight: 600; letter-spacing: -.015em; color: #F4F8FB;
}
#top .cqp-hero__cta{ margin-top: clamp(24px, 3vw, 36px); }
@media (max-width: 880px){
#top .cqp-hero__copy{ max-width: none; }
#top .cqp-kick__orb{ width: 32px; height: 32px; }
#top .cqp-hero__cta .btn{ flex: 1 1 100%; }
}
/* ───────────────────────── 2 · THE OLD WAY — "It's finding the right ones." on its own line ───────────────────────── */
/* the first line keeps style.css's white→grey display fade; the new second line is the point of the section, so it
carries the gold (the same white-then-gold split the client asked for on the investors page). */
#old-way .h-sub .cqp-nl{ display: block; margin-top: .12em; -webkit-text-fill-color: var(--accent); color: var(--accent); }
/* ───────────────────────── 3 · THE BETTER WAY ───────────────────────── */
#search .cqp-better__head{
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: clamp(32px, 5vw, 96px); align-items: end;
}
#search .cqp-better__turns{
font-size: clamp(1.35rem, 2.1vw, 1.95rem); line-height: 1.24; font-weight: 500; letter-spacing: -.022em; color: #0B0C0E;
max-width: 34ch; text-wrap: balance;
}
#search .cqp-better__think{
margin-top: 16px; padding-left: 16px; border-left: 2px solid var(--accent);
font-size: clamp(1rem, 1.2vw, 1.14rem); line-height: 1.55; color: #3A4149; max-width: 58ch;
}
/* the orb reads as a dull dark sphere at small sizes (its ring goes sub-pixel) - a token bloom behind
it and a little gain on the canvas, so the CapitalQ character glows wherever it is small. */
#top .cqp-kick__orb,
#with-capitalq .cqp-with__orb{ position: relative; }
#top .cqp-kick__orb::after,
#with-capitalq .cqp-with__orb::after{
content: ''; position: absolute; inset: -36%; z-index: 0; pointer-events: none;
background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 42%, transparent), transparent 74%);
}
#top .cqp-kick__orb .cq-orb,
#with-capitalq .cqp-with__orb .cq-orb{ position: relative; z-index: 1; }
#top .cqp-kick__orb .cq-orb canvas,
#with-capitalq .cqp-with__orb .cq-orb canvas{ filter: brightness(1.55) saturate(1.1); }
#search .cqp-better__close{
margin-top: clamp(56px, 7vw, 110px); text-align: center;
font-size: clamp(2rem, 5.1vw, 5rem); line-height: 1.04; font-weight: 600; letter-spacing: -.048em; color: #0B0C0E;
}
#search .cqp-better__w,
#one-place .cqp-one__w,
#meet-q .cqp-meet__w,
#connect .cqp-conn__w{ display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
#search .cqp-better__w > span,
#one-place .cqp-one__w > span,
#meet-q .cqp-meet__w > span,
#connect .cqp-conn__w > span{ display: inline-block; }
#search .cqp-better__w--gold > span,
#one-place .cqp-one__w--gold > span,
#meet-q .cqp-meet__w--gold > span{
background: var(--accent-grad); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: var(--accent);
}
/* the word-rise (JS adds .cqp-js to ; without JS or with reduced motion the words simply sit there) */
.cqp-js [data-cqp-rise] .cqp-better__w > span,
.cqp-js [data-cqp-rise] .cqp-one__w > span,
.cqp-js [data-cqp-rise] .cqp-meet__w > span,
.cqp-js [data-cqp-rise] .cqp-conn__w > span{ transform: translateY(108%); transition: transform 1s cubic-bezier(.22,1,.36,1); }
.cqp-js [data-cqp-rise] :nth-child(2) > span{ transition-delay: .12s; }
.cqp-js [data-cqp-rise] :nth-child(3) > span{ transition-delay: .24s; }
.cqp-js [data-cqp-rise].is-in .cqp-better__w > span,
.cqp-js [data-cqp-rise].is-in .cqp-one__w > span,
.cqp-js [data-cqp-rise].is-in .cqp-meet__w > span,
.cqp-js [data-cqp-rise].is-in .cqp-conn__w > span{ transform: none; }
@media (max-width: 880px){
#search .cqp-better__head{ grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
#search .cqp-better__close .cqp-better__w{ display: block; }
/* small gold type on white fails 3:1 at phone size — the Talent Capital remedy.
The >=881px size stays on --accent (the client-accepted large gold on light). */
#search .sechead__sub,
#search .sechead__sub .tblue{ color: var(--accent-deep); }
/* C6 FIX (0918): the same remedy for the sub-line this round added to #features —
identical case (small gold on the light ground), so it takes the identical cure. */
#features .cqp-feat__sub,
#features .cqp-feat__sub strong{ color: var(--accent-deep); }
}
/* ───────────────────────── 4 · THE JOURNEY ───────────────────────── */
#journey.cqp-journey{ background: #0A0A0B; border-top: 1px solid var(--line); overflow: clip; }
#journey .cqp-journey__grid{
position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(244,248,251,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(244,248,251,.035) 1px, transparent 1px);
background-size: 72px 72px;
-webkit-mask-image: radial-gradient(70% 60% at 30% 30%, #000, transparent 80%);
mask-image: radial-gradient(70% 60% at 30% 30%, #000, transparent 80%);
}
#journey .cqp-journey__head{ align-self: stretch; }
#journey .cqp-journey__lede{
margin-top: 22px; max-width: 46ch;
font-size: clamp(1rem, 1.14vw, 1.12rem); line-height: 1.65; color: var(--txt);
}
/* ───────────────────────── 5 · ONE PLACE — headline, body and the key lines only ───────────────────────── */
#one-place .cqp-one__grid{
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: clamp(40px, 6vw, 110px); align-items: center;
}
#one-place .cqp-one__copy .sechead__sub{ margin-top: 10px; }
#one-place .cqp-one__p{
margin-top: 16px; max-width: 50ch;
font-size: clamp(1.02rem, 1.25vw, 1.2rem); line-height: 1.6; color: rgba(244,248,251,.84);
}
#one-place .cqp-one__copy .sechead__sub + .cqp-one__p{ margin-top: clamp(24px, 2.6vw, 34px); }
#one-place .cqp-one__app .appglass{ max-width: 620px; margin-left: auto; }
/* the key lines the client asked for, each on its own line, closing the section */
#one-place .cqp-one__end{
margin-top: clamp(56px, 6.5vw, 104px); padding-top: clamp(48px, 5.5vw, 84px);
border-top: 1px solid var(--line); text-align: center;
}
#one-place .cqp-one__same{
font-size: clamp(2rem, 5vw, 4.9rem); line-height: 1.04; font-weight: 600; letter-spacing: -.048em; color: #F4F8FB;
}
#one-place .cqp-one__so{
margin-top: clamp(16px, 2vw, 26px);
font-size: clamp(1.1rem, 1.7vw, 1.55rem); line-height: 1.35; font-weight: 500; letter-spacing: -.012em; color: var(--accent);
}
@media (max-width: 880px){
#one-place .cqp-one__grid{ grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
#one-place .cqp-one__app .appglass{ margin-inline: 0; }
#one-place .cqp-one__same .cqp-one__w{ display: block; }
}
/* ───────────────────────── 6 · CAPITALQ™ FEATURES — one heading, and shorter ───────────────────────── */
#features.cqp-feat{ padding-block: clamp(64px, 7vw, 112px); }
#features .cqp-feat__head{ align-items: end; margin-bottom: clamp(28px, 3vw, 44px); }
#features .cqp-feat__head .help2__body{ margin-top: 0; }
#features .fx-cq-sqz .sqz__view{ height: clamp(210px, 19vw, 290px); }
#features .fx-cq-sqz__copy{ margin-top: clamp(22px, 2.4vw, 32px); }
#features .fx-cq9__lead .fx-cq-slide__head{ display: none; }
#features .fx-cq9__lead .fx-cq-slide__t{ margin-top: 0; font-size: clamp(1.8rem, 2.7vw, 2.6rem); }
#features .fx-cq9__line{ margin-top: 12px; font-size: clamp(1rem, 1.18vw, 1.14rem); }
#features .fx-cq9__deep{ margin-top: 4px; }
#features .fx-cq9__deep .fx-cq-slide__d{ margin-top: 8px; font-size: .96rem; line-height: 1.58; }
#features .fx-cq9__deep .ticks.fx-cq-slide__ticks{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; row-gap: 4px; margin-top: 10px; }
#features .fx-cq9__deep .ticks.fx-cq-slide__ticks .tick{ margin: 0; font-size: .92rem; }
#features .fx-cq9__deep .fx-cq-slide__punch{ margin-top: 12px; }
@media (max-width: 899px){
#features .fx-cq-sqz .sqz__view{ height: clamp(200px, 52vw, 260px); }
#features .fx-cq9__deep{ margin-top: 20px; }
#features .fx-cq9__deep .ticks.fx-cq-slide__ticks{ grid-template-columns: minmax(0, 1fr); }
}
/* ───────────────────────── 8 · MEET Q ───────────────────────── */
#meet-q.cqp-meet{ background: #070708; border-top: 1px solid var(--line); overflow: clip; isolation: isolate; }
#meet-q .cqp-meet__bg{
position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(38% 34% at 50% 56%, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 0%, transparent) 70%),
radial-gradient(color-mix(in srgb, var(--accent) 16%, transparent) 1px, transparent 1.3px) 0 0 / 26px 26px;
-webkit-mask-image: radial-gradient(80% 70% at 50% 55%, #000 30%, transparent 85%);
mask-image: radial-gradient(80% 70% at 50% 55%, #000 30%, transparent 85%);
}
#meet-q .cqp-meet__head{ text-align: center; max-width: 980px; margin-inline: auto; }
#meet-q .cqp-meet__eyebrow{
display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px;
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent);
font-weight: 600; font-size: .76rem; letter-spacing: .26em; text-transform: uppercase; color: var(--accent);
}
#meet-q .cqp-meet__blip{ width: 7px; height: 7px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); animation: cqpBlip 1.6s ease-in-out infinite; }
@keyframes cqpBlip{ 0%,100%{ opacity: 1; } 50%{ opacity: .25; } }
#meet-q .cqp-meet__h{
margin-top: 22px; font-size: clamp(2.4rem, 6.2vw, 6rem); line-height: 1; font-weight: 600; letter-spacing: -.05em;
background: none; -webkit-text-fill-color: currentColor; color: #FFFFFF;
padding-bottom: .08em;
}
#meet-q .cqp-meet__intro{
margin: 18px auto 0; max-width: 54ch;
font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.55; color: var(--txt); text-wrap: balance;
}
#meet-q .cqp-meet__rig{
position: relative; margin-top: clamp(52px, 6vw, 96px);
display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 30%) minmax(0, 1fr);
column-gap: clamp(36px, 4.4vw, 84px); align-items: center;
}
#meet-q .cqp-meet__wires{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
#meet-q .cqp-meet__wires .w-base{ fill: none; stroke: color-mix(in srgb, var(--accent) 22%, transparent); stroke-width: 1; transition: stroke .35s ease; }
#meet-q .cqp-meet__wires .w-pulse{
fill: none; stroke: var(--accent-hov); stroke-width: 2; stroke-dasharray: 5 95; stroke-dashoffset: 100;
animation: cqpWire 3.2s linear infinite; opacity: .9;
}
#meet-q .cqp-meet__wires .w-base.is-on{ stroke: var(--accent); stroke-width: 1.4; }
@keyframes cqpWire{ to{ stroke-dashoffset: 0; } }
#meet-q .cqp-caps{ position: relative; z-index: 1; list-style: none; display: grid; gap: 14px; }
#meet-q .cqp-cap{
position: relative; padding: 18px 22px 20px;
border: 1px solid var(--line); background: rgba(16,17,20,.72);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
transition: border-color .35s ease, background-color .35s ease, transform .35s ease;
}
/* the left column mirrors the right one (index + title right-aligned, ports on the inner edge), but the
BODY copy stays left-aligned: ragged-left paragraphs read as a mistake, and the mirror is carried by
the gold Q.0N labels and the titles anyway. */
#meet-q .cqp-caps--l .cqp-cap{ text-align: right; }
#meet-q .cqp-caps--l .cqp-cap__d{ text-align: left; }
#meet-q .cqp-cap__ix{ font-weight: 600; font-size: .7rem; letter-spacing: .22em; color: var(--accent); }
#meet-q .cqp-cap__t{ margin-top: 6px; font-size: clamp(1.02rem, 1.2vw, 1.16rem); line-height: 1.25; font-weight: 600; letter-spacing: -.012em; color: #F4F8FB; }
#meet-q .cqp-cap__d{ margin-top: 8px; font-size: clamp(.86rem, .92vw, .93rem); line-height: 1.55; color: rgba(201,212,220,.78); }
#meet-q .cqp-cap__port{ position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: #070708; border: 1px solid var(--accent); transition: background-color .35s ease; }
#meet-q .cqp-caps--l .cqp-cap__port{ right: -4px; }
#meet-q .cqp-caps--r .cqp-cap__port{ left: -4px; }
#meet-q .cqp-cap.is-on{ border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 12%, #070708); }
#meet-q .cqp-cap.is-on .cqp-cap__port{ background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
#meet-q .cqp-meet__core{ position: relative; z-index: 1; aspect-ratio: 1 / 1; display: grid; place-items: center; }
#meet-q .cqp-meet__ring{ position: absolute; pointer-events: none; }
#meet-q .cqp-meet__ring--a{ inset: 2%; border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); }
#meet-q .cqp-meet__ring--a::before,
#meet-q .cqp-meet__ring--a::after{ content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid var(--accent); }
#meet-q .cqp-meet__ring--a::before{ left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
#meet-q .cqp-meet__ring--a::after{ right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
#meet-q .cqp-meet__ring--b{ inset: 17%; border: 1px dashed color-mix(in srgb, var(--accent) 30%, transparent); transform: rotate(45deg); animation: cqpSpin 60s linear infinite; }
@keyframes cqpSpin{ to{ transform: rotate(405deg); } }
#meet-q .cqp-meet__orb{ position: relative; width: 84%; }
#meet-q .cqp-meet__foot{ margin-top: clamp(56px, 7vw, 110px); text-align: center; }
#meet-q .cqp-meet__close .cqp-meet__w--gold{ display: table; margin-inline: auto; }
#meet-q .cqp-meet__close{
max-width: 30ch; text-wrap: balance; margin-inline: auto;
font-size: clamp(1.9rem, 4.2vw, 4rem); line-height: 1.06; font-weight: 600; letter-spacing: -.045em; color: #F4F8FB;
}
#meet-q .cqp-meet__cta{ justify-content: center; margin-top: clamp(28px, 3.4vw, 44px); }
#meet-q .cqp-meet__talkorb{ width: 8px; height: 8px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); animation: cqpBlip 1.6s ease-in-out infinite; }
.cqp-js #meet-q .cqp-cap{ opacity: 0; }
.cqp-js #meet-q .cqp-caps--l .cqp-cap{ translate: -22px 0; }
.cqp-js #meet-q .cqp-caps--r .cqp-cap{ translate: 22px 0; }
.cqp-js #meet-q .cqp-meet__rig.is-in .cqp-cap{ opacity: 1; translate: 0 0; transition: opacity .7s ease, translate .8s cubic-bezier(.22,1,.36,1), border-color .35s ease, background-color .35s ease, transform .35s ease; }
.cqp-js #meet-q .cqp-meet__rig.is-in .cqp-cap:nth-child(2){ transition-delay: .1s, .1s, 0s, 0s, 0s; }
.cqp-js #meet-q .cqp-meet__rig.is-in .cqp-cap:nth-child(3){ transition-delay: .2s, .2s, 0s, 0s, 0s; }
.cqp-js #meet-q .cqp-meet__rig.is-in .cqp-cap:nth-child(4){ transition-delay: .3s, .3s, 0s, 0s, 0s; }
@media (max-width: 1180px) and (min-width: 881px){
#meet-q .cqp-meet__rig{ grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr); column-gap: 34px; }
#meet-q .cqp-cap__d{ display: none; }
}
@media (max-width: 880px){
#meet-q .cqp-meet__rig{ grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
#meet-q .cqp-meet__wires{ display: none; }
#meet-q .cqp-meet__core{ order: -1; width: min(300px, 80%); margin: 0 auto 20px; }
#meet-q .cqp-caps{ gap: 12px; }
#meet-q .cqp-caps--l .cqp-cap{ text-align: left; }
#meet-q .cqp-cap__port{ display: none; }
.cqp-js #meet-q .cqp-caps--l .cqp-cap,
.cqp-js #meet-q .cqp-caps--r .cqp-cap{ translate: 0 16px; }
#meet-q .cqp-meet__cta .btn{ flex: 1 1 100%; }
}
/* ───────────────────────── 9 · BEFORE THE FIRST MEETING — the meeting in the middle ───────────────────────── */
#connect.cqp-conn{ border-top: 1px solid rgba(11,12,14,.08); }
#connect .cqp-conn__grid{
display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .78fr) minmax(0, 1fr);
column-gap: clamp(28px, 3.6vw, 68px); align-items: start;
}
#connect .cqp-conn__h{
font-size: clamp(2.2rem, 3.8vw, 3.9rem); line-height: .98; font-weight: 600; letter-spacing: -.045em; color: #0B0C0E;
}
#connect .cqp-conn__h span{ display: block; }
/* a LARGE display line on white stays plain gold (--accent-deep is the token for small text and marks) */
#connect .cqp-conn__h span + span{ color: var(--accent); }
#connect .cqp-conn__st{
padding-bottom: 16px; border-bottom: 2px solid #0B0C0E;
font-size: clamp(1.3rem, 1.8vw, 1.75rem); line-height: 1.15; font-weight: 600; letter-spacing: -.025em; color: #0B0C0E;
}
#connect .cqp-conn__side{ padding-top: clamp(8px, 1vw, 16px); }
#connect .cqp-conn__list{ list-style: none; }
#connect .cqp-conn__i{
position: relative; padding: 15px 0 15px 38px; border-bottom: 1px solid rgba(11,12,14,.1);
font-size: clamp(.96rem, 1.04vw, 1.04rem); line-height: 1.5; color: #1E232A; text-wrap: pretty;
}
#connect .cqp-conn__i::before{ content: ''; position: absolute; left: 0; top: 16px; width: 22px; height: 22px; background: #0A0A0B; }
#connect .cqp-conn__i::after{
content: ''; position: absolute; left: 8px; top: 20px; width: 6px; height: 11px;
border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg);
}
.cqp-js #connect .cqp-conn__i{ opacity: 0; transition: opacity .6s ease, translate .7s cubic-bezier(.22,1,.36,1); }
.cqp-js #connect .cqp-conn__side--l .cqp-conn__i{ translate: -18px 0; }
.cqp-js #connect .cqp-conn__side--r .cqp-conn__i{ translate: 18px 0; }
.cqp-js #connect .is-in .cqp-conn__i{ opacity: 1; translate: 0 0; }
#connect .cqp-conn__l1{ font-size: clamp(1.35rem, 2.5vw, 2.35rem); line-height: 1.2; font-weight: 500; letter-spacing: -.028em; color: #4A525B; }
#connect .cqp-conn__l2{
margin-top: 10px; font-size: clamp(2rem, 4.5vw, 4.4rem); line-height: 1.04; font-weight: 700; letter-spacing: -.048em; color: #0B0C0E;
text-wrap: balance;
}
#connect .cqp-conn__l2 .cqp-conn__w{ display: inline; overflow: visible; }
#connect .cqp-conn__l2 .cqp-conn__w > span{
display: inline; background-image: var(--accent-grad); background-repeat: no-repeat;
background-size: 100% .16em; background-position: 0 92%;
}
.cqp-js #connect .cqp-conn__l2 .cqp-conn__w > span{ transform: none; background-size: 0% .16em; transition: background-size 1.2s cubic-bezier(.77,0,.18,1) .35s; }
@media (max-width: 1100px) and (min-width: 881px){
#connect .cqp-conn__grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 48px; }
}
@media (max-width: 880px){
#connect .cqp-conn__grid{ grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
#connect .cqp-conn__h span{ display: inline; }
.cqp-js #connect .cqp-conn__side--l .cqp-conn__i,
.cqp-js #connect .cqp-conn__side--r .cqp-conn__i{ translate: 0 12px; }
}
/* ───────────────────────── 10 · WITH CAPITALQ™, YOU CAN: ───────────────────────── */
#with-capitalq.cqp-with{ background: var(--bg-soft); border-top: 1px solid var(--line); }
#with-capitalq .cqp-with__layout{
display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
column-gap: clamp(36px, 5vw, 96px); align-items: start;
}
#with-capitalq .cqp-with__head{ align-self: stretch; }
#with-capitalq .cqp-with__stick{ position: sticky; top: 118px; }
#with-capitalq .cqp-with__l{ display: block; white-space: nowrap; }
#with-capitalq .cqp-with__h{
font-size: clamp(2.2rem, 3.2vw, 3.2rem); line-height: 1.02; font-weight: 600; letter-spacing: -.048em; color: #F4F8FB;
}
#with-capitalq .cqp-with__orb{ display: block; width: clamp(72px, 7.4vw, 116px); margin-bottom: clamp(18px, 2vw, 28px); }
#with-capitalq .cqp-with__list{
list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--line);
}
#with-capitalq .cqp-with__i{
position: relative; padding: clamp(24px, 2.4vw, 34px) clamp(18px, 2vw, 30px) clamp(26px, 2.6vw, 38px);
border-bottom: 1px solid var(--line); transition: background-color .35s ease;
}
#with-capitalq .cqp-with__i:nth-child(odd){ border-right: 1px solid var(--line); }
#with-capitalq .cqp-with__i::before{
content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent-grad);
transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.77,0,.18,1);
}
#with-capitalq .cqp-with__i:hover{ background: color-mix(in srgb, var(--accent) 4.5%, transparent); }
#with-capitalq .cqp-with__i:hover::before{ transform: scaleX(1); }
#with-capitalq .cqp-with__ck{ display: grid; place-items: center; width: 30px; height: 30px; background: var(--accent-grad); color: var(--accent-on); }
#with-capitalq .cqp-with__ck svg{ width: 16px; height: 16px; }
#with-capitalq .cqp-with__ix{ position: absolute; top: clamp(30px, 2.8vw, 40px); right: clamp(18px, 2vw, 30px); font-weight: 600; font-size: .72rem; letter-spacing: .2em; color: var(--txt-dim); }
#with-capitalq .cqp-with__i p{ margin-top: 18px; font-size: clamp(.94rem, 1vw, 1rem); line-height: 1.6; color: rgba(201,212,220,.8); text-wrap: pretty; }
#with-capitalq .cqp-with__i strong{
display: block; margin-bottom: 8px;
font-size: clamp(1.1rem, 1.36vw, 1.28rem); line-height: 1.28; font-weight: 600; letter-spacing: -.016em; color: #F4F8FB;
}
.cqp-js #with-capitalq .cqp-with__i{ opacity: 0; translate: 0 18px; }
.cqp-js #with-capitalq .cqp-with__list.is-in .cqp-with__i{ opacity: 1; translate: 0 0; transition: opacity .7s ease var(--d, 0s), translate .8s cubic-bezier(.22,1,.36,1) var(--d, 0s), background-color .35s ease; }
@media (max-width: 880px){
#with-capitalq .cqp-with__layout{ grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
#with-capitalq .cqp-with__stick{ position: static; }
#with-capitalq .cqp-with__list{ grid-template-columns: minmax(0, 1fr); }
#with-capitalq .cqp-with__i:nth-child(odd){ border-right: 0; }
#with-capitalq .cqp-with__i{ padding-inline: 2px; }
#with-capitalq .cqp-with__ix{ right: 2px; }
}
/* ───────────────────────── 12 · CLOSE — the homepage .xk (style.css + main.js), this page's copy ───────────────────────── */
#close.cqp-xk .cqp-xk__head{ font-size: clamp(2.5rem, 6.6vw, 6.6rem); line-height: .98; letter-spacing: -.048em; font-weight: 600; }
#close.cqp-xk .cqp-xk__rows .xk-row{ grid-template-columns: max-content minmax(0, 1fr); gap: .35em; font-size: clamp(1.3rem, 2.4vw, 2.2rem); }
#close.cqp-xk .cqp-xk__rows .xk-row__what{ color: var(--accent); }
#close.cqp-xk .xk-lede{ margin-left: auto; margin-right: 0; max-width: 58ch; }
#close.cqp-xk .xk-meet{ font-size: clamp(2rem, 4.3vw, 4.1rem); text-wrap: balance; }
#close.cqp-xk .cqp-xk__node{
width: 58px; height: 58px; padding: 0; justify-content: center;
background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
}
#close.cqp-xk .cqp-xk__node::before{
width: 12px; height: 12px; margin: 0; background: var(--accent);
box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 22px var(--accent-glow);
}
#close.cqp-xk .xk-origin--cap.cqp-xk__node{ justify-self: start; margin-left: -23px; }
#close.cqp-xk .xk-origin--opp.cqp-xk__node{ justify-self: end; margin-right: -23px; margin-top: 56px; }
#close.cqp-xk .xk-plate.cqp-xk__plate{ margin-top: 40px; }
@media (max-width: 880px){
#close.cqp-xk .cqp-xk__rows .xk-row{ grid-template-columns: minmax(0, 1fr); gap: 2px; }
#close.cqp-xk .xk-lede{ margin-left: 0; }
#close.cqp-xk .cqp-xk__node{ display: none; }
#close.cqp-xk .xk-plate.cqp-xk__plate{ margin-top: 0; }
}
/* ───────────────────────── reduced motion ───────────────────────── */
@media (prefers-reduced-motion: reduce){
#meet-q .cqp-meet__blip, #meet-q .cqp-meet__talkorb, #meet-q .cqp-meet__ring--b, #meet-q .cqp-meet__wires .w-pulse{ animation: none; }
#meet-q .cqp-meet__wires .w-pulse{ display: none; }
}
/* ── lead fix (review 2) · the hero was illegible on phones: the inherited hero--biz scrim is almost clear and
style.css:3657 keeps the subject behind the copy. Below 900px the ground is darkened and the photo's focus
moves off the text column. ── */
@media (max-width: 900px){
#top.cqp-hero .hero__scrim{
background: linear-gradient(180deg, rgba(8,9,12,.88) 0%, rgba(8,9,12,.74) 42%, rgba(8,9,12,.8) 72%, rgba(8,9,12,.92) 100%);
}
#top.cqp-hero .hero__bg img{ object-position: 82% 20%; filter: var(--gold-photo) brightness(.6); }
}
/* ══════════════════════════════════════════════════════════════════════════════════════════════════
0918 · CLIENT FEEDBACK BATCH 5 — CapitalQ page items C1–C9 (.claude/CLIENT-FEEDBACK-0918.md)
Appended block (CLAUDE.md: CSS is append-only versioned blocks). Gold from the tokens only,
square corners, arrows left/right, the shared .goldpat utility for the pattern on gold.
══════════════════════════════════════════════════════════════════════════════════════════════════ */
/* ───── C1 · HERO — the copy CENTRED over the wide image (was left-aligned) ───── */
#top .cqp-hero__copy.cqp-hero__copy--mid{
max-width: min(100%, 1060px); margin-inline: auto; text-align: center;
}
/* the left-weighted biz scrim would leave the right half of a centred line unreadable —
an even vertical wash instead, so the picture still reads wide behind the copy. */
#top.hero--biz .hero__bg img{ object-position: 50% 45%; }
#top.hero--biz .hero__scrim{
background:
radial-gradient(78% 62% at 50% 52%, rgba(8,9,12,.9) 0%, rgba(8,9,12,.72) 46%, rgba(8,9,12,.34) 78%, rgba(8,9,12,.16) 100%),
linear-gradient(0deg, rgba(8,9,12,.82) 0%, rgba(8,9,12,.18) 40%, rgba(8,9,12,.34) 100%);
}
#top .cqp-hero__copy--mid .cqp-kick{ justify-content: center; }
#top .cqp-hero__copy--mid .cqp-kick__orb{ margin-left: 0; }
#top .cqp-hero__copy--mid .cqhero__h{ max-width: 19ch; margin-inline: auto; }
#top .cqp-hero__copy--mid .cqp-hero__think,
#top .cqp-hero__copy--mid .cqp-hero__fit{ margin-inline: auto; }
#top .cqp-hero__copy--mid .cqp-hero__stop{
display: block; width: max-content; max-width: 100%; margin-inline: auto;
padding: 20px 0 0; border-left: 0; border-top: 2px solid var(--accent);
}
#top .cqp-hero__copy--mid .cqp-hero__cta{ justify-content: center; }
@media (max-width: 880px){
#top .cqp-hero__copy--mid .cqhero__h{ max-width: none; }
#top .cqp-hero__copy--mid .cqp-hero__stop{ width: auto; }
}
/* ───── C3 · THE BETTER WAY — the For Businesses "Approach" cards, alternating gold / white ───── */
#search .cqp-bcar{ margin-top: clamp(38px, 4.6vw, 70px); }
#search .cqp-bcar .fb-stage{
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(12px, 1.6vw, 22px);
}
#search .cqp-bcar .fb-stage .scar__track{ --fx-g-side: clamp(12px, 1.6vw, 22px); }
#search .cqp-bcar .fb-arrow{ position: relative; z-index: 3; width: 52px; height: 52px; background: #FFFFFF; border-color: #D7E0EC; color: #0B0C0E; }
#search .cqp-bcar .fb-arrow svg{ width: 18px; height: 18px; }
#search .cqp-bcar .fb-arrow:not([disabled]):hover{ background: var(--accent-grad); border-color: var(--accent); color: var(--accent-on); }
#search .cqp-bcar .fb-arrow[disabled]{ opacity: .35; }
#search .cqp-bcar .fb-arrow[disabled]:hover{ background: #FFFFFF; border-color: #D7E0EC; color: #0B0C0E; }
/* "Interrogate" carries two paragraphs — let the row find its own height instead of the 4/4.4 crop */
#search .cqp-bcar .scard{ aspect-ratio: auto; min-height: clamp(330px, 30vw, 430px); }
#search .cqp-bcar .scard__d + .scard__d{ margin-top: 10px; }
#search .cqp-bcar .cqp-bcar__lead{ font-weight: 600; }
:is(.scard--blue, #accent-ink) .cqp-bcar__lead{ color: #0A0A0B; }
.scard--light .cqp-bcar__lead{ color: #0B0C0E; }
@media (max-width: 880px){
#search .cqp-bcar .fb-stage{ grid-template-columns: minmax(0, 1fr); position: relative; }
#search .cqp-bcar .fb-arrow{
position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px;
background: rgba(10,10,11,.78); border-color: rgba(244,248,251,.24); color: #F4F8FB;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#search .cqp-bcar .fb-arrow--prev{ left: 8px; }
#search .cqp-bcar .fb-arrow--next{ right: 8px; }
#search .cqp-bcar .fb-arrow[disabled]{ opacity: 0; pointer-events: none; }
}
/* ───── C4 · THE JOURNEY — the previous .scard carousel, now with a picture behind every step ───── */
#journey .cqp-journey__head{ max-width: 1000px; }
#journey .cqp-journey__lede{ margin-top: 18px; max-width: 86ch; }
#journey .cqp-jcar{ margin-top: clamp(34px, 4.2vw, 60px); }
#journey .cqp-jcar .fb-stage{
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(12px, 1.6vw, 22px);
}
#journey .cqp-jcar .fb-stage .scar__track{ --fx-g-side: clamp(12px, 1.6vw, 22px); }
#journey .cqp-jcar .fb-arrow{ position: relative; z-index: 3; width: 52px; height: 52px; }
#journey .cqp-jcar .fb-arrow svg{ width: 18px; height: 18px; }
#journey .cqp-jcar .fb-arrow:not([disabled]):hover{ background: var(--accent-grad); border-color: var(--accent); color: var(--accent-on); }
#journey .cqp-jcar .scard--shot{
aspect-ratio: auto; min-height: clamp(430px, 40vw, 560px);
background: #0A0A0B; border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
#journey .cqp-jcar .scard--shot .scard__img{ filter: var(--gold-photo); }
#journey .cqp-jcar .scard--shot .scard__veil{
background: linear-gradient(180deg, rgba(8,9,12,.62) 0%, rgba(8,9,12,.58) 34%, rgba(8,9,12,.93) 100%);
}
#journey .cqp-jcar .scard--shot .scard__ix{ color: var(--accent); }
#journey .cqp-jcar .scard--shot .fx-capitalq-jic{ color: var(--accent); }
#journey .cqp-jcar .scard--shot .scard__d + .scard__d{ margin-top: 9px; }
#journey .cqp-jcar .cqp-jcar__pull{ margin-top: 12px; color: var(--accent); font-weight: 500; }
#journey .cqp-jcar .cqp-jcar__big{ font-size: clamp(1rem, 1.18vw, 1.12rem); font-weight: 500; color: #F4F8FB; line-height: 1.45; }
#journey .cqp-jcar .scard--shot:hover{ border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
@media (max-width: 880px){
#journey .cqp-jcar .fb-stage{ grid-template-columns: minmax(0, 1fr); position: relative; }
#journey .cqp-jcar .fb-arrow{
position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px;
background: rgba(10,10,11,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#journey .cqp-jcar .fb-arrow--prev{ left: 8px; }
#journey .cqp-jcar .fb-arrow--next{ right: 8px; }
#journey .cqp-jcar .fb-arrow[disabled]{ opacity: 0; pointer-events: none; }
}
/* ───── C6 · THE FEATURES — "CapitalQ™ Features" as the line under it, CapitalQ™ bold ───── */
#features .cqp-feat__sub{ margin-top: 10px; }
/* 800, not 700: at ~17px the 600→700 step barely reads as the "CapitalQ bold" the client asked for. */
#features .cqp-feat__sub strong{ font-weight: 800; }
/* ───── C8 · BEFORE THE FIRST MEETING — bold on top, the two lists side by side, photo as a strip ───── */
#connect.cqp-conn{ padding-bottom: 0; }
#connect .cqp-conn__top{ text-align: center; }
#connect .cqp-conn__h{
font-size: clamp(2.4rem, 5.4vw, 5.2rem); line-height: .96; font-weight: 700; letter-spacing: -.05em;
}
#connect .cqp-conn__top .cqp-conn__h span{ display: inline; }
#connect .cqp-conn__rule{
display: block; width: 72px; height: 3px; margin: clamp(22px, 2.6vw, 34px) auto 0; background: var(--accent-grad);
}
#connect .cqp-conn__grid{
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: clamp(36px, 5.4vw, 96px);
margin-top: clamp(40px, 5vw, 76px);
}
#connect .cqp-conn__side--r{ position: relative; }
@media (min-width: 881px){
#connect .cqp-conn__side--r::before{
content: ''; position: absolute; top: 0; bottom: 0; left: calc(-1 * clamp(18px, 2.7vw, 48px));
width: 1px; background: rgba(11,12,14,.12);
}
}
@media (max-width: 1100px) and (min-width: 881px){
#connect .cqp-conn__grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 0; }
}
@media (max-width: 880px){
#connect .cqp-conn__grid{ grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
#connect .cqp-conn__side--r::before{ display: none; }
}
/* the photo, lifted out of the middle column into a full-bleed strip carrying the drop-mic */
#connect .cqp-strip{
position: relative; isolation: isolate; overflow: hidden;
margin-top: clamp(56px, 7vw, 116px);
}
#connect .cqp-strip__img{
position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 38%; filter: var(--gold-photo);
}
#connect .cqp-strip__scrim{
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(180deg, rgba(8,9,12,.9) 0%, rgba(8,9,12,.74) 42%, rgba(8,9,12,.86) 100%),
radial-gradient(64% 84% at 50% 50%, rgba(8,9,12,.52), transparent 76%);
}
#connect .cqp-strip__inner{
position: relative; z-index: 2; text-align: center;
padding-block: clamp(76px, 10vw, 168px);
}
#connect .cqp-strip .cqp-conn__l1{ color: rgba(244,248,251,.74); }
#connect .cqp-strip .cqp-conn__l2{ margin-top: 14px; color: #F4F8FB; max-width: 24ch; margin-inline: auto; }
#connect .cqp-strip .cqp-conn__l2 .cqp-conn__w > span{ background-position: 0 94%; }
/* ───── C9 · PREFER IT DONE FOR YOU? — the pattern was cropped; the shared .goldpat, scaled to cover ───── */
/* the gold underline hook moved with the line: the wrapper is .cqp-strip now, not .cqp-conn__mic */
.cqp-js #connect .cqp-strip.is-in .cqp-conn__l2 .cqp-conn__w > span{ background-size: 100% .16em; }
/* the drop-mic now sits in white on a photo strip - the gold underline under every line read as a
hyperlink there, so the strip takes the statement plain (the underline stays on the white sections) */
#connect .cqp-strip .cqp-conn__l2 .cqp-conn__w > span,
.cqp-js #connect .cqp-strip .cqp-conn__l2 .cqp-conn__w > span,
.cqp-js #connect .cqp-strip.is-in .cqp-conn__l2 .cqp-conn__w > span{ background-image: none; }
/* ══════════════════════════════════════════════════════════════════════════════════════════════════
0919 · CLIENT FEEDBACK BATCH 7 — CapitalQ page items C4 + C6 (.claude/CLIENT-FEEDBACK-0919.md)
Appended block. Gold tokens only, square corners, solid display lines (no text gradients).
══════════════════════════════════════════════════════════════════════════════════════════════════ */
/* ───── C4 · MEET Q — "Meet Q" is the BIG display line, "Your AI Investment Analyst" the sub-line ─────
Client: "make Q bigger and the other one smaller, like the subline… Meet can be white, Q can be
holding [the character]" — so "Meet" is white, "Q" is gold, and the CapitalQ orb rides beside the Q
at letter scale, the same character the hero kicker and the rig core carry. */
#meet-q .cqp-meet__h--mq{
margin-top: 0;
font-size: clamp(3.4rem, 10.4vw, 9rem);
line-height: .94; font-weight: 700; letter-spacing: -.055em;
background: none; -webkit-text-fill-color: currentColor; color: #FFFFFF;
padding-bottom: .06em;
}
#meet-q .cqp-meet__h--mq .cqp-meet__mw{ color: #FFFFFF; }
#meet-q .cqp-meet__h--mq .cqp-meet__mq{ color: var(--accent); white-space: nowrap; }
/* Sizing/offset live in the single declaration further down (the orb took the letter's place once G1
landed) — this rule only establishes the box. */
#meet-q .cqp-meet__mqorb{
display: inline-block; vertical-align: baseline;
}
#meet-q .cqp-meet__mqorb .cq-orb{ width: 100%; height: 100%; }
/* the sub-line the client demoted: smaller, gold, directly under the display line */
#meet-q .cqp-meet__sub{
margin-top: clamp(14px, 1.7vw, 24px);
font-size: clamp(1.08rem, 1.9vw, 1.7rem); line-height: 1.2; font-weight: 500; letter-spacing: -.015em;
color: var(--accent);
}
#meet-q .cqp-meet__head .cqp-meet__intro{ margin-top: clamp(16px, 1.8vw, 24px); }
/* ───── C6 · BEFORE THE FIRST MEETING — the two sides explicitly PAIRED ─────
Client: "investor before you meet the founder, founder before you meet the investor… investor will be
holding and founder will be holding, then we cannot have this straight line slash". Each column now
carries its owner as a gold plate, names the other party in gold inside its heading, and the divider
is an EXCHANGE AXIS (the two arrows crossing) instead of the plain hairline slash. */
#connect .cqp-conn__grid{ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
/* the plain slash goes */
#connect .cqp-conn__side--r::before{ display: none !important; }
#connect .cqp-conn__role{ margin-bottom: clamp(14px, 1.5vw, 20px); }
#connect .cqp-conn__rolew{
display: inline-block; padding: 9px 18px;
background: var(--accent-grad); color: var(--accent-on);
border: 1px solid var(--accent);
box-shadow: 0 0 26px var(--accent-glow);
font-size: .74rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; line-height: 1;
}
#connect .cqp-conn__other{ color: var(--accent); }
#connect .cqp-conn__axis{
align-self: stretch;
display: grid; grid-template-rows: minmax(24px, 1fr) auto minmax(24px, 1fr);
justify-items: center; align-items: center; row-gap: clamp(12px, 1.4vw, 20px);
padding-top: clamp(8px, 1vw, 16px);
}
#connect .cqp-conn__axline{
display: block; width: 1px; height: 100%;
/* a 1px mark on a white ground: --accent-deep is the token for small marks on white */
background: repeating-linear-gradient(180deg,
color-mix(in srgb, var(--accent-deep) 58%, transparent) 0 7px, transparent 7px 14px);
}
#connect .cqp-conn__node{
display: grid; place-items: center;
width: clamp(50px, 4.4vw, 64px); height: clamp(50px, 4.4vw, 64px);
background: var(--accent-grad); color: var(--accent-on);
border: 1px solid var(--accent); box-shadow: 0 0 34px var(--accent-glow);
}
#connect .cqp-conn__swap{ width: 62%; height: 62%; display: block; }
@media (max-width: 1100px) and (min-width: 881px){
#connect .cqp-conn__grid{ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); row-gap: 0; }
#connect .cqp-conn__axis{ padding-inline: 2px; }
}
@media (max-width: 880px){
/* stacked: the axis lies down between the two sides and still reads as the exchange */
#connect .cqp-conn__grid{ grid-template-columns: minmax(0, 1fr); row-gap: clamp(28px, 5vw, 44px); }
#connect .cqp-conn__axis{
grid-template-rows: none; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
column-gap: clamp(12px, 3vw, 18px); row-gap: 0; width: 100%; padding-top: 0;
}
#connect .cqp-conn__axline{
width: 100%; height: 1px;
background: repeating-linear-gradient(90deg,
color-mix(in srgb, var(--accent-deep) 58%, transparent) 0 7px, transparent 7px 14px);
}
#connect .cqp-conn__node{ width: 50px; height: 50px; }
}
/* The Q of "Meet Q" IS the CapitalQ character: the gold orb, carrying the white Q the client asked for
in G1 ("add Q at the center of that orb, white colour"). A gold letterform Q *beside* the orb printed
"Meet Q Q" once G1 landed, so the orb takes the letter's place; the letter stays for screen readers,
the copy check and text selection. REVERT (if the client wants the Q literally gold as a letterform):
drop .cqp-meet__qsr's clipping and delete the .cqp-meet__mqorb span. */
#meet-q .cqp-meet__qsr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#meet-q .cqp-meet__h--mq .cqp-meet__mq{ position: relative; color: var(--accent); }
#meet-q .cqp-meet__mqorb{ width: .94em; height: .94em; margin-left: .04em; translate: 0 .1em; }
@media (max-width: 880px){ #meet-q .cqp-meet__mqorb{ width: .92em; height: .92em; } }
/* ───── C3 · THE FEATURES — nine realistic photographs, every one matched to the NOUN in its own line.
Five were re-sourced on 0919 because they illustrated a keyword near the line instead of the line:
04.2 Investability IQ ....... was two developers reading code → two senior professionals going
through a tabbed file: strengths, gaps, areas requiring attention.
04.3 Investment Thesis Match was a neon public-markets candlestick screen → a private-capital
review room, papers weighed for fit before the first conversation.
04.7 Smart Data Room ........ was a corridor of cardboard ARCHIVE boxes (the Old Way this page
argues against) → documents pulled up on a tablet, to hand.
04.8 Intelligent Discovery .. was a streetwear phone portrait → an investor reading what the
interface surfaced to him.
04.9 Matching & Intel Reports was a stock handshake → two people over a comparison report, one
explaining WHY it matches.
Every frame now takes the section's gold tone from fix-0917b-cqnine.css (--gold-photo /
--gold-photo-mono) UNMODIFIED — the bespoke cool-tone filter block that the old trading-chart frame
forced (grayscale/sepia/saturate/hue-rotate, off-token per G1) is deleted along with its
data-cqp-tone="cool" hook on the markup. Do not reintroduce either: if a candidate needs a filter
of its own to join the gold family, it is the wrong photograph. ───── */
/* ══════════ 2026-09-21 · the client's CapitalQ hero photograph ══════════
"make sure it fits nicely, making subjects by the right-hand side. I know the
text is in the center, but now I'd like the text to be left-hand side."
The desk scene carries the phone on the RIGHT, so the copy column goes back to
the LEFT half and the scrim weights left again to hold it. */
#top .cqp-hero__copy.cqp-hero__copy--left{
max-width: min(52%, 720px); margin-inline: 0; text-align: left;
}
#top .cqp-hero__copy--left .cqp-kick{ justify-content: flex-start; }
#top .cqp-hero__copy--left .cqhero__h{ max-width: 17ch; margin-inline: 0; }
#top.hero--biz .hero__bg img{ object-position: 66% 50%; }
#top.hero--biz .hero__scrim{
background:
linear-gradient(90deg, rgba(8,9,12,.95) 0%, rgba(8,9,12,.88) 34%, rgba(8,9,12,.55) 58%, rgba(8,9,12,.14) 84%, rgba(8,9,12,0) 100%),
linear-gradient(0deg, var(--bg) 0%, rgba(8,9,12,.6) 16%, rgba(8,9,12,.1) 52%, rgba(8,9,12,.4) 100%);
}
@media (max-width: 1080px){ #top .cqp-hero__copy.cqp-hero__copy--left{ max-width: min(64%, 640px); } }
@media (max-width: 880px){
#top .cqp-hero__copy.cqp-hero__copy--left{ max-width: none; }
#top.hero--biz .hero__bg img{ object-position: 72% 48%; }
#top.hero--biz .hero__scrim{
background: linear-gradient(0deg, var(--bg) 0%, rgba(8,9,12,.93) 28%, rgba(8,9,12,.62) 60%, rgba(8,9,12,.34) 100%);
}
}
/* 2026-09-21 · the client's two new "Old Way" photographs carry the house gold
tone so the pair belongs to the page rather than sitting cooler than it. */
#old-way .oldway__fig img{ filter: var(--gold-photo-mono) contrast(1.04) brightness(.92); }
#old-way .oldway__fig2 img{ filter: var(--gold-photo) brightness(1.04); }
/* ══════════════════════════════════════════════════════════════════════════
2026-09-22 · CLIENT FEEDBACK BATCH 12 — capitalq track (C-1…C-6)
══════════════════════════════════════════════════════════════════════════ */
/* ── C-2 · "Q helps you understand, evaluate and act on them." starts on a NEW LINE.
Same device as #old-way's .cqp-nl: a block span, so the break holds at every
width instead of depending on where the measure happens to wrap. ── */
#top .cqp-hero__fit .cqp-nl2{ display: block; }
/* ── C-3 · the Old Way body copy is WHITE.
It carried .tblue (gold); the gold .cqp-nl inside it is overridden too, and
-webkit-text-fill-color is re-stated so no inherited fill can tint it. ── */
#old-way .h-sub.cqp-oldway__white,
#old-way .h-sub.cqp-oldway__white .cqp-nl{
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
background: none !important;
}
/* ── C-4 · ACTIVE / INACTIVE ARROWS.
The look is the site-wide contract in css/style.css (.is-arrow-on = gold outline +
gold glyph, .is-arrow-off = dulled); js/fix-0917c-cqpage.js wires the state on all
three carousels on this page (#search, #journey, #features).
Two collisions to settle here:
(a) .scar__btn[disabled] (0,2,0) out-specifies the shared .is-arrow-off (0,1,0) and
would dull to .35 — the contract's .55 is re-stated at section scope;
(b) .plat2 .scar__btn / .sqz__btn carry their own light-section background, which
must not repaint the gold outline of the active arrow. ── */
#search .fb-arrow.is-arrow-off,
#journey .fb-arrow.is-arrow-off,
#features .fx-cq9__arrow.is-arrow-off{ opacity: .55; }
#search .fb-arrow.is-arrow-on,
#journey .fb-arrow.is-arrow-on,
#features .fx-cq9__arrow.is-arrow-on{ opacity: 1; }
/* the two light sections: keep the gold outline on the white ground */
#search .fb-arrow.is-arrow-on,
#features .fx-cq9__arrow.is-arrow-on{
background: transparent !important;
border-color: var(--accent) !important;
color: var(--accent) !important;
}
#search .fb-arrow.is-arrow-on:hover,
#features .fx-cq9__arrow.is-arrow-on:hover{
background: var(--accent) !important; color: var(--accent-on) !important;
}
#search .fb-arrow.is-arrow-on:hover svg,
#features .fx-cq9__arrow.is-arrow-on:hover svg{ fill: var(--accent-on); }
/* the dulled arrow is not a target */
#search .fb-arrow.is-arrow-off,
#journey .fb-arrow.is-arrow-off,
#features .fx-cq9__arrow.is-arrow-off{ cursor: default; }
#search .fb-arrow.is-arrow-off:hover,
#journey .fb-arrow.is-arrow-off:hover,
#features .fx-cq9__arrow.is-arrow-off:hover{
background: transparent !important;
border-color: rgba(11,12,14,.16) !important;
}
#journey .fb-arrow.is-arrow-off:hover{ border-color: rgba(244,248,251,.14) !important; }
/* the phone treatment hid the unreachable arrow outright (opacity:0). The client
wants to SEE both — one gold, one dull — so it is dulled to the contract's .55
and stays unpressable. */
@media (max-width: 880px){
#journey .cqp-jcar .fb-arrow[disabled],
#journey .cqp-jcar .fb-arrow.is-arrow-off{ opacity: .55; pointer-events: none; }
}
/* ── C-6 · READ MORE on the long #journey cards.
Built by js/fix-0917c-cqpage.js on any card carrying more than one paragraph, so the
copy block starts on the same line as its neighbours. Square, glass, gold — the house
button, scaled down to sit inside a card. ── */
#journey .cqp-jcar .cqp-jmore[hidden]{ display: none; }
#journey .cqp-jcar .cqp-jmore .scard__d{ margin-top: 9px; }
#journey .cqp-jcar .cqp-jmore__btn{
display: inline-flex; align-items: center; gap: 8px;
margin-top: 14px; padding: 8px 14px;
font-family: var(--font-display); font-size: .82rem; font-weight: 600;
letter-spacing: .01em; line-height: 1;
color: var(--accent);
background: rgba(226,178,76,.07);
border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
cursor: pointer;
transition: background .22s ease, color .22s ease, border-color .22s ease;
}
#journey .cqp-jcar .cqp-jmore__btn:hover,
#journey .cqp-jcar .cqp-jmore__btn:focus-visible{
background: var(--accent); color: var(--accent-on);
border-color: var(--accent);
}
#journey .cqp-jcar .cqp-jmore__arr{
transition: transform .22s ease;
font-size: .95em;
}
#journey .cqp-jcar .cqp-jmore__btn[aria-expanded="true"] .cqp-jmore__arr{ transform: rotate(90deg); }
/* opened, the card grows past its min-height rather than clipping the copy */
#journey .cqp-jcar .scard.is-more{ height: auto; }
/* the lead paragraph is clamped by JS (a measured -webkit-line-clamp) while collapsed,
so the card's text starts on the same line as its neighbours. */
#journey .cqp-jcar .scard__foot > .scard__d[style*="line-clamp"]{
display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
/* ── C-5 · the six new #journey photographs.
All six take the house --gold-photo tone from the 0917c block above. Two of the six
carry a cooler native cast than the rest — 01's waveform peaks run magenta and 02's
analytics screens are lit navy — so those two get the SAME gold treatment at a heavier
weight, and the set reads as one shoot instead of one warm run with two cold frames. ── */
#journey .cqp-jcar .scar__track > .scard:nth-child(1) .scard__img{
filter: sepia(.62) saturate(1.22) hue-rotate(-14deg) brightness(.98);
}
#journey .cqp-jcar .scar__track > .scard:nth-child(2) .scard__img{
filter: sepia(.78) saturate(1.3) hue-rotate(-12deg) brightness(1.05) contrast(1.04);
}
/* while a #journey card is expanded on phones, the floating arrows clear the copy */
@media (max-width: 880px){
#journey .cqp-jcar.is-reading .fb-arrow{
opacity: 0 !important; pointer-events: none; visibility: hidden;
}
}
/* The #features arrows are .sqz__btn, whose site-wide base is a GOLD GRADIENT FILL with
no border (style.css .sqz__btn + the 0915 accent block). Left alone, the dulled arrow
stayed a gold block at .55 and read as "washed gold", not "off". The client asked for a
gold OUTLINE on the arrow you can press, so on this carousel both states drop the fill
and the contract's border does the talking. */
#features .fx-cq9__arrow.is-arrow-off{
background: transparent !important;
background-image: none !important;
border: 1px solid rgba(11,12,14,.16) !important;
color: rgba(11,12,14,.3) !important;
box-shadow: none !important;
}
#features .fx-cq9__arrow.is-arrow-off svg{ fill: rgba(11,12,14,.3) !important; }
#features .fx-cq9__arrow.is-arrow-on{
background-image: none !important;
}
#features .fx-cq9__arrow.is-arrow-on:hover{
background-image: var(--accent-grad) !important;
}
/* #search's arrows are .scar__btn on a light section — same reset for the dulled one */
#search .fb-arrow.is-arrow-off{
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
#search .fb-arrow.is-arrow-off svg{ fill: rgba(11,12,14,.3) !important; }
#journey .fb-arrow.is-arrow-off{
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
#journey .fb-arrow.is-arrow-off svg{ fill: rgba(244,248,251,.28) !important; }
/* Two older rules in this file out-specify the contract and had to be corrected here
rather than edited in place (this file is append-only):
· line ~475 `#search .cqp-bcar .fb-arrow[disabled]{opacity:.35}` dulled #search's arrow
harder than #journey's and #features', so the three carousels on one page disagreed;
· line ~492 hid #search's unreachable arrow completely below 880px, the same thing that
was corrected for #journey above — the client wants to SEE the dull one. */
#search .cqp-bcar .fb-arrow[disabled],
#search .cqp-bcar .fb-arrow.is-arrow-off{ opacity: .55; }
@media (max-width: 880px){
#search .cqp-bcar .fb-arrow[disabled],
#search .cqp-bcar .fb-arrow.is-arrow-off{ opacity: .55; pointer-events: none; }
}
/* At 390 #search's arrows float over the gold cards, where a gold outline on a gold
ground reads as nothing at all — the state the client asked for was invisible on a
phone. #journey already backs its floating arrows with dark glass; #search gets the
same plate, so both the gold arrow and the dull one read against the card. */
@media (max-width: 880px){
#search .cqp-bcar .fb-arrow,
#search .cqp-bcar .fb-arrow.is-arrow-on,
#search .cqp-bcar .fb-arrow.is-arrow-off{
background: rgba(10,10,11,.82) !important;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#search .cqp-bcar .fb-arrow.is-arrow-off{
border-color: rgba(244,248,251,.20) !important;
color: rgba(244,248,251,.34) !important;
}
#search .cqp-bcar .fb-arrow.is-arrow-off svg{ fill: rgba(244,248,251,.34) !important; }
}
/* ══════════════════════════════════════════════════════════════════════════════════
FIX ROUND · 2026-09-22 (track "cq") — the four reviewer failures, at their root.
O-8/C-5 photographs are file swaps in capitalq.html; what they need HERE is the tone
grade per card. C-4 is the phone treatment of the #features arrows. QUALITY covers the
Connect card, the hero line and the Read More hit box.
══════════════════════════════════════════════════════════════════════════════════ */
/* ── QUALITY (2) · the hero line kept orphaning "Iron Man" on a line of its own at 1440.
The phrase is now one unbreakable unit, so the line splits where it reads:
"Think TikTok for investment discovery +" / "Jarvis from Iron Man". Both places the
line appears (hero + The Better Way). ── */
.cqp-nowrap{ white-space: nowrap; }
/* ── C-4 · #features arrows at PHONE widths.
Below 900px the two arrows float ON TOP of the feature photograph, which is dark.
The section's near-black ink (rgba(11,12,14,.3)) at opacity .55 measured ~16% black on
that photograph — the inactive arrow was not dull, it was invisible. #search and
#journey already solve this with a dark plate and a LIGHT glyph; #features now uses the
same treatment, and only at phone width. The 1440 treatment is untouched. ── */
@media (max-width: 899px){
#features .fx-cq9__arrow,
#features .fx-cq9__arrow.is-arrow-on,
#features .fx-cq9__arrow.is-arrow-off{
background: rgba(10,10,11,.8) !important;
background-image: none !important;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* 2026-09-22d: the LIGHT glyph is the phone DEFAULT, not only the is-arrow-off state.
The state machine adds is-arrow-on/off after it initialises; in the frames before that
an unclassed arrow fell back to the section's near-black ink and was invisible over the
photograph — the same defect at first paint that the class fixed after paint. */
#features .fx-cq9__arrow{
border: 1px solid rgba(244,248,251,.2) !important;
color: rgba(244,248,251,.34) !important;
}
#features .fx-cq9__arrow svg{ fill: rgba(244,248,251,.34) !important; }
#features .fx-cq9__arrow.is-arrow-off{
border: 1px solid rgba(244,248,251,.2) !important;
color: rgba(244,248,251,.34) !important;
}
#features .fx-cq9__arrow.is-arrow-off svg{ fill: rgba(244,248,251,.34) !important; }
#features .fx-cq9__arrow.is-arrow-off:hover{
background: rgba(10,10,11,.8) !important;
border-color: rgba(244,248,251,.2) !important;
}
#features .fx-cq9__arrow.is-arrow-on{
border-color: var(--accent) !important;
color: var(--accent) !important;
}
#features .fx-cq9__arrow.is-arrow-on svg{ fill: var(--accent) !important; }
}
/* ── QUALITY (3) · Read More was a 118x31 hit box. The label stays at .82rem; the box
grows to a comfortable 44px on phones. ── */
@media (max-width: 899px){
#journey .cqp-jcar .cqp-jmore__btn{
min-height: 44px; padding: 12px 16px;
}
}
/* ── QUALITY (1) · the Connect card.
It carried a larger, heavier paragraph than the two cards beside it, so the row still
did not start together even after the clamp solved. Its copy now sets exactly like
every other card's, and js/fix-0917c-cqpage.js brings it into the same Read More pass.
The line it used to carry in display type is instead marked by the gold rule the rest
of the card already uses. ── */
#journey .cqp-jcar .cqp-jcar__big{
font-size: .88rem; font-weight: 400; line-height: 1.6;
color: rgba(244,248,251,.82);
}
/* ── C-5 · tone grade for the SIX replacement #journey photographs (2026-09-22).
Re-picked against the sentence, not against the word "tech". These rules replace the
two nth-child overrides written for the previous set: 01 is now gold in-camera and only
needs the house grade, while 02's blue plot points, 04's red gate roundels and 06's grey
city are pulled into the same gold/amber range so the six read as one set. ── */
#journey .cqp-jcar .scar__track > .scard:nth-child(1) .scard__img{
filter: var(--gold-photo) saturate(1.1) brightness(1.04);
}
#journey .cqp-jcar .scar__track > .scard:nth-child(2) .scard__img{
filter: sepia(.5) saturate(1.2) hue-rotate(-10deg) brightness(1.06) contrast(1.02);
}
#journey .cqp-jcar .scar__track > .scard:nth-child(3) .scard__img{
filter: var(--gold-photo) saturate(1.2) brightness(1.3) contrast(1.02);
}
#journey .cqp-jcar .scar__track > .scard:nth-child(4) .scard__img{
filter: sepia(.55) saturate(1.05) hue-rotate(-8deg) brightness(1.12);
}
#journey .cqp-jcar .scar__track > .scard:nth-child(5) .scard__img{
filter: var(--gold-photo) saturate(1.1) brightness(1.02);
}
#journey .cqp-jcar .scar__track > .scard:nth-child(6) .scard__img{
filter: sepia(.45) saturate(1.18) hue-rotate(-8deg) brightness(1.06);
}
/* a Read More that has nothing to reveal is not rendered at all */
#journey .cqp-jcar .cqp-jmore__btn[hidden]{ display: none !important; }
/* ── O-8 (2026-09-22d) · the three panels re-picked a SECOND time this round, after
opening every file and reading it against its own line.
04.1 Investment Snapshot — the frame (a board of compact figures being read at a glance)
answers "See the essentials of an opportunity quickly", so it stays; what it carried were
two cyan trend lines, the only cold hue in the nine. A deeper sepia on this panel alone
pulls them into the page's gold without touching the other eight.
04.3 Investment Thesis Match — was a worn dartboard: a metaphor object on a white ground
that read as a clock face at strip scale, i.e. the brass clock gears wearing a different
hat. The line is "See how closely every opportunity aligns with what an investor is
actually looking for" and the deep line is literally "Know your fit before your first
conversation." The panel now carries a bespoke fitting — two tailors measuring a man to
his own dimensions in a dark warm workshop. Fit, measured, before anything is cut.
The grade mutes the one cold note in the frame (a pair of blue jeans) and lifts the
workshop's amber.
04.9 Matching & Intelligence Reports — was an empty numbered auditorium, which behind
"Meet the investors already looking for businesses like yours" reads as nobody came. Its
own copy says "launch a TARGETED investor campaign… introduced only to qualified investors
who match your stage, sector, geography, cheque size, and investment thesis", so the panel
now carries a target with the dart in the centre. The original is monochrome, so the house
gold takes it completely — no foreign hue survives — and the frame is cropped off-centre
(object-position 62% 34%) so the strip shows the dart crossing the rings rather than a
concentric disc.
All three grades are scoped to .is-open: a closed panel keeps the section's dimmed mono
treatment from fix-0917b-cqnine.css, so the collapsed strip still reads as one set.
The 04.7 grade below is re-scoped the same way — it was overriding the dimmed state. ── */
#features .fx-cq-sqz .sqz__panel:nth-child(1).is-open .sqz__img{
filter: sepia(.62) saturate(1.22) hue-rotate(-12deg) contrast(1.06) brightness(1.04);
}
#features .fx-cq-sqz .sqz__panel:nth-child(3).is-open .sqz__img{
filter: sepia(.74) saturate(1.28) hue-rotate(-12deg) contrast(1.05) brightness(1.12);
}
#features .fx-cq-sqz .sqz__panel:nth-child(9).is-open .sqz__img{
filter: sepia(.66) saturate(1.5) hue-rotate(-14deg) contrast(1.02) brightness(.98);
}
/* ── O-8 (2026-09-22c) · 04.7 Smart Data Room.
The bookshelf the client rejected was printed paper on shelves — the artefact the Smart
Data Room exists to replace — and the gold vault door that followed it was where money is
kept, not where anything is found. The panel now carries a dark room of numbered, locked,
individually addressed compartments under two light strips: one location, everything in
its own place, everything findable by its number, which is what "Everything organised.
Everything searchable… one secure, structured location" promises. ── */
#features .fx-cq-sqz .sqz__panel:nth-child(7).is-open .sqz__img{
filter: sepia(.42) saturate(1.3) hue-rotate(-8deg) contrast(1.05) brightness(1.02);
}