/* ==========================================================================
   EasyHomeWatch — SaaS marketing site (/)

   Self-contained on purpose: this is the platform's own marketing identity and
   it deliberately does NOT load site.css. That stylesheet is the *tenant* look
   (blue #2A9EC8, Montserrat) which every org's own public site at /{org} wears
   — the two are different products and shouldn't drift into each other.

   Design language (editorial): white ground, near-black BOLD Manrope headings
   with tight tracking, a flat full-width sticky nav with a hairline under it,
   and content presented as thumbnail cards carrying a coloured category badge
   and a meta row. Weight 700-800 headings at large sizes are the load-bearing
   detail — the page previously ran weight 300, which reads as a different,
   airier product. Borders are hairlines and shadows are almost absent; the
   separation between a card and the page is the thumbnail, not a heavy edge.
   ========================================================================== */

:root {
    /* White, not off-white. The editorial look depends on cards and tinted
       zones reading as objects ON white; an off-white ground flattens both. */
    --hw-bg: #ffffff;
    --hw-surface: #ffffff;
    --hw-surface-2: #f6f7f9;

    --hw-ink: #0f1115;
    --hw-body: #5b6470;
    --hw-faint: #8b95a1;

    --hw-line: #e6e8ec;
    --hw-line-soft: #f0f1f4;

    --hw-primary: #343d41;
    --hw-primary-hover: #24262d;
    --hw-dark: #24262d;
    --hw-darker: #111418;

    --hw-accent: #3ebb7f;

    /* Stage colours for the "start a business" path. Colour used to mean something — one hue
       per stage of the journey, reused on the marker, the label and the tint — rather than
       sprinkled around for decoration. Each is dark enough on white to pass as body text. */
    --hw-stage-site:    #2f7de1;   /* your website goes live */
    --hw-stage-book:    #7b5cd6;   /* bookings start arriving */
    --hw-stage-work:    #c8791f;   /* the visit and the report */
    --hw-stage-paid:    #1c9b63;   /* getting paid */
    --hw-stage-grow:    #c2455e;   /* growing */

    /* Tighter than the old 24/20/14. Large radii read as "app card"; the
       editorial reference keeps corners modest so thumbnails stay rectangular
       enough to look like photography rather than UI. */
    --hw-r-card: 16px;
    --hw-r-md: 14px;
    --hw-r-sm: 10px;
    --hw-r-pill: 999px;

    /* Fluid rather than a fixed 1320px, which left roughly 600px of dead margin each side on
       a wide monitor and made the page read as a narrow column floating in space. Still
       bounded, and bounded tighter than the 1920px it briefly ran at: past ~1500px the
       promo video and the card grids grow to the point where a single card is taller than
       a laptop screen, which is the opposite of the contained editorial feel. Blocks of
       actual prose keep their own narrower measures. */
    --hw-container: min(94vw, 1480px);
    --hw-pad: 24px;

    /* Three measures, and only three. Every content block on the page is the full
       container width, the panel width, or the narrow text measure — the page once had
       nine different block widths (1456, 1240, 1180, 1000, 940, 820, 760, 640, 560)
       stacked down it, so no two sections shared a left edge and the whole thing read
       as unaligned. Prose uses --hw-measure-text; a discrete object (a plan card, the
       simulated screen, the tour video) uses --hw-measure-panel; everything else is
       the container. */
    --hw-measure: 100%;
    --hw-measure-text: 820px;
    /* A third, and last, measure: things that are a discrete object rather than a
       band of page — the plan cards and the simulated work-order screen. At the
       full container width both stop reading as objects you could hold. */
    --hw-measure-panel: 980px;

    /* The bar is sticky and in flow, so nothing below needs to clear it by hand
       any more. This is now just the band of air the first section opens with. */
    --hw-nav-clear: 72px;

    /* Deliberately faint. The reference separates blocks with whitespace and a
       hairline, never with a drop shadow you can point at. */
    --hw-shadow-sm: 0 1px 2px rgba(15, 17, 21, .04);
    --hw-shadow-md: 0 4px 16px rgba(15, 17, 21, .05);
    --hw-shadow-lg: 0 16px 44px rgba(15, 17, 21, .08);

    /* Category-badge hues, one per topic, mirroring the reference's coloured
       tags. Each is a dark ink on a 10%-tinted ground so the text passes
       contrast without the badge shouting. */
    --hw-tag-site:  var(--hw-stage-site);
    --hw-tag-book:  var(--hw-stage-book);
    --hw-tag-work:  var(--hw-stage-work);
    --hw-tag-paid:  var(--hw-stage-paid);

    --hw-font: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Reset / base ------------------------------------------------------------ */

.hw *, .hw *::before, .hw *::after { box-sizing: border-box; }

body.hw {
    margin: 0;
    background: var(--hw-bg);
    color: var(--hw-body);
    font-family: var(--hw-font);
    font-size: 16.5px;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hw img { max-width: 100%; display: block; }
.hw a { color: inherit; text-decoration: none; }

.hw h1, .hw h2, .hw h3, .hw h4 {
    font-family: var(--hw-font);
    color: var(--hw-ink);
    margin: 0;
    /* Bold, tightly tracked display type is the whole character of this design.
       Tracking tightens as size grows — -0.04em is right at 64px and far too
       tight at 17px, so each level sets its own. */
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}
.hw h1 { font-size: clamp(38px, 5.4vw, 66px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; }
.hw h2 { font-size: clamp(29px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; }
.hw h3 { font-size: 21px; font-weight: 700; line-height: 1.28; letter-spacing: -0.02em; }
.hw h4 { font-size: 17.5px; font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; }
.hw p { margin: 0; }

.hw-container { width: 100%; max-width: var(--hw-container); margin: 0 auto; padding: 0 var(--hw-pad); }
.hw-section { padding: 100px 0; }
.hw-section-tight { padding: 64px 0; }

/* The first block on a page gets a deliberate band of air under the bar. The hero
   sets its own; this covers every other page — terms, privacy, the community board,
   an article. */
.hw-topnav + .hw-section,
.hw-topnav + .hw-section-tight,
.hw-topnav + section,
.hw-topnav + article { padding-top: var(--hw-nav-clear); }

/* Shared pieces ----------------------------------------------------------- */

.hw-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--hw-surface-2); border: 1px solid var(--hw-line);
    border-radius: 6px; padding: 5px 10px;
    font-size: 11.5px; font-weight: 700; color: var(--hw-body);
    text-transform: uppercase; letter-spacing: .07em;
}
.hw-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hw-accent); }

/* Section heads are left-aligned, with an optional action parked on the right —
   the reference's "Latest News … View all →" pattern. Centred heads are the
   opt-in (.is-centred) now rather than the default, because a left edge shared
   with the grid beneath is what makes a page read as editorial. */
.hw-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 28px; flex-wrap: wrap; margin: 0 0 40px; text-align: left;
}
.hw-section-head > .txt { max-width: var(--hw-measure-text); }
.hw-section-head h2 { margin: 12px 0 10px; }
.hw-section-head .sub,
.hw-section-head .hw-section-sub { font-size: 17px; color: var(--hw-body); }
.hw-section-head.is-centred { display: block; text-align: center; max-width: var(--hw-measure-text); margin-inline: auto; }
.hw-section-head.is-centred > .txt { max-width: none; }

/* "View all →" — the reference's standard section escape hatch. */
.hw-more {
    display: inline-flex; align-items: center; gap: 7px; flex: none;
    font-size: 14.5px; font-weight: 700; color: var(--hw-ink);
    padding-bottom: 6px; border-bottom: 1.5px solid transparent;
    transition: border-color .2s ease, gap .2s ease;
}
.hw-more:hover { border-bottom-color: var(--hw-ink); gap: 11px; }

