/* ══════════ 0917b · for-businesses.html — client feedback batch 3 (track "business")
B2 #be-honest scroll sequence · B3 #raise-smarter slower photos + one-line close · B4 #platform drop-mic on gold
B5 carousel arrows left/right · B6 #ready in the document's order · B7 #close in the homepage .xk language
G1 gold tone on photos · G4 CapitalQ orb. Every selector is scoped to an id on this page. Brief: .claude/CLIENT-FEEDBACK-0917b.md
══════════ */
/* ───────────────────────── G1 · golden overlay on the page's photography ───────────────────────── */
#top .hero__bg img{ filter: var(--gold-photo); }
#features .fx-fb-shot::before{ filter: grayscale(.32) contrast(.88) brightness(.85) sepia(.3) saturate(1.12) hue-rotate(-6deg); }
/* ───────────────────────── B2 · #be-honest ─────────────────────────
Default (no JS / reduced motion): a calm stacked read in the document's order.
.is-live (JS, motion allowed): a pinned 100vh stage; scroll drives the scenes. */
#be-honest.bh2{
--pad: 20px;
background: var(--bg); padding-block: clamp(72px, 9vw, 140px); overflow-x: clip;
border-top: 1px solid var(--line-soft);
}
@media (min-width:640px){ #be-honest.bh2{ --pad: 32px; } }
@media (min-width:768px){ #be-honest.bh2{ --pad: 40px; } }
#be-honest .bh2__glow{
position: absolute; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(42% 38% at var(--gx, 78%) var(--gy, 30%), color-mix(in srgb, var(--accent) 13%, transparent), color-mix(in srgb, var(--accent) 0%, transparent) 70%),
radial-gradient(36% 30% at 8% 96%, color-mix(in srgb, var(--accent) 6%, transparent), color-mix(in srgb, var(--accent) 0%, transparent) 72%);
}
#be-honest .bh2__frame{ position: relative; z-index: 1; }
#be-honest .bh2__title{
margin: 0; font-family: var(--font-display); font-weight: 600;
font-size: clamp(2.4rem, 5.4vw, 5.2rem); line-height: 1; letter-spacing: -.04em; color: var(--txt-hi);
}
#be-honest .bh2__titlein{ display: inline-block; transform-origin: 0 0; will-change: transform; }
/* shared scene type */
#be-honest .bh2__scene{ margin-top: clamp(56px, 7vw, 96px); }
#be-honest .bh2__lead{
margin: 0; font-family: var(--font-display); font-weight: 500;
font-size: clamp(1.1rem, 1.7vw, 1.55rem); line-height: 1.3; letter-spacing: -.01em; color: var(--txt);
}
/* funnel */
#be-honest .bh2__funnel{ list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
#be-honest .bh2__row{
--k: 1;
display: grid; grid-template-columns: 3.4rem minmax(0, 1.25fr) minmax(0, .75fr); align-items: center;
gap: clamp(14px, 2vw, 32px); padding-block: clamp(16px, 2.4vh, 28px); border-top: 1px solid var(--line);
}
#be-honest .bh2__ix{ font-size: .78rem; font-weight: 600; letter-spacing: .18em; color: var(--accent); }
#be-honest .bh2__q{
margin: 0; font-family: var(--font-display); font-weight: 500;
font-size: clamp(1.25rem, 2.25vw, 2.15rem); line-height: 1.15; letter-spacing: -.022em; color: var(--txt-hi);
}
#be-honest .bh2__bar{
position: relative; display: block; height: clamp(18px, 3vh, 34px);
background: repeating-linear-gradient(90deg, rgba(244,248,251,.10) 0 1px, transparent 1px 12px);
outline: 1px solid var(--line-soft);
}
#be-honest .bh2__bar i{
position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * 100%);
background: var(--accent-sheen), var(--accent-grad);
box-shadow: 0 0 28px -6px var(--accent-glow);
transform: scaleX(var(--k)); transform-origin: left;
}
/* stop asking */
#be-honest .bh2__old{ position: relative; display: inline-block; align-self: flex-start; margin: clamp(14px, 2vh, 24px) 0 0; }
#be-honest .bh2__oldtxt{
display: inline; font-family: var(--font-display); font-weight: 600;
font-size: clamp(2rem, 5.4vw, 5.4rem); line-height: 1.08; letter-spacing: -.04em; color: var(--txt-hi);
background-image: var(--accent-grad); background-repeat: no-repeat;
background-position: 0 58%; background-size: calc(var(--s, 1) * 100%) clamp(3px, .42vw, 6px);
-webkit-box-decoration-break: clone; box-decoration-break: clone;
transition: color .2s linear;
}
#be-honest .bh2__strike{ display: none; }
#be-honest .bh2__old.is-struck .bh2__oldtxt{ color: rgba(244,248,251,.34); }
/* start asking */
#be-honest .bh2__new{
margin: clamp(14px, 2vh, 24px) 0 0; max-width: 20ch;
font-family: var(--font-display); font-weight: 600;
font-size: clamp(2rem, 5.4vw, 5.4rem); line-height: 1.04; letter-spacing: -.04em; color: var(--accent);
}
#be-honest .bh2__w{ opacity: var(--o, 1); }
/* confidence */
#be-honest .bh2__scene--conf{ display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; }
@media (min-width: 881px){ #be-honest .bh2__scene--conf{ grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
#be-honest .bh2__because{ margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.4rem); line-height: 1.4; color: var(--txt); }
#be-honest .bh2__with{
margin: 12px 0 0; font-family: var(--font-display); font-weight: 600;
font-size: clamp(2rem, 4.4vw, 4.3rem); line-height: 1.02; letter-spacing: -.04em; color: var(--txt-hi);
}
#be-honest .bh2__wheel{ list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
#be-honest .bh2__wi{
position: relative; padding: clamp(8px, 1.3vh, 14px) 0 clamp(8px, 1.3vh, 14px) clamp(18px, 2.2vw, 32px);
font-family: var(--font-display); font-weight: 600;
font-size: clamp(1.25rem, 2.35vw, 2.3rem); line-height: 1.12; letter-spacing: -.025em; color: var(--txt-hi);
}
#be-honest .bh2__wword{ color: var(--accent); }
#be-honest .bh2__wi::before{
content: ""; position: absolute; left: -1px; top: 18%; bottom: 18%; width: 2px; background: var(--accent-grad);
transform: scaleY(0); transition: transform .45s cubic-bezier(.22,1,.36,1);
}
#be-honest .bh2__prog{ display: none; }
/* ── live (pinned) ── */
#be-honest.bh2.is-live{ padding-block: 0; }
#be-honest.is-live .bh2__track{ position: relative; height: 620vh; }
#be-honest.is-live .bh2__pin{ position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#be-honest.is-live .bh2__frame{ height: 100%; padding: 0; }
#be-honest.is-live .bh2__title{ position: absolute; left: var(--pad); top: clamp(96px, 13.5vh, 132px); z-index: 3; white-space: nowrap; }
#be-honest.is-live .bh2__scene{
position: absolute; left: var(--pad); right: var(--pad); margin: 0;
top: clamp(180px, 27vh, 280px); bottom: clamp(58px, 9vh, 96px);
display: flex; flex-direction: column; justify-content: center;
opacity: 0; visibility: hidden; will-change: opacity, transform;
}
#be-honest.is-live .bh2__scene--conf{ display: grid; align-content: center; }
#be-honest.is-live .bh2__scene.is-vis{ visibility: visible; }
#be-honest.is-live .bh2__wheel{ border-left-color: var(--line-soft); }
#be-honest.is-live .bh2__wi{ opacity: .2; transition: opacity .45s ease, color .45s ease; }
#be-honest.is-live .bh2__wi .bh2__wword{ color: var(--txt-hi); transition: color .45s ease; }
#be-honest.is-live .bh2__wi.is-past{ opacity: .45; }
#be-honest.is-live .bh2__wi.is-on{ opacity: 1; }
#be-honest.is-live .bh2__wi.is-on .bh2__wword{ color: var(--accent); }
#be-honest.is-live .bh2__wi.is-on::before{ transform: scaleY(1); }
#be-honest.is-live .bh2__prog{
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(26px, 4.4vh, 44px); z-index: 3;
}
#be-honest .bh2__pseg{ position: relative; height: 2px; background: rgba(244,248,251,.12); overflow: hidden; }
#be-honest .bh2__pseg i{ position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--f, 0)); transform-origin: left; }
@media (max-width: 880px){
#be-honest .bh2__row{ grid-template-columns: 2.2rem minmax(0, 1fr); row-gap: 10px; }
#be-honest .bh2__bar{ grid-column: 2; height: 14px; }
#be-honest.is-live .bh2__track{ height: 560vh; }
#be-honest.is-live .bh2__title{ top: 92px; }
#be-honest.is-live .bh2__scene{ top: 160px; bottom: 56px; }
#be-honest .bh2__q{ font-size: clamp(1.15rem, 5.2vw, 1.5rem); }
#be-honest .bh2__oldtxt,
#be-honest .bh2__new{ font-size: clamp(2rem, 10vw, 2.8rem); }
#be-honest .bh2__with{ font-size: clamp(1.9rem, 9vw, 2.6rem); }
#be-honest .bh2__wi{ font-size: clamp(1.15rem, 5.4vw, 1.5rem); padding-block: 7px; }
#be-honest.is-live .bh2__scene--conf{ gap: 22px; }
}
/* ───────────────────────── B3 · #raise-smarter ───────────────────────── */
#raise-smarter .fb-shiftstage .shift__img{
filter: var(--gold-photo);
transition: transform 2.4s cubic-bezier(.45,.05,.2,1), opacity 2.4s ease;
}
#raise-smarter .fb-shiftclose .fb-shiftline{ display: block; margin-top: .3em; }
@media (min-width: 881px){
#raise-smarter .fb-shiftclose .fb-shiftline{ white-space: nowrap; font-size: var(--fit, inherit); }
}
@media (prefers-reduced-motion: reduce){ #raise-smarter .fb-shiftstage .shift__img{ transition: none; } }
/* ───────────────────────── B4 · #platform — the drop-mic on gold ───────────────────────── */
#platform.fb-drop{
position: relative; overflow: hidden; isolation: isolate;
/* no cream --accent-sheen here: the gold must read rich behind 70px+ ink type */
background: var(--accent-grad); background-color: var(--accent);
padding-block: clamp(110px, 13vw, 220px);
}
#platform .fb-drop__sheen{
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(10,10,11,.10), rgba(10,10,11,0) 22%, rgba(10,10,11,0) 78%, rgba(10,10,11,.12));
}
#platform .fb-drop__stack{ position: relative; z-index: 1; }
#platform .fb-drop__l{
margin: 0; overflow: hidden; padding-bottom: .06em;
font-family: var(--font-display); font-weight: 700;
font-size: clamp(1.9rem, 5.05vw, 4.75rem); line-height: 1.02; letter-spacing: -.045em;
color: var(--accent-on); -webkit-text-fill-color: currentColor;
}
/* site rule: ink on gold. Lines 1–2 set up (ink, softened), line 3 lands (solid ink, bigger, heavier) */
#platform .fb-drop__l:not(.fb-drop__l--mic){ opacity: .78; font-weight: 600; }
#platform .fb-drop__l + .fb-drop__l{ margin-top: .04em; }
#platform .fb-drop__l--mic{
margin-top: clamp(18px, 2.4vw, 36px) !important;
font-size: clamp(2.35rem, 7vw, 6.6rem); font-weight: 800; letter-spacing: -.05em; color: var(--accent-on);
}
#platform .fb-drop__in{ display: inline-block; }
.fb-js #platform .fb-drop__in{ transform: translateY(108%); transition: transform 1s cubic-bezier(.22,1,.36,1); }
.fb-js #platform .fb-drop__l:nth-child(2) .fb-drop__in{ transition-delay: .12s; }
.fb-js #platform .fb-drop__l:nth-child(3) .fb-drop__in{ transition-delay: .3s; }
.fb-js #platform .is-in .fb-drop__in{ transform: none; }
@media (prefers-reduced-motion: reduce){ .fb-js #platform .fb-drop__in{ transform: none; transition: none; } }
/* ───────────────────────── B5 · arrows on the left and right of each carousel ───────────────────────── */
#approach .scar, #features .scar{ margin-top: clamp(30px, 3.8vw, 52px); }
#approach .fb-stage,
#features .fb-stage{
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(12px, 1.6vw, 22px);
}
#approach .fb-stage .scar__track,
#features .fb-stage .scar__track{ --fx-g-side: clamp(12px, 1.6vw, 22px); }
#approach .fb-arrow,
#features .fb-arrow{ position: relative; z-index: 3; width: 52px; height: 52px; }
#approach .fb-arrow svg,
#features .fb-arrow svg{ width: 18px; height: 18px; }
#approach .fb-arrow:not([disabled]):hover,
#features .fb-arrow:not([disabled]):hover{ background: var(--accent-grad); border-color: var(--accent); color: var(--accent-on); }
/* 2026-09-22 · at ≤880 the two arrows are NOT floated on top of the card any more. They used to be
absolutely centred over it, which was survivable only while the unusable one was invisible; the
moment batch 12 asked for a DULL arrow instead of a missing one, the prev chip was painted straight
across the first #features card's READ MORE control. The stage now reserves a rail under the
track and both arrows live in it, so they cannot intersect any card's own content or controls —
whatever a card holds, at any width, on any slide. They also sit on the section's own background,
so the phone arrows are made of exactly the same material as the desktop ones and the site-wide
.is-arrow-on / .is-arrow-off contract reads here unchanged. */
@media (max-width: 880px){
#approach .fb-stage,
#features .fb-stage{
grid-template-columns: minmax(0, 1fr); position: relative;
/* 42px chip + 34px of air. The air is deliberate: the cards rise 26px into place on reveal,
so a tighter rail would let a card's bottom edge cross the chips for the length of that
animation. At 76px the clearance is 34px settled and still ~8px at the start of the rise. */
padding-bottom: 76px;
}
#approach .fb-arrow,
#features .fb-arrow{
position: absolute; top: auto; bottom: 0; transform: none; z-index: 3; width: 42px; height: 42px;
background: rgba(244,248,251,.06);
}
#approach .fb-arrow--prev, #features .fb-arrow--prev{ left: auto; right: 50px; }
#approach .fb-arrow--next, #features .fb-arrow--next{ right: 0; }
#approach .fb-arrow[disabled], #features .fb-arrow[disabled]{ pointer-events: none; }
}
/* ───────────────────────── G4 · CapitalQ orb beside "Inside CapitalQ™" ───────────────────────── */
#features .fb-cqhead{ display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
#features .fb-cqorb{ flex: none; width: clamp(96px, 11vw, 168px); }
/* ───────────────────────── B7 · #close — homepage .xk language, this page's copy ───────────────────────── */
#close.fb-xk .fb-xk__head{ font-size: clamp(2.7rem, 8.4vw, 8.2rem); line-height: .98; letter-spacing: -.045em; font-weight: 600; }
#close.fb-xk .fb-xk__lede{
font-size: clamp(1.3rem, 2.25vw, 2.1rem); line-height: 1.22; letter-spacing: -.022em; font-weight: 600;
max-width: 36ch; margin-inline: auto;
}
#close.fb-xk .fb-xk__plate{ padding-bottom: 104px; }
#close.fb-xk .fb-xk__dock{ display: flex; gap: 12px; align-items: stretch; }
#close.fb-xk .fb-xk__ghost{
min-height: 64px; padding: 20px 30px; white-space: nowrap;
font-weight: 600; font-size: clamp(.98rem, 1.1vw, 1.06rem); letter-spacing: -.01em;
background: rgba(10,10,11,.9); color: var(--txt-hi); -webkit-text-fill-color: currentColor;
border: 1px solid rgba(244,248,251,.22);
}
#close.fb-xk .fb-xk__ghost:hover,
#close.fb-xk .fb-xk__ghost:focus-visible{ border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
#close.xk-js.fb-xk .fb-xk__ghost{ opacity: 0; translate: 0 -16px; transition: opacity .52s ease 1.12s, translate .52s cubic-bezier(.34,1.56,.64,1) 1.12s, border-color .25s ease, color .25s ease; }
#close.fb-xk .xk-field.is-in .fb-xk__ghost{ opacity: 1; translate: 0 0; }
@media (max-width: 880px){
#close.fb-xk .fb-xk__plate{ padding-bottom: 32px; }
#close.fb-xk .fb-xk__dock{ position: static; transform: none; width: 100%; margin-top: 28px; flex-direction: column; gap: 10px; }
#close.fb-xk .fb-xk__ghost{ width: 100%; min-height: 58px; justify-content: center; padding-inline: 18px; }
#close.fb-xk .xk-cta{ justify-content: center; }
}
/* B7 fix · the two chips carried Shift-section lines that are not in the Close copy ("Raise Smarter." echoed the
headline). They are now empty gold nodes — no words — anchored under the headline's left edge ("Ready to") and
right edge ("Raise Smarter?"), so main.js's .xk rails and comets still start there and run into the plate. */
#close.fb-xk .fb-xk__node{
width: 58px; height: 58px; padding: 0; justify-content: center;
background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
}
#close.fb-xk .fb-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.fb-xk .xk-origin--cap.fb-xk__node{ justify-self: start; margin-left: -23px; }
#close.fb-xk .xk-origin--opp.fb-xk__node{ justify-self: end; margin-right: -23px; margin-top: 56px; }
#close.fb-xk .xk-plate.fb-xk__plate{ margin-top: 40px; }
@media (max-width: 880px){
#close.fb-xk .fb-xk__node{ display: none; }
#close.fb-xk .xk-plate.fb-xk__plate{ margin-top: 0; }
}
/* ───────────────── lead fix (review 2) · B3: the pay-off line legible on the light ground ───────────────── */
#raise-smarter .fb-shiftclose .fb-shiftline{ color: #A97B27; -webkit-text-fill-color: currentColor; }
#raise-smarter .fb-shiftclose .fb-shiftline.is-wrap{ white-space: normal; }
#raise-smarter .shift3__h .tblue{ color: #A97B27; -webkit-text-fill-color: currentColor; }
/* ══════════════════════════════════════════════════════════════════════════
0918 · CLIENT FEEDBACK BATCH 5 — for-businesses.html (track "business2")
B1 #nothing-changes gets a real animation and a real image · B2 "Raise Smarter." on its own line ·
B3 #platform carries THE PATTERN (shared .goldpat) · B4/G4 the hover halo fades on every side ·
B5 #ready rebuilt as the Knowledge-Centre ORBIT, copy left / orbit right · B6 the drop-mic redesigned ·
B7 the Close heading moves INSIDE the gold plate, which carries THE PATTERN.
Brief: .claude/CLIENT-FEEDBACK-0918.md
══════════════════════════════════════════════════════════════════════════ */
/* ───────────────────────── B1 (0918b) · #nothing-changes — REDESIGNED (second rejection) ─────────────────────────
Client: "I don't know why I'm seeing this design as that. It is not making sense at all."
Diagnosis: the old block was a photo + a numbered rolling row-list, which is the SAME shape as #be-honest
right above it (pinned numbered rows with bars). Two neighbouring sections were telling one story twice,
and the belt's mask cut the fourth line in half — so it literally could not be read.
The new design is the sentence made visible:
· four efforts = four CLOSED LOOPS. Each is a ring whose gold arc sweeps the whole way round and then
starts again from zero — the effort completes and nothing has changed. Nothing is clipped; each line
is whole and sits inside its own loop. (Circles: the client asked for circles in #ready next door and
the brief sanctions circular items here.)
· four gold paths bend out of the four loops and all land on ONE point — "the same outcome".
· the outcome drops onto a full-bleed photographic verdict band where the answer is stamped in ink on
gold: no.
Document order is exactly the document's: headline → the four efforts → "They all lead back…" → verdict. */
#nothing-changes.nc5{
position: relative; background: var(--bg); overflow-x: clip;
padding-block: clamp(78px, 9.4vw, 142px) 0;
}
#nothing-changes .nc5__h{
text-align: center; font-size: clamp(2.1rem, 5.2vw, 4.6rem); line-height: 1.04;
max-width: 22ch; margin-inline: auto;
}
#nothing-changes .nc5__h .tblue{ color: var(--accent); -webkit-text-fill-color: currentColor; }
#nothing-changes .nc5__loop{ position: relative; margin-top: clamp(46px, 5.6vw, 84px); }
/* ── the four loops ── */
#nothing-changes .nc5__tries{
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 28px);
}
#nothing-changes .nc5__try{ display: grid; place-items: center; }
#nothing-changes .nc5__dial{
position: relative; display: grid; place-items: center;
width: clamp(158px, 16.6vw, 232px); aspect-ratio: 1 / 1;
background:
radial-gradient(closest-side, color-mix(in srgb, var(--accent) 9%, transparent), transparent 76%),
rgba(18,19,22,.78);
}
/* style.css ends with a global border-radius:0 !important — the circle needs the same escape hatch the
sanctioned Knowledge Centre orbit nodes use */
body #nothing-changes .nc5__dial{ border-radius: 50% !important; }
#nothing-changes .nc5__ring{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#nothing-changes .nc5__trk{ fill: none; stroke: color-mix(in srgb, var(--accent) 26%, transparent); stroke-width: .8; }
#nothing-changes .nc5__arc{
fill: none; stroke: var(--accent); stroke-width: 2.1; stroke-linecap: butt;
stroke-dasharray: 100; stroke-dashoffset: 100;
transform: rotate(-90deg); transform-origin: 50% 50%;
filter: drop-shadow(0 0 6px var(--accent-glow));
animation: nc5Sweep 5.2s cubic-bezier(.62,0,.38,1) var(--d, 0ms) infinite;
}
/* round and round: the arc closes the circle, holds for a beat, blinks out and starts again from zero */
@keyframes nc5Sweep{
0% { stroke-dashoffset: 100; opacity: 1; }
58% { stroke-dashoffset: 0; opacity: 1; }
80% { stroke-dashoffset: 0; opacity: 1; }
90% { stroke-dashoffset: 0; opacity: 0; }
91% { stroke-dashoffset: 100; opacity: 0; }
100% { stroke-dashoffset: 100; opacity: 1; }
}
/* the spark rides the head of the arc so the loop reads as a loop at a glance, not only in motion */
#nothing-changes .nc5__runner{
position: absolute; inset: 0; pointer-events: none;
animation: nc5Run 5.2s cubic-bezier(.62,0,.38,1) var(--d, 0ms) infinite;
}
#nothing-changes .nc5__runner::before{
content: ''; position: absolute; left: 50%; top: 3%; width: 7px; height: 7px;
transform: translate(-50%, -50%);
background: var(--accent); box-shadow: 0 0 14px var(--accent-glow);
}
body #nothing-changes .nc5__runner::before{ border-radius: 50% !important; }
@keyframes nc5Run{
0% { transform: rotate(0deg); opacity: 1; }
58% { transform: rotate(360deg); opacity: 1; }
80% { transform: rotate(360deg); opacity: 1; }
90% { transform: rotate(360deg); opacity: 0; }
91% { transform: rotate(0deg); opacity: 0; }
100% { transform: rotate(0deg); opacity: 1; }
}
#nothing-changes .nc5__t{
margin: 0; padding: 0 15%; text-align: center; text-wrap: balance;
font-family: var(--font-display); font-weight: 600;
font-size: clamp(1rem, 1.26vw, 1.3rem); line-height: 1.18; letter-spacing: -.022em; color: var(--txt-hi);
}
/* ── the convergence ── */
#nothing-changes .nc5__conv{ position: relative; }
#nothing-changes .nc5__web{
display: block; width: 100%; height: clamp(88px, 10vw, 150px); margin-top: clamp(20px, 2.4vw, 34px);
overflow: visible;
}
#nothing-changes .nc5__ln{
fill: none; stroke: color-mix(in srgb, var(--accent) 58%, transparent); stroke-width: 1;
stroke-dasharray: 1; stroke-dashoffset: 1;
transition: stroke-dashoffset 1.15s cubic-bezier(.66,0,.28,1);
}
#nothing-changes .nc5__ln:nth-child(2){ transition-delay: .1s; }
#nothing-changes .nc5__ln:nth-child(3){ transition-delay: .18s; }
#nothing-changes .nc5__ln:nth-child(4){ transition-delay: .26s; }
#nothing-changes .nc5__loop.is-drawn .nc5__ln{ stroke-dashoffset: 0; }
#nothing-changes .nc5__knot{
position: absolute; left: 50%; bottom: 0; width: 9px; height: 9px;
transform: translate(-50%, 0) scale(0);
background: var(--accent); box-shadow: 0 0 20px var(--accent-glow);
transition: transform .5s cubic-bezier(.2,1.5,.4,1) 1.15s;
}
#nothing-changes .nc5__loop.is-drawn .nc5__knot{ transform: translate(-50%, 0) scale(1); }
#nothing-changes .nc5__spine{ display: none; }
#nothing-changes .nc5__same{
margin: clamp(30px, 3.4vw, 50px) auto 0; max-width: 54ch; text-align: center; text-wrap: balance;
font-family: var(--font-display); font-weight: 500;
font-size: clamp(1.12rem, 1.72vw, 1.6rem); line-height: 1.34; letter-spacing: -.018em; color: var(--txt-hi);
}
/* the line only hides itself when the JS that brings it back is actually running */
.fb-js #nothing-changes .nc5__same{
opacity: 0; transform: translateY(16px);
transition: opacity .7s ease 1.2s, transform .8s cubic-bezier(.22,1,.36,1) 1.2s;
}
.fb-js #nothing-changes .nc5__loop.is-drawn .nc5__same{ opacity: 1; transform: none; }
/* ── the verdict: full-bleed photograph, the answer stamped in ink on gold ── */
#nothing-changes .nc5__verdict{
position: relative; isolation: isolate; overflow: hidden;
margin-top: clamp(64px, 7.4vw, 116px); padding-block: clamp(86px, 10vw, 158px);
border-top: 1px solid var(--line);
}
#nothing-changes .nc5__vimg{
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
filter: var(--gold-photo); z-index: -2;
}
#nothing-changes .nc5__vveil{
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(180deg, var(--bg), rgba(10,10,11,.80) 34%, rgba(10,10,11,.80) 66%, var(--bg)),
linear-gradient(90deg, rgba(10,10,11,.86), rgba(10,10,11,.50) 52%, rgba(10,10,11,.86));
}
#nothing-changes .nc5__vin{ position: relative; text-align: center; }
#nothing-changes .nc5__vlead{
margin: 0 auto; max-width: 34ch; text-wrap: balance;
font-family: var(--font-display); font-weight: 600;
font-size: clamp(1.42rem, 3vw, 2.7rem); line-height: 1.12; letter-spacing: -.03em; color: var(--txt-hi);
}
#nothing-changes .nc5__vstamp{ margin: clamp(26px, 3vw, 44px) 0 0; }
#nothing-changes .nc5__no{
display: inline-block; padding: .04em .3em .16em;
background: var(--accent-grad); color: var(--accent-on); -webkit-text-fill-color: currentColor;
font-family: var(--font-display); font-weight: 700;
font-size: clamp(3.4rem, 10vw, 8rem); line-height: .92; letter-spacing: -.06em;
}
.fb-js #nothing-changes .nc5__vlead{ opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.fb-js #nothing-changes .nc5__no{ opacity: 0; transform: translateY(26px) scale(.94); transition: opacity .5s ease .34s, transform .66s cubic-bezier(.2,1.2,.3,1) .34s; }
.fb-js #nothing-changes .nc5__verdict.is-in .nc5__vlead,
.fb-js #nothing-changes .nc5__verdict.is-in .nc5__no{ opacity: 1; transform: none; }
@media (max-width: 880px){
/* two by two: the loops stay whole and stay big enough to read, and the convergence becomes one spine */
#nothing-changes .nc5__tries{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 5vw, 30px); }
#nothing-changes .nc5__dial{ width: min(100%, 196px); }
#nothing-changes .nc5__web{ display: none; }
#nothing-changes .nc5__spine{
display: block; width: 1px; height: clamp(56px, 13vw, 86px); margin: clamp(26px, 6vw, 40px) auto 0;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 62%, transparent));
}
#nothing-changes .nc5__knot{ position: static; display: block; margin: 0 auto; transform: scale(0); transition-delay: .2s; }
#nothing-changes .nc5__loop.is-drawn .nc5__knot{ transform: scale(1); }
.fb-js #nothing-changes .nc5__same{ transition-delay: .35s; }
}
@media (max-width: 560px){
#nothing-changes .nc5__dial{ width: min(100%, 162px); }
#nothing-changes .nc5__t{ padding: 0 12%; font-size: .96rem; }
}
@media (prefers-reduced-motion: reduce){
#nothing-changes .nc5__arc{ animation: none; stroke-dashoffset: 0; }
#nothing-changes .nc5__runner{ animation: none; }
#nothing-changes .nc5__ln{ stroke-dashoffset: 0; transition: none; }
#nothing-changes .nc5__knot{ transform: translate(-50%, 0) scale(1); transition: none; }
.fb-js #nothing-changes .nc5__same{ opacity: 1; transform: none; transition: none; }
.fb-js #nothing-changes .nc5__vlead,
.fb-js #nothing-changes .nc5__no{ opacity: 1; transform: none; transition: none; }
}
/* ───────────────────────── B2 · "Raise Smarter." starts a NEW line ───────────────────────── */
#raise-smarter .shift3__h .tblue{ display: block; }
/* ───────────────────────── B4 / G4 · the hover halo must fade on EVERY side ─────────────────────────
The crop the client saw on "Inside CapitalQ" was made by this file: the B5 arrow work narrowed the
carousel scrollport's side padding to 22px, and a .scar__track clips on BOTH axes, so the drop-shadow
halo (44px, visible to ~57px) was sliced by a straight vertical line at the first and last card.
The site-standard 64px of side room is given back — the track's negative margin runs under the arrow
buttons, which sit above it on z-index 3, so the bloom dissolves behind them instead of ending on an edge. */
#approach .fb-stage .scar__track,
#features .fb-stage .scar__track{
--fx-g-side: clamp(28px, 4.4vw, 64px);
/* and the scrollport's own two ends fade instead of ending on a line: whatever is still being painted
there — the outermost breath of the halo, or the next card peeking in — dissolves rather than being
sliced. The ramp is exactly the room the padding adds, so no card body is ever touched. */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fx-g-side), #000 calc(100% - var(--fx-g-side)), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 var(--fx-g-side), #000 calc(100% - var(--fx-g-side)), transparent 100%);
}
/* ───────────────────────── B5 · #ready — the nine points travel an orbit ─────────────────────────
Ported from the Knowledge Centre orbit (index.html #knowledge / css/fix-0917-knowledge.css) with nine
points instead of five: copy LEFT, orbit RIGHT, hover / focus / tap pauses the orbit and reads the point. */
#ready.bout{ background: var(--bg); padding-bottom: 0; overflow-x: clip; }
#ready .bout__grid{
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(36px, 5vw, 90px); align-items: center;
}
#ready .bout__h{
margin: 0; font-family: var(--font-display); font-weight: 600;
font-size: clamp(2.2rem, 4.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.04em; color: var(--txt-hi);
}
#ready .bout__hgold{ display: block; color: var(--accent); -webkit-text-fill-color: currentColor; }
#ready .bout__pledge{
margin: clamp(18px, 2.2vw, 30px) 0 0; max-width: 46ch;
font-family: var(--font-display); font-weight: 500;
font-size: clamp(1.08rem, 1.5vw, 1.35rem); line-height: 1.4; letter-spacing: -.01em; color: var(--txt-hi);
}
#ready .bout__body{ margin: 14px 0 0; max-width: 50ch; font-size: clamp(.95rem, 1.05vw, 1.02rem); line-height: 1.7; color: var(--txt); }
#ready .bout__kick{
margin: clamp(26px, 3vw, 40px) 0 0; padding-top: clamp(20px, 2.4vw, 30px);
border-top: 1px solid var(--line);
font-family: var(--font-display); font-weight: 600;
font-size: clamp(1.15rem, 1.8vw, 1.6rem); line-height: 1.2; letter-spacing: -.018em; color: var(--accent);
}
#ready .borb{
--ns: 58px; /* node size — nine of them, so a touch smaller than the five-point orbit */
--spin: 88s;
position: relative; width: min(100%, 580px); aspect-ratio: 1 / 1; margin-left: auto;
}
#ready .borb::before{
content: ''; position: absolute; inset: 16%; pointer-events: none;
background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 13%, transparent), color-mix(in srgb, var(--accent) 4%, transparent) 60%, transparent 100%);
}
#ready .borb__rings{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#ready .borb__ring{ fill: none; stroke: rgba(244,248,251,.16); stroke-width: .22; }
#ready .borb__dash{
fill: none; stroke: color-mix(in srgb, var(--accent) 42%, transparent); stroke-width: .28; stroke-dasharray: .6 1.8;
animation: borbDash 40s linear infinite;
}
@keyframes borbDash{ to{ stroke-dashoffset: -48; } }
@keyframes borbSpin{ to{ transform: rotate(360deg); } }
#ready .borb__spin{ position: absolute; inset: 0; animation: borbSpin var(--spin) linear infinite; }
#ready .borb__slot{ position: absolute; inset: 0; transform: rotate(var(--a)); pointer-events: none; }
/* The tile the eye sees is the INNER span, not the button: the orbit rotates the button, so a square tile
drawn on the button itself would tumble as it travels (the Knowledge Centre gets away with it because the
client asked for circles there). The chrome therefore lives on .borb__ico, which counter-rotates, so the
squares stay upright all the way round — square corners kept. */
#ready .borb__node{
position: absolute; left: calc(50% + 41.5% - var(--ns) / 2); top: calc(50% - var(--ns) / 2);
width: var(--ns); height: var(--ns); padding: 0; cursor: pointer; pointer-events: auto;
transform: rotate(calc(-1 * var(--a)));
background: none; border: 0; color: var(--accent);
}
#ready .borb__ico{
display: grid; place-items: center; width: 100%; height: 100%;
background: rgba(18,19,22,.92); border: 1px solid rgba(244,248,251,.2); color: inherit;
animation: borbSpin var(--spin) linear infinite reverse;
transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
#ready .borb__ico svg{ width: 44%; height: 44%; }
#ready .borb__node:hover .borb__ico,
#ready .borb__node:focus-visible .borb__ico,
#ready .borb__node.is-on .borb__ico{
background: var(--accent-grad); border-color: var(--accent); color: var(--accent-on);
box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent), 0 0 38px var(--accent-glow);
}
#ready .borb__node:focus-visible{ outline: 2px solid #fff; outline-offset: 4px; }
/* the site's .glow halo is drawn on the BUTTON, which tumbles with the orbit — it showed as a second,
tilted square behind the lit tile. The tile's own box-shadow is the halo here.
(display:none also tells the halo tagger in main.js this card's glow is switched off on purpose.) */
#ready .borb__node.glow::after{ display: none; }
#ready .borb.is-paused .borb__spin,
#ready .borb.is-paused .borb__ico,
#ready .borb.is-paused .borb__dash{ animation-play-state: paused; }
#ready .borb__center{
position: absolute; left: 50%; top: 50%; width: 54%; height: 58%;
transform: translate(-50%, -50%); text-align: center; pointer-events: none;
}
#ready .borb__panel{
position: absolute; left: 0; right: 0; top: 50%;
opacity: 0; transform: translateY(-50%) translateY(10px);
transition: opacity .35s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
#ready .borb__panel.is-on{ opacity: 1; transform: translateY(-50%); }
#ready .borb__mark{
display: block; width: 12px; height: 12px; margin: 0 auto 14px;
background: var(--accent); box-shadow: 0 0 22px var(--accent-glow);
}
#ready .borb__count{
font-family: var(--font-mono); font-weight: 500; font-size: .74rem; letter-spacing: .26em;
text-transform: uppercase; color: var(--txt-dim);
}
#ready .borb__pix{
display: block; margin-bottom: 12px;
font-family: var(--font-mono); font-weight: 500; font-size: .74rem; letter-spacing: .26em; color: var(--accent);
}
#ready .borb__pt{
margin: 0; font-family: var(--font-display); font-weight: 600;
font-size: clamp(.98rem, 1.45vw, 1.28rem); line-height: 1.24; letter-spacing: -.018em; color: #fff;
}
/* ───────────────────────── B6 · the drop-mic, redesigned ─────────────────────────
Was: one washed-out full-bleed photo with three stacked lines. Now: the photograph is a framed plate on
the left, the statement is set against a ghost quote mark on the right, the old question is struck out in
gold as it arrives and the new one lands. Same copy, same order. */
#ready .bmic{
position: relative; isolation: isolate; overflow: hidden;
margin-top: clamp(84px, 9vw, 150px); padding-block: clamp(76px, 9vw, 140px);
background:
radial-gradient(70% 90% at 82% 12%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
#08080A;
border-top: 1px solid var(--line);
}
#ready .bmic__in{
position: relative; z-index: 1;
display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1fr);
gap: clamp(30px, 4.6vw, 80px); align-items: center;
}
#ready .bmic__fig{
position: relative; margin: 0; overflow: hidden; isolation: isolate;
aspect-ratio: 4 / 5; border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
#ready .bmic__img{
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%;
filter: var(--gold-photo);
}
#ready .bmic__figveil{
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10,10,11,.10), rgba(10,10,11,.22) 52%, rgba(10,10,11,.74));
}
#ready .bmic__copy{ position: relative; }
#ready .bmic__glyph{
position: absolute; left: -.06em; top: -.42em; z-index: -1; pointer-events: none;
font-family: var(--font-display); font-weight: 700; font-size: clamp(11rem, 20vw, 21rem); line-height: 1;
color: color-mix(in srgb, var(--accent) 12%, transparent);
}
#ready .bmic__line{
margin: 0; max-width: 24ch; font-family: var(--font-display); font-weight: 500;
font-size: clamp(1.4rem, 2.6vw, 2.5rem); line-height: 1.16; letter-spacing: -.024em; color: var(--txt-hi);
}
#ready .bmic__rule{
display: block; width: clamp(80px, 9vw, 140px); height: 1px;
margin: clamp(26px, 3.2vw, 44px) 0 clamp(22px, 2.6vw, 34px);
background: linear-gradient(90deg, var(--accent), transparent);
}
#ready .bmic__was{ margin: 0; font-size: clamp(1rem, 1.4vw, 1.3rem); line-height: 1.4; color: var(--txt); }
#ready .bmic__wasq{ position: relative; display: inline-block; color: rgba(244,248,251,.44); }
#ready .bmic__strike{
position: absolute; left: -2px; right: -2px; top: 55%; height: 2px; background: var(--accent);
box-shadow: 0 0 14px var(--accent-glow);
transform: scaleX(var(--s, 1)); transform-origin: left;
}
#ready .bmic__now{
margin: clamp(16px, 1.8vw, 24px) 0 0; font-family: var(--font-display); font-weight: 600;
font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.2; letter-spacing: -.02em; color: var(--txt-hi);
}
#ready .bmic__nowq{
display: block; margin-top: .18em; font-size: clamp(1.7rem, 3.5vw, 3.4rem); line-height: 1.04;
letter-spacing: -.035em; color: var(--accent); -webkit-text-fill-color: currentColor;
}
.fb-js #ready .bmic__strike{ --s: 0; transition: transform .8s cubic-bezier(.77,0,.18,1) .3s; }
.fb-js #ready .bmic__now{ opacity: 0; transform: translateY(24px); transition: opacity .9s ease .85s, transform .9s cubic-bezier(.22,1,.36,1) .85s; }
.fb-js #ready .bmic.is-in .bmic__strike{ --s: 1; }
.fb-js #ready .bmic.is-in .bmic__now{ opacity: 1; transform: none; }
@media (max-width: 960px){
#ready .bout__grid{ grid-template-columns: 1fr; }
#ready .borb{ margin: 8px auto 0; width: min(100%, 470px); }
}
@media (max-width: 880px){
#ready .bmic__in{ grid-template-columns: 1fr; }
#ready .bmic__fig{ aspect-ratio: 16 / 10; }
/* stacked, the ghost quote mark lands on the photograph above it instead of behind the line — drop it */
#ready .bmic__glyph{ display: none; }
}
@media (max-width: 560px){
#ready .borb{ --ns: 46px; }
#ready .borb__center{ width: 64%; height: 64%; }
#ready .borb__pt{ font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce){
#ready .borb__spin, #ready .borb__ico, #ready .borb__dash{ animation: none; }
#ready .borb__panel{ transition: none; }
.fb-js #ready .bmic__strike{ --s: 1; transition: none; }
.fb-js #ready .bmic__now{ opacity: 1; transform: none; transition: none; }
}
/* ───────────────────────── B7 · the Close heading moves INSIDE the gold plate ─────────────────────────
Client: "if Ready to Raise Smarter is part of this closing section, we should just add it to this box
placeholder rather than having it on top — it feels weird." The plate also takes THE PATTERN.
main.js scrubs the two head lines apart by ±8vw as the section arrives; inside a plate that reads as a
broken line, so the inline transform/opacity it writes are overridden and the heading simply rises with
the rest of the plate. */
#close.fb-xk .fb-xk__head{
margin: 0 0 clamp(22px, 2.6vw, 36px); text-align: center;
font-size: clamp(2.2rem, 5.2vw, 4.6rem); line-height: .98; letter-spacing: -.045em; font-weight: 700;
color: var(--accent-on);
}
#close.fb-xk .fb-xk__head .xk-head__l{
display: block; text-align: center;
color: var(--accent-on); -webkit-text-fill-color: currentColor;
transform: none !important; opacity: 1 !important;
}
#close.fb-xk .xk-plate.fb-xk__plate{ padding-top: clamp(46px, 5vw, 76px); }
#close.fb-xk .xk-plate .goldpat{ opacity: .075; }
/* the field carried the gap that the removed headline used to sit in */
#close.fb-xk .xk-field{ margin-top: clamp(30px, 3.6vw, 56px); }
.fb-js #close.fb-xk .fb-xk__head{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease .75s, transform .7s cubic-bezier(.22,1,.36,1) .75s; }
.fb-js #close.fb-xk .xk-field.is-in .fb-xk__head{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
.fb-js #close.fb-xk .fb-xk__head{ opacity: 1; transform: none; transition: none; }
}
@media (max-width: 880px){
#close.fb-xk .fb-xk__head{ font-size: clamp(1.9rem, 9vw, 2.6rem); }
}
/* ══════════════════════════════════════════════════════════════════════════
0918b · CLIENT FEEDBACK BATCH 6 — for-businesses.html (track "business")
B1 #nothing-changes redesigned (above, it replaced the rejected .nc4 block) ·
B2 the orbit nodes become CIRCLES and the outcome headline sets in three lines ·
B3 the pre-footer statement tightens and its photograph becomes a small SQUARE.
Brief: .claude/CLIENT-FEEDBACK-0918b.md
══════════════════════════════════════════════════════════════════════════ */
/* ───────────────────────── B2a · #ready orbit nodes are CIRCLES ─────────────────────────
Client: "You see those stuff rolling by the right-hand side. I want them to be circle rather than boxes."
Same sanctioned exception as the Knowledge Centre orbit (style.css: body #knowledge .korb__node{border-radius:50%}).
The visible tile here is the INNER .borb__ico (it counter-rotates so the icon stays upright), so the radius
has to land on the button, its ::after halo AND the icon. The lit ring (box-shadow spread) follows the
radius, so it becomes a circular halo for free. */
body #ready .borb__node{ border-radius: 50% !important; }
body #ready .borb__node::after{ border-radius: 50% !important; }
body #ready .borb__ico{ border-radius: 50% !important; }
/* a circle reads lighter than a square of the same box — give it back a little presence */
#ready .borb__ico{ border-color: rgba(244,248,251,.26); }
#ready .borb__ico svg{ width: 42%; height: 42%; }
/* ───────────────────────── B2b · the outcome headline sets in THREE lines ─────────────────────────
Client: "And by the time investors, that's one line, discover you is the second line, then you're ready is
the third line." It only happened to wrap that way at 1440 — now it is set, at every width. */
#ready .bout__h .bout__hl{ display: block; }
#ready .bout__h .bout__hgold{ color: var(--accent); -webkit-text-fill-color: currentColor; }
/* ───────────────────────── B3 · the pre-footer statement ─────────────────────────
Client: "The section before the footer… I feel the spacing between, like, texts are a lot. We have to
shrink that, and we have to reduce the image itself, the size of it. It's looking like 4 by 3. Probably we
should make it like a square." The plate was a 4/5 portrait filling a .74fr column; it is now a true 1/1
square capped at 360px, and every gap between the three lines is roughly halved. */
#ready .bmic{ padding-block: clamp(58px, 6.6vw, 104px); margin-top: clamp(70px, 7.6vw, 120px); }
#ready .bmic__in{
grid-template-columns: clamp(228px, 25vw, 360px) minmax(0, 1fr);
gap: clamp(26px, 3.6vw, 62px);
}
#ready .bmic__fig{ aspect-ratio: 1 / 1; width: 100%; }
#ready .bmic__img{ object-position: 50% 34%; }
#ready .bmic__line{ font-size: clamp(1.34rem, 2.35vw, 2.25rem); line-height: 1.14; max-width: 26ch; }
#ready .bmic__rule{ margin: clamp(15px, 1.7vw, 24px) 0 clamp(13px, 1.5vw, 19px); }
#ready .bmic__was{ font-size: clamp(.98rem, 1.28vw, 1.18rem); }
#ready .bmic__now{ margin-top: clamp(8px, .9vw, 13px); font-size: clamp(1.05rem, 1.4vw, 1.28rem); }
#ready .bmic__nowq{ margin-top: .05em; font-size: clamp(1.55rem, 3.1vw, 3rem); line-height: 1.02; }
#ready .bmic__glyph{ font-size: clamp(7rem, 11vw, 11rem); top: -.2em; left: -.04em; }
@media (max-width: 880px){
#ready .bmic__in{ grid-template-columns: 1fr; }
/* square on phones too — capped so it never eats the screen */
#ready .bmic__fig{ aspect-ratio: 1 / 1; width: min(100%, 320px); }
}
/* ───────────────────────── B2b (fix-1) · the three lines are SET, not hoped for ─────────────────────────
Review: `display:block` alone only made three BLOCKS — "By the Time Investors" still wrapped inside its own
block, so the headline read as FOUR lines at 1920 / 1600 / 1200 / 1100 / 1000 and on 375 / 360 phones. The
root cause is that the type was sized from the VIEWPORT (4.6vw) while it has to fit the copy COLUMN, which
is half the container on desktop and the full one on phones — the two stop agreeing either side of ~1280.
So: the line cannot break (white-space:nowrap), and the type is sized from the column itself (cqi), with
js/fix-0917b-business.js measuring the real rendered line and shrinking further if a fallback font sets
wider. "By the Time Investors" measures 9.62em, so 10.2cqi leaves ~2% of the column as breathing room. */
#ready .bout__copy{ container-type: inline-size; }
#ready .bout__h{
/* --bout-fit is written by the fitter; the cqi value is the no-JS / pre-settle truth */
font-size: var(--bout-fit, clamp(1.5rem, 10.2cqi, 4.6rem));
}
#ready .bout__h .bout__hl{ display: block; white-space: nowrap; }
/* Stacked (one-column) the copy column IS the container, so a column-sized headline would balloon to ~70px
at 768 where it used to set at 35. A viewport ceiling keeps the tablet/phone size where the design had it;
the cqi term stays in the min() so the three lines still cannot outgrow the column on a narrow phone. */
@media (max-width: 960px){
#ready .bout__h{ font-size: var(--bout-fit, clamp(1.75rem, min(8.4vw, 10.2cqi), 2.9rem)); }
}
/* ───────────────────────── B3 (fix-1) · the struck-out question clears AA ─────────────────────────
Review: rgba(244,248,251,.44) on #08080A is 4.12:1 at 18px. It is meant to read as the OLD question, so it
stays quieter than the line above it — .53 keeps that hierarchy and passes: sampled off the capture,
the painted text peaks at rgb(142,142,137) on rgb(20,19,17) = 5.6:1. */
#ready .bmic__wasq{ color: rgba(244,248,251,.53); }
/* ───────────────────────── B1 (fix-1) · four identical loops, not a ranking ─────────────────────────
Review: at 620ms apart the four sweeps sat at four visibly different lengths at any instant, so the row read
left-to-right as descending quantities — the very funnel shape #be-honest above it was redesigned away from.
The stagger now only breaks the lock-step (the `--d` overrides live on the four .nc5__try in the page). */
/* ───────────────────────── B1 (batch 12) · active / inactive carousel 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-0917b-business.js wires the state on both carousels on this page
(#approach and #features). Two local corrections are needed here:
1. main.js also sets the `disabled` property on the same button, and `.scar__btn[disabled]{opacity:.35}`
out-specifies the shared .is-arrow-off — so the dulled arrow is re-stated at the contract's .55.
2. at ≤880 this page used to HIDE the unusable arrow outright (opacity:0). The client asked for a
DULL arrow, not a missing one — it is drawn on phones too, still unpressable. Its phone
treatment is set further down, with the rail the arrows now live in. */
#approach .fb-arrow.is-arrow-off,
#features .fb-arrow.is-arrow-off{ opacity: .55; }
#approach .fb-arrow.is-arrow-on,
#features .fb-arrow.is-arrow-on{ opacity: 1; }
/* ───────────────────────── B2 (batch 12) · the #close lede is BODY COPY ─────────────────────────
Client: "reduce the text boldness and size — that is meant to be a body copy."
It was set at the plate's display weight/size (600 / clamp(1.3rem, 2.25vw, 2.1rem) = 32.4px at 1440),
which made it compete with "Ready to Raise Smarter?" above it. It now sets at the site's body rhythm
(weight 400, ~17px at 1440, line-height 1.62, normal tracking) and runs to a reading measure, so the
headline keeps the section and this paragraph simply explains it. Ink stays ink on the gold plate. */
#close.fb-xk .fb-xk__lede{
font-family: var(--font-base);
font-size: clamp(1rem, 1.18vw, 1.08rem);
font-weight: 400;
line-height: 1.62;
letter-spacing: -.004em;
max-width: 60ch;
margin: clamp(20px, 2.2vw, 30px) auto 0;
color: rgba(10,10,11,.84);
}
@media (max-width: 880px){
#close.fb-xk .fb-xk__lede{ font-size: 1rem; line-height: 1.6; max-width: 46ch; }
}
/* 2026-09-22 · the two states differ by COLOUR AND WEIGHT, never by transparency.
The review before this one found ON and OFF made of different materials on the phone: ON was a
solid dark chip with a gold ring, OFF was a translucent wash that took its colour from whatever
card happened to be behind it (an olive smear on the gold #approach card, a grey film on the
#features photograph). Both now sit in the rail under the track on the section's own background
and take the site contract verbatim — gold ring + gold glyph vs neutral ring + grey glyph — so
they read as one object in two states. The dulled glyph is lifted from the contract's .28 to .45
here because these two are the only arrows on the page a thumb has to find. */
@media (max-width: 880px){
#approach .fb-arrow.is-arrow-off,
#features .fb-arrow.is-arrow-off{
opacity: 1; pointer-events: none;
border: 1px solid rgba(244,248,251,.18) !important;
color: rgba(244,248,251,.45) !important;
background: rgba(244,248,251,.06);
}
#approach .fb-arrow.is-arrow-off svg,
#features .fb-arrow.is-arrow-off svg{ fill: rgba(244,248,251,.45); }
}