/* ============================================================================
   tools-brand.css — Tenancy Pilot free tools (/tools/ and the two calculators)
   ----------------------------------------------------------------------------
   Puts the three tool pages on the HOMEPAGE's design system so they read as the
   same brand as the page the visitor just came from.

   Those pages used to run site.css, which is almost entirely unscoped — a bare
   `a` in Tailwind blue, `.container` at 1280px, its own `.btn-primary`,
   `.feature-card`, `.gradient-orb` and `@keyframes pulse` — so it collides with
   marketing.css head-on and the two stacks can never be loaded together. The
   tool templates therefore DROP site.css + chrome.css entirely and load the
   homepage stack instead:

       marketing.css → footer.css → homepage-brand.css → shared.css → THIS FILE

   ⚠ NEVER LOAD THIS FILE ON A site.css PAGE, and never add site.css to a page
   that loads this one. The two stacks are mutually exclusive. This file assumes
   marketing.css's `*` reset and homepage-brand.css's --hb-* tokens are present
   and that NOTHING from site.css is.

   SCOPE: every rule below is scoped to

       body.homepage-black-white.hp-brand.tools-page

   which is (0,3,1) — the same class count as homepage-brand.css (0,3,1), so it
   wins on load order (it is linked last), and it outranks marketing.css
   (max (0,3,0)) outright. That buys three things:

     1. it overrides both of them without a single !important;
     2. it is structurally impossible for anything here to reach the homepage or
        /waitlist/ — they carry no .tools-page — so this file is purely additive;
     3. class names this file shares with site.css pages (.calc, .prose-ish
        helpers) can never collide, because those pages carry no .hp-brand.

   TOKENS: only --hb-* (homepage-brand.css) or literals. site.css's --ink,
   --neutral-300, --text-body, --radius-md, --live and --font-mono do not exist
   in this stack; a copy-pasted `--neutral-300` reference here would silently
   drop the whole declaration. Grep guard: every var() in this file starts --hb-.

   NO HUES. The old pages used a green #22c55e status dot and green bullet ticks;
   homepage-brand.css's rule is "no hues are introduced anywhere", so those are
   deleted rather than ported and their job is done with hairlines and grey.

   NO @keyframes (marketing.css, how-it-works.css and site.css each ship a
   `pulse` and the stack already has `fadeSlideUp`/`accentUnderline` — any name
   defined here could shadow one). NO url() either: the project runs
   CompressedManifestStaticFilesStorage, which hard-fails collectstatic on a
   referenced asset that does not exist.

   NAMING: new classes are prefixed .tp- (tool page). The five calculator names
   — .calc, .calc-field, .calc-prefix, .calc-opt, .calc-result, .calc-figure,
   .calc-note — are deliberately NOT renamed: .calc-figure (with its child
   span/strong/em) and .calc-note are written by innerHTML in the inline script
   on each calculator and never appear in template source, so renaming them
   would silently unstyle the results panel with nothing to grep for.

   WHAT IS REUSED RATHER THAN REDEFINED (no CSS here for any of it):
     .container                      the 1200px / 24px rail
     .hero-centered + .hero-bg-pattern + .hero-centered-container + .hero-copy
                                     the page head — and the ONLY component in
                                     the whole stack that clears the 88px fixed
                                     nav (130px top padding, 100px ≤768)
     .hero-main-headline/.headline-accent/.hero-subheadline   the page title
     .feature-card/-title/-desc      the one card recipe, used for tool cards
     .hp-faq*                        the native <details> FAQ accordion
     .cta-section-bw/.cta-card-bw/…  the closing CTA slab
     .hp-facts-badge                 the box under .tp-disclaimer
     a/button:focus-visible          homepage-brand.css:996
   ========================================================================== */


/* ============================================================================
   SHELL + VERTICAL RHYTHM
   ========================================================================== */

/* No TOP padding, on purpose: the first block on every tool page is
   .hero-centered, which already pays for the fixed nav. Anything with top
   padding here would double-count it. 64px bottom stacks correctly against
   .cta-section-bw's own 0 0 72px. */