.hw-btn, .hw-btn-light {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    /* A rounded rectangle, not a pill. The pill belonged to the old soft look;
       the reference's CTAs are square-shouldered and read as more deliberate. */
    border-radius: 10px; padding: 14px 24px;
    font-family: var(--hw-font); font-size: 15px; font-weight: 700;
    letter-spacing: -0.01em;
    border: 1px solid transparent; cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
/* Scoped with .hw on purpose: `.hw a { color: inherit }` above is (0,1,1) and
   would otherwise out-specify a bare `.hw-btn` (0,1,0), leaving every anchor
   button with the grey body colour instead of white on its dark fill. */
.hw .hw-btn { background: var(--hw-primary); color: #fff; }
.hw .hw-btn:hover { background: var(--hw-primary-hover); color: #fff; transform: translateY(-1px); }
.hw .hw-btn-light { background: var(--hw-surface); color: var(--hw-ink); border-color: var(--hw-line); }
.hw .hw-btn-light:hover { border-color: #d8d9de; transform: translateY(-1px); }
.hw-btn svg, .hw-btn-light svg { flex: none; }

/* Top navigation ---------------------------------------------------------- */

/* The supplied wordmark, drawn at a fixed height with the width following from the file's
   own aspect ratio. See Views/Shared/_PlatformBrand.cshtml. */
.hw-brand { display: inline-flex; align-items: center; flex: none; }
.hw-brand img { height: 30px; width: auto; display: block; }

/* A step down on phones, then the square mark below 359px — <picture> swaps the source
   there. Measured in the nav: the wordmark and the "Get started" button come to 305px
   together, which clears a 360px phone's content box and overflows a 320px one. */
@media (max-width: 480px) {
    .hw-brand img { height: 26px; }
}
@media (max-width: 359px) {
    .hw-brand img { height: 28px; width: 28px; }
}

/* A flat bar spanning the viewport, separated from the page by a single
   hairline. This replaces a floating rounded pill: the pill was the signature
   of the old soft look, and the editorial reference puts its nav flush to the
   top edge with nothing under it but a 1px rule.

   sticky, not fixed — it participates in layout, so nothing below has to be
   pushed down by a hand-measured clearance the way --hw-nav-clear did. */
.hw-topnav {
    position: sticky; z-index: 50; top: 0;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid var(--hw-line);
}
.hw-topnav-inner {
    width: 100%; max-width: var(--hw-container); margin: 0 auto;
    padding: 0 var(--hw-pad); height: 66px;
    display: flex; align-items: center; gap: 28px;
}
/* Links sit next to the brand rather than centred in the bar — the reference
   groups brand + sections on the left and keeps the right for account actions,
   which is what makes a wide bar still read as one object. */
.hw-topnav-links { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.hw-topnav-links a {
    display: inline-flex; align-items: center; border-radius: 8px;
    padding: 8px 12px; font-size: 14.5px; font-weight: 600; color: var(--hw-body);
    white-space: nowrap; transition: color .2s ease, background-color .2s ease;
}
.hw-topnav-links a:hover { color: var(--hw-ink); background: var(--hw-surface-2); }
.hw-topnav-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.hw-topnav-signin { font-size: 14.5px; font-weight: 600; color: var(--hw-body); padding: 8px 4px; white-space: nowrap; transition: color .2s ease; }
.hw-topnav-signin:hover { color: var(--hw-ink); }
.hw-btn-onnav { padding: 10px 18px; font-size: 14px; }

@media (max-width: 960px) {
    /* The links used to be hidden outright below this width, which was fine for
       the in-page anchors (you can scroll to those) but hid /community and /blog
       — two whole sections of the site with no other way in from a phone.

       They move to their own scrollable row under the bar instead. No toggle and
       no JavaScript: a strip that is simply visible beats a menu behind a button
       that a visitor has to guess is there, and it degrades to nothing when
       styles or scripts fail. */
    .hw-topnav-inner { flex-wrap: wrap; height: auto; gap: 12px; padding-top: 11px; }
    .hw-brand { order: 1; }
    .hw-topnav-actions { order: 2; margin-left: auto; }
    .hw-topnav-links {
        order: 3; flex-basis: 100%; gap: 2px; margin: 0 calc(-1 * var(--hw-pad));
        padding: 2px var(--hw-pad) 10px;
        overflow-x: auto; overscroll-behavior-x: contain;
        scrollbar-width: none; -ms-overflow-style: none;
    }
    .hw-topnav-links::-webkit-scrollbar { display: none; }
    .hw-topnav-links a { padding: 7px 11px; font-size: 14px; }
    /* The last link is cut off mid-word at the viewport edge, which is the only
       thing telling a visitor the row scrolls — so make it read as a fade rather
       than as a clipping bug. */
    .hw-topnav-links {
        -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent 100%);
        mask-image: linear-gradient(90deg, #000 84%, transparent 100%);
    }
}
@media (max-width: 480px) {
    .hw-topnav-signin { display: none; }
    .hw-btn-onnav { padding: 9px 15px; }
}

/* Hero -------------------------------------------------------------------- */

/* Rebuilt as a light editorial hero: bold near-black display type on white,
   centred, with the photograph demoted to a wide plate underneath. The previous
   hero was copy reversed out of a full-bleed dark photo, which is the opposite
   of the reference — there the first thing on the page is the sentence, and the
   imagery supports it rather than carrying it. */
.hw-hero { position: relative; padding: clamp(56px, 7vw, 96px) 0 0; }
.hw-hero-copy {
    max-width: 960px; margin: 0 auto; text-align: center;
    display: flex; flex-direction: column; align-items: center;
}
.hw-hero-copy h1 { color: var(--hw-ink); margin: 20px 0 0; }
/* Two spans, one per sentence: on a wide screen each takes its own line and the
   pair balances; on a phone they run inline and the whitespace between them
   survives, which a hidden <br> would not. */
.hw-hero-copy h1 span { display: block; }
.hw-hero-copy h1 span + span { color: var(--hw-body); }
.hw-hero-copy .lead { font-size: 19px; color: var(--hw-body); max-width: 660px; margin: 22px 0 32px; }
.hw-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hw-hero-note { margin-top: 18px; font-size: 13.5px; color: var(--hw-faint); }

/* Capability rail in the slot the reference fills with "join N readers from
   companies like…". A count would have to be invented; what the product does is
   a fact, so the slot carries that instead. */
.hw-hero-rail {
    margin: 52px auto 0; padding: 20px 0; max-width: 1000px;
    border-top: 1px solid var(--hw-line); border-bottom: 1px solid var(--hw-line);
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px;
}
.hw-hero-rail span {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 13.5px; font-weight: 700; color: var(--hw-faint);
    text-transform: uppercase; letter-spacing: .08em;
}
.hw-hero-rail span::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: var(--hw-accent); flex: none;
}

@media (max-width: 860px) {
    /* The two-line split is a desktop line-balance choice; on a phone the
       sentences just flow, so the headline doesn't break mid-thought. */
    .hw-hero-copy h1 span { display: inline; }
    .hw-hero-copy h1 span + span { color: var(--hw-ink); }
    .hw-hero-actions .hw-btn, .hw-hero-actions .hw-btn-light { width: 100%; }
    .hw-hero-rail { gap: 10px 20px; }
}

/* Stat row ---------------------------------------------------------------- */

.hw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hw-stat {
    background: var(--hw-surface); border: 1px solid var(--hw-line);
    border-radius: var(--hw-r-md); padding: 26px 24px; text-align: center;
}
.hw-stat .num { font-size: 34px; font-weight: 800; color: var(--hw-ink); letter-spacing: -0.02em; line-height: 1.1; }
.hw-stat .num .unit { color: var(--hw-body); font-size: 20px; }
.hw-stat .lbl { font-size: 13.5px; color: var(--hw-body); margin-top: 6px; }
@media (max-width: 780px) { .hw-stats { grid-template-columns: 1fr 1fr; } }

/* Feature cards — editorial thumbnail cards ------------------------------- */

/* Rebuilt in the reference's card idiom: a photograph on top, a coloured
   category tag, a bold title, a line of body copy, and a meta row ending in an
   arrow. The old cards were icon-and-text tiles with a hover lift; these carry
   an image, which is what makes a grid read as editorial rather than as a
   feature matrix. */
.hw-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.hw-card {
    position: relative;
    background: var(--hw-surface);
    display: flex; flex-direction: column;
}
/* Each card keeps the journey's stage colour, so the same hue means the same
   thing wherever it appears on the page — "your site" is blue in the path and
   blue here. */
.hw-cards .hw-card:nth-child(1) { --stage: var(--hw-tag-site); }
.hw-cards .hw-card:nth-child(2) { --stage: var(--hw-tag-book); }
.hw-cards .hw-card:nth-child(3) { --stage: var(--hw-tag-work); }
.hw-cards .hw-card:nth-child(4) { --stage: var(--hw-tag-paid); }

.hw-card .shot {
    position: relative; display: block; overflow: hidden;
    border-radius: var(--hw-r-md); aspect-ratio: 16 / 10;
    background: var(--hw-surface-2); margin-bottom: 16px;
}
.hw-card .shot img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s cubic-bezier(.16,.8,.3,1);
}
.hw-card:hover .shot img { transform: scale(1.05); }

/* The tag sits inside the thumbnail's bottom-left corner, as in the reference,
   so the card's text column stays a clean stack of title and copy. */
.hw-card .tag {
    position: absolute; left: 10px; bottom: 10px; z-index: 2;
    display: inline-flex; align-items: center; border-radius: 6px;
    padding: 4px 9px; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .07em;
    color: #fff; background: var(--stage, var(--hw-primary));
}
.hw-card h4 { margin: 0 0 7px; }
.hw-card p { font-size: 14.5px; line-height: 1.55; }
.hw-card .meta {
    /* auto, not a fixed gap: the four cards carry different amounts of copy, and
       without this the arrows land at four different heights across the row. */
    margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; color: var(--stage, var(--hw-ink));
    transition: gap .2s ease;
}
.hw-card:hover .meta { gap: 11px; }
.hw-card .meta svg { flex: none; }

@media (max-width: 1100px) { .hw-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hw-cards { grid-template-columns: 1fr; gap: 30px; } }

/* Photo showcase cards ---------------------------------------------------- */

.hw-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hw-photo-card {
    position: relative; border-radius: var(--hw-r-card); overflow: hidden;
    aspect-ratio: 16 / 10; background: #1c1e1f;
    box-shadow: var(--hw-shadow-sm);
}
.hw-photo-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16,.8,.3,1); }
.hw-photo-card:hover img { transform: scale(1.05); }
.hw-photo-card::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(17,20,24,.45) 0%, rgba(17,20,24,0) 34%, rgba(17,20,24,.82) 100%);
}
.hw-photo-top { position: absolute; z-index: 2; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hw-photo-bottom { position: absolute; z-index: 2; bottom: 18px; left: 20px; right: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.hw-photo-bottom .title { color: #fff; font-size: 18px; font-weight: 400; letter-spacing: -0.01em; }
.hw-photo-bottom .meta { color: rgba(255,255,255,.75); font-size: 13.5px; }
.hw-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.95); border-radius: var(--hw-r-pill);
    padding: 6px 13px; font-size: 12.5px; font-weight: 500; color: var(--hw-ink);
    backdrop-filter: blur(6px); white-space: nowrap;
}
.hw-chip.on-dark { background: rgba(17,20,24,.55); border: 1px solid rgba(255,255,255,.2); color: #fff; }
@media (max-width: 860px) { .hw-showcase { grid-template-columns: 1fr; } }

/* Split feature rows ------------------------------------------------------ */

.hw-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hw-split.reverse .hw-split-media { order: 2; }
.hw-split-media { position: relative; border-radius: var(--hw-r-card); overflow: hidden; aspect-ratio: 4 / 3.2; background: #1c1e1f; }
.hw-split-media img { width: 100%; height: 100%; object-fit: cover; }
.hw-split-copy h2 { margin: 18px 0 16px; }
.hw-split-list { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hw-split-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--hw-ink); font-weight: 400; }
.hw-split-list .tick {
    width: 22px; height: 22px; border-radius: 50%; flex: none; margin-top: 1px;
    background: var(--hw-surface); border: 1px solid var(--hw-line);
    display: flex; align-items: center; justify-content: center; color: var(--hw-accent);
}
@media (max-width: 900px) {
    .hw-split, .hw-split.reverse { grid-template-columns: 1fr; gap: 30px; }
    .hw-split.reverse .hw-split-media { order: 0; }
}

/* Steps ------------------------------------------------------------------- */

.hw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hw-step { background: var(--hw-surface); border: 1px solid var(--hw-line); border-radius: var(--hw-r-md); padding: 30px 26px; }
.hw-step .n {
    width: 40px; height: 40px; border-radius: 50%; margin-bottom: 18px;
    background: var(--hw-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 500;
}
.hw-step h4 { margin-bottom: 8px; }
.hw-step p { font-size: 14.5px; }
@media (max-width: 860px) { .hw-steps { grid-template-columns: 1fr; } }

/* Testimonials ------------------------------------------------------------ */

.hw-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hw-quote { background: var(--hw-surface); border: 1px solid var(--hw-line); border-radius: var(--hw-r-md); padding: 28px 26px; display: flex; flex-direction: column; gap: 18px; }
.hw-quote .stars { display: flex; gap: 3px; color: #f6a94c; }
.hw-quote p { font-size: 15px; color: var(--hw-body); flex: 1; }
.hw-quote .who { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.hw-quote .av { width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--hw-surface-2); border: 1px solid var(--hw-line); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color: var(--hw-ink); }
.hw-quote .who .nm { font-size: 14.5px; font-weight: 500; color: var(--hw-ink); line-height: 1.3; }
.hw-quote .who .rl { font-size: 13px; color: var(--hw-faint); line-height: 1.3; }
@media (max-width: 900px) { .hw-quotes { grid-template-columns: 1fr; } }

/* Pricing ----------------------------------------------------------------- */

.hw-price {
    max-width: 460px; margin: 0 auto; background: var(--hw-surface);
    border: 1px solid var(--hw-line); border-radius: var(--hw-r-card);
    padding: 40px 36px; text-align: center; box-shadow: var(--hw-shadow-md);
}
.hw-price .amt { font-size: 54px; font-weight: 800; color: var(--hw-ink); letter-spacing: -0.03em; line-height: 1.1; margin: 16px 0 4px; }
.hw-price .amt .per { font-size: 15px; font-weight: 400; color: var(--hw-body); letter-spacing: 0; }
.hw-price ul { list-style: none; margin: 28px 0 30px; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 13px; }
.hw-price li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--hw-ink); font-weight: 400; }
.hw-price li .tick { width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 1px; background: var(--hw-surface-2); border: 1px solid var(--hw-line); display: flex; align-items: center; justify-content: center; color: var(--hw-accent); }
.hw-price .hw-btn { width: 100%; }

/* FAQ --------------------------------------------------------------------- */

.hw-faq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.hw-faq-intro h2 { margin: 18px 0 16px; }
.hw-faq-intro .hw-btn { margin-top: 24px; }
.hw-faq-list { display: flex; flex-direction: column; gap: 12px; }
.hw-faq-item { background: var(--hw-surface); border: 1px solid var(--hw-line); border-radius: var(--hw-r-md); overflow: hidden; }
.hw-faq-q {
    width: 100%; background: none; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 26px; text-align: left;
    font-family: var(--hw-font); font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; color: var(--hw-ink);
}
.hw-faq-q .pm { position: relative; width: 18px; height: 18px; flex: none; }
.hw-faq-q .pm::before, .hw-faq-q .pm::after {
    content: ""; position: absolute; background: var(--hw-ink); transition: transform .25s ease, opacity .25s ease;
}
.hw-faq-q .pm::before { top: 8px; left: 0; width: 18px; height: 1.5px; }
.hw-faq-q .pm::after { left: 8px; top: 0; width: 1.5px; height: 18px; }
.hw-faq-item.is-open .hw-faq-q .pm::after { transform: rotate(90deg); opacity: 0; }
/* Height animates from a measured value set in JS, so a long answer opens
   smoothly instead of snapping. */
.hw-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.16,.8,.3,1); }
.hw-faq-a p { padding: 0 26px 24px; font-size: 15px; color: var(--hw-body); }
@media (max-width: 900px) { .hw-faq-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Closing CTA ------------------------------------------------------------- */

.hw-cta {
    position: relative; border-radius: var(--hw-r-card); overflow: hidden;
    padding: clamp(56px, 8vw, 96px) clamp(24px, 5vw, 64px); text-align: center;
    background: var(--hw-ink);
}
.hw-cta img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Heavier than it looks like it needs to be: the photo has a white shirt and a
   bright window right where the headline's last word lands, and at .82 the type
   lost contrast against them. */
.hw-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,17,21,.90), rgba(15,17,21,.94)); }
.hw-cta-inner { position: relative; z-index: 2; }
.hw-cta h2 { color: #fff; margin: 20px 0 16px; }
.hw-cta p { color: rgba(255,255,255,.78); max-width: 520px; margin: 0 auto 30px; font-size: 17px; }
.hw-cta .hw-badge { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.9); box-shadow: none; }
.hw-cta .hw-btn { background: #fff; color: var(--hw-ink); }
.hw-cta .hw-btn:hover { background: rgba(255,255,255,.88); }

/* Footer ------------------------------------------------------------------ */

.hw-footer { background: var(--hw-ink); color: rgba(255,255,255,.62); margin-top: 100px; border-top: 1px solid var(--hw-line); padding: 64px var(--hw-pad) 40px; }
/* Container max-width AND container padding — with only the former the footer columns
   sat 24px outside the left edge of every section above them. */
.hw-footer-inner { max-width: var(--hw-container); margin: 0 auto; padding: 0 var(--hw-pad); }
.hw-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; }
.hw-footer .blurb { margin-top: 16px; font-size: 14.5px; max-width: 320px; line-height: 1.7; }
.hw-footer h5 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: #fff; margin: 0 0 16px; font-family: var(--hw-font); }
.hw-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.hw-footer ul a { font-size: 14.5px; color: rgba(255,255,255,.62); transition: color .2s ease; }
.hw-footer ul a:hover { color: #fff; }
.hw-footer-base { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13.5px; color: rgba(255,255,255,.45); }
@media (max-width: 1000px) { .hw-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (max-width: 800px) { .hw-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .hw-footer-grid { grid-template-columns: 1fr; } }

/* Scroll reveal ------------------------------------------------------------ */

.hw-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1); }
.hw-reveal.is-in { opacity: 1; transform: none; }
.hw-stagger.is-in > * { animation: hw-rise .6s cubic-bezier(.16,.8,.3,1) backwards; }
.hw-stagger.is-in > *:nth-child(1) { animation-delay: .04s; }
.hw-stagger.is-in > *:nth-child(2) { animation-delay: .12s; }
.hw-stagger.is-in > *:nth-child(3) { animation-delay: .2s; }
.hw-stagger.is-in > *:nth-child(4) { animation-delay: .28s; }
@keyframes hw-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .hw-reveal, .hw-stagger > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
    .hw-hero-inner img.bg { animation: none !important; }
}

