that Figma renders as a real 24px blank line and bakes into the card height (card 4 "Brand and Owned channels" carries two; verified via get_design_context on node 1535:1853). Per the client (2026-08-30, "we want them exactly like the figma") the desktop cards now reproduce that extra bottom space — as real bottom padding (24px base + 24px standing in for the ghost line = 48px), NOT as empty
tags in the markup. With align-items: stretch every card lands at Figma's 266px. This reverses the earlier call (commit eed1ba8) to treat the 24px as a reference artifact to be ignored; the spec's assertEqual guard on this row still holds. Mobile keeps the plain 24px padding — the stacked mobile frame's phantom lines are still treated as stale reference whitespace (see the mobile intro block below and workflow doc §1). justify-content: flex-start (not Figma's `justify-center` on node 1535:1857) — in Figma every card's content fills the box because the shorter ones carry the ghost lines, so centred and top-aligned look the same there. We don't bake those lines in, so card 4's real (shorter) content, if centred, drops its icon and title below the other three. flex-start pins all four icons/titles to a common top edge and lets the slack fall to the bottom, which is what the Figma render actually shows. */ .cd-intro-cards { display: flex; gap: 16px; align-items: stretch; width: 100%; } .cd-intro-card { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; padding: 24px 24px 48px; border-radius: 16px; background: #FAFAFA; } .cd-intro-card-icon { display: flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 8px; background: #FFF; } .cd-intro-card-icon img { display: block; width: 20px; height: 20px; } .cd-intro-card-text { display: flex; flex-direction: column; gap: 16px; width: 100%; } .cd-intro-card-text h3 { margin: 0; font-family: "Geist", sans-serif; font-weight: 500; font-size: 20px; line-height: 24px; /* Node 1535:1866 sets no tracking. Without this reset the title inherits style.css's sitewide `h1,h2,h3,h4 { letter-spacing: -0.025em }` = -0.5px at 20px, which pulled a 36-character title ~18px narrower than Figma. The box is `w-full` either way, so the geometry audit cannot see this — it needs a typography check. */ letter-spacing: normal; color: var(--cd-ink); } .cd-intro-card-text p { margin: 0; font-family: "Geist", sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; color: var(--cd-muted); } /* ═════════════════════ LEVERS — node 1535:1932 ══════════════════════ */ .cd-levers { --cd-sec-y: 80px; } /* Figma pads this frame 80px, not the sitewide 60 */ .cd-levers .cd-wrap { display: flex; flex-direction: column; align-items: center; gap: 40px; } /* stretch, not flex-end. Figma's two cards are 330.2 and 326.2 tall with their tops 2px apart — an equal-height row. But card 1's Figma height includes a 24px phantom blank line (node 1535:1946 ends in a zero-width-space
, the same trick documented for the intro cards and for mobile's lever 01), so with correct markup card 1's real content is ~24px SHORTER than card 2's, not taller. flex-end then bottom-aligned it and dropped its top edge 24px below card 2's — visibly broken, and the opposite of what the flex-end was originally added to achieve (lining the two bottom edges up when only the 4px icon-box difference was in play; that part is now handled by .cd-lever-top's min-height below). */ .cd-lever-row { display: flex; gap: 32px; align-items: stretch; } .cd-lever { width: 562px; padding: 24px; /* Figma's stroke is inset (doesn't grow the frame's auto-layout hug height) — a real `border` does grow an auto-height box regardless of box-sizing, since border-box only reinterprets an EXPLICIT width/height, not auto sizing. That silently added 2px (1px top + 1px bottom) to every card, compounding into every section below in normal flow. box-shadow paints the same 1px inside edge without affecting layout. */ box-shadow: inset 0 0 0 1px #FFF; border-radius: 24px; background: #F8FAFC; display: flex; flex-direction: column; align-items: center; gap: 24px; overflow: hidden; } /* Lever 02 is NOT a twin of Lever 01 — Figma tints it green with a rotated radial at 10% opacity layered under the same 40% white wash. Exported verbatim so the tint and its angle match exactly. Figma's node also has NO separate background-color fill (unlike Card 1, which explicitly sets rgba(255,255,255,.4)) — it relies solely on the two image layers, so the page's paper colour shows straight through wherever they're transparent. Override .cd-lever's inherited background-color here, or that extra white wash stacks under the svg and makes the tint read cooler/lighter than the reference. */ .cd-lever--2 { background-color: transparent; background-image: url('../img/car-dealership/bg-lever2.svg'), linear-gradient(90deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.4) 100%); background-size: 100% 100%; background-repeat: no-repeat; } .cd-lever-title { margin: 0; font-family: "Inter Display", "Inter", "Geist", sans-serif; font-weight: 500; font-size: 24px; line-height: 1.4; /* Figma's node has no tracking, but this renders as an
this stretched to the panel's
full 476.8px, which is visually identical (the content is left-aligned
either way) but 300px wider than the box it maps to — far enough out that
figma-audit.mjs rejected it as "no counterpart" and matched the frame
against the inner instead, so the foot's real geometry was never
being checked at all. Hugging restores the 1:1 mapping. */
.cd-lever-foot {
margin: 0;
/* Pin the foot to the bottom of the panel. This is what the phantom blank
line in lever 01's body (node 1535:1946, verified via get_design_context
— it literally ends in ` in the copy. Until
2026-08-28 this was faked the other way round, by squeezing card 2's box
to 348px so its real copy wrapped to three lines — that matched the height
but not the design's line breaks, and predates the 2026-08-25 Figma
refresh that set the box to 428px. */
@media (min-width: 769px) {
.cd-channel p { min-height: 72px; }
.cd-channel-track > .cd-channel:nth-child(2) p { max-width: 428px; }
.cd-channel-track > .cd-channel:nth-child(3) p,
.cd-channel-track > .cd-channel:nth-child(4) p,
.cd-channel-track > .cd-channel:nth-child(5) p { max-width: 409px; }
}
/* ═════════════ ANSWER ARCHITECTURE — node 1288:5598 ═════════════════
Rows are right-aligned and step inward: 1280 → 1230 → 1171.
Card structure mirrors the Figma frame exactly: the outer row centers
the [kicker+body group] against the [ghost number] as a whole
(items-center), while inside that group the kicker top-aligns with the
body (items-start) — it is NOT centered against the (taller) paragraph.
See node 1288:5603/5604 metadata. */
.cd-phases { --cd-sec-y: 80px; } /* Figma pads this frame 80px, not the sitewide 60 */
.cd-phases .cd-h2 { margin-bottom: 40px; }
.cd-phase-stack {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 24px;
}
.cd-phase {
width: var(--cd-phase-w);
max-width: 100%;
padding: 16px;
border-radius: 16px;
background: var(--cd-tan);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.cd-phase-group {
display: flex;
align-items: flex-start;
gap: 16px;
/* Not flex-grown — Figma's kicker+paragraph group doesn't stretch to fill
the row; .cd-phase's justify-content:space-between pins .cd-phase-num
to the far edge instead, leaving a real gap. Shrink stays enabled
(flex-shrink:1, not "none") purely as a safety valve for the
769–1023px tablet range, which sits between the two Figma frames and
so isn't pixel-verified — without it, the fixed-width kicker+body
below would overflow a shrunk card instead of reflowing. */
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
/* Unset on cards 1–2; card 3's inner row frame (1288:5622) is 120px
tall against 92px of actual text — real extra space in the source
file, reproduced via the --cd-phase-h custom property. */
height: var(--cd-phase-h, auto);
}
.cd-phase-kicker {
flex: none;
width: 185px;
font-family: "Geist", sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 28px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--cd-gold);
}
.cd-phase-body {
/* flex-basis pinned to Figma's hard-coded box (node 1288:5607/5616/5625)
so it wins at full desktop width, but flex-shrink:1 + min-width:0 let
it compress at in-between viewport widths instead of overflowing —
see the .cd-phase-group comment above. */
flex: 0 1 var(--cd-phase-body-w);
min-width: 0;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
}
.cd-phase-body h3 {
margin: 0;
font-family: "Geist", sans-serif;
font-weight: 500;
font-size: 24px;
line-height: 32px;
/* Figma's node has no tracking — see .cd-lever-title for why this needs
an explicit override against style.css's sitewide h1-h4 reset. */
letter-spacing: normal;
color: var(--cd-ink);
}
.cd-phase-body p {
margin: 0;
font-family: "Geist", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: var(--cd-muted);
}
.cd-phase-num {
flex: none;
font-family: "Geist", sans-serif;
font-weight: 700;
font-size: 60px;
line-height: 70px;
color: var(--cd-tan-num);
}
/* ═══════════ DARK PANELS — nodes 1288:5629 / 1288:5797 ══════════════
Radial: rx 2118 / ry 428 centred at (570, 13) of a 1280×402 card. */
.cd-dark {
position: relative;
overflow: hidden;
border-radius: 16px;
border-bottom: 1px solid rgba(42,228,156,.12);
background-color: #02110C;
background-size: 100% 100%;
background-repeat: no-repeat;
color: #FFF;
}
/* Each dark panel carries its own exported gradient — the band and the two
start cards are authored at different viewBoxes in Figma. */
.cd-band { background-image: url('../img/car-dealership/bg-band.svg'); }
.cd-start-card--1 { background-image: url('../img/car-dealership/bg-start-1.svg'); }
.cd-start-card--2 { background-image: url('../img/car-dealership/bg-start-2.svg'); }
.cd-dark-orb {
position: absolute;
width: 347px;
height: 347px;
border-radius: 50%;
background: rgba(124,202,179,.30);
filter: blur(112px);
pointer-events: none;
}
.cd-dark-orb--l { left: -71px; top: -26px; }
.cd-dark-orb--r { right: -71px; top: 110px; }
/* The start-card instance of this shared "AI Search Circle" component
carries a different literal Figma position than .cd-band's copy — at
628px card width its right orb sits almost entirely past the right
edge (left:967 of 628), leaving the corner essentially the gradient's
own darkest stop with no added glow. Verified against the Figma PNG
export: bottom-right corner pixel ≈ rgb(2,17,12), i.e. no orb visible.
Scoped here rather than changed on the shared rule since .cd-band's
own (1280px-wide) panel is unaffected. */
.cd-start-card .cd-dark-orb--r { left: 967px; right: auto; top: 110px; }
.cd-band-sec { padding-block: 40px; }
.cd-band {
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
text-align: center;
}
/* 902px, not the panel's full 1200px content box: in Figma the heading and
the body copy share one hugging auto-layout column (node 1535:2234) whose
width is set by the copy's fixed 902px, and the heading is "fill
container" inside it. At 601px the heading wrapped to two lines and grew
the whole section 92px past the Figma frame. */
.cd-band .cd-h2 { width: 902px; max-width: 100%; }
/* The italic run is white here, not the accent green .cd-h2 em uses on
light sections — Figma's span (1535:2235) sets only font/style and
inherits the panel's white. */
.cd-band .cd-h2 em { color: inherit; }
/* Redundant since .cd-h2's base is now `normal` too (this heading was simply
the first place the wrong -2.38px was caught, before it was understood to
be page-wide). Kept because it also has to beat `.cd-h2--on-dark`, and as
the record of the measurement: the inherited -2.38px pulled this line 88px
in — 767px measured against the reference PNG's 848px — which is most of
why it used to need a second line. */
.cd-band .cd-h2,
.cd-band .cd-h2 em { letter-spacing: normal; }
/* 912px is a deliberate 10px over Figma's literal 902px (node 1535:2237) —
the one place on this page where copying the exact number is wrong.
Chrome sets this string ~1.5% wider in Geist than Figma's rasterizer
does: Figma's own first line measures 893px in the reference PNG, the
identical substring measures 906px here. At 902px it therefore wrapped to
three lines with an orphaned "hours.", making the panel 324px instead of
Figma's 296px. The box is centered and has no visible edge, so the extra
10px changes nothing but the wrap point, and restores Figma's own line
break ("...and your competing / dealers..."). Re-measure before trusting
this if the Geist woff2 is ever updated. */
.cd-band-copy {
position: relative;
margin: 0;
width: 912px;
max-width: 100%;
font-family: "Geist", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 28px;
color: #FFF;
}
/* This CTA is the plain hero .cd-btn--accent — same gradient / weight /
tracking / inset top-light, same 14/16/12 padding-block (the Geist
optical-centre nudge that nets 50px). The only thing this section needs
to add is `position: relative`, so the button paints above the absolutely
-positioned .cd-dark-orb glows behind it. It used to re-declare an
explicit `height: 50px` + symmetric `padding: 12px 16px` (label rode
~1.5px high) and a `border: 1px solid rgba(255,255,255,.12)` that Chrome
renders as a visible pale-green rim the Figma frame doesn't show — the
same stroke the hero's --accent rule documents dropping. Removed here so
all four arrow CTAs on the page render identically to the hero. */
.cd-band .cd-btn { position: relative; }
/* ═══════════ FOUNDING PARTNER CASE — node 1535:2242 ═════════════════ */
/* 2026-08-25 Final Design refresh collapsed this from a 2-column
copy/stats grid with a 3-paragraph narrative into a centered
heading+subhead stack over a single row of 3 stat cards — verified via
get_design_context, not a layout guess. */
.cd-case { --cd-sec-y: 80px; }
.cd-case-stack {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
.cd-case-copy {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: 851px;
max-width: 100%;
text-align: center;
text-transform: capitalize;
}
.cd-case-copy .cd-h2 { width: 735px; max-width: 100%; margin: 0; }
.cd-case-copy p {
margin: 0;
width: 100%;
font-family: "Geist", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 28px;
color: var(--cd-muted);
}
.cd-case-stats {
display: flex;
gap: 16px;
align-items: center;
justify-content: center;
width: 1085px;
max-width: 100%;
}
.cd-stat {
display: flex;
flex: 1 1 0;
min-width: 0;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 16px;
padding: 17px;
/* Inset stroke, not a layout-growing border — see .cd-lever for why. */
box-shadow: inset 0 0 0 1px #FFF;
border-radius: 16px;
background: #FAFAFA;
}
.cd-stat b {
font-family: "Geist", sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 1.3;
color: var(--cd-accent);
}
.cd-stat span {
font-family: "Geist", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: var(--cd-muted);
}
/* ════════════════════ OPERATORS — node 1535:2261 ════════════════════ */
/* 2026-08-25 Final Design refresh flattened the old 2-col+tall-card
layout into one row of 3 equal cards using the same icon-box pattern
as .cd-intro-card — verified via get_design_context, not a guess. */
/* 2026-08-28 structural-audit finding (desktop, node 1535:2265/2271/2277):
our 3 cards measure 416px (3×416 + 2×16 gap = 1280, exactly the section's
content box) vs Figma's 409.78px per card. This is Figma's OWN row
under-filling its 1279.5px container, not our width being wrong — its 3rd
card ends at x=1341.38, leaving 18.12px of unclaimed space before the
1359.5 right edge (vs .cd-intro's 4-card row, which fills its identical
1279.5px box exactly: 4×307.875 + 3×16 = 1279.5). Same class of auto-layout
looseness as the two structurally-identical .cd-qual-list rows measuring
88 vs 85.5 (see that section). Equal-fill 416px cards match the design
intent the intro row demonstrates; do not shrink these to chase 409.78. */
.cd-ops { background: #FAFAFA; --cd-sec-y: 80px; }
.cd-ops .cd-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 60px;
}
.cd-ops .cd-h2 { width: 690px; max-width: 100%; }
.cd-ops-grid { display: flex; gap: 16px; align-items: stretch; width: 100%; }
.cd-op {
display: flex;
flex: 1 1 0;
min-width: 0;
flex-direction: column;
align-items: flex-start;
/* Cards stretch to the tallest sibling (align-items:stretch on the grid);
top-align the content so the icons/headings line up across the row.
The Figma frame looks centred only because its short cards carry three
trailing zero-width-space lines (documented phantom-line defect) that
pad them to full height — our markup omits those, so centring here left
cards 1-2 visibly dropped. */
justify-content: flex-start;
gap: 16px;
padding: 24px;
border-radius: 16px;
background: #FFF;
}
.cd-op-icon {
display: flex;
flex: none;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 8px;
background: #FAFAFA;
box-shadow: inset 0 0 0 1px #FFF;
}
.cd-op-icon img { display: block; width: 20px; height: 20px; }
.cd-op h3 {
margin: 0;
font-family: "Geist", sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 24px;
/* Figma's node has no tracking — see .cd-lever-title for why this needs
an explicit override against style.css's sitewide h1-h4 reset. */
letter-spacing: normal;
color: var(--cd-ink);
}
.cd-op p {
margin: 0;
font-family: "Geist", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: var(--cd-muted);
}
/* ═══════════════════ QUALIFIER — node 1288:5699 ═════════════════════ */
.cd-qual { padding-block: 80px; }
.cd-qual .cd-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
.cd-qual .cd-h2 { width: 607px; max-width: 100%; }
/* Node 1535:2312 — the list and the CTA bar sit 24px apart, not the 32px
the section column uses between the heading and the list. */
.cd-qual-body {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
}
/* 2026-08-25 Final Design refresh replaced the 2-column hairline-divided
list with a 3x2 grid of individually-rounded cards — verified via
get_design_context, node 1535:2308. */
.cd-qual-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.cd-qual-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 20px;
border-radius: 16px;
background: #FAFAFA;
}
.cd-qual-list span:not(.cd-check) {
font-family: "Geist", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: var(--cd-muted);
}
.cd-check {
flex: none;
width: 20px;
height: 20px;
border: 1px solid var(--cd-accent);
border-radius: 4px;
background: rgba(236,248,243,.5);
color: var(--cd-accent);
display: inline-flex;
align-items: center;
justify-content: center;
}
.cd-check svg { width: 12px; height: 12px; }
.cd-qual-bar {
width: 100%;
padding: 24px;
border-radius: 12px;
background: var(--cd-forest);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.cd-qual-bar-copy { display: flex; flex-direction: column; gap: 8px; max-width: 958px; }
.cd-qual-bar-title {
margin: 0;
font-family: "Geist", sans-serif;
font-weight: 500;
font-size: 24px;
line-height: 1.3;
color: #FFF;
text-transform: capitalize;
}
.cd-qual-bar-sub {
margin: 0;
font-family: "Geist", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 28px;
color: #D9D6D6;
}
/* The plain hero .cd-btn--accent (see .cd-band .cd-btn above for the full
rationale). This section only needs `flex: none` so the button keeps its
intrinsic width in the space-between row instead of being shrunk by the
copy column. The explicit height / symmetric padding / pale-green border
this used to re-declare are gone — they were the same divergence from the
hero documented on .cd-band .cd-btn. */
.cd-qual-bar .cd-btn { flex: none; }
/* ═══════════════════════ FAQ — node 1535:2356 ═══════════════════════ */
/* #F8FAFC, sampled from the reference PNG's left margin at y=6000 — this is
the only section with this tint (channels and ops use #FAFAFA, the rest
are white). Without it .cd-faq-item's translucent white had nothing to sit
on and every row rendered invisible; over this it lands on 252,252,253
against Figma's 252,252,254. */
.cd-faq { --cd-sec-y: 80px; background: #F8FAFC; } /* Figma pads this frame 80px, not the sitewide 60 */
.cd-faq .cd-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
.cd-faq .cd-h2 em { color: var(--cd-accent-alt); }
/* The 2026-08-25 refresh dropped the outer card this used to be (old node
1288:5748): in node 1535:2359 the items are the full 970px at x=0 — no
24px inset — and the reference PNG shows page background, not a card
fill, both in the gaps between items (row y=5886 reads 248,250,252
end to end) and at the container's own left edge, where the item box
starts at exactly x=235. So no padding, fill, or stroke here anymore —
this is now purely the 16px-gap column. */
.cd-faq-card {
width: 970px;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
.cd-faq-item {
padding: 16px;
border-radius: 16px;
background: rgba(255,255,255,.6);
}
.cd-faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
list-style: none;
cursor: pointer;
font-family: "Geist", sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 28px;
color: var(--cd-ink);
}
.cd-faq-item summary::-webkit-details-marker { display: none; }
.cd-faq-item[open] summary {
font-size: 19px;
line-height: 29.45px;
letter-spacing: -0.418px;
margin-bottom: 16px;
}
/* Measured against the Figma reference PNG (node 1288:5748 export), not just
the metadata dump: closed-item icon boxes sample at exactly 32×32px with an
80px top-to-top pitch between consecutive items (64px item + 16px gap) —
confirms the visible box is 32×32, not the 45.264 rotated bounding box.
Figma's own auto-layout DOES size the *open* item's icon slot to that
45.264 bounding box (a rotation side-effect), which is why the open row
measures visibly taller than closed rows — reproduced below by animating
.cd-faq-mark's own box only on [open], while the always-32×32
.cd-faq-toggle-box carries the visible background/radius/rotation. */
.cd-faq-mark {
flex: none;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: width .18s ease, height .18s ease;
}
.cd-faq-item[open] .cd-faq-mark {
width: 45.264px;
height: 45.264px;
}
/* 2026-08-28 structural-audit findings (both frames, open item only):
Background+Border flags x-22.6, its child SVG flags x-15 y+7.3 w-7.1
h-7.1. Both are the same rotation-bbox artifact the comment above
already accounts for, one level further. Figma's own open-toggle node
(1535:2364) sits at local x=915.37 inside its 938px-wide row (node
1535:2361) — right edge 960.63, i.e. Figma's OWN rotated bbox overflows
its row by 22.6px, because the auto-layout row was sized for the
original unrotated 32×32 icon (right-flush at x=906..938, same as
every closed item's "Border" node) and didn't reflow when rotation grew
the box. Our flex row is right-anchored the opposite way — .cd-faq-mark
growing to 45.264 pushes its left edge further INTO the row (toward the
question text) rather than bleeding past the card's own padding — which
is why our x sits 22.6px left of Figma's. Matching Figma's number
exactly would mean the icon visually exits the rounded card on open;
kept the current (contained) direction instead. The SVG glyph finding
is the same effect one level deeper (its own 12×12 box, rotated with
its parent, reports a rotated getBoundingClientRect — Figma's matching
12×√2≈16.97 vs our glyph's real ink extents once the outer transform is
applied), not an independent defect. */
.cd-faq-toggle-box {
flex: none;
width: 32px;
height: 32px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 8px;
background: var(--cd-faq-mark);
transition: background .18s ease, transform .18s ease;
}
.cd-faq-item[open] .cd-faq-toggle-box {
background: var(--cd-faq-open);
transform: rotate(45deg);
}
.cd-faq-toggle {
width: 12px;
height: 12px;
color: #2B3A45; /* sampled from Figma's exported closed-state glyph */
transition: color .18s ease;
}
.cd-faq-item[open] .cd-faq-toggle {
color: #FFF;
}
.cd-faq-answer {
max-width: 845px;
font-family: "Geist", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: var(--cd-muted);
}
/* ═══════════════ TWO WAYS TO START — node 1288:5797 ═════════════════ */
/* 80px top, not the 40px carried over from the pre-2026-08-25 design: node
1535:2404 puts its content frame at y=80, and the reference PNG's heading
ink starts at row 6530 (box top 6518 = section 6438 + 80).
Bottom is 120, not the 80 that node 1535:2404's own box implies (it is an
80px-padded frame, height 580). The extra 40 stands in for the desktop
footer frame's lead-in: Figma's footer (node 1535:2434) is a 40px
transparent band on top of the dark block (`padding-top: 40px`), so the
dark rectangle starts 40px below the start section. Our global
`.site-footer` has no such lead-in and can't grow one without shifting
every other page, so this section absorbs the 40 instead. Net
section height 620; the desktop.json `.cd-start` h entry is bumped to
match and explains the same thing. Mobile keeps 40/40 (its own frame,
node 1541:6825, really is flat 40 — set in the @media block below). */
.cd-start { padding-top: 80px; padding-bottom: 120px; }
.cd-start .cd-h2 { margin-bottom: 40px; }
.cd-start-grid { display: flex; gap: 24px; align-items: stretch; }
.cd-start-card {
flex: 1 1 0;
min-width: 0;
padding: 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
text-align: center;
}
.cd-start-card h3 {
position: relative;
margin: 0;
font-family: "Geist", sans-serif;
font-weight: 500;
font-size: 36px;
line-height: 1.3;
/* Node 1535:2413 sets no tracking (mobile 1541:6832 does — see the mobile
block, which keeps -2.38px there). */
letter-spacing: normal;
color: #FFF;
text-transform: capitalize;
}
.cd-start-card p {
position: relative;
margin: 0;
font-family: "Geist", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 28px;
color: #FFF;
}
/* Both start-card CTAs only need `position: relative` (paint above the
.cd-dark-orb glows) + the 8px top margin. Card 1's button is the plain
hero .cd-btn--accent; card 2's is the plain hero .cd-btn--dark (solid
white / dark text — set via the class in the template). The per-card
overrides that used to live here re-declared the whole variant plus an
explicit height, symmetric padding and a pale 1px rim — the same drift
from the hero documented on .cd-band .cd-btn. Dropped so every CTA on
the page renders identically to the hero pair. */
.cd-start-card .cd-btn { position: relative; margin-top: 8px; }
.cd-start-note {
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
margin: 24px 0 0;
text-align: center;
font-family: "Geist", sans-serif;
/* Node 1535:2432 is Geist Medium (500), not the 400 the rest of the page's
muted copy uses. */
font-weight: 500;
font-size: 18px;
line-height: 28px;
color: var(--cd-muted);
}
/* Flanking rules — Figma nodes 1535:2431 / 1535:2433: a 0-height line each
side of the note, laid out flex-[1_0_0] with a 32px gap to the text
(407 + 32 + 402 + 32 + 407 = 1280). Sampled straight off figma-desktop.png:
a crisp 2px band of #D5D5D5, no feather. Desktop only — the mobile frame
(node 1541:6851) is a bare centred text node with no rules. */
.cd-start-note::before,
.cd-start-note::after {
content: "";
flex: 1 1 0;
min-width: 0;
height: 2px;
background: #D5D5D5;
}
/* ══════════════════════════════════════════════════════════════════════
MOBILE — mirrors the 375px Figma frame (node 1288:6044).
Gutter 20 · section padding 40 · h1/h2 32 · single column throughout.
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
.cd-page { --cd-gutter: 40px; --cd-sec-y: 48px; }
.cd-h2 { font-size: 38px; letter-spacing: -1.6px; }
.cd-h2--42 { font-size: 36px; }
.cd-hero-title { font-size: 48px; letter-spacing: -1.6px; }
.cd-case-stats { flex-direction: column; align-items: stretch; }
.cd-intro-cards { flex-direction: column; align-items: stretch; }
/* Mobile keeps the base 24/24/48 padding — same as desktop. The mobile
frame's cards (nodes 1546:2624/2635/2647/2679 = 266/242/266/266) are each
24px taller than their real copy because every body node carries a
trailing zero-width-space that Figma counts as an extra 24px line
(card 4 carries two). Per the client (2026-08-30, "we want them exactly
like the figma") that ghost line is reproduced as 24px of real bottom
padding, not as empty tags — see the base rule. This reverses the
earlier "stale whitespace, keep 24px" call for mobile. Card 4 still lands
~24px under Figma's 266 (its second ghost line isn't padded for); chasing
that one is the phantom-line rabbit hole the workflow doc warns off. */
.cd-lever-row { flex-direction: column; align-items: stretch; }
.cd-lever { width: 100%; }
/* Drop .cd-lever-top's 32px min-height once the row stacks. That min-height
exists ONLY to line the two cards' pills up while they sit side by side
(see the base rule) — with the cards stacked there is no row to align
across, and Figma's stacked frame hugs each card's own top row instead:
node 1546:2742 (lever 01, 32px icon box) is 32 tall, node 1546:2758
(lever 02, 24px icon box) is 28 — the pill's own height, confirmed via
get_design_context as `flex items-center justify-between` with no height.
Holding 32 on lever 02 pushed its body and foot 4px down and made the
card 4px too tall: measured 401.8 against the frame's 398.2 (1546:2754),
which is what put every one of its children ~20.6px out in the audit
instead of the documented 24px phantom-line offset. */
.cd-lever-top { min-height: 0; }
.cd-ops-grid { flex-direction: column; }
.cd-phase { width: 100% !important; }
.cd-start-grid { flex-direction: column; }
/* Mobile frame 1541:6851 has no flanking rules — drop the desktop treatment
back to plain centred text once the cards stack. */
.cd-start-note { display: block; }
.cd-start-note::before,
.cd-start-note::after { display: none; }
}
/* ═══════════════════ FOOTER — node 1288:5825 ════════════════════════
Removed 2026-08-14: this page now uses the shared site-wide footer
unmodified, to match /customers/med-spa/ exactly. Nothing below this
comment restyles .site-footer for .cd-page anymore. */
/* ══════════════════════════════════════════════════════════════════════
MOBILE — authored against the 375px Figma frame (node 1288:6044).
Values below are that frame's values, section by section, not a
proportional shrink of the desktop layer.
Frame constants: 375 wide · gutter 20 · section padding 40
· all section headings 32/1.3/-2.38 (the intro is the one exception at 26)
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.cd-page { --cd-gutter: 20px; --cd-sec-y: 40px; }
/* Every mobile section frame in node 1541:5945 pads 40px top/bottom — the
desktop frames use 80, and those 80s are declared on the section elements
themselves (`.cd-intro { --cd-sec-y: 80px }` etc.), which outrank the
`.cd-page` value above no matter how far down the file it sits. Reset
them here or the whole page carries +80px of dead space per section. */
.cd-intro,
.cd-levers,
.cd-channels,
.cd-phases,
.cd-case,
.cd-faq,
.cd-ops { --cd-sec-y: 40px; }
/* Mobile headings carry NO tracking at all — every h1/h2 text node in node
1541:5945 comes back from get_design_context with a bare `text-[32px]` /
`leading-[1.3]` and no `tracking-*` class (spot-checked on the hero
1541:6290, intro 1546:2622 and levers 1546:2736; the desktop -2.38px is a
48px-only value). The old per-section italic tracking below was tuned
against the superseded 1288:6044 frame; at 32px those negative values
pull each line ~4-6% narrower than Figma's, which silently moves every
heading's wrap point (e.g. the hero fitting "Stop" onto line 1). The
`normal` keyword — not 0 — is required to beat style.css's sitewide
`h1,h2,h3,h4 { letter-spacing: -0.025em }`. */
.cd-page .cd-h2,
.cd-page .cd-h2--42,
.cd-page .cd-h2 em,
.cd-page .cd-hero-title,
.cd-page .cd-hero-title em { letter-spacing: normal; }
/* …with a growing list of exceptions, all of which DO carry
`tracking-[-2.38px]` in the frame: the mid-page CTA band's heading (node
1541:6656), the "two ways to start" heading (node 1541:6827, which is
additionally `whitespace-nowrap` — it must stay on one line), the
channels heading ("Every channel that brings shoppers to your lot."),
the Answer Architecture heading, and the founding-partner case-study
heading. The blanket `normal` above was set from get_design_context
spot-checks that only covered the hero, intro and levers headings — the
other section headings were never checked, and the exported mobile
reference shows them tracked the same -2.38px as desktop (e.g. channels
"Every Channel That" measures ~244px against the frame vs ~284px
untracked). The `.cd-phases` / `.cd-case` reference copy is stale
(med-spa "For Medical Aesthetics"; the unresolved "~20% of/out of" edit
— see the template header notes), but the tracking is unambiguous in the
render. Without the band/start pair the headings pick up an extra line
each and push the page 88px taller. */
.cd-page .cd-h2--on-dark,
.cd-page .cd-band .cd-h2 em,
.cd-page .cd-start .cd-h2,
.cd-page .cd-start .cd-h2 em,
.cd-page .cd-channels .cd-h2,
.cd-page .cd-channels .cd-h2 em,
.cd-page .cd-phases .cd-h2,
.cd-page .cd-phases .cd-h2 em { letter-spacing: -2.38px; }
/* The founding-partner case heading is the one section confirmed against a
non-stale node: get_design_context on 1541:6665 returns
`tracking-[-1.38px]` (not -2.38px). At 32px the -2.38px value rendered
~1 word too tight per line — "the" pulled onto line 2, "one" onto line 3
— vs the frame's "…partner cut ~20% of / the aggregator spend in / one
year." Verified: -1.38px reproduces that wrap exactly. */
.cd-page .cd-case .cd-h2,
.cd-page .cd-case .cd-h2 em { letter-spacing: -1.38px; }
/* `.cd-band .cd-h2 em` is listed because node 1541:6656 is a SINGLE
unstyled run on mobile — "Ready to stop renting your customers?" with no
italic span and -2.38px across the whole string — whereas desktop
(1535:2235) splits it and italicises "your customers?". The shared markup
carries the for desktop's sake, so without this line the em would
pick up the `normal` above and the mobile heading would render two
different trackings inside one line. */
/* …and, for the same reason, the em must drop the base `.cd-h2 em`
Lato-italic-serif face on mobile: frame 1541:6656 is one uniform upright
Geist run, so "Your Customers?" renders in the SAME font/style as the
rest of the line here, not the condensed white italic it was inheriting
(the "more letter-spacing in Figma" report — it's the Geist run that
looks looser next to Lato Italic, not a tracking bug). Tracking already
matched to the Geist run above. */
.cd-page .cd-band .cd-h2 em {
font-family: "Geist", sans-serif;
font-style: normal;
line-height: inherit;
}
.cd-h2,
.cd-h2--42 { font-size: 32px; line-height: 1.3; }
/* Header: see the note at the top of this file — the global .site-header
is used as-is on mobile too, so node 1288:6045's nav row is not ported. */
/* ── Hero — 375×664 ─────────────────────────────────────────────── */
.cd-hero {
/* Spec frame is 664, but our stack is ~55px shorter than Figma's stale
7-line copy, and with the stack bottom-anchored (below) that entire
surplus collected as dead space between the .site-header and the H1.
Per the client (2026-08-31) that gap reads too large on mobile, so the
section is pulled up ~36px here — the bottom gap stays pinned at
Figma's 31px, the CTA/rule/stat y-positions still land where the
structural audit wants them, only the header→title clearance tightens. */
min-height: 628px;
/* Figma frame 1541:5946 is a fixed 664px. Its content frame (1541:6286,
y:57→664 below the 57px mocked nav) VERTICALLY CENTERS the content
stack (1541:6287, h 544.168) inside itself — (607−544.168)/2 = 31.416px
of clearance above and below the stack. So Figma's real gap under the
stat row is 31.4px, not the 24px an older frame (1301:103) had.
We can't just `align-items: center` the same way: our stack is ~45px
shorter than Figma's (the frame's stale 7-line sub-headline vs the
page's correct 4-line one — workflow doc §1), and it centres below the
real 81px .site-header, not Figma's 57px mock. Centring that shorter
stack in the taller gap splits the surplus onto BOTH ends and the
bottom gap balloons to ~42px (Saad flagged it against the frame).
Instead: bottom-anchor the stack and pin the bottom gap to Figma's
31px with padding-bottom. min-height (now 628 — see the note above)
keeps the section close to the spec 664 while trimming the top
surplus; what remains of it collects silently at the top (~17px on
top of the padding's 24px floor gap) where it reads fine.
padding-top stays real-header (81) + a floor gap. This also pulls the
CTA row, rule and stat row down onto Figma's own y positions — the
structural audit for .cd-hero drops from 11 boxes off to 1 (the
title/lede block, which legitimately can't match the stale copy). */
padding: 105px var(--cd-gutter) 31px;
display: flex;
align-items: flex-end;
}
/* 96px blocks — same as desktop (nodes 1288:6056 etc. are all size-[96px],
not rescaled for mobile). A prior 64px override made the grid visibly
denser than the Figma frame. Line-layer phase measured directly off the
exported reference PNG: vertical lines land at x 91.5/187.5/283.5 (96px
apart, one centered on the 375px frame) and the first horizontal line
sits flush with the box's own top edge (y offset 0). The 4 extra
"lit cell" layers inherited from the desktop rule (node coords for a
1181px-wide grid) don't correspond to any mobile block position, so
they're pushed off-canvas here rather than guessed.
top: this box's y-position was originally 65px, copied straight from
Figma's "BG" node y-offset inside the mobile Hero Section — but that
Figma frame has no nav mock built into it there, so 65 wasn't actually
measured against any header. The real global .site-header's CTA button
bottom is 62px; matching the desktop fix's approach (grid top =
real-button-bottom + breathing room, so the gap under the nav mirrors
the gap above it) gives 62 + 18 = 80px — coincidentally the same value
desktop already uses. */
.cd-hero-grid {
top: 80px;
width: 375px;
height: 266px;
background-size: 96px 96px;
background-position: 91.5px 0, 91.5px 0, 9999px 9999px, 9999px 9999px, 9999px 9999px, 9999px 9999px;
}
.cd-hero-glow--l { left: 0; top: 337px; width: 122px; height: 407px; }
.cd-hero-glow--r { right: 0; top: 322px; width: 122px; height: 407px; }
/* Node 1288:6049 (Ellipse 8): x:31 w:221.2 in the 375px frame — center is
141.6px, not 187.5 (frame center). Not centered, ~46px left of center;
a prior comment assumed "no equivalent offset" but the node data has
one. */
.cd-hero-glow--c { left: 31px; top: 145px; width: 221px; height: 183px; }
/* gap 24 + the lede's -4px top margin reproduces node 1541:6289's 20px
title→lede gap while leaving 24px everywhere else in the stack.
Do NOT chase the frame's vertical positions inside this hero: the mobile
frame's sub-headline (node 1541:6291) is a DIFFERENT, longer paragraph
than the page's — "Dealers moving 200+ cars a month are paying $30K to
$60K every month to CarGurus, Cars.com, and Autotrader…" vs the desktop
frame's and the page's "We help Dealers that sell 50+ cars a month…"
(pulled via get_design_context 2026-08-28; the copy divergence is the one
the workflow doc §1 flags). That is 7 lines against our 4, i.e. 72px of
content the page correctly does not have, so the CTA row lands 24px above
the frame and the stat row 21px above it once the taller real header
(see padding-top above) and the 1px Figma counts as an extra 24px line (2695 carries two). Per the
client (2026-08-30) that line is reproduced as 24px of bottom padding
— the same call as desktop — so cards 1-3 hit the frame heights. Card 4
(2695) carries a second ghost line; per the client (2026-08-31) that
extra padding was pulled back so the last card's bottom padding matches
the others (48px base) rather than the 266px frame height. */
.cd-intro .cd-wrap { gap: 24px; align-items: stretch; }
.cd-intro .cd-h2--42 { font-size: 32px; text-align: left; }
.cd-intro-cards { flex-direction: column; align-items: stretch; gap: 16px; }
/* ── Levers — node 1546:2735 (375×979.4) ────────────────────────── */
.cd-levers .cd-wrap { gap: 24px; }
/* The refreshed mobile frame lets the heading run the full 335px content
width and wraps naturally at "We Deliver Both Levers / Together." (node
1546:2736 is w-335, h-83 = 2 lines). The old 234px box came from the
superseded 1288:6044 frame and forced a different, narrower break. */
.cd-levers .cd-h2 { width: 100%; max-width: 100%; margin-inline: auto; }
/* Desktop lays the two cards side by side at a fixed 562px each — on a
375px viewport that overflowed the frame, clipping card corners/text
against the section edge instead of stacking. Figma's mobile frame
stacks them full-width instead. Everything *inside* the card keeps its
desktop values (24px card padding, 24px title→panel gap, 24/1.4 title,
18.609px panel padding, 16/24 body) — node 1546:2739 confirms the
mobile card is not a scaled-down variant. */
.cd-lever-row { flex-direction: column; gap: 16px; }
.cd-lever { width: 100%; }
/* Desktop pins lever 2's body to a fixed 453px so its wrap point matches
the Figma desktop frame exactly (see the comment on the base rule) —
but the mobile frame has no such constraint, so the fixed width was
forcing lever 2's paragraph to overflow the 335px-wide mobile card. */
.cd-lever--2 .cd-lever-body { width: auto; }
/* Mobile frame 1546:2742 / 1546:2758 drop the top-right trend arrow from the
pill row entirely — the pill sits alone. (The desktop frame keeps it; the
foot's "~20% Reduction" / "Compounding ROI" spark arrow stays on both.) */
.cd-lever-top .cd-lever-icon-box { display: none; }
/* ── Channels — node 1301:146. Cards shrink to a 260×180 panel. ─── */
.cd-channels .cd-h2 { margin-bottom: 24px; } /* stays centred on mobile */
/* Node 1546:2817 sits 24px under the track, not desktop's 32. */
.cd-channel-dots { margin-top: 24px; }
.cd-channel-break { display: block; }
.cd-channel-track { gap: 8px; padding-inline: 20px; }
.cd-channel-scroller { scroll-padding-inline-start: 20px; }
/* --cd-channel-gap (not a plain `gap`) because .cd-channel p derives its
negative margin from it — Figma's mobile card gap is 9.2625px and its
h3→p gap is exactly half that, 4.63125px (nodes 1541:6402/6497/6498). */
.cd-channel { padding: 9.263px; border-radius: 9.263px; --cd-channel-gap: 9.263px; }
.cd-channel-shot {
width: 260px;
height: 180px;
padding: 16px;
box-sizing: border-box;
border-radius: 4.631px;
}
/* The desktop PNGs bake in their own #FAFAFA cushion sized for the desktop
box; object-fit:cover can only crop the axis where the window is
narrower than the (rescaled) image, so it never removes cushion on the
other axis — a plain cover fill left the mobile mockup visibly smaller
than Figma's (which fills this 228×148 window edge-to-edge). Fixed by
swapping to a separately-cropped `*-mobile.webp` per card via
are netted in. Both are correct;
padding the lede out to match would mean shipping the frame's stale copy. */
.cd-hero-inner { width: 335px; gap: 24px; }
.cd-hero-title { width: 100%; font-size: 32px; line-height: 1.23; }
.cd-hero-lede { margin-top: -4px; font-size: 16px; line-height: 24px; }
/* Stacked and FULL-WIDTH. Figma's layout data reads `items-start`, but the
rendered frame measures both buttons at x 20–354 — the full 335px content
width — so they stretch. Verified against the exported mobile frame. */
.cd-hero-ctas {
flex-direction: column;
align-items: stretch;
gap: 16px;
align-self: stretch;
}
.cd-hero-ctas .cd-btn { width: 100%; }
/* Stats stay a ROW on mobile, at their own smaller type scale. */
.cd-hero-stats {
align-self: stretch;
gap: 20.84px;
margin-top: 0;
}
.cd-hero-stats li { gap: 4.168px; flex-shrink: 0; }
.cd-hero-stats b { font-size: 14px; }
.cd-hero-stats span { font-size: 10px; line-height: 16px; }
/* All three labels carry an explicit width in the frame (nodes 1342:641,
1342:644, 1342:647 — 93/118/83px), and the 3rd column's own li (node
1342:645) is 95.342px wide. Summed with the 20.84px gaps that's
~348px — wider than the 335px hero column above it — confirmed
against the exported reference PNG: column left edges land at x
21/135/273, i.e. the row deliberately bleeds a few px into the right
gutter rather than compressing. `flex-shrink: 0` stops the browser
from squeezing the columns back down to fit. */
.cd-hero-stats li:first-child span { width: 93px; }
.cd-hero-stats li:nth-child(2) span { width: 118px; }
.cd-hero-stats li:nth-child(3) { width: 95px; }
.cd-hero-stats li:nth-child(3) span { width: 83px; }
/* ── Intro — node 1546:2620 (375×1444) ─────────────────────────────
Heading is LEFT-aligned here, not centred like desktop's, at the same
32px/1.3 as every other mobile h2 and with no tracking (the desktop
`.cd-intro .cd-h2 { letter-spacing: normal }` already covers that).
Cards stack full-width and otherwise keep every desktop value —
24/24/48 padding, 42px icon box, 16px gaps, 20/24 title, 16/24 body —
the mobile frame does NOT step the type down a size.
The frame's cards are 266/242/266/266 (nodes 1546:2624/2635/2647/2679);
each body node (1546:2634, 2646, 2678, 2695) ends in a zero-width-space
(desktop-authored) instead orphans
"With A" onto its own line here — drop it on mobile only. */
.cd-qual-break { display: none; }
.cd-qual-list { grid-template-columns: 1fr; gap: 16px; }
/* Node 1547:3193's six items measure 88 / 88 / 112 / 85.5 / 85.5 / 85.5 —
i.e. a uniform floor of ~85.5px regardless of whether the label runs to
one line or two, with only the three-line item (1546:3060, 112 = 72 + 20
top + 20 bottom) growing past it. Reproduced as desktop's 20px padding
plus that floor as a min-height, rather than transcribing Figma's six
different vertical paddings, which are an artifact of the desktop 3×2
grid's row heights being carried into the mobile column. */
.cd-qual-list li { padding: 20px; gap: 12px; min-height: 85.5px; }
.cd-qual-list li span:not(.cd-check) { flex: 1 1 0; min-width: 0; }
/* Figma node 1546:3070 keeps this one label on a single line where a 16px
Geist string of ~283px (Chrome's metric) would otherwise wrap in the
263px column the other items use — Figma fits it by cutting this item's
right inset to 2px, left inset untouched so the checkbox stays aligned
with its siblings. We match it by dropping this card's right padding to
0 and tightening its checkbox gap to 8px (≈4px of slack at the 375px
design width), and pin the label to nowrap so wider phones can't reflow
it either. */
.cd-qual-list li:nth-child(4) { padding-right: 0; gap: 8px; }
.cd-qual-list li:nth-child(4) span:not(.cd-check) { white-space: nowrap; }
/* 2026-08-28 structural-audit findings, all six mobile items:
- Items 1/2/6 ("You carry…", "You sell…", "…outdated") flag w+14..29:
our flex:1 1 0 span fills the row (263px) while Figma's short single-
line labels hug their own text (146-249px). Text stays left-aligned
either way — an invisible box-width difference, no visual effect.
- Items 3/4 ("…$20K+/month", "…SEO and AI search…") flag y-5.2: pure
cascade from the 85.5px floor above (items 1/2 render 2.5px shorter
than Figma's 88px each, ×2 ≈ 5.2px by item 3) — already a deliberate
choice, see that comment. Item 3's own checkbox/icon/text carry the
same -5.2 for the same reason.
- Item 4 flags w-18 h+24: in the 263px column this string wraps to 2
lines, Figma (node 1546:3070) keeps it on 1. Figma fits it by cutting
this item's right inset to 2px; we get the same single line with the
nth-child(4) padding-inline:8px + white-space:nowrap override above.
Applied only to this card, so the other five keep the normal 20px
inset. */
/* Node 1546:3081: 24px padding, copy and button both full-width and
centre-aligned, 20px between them, and the title drops to 20/1.3 (the
sub keeps desktop's 18/28). */
.cd-qual-bar { flex-direction: column; align-items: stretch; gap: 20px; padding: 24px; }
.cd-qual-bar-copy { text-align: center; }
.cd-qual-bar-title { font-size: 20px; }
.cd-qual-bar .cd-btn { width: 100%; }
/* ── FAQ — node 1546:3144 (375×1212) ────────────────────────────────
The refreshed mobile frame drops the outer card entirely: node
1546:3147's items are direct 335px-wide children with a 16px gap and no
padding of their own, so only the items keep a box. Type is NOT stepped
down here either — closed summaries stay 18/28 (h-56 = 2 lines), the
open one stays 19/29.45 (h-89 = 3 lines) and its answer stays 16/24
(h-216 = 9 lines), all identical to desktop. */
.cd-faq-card { padding: 0; gap: 16px; background: none; box-shadow: none; }
.cd-faq-item { padding: 16px; }
/* Closed rows put the 32px toggle flush against the question column —
node 1546:3159's Border frame starts at x-271 inside a 303px row, i.e.
no gap at all, so the question gets the full 271px to wrap in. Desktop's
24px gap leaves only 247px here, which pushes two of the seven
questions onto a third line and adds 28px each. */
.cd-faq-item summary { gap: 0; }
.cd-faq-item summary > span:first-child { flex: 1 1 0; min-width: 0; }
.cd-faq-answer { max-width: none; }
/* ── Two ways to start — node 1541:6825 (375×816) ───────────────────
Unlike desktop, the mobile frame really is a flat 40/40: the note text
(1541:6851) ends at y-776 inside an 816-tall section. The heading is
left-aligned and single-line here, not centred. Bottom padding increased
to 80px to match Figma's extra spacing before the footer. */
.cd-start { padding-top: 40px; padding-bottom: 80px; }
.cd-start .cd-h2 { margin-bottom: 24px; text-align: left; }
/* 2026-08-28 structural-audit finding: h2 flags w+29 (node 1541:6827,
Figma 306px vs our rendered 335px). Our block h2 fills its 335px
column; Figma's box hugs the shorter text ("What We Do" reused as
this frame's generic component label) at 306px, 29px short of the
column. Both render the same left-aligned glyphs at the same x — an
invisible box-width difference, no visual effect. Not touching
.cd-h2's width here since it's a shared rule (see COMMON brief §5). */
.cd-start-grid { flex-direction: column; gap: 16px; }
/* Reset the desktop `flex: 1 1 0` (line 1258): in a column-direction flex
container that basis of 0 collapses the card toward its flex-basis,
and .cd-dark's `overflow: hidden` zeroes the automatic min-height that
would normally keep it content-sized — the card shrank to ~49px,
clipping the paragraph and button entirely. */
/* Card 1 is 16/24 padding, gap 16 between title/paragraph (node
1303:231/235); card 2 is uniform 32 padding, gap 24 (node
1303:242/246) — not shared values, unlike the desktop cards. The DOM
here is flat (h3/p/a as siblings, no Figma's title+paragraph subgroup),
so the container `gap` is doing double duty as the title→paragraph
distance; the button's margin-top makes up the rest to reach Figma's
32px paragraph→button gap on both cards. */
.cd-start-card { flex: none; padding: 24px 16px; gap: 16px; }
.cd-start-card--2 { padding: 32px; gap: 24px; }
.cd-start-card h3 { font-size: 32px; line-height: 1.3; letter-spacing: -2.38px; }
.cd-start-card p { font-size: 16px; line-height: 24px; }
.cd-start-card .cd-btn { margin-top: 16px; width: 100%; }
.cd-start-card--2 .cd-btn { margin-top: 8px; }
.cd-start-card .cd-btn--wide { padding: 12px 20px; }
.cd-start-card .cd-btn--ghost.cd-btn--wide { padding-block: 12px; }
/* No font-size/line-height override here — node 1303:253 keeps the
same 18px/28px as desktop, unlike most other mobile copy on this page. */
.cd-start-note { margin-top: 16px; }
/* 2026-08-28 structural-audit findings: .cd-start-grid flags h+4.8
(node 1541:6828); .cd-start-note flags y+4.4 (node 1541:6851), a
direct cascade of the grid finding since the note sits right below
it. Traced to the actual cards: card 1 measures 260.59px vs Figma's
258 (+2.59), card 2 measures 326.19px vs 324 (+2.19) — both already
inside the ±3px tolerance the spec below pins for these exact cards,
with padding confirmed byte-identical ("24px 16px" / "32px"). This is
ordinary Geist line-height rounding, not a padding error — the two
independently-tolerated ~2.5px drifts just sum past the structural
audit's blanket 4px section-level tolerance. */
}
@media (prefers-reduced-motion: reduce) {
.cd-page .cd-btn,
.cd-channel-dot,
.cd-faq-mark,
.cd-faq-toggle-box,
.cd-faq-toggle { transition: none; }
}