, so that rule's `margin` SHORTHAND resets margin-top to 0 and the
auto never applies: measured, the buttons sat up to 74px short of the card
foot while the cards themselves were exactly equal height. Every automated
check passed through it, because nothing was erroring or broken - it just
looked untidy. Do not simplify this back to `.hub__card-links`. */
.hub__card-body .hub__card-links { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 0; }
.hub__card-links .btn { padding: 10px 16px; font-size: 11px; }
/* Case page -> its trade hub. The other half of the 2.4 linking spine. */
.hub__back, .case__hub { margin-top: 34px; }
.case__hub { font-size: 15px; color: var(--ink-soft); }
.case__hub a { color: var(--rust); }
.hub__back a { font: 700 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.hub__back a:hover { color: var(--rust); }
@media (max-width: 620px) {
.hub__gallery { grid-template-columns: 1fr; }
}
/* The homepage's crawlable route into the hubs. Namespaced .hub__* like the
rest of this block; the trade chips beside it are JS-built buttons, so these
anchors are the only thing a crawler can follow from home to a hub. */
.hub__index { margin: 6px 0 30px; }
.hub__index-lead { font: 700 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.hub__index-list { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; }
.hub__index-list a { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font: 500 13.5px/1 var(--sans); color: var(--ink-soft); text-decoration: none; }
.hub__index-list a:hover { border-color: var(--rust); color: var(--rust); }
/* ═══ session 22: /about/, /contact/, pricing + FAQ blocks ═══════════════════
APPENDED ONLY. Everything above line 481 is byte-identical to what shipped;
md5 of the first 481 lines is ae097c660291a30aa15cb51e7c84e866. */
/* --- generic static page (about, contact) --- */
.page__title { font: 400 clamp(30px, 4.6vw, 46px)/1.14 var(--serif); margin: 10px 0 18px; }
.page__lede { font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.page__prose { max-width: 66ch; }
.page__prose p { line-height: 1.72; margin: 0 0 18px; }
.page__prose h2 { font: 400 24px/1.2 var(--serif); margin: 42px 0 14px; }
.page__cta { margin: 34px 0 90px; }
/* --- pricing block: on the trade pages, never in the nav --- */
.pricing { border-top: 1px solid var(--line-soft); margin-top: 72px; padding: 56px 0 8px; }
.pricing__title { font: 400 clamp(24px, 3.2vw, 34px)/1.2 var(--serif); margin: 0 0 28px; }
.pricing__grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pricing__tier {
border: 1px solid var(--line); border-radius: 10px; padding: 22px 20px 24px;
background: var(--paper); display: flex; flex-direction: column;
}
/* The recommended tier is the reason the ladder exists. Make it obvious. */
.pricing__tier--rec { border-color: var(--rust); box-shadow: 0 0 0 1px var(--rust) inset; }
.pricing__flag {
font: 600 11px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase;
color: var(--rust); margin: 0 0 10px;
}
.pricing__name { font: 400 21px/1.2 var(--serif); margin: 0 0 6px; }
.pricing__from { font-size: 15px; color: var(--ink-soft); margin: 0 0 12px; }
.pricing__from strong { font-size: 26px; color: var(--ink); font-weight: 500; }
.pricing__blurb { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 14px; }
.pricing__spec { list-style: none; margin: 0 0 4px; padding: 0; font-size: 14.5px; }
.pricing__spec li { padding: 5px 0 5px 18px; position: relative; color: var(--ink-soft); }
.pricing__spec li::before { content: ''; position: absolute; left: 0; top: 12px; width: 8px; height: 1px; background: var(--rust); }
.pricing__care { margin: 26px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 66ch; }
.pricing__cta { margin: 24px 0 0; }
/* --- FAQ: collapses and the alignment problem it exists to fix comes back.
Measured: without this the recommended card's price sat ~22px lower than its
neighbours. */
.pricing__flag { min-height: 11px; }
/* Session 22, Rajat: three tiers across read congested, because each blurb had
only a ~280px column and wrapped to four lines. Two across gives each card
~431px inside the 880px shell and the blurb settles on two.
The THIRD tier spans the full width rather than sitting as an orphan beside
an empty cell: measured both, and the empty cell reads as unfinished. It also
happens to be the honest grouping, the two priced tiers together and the
quote-only one below. Phone stays one per row. */
.pricing__grid { grid-template-columns: repeat(2, 1fr); }
.pricing__tier:last-child { grid-column: 1 / -1; }
@media (max-width: 640px) {
.pricing__grid { grid-template-columns: 1fr; }
.pricing__tier:last-child { grid-column: auto; }
}
/* Session 22, Rajat: three gallery cards across read congested; one per row.
The card turns SIDEWAYS rather than just becoming one column. Measured both:
stacked at full width ran the commentary to ~1050px lines, far past a
readable measure, and gave each design a huge image with a thin strip of text
under it. Sideways keeps the text in a ~490px column, which is a normal
measure, and still shows the design bigger than it was at three across.
Every thumb is a uniform 560x350, so the image column cannot surprise us.
object-position is TOP: the hero is the recognisable part of a design. */
.hub__gallery { grid-template-columns: 1fr; }
.hub__card { flex-direction: row; align-items: stretch; }
.hub__shot { border-bottom: 0; border-right: 1px solid var(--line); flex: 0 0 56%; }
.hub__shot a, .hub__shot picture, .hub__shot img { display: block; height: 100%; }
.hub__shot img { object-fit: cover; object-position: top center; }
/* Below this the two columns get too narrow to read, so the card stacks again. */
@media (max-width: 860px) {
.hub__card { flex-direction: column; }
.hub__shot { border-right: 0; border-bottom: 1px solid var(--line); flex: none; }
.hub__shot a, .hub__shot picture, .hub__shot img { height: auto; }
}
/* 🔴 FIX, session 22. The rule above set the thumb to height:100% + object-fit:
cover, so each image stretched to ITS OWN card's height. Card height follows
the commentary length, which differs per design, so every thumbnail was
cropped to a different shape: MEASURED 4 distinct ratios across 10 cards
(1.13 to 1.30) against a source that is uniformly 560x350 = 1.60.
Thumbnails must look the same everywhere. The image now holds the source
ratio and sits at the top of the column; the column still stretches so the
divider border runs the full height of the card. */
.hub__shot a, .hub__shot picture { display: block; height: auto; }
.hub__shot img { height: auto; aspect-ratio: 560 / 350; object-fit: cover; object-position: top center; }
/* ── THE PRICE ANCHOR ────────────────────────────────────────────────────────
Ruling 14, as amended session 31: the three tier CARDS come off the hub page
and one "from $1,000" anchor replaces them. TIERS still lives in
tools/site-copy.mjs and still answers the FAQ, so the countable bound on the
floor price survives where a customer who asks can find it.
WHY THE PRICE IS THIS BIG. site-copy.mjs argues that an anchor has to be
VISIBLE to anchor. It was not: measured on the live page, the largest text in
the pricing section was the .pricing__title heading at 34px while the price
was 26px, so the section's own heading out-sized the number it exists to
state. At clamp(44px, 7vw, 68px) the price is the largest thing in the
section at every width, which is the whole point of a floor price.
The .pricing__grid, .pricing__tier, .pricing__flag, .pricing__name,
.pricing__from, .pricing__blurb and .pricing__spec rules above are now dead.
They stay: they sit inside the append-only first 481 lines that carry the
md5 guard, and dead CSS is cheaper than breaking that hash. */
.pricing__anchor { padding: 4px 0 0; }
.pricing__anchor p { margin: 0 0 10px; font-size: 15px; color: var(--ink-soft); }
/* display:block puts the figure on its own line under the word "from", so the
qualifier reads as a label instead of competing with the number. */
.pricing__anchor p strong { display: block; font: 400 clamp(44px, 7vw, 68px)/1 var(--serif); color: var(--ink); letter-spacing: -0.01em; }
.pricing__say { margin: 0; max-width: 54ch; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
/* ═══ session 32: the trade chips are gone ═══════════════════════════════════
APPENDED, like everything after 481. The first 481 lines are still byte-frozen
at ae097c660291a30aa15cb51e7c84e866 - verified before and after this append.
.filters was `justify-content: space-between` with two children: the trade
chips on the left, the view switcher pushed right by its own margin-left:auto.
The chips are deleted (Rajat, 2026-09-15 - every design is a template that
fits any business, so sorting the collection by trade argued against the
offer), which leaves one child in a space-between row.
🔴 NOT deleting .filters, .filters button, or .filters button.is-on, even
though they read as chip rules. .filters__view button INHERITS its border,
padding and transition from `.filters button`, and `#viewSwitch .is-on` uses
the same is-on rule - deleting them strips the view switcher bare. That is the
single easiest thing to get wrong here, so this overrides instead. */
.filters--solo { justify-content: flex-end; }
/* ⛔ .hub__*, .hub__index* and the .pricing__tier family are now dead: the 12
trade pages that used them are deleted. Left in place on purpose - see the
note at 695 - but note that note is WRONG about WHERE they sit. .pricing__grid
and friends are at 558-575, OUTSIDE the guarded 481, so the hash is not what
keeps them. They are simply not worth the churn to remove. */