/* "See it in action" walkthrough ------------------------------------------------------- */

.hw-demo {
    max-width: var(--hw-measure-panel); margin-inline: auto;
    background: var(--hw-surface); border: 1px solid var(--hw-line);
    border-radius: var(--hw-r-card); overflow: hidden;
}

.hw-demo-tabs {
    display: flex; gap: 4px; padding: 10px;
    border-bottom: 1px solid var(--hw-line); background: var(--hw-surface-2);
}
.hw-demo-tab {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: inherit; font-size: 13.5px; font-weight: 500; color: var(--hw-faint);
    background: transparent; border: 1px solid transparent; border-radius: 999px;
    padding: 9px 12px; cursor: pointer;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.hw-demo-tab:hover { color: var(--hw-ink); }
.hw-demo-tab .n {
    width: 20px; height: 20px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--hw-line); color: var(--hw-body); font-size: 11.5px; font-weight: 600;
}
.hw-demo-tab.is-active {
    background: var(--hw-surface); color: var(--hw-ink); border-color: var(--hw-line);
}
.hw-demo-tab.is-active .n { background: var(--hw-primary); color: #fff; }

.hw-demo-stage { padding: 26px; }
.hw-demo-panel[hidden] { display: none; }
.hw-demo-panel.is-active { animation: hw-demo-in .3s cubic-bezier(.16,.8,.3,1); }
@keyframes hw-demo-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.hw-demo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.hw-demo-head h3 { margin: 0 0 4px; font-size: 18px; font-weight: 500; color: var(--hw-ink); }
.hw-demo-head p { margin: 0; font-size: 13.5px; color: var(--hw-body); }

.hw-demo-pill {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: var(--hw-surface-2); color: var(--hw-body); border: 1px solid var(--hw-line);
}
.hw-demo-pill.is-progress { background: #FDF3E3; border-color: #F0DCBB; color: #8A6321; }
.hw-demo-pill.is-done { background: #E7F6EE; border-color: #C2E5D2; color: #1C7A4F; }

.hw-demo-facts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
    margin: 0 0 22px; padding: 18px; border-radius: 14px; background: var(--hw-surface-2);
}
.hw-demo-facts dt { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hw-faint); margin-bottom: 3px; }
.hw-demo-facts dd { margin: 0; font-size: 14px; color: var(--hw-ink); }

.hw-demo-bar { height: 6px; border-radius: 999px; background: var(--hw-line); overflow: hidden; margin-bottom: 18px; }
.hw-demo-bar span { display: block; height: 100%; background: var(--hw-primary); border-radius: 999px; transition: width .3s cubic-bezier(.16,.8,.3,1); }

.hw-demo-checks { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hw-demo-checks label {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    padding: 11px 12px; border-radius: 12px; transition: background-color .14s ease;
}
.hw-demo-checks label:hover { background: var(--hw-surface-2); }
/* The real checkbox stays in the DOM for keyboard and screen readers; .box is what is drawn. */
.hw-demo-checks input { position: absolute; opacity: 0; width: 0; height: 0; }
.hw-demo-checks .box {
    width: 21px; height: 21px; flex: none; border-radius: 7px;
    border: 1.5px solid var(--hw-line); background: var(--hw-surface);
    transition: background-color .18s ease, border-color .18s ease;
}
.hw-demo-checks input:focus-visible + .box { outline: 2px solid var(--hw-primary); outline-offset: 2px; }
.hw-demo-checks input:checked + .box {
    background: var(--hw-accent) center / 12px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    border-color: var(--hw-accent);
}
.hw-demo-checks .txt { font-size: 14.5px; color: var(--hw-ink); transition: color .18s ease; }
.hw-demo-checks input:checked ~ .txt { color: var(--hw-faint); text-decoration: line-through; }
.hw-demo-checks .tag {
    margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--hw-faint);
    border: 1px solid var(--hw-line); border-radius: 999px; padding: 3px 8px;
}

/* The panel is as wide as the container, and a button stretched across all of it
   reads as a banner rather than something to press. Centred at its natural width,
   full-width only once the panel is narrow enough for that to look deliberate. */
.hw-demo .hw-demo-go { display: flex; margin-inline: auto; justify-content: center; }
@media (max-width: 560px) { .hw-demo .hw-demo-go { width: 100%; } }
.hw-demo .hw-demo-go[disabled] { opacity: .45; cursor: not-allowed; }
.hw-demo-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--hw-faint); text-align: center; }

