/* ==========================================================================
home-v2.css — page-specific layout for the rebuilt homepage.
Loaded ONLY when the 'home' redesign gate is open for this viewer. The old
page keeps its seven stylesheets, untouched.
Everything this file does NOT contain is deliberate: colour, type, buttons,
sections, the ink surface, the answer sheet, the questions accordion, the
quiet link list and the closing band all come from abstracts/foundation.css,
which is already in the global bundle. A page adds layout here and nothing
else. If this file starts redefining a component, the component is wrong.
Every rule is scoped under .home-v2 so nothing here can reach the old page,
the header, or the footer.
========================================================================== */
/* The opted-in wrapper. `.fnd` (from foundation.css) paints paper + ink text
and hands down the tokens; it sits on this div rather than on so the
shared header and footer keep their own styling until the chrome migrates. */
.home-v2 { overflow-x: clip; }
/* --------------------------------------------------------------------------
1. HERO
Copy left, the example shoutout right. On a phone the picture goes BELOW
the button: the button is what 2,781 sessions a month press, and it must
not be pushed under the fold by a decoration.
-------------------------------------------------------------------------- */
.home-v2 .hv-hero__in {
display: grid;
grid-template-columns: 1fr;
gap: var(--fnd-s7);
align-items: center;
}
@media (min-width: 900px) {
.home-v2 .hv-hero__in { grid-template-columns: 1.22fr .78fr; gap: var(--fnd-s7); }
}
.home-v2 .hv-hero__title {
font-size: var(--fnd-t-display-2);
letter-spacing: -.036em;
margin: 0 0 var(--fnd-s4);
/* Measure history, because two attempts each stranded a different word:
15ch gave four lines with "promote" alone, and 18ch plus a nowrapped
"real creators" pushed the phrase onto its own line and left "Get" sitting
alone on a full display line, which the founder called out immediately.
22ch holds it to two balanced lines with the phrase intact on the first. */
max-width: 22ch;
}
/* The one highlighted word, once on the page, on the words it turns on.
Accent underline, never an accent typeface colour: at this lightness
coloured text would fail contrast on the ink surface.
DRAWN AS A BACKGROUND, NOT AS ::after. The first version used an absolutely
positioned bar, which foundation.css can get away with because there the
highlighted span is one word held on one line by `white-space: nowrap`.
Here the phrase is two words and it wrapped: an absolute child only covers
the element's FIRST line box, so at 1440px the bar sat under "eators",
starting and ending mid-word, and at 375px it collapsed to a single indigo
dot under an unrelated letter. It read as a speck of dirt on the most
important line on the site, and it survived my own screenshot review because
an underline under one of the two words looks deliberate.
A background gradient with box-decoration-break: clone repaints on EVERY
line box, so it is correct at any width and at any wrap point. */
.home-v2 .hv-hero__title em {
font-style: normal;
background-image: linear-gradient(var(--fnd-accent), var(--fnd-accent));
background-size: 100% .11em;
background-position: 0 92%;
background-repeat: no-repeat;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding-bottom: .04em;
/* No nowrap. Forcing the phrase onto one line is what stranded "Get" on a
line of its own. The gradient handles a wrap correctly on its own, which
is the entire reason it replaced the absolutely positioned bar. */
}
.home-v2 .hv-hero__sub {
font-size: clamp(1.05rem, 2.1vw, 1.22rem);
line-height: 1.6;
color: var(--fnd-on-ink-soft);
max-width: 46ch;
margin: 0 0 var(--fnd-s6);
}
.home-v2 .hv-hero__go { display: flex; flex-direction: column; align-items: flex-start; }
.home-v2 .hv-hero__hint {
font-size: var(--fnd-t-meta);
color: var(--fnd-on-ink-faint);
margin: var(--fnd-s4) 0 0;
max-width: 42ch;
line-height: 1.55;
}
/* --- the example shoutout ------------------------------------------------ */
.home-v2 .hv-shout { margin: 0; }
/* This card is the only place the product is actually shown, so it has to
carry weight rather than sit politely in the corner. An outside reviewer
called the first version "too small and subdued to demonstrate the product",
and on desktop it floated in its own column with air all round it. */
.home-v2 .hv-shout__card {
/* Opaque, because this card now sits ON the wall of avatars. At 7.5% white
the faces behind it showed straight through the top of the card and it
read as a rendering fault rather than a design. */
background: #1D1A25;
border: 1px solid rgba(255, 255, 255, .17);
border-radius: var(--fnd-r);
padding: var(--fnd-s5);
/* min-height, never height: at narrow widths the post text grows and a fixed
height spills its own contents out of the card. */
min-height: 210px;
box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}
@media (min-width: 900px) {
.home-v2 .hv-shout__card { padding: var(--fnd-s6); min-height: 300px; }
}
.home-v2 .hv-shout__tag { margin-bottom: var(--fnd-s4); }
.home-v2 .hv-shout__who { display: flex; align-items: center; gap: 12px; margin-bottom: var(--fnd-s3); }
.home-v2 .hv-shout__av {
flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
background: linear-gradient(140deg, #3A3450, #2A2438);
border: 1px solid var(--fnd-on-ink-rule);
}
.home-v2 .hv-shout__id { display: flex; flex-direction: column; min-width: 0; }
.home-v2 .hv-shout__id b { font-family: var(--fnd-display-font); font-weight: 700; font-size: 15.5px; color: #fff; }
.home-v2 .hv-shout__id em { font-style: normal; font-size: var(--fnd-t-micro); color: var(--fnd-on-ink-faint); }
.home-v2 .hv-shout__body {
font-size: 17px; line-height: 1.62; color: rgba(255, 255, 255, .93);
margin: 0 0 var(--fnd-s4);
overflow-wrap: break-word;
}
@media (min-width: 900px) { .home-v2 .hv-shout__body { font-size: 18.5px; } }
/* The visitor's own channel is the point of the whole card, so it is the one
thing in it wearing the accent. */
.home-v2 .hv-shout__at { color: var(--fnd-accent); font-weight: 700; }
.home-v2 .hv-shout__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.home-v2 .hv-shout__pill {
font-size: var(--fnd-t-micro); color: var(--fnd-on-ink-faint);
border: 1px solid var(--fnd-on-ink-rule); border-radius: 999px; padding: 4px 11px;
}
.home-v2 .hv-shout__cap {
font-size: var(--fnd-t-meta); color: var(--fnd-on-ink-faint);
margin: var(--fnd-s3) 0 0; line-height: 1.55; max-width: 40ch;
}
/* --------------------------------------------------------------------------
THE HERO STAGE: a wall of real creator faces, with one shoutout on top.
The wall IS the argument. "Real creators" is the claim the whole page rests
on, and twenty-one genuine YouTube profile pictures say it faster than any
sentence. They are decorative and aria-hidden, and nothing is ever attributed
to any of them: the card's own avatar is a plain silhouette precisely so a
real member never appears to have said something they did not say.
-------------------------------------------------------------------------- */
.home-v2 .hv-stage { position: relative; }
.home-v2 .hv-wall {
display: grid;
/* SIX columns, not eight. At eight each avatar rendered about 46px inside
the hero column, and since a lot of creator avatars are dark gaming logos
the grid read as visual noise rather than as a crowd of people. Fewer and
bigger is what makes them legible as faces. */
grid-template-columns: repeat(6, 1fr);
gap: 9px;
/* align-items MATTERS here. A grid item defaults to stretch, which overrode
the images' aspect-ratio and rendered every avatar 56x72: real people,
visibly squashed taller than they are wide. The founder spotted it before
any checker did, because no checker we own measures whether a face is the
right shape. */
align-items: center;
/* Faded at the edges so it reads as a crowd continuing past the frame
rather than a tidy box of twenty-one people. */
-webkit-mask-image: linear-gradient(#000 46%, rgba(0,0,0,.35) 78%, transparent 100%);
mask-image: linear-gradient(#000 46%, rgba(0,0,0,.35) 78%, transparent 100%);
opacity: .9;
}
.home-v2 .hv-wall img {
width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
background: var(--fnd-ink-3);
display: block;
}
/* Six columns at every width, so eighteen faces are always exactly three full
rows. At eight columns the phone layout left two avatars stranded on a row of
their own, which is the ragged look this grid exists to avoid. */
@media (max-width: 899px) {
.home-v2 .hv-wall { gap: 7px; }
}
/* The card sits ON the wall, overlapping it, so the two read as one object. */
.home-v2 .hv-shout { margin: -34px 0 0; position: relative; z-index: 1; }
@media (min-width: 900px) { .home-v2 .hv-shout { margin-top: -52px; } }
/* A ring of hero background around the card so it lifts off the wall instead
of blending into it. */
.home-v2 .hv-shout__card { outline: 7px solid #16141A; outline-offset: 0; }
@media (max-width: 899px) { .home-v2 .hv-shout__card { outline-width: 5px; } }
/* --- the proof band ------------------------------------------------------ */
.home-v2 .hv-proof__grid {
display: grid; grid-template-columns: 1fr; gap: var(--fnd-s5);
}
@media (min-width: 860px) {
.home-v2 .hv-proof__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--fnd-s8); align-items: center; }
}
/* fig and label were a and an
; they are now two spans inside one
(.hv-proof__stat) so the heading carries the full phrase. display:block keeps
the stacked look they had as block elements, and the wrapper heading owns no
margin of its own so the number-to-label gap stays the label's 14px. */
.home-v2 .hv-proof__stat { margin: 0; }
.home-v2 .hv-proof__fig {
display: block;
font-family: var(--fnd-display-font); font-weight: 800;
font-size: clamp(3.1rem, 9.5vw, 5.6rem); line-height: .86; letter-spacing: -.05em;
margin: 0; color: var(--fnd-text); font-variant-numeric: tabular-nums;
}
.home-v2 .hv-proof__label {
display: block;
font-family: var(--fnd-body-font); font-weight: 500; letter-spacing: 0;
font-size: var(--fnd-t-lede); color: var(--fnd-text-soft);
margin: 14px 0 0; max-width: 24ch; line-height: 1.45;
}
.home-v2 .hv-proof__side .fnd-lede { margin-bottom: 0; }
/* --------------------------------------------------------------------------
3. THE THREE PLACEMENTS
One skeleton, three sets of words. The previous version gave each card a
different internal structure and the founder read them as three unrelated
objects that did not flow. Identical parts, identical heights, and the title
ABOVE the picture so the reader knows what they are looking at before they
look at it.
-------------------------------------------------------------------------- */
.home-v2 .hv-how__head { max-width: 46ch; }
.home-v2 .hv-how__head .fnd-lede { margin-bottom: 0; }
.home-v2 .hv-lands {
display: grid; grid-template-columns: 1fr; gap: var(--fnd-s6);
margin-top: var(--fnd-s8);
}
@media (min-width: 700px) { .home-v2 .hv-lands { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .home-v2 .hv-lands { grid-template-columns: repeat(3, 1fr); } }
/* Rows, so the title, the picture and the line under it line up ACROSS the
three cards no matter how the words wrap. Without this the pictures start at
three different heights the moment one title runs to two lines. */
.home-v2 .hv-land { display: grid; grid-template-rows: auto 1fr auto; gap: var(--fnd-s3); }
.home-v2 .hv-land__top {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--fnd-s3);
}
.home-v2 .hv-land__h { font-size: var(--fnd-t-h3); margin: 0; }
.home-v2 .hv-land__cost {
flex: 0 0 auto; white-space: nowrap;
font-family: var(--fnd-display-font); font-weight: 700; font-size: 14px;
color: var(--fnd-accent-deep); background: var(--fnd-accent-soft);
border-radius: 999px; padding: 5px 12px;
}
.home-v2 .hv-land__d {
font-size: var(--fnd-t-sm); line-height: 1.6; color: var(--fnd-text-soft); margin: 0;
}
/* The picture. min-height, never height: the mention text reflows at every
width, and a fixed height would spill it out of its own card. */
.home-v2 .hv-land__pic {
min-height: 176px;
background: var(--fnd-card); border: 1px solid var(--fnd-rule);
border-radius: var(--fnd-r); padding: 18px;
display: flex; flex-direction: column; gap: 13px;
box-shadow: 0 14px 34px rgba(22, 20, 26, .08);
}
.home-v2 .hv-land__chrome {
display: flex; align-items: center; gap: 10px;
padding-bottom: 13px; border-bottom: 1px solid var(--fnd-rule);
}
.home-v2 .hv-land__av {
width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
background: linear-gradient(140deg, #D9D3EF, #BFB6E8);
}
.home-v2 .hv-land__id { display: flex; flex-direction: column; min-width: 0; }
.home-v2 .hv-land__id b {
font-family: var(--fnd-display-font); font-weight: 700; font-size: 14px;
color: var(--fnd-text);
}
.home-v2 .hv-land__id em {
font-style: normal; font-size: var(--fnd-t-micro); color: var(--fnd-text-faint);
}
/* Real words, never grey placeholder bars: an earlier version drew the
surrounding content as skeleton lines and every card read as still loading. */
.home-v2 .hv-land__body {
margin: 0; font-size: 15px; line-height: 1.6; color: var(--fnd-text);
overflow-wrap: break-word;
}
.home-v2 .hv-land__at { color: var(--fnd-accent-deep); font-weight: 700; }
/* --------------------------------------------------------------------------
THE COLLABORATION KINDS
REBUILT 2026-08-06. It was a heading over a wrapping row of eight bare text
links, and the founder read it as unfinished and as merged into the questions
above it (both were tint, and they sat next to each other). Two things fix
that: the section now alternates against its neighbours, and the links are
the page's own answer-sheet device, where the NAME is the display type and
the plain explanation is the small type. A scanner learns seven things
without reading a sentence, which is the same rule the free card follows.
Still links and never pills: eight pills here would read as eight more calls
to action competing with the one that matters.
-------------------------------------------------------------------------- */
.home-v2 .hv-team__head {
display: grid; grid-template-columns: 1fr; gap: var(--fnd-s5);
align-items: start;
}
@media (min-width: 900px) {
.home-v2 .hv-team__head { grid-template-columns: minmax(0, 1fr) auto; gap: var(--fnd-s7); }
}
/* Real member avatars, overlapped into one group so they read as "people",
not as a gallery. A tight negative margin is the whole device. */
.home-v2 .hv-team__faces { display: flex; align-items: center; padding-left: 7px; }
.home-v2 .hv-team__faces img {
width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
margin-left: -14px; border: 3px solid var(--fnd-paper-2);
background: var(--fnd-rule);
}
@media (max-width: 899px) {
.home-v2 .hv-team__faces img { width: 44px; height: 44px; margin-left: -11px; }
}
.home-v2 .hv-kinds {
list-style: none; margin: var(--fnd-s6) 0 0; padding: 0;
display: grid; grid-template-columns: 1fr;
border-top: 1px solid var(--fnd-rule);
}
@media (min-width: 760px) {
.home-v2 .hv-kinds { grid-template-columns: 1fr 1fr; column-gap: var(--fnd-s7); }
/* With seven items in two columns the second column is one row shorter, so
its bottom hairline has to come from the cells themselves rather than from
a border on the list. Every cell owns its own bottom rule. */
.home-v2 .hv-kinds li:nth-child(2) { border-top: 1px solid var(--fnd-rule); }
}
.home-v2 .hv-kinds li { border-bottom: 1px solid var(--fnd-rule); }
/* `li > a` and not just `a`, because foundation.css underlines prose links with
`.fnd :is(p, li, summary, em, span) > a:not(.fnd-btn)` at (0,2,2). A plain
`.home-v2 .hv-kinds a` scores (0,2,1) and loses, so every row rendered with
an underline through its title AND its description. Matching the structure
the foundation rule matches is the fix; do not "solve" this with !important. */
.home-v2 .hv-kinds li > a {
display: block; padding: 17px 30px 17px 0; text-decoration: none;
color: inherit; position: relative;
transition: color 140ms ease;
}
.home-v2 .hv-kinds b {
display: block; font-family: var(--fnd-display-font); font-weight: 800;
font-size: 19px; letter-spacing: -.02em; line-height: 1.2;
color: var(--fnd-text); margin-bottom: 4px; text-wrap: balance;
}
.home-v2 .hv-kinds span {
display: block; font-size: var(--fnd-t-meta); line-height: 1.5;
color: var(--fnd-text-soft);
}
/* A chevron, so a text row still announces itself as somewhere to go. */
.home-v2 .hv-kinds li > a::after {
content: ""; position: absolute; right: 6px; top: 50%;
width: 9px; height: 9px; margin-top: -6px;
border-right: 2px solid var(--fnd-text-faint);
border-bottom: 2px solid var(--fnd-text-faint);
transform: rotate(-45deg);
transition: border-color 140ms ease, transform 140ms ease;
}
.home-v2 .hv-kinds li > a:hover b { color: var(--fnd-accent-deep); }
.home-v2 .hv-kinds li > a:hover::after {
border-color: var(--fnd-accent-deep); transform: rotate(-45deg) translate(2px, 2px);
}
/* The guide is not a kind of collaboration, so it sits outside the set. */
.home-v2 .hv-guide {
display: inline-flex; align-items: center; min-height: 44px;
margin-top: var(--fnd-s5);
font-size: var(--fnd-t-sm); font-weight: 600;
color: var(--fnd-text); text-decoration: none;
border-bottom: 1px solid var(--fnd-rule);
transition: color 140ms ease, border-color 140ms ease;
}
.home-v2 .hv-guide:hover { color: var(--fnd-accent-deep); border-bottom-color: var(--fnd-accent-deep); }
/* --------------------------------------------------------------------------
5. THE TWO EARNING PATHS
-------------------------------------------------------------------------- */
.home-v2 .hv-two {
display: grid; grid-template-columns: 1fr; gap: var(--fnd-s5);
margin-top: var(--fnd-s6);
}
@media (min-width: 760px) { .home-v2 .hv-two { grid-template-columns: 1fr 1fr; gap: var(--fnd-s6); } }
.home-v2 .hv-two__col {
background: var(--fnd-card); border: 1px solid var(--fnd-rule);
border-radius: var(--fnd-r); padding: var(--fnd-s5);
min-height: 0; /* the grid stretches these to match; never a fixed height */
}
.home-v2 .hv-two__h { font-size: var(--fnd-t-h3); margin: 0 0 var(--fnd-s2); }
.home-v2 .hv-two__p {
font-size: var(--fnd-t-sm); line-height: 1.65; color: var(--fnd-text-soft); margin: 0;
overflow-wrap: break-word;
}
.home-v2 .hv-two__p b { color: var(--fnd-text); font-weight: 600; }
.home-v2 .hv-two__note {
font-size: var(--fnd-t-meta); color: var(--fnd-text-faint);
margin: var(--fnd-s3) 0 0; padding-top: var(--fnd-s3);
border-top: 1px solid var(--fnd-rule);
}
/* --------------------------------------------------------------------------
6. THE FREE ACCOUNT, AND THE STEP UP
The section says everything works free, so FREE is the object on show. The
plans sit beside it as a quiet strip. The previous version was a four column
data table, and "100 credits" tells a stranger nothing: precise and
meaningless is worse than vague.
-------------------------------------------------------------------------- */
.home-v2 .hv-cost__grid {
display: grid; grid-template-columns: 1fr; gap: var(--fnd-s6);
margin-top: var(--fnd-s7);
}
@media (min-width: 900px) {
.home-v2 .hv-cost__grid {
/* Widened from 1.25/.75 on 2026-08-06. At the old split every plan row
broke its detail line and left the word "month." alone on a second line,
three times in a column eight centimetres tall. */
grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
gap: var(--fnd-s6); align-items: start;
}
}
/* The free panel. A card, because it is the offer. */
.home-v2 .hv-free {
background: var(--fnd-card); border: 1px solid var(--fnd-rule);
border-radius: var(--fnd-r); padding: var(--fnd-s6);
box-shadow: 0 16px 40px rgba(22, 20, 26, .07);
}
.home-v2 .hv-free__top {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--fnd-s3); padding-bottom: var(--fnd-s4);
border-bottom: 1px solid var(--fnd-rule);
}
/* SIZED UP 2026-08-06. The paid panel gained an ink header strip and promptly
out-shouted the free card, which is backwards: free is who this page is for
and free is what the section's own heading promises. The fix is rank, not
volume. This title is now display-scale and the paid header stays a small
label, so the eye lands on free first without free having to shout. */
.home-v2 .hv-free__h {
font-family: var(--fnd-display-font); font-weight: 800;
font-size: clamp(23px, 3.2vw, 30px); letter-spacing: -.028em;
line-height: 1.12; margin: 0; text-wrap: balance;
}
.home-v2 .hv-free__price {
flex: 0 0 auto; white-space: nowrap;
font-family: var(--fnd-display-font); font-weight: 700; font-size: 14px;
color: var(--fnd-accent-deep); background: var(--fnd-accent-soft);
border-radius: 999px; padding: 5px 12px;
}
/* The header row already draws the rule under the title, so `.hv-facts`'s own
border-top drew a SECOND line a few pixels below it. Both selectors used to
score (0,2,0) and `.hv-facts` is declared later in this file, so the override
silently lost and the card rendered two horizontal rules under its heading.
Scoped to `.hv-free` so it wins on specificity rather than on source order,
which is what let it break in the first place. */
.home-v2 .hv-free .hv-free__list { margin-top: 0; border-top: 0; }
.home-v2 .hv-free__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.home-v2 .hv-free__cta { margin-top: var(--fnd-s5); }
/* On a phone the label plus the Google mark no longer fits the button's
shrink-to-fit width, and "Start growing for / free" left a one word orphan
on the card's only action. Full width inside the card, with the pill's side
padding relaxed so the label stays on one line. */
@media (max-width: 560px) {
.home-v2 .hv-free__cta { display: flex; width: 100%; padding: 0 var(--fnd-s3); }
}
/* The scan layer. A reader who never reads a full sentence still collects five
answers from these leads alone, which is the whole point of writing them. */
.home-v2 .hv-facts b {
display: block;
font-family: var(--fnd-display-font); font-weight: 800;
font-size: var(--fnd-t-body); letter-spacing: -.01em;
color: var(--fnd-text); margin-bottom: 2px;
text-wrap: balance;
}
/* The paid panel. Deliberately quieter than the free card (no shadow, no white
fill): free is the offer, a plan is the step up, and the Velvet Rope rule
says never disparage the free tier. But it is now a deliberate OBJECT rather
than three rows floating in the gap beside the card, which is what made it
read as leftovers. */
.home-v2 .hv-tiers {
border: 1px solid var(--fnd-rule); border-radius: var(--fnd-r);
background: var(--fnd-card); overflow: hidden;
}
/* INK HEADER, and the reason is measured. Our premium gold #F59E0B on the
cream header this started with came out at 1.84:1, under the 3:1 floor, and
it looked exactly as washed out as that number says. The two ways to fix a
contrast failure are to change the mark or to change what it sits on, and
changing the mark is not available here: the crown's entire value is being
identical to the crown a member meets in 52 other places, so a homepage-only
gold would be a different signal wearing the same shape. So the surface
moved instead. Gold on ink is how the crown already appears on our dark
surfaces, and it clears the floor comfortably.
It also gives the paid panel a real identity without letting it shout: a
label strip, against a free card that is a full white panel with a shadow.
Free stays the offer. */
.home-v2 .hv-tiers__lead {
display: flex; align-items: center; gap: 9px;
font-family: var(--fnd-display-font); font-weight: 800;
font-size: var(--fnd-t-meta); letter-spacing: -.005em; text-transform: none;
color: #fff; margin: 0;
padding: 15px var(--fnd-s5);
background: var(--fnd-ink); border-bottom: 1px solid var(--fnd-rule);
}
/* The shipped premium crown, one of the four marks that cross from the old
design system into this one. Its gold is the learned signal; do not restyle
it into the page accent, and do not repeat it on the rows. Once is a label,
four times is decoration. */
.home-v2 .hv-tiers__crown { color: var(--color-premium-gold, #F59E0B); font-size: 15px; }
/* The truth about what a plan unlocks, said once, and deliberately NOT inside
the ink strip. It was there first, and three lines of reversed text turned
the label into a slab that out-weighed the free card sitting beside it. The
founder's note was that free should stand out MORE, so the ink is now a thin
label carrying only the crown and four words, and the explanation drops onto
the panel's own light body where it is quieter. */
.home-v2 .hv-tiers__unlock {
margin: 0; padding: 14px var(--fnd-s5);
border-bottom: 1px solid var(--fnd-rule);
font-size: var(--fnd-t-meta); line-height: 1.55; color: var(--fnd-text-soft);
}
/* The way out to the full plan detail. Its own row at the foot of the panel,
because a link floating under a bordered card reads as belonging to neither.
Explicit text-decoration: foundation underlines prose links and this is not
one.
THE HOVER USED TO RUN BACKWARDS. Founder, 2026-08-17: "theres no background
behind 'see everything in each plan' and only when I hover over it, it turns
white." Both halves of that were literally true and measured on production:
the row rested on --fnd-paper-2 and hovered to --fnd-card, so pointing at the
only action in this card DISSOLVED it into the panel.
Two separate faults, and the second is why the first was invisible. Every
quiet control in the foundation rests on the card colour and hovers TO
--fnd-paper-2 (.fnd-modal-close, .fnd-picker-opt, .fnd-iconbtn, .fnd-pager a
all do exactly that), so this one was the system's own hover played in
reverse. And --fnd-paper-2 measures 1.17:1 against the white panel, which is
a tint the eye can genuinely fail to see at all: he was not exaggerating, he
was reading a 5% grey as nothing.
THE LABEL WAS THE REAL FAULT, not the band. It was --fnd-text, the same
near-black as the plan names three rows above it, so the only thing on this
row saying "you can press me" was a chevron. It is now --fnd-accent-deep, the
link colour the product already uses everywhere, and it reads as a control
before anyone points at it. That is what "no background" was describing.
The band is --fnd-accent-soft, which is the only surface token that differs
from BOTH of its neighbours. The sweep caught the version before this one
resting on --fnd-paper-2 and measured why that failed: .fnd-sec--tint, the
section this whole card sits in, is ALSO --fnd-paper-2, so at the card's outer
edge the band and the page behind it were the same tone held apart by one
border, and the step up from the white rows above was 1.17:1. The founder's
"there is no background behind it" survived that fix, at the one place he
would look. --fnd-accent-soft is documented as "accent as a chip background",
it is the label's own hue, and it is not used by anything else nearby.
THIS ROW INVENTS NO HOVER OF ITS OWN, and that is the fix rather than an
omission. It carries `hv-link`, and `.home-v2 .hv-link:hover` already widens
the gap so the chevron slides, which is how every other link on this page
answers a pointer. Two earlier attempts here each invented one instead and
each was wrong in a different way:
a fill swap to --fnd-accent, refused by foundation.js because no other page
in the product has a link that becomes a solid block, however real the
tokens in it were;
then an inset 1px accent edge borrowed from .fnd-btn--quiet:hover. That
device belongs to a button that draws its OWN rounded corners. This row is
square and sits inside a card that clips to 14px, so the card sliced the
bottom two corners off the edge and left a border that stopped mid-curve.
Founder, looking at it on production: "the bottom corners dont have the
border and even the colour is messed up."
The lesson is the same both times and is the reason this comment is long: a
token being legal says nothing about the DEVICE being legal, and a device
lifted from a component that has different geometry brings that geometry's
assumptions with it. Label contrast holds at 6.50:1, clear of the 4.5:1 floor.
A FILLED HOVER WAS BUILT FIRST AND REJECTED BY foundation.js, correctly. It
put --fnd-accent behind the row with ink on top, and while every value in it
was a real token, no other page in the product has a link that becomes a solid
fill: "an interaction the rest of the product does not have is off-system even
when every value in it is on-token." Worth remembering, because it passed the
static check, the contrast check and the eye.
NOTHING OVERRIDES THE HOVER COLOUR NOW, AND THAT IS DELIBERATE. Foundation's
prose-link hover, `.fnd a:not(.fnd-btn, [class*="btn"], [class*="button"],
[class*="cta"]):hover`, scores (0,3,1) because :not() takes its most specific
argument, and it loads after this sheet, so a (0,3,0) page rule silently loses
to it. The filled version had to fight that with a (0,4,0) selector. Landing on
accent-deep for both states means foundation and this sheet now agree, so there
is no fight to win and no specificity trick to maintain. If you ever need a
different hover colour here, that rule is what you are up against. */
/* The chevron is pinned to the right edge, not left hugging the label. That is
the gesture the seven collaboration rows above already use, and it is the
foundation list-row convention (.fnd-row-end is an `auto` grid column at the
right). Left-hugging left ~60% of this 450px band empty and signposted the
same "go here" two different ways on one page. space-between lands the chevron
at the row's right padding, which is also where the plan amounts sit, so it
lines up with the column above it too. */
.home-v2 .hv-tiers__link,
.home-v2 .hv-tiers__link:link,
.home-v2 .hv-tiers__link:visited {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 15px var(--fnd-s5); min-height: 52px;
border-top: 1px solid var(--fnd-rule); background: var(--fnd-accent-soft);
font-family: var(--fnd-display-font); font-weight: 700;
font-size: var(--fnd-t-sm); color: var(--fnd-accent-deep);
text-decoration: none; border-bottom: 0;
transition: transform 80ms ease;
}
/* THE PRESS STATE, and it is not optional here. The sweep pressed this row at
375px and got nothing: :active computed byte-identical to rest, and the global
bundle sets -webkit-tap-highlight-color: transparent on every anchor, so the
browser's own flash is suppressed too. Hover is the only state a mouse needs
and the only state a phone never sees, which is backwards for a page where
most of the traffic is a thumb.
The canonical utility for a row is .cp-tap-down in css/base/interactions.css,
and loading-feedback-layer.md is right that page CSS should use it rather than
reinvent a press. It is not available here: base.twig does not load that sheet
and main.css does not contain it, so the class would be inert markup. This is
its scale and its 80ms, copied deliberately, and it should be deleted in
favour of the class the day the public shell picks that sheet up. */
.home-v2 .hv-tiers__link:active { transform: scale(0.985); }
.home-v2 .hv-tiers__link::after {
content: ""; width: 8px; height: 8px; flex: 0 0 auto;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(-45deg); position: relative; top: -1px;
transition: transform 140ms ease;
}
/* Pinning the chevron to the right edge (justify-content above) makes the
gap-widening hover .hv-link carries a no-op: with the row full-width the free
space always fills, so 8px vs 14px is invisible. The chevron therefore slides
the way the seven collaboration rows above already slide theirs on hover, the
SAME translate, so the two rows now agree on the gesture AND its feedback. */
.home-v2 .hv-tiers__link:hover::after { transform: rotate(-45deg) translate(2px, 2px); }
.home-v2 .hv-tier {
display: grid; grid-template-columns: 1fr auto; gap: 3px var(--fnd-s3);
padding: 15px var(--fnd-s5); border-top: 1px solid var(--fnd-rule);
}
.home-v2 .hv-tier:first-of-type { border-top: 0; }
.home-v2 .hv-tier__name {
font-family: var(--fnd-display-font); font-weight: 800; font-size: 17px;
letter-spacing: -.02em; color: var(--fnd-text);
}
.home-v2 .hv-tier__amt {
font-family: var(--fnd-display-font); font-weight: 700; font-size: 17px;
color: var(--fnd-text); white-space: nowrap; text-align: right;
}
.home-v2 .hv-tier__amt i,
.home-v2 .hv-tier__amt em {
font-style: normal; font-family: var(--fnd-body-font); font-weight: 500;
font-size: var(--fnd-t-micro); color: var(--fnd-text-faint); margin-left: 3px;
}
.home-v2 .hv-tier__what {
grid-column: 1 / -1;
font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); line-height: 1.5;
}
/* Same scan layer as the free card, one step quieter. Reading only the bold
parts down this strip gives the reason to move up a plan; the room follows
in the same line because it is the supporting detail, not the offer. */
.home-v2 .hv-tier__what b {
display: block;
font-family: var(--fnd-display-font); font-weight: 700;
font-size: var(--fnd-t-sm); letter-spacing: -.01em;
color: var(--fnd-text); margin-bottom: 1px;
text-wrap: balance;
}
/* --------------------------------------------------------------------------
THE SECONDARY ASK
A link, not a pill. The page had five pill buttons carrying three different
labels, and an outside reader took that as a page unsure what it wanted you
to do. Only the sign-up gets a pill now; "open the studio" and "see the
plans" are what they actually are, which is navigation.
-------------------------------------------------------------------------- */
.home-v2 .hv-link {
display: inline-flex; align-items: center; gap: 9px;
min-height: 44px;
font-family: var(--fnd-display-font); font-weight: 700; font-size: 16.5px;
letter-spacing: -.015em;
color: var(--fnd-accent-deep); text-decoration: none;
border-bottom: 1px solid currentColor;
transition: gap 180ms cubic-bezier(.22,1,.36,1);
}
.home-v2 .hv-link::after {
content: ""; flex: 0 0 auto; width: 8px; height: 8px;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(-45deg); position: relative; top: -1px;
}
.home-v2 .hv-link:hover { gap: 14px; }
/* On the ink surface the deep accent is unreadable, so it flips to the bright
one. The accent is only ever a colour here, never a fill behind text. */
.home-v2 .hv-link--ink { color: var(--fnd-accent); }
/* --------------------------------------------------------------------------
QUESTIONS, ALIGNED TO THE PAGE
foundation centres .fnd-faq inside its wrap to keep the reading width down.
On this page the section heading is flush left, so a centred accordion sat
120px to its right and read as a mistake. Keep the reading width, drop the
centring, and let it start where the heading starts.
-------------------------------------------------------------------------- */
.home-v2 .fnd-faq { margin-left: 0; margin-right: 0; }
/* --------------------------------------------------------------------------
INVITATION ON THE INK SURFACE
foundation's .fnd-invite rule is written for paper, so the hairline and the
running text need the on-ink ramp here.
-------------------------------------------------------------------------- */
.home-v2 .fnd-ink-surface .fnd-invite { border-top-color: var(--fnd-on-ink-rule); }
.home-v2 .fnd-ink-surface .fnd-invite p { color: var(--fnd-on-ink-soft); }
.home-v2 .fnd-ink-surface .fnd-invite b { color: #fff; }
/* The answer sheet inherits paper hairlines from foundation; on ink they have
to switch to the on-ink ramp or they vanish. */
.home-v2 .fnd-ink-surface .fnd-answers,
.home-v2 .fnd-ink-surface .fnd-ans { border-color: var(--fnd-on-ink-rule); }
.home-v2 .fnd-ink-surface .fnd-ans-d { color: var(--fnd-on-ink-soft); }
/* --------------------------------------------------------------------------
THE PINNED BAR
Kept because it is worth 415 sign-ups a month on its own, restyled to ink
so it belongs to this page rather than the old one. Phone only: on desktop
the hero button is still on screen for most of the scroll and a second
permanent button would be a competing call to action.
-------------------------------------------------------------------------- */
.home-v2 .home-cta-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
display: none; align-items: center; gap: 12px;
background: var(--fnd-ink); color: #fff;
border-top: 1px solid var(--fnd-on-ink-rule);
box-shadow: 0 -6px 22px rgba(0, 0, 0, .22);
padding: 10px 16px;
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 767px) { .home-v2 .home-cta-bar { display: flex; } }
.home-v2 .home-cta-bar__btn,
.home-v2 .home-cta-bar__btn:link,
.home-v2 .home-cta-bar__btn:visited,
.home-v2 .home-cta-bar__btn:hover,
.home-v2 .home-cta-bar__btn:focus,
.home-v2 .home-cta-bar__btn:focus-visible,
.home-v2 .home-cta-bar__btn:active {
flex: 1 1 auto;
display: inline-flex; align-items: center; justify-content: center;
min-height: 48px; padding: 0 20px;
background: #fff; color: var(--fnd-ink);
font-family: var(--fnd-display-font); font-weight: 700; font-size: 15px;
border-radius: 999px; text-decoration: none; white-space: nowrap;
}
/* The Google mark rides every sign-in button on this page, this one included.
It is the only thing telling a stranger what the tap is about to ask for,
and the pinned bar is the button most of them actually press. */
.home-v2 .home-cta-bar__btn svg { flex: 0 0 auto; margin-right: 9px; }
/* The floating language switcher would otherwise sit under the pinned bar. */
@media (max-width: 767px) { body.home-v2-page .lang-switcher { bottom: 84px; } }
/* Reserve the bar's own height at the foot of the document. Without this the
bar is fixed over the last row of the shared footer, and the copyright line
and the Sitemap link underneath it can never be read or tapped at any scroll
position, because there is nothing left to scroll. */
@media (max-width: 767px) {
body.home-v2-page { padding-bottom: 78px; }
}
/* --------------------------------------------------------------------------
THE STUDIO STEPS
Four steps in the order a creator actually works, each with a real tracked
asset. Numbered, but NOT the banned 1-2-3 card grid: that pattern is three
equal tiles pretending to be a process. This is a genuine sequence where the
order carries meaning, each step is a different size, and the number is a
quiet marker rather than the design.
-------------------------------------------------------------------------- */
.home-v2 .hv-studio__head { max-width: 54ch; }
.home-v2 .hv-steps {
list-style: none; margin: var(--fnd-s8) 0 0; padding: 0;
display: grid; grid-template-columns: 1fr; gap: var(--fnd-s8);
}
@media (min-width: 900px) {
.home-v2 .hv-steps { grid-template-columns: 1fr 1fr; gap: var(--fnd-s8) var(--fnd-s7); }
}
/* Explicit rows so the pictures line up across a pair even when one title
wraps and the other does not. */
.home-v2 .hv-step { display: grid; grid-template-rows: auto 1fr auto; gap: var(--fnd-s3); }
.home-v2 .hv-step__top { display: flex; align-items: baseline; gap: 12px; }
.home-v2 .hv-step__n {
flex: 0 0 auto;
font-family: var(--fnd-display-font); font-weight: 800; font-size: 14px;
color: var(--fnd-accent);
font-variant-numeric: tabular-nums;
}
.home-v2 .hv-step__h { font-size: var(--fnd-t-h3); margin: 0; }
.home-v2 .hv-step__d {
font-size: var(--fnd-t-sm); line-height: 1.6; color: var(--fnd-on-ink-soft); margin: 0;
}
.home-v2 .hv-shot { margin: 0; align-self: start; }
.home-v2 .hv-shot img {
display: block; width: 100%; height: auto;
border-radius: var(--fnd-r);
border: 1px solid var(--fnd-on-ink-rule);
box-shadow: 0 22px 54px rgba(0, 0, 0, .36);
}
/* Three finished thumbnails, shown as a row so the section proves the tool
makes more than one look. */
.home-v2 .hv-shot--trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.home-v2 .hv-shot--trio img { border-radius: var(--fnd-r-sm); box-shadow: 0 12px 30px rgba(0,0,0,.32); }
/* The A/B pair, shown the way the tester shows it: two thumbnails side by side
with one marked. The mark is the accent, because here the accent means
exactly what the design system says it means, "this one won". */
.home-v2 .hv-ab { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fnd-s3); }
.home-v2 .hv-ab__side { position: relative; }
.home-v2 .hv-ab__side img { border-radius: var(--fnd-r-sm); }
.home-v2 .hv-ab__side--won img {
border-color: var(--fnd-accent);
box-shadow: 0 0 0 2px var(--fnd-accent), 0 22px 54px rgba(0, 0, 0, .36);
}
.home-v2 .hv-ab__tag {
position: absolute; left: 10px; top: 10px;
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--fnd-display-font); font-weight: 700; font-size: 12.5px;
padding: 4px 10px; border-radius: 999px;
background: rgba(0, 0, 0, .62); color: #fff;
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.home-v2 .hv-ab__tag--won { background: var(--fnd-accent); color: var(--fnd-accent-glyph); }
.home-v2 .hv-ab__tag--won::before {
content: ""; width: 12px; height: 12px; flex: 0 0 auto;
background: center / contain no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316141A' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
/* The disclosure. Present on every shoutout example on this page because a
shoutout here is paid for in credits, which is a material connection. Quiet,
because it is part of the post rather than a label we bolted on. */
.home-v2 .hv-shout__ad,
.home-v2 .hv-land__ad { color: var(--fnd-text-faint); font-weight: 600; }
.home-v2 .hv-shout__ad { color: var(--fnd-on-ink-faint); }
/* --- the earning section -------------------------------------------------
Two halves on the same skeleton as sections 3 and 4, so the page keeps one
grammar: title, picture, one line.
-------------------------------------------------------------------------- */
.home-v2 .hv-paid__head { display: grid; grid-template-columns: 1fr; gap: var(--fnd-s5); }
@media (min-width: 900px) {
/* The proof sits in what used to be a large empty half beside the heading. */
.home-v2 .hv-paid__head {
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
gap: var(--fnd-s8); align-items: end;
}
}
.home-v2 .hv-paid__head .fnd-lede { margin-bottom: 0; max-width: 46ch; }
.home-v2 .hv-paid__proof { border-top: 1px solid var(--fnd-rule); padding-top: var(--fnd-s4); }
@media (min-width: 900px) {
.home-v2 .hv-paid__proof { border-top: 0; border-left: 1px solid var(--fnd-rule);
padding-top: 0; padding-left: var(--fnd-s6); }
}
.home-v2 .hv-paid__fig {
font-family: var(--fnd-display-font); font-weight: 800;
font-size: clamp(2.8rem, 6.4vw, 4rem); line-height: .9; letter-spacing: -.045em;
margin: 0; color: var(--fnd-text); font-variant-numeric: tabular-nums;
}
.home-v2 .hv-paid__figlabel {
font-size: var(--fnd-t-sm); color: var(--fnd-text-soft);
margin: 12px 0 0; max-width: 30ch; line-height: 1.55;
}
/* TOP-aligned, not bottom-aligned. With `auto 1fr auto` the caption sat in a
row that absorbed the slack, so the longer caption started HIGHER than the
shorter one and the two lines of body text did not line up, which the
founder spotted immediately. `auto auto 1fr` puts each part directly under
the one above, so both captions start at the same height. Section 3 keeps
the other order on purpose: its titles wrap to two lines at some widths, and
there the priority is keeping the three PICTURES level. */
.home-v2 .hv-lands--two .hv-land { grid-template-rows: auto auto 1fr; }
@media (min-width: 700px) { .home-v2 .hv-lands--two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .home-v2 .hv-lands--two { grid-template-columns: 1fr 1fr; gap: var(--fnd-s8); } }
/* These two carry real screenshots rather than the little mocked placements,
so they get a photographic frame instead of the card treatment.
A SHARED aspect ratio is the point: the two source images are 1.60 and 1.74
to one, so at the same width they rendered different heights and the lines
underneath started at different places. */
.home-v2 .hv-shot--board img,
.home-v2 .hv-shot--kit img {
display: block; width: 100%; height: auto;
aspect-ratio: 16 / 10; object-fit: cover;
border-radius: var(--fnd-r);
border: 1px solid var(--fnd-rule);
box-shadow: 0 22px 54px rgba(22, 20, 26, .16);
}
.home-v2 .hv-shot--board img { object-position: center top; }
/* The kit shot is a device mockup, so it centres rather than crops from the
top, which was cutting the bottom off the phone. */
.home-v2 .hv-shot--kit img { object-position: center center; }
/* The disclosure. Present on every shoutout example on this page because a
shoutout here is paid for in credits, which is a material connection. Quiet,
because it is part of the post rather than a label we bolted on. */
.home-v2 .hv-shout__ad,
.home-v2 .hv-land__ad { color: var(--fnd-text-faint); font-weight: 600; }
.home-v2 .hv-shout__ad { color: var(--fnd-on-ink-faint); }
/* --- the earning section -------------------------------------------------
Two halves on the same skeleton as sections 3 and 4, so the page keeps one
grammar: title, picture, one line. The first version made them a number and
a screenshot, which read as two unrelated blocks.
-------------------------------------------------------------------------- */
@media (min-width: 700px) {
.home-v2 .hv-lands--two { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
.home-v2 .hv-lands--two { grid-template-columns: 1fr 1fr; gap: var(--fnd-s8); }
}
/* These two carry real screenshots rather than the little mocked placements,
so they get a photographic frame instead of the card treatment.
A SHARED aspect ratio is the point: the two source images are 1.60 and 1.74
to one, so at the same width they rendered different heights and the lines
underneath started at different places. Locking the box and cropping to it
makes the pair line up at every width. */
.home-v2 .hv-shot--board img,
.home-v2 .hv-shot--kit img {
display: block; width: 100%; height: auto;
aspect-ratio: 16 / 10; object-fit: cover; object-position: center top;
border-radius: var(--fnd-r);
border: 1px solid var(--fnd-rule);
box-shadow: 0 22px 54px rgba(22, 20, 26, .16);
}
/* The disclosure. Present on every shoutout example on this page because a
shoutout here is paid for in credits, which is a material connection. Quiet,
because it is part of the post rather than a label we bolted on. */
.home-v2 .hv-shout__ad,
.home-v2 .hv-land__ad { color: var(--fnd-text-faint); font-weight: 600; }
.home-v2 .hv-shout__ad { color: var(--fnd-on-ink-faint); }
/* --- the earning section -------------------------------------------------
No screenshot exists for the sponsored-shoutout half (no job is assigned at
any given moment, so the real board shows an empty state). The live count of
creators who did it last month carries that side instead, which is stronger
than a mocked card would have been and cannot go stale.
-------------------------------------------------------------------------- */
.home-v2 .hv-paid__grid {
display: grid; grid-template-columns: 1fr; gap: var(--fnd-s7);
margin-top: var(--fnd-s7);
}
@media (min-width: 900px) {
.home-v2 .hv-paid__grid { grid-template-columns: 1fr 1fr; gap: var(--fnd-s8); align-items: start; }
}
.home-v2 .hv-paid__fig {
font-family: var(--fnd-display-font); font-weight: 800;
font-size: clamp(3rem, 7.5vw, 4.4rem); line-height: .9; letter-spacing: -.045em;
margin: 0; color: var(--fnd-text); font-variant-numeric: tabular-nums;
}
.home-v2 .hv-paid__figlabel {
font-size: var(--fnd-t-lede); color: var(--fnd-text-soft);
margin: 12px 0 0; max-width: 26ch; line-height: 1.45;
}
.home-v2 .hv-facts {
list-style: none; margin: var(--fnd-s6) 0 0; padding: 0;
border-top: 1px solid var(--fnd-rule);
}
.home-v2 .hv-facts li {
padding: 14px 0 14px 32px; border-bottom: 1px solid var(--fnd-rule);
font-size: var(--fnd-t-sm); line-height: 1.55; color: var(--fnd-text-soft);
position: relative;
}
/* The tick, which on this page means "yes, this one" and nothing else.
*
* WHITE GLYPH, DEEP FILL (founder review, 2026-08-06). He asked for white
* checkmarks. On the bright accent #8F87FF a white glyph measures 2.97:1,
* under the 3:1 floor for a non-text graphic, which is exactly why the
* decision record locked "bright fill, dark glyph". That lock was written
* about a glyph sitting on an INK surface, where a dark accent disappears.
* These sit on a white card, so the honest way to give him the white tick is
* to darken the disc instead: white on --fnd-accent-deep #443CC4 measures
* 7.81:1, and the disc itself measures 7.81:1 against the card. Better on
* both counts than what it replaced.
*
* The glyph was also visibly high in its circle. The path's own bounding box
* centres on y=11.5 of a 24 box, not 12, so "center" was centring the BOX and
* not the mark. Shifted half a unit down and drawn at 11px inside an 18px
* disc, which is the size he asked for. */
.home-v2 .hv-facts li::before {
content: ""; position: absolute; left: 0; top: 15px;
width: 18px; height: 18px; border-radius: 50%;
background: var(--fnd-accent-deep) center / 11px no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9 17.5l-5-5'/%3E%3C/svg%3E");
}
/* Title above the picture, per the founder rule. */
.home-v2 .hv-paid__kith { margin: 0 0 var(--fnd-s3); }
.home-v2 .hv-paid__kit .hv-shot { margin-bottom: var(--fnd-s3); }
.home-v2 .hv-shot--kit img {
border-color: var(--fnd-rule);
box-shadow: 0 22px 54px rgba(22, 20, 26, .16);
}
/* The disclosure. Present on every shoutout example on this page because a
shoutout here is paid for in credits, which is a material connection. Quiet,
because it is part of the post rather than a label we bolted on. */
.home-v2 .hv-shout__ad,
.home-v2 .hv-land__ad { color: var(--fnd-text-faint); font-weight: 600; }
.home-v2 .hv-shout__ad { color: var(--fnd-on-ink-faint); }
/* --- the earning section, with the media kit shown -------------------------- */
.home-v2 .hv-paid__grid {
display: grid; grid-template-columns: 1fr; gap: var(--fnd-s6); align-items: center;
}
@media (min-width: 900px) {
.home-v2 .hv-paid__grid { grid-template-columns: 1fr 1fr; gap: var(--fnd-s8); }
}
.home-v2 .hv-shot--kit img {
border-color: var(--fnd-rule);
box-shadow: 0 22px 54px rgba(22, 20, 26, .16);
}
.home-v2 .hv-paid__copy .fnd-lede + .fnd-lede { margin-top: var(--fnd-s3); }
/* The "checked by our team" pill earns the accent: it is the one claim in the
card a sceptical visitor most needs to believe. */
.home-v2 .hv-shout__pill--ok {
color: var(--fnd-accent); border-color: rgba(143, 135, 255, .45);
}
/* --------------------------------------------------------------------------
THE EARNING PICTURE, now on its own
The section lost its second card on 2026-08-06 (the media kit moved out to a
section of its own, because it earns nobody any credits and broke the story
this section tells). One picture left in a two column grid would sit in the
left half with a hole beside it, so the survivor is centred and capped.
Capped, because at 1440 a full width screenshot of a dashboard stops reading
as evidence and starts reading as wallpaper.
-------------------------------------------------------------------------- */
.home-v2 .hv-earn {
margin: var(--fnd-s7) auto 0; max-width: 880px; text-align: center;
}
.home-v2 .hv-earn__h {
font-family: var(--fnd-display-font); font-weight: 800;
font-size: var(--fnd-t-h3); letter-spacing: -.02em;
color: var(--fnd-text); margin: 0 0 var(--fnd-s4); text-wrap: balance;
}
.home-v2 .hv-earn__d {
font-size: var(--fnd-t-sm); color: var(--fnd-text-soft); line-height: 1.6;
margin: var(--fnd-s4) auto 0; max-width: 56ch;
}
/* --------------------------------------------------------------------------
THE MEDIA KIT SECTION (new, 2026-08-06)
Copy on one side, the real screenshot on the other, with its title above it
per the founder rule. Deliberately NOT built from `.hv-land`: that skeleton
belongs to a SET of cards, and one figure pretending to be a set is how the
old placement row ended up reading as three unrelated objects.
-------------------------------------------------------------------------- */
.home-v2 .hv-kit__in {
display: grid; grid-template-columns: 1fr; gap: var(--fnd-s6);
align-items: center;
}
@media (min-width: 900px) {
.home-v2 .hv-kit__in {
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
gap: var(--fnd-s7);
}
}
.home-v2 .hv-kit__copy .fnd-lede { max-width: 44ch; margin-bottom: var(--fnd-s5); }
/* The same @handle motif the hero and the description shoutout use. Reusing
the page's own vocabulary is what stops a new section reading as though
somebody else designed it. Address-shaped, so it reads as a real link a
creator could hand over, and it always carries the @: the public route is
/@{slug} and a bare /{slug} returns a 404. */
.home-v2 .hv-kit__url {
display: inline-block; margin: 0;
font-family: var(--fnd-display-font); font-weight: 700;
font-size: clamp(15px, 3.4vw, 18px); letter-spacing: -.01em;
color: var(--fnd-text-soft);
background: var(--fnd-card); border: 1px solid var(--fnd-rule);
border-radius: 999px; padding: 11px 20px;
max-width: 100%; overflow-wrap: break-word;
}
.home-v2 .hv-kit__at { color: var(--fnd-accent-deep); }
.home-v2 .hv-kit__figh {
font-family: var(--fnd-display-font); font-weight: 800;
font-size: var(--fnd-t-h3); letter-spacing: -.02em;
color: var(--fnd-text); margin: 0 0 var(--fnd-s3); text-wrap: balance;
}
/* --------------------------------------------------------------------------
THE QUESTIONS (rebuilt 2026-08-06)
A heading block on one side, the single column accordion on the other. Read
the note in the template before changing this: a two column ACCORDION was
built and reverted once already, and the thing that made it fail (an answer
growing one column and leaving a hole beside it) cannot happen here, because
only the questions column ever changes height.
-------------------------------------------------------------------------- */
.home-v2 .hv-qa__in {
display: grid; grid-template-columns: 1fr; gap: var(--fnd-s6);
align-items: start;
}
@media (min-width: 960px) {
.home-v2 .hv-qa__in {
grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
gap: var(--fnd-s8);
}
/* Sticky, so the heading and the way to reach a human stay beside whichever
question is being read. `top` clears the sticky site header. */
.home-v2 .hv-qa__side { position: sticky; top: 96px; }
}
.home-v2 .hv-qa__side .fnd-lede { max-width: 34ch; margin-bottom: var(--fnd-s5); }
.home-v2 .hv-qa__ask {
display: inline-flex; align-items: center; min-height: 44px;
font-family: var(--fnd-display-font); font-weight: 700;
font-size: var(--fnd-t-sm); color: var(--fnd-text); text-decoration: none;
border-bottom: 1px solid var(--fnd-rule);
transition: color 140ms ease, border-color 140ms ease;
}
.home-v2 .hv-qa__ask:hover { color: var(--fnd-accent-deep); border-bottom-color: var(--fnd-accent-deep); }
/* The shared accordion is centred and capped at 840px for a page that gives it
the full width. In a column it must fill the column instead. */
.home-v2 .hv-qa__list { max-width: none; margin-left: 0; margin-right: 0; margin-top: 0; }
/* NO HORIZONTAL SHIFT ON OPEN. The first version padded the open row only, so
every answer slid 20px right as it appeared and back again as it closed.
The founder called that sketchy and it was: the eye reads a jump sideways as
the page being unsure of itself. Every row now carries the SAME horizontal
padding whether it is open or shut, and opening changes nothing but the
surface underneath. Motion in one axis only. */
.home-v2 .hv-qa__list details {
padding: 0 18px;
border-radius: var(--fnd-r);
transition: background-color 200ms ease, box-shadow 200ms ease;
}
.home-v2 .hv-qa__list summary {
padding-top: 21px; padding-bottom: 21px; padding-right: 44px;
font-size: 18px;
}
.home-v2 .hv-qa__list summary::after { right: 0; }
/* The row being read gets a surface. Paper against the tint of everything
else, the same device the free card uses two sections up. */
.home-v2 .hv-qa__list details[open] {
background: var(--fnd-card);
box-shadow: 0 10px 30px rgba(22, 20, 26, .06);
border-bottom-color: transparent;
margin: 10px 0;
}
/* THE ANSWER. It was a paragraph jammed against the question with the shared
recipe negative top margin still on it, which is what made it look like
nobody had looked at it. It now gets a rule above, real space around it, and
a reading measure. */
.home-v2 .hv-qa__body { overflow: hidden; }
.home-v2 .hv-qa__body { transition: height 260ms cubic-bezier(.4, 0, .2, 1); }
.home-v2 .hv-qa__list details p {
margin: 0; padding: 20px 0 26px;
border-top: 1px solid var(--fnd-rule);
font-size: 16px; line-height: 1.72; color: var(--fnd-text-soft);
max-width: 64ch;
}
/* The words worth catching on a skim. Ink against the softer body colour, so
emphasis comes from weight and contrast rather than from a second hue. */
.home-v2 .hv-qa__list details p b {
font-weight: 700; color: var(--fnd-text);
}
/* The credit coin. Our shipped mark (`fas fa-coins`, the same one the buttons
use), sitting immediately before the figure it prices, because the founder
reads "350 credits" and "[coin] 350 credits" as two different amounts of
information. Gold, like every other credit figure on the site. */
.home-v2 .hv-tier__coin {
/* One step darker than --color-premium-gold #F59E0B, and measured: the shipped
gold sits at 2.15:1 on this white panel, under the 3:1 floor, and at 12px it
read as a smudge rather than a coin. #D97706 is the next rung of the same
amber ramp at 3.19:1, still unmistakably gold at a glance.
Note this is the OPPOSITE decision to the crown two rules up, on purpose.
The crown is a learned trust mark whose whole value is being identical in
all 52 places a member meets it, so its contrast was fixed by moving the
SURFACE to ink. A coin is a currency glyph sitting inline in dark text on a
white card; it can never get an ink surface, so the colour moves instead.
The two never appear at the same size on the same background. */
color: #D97706;
font-size: 12px; margin-right: 5px;
position: relative; top: -1px;
}