amounts take the ink override again: with the
element no longer being one anchor, two-tone is not ambiguous, it is
ordinary emphasis, and ink-on-grey puts the amounts where the eye lands.
The "→" is GONE for the same reason — an arrow promises a navigation this
element no longer performs. There is no :hover / :focus-visible styling
either; a must not react to the pointer like a control.
LAYOUT: ordinary inline text, never flex — keep it that way. The original
reason was that a flex row painted the hover underline as three stubs, and
that reason retired with the link; the SECOND reason is why the rule
stands: flex gaps plus flex item rounding inflated the same string from
267px to 311px, which is what forced the card wider.
ONE PLAN PER ROW, split by a bare
. The two plans used to share a row
with a dimmed "·" between them (.icp-sep, plus a @media 349px rule that
hid the dot at the exact width where it stopped fitting); BOTH are GONE.
They went when the Personal row picked up its monthly equivalent: a
restatement of a price belongs beside the price it restates, and a shared
row had nowhere to put it that did not read as a caption for both plans.
Giving each plan its own row also makes the "PLANS" eyebrow name an actual
list. It costs one line of card height (191.7px → 210.6px) and it BUYS
width: the widest row is now "Personal $99/yr · $8.25 a month" at 196.8px,
against 274px of content box at 1440px and 222px at a 320px viewport, where
the old shared row needed 251.8px and was the only reason the card had to
be 324px wide. .icp-plan keeps white-space: nowrap, which is what
guarantees a row never splits its own price off. */
.intro-card .intro-card-plans {
/* ORDINARY INLINE TEXT, not flex (2026-08-06 owner fix). A flex row put
5.6px gaps between the runs, and a flex gap is not text — so the hover
underline painted as THREE separate segments (one of them a stub under
the lone "·"), and the gaps + flex item rounding inflated the line to
311px when the same string laid out inline is 267px. Back to a plain
block of inline text with real spaces: one continuous underline across
the whole string, dot included, and the card can be narrow again. */
display: block;
text-align: left;
/* Sits between the eyebrow that names it and the button that acts on it, so
the eye reads "plans → these two → buy", then separately "or try it
free". Margins are EXPLICIT on all sides: this is a
, and the
page-level `p { margin: 0 0 1rem }` would otherwise stack a fresh 1rem
under it and push the button down. 1rem (16px, spacing.4) — owner call,
reduced from the 1.5rem .card-pricing uses before its Buy button. That
gap is sized for a long feature list ending well above the CTA; here the
price line is one row and belongs closer to the button that acts on it.
0.5rem (8px, spacing.2) — owner call 2026-08-09, halved again from 1rem:
the line and the button it explains should read as ONE unit, tighter than
the eyebrow→price gap would suggest. (Margins between the eyebrow and this
collapse, so the gap ABOVE stays 0.5rem no matter what is set here —
tightening below is what closes the distance to the button.) */
margin: 0 0 0.5rem;
color: var(--text-secondary, #55595F);
font-size: 0.8125rem;
line-height: 1.45;
}
.intro-card .intro-card-plans .icp-plan { white-space: nowrap; }
.intro-card .intro-card-plans strong { font-weight: 700; color: var(--text-primary, #1A1C1E); }
/* The monthly equivalent that trails the Personal row ("· $8.25 a month"). Dimmed
to half a step below the rest of the line: it is a way of READING the $99,
not a second price, and it must never compete with the annual figure the
checkout actually charges. The amount itself is NOT in the source — the
`.icp-mo` script near the bottom of this page derives it from the printed
annual price, which is what keeps it mask-safe and drift-proof (see that
script's comment for both reasons). Empty until that script runs, so it
occupies no space and cannot leave a dangling separator if it never does. */
.intro-card .intro-card-plans .icp-mo { opacity: 0.6; }
/* Once the trial form is open, drop the price line — the form takes its
place, and the card should ask one question at a time. (The trial link
hides itself via the shared [data-download-trigger] rule in
site-chrome.css; the Buy anchor is handled just below.) */
.intro-card:has(.email-capture.is-open) .intro-card-plans { display: none; }
/* The hero Buy CTA is an , not a [data-buy-trigger], so site-chrome.css's
shared "hide this card's CTAs while a form is open" rule no longer catches
it. Keep the behaviour explicitly: with the trial form open the card asks
exactly one question. Must target .intro-card-buy, NOT .btn-primary — the
open panel's own submit/download buttons are .btn-primary inside this card.
(See the .intro-card-buy rule above.) */
.intro-card:has(.email-capture.is-open) .intro-card-buy { display: none; }
/* No override: the trial link keeps the shared .trial-link margin-top of
0.7rem, which is exactly what the section-9 cards use under their own Buy
buttons. The old 1.05rem made this card's trial link sit further off its
button than the identical link does downstairs. */
@media (max-width: 760px) {
.intro-card { margin: 0 auto; }
}