.hw-demo-report { border: 1px solid var(--hw-line); border-radius: 16px; padding: 22px; }
.hw-demo-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.hw-demo-report-head .eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hw-faint); }
.hw-demo-report-head h3 { margin: 4px 0 2px; font-size: 19px; font-weight: 500; color: var(--hw-ink); }
.hw-demo-report-head p { margin: 0; font-size: 13px; color: var(--hw-body); }

.hw-demo-report-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.hw-demo-report-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--hw-body); }
.hw-demo-report-list svg { flex: none; color: var(--hw-accent); }

.hw-demo-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
/* 16/10 rather than 4/3: at three across these are supporting detail, not the subject. */
.hw-demo-photos img {
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    border-radius: 10px; display: block; background: var(--hw-surface-2);
}

.hw-demo-note { margin: 0; font-size: 13.5px; font-style: italic; color: var(--hw-body); }

.hw-demo-sent {
    display: flex; align-items: center; gap: 9px; margin: 16px 0 18px;
    padding: 12px 14px; border-radius: 12px;
    background: #E7F6EE; border: 1px solid #C2E5D2; color: #1C7A4F;
    font-size: 13.5px; font-weight: 500;
    opacity: 0; transform: translateY(4px);
    transition: opacity .32s ease, transform .32s ease;
}
.hw-demo-sent.is-in { opacity: 1; transform: none; }