body.homepage-black-white.hp-brand.tools-page .tp-section {
    padding: 0 0 64px;
}

/* Replaces the deleted inline style="max-width: 820px" on .container. */
body.homepage-black-white.hp-brand.tools-page .container.tp-narrow {
    max-width: 820px;
}

/* .hero-centered's height is driven by content (marketing.css:475 says so), so
   there is no min-height to unset — only the bottom rhythm needs tightening
   for a page head. */
body.homepage-black-white.hp-brand.tools-page .tp-hero {
    padding-bottom: 40px;
}

body.homepage-black-white.hp-brand.tools-page .tp-hero--tool {
    padding-bottom: 24px;
}

/* A calculator's title is a page label, not the homepage's statement, so it
   steps down from clamp(2.6rem, 4.3vw, 4rem). */
body.homepage-black-white.hp-brand.tools-page .tp-hero--tool .hero-main-headline {
    font-size: clamp(2rem, 3.4vw, 2.8rem);
}


/* ============================================================================
   BREADCRUMBS — .tp-crumbs (replaces site.css's .breadcrumbs)

   Sits inside .hero-copy above the eyebrow, centred with the hero. Derived from
   the .hp-rra-topic micro-label recipe. Poppins, not JetBrains Mono: hp-brand
   has no mono face anywhere, and the mono eyebrow is the one deliberate look
   change in this port.
   ========================================================================== */

body.homepage-black-white.hp-brand.tools-page .tp-crumbs {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--hb-g-400);
    margin-bottom: 20px;
}

/* Mandatory, not decorative: the homepage stack sets NO bare `a` colour at all,
   so an unstyled link here falls to UA blue and underlined. */
body.homepage-black-white.hp-brand.tools-page .tp-crumbs a {
    color: var(--hb-g-500);
    text-decoration: none;
    transition: color .2s ease;
}

body.homepage-black-white.hp-brand.tools-page .tp-crumbs a:hover {
    color: var(--hb-ink);
}

body.homepage-black-white.hp-brand.tools-page .tp-crumbs span[aria-hidden] {
    color: var(--hb-g-300);
    margin: 0 4px;
}


/* ============================================================================
   EYEBROW — .tp-eyebrow (replaces site.css's .eyebrow + its green .dot)

   The canonical .hp-hiw-pill recipe (.7rem / 700 / uppercase / 1.5px / 6px 16px
   / 50px) inverted for a light ground — homepage-brand.css only ships the
   on-dark version.
   ========================================================================== */

body.homepage-black-white.hp-brand.tools-page .tp-eyebrow {
    display: inline-block;
    background: var(--hb-g-100);
    color: var(--hb-ink);
    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;
}


/* ============================================================================
   TOOL GRID — /tools/

   The card BOX is .feature-card, reused verbatim (white, 1px --hb-g-200, 14px,
   24px padding, flat at rest, 2px lift + --hb-sh-card-hover on hover). Nothing
   below re-states any of that; .tp-tool only makes it a flex column and kills
   the link colour.
   ========================================================================== */

body.homepage-black-white.hp-brand.tools-page .tp-tool-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* The card is an <a> wrapping an <h2> and a <p>. Without these two
   declarations the entire card renders browser-blue and underlined. */
body.homepage-black-white.hp-brand.tools-page .tp-tool {
    display: flex;
    flex-direction: column;
    color: var(--hb-ink);
    text-decoration: none;
}

/* A pill, not bare text: "Coming soon" is the only signal that two of the four
   cards are not clickable, so it is informational and must meet AA. Reuses the
   .tp-eyebrow recipe, which is the brand's pill language. */
body.homepage-black-white.hp-brand.tools-page .tp-chip {
    align-self: flex-start;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--hb-ink);
    background: var(--hb-g-100);
    padding: 5px 12px;
    border-radius: var(--hb-r-pill);
    margin-bottom: 14px;
}

/* The old green tick bullets, re-cut as the brand's hairline list
   (the .hp-demo-point pattern). */
