/* ============================================================================
homepage-brand.css — Tenancy Pilot homepage
----------------------------------------------------------------------------
Ports the FORMAT of the uknamechange.com adult-landing page — its typographic
scale, component shapes, spacing rhythm and section structure — onto the
Tenancy Pilot homepage, while KEEPING the strict black-and-white palette.
No hues are introduced anywhere. The source's navy becomes black, its slate
ramp becomes a neutral grey ramp, and its cyan accent becomes white-on-dark /
black-on-light. What is borrowed is shape and proportion, not colour.
WHAT THE FORMAT ACTUALLY CONTRIBUTES:
- a very large, very LIGHT hero headline (weight 300) set against section
headings that are the opposite (weight 800) — the source's signature move
- pill eyebrows: 0.7rem / 700 / uppercase / 1.5px tracking / 50px radius
- one card recipe everywhere: 1px border, 14px radius, 24px padding,
flat at rest, soft shadow + 2px lift on hover
- flat buttons: 14px radius, weight 500, no shadow — the lift IS the hover
- a closing CTA as a rounded slab (20px) floating on the page ground
- alternating full-bleed bands and the 40 / 64 / 80px vertical rhythm
SCOPE: every rule is scoped to body.homepage-black-white.hp-brand which is
applied ONLY by backend/documents/templates/index.html. The other 15 public
templates carry body.homepage-black-white WITHOUT .hp-brand, so nothing here
can reach them. Specificity is (0,3,1)+, which beats every rule in
marketing.css (max (0,3,0)) without relying on load order.
TO REVERT: delete the to this file in index.html and drop the
"hp-brand" class from its . Nothing else was changed.
TYPEFACE: Poppins is the source's face and is part of its format, so it is
applied here. To go back to Inter, delete the two font-family blocks below
and drop &family=Poppins... from the font in index.html.
⚠ THE INTERACTIVE MACBOOK IS CLICK-DRIVEN — DO NOT RESTYLE ITS INTERNALS.
The old scroll-driven sticky section (.hiw-scroll-container / .hiw-step /
.hiw-visual-container and its IntersectionObserver) has been REMOVED. The
laptop now sits in its own .hp-demo section and is driven entirely by
clicking, so its stage here supplies only centring and `perspective`.
These names are still the JS<->CSS contract in homepage-premium.js and must
keep working — never rename them or style them out of existence:
.hp-demo-stage the root the click handlers are delegated from
.hiw-macbook queried for the tilt transform
.macbook width/max-width/aspect-ratio/padding/position
.macbook-screen position/overflow/pointer-events (stacking + clicks)
.screen-content position/opacity/.active/data-step
.mk-nav-item[data-screen] the sidebar items that switch screens
.mk-* anything else at all
Only the section chrome around the laptop is styled here.
========================================================================== */
body.homepage-black-white.hp-brand {
/* Ink */
--hb-ink: #000000;
--hb-ink-soft: #141414;
/* Neutral ramp — the source's slate ramp, desaturated to pure grey */
--hb-g-900: #1a1a1a;
--hb-g-700: #3d3d3d;
--hb-g-600: #555555;
--hb-g-500: #6b6b6b;
--hb-g-400: #8c8c8c;
--hb-g-300: #c9c9c9;
--hb-g-200: #e4e4e4;
--hb-g-100: #efefef;
--hb-g-50: #f7f7f7;
/* Accent role — resolved per ground, never as a hue */
--hb-on-dark-pill-bg: rgba(255, 255, 255, .14);
--hb-on-dark-pill-fg: #ffffff;
--hb-on-light-accent: #000000;
/* Radii — role-based, as in the source */
--hb-r-sm: 6px;
--hb-r-md: 10px;
--hb-r-lg: 14px;
--hb-r-xl: 20px;
--hb-r-pill: 50px;
/* Shadows — the source's soft elevation, neutral-tinted */
--hb-sh-card-hover: 0 4px 12px rgba(0, 0, 0, .08);
--hb-sh-card-rest-mobile: 0 6px 18px rgba(0, 0, 0, .05);
--hb-sh-signature: 0 20px 60px rgba(0, 0, 0, .16), 0 4px 16px rgba(0, 0, 0, .06);
--hb-sh-on-dark: 0 10px 26px rgba(0, 0, 0, .30);
--hb-ease: all .2s ease;
font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #ffffff;
color: #333;
}
body.homepage-black-white.hp-brand h1,
body.homepage-black-white.hp-brand h2,
body.homepage-black-white.hp-brand h3,
body.homepage-black-white.hp-brand h4,
body.homepage-black-white.hp-brand p,
body.homepage-black-white.hp-brand a,
body.homepage-black-white.hp-brand span,
body.homepage-black-white.hp-brand li,
body.homepage-black-white.hp-brand button {
font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* The .mk-* dashboard inside the laptop keeps its own typeface — it is a
miniature of the real app UI, not marketing copy. */
body.homepage-black-white.hp-brand .macbook-screen,
body.homepage-black-white.hp-brand .macbook-screen * {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* ============================================================================
NAVIGATION (shared include, restyled here for the homepage only)
========================================================================== */
body.homepage-black-white.hp-brand .main-nav {
background: rgba(255, 255, 255, .88);
border-bottom: 1px solid var(--hb-g-200);
}
body.homepage-black-white.hp-brand .main-nav.scrolled {
background: rgba(255, 255, 255, .96);
box-shadow: 0 2px 16px rgba(0, 0, 0, .06);
}
body.homepage-black-white.hp-brand .nav-menu a,
body.homepage-black-white.hp-brand .nav-link {
color: var(--hb-g-600);
transition: color .18s ease;
}
body.homepage-black-white.hp-brand .nav-menu a:hover,
body.homepage-black-white.hp-brand .nav-link:hover {
color: var(--hb-ink);
}
/* The source's nav CTA is a pill — that shape is format, the colour stays ink */
body.homepage-black-white.hp-brand .nav-actions .btn-primary {
background: var(--hb-ink);
border-color: var(--hb-ink);
color: #ffffff;
border-radius: var(--hb-r-pill);
font-weight: 500;
transition: var(--hb-ease);
}
body.homepage-black-white.hp-brand .nav-actions .btn-primary:hover {
background: var(--hb-g-900);
border-color: var(--hb-g-900);
color: #ffffff;
transform: translateY(-1px);
}
/* ============================================================================
HERO
The format's signature move: a very large, very LIGHT headline (weight 300),
with the emphasised half at 700 and a rule beneath it.
========================================================================== */
/* Off-white ground so the hero reads as its own band against the pure-white
capability strip directly beneath it. Bottom padding trimmed from 96px now
that the right-hand visual and the proof trio are gone. */
/* Hero ground: the app's own property drawing, full-bleed behind the copy.
No filters and no blend mode — the artwork as it is, just dropped back in
opacity so the text stays readable over it. */
body.homepage-black-white.hp-brand .hero-centered {
background: #ffffff;
padding-bottom: 48px;
}
body.homepage-black-white.hp-brand .hero-bg-pattern {
background-image: url("../images/property-types/hero2better.beeffe9fedc2.webp");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: .2;
/* marketing.css's fade (ellipse 75% 58% at 50% 34%) dissolves the linework
across most of the lower corners, which reads as a blur rather than a
fade. This keeps the drawing solid nearly to the edge and softens only in
the last stretch, so it still has a soft boundary without the haze. */
-webkit-mask-image: radial-gradient(ellipse 96% 100% at 50% 44%, #000 82%, transparent 100%);
mask-image: radial-gradient(ellipse 96% 100% at 50% 44%, #000 82%, transparent 100%);
}
/* A soft light wash over the middle so the headline and body copy keep their
contrast against the drawing. */
body.homepage-black-white.hp-brand .gradient-orb-1 {
display: block;
position: absolute;
inset: 0;
background: radial-gradient(ellipse 62% 58% at 50% 42%, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, 0) 78%);
pointer-events: none;
}
/* Single centred column. marketing.css sets this to a 1.1fr / 0.9fr grid for
the old two-column hero; there is no right-hand column any more. */
body.homepage-black-white.hp-brand .hero-centered-container {
grid-template-columns: 1fr;
max-width: 860px;
justify-items: center;
text-align: center;
}
body.homepage-black-white.hp-brand .hero-copy {
align-items: center;
text-align: center;
width: 100%;
}
/* marketing.css sets text-align:left here too — centre it with the rest. */
body.homepage-black-white.hp-brand .hero-main-headline {
color: var(--hb-ink);
font-weight: 300;
letter-spacing: -.02em;
line-height: 1.1;
text-align: center;
}
body.homepage-black-white.hp-brand .hero-main-headline .headline-accent {
color: var(--hb-ink);
font-weight: 700;
}
/* marketing.css draws a rule under the emphasised half of the headline —
removed here at the owner's request. */
body.homepage-black-white.hp-brand .hero-main-headline .headline-accent::after {
display: none;
}
/* marketing.css sets text-align:left on this; centre it with the rest. */
body.homepage-black-white.hp-brand .hero-subheadline {
color: var(--hb-g-500);
font-weight: 300;
line-height: 1.7;
text-align: center;
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
/* The source sets its trust line in bold, tight-tracked small caps-ish type.
Shape kept, colour reduced to ink. */
body.homepage-black-white.hp-brand .hero-trust-centered .trust-text,
body.homepage-black-white.hp-brand .hero-trust-centered .trust-info {
color: var(--hb-ink);
font-weight: 700;
letter-spacing: .02em;
}
/* --- Hero buttons ---------------------------------------------------------
Flat fill, 14px radius, weight 500, NO shadow — the 2px lift on hover is the
entire interaction, exactly as in the source. */
body.homepage-black-white.hp-brand .btn-hero-primary {
background: var(--hb-ink);
border: none;
color: #ffffff;
border-radius: var(--hb-r-lg);
font-weight: 500;
letter-spacing: .01em;
box-shadow: none;
transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
body.homepage-black-white.hp-brand .btn-hero-primary:hover {
background: var(--hb-g-900);
color: #ffffff;
box-shadow: none;
transform: translateY(-2px);
}
body.homepage-black-white.hp-brand .btn-hero-primary span {
color: #ffffff;
}
body.homepage-black-white.hp-brand .btn-hero-secondary {
background: transparent;
border: 2px solid var(--hb-g-300);
color: var(--hb-ink);
border-radius: 12px;
font-weight: 500;
transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
body.homepage-black-white.hp-brand .btn-hero-secondary:hover {
background: rgba(0, 0, 0, .04);
border-color: var(--hb-ink);
color: var(--hb-ink);
transform: translateY(-2px);
}
body.homepage-black-white.hp-brand .btn-hero-secondary span {
color: var(--hb-ink);
}
/* --- Hero feature cards: the source's one card recipe --- */
body.homepage-black-white.hp-brand .feature-card {
background: #ffffff;
border: 1px solid var(--hb-g-200);
border-radius: var(--hb-r-lg);
padding: 24px;
box-shadow: none;
transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
body.homepage-black-white.hp-brand .feature-card:hover {
box-shadow: var(--hb-sh-card-hover);
transform: translateY(-2px);
border-color: var(--hb-g-300);
}
body.homepage-black-white.hp-brand .feature-card-title {
color: var(--hb-ink);
font-size: 1rem;
font-weight: 700;
margin-bottom: 6px;
}
body.homepage-black-white.hp-brand .feature-card-desc {
color: var(--hb-g-500);
font-size: .85rem;
line-height: 1.6;
}
/* ============================================================================
HOW IT WORKS — four steps side by side on a full-bleed dark band.
The old scroll-driven sticky section is gone; the laptop now lives in its
own click-driven section below (.hp-demo).
========================================================================== */
/* scroll-margin clears the 88px fixed nav when anchor-linked (#how-it-works) */
body.homepage-black-white.hp-brand .hp-hiw {
background: var(--hb-ink);
padding: 60px 0;
scroll-margin-top: 100px;
}
body.homepage-black-white.hp-brand .hp-hiw-head {
text-align: center;
margin-bottom: 2.4rem;
}
body.homepage-black-white.hp-brand .hp-hiw-pill {
display: inline-block;
background: var(--hb-on-dark-pill-bg);
color: var(--hb-on-dark-pill-fg);
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 6px 16px;
border-radius: var(--hb-r-pill);
margin-bottom: 16px;
}
body.homepage-black-white.hp-brand .hp-hiw-title {
color: #ffffff;
font-size: 2.1rem;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.2;
margin: 0;
}
body.homepage-black-white.hp-brand .hp-hiw-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
align-items: start;
}
body.homepage-black-white.hp-brand .hp-hiw-step {
position: relative;
text-align: center;
padding: 0 6px;
}
/* The step illustrations. They carry the section now, so they are given real
size rather than sitting as small marks — roughly 200px on a desktop row. */
/* Constrained by HEIGHT, not width. The four crops have different aspect
ratios, so a width constraint gave each a different height (158-181px) and
the titles below them fell out of line across the row. */
body.homepage-black-white.hp-brand .hp-hiw-art {
display: block;
height: 168px;
width: auto;
max-width: 100%;
margin: 0 auto 14px;
}
/* Step number sits inline before the title rather than on its own line above
it — that removes a whole stacked row from each block, which is most of why
this section ran taller than the reference. */
body.homepage-black-white.hp-brand .hp-hiw-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 5px;
background: rgba(255, 255, 255, .14);
color: #ffffff;
font-size: .68rem;
font-weight: 700;
margin-right: 9px;
vertical-align: 2px;
}
body.homepage-black-white.hp-brand .hp-hiw-step-title {
color: #ffffff;
font-size: 1rem;
font-weight: 800;
letter-spacing: -.01em;
line-height: 1.3;
margin: 0 0 7px;
}
body.homepage-black-white.hp-brand .hp-hiw-step-desc {
color: rgba(255, 255, 255, .70);
font-size: .8rem;
line-height: 1.6;
margin: 0;
max-width: none;
}
/* ============================================================================
INTERACTIVE DEMO — the laptop, standalone and click-driven
========================================================================== */
body.homepage-black-white.hp-brand .hp-demo {
background: #ffffff;
padding: 80px 0;
scroll-margin-top: 100px;
}
/* Two columns: the laptop on the left, the explanation on the right. The
laptop gets the wider share because its interface is the point. */
body.homepage-black-white.hp-brand .hp-demo-row {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 3rem;
align-items: center;
}
body.homepage-black-white.hp-brand .hp-demo-copy {
text-align: center;
}
/* Two copy variants; only one is ever visible. See the ≤767px block, where the
laptop is hidden and these swap over. */
body.homepage-black-white.hp-brand .hp-demo-mobile {
display: none;
}
body.homepage-black-white.hp-brand .hp-demo-title {
color: var(--hb-ink);
font-size: 1.75rem;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.2;
margin: 0 0 12px;
}
body.homepage-black-white.hp-brand .hp-demo-sub {
color: var(--hb-g-500);
font-size: .9rem;
line-height: 1.6;
margin: 0 0 1.3rem;
max-width: none;
}
/* Detail points under the heading */
body.homepage-black-white.hp-brand .hp-demo-points {
list-style: none;
margin: 0 0 1.5rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
body.homepage-black-white.hp-brand .hp-demo-point {
padding: 13px 0;
}
body.homepage-black-white.hp-brand .hp-demo-point + .hp-demo-point {
border-top: 1px solid var(--hb-g-200);
}
body.homepage-black-white.hp-brand .hp-demo-point-body {
display: block;
}
body.homepage-black-white.hp-brand .hp-demo-point-title {
display: block;
color: var(--hb-ink);
font-size: .92rem;
font-weight: 700;
margin-bottom: 3px;
}
body.homepage-black-white.hp-brand .hp-demo-point-desc {
display: block;
color: var(--hb-g-500);
font-size: .82rem;
line-height: 1.55;
}
body.homepage-black-white.hp-brand .hp-demo-cta {
display: inline-block;
background: var(--hb-ink);
color: #ffffff;
border-radius: var(--hb-r-pill);
padding: .78rem 2rem;
font-size: .9rem;
font-weight: 600;
text-decoration: none;
transition: var(--hb-ease);
}
body.homepage-black-white.hp-brand .hp-demo-cta:hover {
background: var(--hb-g-900);
color: #ffffff;
transform: translateY(-2px);
box-shadow: var(--hb-sh-on-dark);
}
/* The sidebar items that actually switch screens read as clickable. */
body.homepage-black-white.hp-brand .mk-nav-item--live {
cursor: pointer;
}
body.homepage-black-white.hp-brand .mk-nav-item--live:hover {
background: rgba(255, 255, 255, .10);
}
body.homepage-black-white.hp-brand .mk-nav-item--live:focus-visible {
outline: 2px solid #ffffff;
outline-offset: -2px;
}
/* ============================================================================
FEATURE STRIP — an editorial index, not a card grid.
This began as nine rounded cards with icon tiles, then became a ruled grid of
nine cells. Both were mostly empty: each item is a name and one line, and the
section ran 1055px tall to hold ~9 lines of copy. Worse, a fully ruled grid
reads as a table directly beneath a subtitle promising "without the
spreadsheets".
So the boxes are gone. Each item now hangs under a single hairline rule in a
tight three-column index — the way a contents page is set. Same information,
35% of the height removed, and the treatment matches the drafting language
the hero already uses.
========================================================================== */
body.homepage-black-white.hp-brand .feat-strip {
background: var(--hb-ink);
padding: 64px 0;
}
body.homepage-black-white.hp-brand .feat-strip-head {
text-align: center;
/* Tighter than it was: the art below carries its own black margin, so the
old 2.4rem stacked on top of that and left a visible hole. */
margin-bottom: 1.2rem;
}
/* The illustration is generated ON black rather than cut out - it has no alpha
channel - so it only sits flush because this section's ground is the same
#000. If this section ever stops being black, the art will show as a
rectangle and needs regenerating, not restyling. */
body.homepage-black-white.hp-brand .feat-strip-body {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: 3rem;
/* The nine-item list runs much taller than a 3:2 image, so the art is
centred against it rather than pinned to the top, where it would leave a
long empty column underneath. */
align-items: center;
}
body.homepage-black-white.hp-brand .feat-strip-art {
display: block;
width: 100%;
height: auto;
margin: 0;
}
/* text-wrap: balance stops "tenancy" orphaning onto a line of its own */
body.homepage-black-white.hp-brand .feat-strip-head h2 {
color: #ffffff;
font-size: 1.9rem;
font-weight: 800;
letter-spacing: -.025em;
line-height: 1.18;
margin: 0 auto 12px;
max-width: 30ch;
text-wrap: balance;
}
body.homepage-black-white.hp-brand .feat-strip-head p {
color: rgba(255, 255, 255, .58);
font-size: .92rem;
line-height: 1.6;
max-width: 52ch;
margin: 0 auto;
text-wrap: balance;
}
/* A ruled index rather than a grid of cards. Two columns of centred blocks sat
awkwardly beside the illustration - short centred text either side of a tall
picture reads as three unrelated things. As a single ruled list, name left and
description right, it reads as one column of content against the image, and
its height lands within ~20px of the art so the pair balances.
It also matches the RRA before/after table further down the page, which uses
the same label-plus-detail row. */
body.homepage-black-white.hp-brand .feat-strip-grid {
display: block;
background: none;
border: none;
border-top: 1px solid rgba(255, 255, 255, .14);
border-radius: 0;
overflow: visible;
/* Inset from the container edge so the index does not sit hard against it.
Applied to the grid rather than the rows so the hairlines start where the
text starts - indenting the text alone would leave them overhanging. The
description column keeps ~400px after this, and its longest line is
~333px, so the nine rows stay single-line and the column stays height-
matched to the 411px artwork beside it. */
padding-left: 3rem;
}
body.homepage-black-white.hp-brand .feat-strip-card {
display: grid;
/* 9.75rem holds the longest names - "Market intelligence" and "Compliance
tracking", both 19 characters - on one line. At 8.5rem they wrapped and
left two rows taller than the other seven. */
grid-template-columns: minmax(0, 9.75rem) minmax(0, 1fr);
gap: 0 1.25rem;
align-items: baseline;
background: none;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, .14);
border-radius: 0;
box-shadow: none;
padding: 12px 0;
text-align: left;
transition: border-color .2s ease;
}
body.homepage-black-white.hp-brand .feat-strip-card:hover {
background: none;
border-color: rgba(255, 255, 255, .45);
box-shadow: none;
transform: none;
}
body.homepage-black-white.hp-brand .feat-strip-card h3 {
color: #ffffff;
font-size: .88rem;
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.45;
margin: 0;
padding-bottom: 0;
}
body.homepage-black-white.hp-brand .feat-strip-card h3::after {
display: none;
}
body.homepage-black-white.hp-brand .feat-strip-card p {
color: rgba(255, 255, 255, .5);
font-size: .8rem;
line-height: 1.45;
margin: 0;
max-width: none;
transition: color .2s ease;
}
body.homepage-black-white.hp-brand .feat-strip-card:hover p {
color: rgba(255, 255, 255, .72);
}
body.homepage-black-white.hp-brand .feat-strip-foot {
text-align: center;
margin-top: 2.6rem;
}
body.homepage-black-white.hp-brand .feat-strip-link {
display: inline-flex;
align-items: center;
gap: 9px;
color: #ffffff;
font-size: .9rem;
font-weight: 600;
border-bottom: 1px solid rgba(255, 255, 255, .3);
padding-bottom: 4px;
transition: border-color .2s ease, gap .2s ease;
}
body.homepage-black-white.hp-brand .feat-strip-link:hover {
color: #ffffff;
border-bottom-color: #ffffff;
gap: 14px;
transform: none;
}
body.homepage-black-white.hp-brand .feat-strip-link svg {
width: 16px;
height: 16px;
stroke: currentColor;
}
/* The artwork stays beside the list on every laptop. It is only dropped on
phones, at 800px - never stacked underneath, which put a 560x480 block below
a nine-row list and read as a poster stapled to the section.
Note a laptop can land well below its screen's pixel width: a 1366px panel at
125% display scaling reports ~1093 CSS px, so a 1100px cutoff catches real
laptops. Hence 800. Between 800 and 1100 the row is genuinely tight and the
descriptions wrap to two lines; that is the accepted cost of keeping the
pair together. */
@media (max-width: 1100px) {
body.homepage-black-white.hp-brand .feat-strip-body {
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 2rem;
}
body.homepage-black-white.hp-brand .feat-strip-grid {
padding-left: 1.5rem;
}
}
/* Phones: drop the art and give the list the full width. It is decorative
(alt="") so nothing is lost to a reader who cannot see it. */
@media (max-width: 800px) {
body.homepage-black-white.hp-brand .feat-strip-art {
display: none;
}
body.homepage-black-white.hp-brand .feat-strip-body {
grid-template-columns: 1fr;
gap: 0;
}
/* Full width now, so the name column can afford to be wider and the list
no longer needs to sit away from art that is not there. */
body.homepage-black-white.hp-brand .feat-strip-card {
grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
}
body.homepage-black-white.hp-brand .feat-strip-grid {
padding-left: 0;
}
}
@media (max-width: 600px) {
body.homepage-black-white.hp-brand .feat-strip {
padding: 48px 0;
}
/* Too narrow for two columns in a row - name above description instead. */
body.homepage-black-white.hp-brand .feat-strip-card {
grid-template-columns: 1fr;
gap: 3px;
padding: 11px 0;
}
body.homepage-black-white.hp-brand .feat-strip-head h2 {
font-size: 1.55rem;
}
}
/* ============================================================================
CLOSING CTA
The source's final-CTA pattern: a rounded slab floating on the page ground.
========================================================================== */
/* Matches the FAQ above it. The black slab inside gives the section its own
edge, so the two sharing a ground reads as one continuous close rather than
two blocks butted together. */
body.homepage-black-white.hp-brand .cta-section-bw {
background: #ffffff;
}
body.homepage-black-white.hp-brand .cta-card-bw {
background: var(--hb-ink);
border: none;
border-radius: var(--hb-r-xl);
box-shadow: var(--hb-sh-signature);
}
body.homepage-black-white.hp-brand .cta-headline-bw {
color: #ffffff;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.25;
}
/* .headline-accent is reused here, where marketing.css's black underline was
invisible on the black card. On dark, it goes white. */
body.homepage-black-white.hp-brand .cta-headline-bw .headline-accent {
color: #ffffff;
font-weight: 800;
}
/* marketing.css draws a rule under the emphasised half of the CTA headline —
removed at the owner's request, as on the hero headline. */
body.homepage-black-white.hp-brand .cta-headline-bw .headline-accent::after {
display: none;
}
body.homepage-black-white.hp-brand .cta-subtext {
color: rgba(255, 255, 255, .82);
line-height: 1.7;
}
/* ---------------------------------------------------------------------------
Closing CTA, scaled down.
marketing.css sizes this slab for a different page: 120px section padding, a
64/120px card and a headline running to 48px - half again the 32px the rest
of the homepage uses for a section head, which made it read as a louder
moment than anything above it. These bring it back onto the page's own scale.
The trust-signal row ("No credit card required / 14-day free trial / Cancel
anytime") was removed from the markup, so the button row no longer needs a
bottom margin to sit against.
--------------------------------------------------------------------------- */
/* Top padding stacks on .hp-faq's 64px bottom padding, so marketing.css's
120px opened a 184px void between the last FAQ row and the card. Zero here
leaves the 64px the FAQ already contributes, which is the page's own band
rhythm. Bottom stays generous because the footer follows. */
body.homepage-black-white.hp-brand .cta-section-bw {
padding: 0 0 72px;
}
/* marketing.css floats two blurred black circles behind this section
(.cta-glow-1 at 400px top-left, .cta-glow-2 at 300px bottom-right, both
blur(80px)), which washed a soft grey gradient across the white ground on
either side of the card. The public pages are flat B&W, so they go. The
sibling .cta-grid-pattern is already background-image: none. */
body.homepage-black-white.hp-brand .cta-bg-elements {
display: none;
}
/* The slab spanned the full 1152px container, which made a short centred
message sit in a very wide box. Narrowed to 860px so the card reads as an
object on the page rather than another full-width band. Its inner .cta-main
is capped at 700px, so 860 minus the 72px side padding still clears it. */
body.homepage-black-white.hp-brand .cta-card-bw {
max-width: 860px;
margin-left: auto;
margin-right: auto;
}
body.homepage-black-white.hp-brand .cta-card-bw.cta-centered {
padding: 44px 72px;
}
body.homepage-black-white.hp-brand .cta-headline-bw {
font-size: clamp(26px, 2.8vw, 34px);
margin-bottom: 12px;
}
body.homepage-black-white.hp-brand .cta-subtext {
font-size: 15px;
margin-bottom: 26px;
}
body.homepage-black-white.hp-brand .cta-actions-bw {
margin-bottom: 0;
}
/* marketing.css leaves this glow ring at the card's original 32px radius, but
the card itself is --hb-r-xl (20px) here, so the ring pulled away at the
corners. */
body.homepage-black-white.hp-brand .cta-card-bw::after {
border-radius: var(--hb-r-xl);
}
/* The headline carries a hard after "Your". That is a deliberate two-line
break on a wide card, but once the card narrows the first half wraps on its
own and the turns it into three lines with "Your" orphaned. marketing.css
drops the at 768px; this brings that forward to where it actually starts
misbehaving. */
@media (max-width: 900px) {
body.homepage-black-white.hp-brand .cta-headline-bw br {
display: none;
}
}
@media (max-width: 768px) {
/* marketing.css narrows the card to 40px/24px here, but .cta-card-bw.cta-centered
above is (0,4,1) against its (0,1,0), so the desktop 72px side padding was
winning at every width and squeezing the copy on phones. */
body.homepage-black-white.hp-brand .cta-card-bw.cta-centered {
padding: 36px 22px;
}
body.homepage-black-white.hp-brand .cta-subtext {
font-size: 14.5px;
margin-bottom: 22px;
}
}
/* Inverted pill primary on the dark slab — the source's final-CTA button */
body.homepage-black-white.hp-brand .cta-btn-primary-bw {
background: #ffffff;
border: none;
color: var(--hb-ink);
border-radius: var(--hb-r-pill);
font-weight: 600;
box-shadow: var(--hb-sh-on-dark);
transition: var(--hb-ease);
}
body.homepage-black-white.hp-brand .cta-btn-primary-bw span,
body.homepage-black-white.hp-brand .cta-btn-primary-bw svg {
color: var(--hb-ink);
stroke: var(--hb-ink);
}
body.homepage-black-white.hp-brand .cta-btn-primary-bw:hover {
background: #ffffff;
color: var(--hb-ink);
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(0, 0, 0, .38);
}
body.homepage-black-white.hp-brand .cta-btn-secondary-bw {
background: transparent;
border: 2px solid rgba(255, 255, 255, .45);
color: #ffffff;
border-radius: 12px;
font-weight: 500;
transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
body.homepage-black-white.hp-brand .cta-btn-secondary-bw span {
color: #ffffff;
}
body.homepage-black-white.hp-brand .cta-btn-secondary-bw:hover {
background: rgba(255, 255, 255, .12);
border-color: #ffffff;
color: #ffffff;
transform: translateY(-2px);
}
body.homepage-black-white.hp-brand .cta-trust-signals .trust-item {
color: rgba(255, 255, 255, .6);
font-size: .84rem;
}
/* ============================================================================
MOTION
========================================================================== */
@media (prefers-reduced-motion: reduce) {
body.homepage-black-white.hp-brand .btn-hero-primary,
body.homepage-black-white.hp-brand .btn-hero-secondary,
body.homepage-black-white.hp-brand .feature-card,
body.homepage-black-white.hp-brand .feat-strip-card,
body.homepage-black-white.hp-brand .cta-btn-primary-bw,
body.homepage-black-white.hp-brand .cta-btn-secondary-bw {
transition: none;
}
body.homepage-black-white.hp-brand .btn-hero-primary:hover,
body.homepage-black-white.hp-brand .btn-hero-secondary:hover,
body.homepage-black-white.hp-brand .feature-card:hover,
body.homepage-black-white.hp-brand .feat-strip-card:hover,
body.homepage-black-white.hp-brand .cta-btn-primary-bw:hover,
body.homepage-black-white.hp-brand .cta-btn-secondary-bw:hover {
transform: none;
}
}
/* ============================================================================
FOCUS
========================================================================== */
body.homepage-black-white.hp-brand a:focus-visible,
body.homepage-black-white.hp-brand button:focus-visible {
outline: 2px solid var(--hb-ink);
outline-offset: 3px;
}
body.homepage-black-white.hp-brand .hiw-step-dark a:focus-visible,
body.homepage-black-white.hp-brand .cta-card-bw a:focus-visible,
body.homepage-black-white.hp-brand .cta-card-bw button:focus-visible {
outline-color: #ffffff;
}
/* ============================================================================
RESPONSIVE — the source collapses card padding through the same two steps
========================================================================== */
@media (max-width: 991px) {
body.homepage-black-white.hp-brand .feature-card,
body.homepage-black-white.hp-brand .feat-strip-card {
padding: 22px 20px;
box-shadow: var(--hb-sh-card-rest-mobile);
}
}
@media (max-width: 767px) {
body.homepage-black-white.hp-brand .feature-card,
body.homepage-black-white.hp-brand .feat-strip-card {
padding: 18px 16px;
}
body.homepage-black-white.hp-brand .hiw-eyebrow,
body.homepage-black-white.hp-brand .cta-eyebrow {
font-size: .65rem;
letter-spacing: 1.5px;
}
}
/* ============================================================================
── SECTION ARCHITECTURE PORTED FROM THE ADULT LANDING PAGE ──
Everything below reproduces that page's section composition and component
shapes in black and white. Section rhythm follows its 40 / 64 / 80px ladder.
========================================================================== */
/* ---------------------------------------------------------------------------
HERO — proof trio + assurance line
--------------------------------------------------------------------------- */
body.homepage-black-white.hp-brand .hp-hero-trust {
font-size: .85rem;
font-weight: 700;
letter-spacing: .02em;
color: var(--hb-ink);
margin: 0 0 1.1rem;
}
body.homepage-black-white.hp-brand .hp-hero-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
/* Bare text beside the button — no pill, no border, as in the source */
body.homepage-black-white.hp-brand .hp-hero-assurance svg {
width: 18px;
height: 18px;
flex: none;
}
body.homepage-black-white.hp-brand .hp-hero-assurance {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .95rem;
font-weight: 700;
color: var(--hb-ink);
white-space: nowrap;
}
/* ---------------------------------------------------------------------------
CAPABILITY STRIP — moved to frontend/css/logo-strip.css
The marquee is now shared with the features page, so its rules live in their
own file and its markup in components/logo_strip.html. index.html links both.
Nothing about the strip should be re-added here.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
CONTEXT / FACTS SECTION
--------------------------------------------------------------------------- */
body.homepage-black-white.hp-brand .hp-facts {
background: #ffffff;
padding: 64px 0;
}
body.homepage-black-white.hp-brand .hp-facts-title {
color: var(--hb-ink);
font-size: 2rem;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.25;
margin: 0 0 16px;
}
body.homepage-black-white.hp-brand .hp-facts-sub {
color: var(--hb-g-500);
font-size: .92rem;
line-height: 1.7;
margin: 0 0 14px;
}
body.homepage-black-white.hp-brand .hp-facts-sub strong {
color: var(--hb-ink);
}
body.homepage-black-white.hp-brand .hp-facts-badge {
display: flex;
align-items: flex-start;
gap: 10px;
background: #ffffff;
border: 1px solid var(--hb-g-200);
border-radius: var(--hb-r-md);
padding: 14px 18px;
margin-top: 24px;
max-width: 460px;
font-size: .8rem;
line-height: 1.55;
color: var(--hb-g-500);
}
body.homepage-black-white.hp-brand .hp-facts-badge strong {
color: var(--hb-ink);
}
/* ---------------------------------------------------------------------------
RRA 2025 BEFORE / AFTER
This replaced three stacked cards of legal prose - the densest, least
scannable thing on the page. The same claims read far faster as old regime
against new, so it is a three-column grid (topic / what it was / what it is)
with the abolished side struck through and greyed and the current side in
full-strength ink. No claim was added or changed in the rewrite.
--------------------------------------------------------------------------- */
body.homepage-black-white.hp-brand .hp-facts-head {
text-align: center;
max-width: 660px;
margin: 0 auto 40px;
}
body.homepage-black-white.hp-brand .hp-rra {
max-width: 940px;
margin: 0 auto;
}
body.homepage-black-white.hp-brand .hp-rra-head,
body.homepage-black-white.hp-brand .hp-rra-row {
display: grid;
grid-template-columns: minmax(0, 150px) minmax(0, 1fr) minmax(0, 1.3fr);
gap: 0 32px;
align-items: baseline;
}
body.homepage-black-white.hp-brand .hp-rra-head {
padding: 0 0 10px;
border-bottom: 1px solid var(--hb-g-300);
}
body.homepage-black-white.hp-brand .hp-rra-head-old,
body.homepage-black-white.hp-brand .hp-rra-head-new {
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.4px;
color: var(--hb-g-400);
}
body.homepage-black-white.hp-brand .hp-rra-head-new {
color: var(--hb-ink);
}
body.homepage-black-white.hp-brand .hp-rra-row {
padding: 20px 0;
border-bottom: 1px solid var(--hb-g-200);
}
body.homepage-black-white.hp-brand .hp-rra-topic {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--hb-g-400);
}
body.homepage-black-white.hp-brand .hp-rra-old {
color: var(--hb-g-400);
font-size: .92rem;
line-height: 1.55;
}
/* The rule is drawn heavier than the type it crosses - a hairline strike over
already-grey text is easy to miss at this size. */
body.homepage-black-white.hp-brand .hp-rra-strike {
text-decoration: line-through;
text-decoration-color: var(--hb-g-400);
text-decoration-thickness: 1.5px;
}
body.homepage-black-white.hp-brand .hp-rra-new {
color: var(--hb-ink);
font-size: .92rem;
line-height: 1.55;
font-weight: 500;
}
body.homepage-black-white.hp-brand .hp-facts-badge {
margin-left: auto;
margin-right: auto;
}
/* ---------------------------------------------------------------------------
WHO IT IS FOR — four audiences, editorial index treatment.
Uses the same hairline-and-type language as the features section rather than
cards, because the RRA fact cards sit directly above it and two card grids
back to back would read as one undifferentiated block.
Sits on light grey; the FAQ below moves to white so the two do not merge
into a single grey region.
--------------------------------------------------------------------------- */
body.homepage-black-white.hp-brand .hp-who {
background: var(--hb-ink);
padding: 64px 0;
}
/* Street band closing the section. Container-width, not full-bleed: the
buildings are drawn on the persona column centres, so the image has to track
the grid's width exactly. The artwork carries its own black ground, so it
must sit on --hb-ink and nothing else. */
body.homepage-black-white.hp-brand .hp-who-band {
margin: 0 0 6px;
line-height: 0;
}
body.homepage-black-white.hp-brand .hp-who-band img {
display: block;
width: 100%;
height: auto;
}
body.homepage-black-white.hp-brand .hp-who-head {
text-align: center;
margin-bottom: 2.4rem;
}
body.homepage-black-white.hp-brand .hp-who-title {
color: #ffffff;
font-size: 1.9rem;
font-weight: 800;
letter-spacing: -.025em;
line-height: 1.18;
margin: 0 auto 12px;
/* No max-width: the heading needs ~690px at this size and the container
gives it 1152px, so it sits on one line and only wraps once the viewport
is genuinely too narrow. */
max-width: none;
text-wrap: balance;
}
body.homepage-black-white.hp-brand .hp-who-sub {
color: rgba(255, 255, 255, .58);
font-size: .92rem;
line-height: 1.6;
max-width: 56ch;
margin: 0 auto;
text-wrap: balance;
}
body.homepage-black-white.hp-brand .hp-who-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0 2.4rem;
}
body.homepage-black-white.hp-brand .hp-who-item {
border-top: 1px solid rgba(255, 255, 255, .14);
padding: 16px 0 4px;
text-align: center;
transition: border-color .2s ease;
}
body.homepage-black-white.hp-brand .hp-who-item:hover {
border-color: rgba(255, 255, 255, .45);
}
body.homepage-black-white.hp-brand .hp-who-label {
display: block;
font-size: .66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .14em;
color: rgba(255, 255, 255, .42);
margin-bottom: 7px;
}
body.homepage-black-white.hp-brand .hp-who-item-title {
color: #ffffff;
font-size: .98rem;
font-weight: 700;
letter-spacing: -.01em;
margin: 0 0 6px;
}
body.homepage-black-white.hp-brand .hp-who-desc {
color: rgba(255, 255, 255, .52);
font-size: .8rem;
line-height: 1.55;
margin: 0;
max-width: none;
}
@media (max-width: 900px) {
body.homepage-black-white.hp-brand .hp-who-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0 2rem;
}
}
@media (max-width: 560px) {
body.homepage-black-white.hp-brand .hp-who {
padding: 48px 0;
}
body.homepage-black-white.hp-brand .hp-who-grid {
grid-template-columns: 1fr;
}
/* Below 560px the band renders ~126px tall, which is too small for the
buildings to read. The grid is single-column here anyway, so the
column alignment the band exists to echo has already gone. */
body.homepage-black-white.hp-brand .hp-who-band {
display: none;
}
body.homepage-black-white.hp-brand .hp-who-title {
font-size: 1.55rem;
}
}
/* ---------------------------------------------------------------------------
FAQ — native , so it works with JavaScript disabled
--------------------------------------------------------------------------- */
body.homepage-black-white.hp-brand .hp-faq {
background: #ffffff;
padding: 64px 0;
}
body.homepage-black-white.hp-brand .hp-faq-head {
text-align: center;
margin-bottom: 2rem;
}
body.homepage-black-white.hp-brand .hp-faq-title {
color: var(--hb-ink);
font-size: 2rem;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.25;
margin: 0 0 10px;
}
body.homepage-black-white.hp-brand .hp-faq-sub {
color: var(--hb-g-500);
font-size: 1.05rem;
max-width: 520px;
margin: 0 auto;
}
body.homepage-black-white.hp-brand .hp-faq-list {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 860px;
margin: 0 auto;
}
body.homepage-black-white.hp-brand .hp-faq-item {
background: #ffffff;
border: 1px solid var(--hb-g-200);
border-radius: 16px;
box-shadow: 0 2px 16px rgba(0, 0, 0, .04);
overflow: hidden;
transition: box-shadow .25s ease;
}
body.homepage-black-white.hp-brand .hp-faq-item:hover {
box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
}
body.homepage-black-white.hp-brand .hp-faq-q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
padding: 20px 28px;
cursor: pointer;
list-style: none;
font-size: 1.05rem;
font-weight: 700;
color: var(--hb-ink);
line-height: 1.4;
}
body.homepage-black-white.hp-brand .hp-faq-q::-webkit-details-marker {
display: none;
}
body.homepage-black-white.hp-brand .hp-faq-q:focus-visible {
outline: 2px solid var(--hb-ink);
outline-offset: -2px;
}
body.homepage-black-white.hp-brand .hp-faq-ico {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
min-width: 28px;
border-radius: 50%;
background: var(--hb-g-100);
color: var(--hb-ink);
transition: transform .3s ease, background .3s ease;
}
body.homepage-black-white.hp-brand .hp-faq-ico svg {
width: 15px;
height: 15px;
}
body.homepage-black-white.hp-brand .hp-faq-item[open] .hp-faq-ico {
transform: rotate(180deg);
background: var(--hb-ink);
color: #ffffff;
}
body.homepage-black-white.hp-brand .hp-faq-a {
padding: 0 28px 22px;
}
body.homepage-black-white.hp-brand .hp-faq-a p {
margin: 0;
color: var(--hb-g-500);
font-size: .92rem;
line-height: 1.75;
max-width: none;
}
body.homepage-black-white.hp-brand .hp-faq-a a {
color: var(--hb-ink);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---------------------------------------------------------------------------
RESPONSIVE — the source's two collapse steps
--------------------------------------------------------------------------- */
@media (max-width: 991px) {
/* The drawing is 2.36:1 but the hero turns portrait on a phone (0.58:1), so
`cover` scaled it to the height and showed a ~25% middle slice blown up
4x — brickwork fragments rather than a street. Show the whole drawing at
full width as a band along the bottom instead, and fade it upward. */
/* Sits higher up behind the copy, and the hero's bottom padding comes
down so the drawing is not trailed by a band of empty white. */
body.homepage-black-white.hp-brand .hero-centered {
padding-bottom: 18px;
}
body.homepage-black-white.hp-brand .hero-bg-pattern {
background-size: 116% auto;
background-position: 50% 54%;
opacity: .26;
-webkit-mask-image: linear-gradient(to top, #000 0%, #000 42%, transparent 92%);
mask-image: linear-gradient(to top, #000 0%, #000 42%, transparent 92%);
}
body.homepage-black-white.hp-brand .hp-facts,
body.homepage-black-white.hp-brand .hp-faq,
body.homepage-black-white.hp-brand .hp-hiw,
body.homepage-black-white.hp-brand .hp-demo {
padding: 48px 0;
}
/* Four across is too tight below this — two up from here down. */
body.homepage-black-white.hp-brand .hp-hiw-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2.6rem 1.6rem;
}
body.homepage-black-white.hp-brand .hp-hiw-head {
margin-bottom: 2.2rem;
}
/* RESTORED: the rule stacking this row was lost in an earlier cleanup, so
the two columns stayed side by side on a phone and squeezed the laptop
into a ~186px sliver. */
body.homepage-black-white.hp-brand .hp-demo-row {
grid-template-columns: 1fr;
gap: 2.4rem;
}
/* Stacked: topic, then the struck-out old rule, then the new one. The
"Before / Now" header only spans two columns, so it is dropped here and
each side labels itself inline instead. */
body.homepage-black-white.hp-brand .hp-rra-head {
display: none;
}
body.homepage-black-white.hp-brand .hp-rra-row {
grid-template-columns: 1fr;
gap: 6px;
padding: 18px 0;
}
body.homepage-black-white.hp-brand .hp-rra-old::before {
content: 'Before: ';
font-weight: 700;
}
body.homepage-black-white.hp-brand .hp-rra-new::before {
content: 'Now: ';
font-weight: 700;
}
body.homepage-black-white.hp-brand .hp-facts-head {
margin-bottom: 28px;
}
body.homepage-black-white.hp-brand .hp-facts-badge {
max-width: 100%;
justify-content: center;
text-align: center;
}
/* marketing.css gives this card 120px of horizontal padding, which is fine
on a wide screen but leaves a ~118px content box on a phone — the
headline then overflowed by ~80px and was silently clipped by the card's
own overflow:hidden, so it never showed up as page overflow. */
body.homepage-black-white.hp-brand .cta-card-bw {
padding: 56px 36px;
}
body.homepage-black-white.hp-brand .hp-demo-copy {
max-width: 620px;
margin: 0 auto;
}
body.homepage-black-white.hp-brand .hp-facts-title,
body.homepage-black-white.hp-brand .hp-faq-title,
body.homepage-black-white.hp-brand .hp-hiw-title,
body.homepage-black-white.hp-brand .hp-demo-title {
font-size: 1.55rem;
}
/* Stay two up on a phone rather than stacking to one — a single column
made this section roughly twice as tall as it needs to be. The art and
type scale down instead. */
body.homepage-black-white.hp-brand .hp-hiw-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem 1.1rem;
max-width: none;
}
body.homepage-black-white.hp-brand .hp-hiw-art {
height: 118px;
margin-bottom: 10px;
}
body.homepage-black-white.hp-brand .hp-hiw-step {
padding: 0;
}
body.homepage-black-white.hp-brand .hp-hiw-step-title {
font-size: .92rem;
line-height: 1.25;
margin-bottom: 5px;
}
body.homepage-black-white.hp-brand .hp-hiw-num {
width: 18px;
height: 18px;
font-size: .62rem;
margin-right: 7px;
vertical-align: 1px;
}
body.homepage-black-white.hp-brand .hp-hiw-step-desc {
font-size: .76rem;
line-height: 1.5;
}
/* The laptop mock is drawn at fixed pixel sizes and cannot usefully
shrink, so it is dropped below 992px rather than shown as a sideways-
scrolling sliver — 992px is where the two-column layout that gives it
room ends. The copy swaps to a version that does not tell the reader to
click a sidebar that is not there. */
body.homepage-black-white.hp-brand .hp-demo-stage {
display: none;
}
body.homepage-black-white.hp-brand .hp-demo-desktop {
display: none;
}
body.homepage-black-white.hp-brand .hp-demo-mobile {
display: block;
}
body.homepage-black-white.hp-brand .hp-demo-row {
gap: 0;
}
body.homepage-black-white.hp-brand .hp-hero-cta {
flex-direction: column;
align-items: stretch;
text-align: center;
}
body.homepage-black-white.hp-brand .hp-hero-assurance {
justify-content: center;
}
body.homepage-black-white.hp-brand .hp-faq-q {
padding: 16px 20px;
font-size: .95rem;
}
body.homepage-black-white.hp-brand .hp-faq-a {
padding: 0 20px 18px;
}
}
/* ============================================================================
SMALL-PHONE OVERRIDES — deliberately the last block in this file.
The media queries here are interleaved by section rather than ordered by
width, so a ≤600px rule written earlier in the file loses to a ≤991px rule
written later at the same specificity. Anything that must win on a phone
belongs here, at the end.
========================================================================== */
@media (max-width: 600px) {
body.homepage-black-white.hp-brand .cta-card-bw {
padding: 44px 22px;
}
/* The headline carries a hard forcing "Ready to Transform Your" onto
one line, which is wider than a phone. Let it wrap naturally. */
body.homepage-black-white.hp-brand .cta-headline-bw br {
display: none;
}
/* Fluid rather than another breakpoint: "Property Management?" is a long
unbreakable pair, so the size has to track the viewport continuously or
it runs past the card on the narrowest phones. */
body.homepage-black-white.hp-brand .cta-headline-bw {
font-size: clamp(1.2rem, 6.2vw, 1.7rem);
}
body.homepage-black-white.hp-brand .cta-subtext {
font-size: .92rem;
}
/* The trust row stacks to three lines on a phone, which pads the card out
without adding much — the buttons already carry the message. */
body.homepage-black-white.hp-brand .cta-trust-signals {
display: none;
}
}
/* "Property Management?" is one 20-character word-pair that will not break, so
below ~400px the headline has to come down again or it runs past the card. */
@media (max-width: 400px) {
body.homepage-black-white.hp-brand .cta-card-bw {
padding: 38px 18px;
}
}