@media (max-width: 640px) {
    .hw-demo-stage { padding: 18px; }
    .hw-demo-tab { font-size: 12.5px; padding: 8px 6px; }
    .hw-demo-tab .n { display: none; }
    .hw-demo-facts { grid-template-columns: 1fr; }
    .hw-demo-checks .tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hw-demo-panel.is-active { animation: none; }
    .hw-demo-bar span, .hw-demo-sent { transition: none; }
}

/* "Start a home watch business this week" — a path, not a step grid --------------------- */

/* Two columns from 1100px up: five stacked stages made the section 1300px tall on its own and
   left the page feeling like one long narrow ribbon. */
.hw-path {
    list-style: none; margin: 0 0 28px; padding: 0;
    max-width: var(--hw-measure); margin-inline: auto;
    position: relative;
    display: grid; grid-template-columns: 1fr; gap: 0;
}
@media (min-width: 1100px) {
    .hw-path { grid-template-columns: 1fr 1fr; column-gap: 56px; }
    /* The rail only makes sense down a single column, so it goes when they split. */
    .hw-path::before { display: none; }
    .hw-path li { padding-bottom: 26px; }
    .hw-path li:first-child { grid-column: 1 / -1; }
}
/* The rail runs behind the markers and stops at the last one rather than trailing off the
   bottom of the list, which would read as "and then something else". */
.hw-path::before {
    content: ""; position: absolute; left: 27px; top: 34px; bottom: 12px;
    width: 2px; background: var(--hw-line);
}
.hw-path li { position: relative; padding: 0 0 34px 52px; }
/* The first stage carries the promise the whole page is selling, so it gets a tinted card
   rather than sitting flush with the rest of the list. */
.hw-path li:first-child {
    background: color-mix(in srgb, var(--hw-stage-site) 6%, var(--hw-surface));
    border: 1px solid color-mix(in srgb, var(--hw-stage-site) 22%, transparent);
    border-radius: var(--hw-r-md);
    padding: 22px 24px 24px 52px; margin-bottom: 16px;
}
.hw-path li:first-child::before { top: 28px; }
/* The featured stage spans both columns, so without this its paragraph runs a
   1330px line — roughly twice a comfortable measure — while every other stage's
   sits at column width. */
.hw-path li:first-child p { max-width: var(--hw-measure-text); }
.hw-path li:last-child { padding-bottom: 0; }
/* --stage is set per item below; everything colour-related reads from it, so changing a
   stage's hue is one line rather than four. */
.hw-path li::before {
    content: ""; position: absolute; left: 20px; top: 6px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--hw-surface); border: 2px solid var(--stage, var(--hw-primary));
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--stage, var(--hw-primary)) 12%, transparent);
}
.hw-path li:nth-child(1) { --stage: var(--hw-stage-site); }
.hw-path li:nth-child(2) { --stage: var(--hw-stage-book); }
.hw-path li:nth-child(3) { --stage: var(--hw-stage-work); }
.hw-path li:nth-child(4) { --stage: var(--hw-stage-paid); }
.hw-path li:nth-child(5) { --stage: var(--hw-stage-grow); }

.hw-path .when {
    display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--stage, var(--hw-primary));
    background: color-mix(in srgb, var(--stage, var(--hw-primary)) 9%, transparent);
    border-radius: var(--hw-r-pill); padding: 4px 11px;
}
.hw-path h3 { margin: 0 0 7px; font-size: 19px; font-weight: 500; color: var(--hw-ink); }
.hw-path p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--hw-body); }

/* --- What you don't need --------------------------------------------------------------- */
.hw-nots {
    max-width: var(--hw-measure); margin-inline: auto;
    background: var(--hw-surface); border: 1px solid var(--hw-line);
    border-radius: var(--hw-r-card); padding: 32px 30px;
}
.hw-nots h3 { margin: 0 0 18px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--hw-ink); }
.hw-nots ul {
    list-style: none; margin: 0 0 18px; padding: 0;
    /* Three columns, not auto-fit: at full container width auto-fit produced six
       columns roughly 210px wide, which is narrower than the longest item and broke
       "Hosting or a domain on day one" across two lines. */
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 32px;
}
.hw-nots li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--hw-body); }
.hw-nots .x {
    width: 20px; height: 20px; flex: none; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--hw-surface-2); color: var(--hw-faint);
    font-size: 13px; line-height: 1;
}
.hw-nots-foot { margin: 0; padding-top: 16px; border-top: 1px solid var(--hw-line);
    font-size: 14.5px; line-height: 1.6; color: var(--hw-faint); }

@media (max-width: 900px) { .hw-nots ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
    .hw-path li { padding-left: 44px; }
    .hw-nots { padding: 24px 20px; }
    .hw-nots ul { grid-template-columns: 1fr; }
}

/* Promo video ---------------------------------------------------------------------------- */
.hw-promo { max-width: var(--hw-measure-panel); margin: 0 auto; }

/* A tinted ring around the frame rather than a hairline border: at this size a 1px grey line
   reads as a browser default, which is exactly the generic look we are getting away from. The
   ring is padding on the outer element so the inner corners stay concentric with the outer. */
.hw-promo-frame {
    position: relative;
    border-radius: 26px;
    padding: 10px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--hw-stage-site) 26%, transparent),
            color-mix(in srgb, var(--hw-stage-grow) 16%, transparent) 55%,
            color-mix(in srgb, var(--hw-stage-paid) 20%, transparent));
    box-shadow: var(--hw-shadow-lg);
}

/* Height comes from the aspect ratio rather than the file's own dimensions, so the page does
   not jump when the metadata finally loads. */
.hw-promo video {
    width: 100%; aspect-ratio: 16 / 9; display: block;
    border-radius: 17px; background: var(--hw-darker);
}

/* --- Custom cover ---------------------------------------------------------------------- */