body.homepage-black-white.hp-brand.tools-page .tp-feats {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

body.homepage-black-white.hp-brand.tools-page .tp-feats li {
    border-top: 1px solid var(--hb-g-200);
    margin-top: 9px;
    padding-top: 9px;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--hb-g-500);
}

/* margin-top:auto bottom-aligns the CTA across unequal cards — the two
   "coming soon" cards carry no <ul>. Do not remove it. */
/* align-self is required: the card is flex-direction:column with the default
   stretch, so without it the border-bottom would rule across the whole card
   instead of sitting under the text. */
body.homepage-black-white.hp-brand.tools-page .tp-tool-cta {
    margin-top: auto;
    padding-top: 18px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--hb-ink);
    border-bottom: 1.5px solid var(--hb-ink);
    padding-bottom: 2px;
}

body.homepage-black-white.hp-brand.tools-page .tp-tool-cta span {
    transition: transform .2s ease;
}

body.homepage-black-white.hp-brand.tools-page a.tp-tool:hover .tp-tool-cta span {
    transform: translateX(4px);
}

/* The two non-clickable cards: dashed and recessed. */
body.homepage-black-white.hp-brand.tools-page .tp-tool--soon {
    background: var(--hb-g-50);
    border-style: dashed;
    box-shadow: none;
}

body.homepage-black-white.hp-brand.tools-page .tp-tool--soon .tp-chip {
    background: var(--hb-g-200);
    color: var(--hb-g-700);
}

body.homepage-black-white.hp-brand.tools-page .tp-tool--soon .tp-tool-cta {
    color: var(--hb-g-600);
    border-bottom-style: dashed;
    border-bottom-color: var(--hb-g-300);
}

/* Neutralises homepage-brand.css's .feature-card:hover lift on a card that is
   not a link — the old element-qualified a.tool-card:hover behaviour. (0,5,1)
   against its (0,4,1), so it holds regardless of load order. */
body.homepage-black-white.hp-brand.tools-page .tp-tool--soon:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--hb-g-200);
}


/* ============================================================================
   THE CALCULATOR WIDGET

   A white tool card holding the fields, and a black slab holding the result —
   the old design's idea, re-cut in the homepage's card recipe. NOTHING in the
   homepage stack styles a form control, and `input` is absent from
   homepage-brand.css's font-family list, so every field here is styled from
   zero or it renders as a raw UA control in the wrong typeface.

   Class names are the JS<->CSS contract (see the header). Do not rename:
     .calc-result   toggled via result.hidden by the inline script
     .calc-figure   written by innerHTML, with child <span>/<strong>/<em>
     .calc-note     written by innerHTML
   ========================================================================== */

/* The .feature-card recipe, hand-written — this is not a .feature-card and must
   not lift on hover. */
body.homepage-black-white.hp-brand.tools-page .calc {
    background: #ffffff;
    border: 1px solid var(--hb-g-200);
    border-radius: var(--hb-r-lg);
    padding: 28px;
    box-shadow: none;
    margin: 0 0 40px;
}

/* Labels: the .7rem / 700 / uppercase / 1.2px micro-label recipe shared with
   .hp-rra-topic, but at --hb-g-600 rather than the recipe's --hb-g-400. These
   are the labels on the only interactive control on the page: g-400 (#8c8c8c)
   is 3.36:1 on white and fails WCAG AA; g-600 (#555) is 7.46:1. */
body.homepage-black-white.hp-brand.tools-page .calc label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--hb-g-600);
    margin: 0 0 8px;
}

body.homepage-black-white.hp-brand.tools-page .calc label:not(:first-of-type) {
    margin-top: 22px;
}

/* "(optional)" inside a label — steps out of the uppercase tracking. */
body.homepage-black-white.hp-brand.tools-page .calc .calc-opt {
    font-weight: 500;
    text-transform: none;
    letter-spacing: .01em;
    color: var(--hb-g-400);
}

/* --- Fields ------------------------------------------------------------- */

body.homepage-black-white.hp-brand.tools-page .calc-field {
    position: relative;
}

