/* Equipment hire. One stylesheet for the hire pages (hub, machine, yard, request, reply, yard
   owner, admin) so they read as one feature. Everything is prefixed eh- and built on the design
   tokens; the page shape matches the other customer pages: full-width compact header, then a
   centred 1240px body. */

.eh-page { background: var(--neutral-50, #f8f8f7); min-height: 100vh; }
.eh-body { max-width: 1240px; margin: 0 auto; padding: 1.75rem 1.25rem 4rem; display: grid; gap: 1.25rem; }
.eh-narrow { max-width: 820px; }
.eh-loading { display: flex; justify-content: center; padding: 4rem 0; }

.eh-card { background: #fff; border: 1px solid var(--neutral-200, #e9e9e6); border-radius: 14px; padding: 1.25rem 1.35rem; display: grid; gap: .85rem; align-content: start; min-width: 0; }
.eh-card h2 { font-size: 1.08rem; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.eh-card h3 { font-size: .98rem; font-weight: 700; margin: 0; }
.eh-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.eh-muted { color: var(--neutral-600, #57534e); font-size: .92rem; margin: 0; }
.eh-small { font-size: .85rem; color: var(--neutral-600, #57534e); }
.eh-crumbs { font-size: .85rem; color: var(--neutral-500, #78716c); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.eh-crumbs a { color: var(--brand-700, #1d4ed8); text-decoration: none; }

.eh-hero-btn { display: inline-flex; align-items: center; gap: .45rem; background: var(--brand-600, #2563eb); color: #fff;
               font-weight: 700; font-size: .92rem; padding: .6rem 1.05rem; border-radius: 10px; text-decoration: none; white-space: nowrap; border: 0; }
.eh-hero-btn:hover { background: var(--brand-700, #1d4ed8); color: #fff; }

/* Machine tiles */
.eh-group { display: grid; gap: .7rem; }
.eh-group-title { font-size: .95rem; font-weight: 800; margin: 0; color: var(--neutral-800, #292524); }
.eh-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem; }
.eh-tile { display: grid; grid-template-columns: 40px 1fr; gap: .75rem; align-items: center; background: #fff;
           border: 1px solid var(--neutral-200, #e9e9e6); border-radius: 12px; padding: .8rem .9rem; text-decoration: none; color: inherit; }
.eh-tile:hover { border-color: var(--brand-300, #93c5fd); }
.eh-tile-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-50, #eff6ff); color: var(--brand-700, #1d4ed8); font-size: 1.1rem; }
.eh-tile strong { display: block; font-size: .95rem; color: var(--neutral-900, #1c1917); }
.eh-tile span { font-size: .8rem; color: var(--neutral-500, #78716c); }

/* Yards */
.eh-yards { display: grid; gap: .9rem; }
.eh-yard { display: grid; gap: .6rem; }
.eh-yard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.eh-yard-name { font-weight: 800; font-size: 1.02rem; color: var(--neutral-900, #1c1917); text-decoration: none; }
.eh-yard-name:hover { color: var(--brand-700, #1d4ed8); text-decoration: underline; }
.eh-rates { display: grid; gap: .35rem; }
.eh-rate { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; border-top: 1px dashed var(--neutral-200, #e9e9e6); padding-top: .35rem; }
.eh-rate b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.eh-stars { color: var(--warning-500, #f59e0b); font-size: .85rem; }
.eh-chip { display: inline-block; font-size: .75rem; font-weight: 700; padding: .12rem .55rem; border-radius: 999px; background: var(--neutral-100, #f1f1ef); color: var(--neutral-700, #44403c); white-space: nowrap; }
.eh-chip.blue { background: var(--brand-50, #eff6ff); color: var(--brand-700, #1d4ed8); }
.eh-chip.green { background: var(--success-50, #f0fdf4); color: var(--success-700, #15803d); }
.eh-chip.amber { background: var(--warning-50, #fffbeb); color: #92400e; }
.eh-chip.red { background: var(--danger-50, #fef2f2); color: var(--danger-600, #dc2626); }

/* Licence and safety note */
.eh-note { display: grid; grid-template-columns: 22px 1fr; gap: .5rem; background: var(--warning-50, #fffbeb); border-radius: 10px;
           padding: .75rem .9rem; font-size: .9rem; color: var(--neutral-800, #292524); }
.eh-note i { color: #b45309; }
.eh-info { display: grid; grid-template-columns: 22px 1fr; gap: .5rem; background: var(--brand-50, #eff6ff); border-radius: 10px;
           padding: .75rem .9rem; font-size: .9rem; color: var(--brand-800, #1e40af); }

/* Offers on a request */
.eh-offers { display: grid; gap: .75rem; }
.eh-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; padding: 1rem; border-radius: 12px;
            border: 1px solid var(--neutral-200, #e9e9e6); background: #fff; }
.eh-offer.chosen { border-color: var(--success-600, #16a34a); background: var(--success-50, #f0fdf4); }
.eh-offer.dim { opacity: .7; }
.eh-offer-price { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.eh-offer-side { display: grid; justify-items: end; gap: .35rem; }

/* Forms */
.eh-form { display: grid; gap: .8rem; }
.eh-field { display: grid; gap: .3rem; min-width: 0; }
.eh-field label, .eh-label { font-size: .82rem; font-weight: 700; color: var(--neutral-700, #44403c); }
.eh-input { width: 100%; border: 1px solid var(--neutral-300, #d6d3d1); border-radius: 9px; padding: .55rem .7rem; font-size: .95rem; background: #fff; }
.eh-input:focus { outline: 2px solid var(--brand-300, #93c5fd); border-color: var(--brand-500, #3b82f6); }
.eh-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .7rem; }
.eh-check { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
.eh-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.eh-error { color: var(--danger-600, #dc2626); font-size: .9rem; margin: 0; }
.eh-ok { background: var(--success-50, #f0fdf4); color: var(--success-700, #15803d); border-radius: 10px; padding: .7rem 1rem; font-weight: 600; font-size: .92rem; }

.eh-btn { border: 1px solid var(--neutral-300, #d6d3d1); background: #fff; color: var(--neutral-800, #292524); font-weight: 700;
          font-size: .9rem; padding: .55rem 1rem; border-radius: 10px; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; }
.eh-btn.primary { background: var(--brand-600, #2563eb); border-color: var(--brand-600, #2563eb); color: #fff; }
.eh-btn.primary:hover { background: var(--brand-700, #1d4ed8); }
.eh-btn.danger { color: var(--danger-600, #dc2626); border-color: var(--danger-50, #fef2f2); }
.eh-btn.small { font-size: .82rem; padding: .38rem .75rem; }
.eh-btn:disabled { opacity: .6; }
.eh-link { border: 0; background: none; padding: 0; color: var(--brand-700, #1d4ed8); font-weight: 600; font-size: .88rem; text-decoration: none; }
.eh-link:hover { text-decoration: underline; }
.eh-btn:focus-visible, .eh-link:focus-visible, .eh-tile:focus-visible, .eh-hero-btn:focus-visible { outline: 3px solid var(--brand-300, #93c5fd); outline-offset: 2px; }

/* Lists and tables */
.eh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.eh-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-bottom: .6rem; border-bottom: 1px solid var(--neutral-100, #f1f1ef); }
.eh-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.eh-list .eh-li-main { display: grid; min-width: 0; }
.eh-table-wrap { overflow-x: auto; }
.eh-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 620px; }
.eh-table th, .eh-table td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--neutral-100, #f1f1ef); vertical-align: top; }
.eh-table th { font-size: .78rem; color: var(--neutral-500, #78716c); font-weight: 700; }
.eh-num { font-variant-numeric: tabular-nums; }

.eh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.eh-stat { background: #fff; border: 1px solid var(--neutral-200, #e9e9e6); border-radius: 12px; padding: .8rem 1rem; display: grid; gap: .1rem; }
.eh-stat b { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.eh-stat span { font-size: .8rem; color: var(--neutral-600, #57534e); }

.eh-two { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }

@media (max-width: 1023.98px) { .eh-two { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) {
    .eh-body { padding: 1.1rem 1rem 3rem; }
    .eh-offer { grid-template-columns: 1fr; }
    .eh-offer-side { justify-items: start; }
    .eh-hero-btn { font-size: .85rem; }
}

/* ==========================================================================================
   Hire showroom (hs-*)
   The hire pages' design system since the "Showroom" redesign. Everything above this line (eh-*)
   still serves the yard editor, yard owner and admin pages; do not mix the two on one element.

   Character: a spec-sheet catalogue. Each machine is a navy line drawing with one safety-yellow
   part, standing on a warm graph-paper panel (hs-art). Blue is for actions only; yellow is for
   the drawings, group ticks, the launch pin and "Your move", never for text.

   Page shape:  <div class="hs-page"> <HeroHeader .../> <div class="hs-body" data-uhover-off> ... </div> </div>
   data-uhover-off keeps card-hover.js from giving every panel its lift-and-glow: here only the
   things you can click (hs-card, hs-ychip, buttons) respond to hover, and in their own way.
   Breakpoints: <= 1279.98px stacks the two-column layouts (the app sidebar takes 260px from
   992px up, so a 1280px screen has ~1020px of page); <= 767.98px is the phone spec.
   ========================================================================================== */

.hs-page, .hs-body {
    --hs-ink: #1b2d4f;            /* drawing line work, monograms, the navy panels */
    --hs-accent: #f5b301;         /* safety yellow: drawings, ticks, pin, "Your move". Never text. */
    --hs-accent-edge: #b88600;
    --hs-accent-soft: #fff8e0;
    --hs-panel: #efeee9;          /* warm spec-sheet tint behind every drawing */
    --hs-grid: rgba(27, 45, 79, .055);
    --hs-band: #e9e8e3;
    --hs-display: var(--font-display, 'Archivo', 'Segoe UI', Helvetica, Arial, sans-serif);
}
.hs-page { background: var(--neutral-100, #f4f4f2); color: var(--neutral-900, #1f2933); min-height: 100vh; }
/* Resets live on hs-body, not hs-page, so the shared page header above it is left alone. */
.hs-body :where(h1, h2, h3, h4, h5, p, dl, dd, blockquote, figure) { margin: 0; }
.hs-body :where(h2, h3, h4) { color: var(--neutral-900, #1f2933); font-family: var(--hs-display); }
.hs-body :where(p) { text-wrap: pretty; }
.hs-facts, .hs-track, .hs-feat-yards, .hs-how ol, .hs-privacy ul, .hs-list, .hs-dl { margin: 0; padding: 0; list-style: none; }
.hs-body a:focus-visible, .hs-body button:focus-visible, .hs-body summary:focus-visible {
    outline: 3px solid var(--brand-500, #3b82f6) !important; outline-offset: 3px !important;
}

.hs-body { max-width: 1240px; margin: 0 auto; padding: 28px 24px 56px; }
.hs-body.is-narrow { max-width: 1080px; }
.hs-loading { display: flex; justify-content: center; padding: 56px 0; }
.hs-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Section headings ---------------------------------------------------------------- */
.hs-section { margin-top: 48px; }
.hs-sec-head h2, .hs-h2 { font: 800 28px/1.1 var(--hs-display); letter-spacing: -.025em; }
.hs-sec-head p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--neutral-700, #4b5563); max-width: 760px; }
.hs-sec-head.is-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.hs-eyebrow { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--neutral-600, #6b7280); }
.hs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--neutral-700, #4b5563); }
.hs-crumbs a { color: var(--brand-700, #1d4ed8); font-weight: 500; text-decoration: none; }
.hs-crumbs a:hover { text-decoration: underline; }
.hs-crumbs i { font-size: 11px; color: var(--neutral-500, #9aa3ad); }

/* ---- The drawing and its graph-paper panel ------------------------------------------
   <div class="hs-art hs-thumb"><HireMachineArt Key="..." /></div>. hs-art is only the
   paper; the size classes below (or a component's own rule) set the box. */
.hs-ill { display: block; width: 100%; height: 100%; }
.hs-art {
    position: relative;
    background-color: var(--hs-panel);
    background-image: linear-gradient(var(--hs-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hs-grid) 1px, transparent 1px);
    background-size: 14px 14px; background-position: -1px -1px;
}
.hs-thumb { flex: none; width: 128px; height: 84px; padding: 8px 10px 4px; border-radius: var(--radius-md, 12px); }
.hs-thumb.is-lg { width: 156px; height: 100px; }
.hs-tile { flex: none; width: 88px; height: 56px; padding: 5px 6px 1px; border-radius: var(--radius-sm, 8px); }
.hs-near {
    position: absolute; top: 10px; left: 10px; z-index: 1;
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
    border-radius: var(--radius-pill, 999px); background: #fff; box-shadow: var(--shadow-sm);
    color: var(--success-800, #166534); font: 600 12px/1 Inter, sans-serif; white-space: nowrap;
}
.hs-near::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success-600, #16a34a); }

/* ---- Buttons and links ---------------------------------------------------------------
   hs-btn is the blue primary. Modifiers: is-secondary (white, blue text), is-ghost (on navy),
   is-lg, is-sm, is-block. hs-link is the quiet text link; hs-link.is-danger for "Cancel". */
.hs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
    min-height: 42px; padding: 0 18px; border: 1px solid transparent; border-radius: 10px;
    background: var(--brand-600, #2563eb); color: #fff; font: 600 14.5px/1.1 Inter, sans-serif;
    text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .14), 0 8px 18px -8px rgba(37, 99, 235, .6);
    transition: background-color var(--dur-fast, 120ms) var(--ease-out, ease), border-color var(--dur-fast, 120ms) var(--ease-out, ease);
}
.hs-btn:hover { background: var(--brand-700, #1d4ed8); color: #fff; }
.hs-btn:disabled, .hs-btn[aria-disabled="true"] { opacity: .6; cursor: default; }
.hs-btn.is-lg { min-height: 50px; padding: 0 26px; font-size: 15.5px; border-radius: 12px; }
.hs-btn.is-sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: 9px; }
.hs-btn.is-block { display: flex; width: 100%; }
.hs-btn.is-secondary { background: #fff; color: var(--brand-700, #1d4ed8); border-color: var(--neutral-400, #cbd0d6); box-shadow: var(--shadow-xs); }
.hs-btn.is-secondary:hover { background: var(--brand-50, #eff6ff); border-color: var(--brand-300, #93c5fd); color: var(--brand-800, #1e40af); }
.hs-btn.is-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .6); box-shadow: none; }
.hs-btn.is-ghost:hover { background: rgba(255, 255, 255, .1); }
.hs-btn.is-danger { background: #fff; color: var(--danger-700, #b91c1c); border-color: var(--danger-200, #fecaca); box-shadow: none; }
.hs-btn.is-danger:hover { background: var(--danger-50, #fef2f2); color: var(--danger-800, #991b1b); }
.hs-link {
    display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
    color: var(--brand-700, #1d4ed8); font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.hs-link:hover { color: var(--brand-800, #1e40af); text-decoration: underline; }
.hs-link.is-danger { color: var(--danger-700, #b91c1c); }

/* ---- Status chips, licence chips, monograms -------------------------------------------
   hs-status: is-wait (blue, waiting for replies), is-move (navy with a yellow pip: the hirer's
   turn), is-done (green), is-off (grey: cancelled, closed), is-no (white outline: can't do it). */
.hs-status {
    display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 28px; padding: 0 11px;
    border-radius: var(--radius-pill, 999px); border: 1px solid transparent;
    font: 600 12.5px/1 Inter, sans-serif; white-space: nowrap;
}
.hs-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hs-status.is-wait { background: var(--brand-50, #eff6ff); color: var(--brand-800, #1e40af); border-color: var(--brand-200, #bfdbfe); }
.hs-status.is-wait::before { background: var(--brand-600, #2563eb); }
.hs-status.is-move { background: var(--hs-ink); color: #fff; }
.hs-status.is-move::before { width: 9px; height: 9px; background: var(--hs-accent); box-shadow: 0 0 0 3px rgba(245, 179, 1, .3); }
.hs-status.is-done { background: var(--success-50, #f0fdf4); color: var(--success-800, #166534); border-color: var(--success-200, #bbf7d0); }
.hs-status.is-done::before { background: var(--success-600, #16a34a); }
.hs-status.is-off { background: var(--neutral-200, #e9e9e6); color: var(--neutral-800, #333d47); }
.hs-status.is-off::before { background: var(--neutral-500, #9aa3ad); }
.hs-status.is-no { background: #fff; color: var(--neutral-700, #4b5563); border-color: var(--neutral-400, #cbd0d6); }
.hs-status.is-no::before { display: none; }

.hs-lic {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 4px 9px;
    border-radius: 6px; border: 1px solid var(--neutral-300, #e5e7eb); background: var(--neutral-50, #f8f8f7);
    color: var(--neutral-800, #333d47); font: 600 12px/1.2 Inter, sans-serif; white-space: nowrap;
}
.hs-lic.is-ok { background: var(--success-50, #f0fdf4); color: var(--success-800, #166534); border-color: var(--success-200, #bbf7d0); }
.hs-lic.is-warn { background: var(--warning-50, #fffbeb); color: var(--warning-800, #92400e); border-color: var(--warning-200, #fde68a); }
.hs-lic.is-comp { background: #fff; color: var(--neutral-800, #333d47); border-color: var(--neutral-300, #e5e7eb); }

.hs-mono {
    flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    background: var(--hs-ink); color: #fff; font: 700 12.5px/1 var(--hs-display); letter-spacing: .03em;
}
.hs-mono.is-lg { width: 50px; height: 50px; border-radius: 13px; font-size: 16px; }
.hs-mono.is-muted { background: var(--neutral-200, #e9e9e6); color: var(--neutral-700, #4b5563); }

/* "Your move": the one place the yellow carries words. */
.hs-move {
    display: inline-block; padding: 4px 8px; border-radius: 4px; background: var(--hs-accent);
    color: var(--neutral-900, #1f2933); font: 600 12.5px/1 Inter, sans-serif; white-space: nowrap;
}

/* ---- Booking bar: what, where, when --------------------------------------------------
   <section class="hs-book"> <div class="hs-book-head">h2+p</div> <form class="hs-bar"> with
   .hs-seg children (hs-seg-machine, -site, -start, -end, -delivery) and a .hs-bar-go button.
   The bar lays itself out from its own width (container query), not the viewport, because
   the app sidebar makes the page narrower than the screen. */
.hs-book { container: hs-book / inline-size; }
.hs-book-head h2 { font: 700 24px/1.2 var(--hs-display); letter-spacing: -.02em; }
.hs-book-head p { margin-top: 6px; font-size: 14.5px; color: var(--neutral-700, #4b5563); }
.hs-bar {
    margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch;
    background: #fff; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 20px; padding: 6px;
    box-shadow: 0 1px 0 rgba(16, 24, 40, .03), 0 18px 40px -18px rgba(16, 24, 40, .28), 0 4px 10px -4px rgba(16, 24, 40, .08);
}
.hs-seg {
    position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0;
    min-height: 68px; padding: 11px 18px 11px 20px; border-radius: 14px;
    transition: background-color var(--dur-fast, 120ms) var(--ease-out, ease);
}
.hs-seg:hover { background: var(--neutral-50, #f8f8f7); }
.hs-seg:focus-within { background: var(--neutral-50, #f8f8f7); box-shadow: inset 0 0 0 2px var(--brand-500, #3b82f6); }
.hs-seg::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: var(--neutral-300, #e5e7eb); display: none; }
.hs-seg::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--neutral-200, #e9e9e6); display: none; }
.hs-seg:hover::before, .hs-seg:focus-within::before, .hs-seg:hover + .hs-seg::before, .hs-seg:focus-within + .hs-seg::before { opacity: 0; }
.hs-seg-machine, .hs-seg-site { grid-column: span 2; }
.hs-seg-site::before, .hs-seg-end::before, .hs-seg-delivery::before { display: block; }
.hs-seg-machine::after { display: block; left: 18px; }
.hs-seg-site::after { display: block; right: 18px; }
.hs-seg-label { font-size: 12.5px; font-weight: 600; color: var(--neutral-900, #1f2933); cursor: pointer; }
.hs-seg-input {
    display: block; width: 100%; min-width: 0; height: 26px; padding: 0; margin: 0; border: 0; border-radius: 0;
    background: transparent; color: var(--neutral-900, #1f2933); font: 400 15.5px/26px Inter, sans-serif;
    appearance: none; -webkit-appearance: none;
}
.hs-seg-input option, .hs-seg-input optgroup { color: var(--neutral-900, #1f2933); }
.hs-seg-input::placeholder { color: var(--neutral-600, #6b7280); opacity: 1; }
select.hs-seg-input { cursor: pointer; padding-right: 22px; text-overflow: ellipsis; }
select.hs-seg-input.is-empty, input.hs-seg-input.is-empty { color: var(--neutral-600, #6b7280); }
input[type="date"].hs-seg-input { cursor: pointer; }
input[type="date"].hs-seg-input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
/* An empty date field reads "Add date" in muted ink, not a full-ink dd/mm/yyyy that looks filled in.
   <span class="hs-date"><input type="date" class="hs-seg-input is-empty"><span class="hs-date-ph">
   While empty and not focused the native text is hidden under the label; on focus the label goes
   and the format shows, muted, until a date is picked (the page drops is-empty then). */
.hs-date { position: relative; display: block; min-width: 0; }
.hs-date-ph {
    position: absolute; top: 0; left: 0; right: 26px; height: 26px; overflow: hidden; pointer-events: none;
    color: var(--neutral-600, #6b7280); font: 400 15.5px/26px Inter, sans-serif; white-space: nowrap;
}
.hs-seg:focus-within .hs-date-ph { display: none; }
input[type="date"].hs-seg-input.is-empty:not(:focus) { color: transparent; }
input[type="date"].hs-seg-input.is-empty:not(:focus)::-webkit-datetime-edit { color: transparent; }
input[type="date"].hs-seg-input.is-empty:focus::-webkit-datetime-edit { color: var(--neutral-600, #6b7280); }
.hs-seg .hs-seg-input:focus, .hs-seg .hs-seg-input:focus-visible { outline: none !important; box-shadow: none !important; }
.hs-seg-caret { position: absolute; right: 16px; bottom: 16px; font-size: 13px; color: var(--neutral-600, #6b7280); pointer-events: none; }
.hs-seg-site-row { display: flex; align-items: center; min-width: 0; }
.hs-seg-site-row > .hs-seg-input { flex: 1 1 auto; }
.hs-seg-site-row > .hs-seg-state, .hs-seg-site-row > .hs-seg-pc { flex: none; margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--neutral-300, #e5e7eb); }
.hs-seg-site-row > .hs-seg-state {
    width: 64px; padding-right: 16px;
    background: no-repeat right 2px center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
}
.hs-seg-site-row > .hs-seg-pc { width: 76px; }
.hs-bar-go {
    grid-column: span 1; margin: 6px 0 0 6px; padding: 0 22px; min-height: 58px; border: 0; border-radius: 14px;
    background: var(--brand-600, #2563eb); color: #fff; font: 600 16px/1.1 Inter, sans-serif; white-space: nowrap; cursor: pointer;
    box-shadow: 0 8px 24px -6px rgba(37, 99, 235, .45);
    transition: background-color var(--dur-fast, 120ms) var(--ease-out, ease);
}
.hs-bar-go:hover { background: var(--brand-700, #1d4ed8); }
.hs-bar-msg {
    display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm, 8px);
    background: var(--danger-50, #fef2f2); color: var(--danger-800, #991b1b); font-size: 13.5px; font-weight: 500;
}
.hs-bar-foot { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 0 6px; font-size: 13.5px; line-height: 1.4; color: var(--neutral-700, #4b5563); }
.hs-bar-foot i { margin-top: 1px; }

@container hs-book (min-width: 1020px) {
    .hs-bar { grid-template-columns: minmax(0, 1.45fr) minmax(0, 2fr) minmax(0, .95fr) minmax(0, .95fr) minmax(0, 1.2fr) auto; }
    .hs-seg-machine, .hs-seg-site { grid-column: auto; }
    .hs-seg { padding: 11px 14px 11px 16px; }
    .hs-seg-caret { right: 12px; }
    input[type="date"].hs-seg-input, .hs-date-ph { font-size: 15px; }
    .hs-seg::before { display: block; }
    .hs-seg-machine::before { display: none; }
    .hs-seg::after { display: none !important; }
    .hs-bar-go { margin: 0 0 0 6px; padding: 0 24px; min-height: 68px; }
}
@container hs-book (max-width: 599.98px) {
    .hs-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 18px; padding: 4px; }
    .hs-seg-machine, .hs-seg-site, .hs-seg-delivery { grid-column: 1 / -1; }
    .hs-seg { min-height: 0; padding: 10px 14px; border-radius: 12px; }
    .hs-seg::before { display: none !important; }
    .hs-seg::after { display: none !important; }
    .hs-seg-machine, .hs-seg-site, .hs-seg-start, .hs-seg-end { border-bottom: 1px solid var(--neutral-200, #e9e9e6); border-radius: 0; }
    .hs-seg-end { border-left: 1px solid var(--neutral-200, #e9e9e6); }
    .hs-seg:focus-within { border-radius: 12px; }
    .hs-seg-input, .hs-date-ph { font-size: 16px; }
    .hs-seg-site-row > .hs-seg-pc { width: 88px; }
    .hs-seg-caret { bottom: 14px; right: 14px; }
    .hs-bar-go { grid-column: 1 / -1; margin: 4px 0 0; min-height: 52px; }
}

/* ---- Top of the hub: the request card beside "How it works" -------------------------- */
.hs-top { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.hs-top.is-solo { grid-template-columns: minmax(0, 1fr); }
.hs-top-main { display: grid; gap: 20px; min-width: 0; }
/* is-lead: it's the hirer's move (or a yard is chosen), so the request card comes first and the
   booking bar follows it. The page renders them in that order; this only moves the spacing. */
.hs-body.is-lead > .hs-top { margin-top: 0; }
.hs-body.is-lead > .hs-book { margin-top: 44px; }

/* The request card. <article class="hs-req"> hs-req-main (thumb, info, state) / hs-track /
   hs-best / hs-req-foot. */
.hs-req { background: #fff; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-lg); overflow: hidden; }
.hs-req-main { display: flex; align-items: flex-start; gap: 18px; padding: 20px 22px 18px; }
.hs-req-info { flex: 1; min-width: 0; }
.hs-req-title { font: 700 23px/1.2 var(--hs-display); letter-spacing: -.015em; }
.hs-req-title a { color: inherit; text-decoration: none; }
.hs-req-title a:hover { color: var(--brand-700, #1d4ed8); }
.hs-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13.5px; color: var(--neutral-700, #4b5563); }
.hs-facts li { display: inline-flex; align-items: center; gap: 7px; }
.hs-facts i { color: var(--neutral-500, #9aa3ad); font-size: 13px; }
.hs-req-state { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.hs-replied { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--success-700, #15803d); white-space: nowrap; }
.hs-replied.is-none { color: var(--neutral-600, #6b7280); font-weight: 500; }
.hs-replied i { font-size: 15px; }
.hs-req .hs-track { padding: 4px 22px 18px; }
.hs-best { display: flex; align-items: center; gap: 12px; margin: 0 22px; padding: 12px 14px; border: 1px solid var(--neutral-200, #e9e9e6); border-radius: var(--radius-md, 12px); }
.hs-best-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.hs-best-name small { display: block; font-size: 12.5px; font-weight: 400; color: var(--neutral-600, #6b7280); }
.hs-best-price { flex: none; text-align: right; font-size: 12.5px; line-height: 1.3; color: var(--neutral-600, #6b7280); }
.hs-best-price b { display: block; font: 700 19px/1.1 var(--hs-display); color: var(--neutral-900, #1f2933); font-variant-numeric: tabular-nums; }
.hs-best.is-empty { gap: 10px; background: var(--neutral-50, #f8f8f7); border-color: transparent; font-size: 13.5px; line-height: 1.45; color: var(--neutral-700, #4b5563); }
.hs-best.is-empty i { flex: none; align-self: flex-start; margin-top: 1px; color: var(--neutral-600, #6b7280); }
/* Every yard asked, one row each: <ul class="hs-rlist"> of <li class="hs-rrow"> (hs-mono, hs-rname
   with a small "5.1 km from the site", then hs-rprice or hs-rno). is-off = no price from this yard
   ("Can't do these dates", "Not replied yet"): muted monogram and name. */
.hs-rlist { margin: 0 22px; padding: 0; list-style: none; border: 1px solid var(--neutral-200, #e9e9e6); border-radius: var(--radius-md, 12px); }
.hs-rrow { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.hs-rrow + .hs-rrow { border-top: 1px solid var(--neutral-200, #e9e9e6); }
.hs-rname { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; line-height: 1.3; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.hs-rname small { display: block; font-size: 12.5px; font-weight: 400; color: var(--neutral-600, #6b7280); }
.hs-rprice { flex: none; text-align: right; font-size: 12.5px; line-height: 1.3; color: var(--neutral-600, #6b7280); }
.hs-rprice b { display: block; font: 700 19px/1.1 var(--hs-display); color: var(--neutral-900, #1f2933); font-variant-numeric: tabular-nums; }
.hs-rno { flex: none; text-align: right; font-size: 13px; line-height: 1.3; color: var(--neutral-600, #6b7280); }
.hs-rrow.is-off .hs-rname { color: var(--neutral-700, #4b5563); }
.hs-rlist + .hs-best { margin-top: 10px; }
.hs-req-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 16px 22px 18px; }
.hs-req-foot-end { display: flex; align-items: center; gap: 16px; margin-left: auto; }

/* The 4-step tracker. <ol class="hs-track"> of <li class="is-done|is-now|is-move|is-stop">
   <span class="hs-node"></span><b>Title</b><span class="hs-step-sub">caption</span></li>.
   is-move goes with is-now when it's the hirer's turn (yellow node + a .hs-move marker).
   On a phone it hides and .hs-track-m (four bars + one line) takes its place. */
.hs-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hs-track li { position: relative; padding: 34px 16px 0 0; min-width: 0; }
.hs-track li::after { content: ""; position: absolute; top: 11px; left: 32px; right: 8px; height: 2px; border-radius: 2px; background: var(--neutral-300, #e5e7eb); }
.hs-track li:last-child::after { display: none; }
.hs-track li.is-done::after { background: var(--brand-600, #2563eb); }
.hs-node {
    position: absolute; top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    border: 2px solid var(--neutral-400, #cbd0d6); background: #fff; color: var(--neutral-700, #4b5563); font: 700 11px/1 var(--hs-display);
}
.hs-track li.is-done .hs-node { background: var(--brand-600, #2563eb); border-color: var(--brand-600, #2563eb); color: #fff; font-size: 13px; }
.hs-track li.is-now .hs-node { border-color: var(--brand-600, #2563eb); box-shadow: 0 0 0 4px var(--brand-100, #dbeafe); }
.hs-track li.is-now .hs-node::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-600, #2563eb); }
.hs-track li.is-move .hs-node { background: var(--hs-accent); border-color: var(--hs-accent-edge); box-shadow: 0 0 0 5px rgba(245, 179, 1, .28); }
.hs-track li.is-move .hs-node::after { display: none; }
.hs-track li.is-stop .hs-node { background: var(--neutral-200, #e9e9e6); border-color: var(--neutral-500, #9aa3ad); color: var(--neutral-800, #333d47); }
.hs-track b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--neutral-900, #1f2933); }
.hs-track li:not(.is-done):not(.is-now):not(.is-stop) b { color: var(--neutral-700, #4b5563); }
.hs-step-sub { display: block; margin-top: 5px; font-size: 13px; line-height: 1.4; color: var(--neutral-600, #6b7280); }
.hs-step-sub .hs-move { margin-top: -1px; }
.hs-track-m { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.hs-track-m i { height: 6px; border-radius: 3px; background: var(--neutral-300, #e5e7eb); }
.hs-track-m i.is-done { background: var(--brand-600, #2563eb); }
.hs-track-m i.is-now { background: var(--brand-300, #93c5fd); }
.hs-track-m i.is-move { background: var(--hs-accent); box-shadow: inset 0 0 0 1px var(--hs-accent-edge); }
.hs-track-m i.is-stop { background: var(--neutral-500, #9aa3ad); }
.hs-track-m-t { display: none; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; font-size: 13.5px; color: var(--neutral-700, #4b5563); }
.hs-track-m-t b { color: var(--neutral-900, #1f2933); }
/* The tracker on its own, full width (the replies page). */
.hs-trackcard { padding: 18px 22px 16px; background: #fff; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); }

/* Compact list of the hirer's requests ("All your requests"). */
.hs-mylist { background: #fff; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); overflow: hidden; }
.hs-mylist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.hs-mylist-head h2, .hs-mylist-head h3 { font: 700 16.5px/1.2 var(--hs-display); }
.hs-mylist-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--neutral-200, #e9e9e6); color: inherit; text-decoration: none; transition: background-color var(--dur-fast, 120ms) ease; }
.hs-mylist-row:hover { background: var(--neutral-50, #f8f8f7); color: inherit; }
.hs-mylist-row .hs-tile { width: 64px; height: 42px; padding: 3px 4px 1px; }
.hs-mylist-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.hs-mylist-text b { font-size: 14.5px; font-weight: 600; color: var(--neutral-900, #1f2933); }
.hs-mylist-text small { font-size: 12.5px; color: var(--neutral-600, #6b7280); }
.hs-mylist-go { flex: none; font-size: 13px; color: var(--neutral-500, #9aa3ad); }

/* ---- How it works ----------------------------------------------------------------------
   <aside class="hs-how"> h2, <ol> of <li><span class="hs-n">1</span><div><b/>p</div></li>,
   then <p class="hs-free">. is-wide lays the steps out in a row (no request card beside it). */
.hs-how { border-top: 3px solid var(--hs-ink); padding-top: 18px; }
.hs-how h2 { font: 700 19px/1.2 var(--hs-display); letter-spacing: -.01em; }
.hs-how ol { margin-top: 16px; display: grid; gap: 16px; }
.hs-how li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.hs-how li:not(:last-child)::before { content: ""; position: absolute; left: 14.25px; top: 34px; bottom: -14px; width: 1.5px; background: var(--neutral-400, #cbd0d6); }
.hs-n {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    border: 1.5px solid var(--hs-ink); color: var(--hs-ink); background: var(--neutral-100, #f4f4f2); font: 700 13px/1 var(--hs-display);
}
.hs-how li b { display: block; margin: 4px 0 3px; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.hs-how li p { font-size: 13.5px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
.hs-free {
    display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--neutral-300, #e5e7eb); font-size: 13.5px; font-weight: 500; color: var(--neutral-800, #333d47);
}
.hs-free i { color: var(--success-700, #15803d); font-size: 16px; line-height: 1.3; }
.hs-how.is-wide ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hs-how.is-wide li::before { display: none; }

/* ---- Available near you now: one featured card per listed machine --------------------
   <article class="hs-feat"> hs-feat-top (hs-art.hs-feat-art + hs-feat-title) / <ul class=
   "hs-feat-yards"> of <li class="hs-fy"> (hs-mono, hs-fy-text, hs-fy-price) and <li class=
   "hs-fy-note"> / <footer class="hs-feat-foot">. */
/* At most two cards a row: on the full-width public layout a third, empty track would otherwise
   leave two cards and a hole. */
.hs-avail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(440px, calc(50% - 10px))), 1fr)); gap: 20px; margin-top: 18px; align-items: stretch; }
.hs-feat {
    display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1.5px solid var(--brand-200, #bfdbfe);
    border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-md); overflow: hidden;
}
.hs-feat-top { display: grid; grid-template-columns: clamp(140px, 40%, 212px) minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px 20px 16px; }
.hs-feat-art { height: 128px; padding: 30px 16px 4px; border-radius: var(--radius-md, 12px); }
.hs-feat-title { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.hs-feat-title h3 { font: 800 24px/1.15 var(--hs-display); letter-spacing: -.02em; }
.hs-feat-title h3 a { color: inherit; text-decoration: none; }
.hs-feat-title h3 a:hover { color: var(--brand-700, #1d4ed8); }
.hs-feat-price { margin-top: 6px; font-size: 14px; color: var(--neutral-700, #4b5563); }
.hs-feat-price b { font: 800 30px/1 var(--hs-display); color: var(--neutral-900, #1f2933); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hs-feat-title .hs-lic { margin-top: 10px; }
.hs-feat-yards { margin: 0 20px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.hs-fy { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.hs-fy + .hs-fy, .hs-fy-note + .hs-fy { border-top: 1px solid var(--neutral-200, #e9e9e6); }
.hs-fy-text { flex: 1; min-width: 0; line-height: 1.35; }
.hs-fy-text b { font-size: 14.5px; font-weight: 600; }
.hs-fy-text b a { color: inherit; text-decoration: none; }
.hs-fy-text b a:hover { color: var(--brand-700, #1d4ed8); text-decoration: underline; }
.hs-fy-item { font-size: 13.5px; color: var(--neutral-800, #333d47); }
.hs-fy-item::before { content: ", "; }
.hs-fy-text small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--neutral-600, #6b7280); }
.hs-fy-price { flex: none; text-align: right; line-height: 1.2; }
.hs-fy-price b { display: block; font: 700 19px/1.1 var(--hs-display); font-variant-numeric: tabular-nums; }
.hs-fy-price small { font-size: 12.5px; color: var(--neutral-600, #6b7280); }
.hs-fy-note {
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; padding: 11px 12px; border-radius: var(--radius-sm, 8px);
    background: var(--neutral-50, #f8f8f7); font-size: 13px; line-height: 1.45; color: var(--neutral-800, #333d47);
}
.hs-fy-note i { flex: none; color: var(--neutral-600, #6b7280); line-height: 1.45; }
.hs-feat-foot {
    margin-top: auto; display: flex; align-items: center; gap: 14px; padding: 14px 20px;
    background: var(--brand-50, #eff6ff); border-top: 1px solid var(--brand-100, #dbeafe); font-size: 13.5px; color: var(--neutral-800, #333d47);
}
.hs-feat-note { margin-top: 12px; display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--neutral-700, #4b5563); }

/* ---- Launch band ------------------------------------------------------------------------
   <div class="hs-launch"> hs-launch-copy (hs-pin + b + p), then hs-ychip links to yards. */
.hs-launch {
    margin-top: 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    padding: 14px 14px 14px 18px; border-radius: var(--radius-md, 12px); background: var(--hs-band);
}
.hs-launch-copy { flex: 1 1 420px; min-width: 0; display: flex; gap: 14px; align-items: center; }
.hs-pin {
    flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    background: var(--hs-accent); color: var(--hs-ink); font-size: 16px;
}
.hs-launch-copy b { display: block; font: 700 15.5px/1.3 var(--hs-display); }
.hs-launch-copy p { margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--neutral-700, #4b5563); }
.hs-ychips { display: flex; flex-wrap: wrap; gap: 10px; }
.hs-ychip {
    display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 12px; border: 1px solid transparent;
    background: #fff; box-shadow: var(--shadow-xs); color: inherit; text-decoration: none;
    transition: border-color var(--dur-base, 200ms) var(--ease-out, ease);
}
.hs-ychip:hover { border-color: var(--neutral-400, #cbd0d6); color: inherit; }
.hs-launch-more { align-self: center; font-size: 13px; color: var(--neutral-700, #4b5563); }
.hs-ychip b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.hs-ychip small { display: block; font-size: 12.5px; color: var(--neutral-600, #6b7280); }
/* is-zero: no yard lists anywhere yet (production at launch). The band is then the page's only word on
   coverage, so it stands up: the spec-sheet paper, a bigger pin, a display-size title. */
.hs-launch.is-zero {
    margin-top: 36px; gap: 20px; padding: 28px 32px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-lg, 16px);
    background-color: var(--hs-panel);
    background-image: linear-gradient(var(--hs-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hs-grid) 1px, transparent 1px);
    background-size: 14px 14px; background-position: -1px -1px;
}
.hs-launch.is-zero .hs-launch-copy { gap: 22px; }
.hs-launch.is-zero .hs-pin { width: 60px; height: 60px; font-size: 26px; box-shadow: 0 0 0 8px rgba(245, 179, 1, .22); }
.hs-launch.is-zero .hs-launch-copy b { font: 800 26px/1.15 var(--hs-display); letter-spacing: -.02em; }
.hs-launch.is-zero .hs-launch-copy p { margin-top: 8px; max-width: 720px; font-size: 15px; line-height: 1.5; color: var(--neutral-800, #333d47); }

/* ---- Browse by machine -------------------------------------------------------------------
   hs-chips: group filter buttons (aria-pressed="true" is the selected one).
   hs-group > hs-ghead (h3 + p + hs-gcount) > hs-grid of hs-card (listed) and hs-rows of hs-row (not listed yet). */
.hs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hs-chip {
    min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-pill, 999px);
    background: #fff; border: 1px solid var(--neutral-300, #e5e7eb); color: var(--neutral-800, #333d47);
    font: 500 14px/1 Inter, sans-serif; white-space: nowrap; cursor: pointer; text-decoration: none;
    transition: border-color var(--dur-fast, 120ms) ease, background-color var(--dur-fast, 120ms) ease;
}
.hs-chip:hover { border-color: var(--neutral-500, #9aa3ad); color: var(--neutral-900, #1f2933); }
.hs-chip[aria-pressed="true"], .hs-chip.is-on { background: var(--hs-ink); border-color: var(--hs-ink); color: #fff; }

.hs-group { margin-top: 36px; }
.hs-ghead {
    position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding-bottom: 12px; border-bottom: 1px solid var(--neutral-400, #cbd0d6);
}
.hs-ghead::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 40px; height: 3px; border-radius: 2px; background: var(--hs-accent); }
.hs-ghead-text { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }
.hs-ghead h3 { font: 700 22px/1.2 var(--hs-display); letter-spacing: -.015em; }
.hs-ghead p { font-size: 14px; color: var(--neutral-700, #4b5563); }
.hs-gcount { flex: none; font-size: 13px; font-weight: 500; color: var(--neutral-700, #4b5563); font-variant-numeric: tabular-nums; }

.hs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 16px; }
.hs-card {
    display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--neutral-300, #e5e7eb);
    border-radius: var(--radius-md, 12px); overflow: hidden; color: inherit; text-decoration: none;
    transition: box-shadow var(--dur-base, 200ms) var(--ease-out, ease), transform var(--dur-base, 200ms) var(--ease-out, ease), border-color var(--dur-base, 200ms) ease;
}
.hs-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--neutral-400, #cbd0d6); color: inherit; }
.hs-card.is-listed { border: 2px solid var(--brand-300, #93c5fd); box-shadow: var(--shadow-md); }
.hs-card.is-listed:hover { border-color: var(--brand-400, #60a5fa); box-shadow: var(--shadow-lg); }
.hs-card-art { height: 150px; padding: 18px 22px 6px; border-bottom: 1px solid var(--neutral-200, #e9e9e6); }
.hs-card.is-listed .hs-card-art { padding-top: 32px; }
.hs-card-body { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; }
.hs-card-body h4 { font: 700 16.5px/1.25 var(--hs-display); letter-spacing: -.01em; }
.hs-card-body p { font-size: 13px; line-height: 1.45; color: var(--neutral-600, #6b7280); }
.hs-card-body .hs-lic { margin-top: 6px; }
.hs-card-yes { display: none; }
.hs-card-foot { display: flex; align-items: center; min-height: 58px; padding: 12px 16px 13px; background: var(--brand-50, #eff6ff); border-top: 1px solid var(--brand-100, #dbeafe); }
.hs-from { font-size: 13px; color: var(--neutral-700, #4b5563); }
.hs-from b { font: 800 20px/1 var(--hs-display); color: var(--neutral-900, #1f2933); font-variant-numeric: tabular-nums; }
.hs-from small { font-size: 12.5px; color: var(--neutral-700, #4b5563); }
/* The chevron a listed card shows as a phone row (<i class="bi bi-chevron-right hs-card-go">). */
.hs-card-go { display: none; flex: none; font-size: 13px; color: var(--neutral-500, #9aa3ad); }

/* Machine types no yard lists yet: compact rows, still with the drawing. Two a line at most, so a
   group of four is two by two on the full-width public layout too, not three and a stray. */
.hs-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(440px, calc(50% - 6px))), 1fr)); gap: 12px; margin-top: 16px; }

/* A group's cards and rows. <div class="hs-group-body is-split" style="--hs-cards: 1"> puts one or
   two listed cards beside the rows (stacked in one column); without is-split the cards get their
   own full-width grid and the rows sit under it. has-both (cards and rows) joins them into one
   list on a phone. */
.hs-group-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-top: 16px; }
.hs-group-body > .hs-grid, .hs-group-body > .hs-rows { flex: 1 1 100%; min-width: 0; margin-top: 0; }
.hs-group-body.is-split > .hs-grid { flex: 0 1 auto; grid-template-columns: repeat(var(--hs-cards, 1), minmax(0, 260px)); }
.hs-group-body.is-split > .hs-rows { flex: 1 1 340px; grid-template-columns: minmax(0, 1fr); }

/* <div class="hs-row"> tile, hs-row-text (h4 > a.hs-row-link, desc, licence), a.hs-row-go, i.hs-row-chev.
   The name's link stretches over the whole row (to the machine's page); "Request it" sits above it. */
.hs-row {
    position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 10px 14px 10px 10px;
    background: #fff; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px);
    transition: border-color var(--dur-fast, 120ms) ease, background-color var(--dur-fast, 120ms) ease;
}
.hs-row:hover { border-color: var(--neutral-400, #cbd0d6); }
.hs-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.3; }
.hs-row-name { font: 700 15px/1.25 var(--hs-display); color: var(--neutral-900, #1f2933); }
.hs-row-link { color: inherit; text-decoration: none; }
.hs-row-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md, 12px); }
.hs-row:hover .hs-row-link { color: var(--brand-700, #1d4ed8); }
.hs-body .hs-row-link:focus-visible { outline: none !important; }
.hs-row-link:focus-visible::after { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
.hs-row-chev { display: none; flex: none; font-size: 13px; color: var(--neutral-500, #9aa3ad); }
.hs-row-desc { font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); }
.hs-row-lic { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--neutral-800, #333d47); white-space: nowrap; }
.hs-row-lic i { font-size: 12.5px; color: var(--neutral-600, #6b7280); }
.hs-row-lic.is-ok { color: var(--success-800, #166534); }
.hs-row-lic.is-ok i { color: var(--success-700, #15803d); }
.hs-row-lic.is-warn { color: var(--warning-800, #92400e); }
.hs-row-lic.is-warn i { color: var(--warning-700, #b45309); }
.hs-row-go { position: relative; z-index: 1; flex: none; align-self: center; padding: 8px 2px 8px 6px; }

/* Split groups on a tablet or desktop: the rows column stretches to the card's height and shares it,
   with bigger drawings so it balances the card, and "Request it" sits beside the text rather than at
   the far edge of an ~850px row. */
@media (min-width: 768px) {
    .hs-group-body.is-split { align-items: stretch; }
    .hs-group-body.is-split > .hs-rows { grid-auto-rows: 1fr; }
    .hs-group-body.is-split .hs-row { gap: 18px; padding: 12px 18px 12px 12px; }
    .hs-group-body.is-split .hs-row .hs-tile { width: 120px; height: 76px; padding: 7px 8px 2px; }
    .hs-group-body.is-split .hs-row-text { flex: 0 1 420px; }
    .hs-group-body.is-split .hs-row-name { font-size: 16px; }
    .hs-group-body.is-split .hs-row-desc { font-size: 13px; }
}

/* The hub (hs-body is-hub), signed out: the page sits in the full-width public layout, where the
   header's title is 1.6rem in from the edge (container-fluid gutter + hero-top padding). A centred
   1240px column put the body ~100px to the right of it at 1440px; line the body up with the header
   instead. In the app shell (main.app-main) the body keeps the centred column the other signed-in
   pages use. */
@media (min-width: 768px) {
    main:not(.app-main) .hs-body.is-hub { max-width: none; margin: 0; padding-left: 1.6rem; padding-right: 1.6rem; }
}

/* ---- "Run a hire yard?" band ---------------------------------------------------------- */
.hs-yardband {
    position: relative; margin-top: 44px; display: flex; align-items: center; justify-content: space-between; gap: 20px 32px;
    padding: 26px 28px; border-radius: var(--radius-lg, 16px); overflow: hidden; color: #fff;
    background: linear-gradient(135deg, rgba(10, 22, 45, .95), rgba(18, 38, 78, .92)), url("/images/heroes/hero-assets.jpg") center / cover, var(--hs-ink);
}
.hs-yardband::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--hs-accent); }
.hs-yardband h2, .hs-yardband h3 { font: 700 20px/1.2 var(--hs-display); color: #fff; }
.hs-yardband p { margin-top: 6px; max-width: 640px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.hs-yardband a:focus-visible, .hs-privacy a:focus-visible { outline-color: #fff !important; }

/* ---- Replies: reply cards and the price panel ------------------------------------------
   <article class="hs-offer"> hs-offer-head (hs-mono.is-lg, name, hs-dist or hs-status) /
   hs-offer-body (hs-machine with a thumb, hs-price with hs-big) / hs-quote / hs-listed /
   hs-offer-foot. is-off = a yard that can't do it (flat, grey); is-chosen = the booked one. */
.hs-rep-top h2 { font: 800 28px/1.1 var(--hs-display); letter-spacing: -.02em; }
.hs-rep-top p { margin-top: 6px; font-size: 14.5px; color: var(--neutral-700, #4b5563); }
.hs-rep-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; margin-top: 22px; align-items: start; }
.hs-rep-main { display: grid; gap: 14px; min-width: 0; }
.hs-offer { background: #fff; border: 1px solid var(--brand-200, #bfdbfe); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-xl); overflow: hidden; }
.hs-offer.is-chosen { border: 2px solid var(--success-600, #16a34a); box-shadow: var(--shadow-lg); }
.hs-offer.is-off { background: var(--neutral-50, #f8f8f7); border-color: var(--neutral-300, #e5e7eb); box-shadow: none; }
.hs-offer.is-wait { border-color: var(--neutral-300, #e5e7eb); box-shadow: var(--shadow-sm); }
.hs-offer-head { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--neutral-200, #e9e9e6); }
.hs-offer.is-off .hs-offer-head, .hs-offer.is-wait .hs-offer-head { border-bottom: 0; padding: 16px 20px; }
.hs-offer-head > div { min-width: 0; }
.hs-offer-head h3 { font: 700 20px/1.2 var(--hs-display); letter-spacing: -.01em; }
.hs-offer-head h3 a { color: inherit; text-decoration: none; }
.hs-offer-head h3 a:hover { color: var(--brand-700, #1d4ed8); text-decoration: underline; }
.hs-offer.is-off h3, .hs-offer.is-wait h3 { font-size: 17px; color: var(--neutral-800, #333d47); }
.hs-offer-head p { margin-top: 3px; font-size: 13.5px; color: var(--neutral-600, #6b7280); }
.hs-offer-head > .hs-status, .hs-offer-head > .hs-dist, .hs-offer-head > .hs-push { margin-left: auto; }
.hs-dist {
    flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px;
    border-radius: var(--radius-pill, 999px); background: var(--neutral-100, #f4f4f2); font-size: 13px; font-weight: 600; color: var(--neutral-800, #333d47); white-space: nowrap;
}
.hs-offer-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 22px 24px 18px; }
.hs-machine { display: flex; align-items: center; gap: 18px; min-width: 0; }
.hs-machine > div:last-child { min-width: 0; }
.hs-machine b { display: block; font: 700 18px/1.25 var(--hs-display); }
.hs-label { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 500; color: var(--neutral-600, #6b7280); }
.hs-sub { display: block; margin-top: 3px; font-size: 13px; color: var(--neutral-600, #6b7280); }
.hs-price { text-align: right; padding-left: 24px; border-left: 1px solid var(--neutral-200, #e9e9e6); }
.hs-big { font: 800 52px/1 var(--hs-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--neutral-900, #1f2933); }
.hs-quote {
    margin: 0 24px; padding: 14px 16px; border-radius: var(--radius-md, 12px); background: var(--neutral-50, #f8f8f7);
    border: 1px solid var(--neutral-200, #e9e9e6); font-size: 15px; line-height: 1.5;
}
.hs-listed { display: flex; align-items: flex-start; gap: 8px; margin: 12px 24px 0; font-size: 13px; line-height: 1.45; color: var(--neutral-700, #4b5563); font-variant-numeric: tabular-nums; }
.hs-listed i { color: var(--neutral-500, #9aa3ad); }
.hs-offer-foot { display: flex; align-items: center; gap: 22px; margin-top: 20px; padding: 18px 24px; background: var(--brand-50, #eff6ff); border-top: 1px solid var(--brand-100, #dbeafe); }
.hs-offer-foot p { font-size: 13.5px; line-height: 1.5; color: var(--neutral-800, #333d47); }
.hs-offer.is-chosen .hs-offer-foot { background: var(--success-50, #f0fdf4); border-top-color: var(--success-200, #bbf7d0); }
.hs-fine { font-size: 13px; line-height: 1.5; color: var(--neutral-700, #4b5563); }

/* ---- Sidebar: summary lists, the licence note, the navy "what yards see" ------------- */
.hs-aside { display: grid; gap: 16px; min-width: 0; }
.hs-panel { padding: 20px; background: #fff; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); }
.hs-panel > h2, .hs-panel > h3, .hs-privacy > h2, .hs-privacy > h3 { margin-bottom: 14px; font: 700 16.5px/1.2 var(--hs-display); }
.hs-dl { display: grid; gap: 12px; }
.hs-dl dt { font-size: 12.5px; font-weight: 500; color: var(--neutral-600, #6b7280); }
.hs-dl dd { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.hs-dl.is-inline > div { display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.hs-dl.is-inline > div:first-child { padding-top: 0; border-top: 0; }
.hs-dl.is-inline dd { text-align: right; font-variant-numeric: tabular-nums; }
.hs-panel .hs-link.is-danger { margin-top: 16px; }
.hs-licence {
    display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md, 12px);
    background: var(--hs-accent-soft); border-left: 4px solid var(--hs-accent); font-size: 13.5px; line-height: 1.5; color: var(--neutral-900, #1f2933);
}
.hs-licence i { flex: none; font-size: 18px; line-height: 1.2; color: #7a5600; }
.hs-privacy { padding: 20px; border-radius: var(--radius-md, 12px); background: var(--hs-ink); color: #fff; }
.hs-privacy > h2, .hs-privacy > h3 { color: #fff; }
.hs-privacy li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.hs-privacy li + li { margin-top: 10px; }
.hs-privacy i { flex: none; color: var(--brand-300, #93c5fd); line-height: 1.5; }

/* ---- Notices and simple forms (request form, yard reply) ------------------------------ */
.hs-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md, 12px); font-size: 14px; line-height: 1.5; background: var(--brand-50, #eff6ff); color: var(--brand-900, #1e3a8a); border: 1px solid var(--brand-100, #dbeafe); }
.hs-notice > i { flex: none; margin-top: 1px; }
.hs-notice.is-ok { background: var(--success-50, #f0fdf4); color: var(--success-800, #166534); border-color: var(--success-200, #bbf7d0); }
.hs-notice.is-warn { background: var(--hs-accent-soft); color: var(--neutral-900, #1f2933); border-color: #f6dc8a; }
.hs-notice.is-error { background: var(--danger-50, #fef2f2); color: var(--danger-800, #991b1b); border-color: var(--danger-200, #fecaca); }
.hs-form { display: grid; gap: 16px; }
.hs-field { display: grid; gap: 6px; min-width: 0; }
.hs-field > label, .hs-field-label { font-size: 13px; font-weight: 600; color: var(--neutral-800, #333d47); }
.hs-field-hint { font-size: 12.5px; font-weight: 400; color: var(--neutral-600, #6b7280); }
.hs-input {
    width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--neutral-400, #cbd0d6); border-radius: 10px;
    background: #fff; color: var(--neutral-900, #1f2933); font: 400 15px/1.4 Inter, sans-serif;
}
textarea.hs-input { min-height: 96px; resize: vertical; }
.hs-input:focus { border-color: var(--brand-500, #3b82f6); }
.hs-input:focus-visible { outline: 3px solid var(--brand-300, #93c5fd); outline-offset: 1px; border-color: var(--brand-500, #3b82f6); }
.hs-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.hs-check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; cursor: pointer; }
.hs-check input { width: 18px; height: 18px; accent-color: var(--brand-600, #2563eb); }
.hs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.hs-error { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--danger-700, #b91c1c); }

/* ---- Two-column layouts stack below 1280px of screen ---------------------------------- */
@media (max-width: 1279.98px) {
    .hs-top, .hs-rep-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
    .hs-top .hs-how ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .hs-top .hs-how li::before { display: none; }
    .hs-rep-grid .hs-aside { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
}

/* ---- Phone (the mockup's 390px screen is the spec) ------------------------------------ */
@media (max-width: 767.98px) {
    .hs-body { padding: 16px 16px 32px; }
    .hs-btn { min-height: 44px; }
    .hs-section { margin-top: 36px; }
    .hs-sec-head h2, .hs-h2, .hs-rep-top h2 { font-size: 23px; }
    .hs-sec-head p { font-size: 13.5px; }
    .hs-book-head h2 { font-size: 21px; }
    .hs-book-head p { font-size: 13.5px; }
    .hs-bar-foot { font-size: 13px; }

    .hs-top { margin-top: 24px; gap: 28px; }
    .hs-body.is-lead > .hs-book { margin-top: 32px; }
    .hs-how.is-wide ol { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .hs-how.is-wide li:not(:last-child)::before { display: block; }

    .hs-req-main { flex-wrap: wrap; gap: 12px; padding: 16px 16px 14px; }
    .hs-req-main .hs-thumb { width: 88px; height: 58px; padding: 5px 6px 2px; border-radius: 10px; }
    .hs-req-info { flex: 1 1 180px; }
    .hs-req-title { font-size: 19px; }
    .hs-eyebrow { font-size: 12.5px; }
    .hs-facts { gap: 4px 12px; margin-top: 8px; font-size: 12.5px; }
    .hs-req-state { order: 3; width: 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
    .hs-req .hs-track { display: none; }
    .hs-track-m { display: grid; }
    .hs-track-m-t { display: flex; }
    .hs-req .hs-track-m, .hs-req .hs-track-m-t { margin-left: 16px; margin-right: 16px; }
    .hs-req .hs-track-m-t { margin-bottom: 12px; }
    .hs-trackcard .hs-track { display: none; }
    .hs-trackcard { padding: 14px 16px 12px; }
    .hs-trackcard .hs-track-m-t { margin-bottom: 0; }
    .hs-best { margin: 0 16px; padding: 10px 12px; gap: 10px; }
    .hs-rlist { margin: 0 16px; }
    .hs-rrow { gap: 10px; padding: 10px 12px; }
    .hs-rname { font-size: 14px; }
    .hs-rprice b { font-size: 17px; }
    .hs-rno { max-width: 42%; font-size: 12.5px; }
    .hs-mono { width: 34px; height: 34px; font-size: 12px; border-radius: 9px; }
    .hs-req-foot { flex-direction: column-reverse; align-items: stretch; gap: 10px; padding: 14px 16px 16px; }
    .hs-req-foot .hs-btn { width: 100%; min-height: 46px; }
    .hs-req-foot-end { margin-left: 0; flex-direction: column-reverse; align-items: stretch; gap: 10px; }

    .hs-avail-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
    .hs-feat-top { grid-template-columns: 116px minmax(0, 1fr); gap: 14px; padding: 14px 14px 12px; }
    .hs-feat-art { height: 84px; padding: 8px 8px 2px; }
    .hs-feat-art .hs-near { display: none; }
    .hs-feat-title h3 { font-size: 19px; }
    .hs-feat-price { margin-top: 4px; font-size: 13px; }
    .hs-feat-price b { font-size: 24px; }
    .hs-feat-title .hs-lic { margin-top: 8px; }
    .hs-feat-yards { margin: 0 14px; }
    .hs-fy { gap: 10px; padding: 11px 0; align-items: flex-start; }
    .hs-fy-item { display: block; font-size: 13px; }
    .hs-fy-item::before { content: none; }
    .hs-fy-price b { font-size: 17px; }
    .hs-feat-foot { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px; text-align: center; font-size: 13px; }
    .hs-feat-foot .hs-btn { width: 100%; min-height: 46px; }

    .hs-launch { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px; margin-top: 24px; }
    .hs-launch-copy { flex: none; align-items: flex-start; margin-bottom: 4px; }
    .hs-launch-copy p { font-size: 13px; }
    .hs-ychips { flex-direction: column; gap: 8px; }
    .hs-ychip { padding: 8px 10px 8px 8px; }
    .hs-ychip b { font-size: 13.5px; }
    .hs-ychip small { font-size: 12px; }
    .hs-launch.is-zero { gap: 12px; padding: 20px 18px; margin-top: 28px; }
    .hs-launch.is-zero .hs-launch-copy { gap: 14px; align-items: flex-start; }
    .hs-launch.is-zero .hs-pin { width: 46px; height: 46px; font-size: 20px; box-shadow: 0 0 0 6px rgba(245, 179, 1, .22); }
    .hs-launch.is-zero .hs-launch-copy b { font-size: 21px; }
    .hs-launch.is-zero .hs-launch-copy p { font-size: 14px; }

    .hs-chips { flex-wrap: nowrap; overflow-x: auto; margin: 14px -16px 0; padding: 0 16px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
    .hs-chips::-webkit-scrollbar { display: none; }
    .hs-chip { min-height: 42px; flex: none; }
    .hs-group { margin-top: 28px; }
    .hs-ghead { padding-bottom: 10px; }
    .hs-ghead-text { display: block; }
    .hs-ghead h3 { font-size: 20px; }
    .hs-ghead p { margin-top: 2px; font-size: 13px; }

    /* Listed machines become a tinted row on a phone, like the rows below them. */
    .hs-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .hs-card, .hs-card.is-listed {
        flex-direction: row; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px;
        border: 1px solid var(--brand-200, #bfdbfe); border-radius: 0; box-shadow: none; background: var(--brand-50, #eff6ff);
    }
    .hs-card:first-child { border-top-left-radius: var(--radius-md, 12px); border-top-right-radius: var(--radius-md, 12px); }
    .hs-card:last-child { border-bottom-left-radius: var(--radius-md, 12px); border-bottom-right-radius: var(--radius-md, 12px); }
    .hs-card + .hs-card { border-top: 0; }
    .hs-card:hover { transform: none; box-shadow: none; }
    .hs-card-art, .hs-card.is-listed .hs-card-art { flex: none; width: 68px; height: 46px; padding: 4px 5px 1px; border: 0; border-radius: var(--radius-sm, 8px); }
    .hs-card-art .hs-near { display: none; }
    .hs-card-body { padding: 0; gap: 2px; }
    .hs-card-body h4 { font-size: 15px; }
    .hs-card-body p { display: none; }
    .hs-card-body .hs-lic { margin-top: 0; min-height: 0; padding: 0; border: 0; background: none; font-weight: 500; font-size: 12.5px; }
    .hs-card-yes { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--success-800, #166534); }
    .hs-card-yes::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success-600, #16a34a); }
    .hs-card-foot { flex: none; min-height: 0; padding: 0; background: none; border: 0; text-align: right; }
    .hs-from { line-height: 1.2; }
    .hs-from b { display: block; font-size: 16px; }
    .hs-from small { display: block; font-size: 12px; }
    .hs-card-go { display: block; }

    .hs-group-body { display: block; margin-top: 12px; }
    .hs-group-body.is-split > .hs-grid { grid-template-columns: minmax(0, 1fr); }
    .hs-rows, .hs-group-body.is-split > .hs-rows { grid-template-columns: minmax(0, 1fr); gap: 0; background: #fff; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); overflow: hidden; }
    /* A group with listed and unlisted machines is one list, as in the mockup: the listed machine is
       its tinted first row, not a box of its own above the others. */
    .hs-group-body.has-both > .hs-grid .hs-card { border-color: var(--neutral-300, #e5e7eb); }
    .hs-group-body.has-both > .hs-grid .hs-card:last-child {
        border-bottom-color: var(--neutral-200, #e9e9e6); border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    }
    .hs-group-body.has-both > .hs-rows { margin-top: 0; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
    .hs-row-lic { white-space: normal; }
    /* The whole row is the link to the machine's page, with a chevron; "Request it" is on that page. */
    .hs-row { min-height: 64px; padding: 10px 12px; gap: 12px; border: 0; border-radius: 0; }
    .hs-row + .hs-row { border-top: 1px solid var(--neutral-200, #e9e9e6); }
    .hs-row:hover { background: var(--neutral-50, #f8f8f7); }
    .hs-row .hs-tile { width: 68px; height: 46px; padding: 4px 5px 1px; }
    .hs-row-desc { display: none; }
    .hs-row-go { display: none; }
    .hs-row-chev { display: block; }
    .hs-row-link::after { border-radius: 0; }
    .hs-row-link:focus-visible::after { outline-offset: -3px; }

    .hs-mylist-head { padding: 12px 14px 8px; }
    .hs-mylist-row { padding: 10px 14px; }
    .hs-mylist-row .hs-tile, .hs-mylist-go { display: none; }

    .hs-yardband { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 18px 24px; margin-top: 32px; }
    .hs-yardband h2, .hs-yardband h3 { font-size: 18px; }
    .hs-yardband p { font-size: 13.5px; }

    .hs-rep-grid { margin-top: 18px; gap: 20px; }
    .hs-offer-head { flex-wrap: wrap; gap: 12px; padding: 16px; }
    .hs-offer-head > .hs-dist, .hs-offer-head > .hs-status, .hs-offer-head > .hs-push { margin-left: 0; }
    .hs-offer-body { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
    .hs-machine { gap: 12px; }
    .hs-machine .hs-thumb { width: 96px; height: 62px; padding: 5px 6px 2px; }
    .hs-price { text-align: left; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--neutral-200, #e9e9e6); }
    .hs-big { font-size: 42px; }
    .hs-quote { margin: 0 16px; font-size: 14.5px; }
    .hs-listed { margin: 12px 16px 0; }
    .hs-offer-foot { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
    .hs-offer-foot .hs-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .hs-page *, .hs-page *::before, .hs-page *::after { transition: none !important; animation: none !important; }
    .hs-card:hover { transform: none; }
}

/* Narrow phones (the phone audit runs at 320px): the listed-machine row's text column must be
   allowed to shrink, or the price and chevron are pushed out of the card; and the request card's
   "replied" line must be allowed to wrap. */
@media (max-width: 767.98px) {
    .hs-card-body { flex: 1 1 auto; min-width: 0; }
    .hs-card-body h4, .hs-card-yes { overflow-wrap: anywhere; }
    .hs-req-state { flex-wrap: wrap; }
    .hs-replied { white-space: normal; }
}
@media (max-width: 359.98px) {
    .hs-card, .hs-card.is-listed { gap: 8px; padding: 10px; }
    .hs-card-art, .hs-card.is-listed .hs-card-art { width: 52px; height: 36px; }
}