.hw-promo-cover {
    position: absolute; inset: 10px;
    border: 0; padding: 0; margin: 0; cursor: pointer;
    border-radius: 17px; overflow: hidden;
    display: block; width: auto;
    background: var(--hw-darker);
    font: inherit; text-align: left; color: #fff;
    transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
.hw-promo-cover[hidden] { display: block !important; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.015); }

.hw-promo-cover > img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform 6s cubic-bezier(.2,.7,.3,1), filter .4s ease;
    filter: saturate(.85);
}
.hw-promo-cover:hover > img { transform: scale(1.045); filter: saturate(1); }

.hw-promo-cover .veil {
    position: absolute; inset: 0;
    background:
        radial-gradient(120% 90% at 78% 26%, rgba(47,125,225,.32), transparent 58%),
        linear-gradient(190deg, rgba(12,16,20,.30) 0%, rgba(12,16,20,.62) 46%, rgba(12,16,20,.90) 100%);
}
/* A trace of noise stops the gradient from banding on wide dark screens. */
.hw-promo-cover .grain {
    position: absolute; inset: 0; opacity: .16; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.hw-promo-cover .chip {
    position: absolute; top: clamp(16px, 2.4vw, 26px); left: clamp(18px, 2.6vw, 30px);
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 15px 7px 8px; border-radius: var(--hw-r-pill);
    background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.20);
    backdrop-filter: blur(10px);
    font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: #fff;
}
.hw-promo-cover .chip img { width: 24px; height: 24px; flex: none; display: block; }

.hw-promo-cover .copy {
    position: absolute; left: clamp(18px, 2.6vw, 34px); bottom: clamp(18px, 2.6vw, 32px);
    right: clamp(120px, 16vw, 220px);
    display: flex; flex-direction: column; gap: 9px;
}
.hw-promo-cover .kicker {
    font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.66);
}
.hw-promo-cover .title {
    font-size: clamp(20px, 2.7vw, 34px); font-weight: 700; line-height: 1.16;
    letter-spacing: -0.025em; color: #fff; text-wrap: balance;
}
.hw-promo-cover .meta {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 13px; color: rgba(255,255,255,.62);
}
.hw-promo-cover .meta .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--hw-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--hw-accent) 26%, transparent);
}

.hw-promo-cover .play {
    position: absolute; right: clamp(20px, 3.4vw, 46px); bottom: clamp(20px, 3vw, 40px);
    width: clamp(60px, 7vw, 88px); aspect-ratio: 1; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.94); color: #14181c;
    box-shadow: 0 14px 40px rgba(0,0,0,.34);
    transition: transform .28s cubic-bezier(.2,.8,.3,1), background-color .28s ease;
}
.hw-promo-cover .play svg { width: 44%; height: 44%; margin-left: 6%; }
.hw-promo-cover:hover .play { transform: scale(1.09); background: #fff; }
.hw-promo-cover:focus-visible { outline: none; }
.hw-promo-cover:focus-visible .play { outline: 3px solid var(--hw-accent); outline-offset: 5px; }

/* One slow pulse, not a strobe — it should read as "this is playable", not as an alarm. */
.hw-promo-cover .play .ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.75);
    animation: hw-promo-pulse 3.2s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes hw-promo-pulse {
    0%   { transform: scale(1);    opacity: .75; }
    70%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}

.hw-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
    .hw-promo-frame { padding: 6px; border-radius: 20px; }
    .hw-promo video, .hw-promo-cover { border-radius: 15px; }
    .hw-promo-cover { inset: 6px; }
    .hw-promo-cover .copy { right: clamp(84px, 26vw, 120px); }
    .hw-promo-cover .chip { font-size: 12px; }
}

/* A 16:9 frame is only ~150px tall on a 320px phone, and the cover's title, kicker and
   meta together are taller than that — the copy rode up over the brand chip. The chip is
   the thing to lose: the wordmark is already in the nav a few hundred pixels above it. */
@media (max-width: 420px) {
    .hw-promo-cover .chip { display: none; }
    .hw-promo-cover .kicker { display: none; }
    /* Measured, not guessed: at 320px the copy ran to x=204 and the play button starts
       at x=200. This clears it by 8px and drops the title a step so it does not fill the
       whole 135px-tall cover. */
    .hw-promo-cover .copy { right: 88px; gap: 6px; }
    .hw-promo-cover .title { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .hw-promo-cover .play .ring { animation: none; opacity: .5; }
    .hw-promo-cover > img,
    .hw-promo-cover:hover > img { transition: none; transform: none; }
}

/* Community directory --------------------------------------------------------------------- */
/* Left, not centred. These sat under a centred section head; the heads are
   left-aligned now, and a centred search bar under a left-aligned title reads as
   a mistake. */
.hw-dir-search { display: flex; gap: 10px; max-width: 520px; margin: 0 0 34px; }
.hw-dir-search input {
    flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 12px 16px;
    border: 1px solid var(--hw-line); border-radius: 10px;
    background: var(--hw-surface); color: var(--hw-ink);
}
.hw-dir-search input:focus {
    outline: none; border-color: var(--hw-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hw-primary) 14%, transparent);
}

/* minmax(min(N, 100%), …) rather than minmax(N, …): a bare N is a hard floor, so on a
   320px phone the container's 272px content box could not hold one column and the whole
   page scrolled sideways. min() lets the track collapse to the available width and
   changes nothing above that. */
.hw-dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; }
.hw-dir-card {
    display: flex; flex-direction: column;
    background: var(--hw-surface); border: 1px solid var(--hw-line);
    border-radius: var(--hw-r-md); padding: 22px 22px 18px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
/* No lift. The editorial language separates a card from the page with its own
   edge and the whitespace around it, not by making it jump on hover. */
.hw-dir-card:hover { border-color: #cdd2d9; box-shadow: var(--hw-shadow-md); }
.hw-dir-card .head { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
.hw-dir-card .head img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.hw-dir-card .mark {
    width: 44px; height: 44px; flex: none; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--hw-primary); color: #fff; font-weight: 800; font-size: 18px;
}
.hw-dir-card h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--hw-ink); }
.hw-dir-card .area { font-size: 13px; color: var(--hw-faint); }
.hw-dir-card p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--hw-body); }
.hw-dir-card p { flex: 1; }
.hw-dir-card .go {
    margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: var(--hw-ink);
    transition: gap .2s ease;
}
.hw-dir-card:hover .go { gap: 10px; }

.hw-dir-empty {
    padding: 48px 26px; border: 1px dashed var(--hw-line); border-radius: var(--hw-r-card);
    color: var(--hw-body); font-size: 15.5px; line-height: 1.7;
}
.hw-dir-empty a { color: var(--hw-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Guides (platform blog) ------------------------------------------------------------------- */

/* The closest thing on the site to the reference's own subject matter, so it gets
   the card idiom most directly: thumbnail on top, a meta row, a bold title and an
   arrow. No category tag — posts have no category to show, and inventing one would
   put a label on a page that means nothing. */
.hw-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 30px 26px; }
.hw-post-card {
    display: flex; flex-direction: column;
    background: var(--hw-surface);
}
.hw-post-card img {
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    border-radius: var(--hw-r-md); background: var(--hw-surface-2);
    transition: transform .5s cubic-bezier(.16,.8,.3,1);
}
/* The image is the only thing that moves. A card that lifts and shadows on hover
   belongs to the old soft look. */
.hw-post-card .shot { display: block; overflow: hidden; border-radius: var(--hw-r-md); }
/* Stand-in for a post with no cover image, so the card keeps the same shape as
   the ones that have one. */
.hw-post-card .blank {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 16 / 10; background: var(--hw-surface-2);
    border: 1px solid var(--hw-line); border-radius: var(--hw-r-md);
    color: var(--hw-faint);
}
.hw-post-card .go svg, .hw-dir-card .go svg { flex: none; }
.hw-post-card:hover img { transform: scale(1.05); }
.hw-post-card .body { padding: 16px 0 0; display: flex; flex-direction: column; flex: 1; }
.hw-post-card time {
    font-size: 11.5px; font-weight: 700; color: var(--hw-faint);
    text-transform: uppercase; letter-spacing: .07em;
}
.hw-post-card h3 { margin: 8px 0 8px; font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; color: var(--hw-ink); }
.hw-post-card p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--hw-body); }
.hw-post-card .go {
    margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: var(--hw-ink);
    transition: gap .2s ease;
}
.hw-post-card:hover .go { gap: 10px; }