body.homepage-black-white.hp-brand.tools-page .calc-field .calc-prefix {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    font-weight: 600;
    color: var(--hb-g-400);
    pointer-events: none;
}

/* `font: inherit` is mandatory — without it the field renders in the UA font
   next to Poppins labels. Deliberately NO `appearance: none`: that kills the
   native date picker in Safari. */
body.homepage-black-white.hp-brand.tools-page .calc input {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    padding: 14px 16px;
    border: 1.5px solid var(--hb-g-300);
    border-radius: var(--hb-r-md);
    background: #ffffff;
    color: var(--hb-ink);
    transition: border-color .18s ease, box-shadow .18s ease;
}

/* g-300 (#c9c9c9) is 1.66:1 on white — the worked example values were
   effectively invisible. g-500 (#6b6b6b) is 5.35:1. */
body.homepage-black-white.hp-brand.tools-page .calc input::placeholder {
    color: var(--hb-g-500);
    font-weight: 400;
    opacity: 1;
}

body.homepage-black-white.hp-brand.tools-page .calc input:hover:not(:focus) {
    border-color: var(--hb-g-400);
}

/* Spinners off. Scoped to type=number so the date control is untouched;
   `textfield` rather than `none` so Safari keeps its own field chrome. */
body.homepage-black-white.hp-brand.tools-page .calc input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

body.homepage-black-white.hp-brand.tools-page .calc input[type="number"]::-webkit-outer-spin-button,
body.homepage-black-white.hp-brand.tools-page .calc input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* A date input sizes to its content, so it lands ~6px shorter than the number
   fields without this. */
body.homepage-black-white.hp-brand.tools-page .calc input[type="date"] {
    min-height: 52px;
}

body.homepage-black-white.hp-brand.tools-page .calc input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .5;
    transition: opacity .18s ease;
}

body.homepage-black-white.hp-brand.tools-page .calc input[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* THE £-PREFIX TRAP (regression d69767a). `.calc input` above uses the padding
   SHORTHAND, which resets padding-left, so the typed value slides under the £.
   Two guards, both required: this is (0,5,2) against that rule's (0,4,2), AND
   it is written after it. Never move it above `.calc input`. */
body.homepage-black-white.hp-brand.tools-page .calc .calc-field input {
    padding-left: 34px;
}

/* The look on focus: ink border + a soft halo. */
body.homepage-black-white.hp-brand.tools-page .calc input:focus {
    border-color: var(--hb-ink);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .07);
    outline: none;
}

/* …and a real ring for the keyboard, matching homepage-brand.css:996.
   marketing.css's focus rules cover `a` and `button` only, never `input`. */
body.homepage-black-white.hp-brand.tools-page .calc input:focus-visible {
    outline: 2px solid var(--hb-ink);
    outline-offset: 3px;
}

/* --- The result slab ----------------------------------------------------- */

/* The .cta-card-bw slab recipe at --hb-r-xl. */
body.homepage-black-white.hp-brand.tools-page .calc-result {
    margin-top: 28px;
    background: var(--hb-ink);
    color: #ffffff;
    border-radius: var(--hb-r-xl);
    padding: 26px 28px;
    box-shadow: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 22px 32px;
}

/* NOT decoration. `display: grid` above beats the UA's [hidden]{display:none},
   and the script only ever toggles result.hidden — omit this one line and both
   calculators paint a large empty black box before any input is typed. */
body.homepage-black-white.hp-brand.tools-page .calc-result[hidden] {
    display: none;
}

body.homepage-black-white.hp-brand.tools-page .calc-figure {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* .45 white on #000 composites to #737373 = 4.43:1, just under AA at this
   size. .55 is 6.25:1 — and these spans are the only thing naming each
   figure ("Change", "Earliest the new rent can start"). */
body.homepage-black-white.hp-brand.tools-page .calc-figure span {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .55);
}