/* Article — a reading measure, not the full container width. */
.hw-article { max-width: 720px; margin-inline: auto; }
.hw-article .back { font-size: 13px; font-weight: 700; color: var(--hw-body); text-transform: uppercase; letter-spacing: .06em; }
.hw-article time { display: block; margin: 22px 0 8px; font-size: 13px; color: var(--hw-faint); }
.hw-article h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; margin: 0 0 16px; color: var(--hw-ink); }
.hw-article .lead { font-size: 18px; line-height: 1.6; color: var(--hw-body); margin: 0 0 26px; }
.hw-article .cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--hw-r-md); margin-bottom: 30px; }
.hw-article .prose h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; color: var(--hw-ink); margin: 36px 0 12px; }
.hw-article .prose p { font-size: 16.5px; line-height: 1.75; color: var(--hw-body); margin: 0 0 18px; }
.hw-article-cta {
    margin-top: 44px; padding: 28px 26px; border-radius: var(--hw-r-md);
    background: var(--hw-surface-2); border: 1px solid var(--hw-line); text-align: center;
}
.hw-article-cta h3 { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--hw-ink); }
.hw-article-cta p { margin: 0 0 18px; font-size: 15px; color: var(--hw-body); }


/* Community call-out — real proof in place of invented reviews ---------------------------- */
.hw-community-cta {
    max-width: var(--hw-measure); margin-inline: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
    padding: clamp(26px, 4vw, 38px) clamp(22px, 4vw, 40px); border-radius: var(--hw-r-card);
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--hw-stage-site) 10%, var(--hw-surface)),
        color-mix(in srgb, var(--hw-stage-paid) 10%, var(--hw-surface)));
    border: 1px solid color-mix(in srgb, var(--hw-stage-site) 20%, transparent);
}
/* min() for the same reason the grids need it: a flat 280px floor plus this block's
   own 40px of side padding overflowed a 320px phone. */
.hw-community-cta .txt { flex: 1; min-width: min(280px, 100%); }
.hw-community-cta h2 { margin: 12px 0 8px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; color: var(--hw-ink); }
.hw-community-cta p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--hw-body); max-width: 620px; }


@media (prefers-reduced-motion: reduce) {
    .hw-card .shot img, .hw-post-card img,
    .hw-card .meta, .hw-post-card .go, .hw-dir-card .go,
    .hw-dir-card, .hw-post-card { transition: none; }
    .hw-card:hover .shot img, .hw-post-card:hover img { transform: none; }
}

/* Two-tier pricing ------------------------------------------------------------------------ */
.hw-tiers {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 22px; align-items: start;
    /* Narrower than the container on purpose. Two cards across the full 1480px are
       ~727px each holding a 300px list, so most of each card is empty — a plan card
       has to look like something you can take in at a glance. */
    max-width: var(--hw-measure-panel); margin-inline: auto;
}
.hw-tier {
    position: relative; background: var(--hw-surface);
    border: 1px solid var(--hw-line); border-radius: var(--hw-r-card); padding: 32px 30px;
}
/* The recommended plan is lifted rather than shouted at — a border and a small flag, not a
   different colour scheme that makes the other option look broken. */
.hw-tier.is-featured {
    border-color: color-mix(in srgb, var(--hw-stage-paid) 40%, transparent);
    box-shadow: var(--hw-shadow-md);
}
.hw-tier .flag {
    position: absolute; top: -11px; left: 30px; border-radius: 6px;
    text-transform: uppercase;
    background: var(--hw-stage-paid); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .05em;
    padding: 4px 10px;
}
.hw-tier h3 { margin: 0 0 4px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--hw-ink); }
.hw-tier .who { margin: 0 0 18px; font-size: 14px; color: var(--hw-faint); }
.hw-tier .amt {
    font-size: 44px; font-weight: 800; letter-spacing: -0.035em; color: var(--hw-ink);
    margin-bottom: 22px;
}
.hw-tier .amt .per { font-size: 15px; font-weight: 400; color: var(--hw-faint); margin-left: 6px; }
.hw-tier ul { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.hw-tier li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.5; color: var(--hw-body); }
.hw-tier li::before {
    position: absolute; left: 0; top: 0; font-weight: 700;
}
/* What a plan does NOT include is as useful as what it does, so it is shown rather than
   silently omitted — a visitor comparing two lists of only-good-news cannot tell them apart. */
.hw-tier li.yes::before { content: "✓"; color: var(--hw-stage-paid); }
.hw-tier li.no::before { content: "×"; color: var(--hw-faint); }
.hw-tier li.no { color: var(--hw-faint); }
.hw-tier .hw-btn, .hw-tier .hw-btn-light { width: 100%; justify-content: center; }

.hw .hw-tier-foot {
    max-width: var(--hw-measure-text); margin: 28px auto 0; text-align: center;
    font-size: 13.5px; line-height: 1.6; color: var(--hw-faint);
}

/* ---------- Legal pages (/terms, /privacy) ---------------------------------
   Long-form documents built on .hw-article, plus the list, link and inline
   styles the blog prose never needed. The two notice boxes deliberately look
   unfinished: an unset governing state should be visible, not silently blank. */
.hw-legal .prose ul,
.hw-legal .prose ol { margin: 0 0 18px; padding-left: 22px; }
.hw-legal .prose li {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--hw-body);
    margin-bottom: 9px;
}
.hw-legal .prose strong { font-weight: 600; color: var(--hw-ink); }
.hw-legal .prose a { color: var(--hw-stage-site, #2f7de1); text-decoration: underline; text-underline-offset: 2px; }
.hw-legal .prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(15, 23, 42, .06);
}
/* Long documents need clear separation between numbered sections — the blog's
   32px heading gap is too tight to read 18 of them without losing your place. */
.hw-legal .prose h2 {
    scroll-margin-top: 90px;
    margin: 52px 0 16px;
    padding-top: 30px;
    border-top: 1px solid var(--hw-line);
}
.hw-legal .prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.hw-legal .prose p:last-child { margin-bottom: 0; }
.hw-legal .lead { margin-bottom: 30px; }

.hw-legal-notice,
.hw-legal .prose .hw-legal-todo {
    margin: 0 0 24px;
    padding: 13px 16px;
    border-radius: var(--hw-r-md, 12px);
    border: 1px dashed rgba(194, 69, 94, .45);
    background: rgba(194, 69, 94, .05);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--hw-body);
}
.hw-legal .prose .hw-legal-todo { margin: 0 0 18px; }

/* ---------- Community board -------------------------------------------------
   Rows rather than cards: a discussion list is scanned top to bottom for a title
   that matches what you came to ask, and a grid of equal boxes makes that harder,
   not easier. */
.hw-board-head {
    display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-end;
    justify-content: space-between; margin-bottom: 30px;
}
.hw-board-head h1 {
    margin: 18px 0 12px; font-size: clamp(30px, 4vw, 46px); font-weight: 800;
    letter-spacing: -0.038em; line-height: 1.1; color: var(--hw-ink);
}
.hw-board-head .sub { max-width: 620px; font-size: 16.5px; line-height: 1.65; color: var(--hw-body); }
.hw-board-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.hw-threads { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hw-line); }
.hw-thread-row {
    display: flex; align-items: center; gap: 24px;
    border-bottom: 1px solid var(--hw-line);
    transition: background-color .16s ease;
}
.hw-thread-row:hover { background: var(--hw-surface); }
.hw-thread-row .body { flex: 1; min-width: 0; display: block; padding: 22px 18px 20px; }
/* The row is as wide as the container so the whole strip is clickable, but the
   text inside it keeps a reading measure — otherwise a question runs 1250px. */
.hw-thread-row h3, .hw-thread-row .snip { max-width: var(--hw-measure-text); }
.hw-thread-row h3 {
    margin: 0 0 7px; font-size: 18.5px; font-weight: 700; line-height: 1.3;
    letter-spacing: -0.025em; color: var(--hw-ink);
}
.hw-thread-row:hover h3 { color: var(--hw-primary); }
/* Two lines of the question body, clamped — enough to tell two similar titles apart. */
.hw-thread-row .snip {
    margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--hw-body);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hw-thread-row .by,
.hw-thread .by {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--hw-faint);
}
.hw-thread-row .by .who,
.hw-thread .by .who { font-weight: 600; color: var(--hw-body); }
.hw-thread-row .by .org,
.hw-thread .by .org {
    padding: 2px 7px; border-radius: 5px;
    background: color-mix(in srgb, var(--hw-stage-site) 12%, transparent);
    color: color-mix(in srgb, var(--hw-stage-site) 78%, var(--hw-ink));
    font-weight: 700;
}
.hw-thread-row .by .locked { color: var(--hw-stage-grow); font-weight: 600; }
.hw-thread-row .count {
    flex: none; width: 84px; text-align: center; padding: 18px 0;
    border-left: 1px solid var(--hw-line); align-self: stretch;
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.hw-thread-row .count .n { font-size: 21px; font-weight: 800; color: var(--hw-ink); }
.hw-thread-row .count .l { font-size: 11.5px; color: var(--hw-faint); }

.hw-board-empty {
    text-align: center; padding: 64px 24px; border: 1px dashed var(--hw-line);
    border-radius: var(--hw-r-card); background: var(--hw-surface);
}
.hw-board-empty h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--hw-ink); }
.hw-board-empty p { margin: 0 auto 20px; max-width: 460px; font-size: 15px; line-height: 1.65; color: var(--hw-body); }

/* The board carries a second row of buttons above its search, so it wants a little
   less width than the directory's. */
.hw-board-search { max-width: 460px; }

.hw-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 34px; }
.hw-pager .of { font-size: 13.5px; color: var(--hw-faint); }

.hw-dir-back { margin: -14px 0 30px; font-size: 14px; color: var(--hw-faint); }
.hw-dir-back a { color: var(--hw-ink); font-weight: 700; border-bottom: 1.5px solid var(--hw-line); }

/* --- One thread --- */
.hw-thread, .hw-ask { max-width: 780px; margin-inline: auto; }
.hw-thread .back, .hw-ask .back { font-size: 13px; font-weight: 700; color: var(--hw-body); text-transform: uppercase; letter-spacing: .06em; }
.hw-thread-head { margin: 22px 0 26px; }
.hw-thread-head h1 {
    margin: 0 0 12px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 800;
    line-height: 1.12; letter-spacing: -0.035em; color: var(--hw-ink);
}

.hw-post {
    position: relative; background: var(--hw-surface); border: 1px solid var(--hw-line);
    border-radius: var(--hw-r-md); padding: 24px 26px;
}
/* The original question is what everything else answers, so it reads as the anchor. */
.hw-post-op {
    background: var(--hw-surface);
    border-left: 3px solid var(--hw-primary);
}
.hw-post .by { margin-bottom: 14px; }
.hw-post-body p { font-size: 16px; line-height: 1.72; color: var(--hw-body); margin: 0 0 14px; }
.hw-post-body p:last-child { margin-bottom: 0; }
.hw-post .mod { margin-top: 16px; }
.hw-linkish {
    background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
    color: var(--hw-stage-grow); cursor: pointer; text-decoration: underline;
    text-underline-offset: 2px;
}

/* `.hw h2` (0,1,1) outranks a bare class, so this needs the extra qualifier or the count
   renders at display size and reads as a second page heading. */
.hw .hw-replies-head { margin: 40px 0 16px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--hw-body); }
.hw-replies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hw-no-replies { font-size: 15px; color: var(--hw-faint); margin-bottom: 8px; }

.hw-reply-form, .hw-ask form { margin-top: 34px; display: flex; flex-direction: column; gap: 10px; }
.hw-reply-form label, .hw-ask label {
    font-size: 13px; font-weight: 600; color: var(--hw-ink); letter-spacing: -0.005em;
}
.hw-reply-form textarea, .hw-ask textarea, .hw-ask input[type="text"] {
    font: inherit; font-size: 15.5px; line-height: 1.65; width: 100%;
    padding: 14px 16px; border: 1px solid var(--hw-line); border-radius: var(--hw-r-sm);
    background: var(--hw-surface); color: var(--hw-ink); resize: vertical;
}
.hw-reply-form textarea:focus, .hw-ask textarea:focus, .hw-ask input:focus {
    outline: none; border-color: var(--hw-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hw-primary) 16%, transparent);
}
.hw-reply-form .hw-btn, .hw-ask .hw-btn { align-self: flex-start; }
.hw-ask .hw-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.hw-ask h1 { margin: 22px 0 12px; font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -0.035em; color: var(--hw-ink); }
.hw-ask .sub { font-size: 16px; line-height: 1.65; color: var(--hw-body); margin-bottom: 8px; }
.hw-ask-note { font-size: 12.5px; color: var(--hw-faint); line-height: 1.6; margin-bottom: 4px; }

.hw-reply-gate, .hw-thread-locked {
    margin-top: 34px; padding: 26px; text-align: center;
    border: 1px dashed var(--hw-line); border-radius: var(--hw-r-md); background: var(--hw-surface);
}
.hw-reply-gate p { margin: 0 0 16px; font-size: 15px; color: var(--hw-body); }
.hw-reply-gate .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hw-thread-locked { font-size: 14.5px; color: var(--hw-faint); }

.hw-form-error {
    margin: 0 0 16px; padding: 12px 15px; border-radius: var(--hw-r-sm);
    border: 1px solid color-mix(in srgb, var(--hw-stage-grow) 40%, transparent);
    background: color-mix(in srgb, var(--hw-stage-grow) 7%, transparent);
    font-size: 14px; color: var(--hw-ink);
}
.hw-form-error ul { margin: 0; padding-left: 18px; }

@media (max-width: 620px) {
    .hw-thread-row { align-items: stretch; gap: 12px; }
    .hw-thread-row .body { padding: 20px 4px 18px 0; }
    .hw-thread-row .count { width: 62px; }
    /* Two buttons at their own natural widths stack into a ragged left column.
       Full width makes the pair read as one control group. */
    .hw-board-actions { width: 100%; }
    .hw-board-actions .hw-btn, .hw-board-actions .hw-btn-light { flex: 1; min-width: 160px; }
}

/* The search input and its button side by side leave the input too narrow to
   show what was typed once the button has taken its share. */
@media (max-width: 520px) {
    .hw-dir-search { flex-direction: column; align-items: stretch; }
    .hw-dir-search .hw-btn { justify-content: center; }
}

@media (max-width: 860px) {
    /* The bar is in flow now, so this is just the opening band of air, and a phone
       cannot spare 124px of it above the fold. */
    :root { --hw-nav-clear: 44px; }
}