body.homepage-black-white.hp-brand.tools-page .calc-figure strong {
    font-size: clamp(1.7rem, 4.5vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
    color: #ffffff;
}

/* Kept scoped to .calc-figure: the deposit page's prose <em> formula must stay
   italic (see .tp-prose em). */
body.homepage-black-white.hp-brand.tools-page .calc-figure em {
    font-style: normal;
    font-size: .82rem;
    color: rgba(255, 255, 255, .62);
}

body.homepage-black-white.hp-brand.tools-page .calc-note {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .8rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .60);
}


/* ============================================================================
   LONG-FORM COPY — .tp-prose (replaces site.css's .prose)

   Renamed because .prose is live on four site.css pages (guide_detail,
   contact, privacy, editorial_standards) and must never be reachable from here.

   This is the largest block in the file for one reason: marketing.css:17 ships
   `* { margin: 0; padding: 0 }` and the homepage stack then defines NO bare p,
   h2, h3, ul, li, a or strong rule anywhere. Every one of these is load-bearing.
   ========================================================================== */

body.homepage-black-white.hp-brand.tools-page .tp-prose {
    font-size: 1rem;
    line-height: 1.75;
    font-weight: 400;
    color: var(--hb-g-500);
}

/* The section-head recipe at its ≤991 step: these are sub-heads inside a
   section, not section heads (.hp-faq-title carries the 2rem/800). */
body.homepage-black-white.hp-brand.tools-page .tp-prose h2 {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--hb-ink);
    margin: 44px 0 14px;
}

body.homepage-black-white.hp-brand.tools-page .tp-prose > h2:first-child {
    margin-top: 0;
}

body.homepage-black-white.hp-brand.tools-page .tp-prose h3 {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: var(--hb-ink);
    margin: 26px 0 8px;
}

body.homepage-black-white.hp-brand.tools-page .tp-prose p {
    margin: 0 0 16px;
}

/* padding-left is NOT optional: the `*` reset zeroes the UA's
   padding-inline-start: 40px but leaves list-style: disc, so the markers render
   outside the box and body{overflow-x:hidden} clips them away entirely. */
body.homepage-black-white.hp-brand.tools-page .tp-prose ul,
body.homepage-black-white.hp-brand.tools-page .tp-prose ol {
    margin: 0 0 18px;
    padding-left: 1.25rem;
}

body.homepage-black-white.hp-brand.tools-page .tp-prose li {
    margin-bottom: 8px;
}

body.homepage-black-white.hp-brand.tools-page .tp-prose strong {
    font-weight: 700;
    color: var(--hb-ink);
}

body.homepage-black-white.hp-brand.tools-page .tp-prose em {
    font-style: italic;
}

/* homepage-brand.css's own .hp-faq-a a pattern, with a grey underline that
   inks in on hover. Without a colour here the link falls to UA blue. */
body.homepage-black-white.hp-brand.tools-page .tp-prose a {
    color: var(--hb-ink);
    text-decoration: underline;
    text-decoration-color: var(--hb-g-300);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color .2s ease;
}

body.homepage-black-white.hp-brand.tools-page .tp-prose a:hover {
    text-decoration-color: var(--hb-ink);
}


/* ============================================================================
   DISCLAIMER — .hp-facts-badge.tp-disclaimer

   Reuses the .hp-facts-badge box and only re-purposes it from a centred 460px
   inset to a full-measure, left-aligned note. .hp-facts-badge is display:flex
   expecting a <span> child; display:block accommodates the <p>.

   At (0,4,1) these also beat homepage-brand.css:1217's ≤991 centring — media
   queries add no specificity, so the override holds at every width.
   ========================================================================== */

/* The FAQ question is a real <h3> on these pages (the homepage uses a bare
   <span>, but these two ARE FAQ landing pages and the pre-port versions had
   h3s — dropping them flattened the outline to h1→h2 and cost the FAQPage
   rich result its heading anchors). Strip the UA sizing so it still looks
   exactly like the homepage's accordion. */
body.homepage-black-white.hp-brand.tools-page .hp-faq-q h3 {
    font: inherit;
    color: inherit;
    margin: 0;
}

body.homepage-black-white.hp-brand.tools-page .tp-disclaimer {
    display: block;
    max-width: none;
    margin: 40px 0 0;
    text-align: left;
}

body.homepage-black-white.hp-brand.tools-page .tp-disclaimer p {
    margin: 0;
}

body.homepage-black-white.hp-brand.tools-page .tp-disclaimer a {
    color: var(--hb-ink);
    text-decoration: underline;
    text-decoration-color: var(--hb-g-300);
    text-underline-offset: 3px;
    transition: text-decoration-color .2s ease;
}

body.homepage-black-white.hp-brand.tools-page .tp-disclaimer a:hover {
    text-decoration-color: var(--hb-ink);
}


/* ============================================================================
   MOTION

   The last rule here is the important one. marketing.css gives the hero
   elements opacity:0 + `fadeSlideUp … forwards`, and the homepage stack ships
   NO reduced-motion guard for them — site.css had one, and site.css is gone.
   Without this, hero copy on a tool page stays permanently invisible for anyone
   with "reduce motion" on. Scoped to .tools-page, so the homepage keeps its
   animation exactly as it is.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    body.homepage-black-white.hp-brand.tools-page .tp-tool,
    body.homepage-black-white.hp-brand.tools-page .tp-tool-cta span,
    body.homepage-black-white.hp-brand.tools-page .calc input,
    body.homepage-black-white.hp-brand.tools-page .tp-crumbs a,
    body.homepage-black-white.hp-brand.tools-page .tp-prose a,
    body.homepage-black-white.hp-brand.tools-page .tp-disclaimer a {
        transition: none;
    }

    body.homepage-black-white.hp-brand.tools-page .tp-tool:hover {
        transform: none;
    }

    body.homepage-black-white.hp-brand.tools-page a.tp-tool:hover .tp-tool-cta span {
        transform: none;
    }

    body.homepage-black-white.hp-brand.tools-page .hero-main-headline,
    body.homepage-black-white.hp-brand.tools-page .hero-subheadline,
    body.homepage-black-white.hp-brand.tools-page .hero-cta-centered,
    body.homepage-black-white.hp-brand.tools-page .hero-trust-centered {
        opacity: 1;
        animation: none;
    }
}


/* ============================================================================
   RESPONSIVE — WIDEST FIRST, PHONE LAST, all at the end of the file.

   homepage-brand.css interleaves its media queries by section and documents the
   ordering trap that creates. This file sorts descending instead, so a narrower
   breakpoint always wins on order as well as intent.

   The load-bearing steps inherited from the system are 991 (section padding
   → 48px, titles → 1.55rem) and 600 (single column). .container drops to 16px
   side padding on its own at ≤480.
   ========================================================================== */

@media (max-width: 991px) {

    body.homepage-black-white.hp-brand.tools-page .tp-section {
        padding-bottom: 48px;
    }

    body.homepage-black-white.hp-brand.tools-page .tp-hero {
        padding-bottom: 28px;
    }

    /* Must be restated here. The ≤991 .tp-hero rule above is (0,3,1), the same
       as the .tp-hero--tool rule in the base block, and it comes later in the
       file — so without this the modifier silently dies below 991px and the
       calculator heads step from 24px UP to 28px as the screen gets smaller. */
    body.homepage-black-white.hp-brand.tools-page .tp-hero--tool {
        padding-bottom: 16px;
    }

    body.homepage-black-white.hp-brand.tools-page .calc {
        padding: 22px 20px;
    }

    body.homepage-black-white.hp-brand.tools-page .calc-result {
        padding: 22px 20px;
    }
}

@media (max-width: 767px) {

    body.homepage-black-white.hp-brand.tools-page .tp-tool-grid {
        grid-template-columns: 1fr;
    }

    body.homepage-black-white.hp-brand.tools-page .tp-prose h2 {
        font-size: 1.4rem;
    }
}

@media (max-width: 600px) {

    body.homepage-black-white.hp-brand.tools-page .calc {
        padding: 18px 16px;
    }

    body.homepage-black-white.hp-brand.tools-page .calc-result {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px 18px;
    }

    body.homepage-black-white.hp-brand.tools-page .calc-figure strong {
        font-size: 1.7rem;
    }
}

@media (max-width: 480px) {

    body.homepage-black-white.hp-brand.tools-page .tp-crumbs {
        font-size: .66rem;
        letter-spacing: .1em;
    }
}

/* ---------------------------------------------------------------------------
   Hero headline: let it wrap.

   marketing.css:551 gives .headline-accent `white-space: nowrap` and
   inline-block, so the emphasised half of the headline is one unbreakable
   unit. On the homepage that half is "on autopilot" and fits; here it is
   "England landlords", which is 387px at the mobile size - inside a
   .hero-centered-container that is only 350px at a 390px viewport.

   .hero-copy is a grid item, and a grid item's default min-width:auto refuses
   to shrink below min-content, so it took the full 387px and hung 17px past
   the viewport at EVERY phone width. .hero-centered has overflow:hidden, so
   nothing scrolled and no overflow was reported - the last characters were
   just silently cut off.

   min-width:0 lets the item shrink; white-space:normal lets the phrase break.
   Scoped to .tools-page, so marketing.css and the homepage are untouched.
   --------------------------------------------------------------------------- */
body.homepage-black-white.hp-brand.tools-page .hero-copy {
    min-width: 0;
}

body.homepage-black-white.hp-brand.tools-page .hero-main-headline .headline-accent {
    white-space: normal;
}

/* ---------------------------------------------------------------------------
   The inline waitlist form on the closing CTA slab (/tools/ only).

   Restores the {% include core/_waitlist_form.html with source="tools_cta" %}
   the hub has always carried, so the tools funnel stays attributable in
   WaitlistSignup.source. It sits on .cta-card-bw (--hb-ink), and the button is
   .btn.btn-primary, whose base rule (marketing.css:362,
   body.homepage-black-white .btn-primary) is BLACK — black-on-black, the same
   bug fixed for the cookie banner in 84437c7. These rules invert it to the
   on-dark treatment .cta-btn-primary-bw uses.
   --------------------------------------------------------------------------- */
body.homepage-black-white.hp-brand.tools-page .cta-card-bw .waitlist-form {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 6px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--hb-r-pill);
    transition: border-color .18s ease;
}

body.homepage-black-white.hp-brand.tools-page .cta-card-bw .waitlist-form:focus-within {
    border-color: rgba(255, 255, 255, .42);
}

body.homepage-black-white.hp-brand.tools-page .cta-card-bw .waitlist-form input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 18px;
    font: inherit;
    font-size: .92rem;
    color: #ffffff;
    background: transparent;
    border: none;
    outline: none;
}

body.homepage-black-white.hp-brand.tools-page .cta-card-bw .waitlist-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, .55);
    opacity: 1;
}

body.homepage-black-white.hp-brand.tools-page .cta-card-bw .waitlist-form button {
    flex: 0 0 auto;
    padding: 12px 24px;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--hb-ink);
    background: #ffffff;
    border: none;
    border-radius: var(--hb-r-pill);
    cursor: pointer;
    transition: transform .2s var(--hb-ease), box-shadow .2s var(--hb-ease);
}

body.homepage-black-white.hp-brand.tools-page .cta-card-bw .waitlist-form button:hover {
    transform: translateY(-2px);
    box-shadow: var(--hb-sh-on-dark);
}

/* On the homepage .cta-actions-bw follows .cta-subtext, which carries the
   margin that separates them. Here the inline waitlist form sits between the
   two, and the form has no bottom margin - so the pill and the secondary
   button were touching at 0px on every width, their rounded corners visually
   colliding at 1440. Space them off the form, not off the subtext. */
body.homepage-black-white.hp-brand.tools-page .cta-card-bw .waitlist-form + .cta-actions-bw {
    margin-top: 18px;
}

@media (max-width: 560px) {

    body.homepage-black-white.hp-brand.tools-page .cta-card-bw .waitlist-form {
        flex-direction: column;
        border-radius: var(--hb-r-lg);
    }

    body.homepage-black-white.hp-brand.tools-page .cta-card-bw .waitlist-form button {
        width: 100%;
    }
}