/* Brief 995 - howmuchismyhomeworth.uk. Own CSS namespace/variables, deliberately not
   sharing propertyalert.uk's stylesheet or brand colours (separate product identity).

   Restyle (Sean, 2026-07-16): visual language modelled on formless.xyz - near-monochrome
   black/white, pill-shaped ghost buttons that invert on hover, thin-border cards instead of
   filled/shadowed ones, large confident display type with tight tracking, generous
   whitespace. Measured formless.xyz's actual computed styles (getComputedStyle, not a
   screenshot guess): 60px/60px display headline at font-weight 500, pill buttons at
   border-radius:9999px with a 0.8px border, transparent bg -> solid invert on hover,
   height ~60px with 12px/32px padding. Reproduced that language with system fonts, not
   their licensed "Neue Haas Grotesk Display Pro" (no CDN webfont added - keeps this
   render-blocking-free, consistent with the CWV work already done on the LR-adjacent
   pages). Every class name below is unchanged from the pre-restyle version so no template
   edits were needed - this is a CSS-only diff. Both light and dark variants are kept
   (formless.xyz itself is black-only, but the rest of this project honours system
   light/dark preference throughout, and a valuation tool used outdoors on mobile benefits
   from a working light mode) - dark mode is the near-exact formless palette, light mode
   applies the same restrained monochrome/pill-button language inverted. */
:root {
    --hmiwyu-bg: #ffffff;
    --hmiwyu-surface: #ffffff;
    --hmiwyu-text: #0a0a0a;
    --hmiwyu-text-muted: rgba(10, 10, 10, 0.62);
    --hmiwyu-border: rgba(10, 10, 10, 0.16);
    --hmiwyu-border-strong: rgba(10, 10, 10, 0.45);
    --hmiwyu-primary: #0a0a0a;
    --hmiwyu-primary-dark: #000000;
    --hmiwyu-on-primary: #ffffff;
    --hmiwyu-accent: #e0a72a;
    --hmiwyu-alert-bg: #fdece9;
    --hmiwyu-alert-text: #8a2e1f;
    --hmiwyu-radius: 0.5rem;
    --hmiwyu-radius-pill: 9999px;
    --hmiwyu-max-width: 40rem;
    --hmiwyu-font-display: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --hmiwyu-bg: #000000;
        --hmiwyu-surface: #000000;
        --hmiwyu-text: #ffffff;
        --hmiwyu-text-muted: rgba(255, 255, 255, 0.62);
        --hmiwyu-border: rgba(255, 255, 255, 0.22);
        --hmiwyu-border-strong: rgba(255, 255, 255, 0.55);
        --hmiwyu-primary: #ffffff;
        --hmiwyu-primary-dark: #e5e5e5;
        --hmiwyu-on-primary: #000000;
        --hmiwyu-accent: #e0a72a;
        --hmiwyu-alert-bg: #2a1512;
        --hmiwyu-alert-text: #f2b6a8;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--hmiwyu-bg);
    color: var(--hmiwyu-text);
    font-family: var(--hmiwyu-font-display);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.hmiwyu-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1.5rem;
    background: var(--hmiwyu-bg);
    border-bottom: 1px solid var(--hmiwyu-border);
}

.hmiwyu-logo {
    font-weight: 500;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    color: var(--hmiwyu-text);
    text-decoration: none;
}

.hmiwyu-logo-accent { color: var(--hmiwyu-text-muted); }

.hmiwyu-main {
    width: 100%;
    max-width: var(--hmiwyu-max-width);
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.hmiwyu-hero { text-align: center; padding: 2.5rem 0 2rem; }
.hmiwyu-hero h1 {
    font-size: 2.1rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0 0 0.75rem;
}
.hmiwyu-hero-sub { color: var(--hmiwyu-text-muted); font-size: 1.05rem; margin: 0 0 2rem; }

.hmiwyu-section h1 { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.005em; word-break: break-word; }

.hmiwyu-back {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--hmiwyu-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
}
.hmiwyu-back:hover { color: var(--hmiwyu-text); }

.hmiwyu-postcode-form, .hmiwyu-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 24rem;
    margin: 0 auto;
}

.hmiwyu-label { font-weight: 500; font-size: 0.9rem; }

.hmiwyu-input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--hmiwyu-border-strong);
    border-radius: var(--hmiwyu-radius);
    background: var(--hmiwyu-surface);
    color: var(--hmiwyu-text);
    font-size: 1rem;
}
.hmiwyu-input:focus { outline: none; border-color: var(--hmiwyu-primary); }

/* Pill buttons, ghost-by-default with a hover invert - formless.xyz's exact button
   language (border-radius:9999px, transparent bg, solid-fill on hover). */
.hmiwyu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.95rem 1.75rem;
    border: 1px solid var(--hmiwyu-primary);
    border-radius: var(--hmiwyu-radius-pill);
    background: var(--hmiwyu-primary);
    color: var(--hmiwyu-on-primary);
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.hmiwyu-button:hover, .hmiwyu-button:focus {
    background: transparent;
    color: var(--hmiwyu-primary);
}

.hmiwyu-button-secondary {
    background: transparent;
    color: var(--hmiwyu-text);
    border: 1px solid var(--hmiwyu-border-strong);
    margin-top: 1rem;
}
.hmiwyu-button-secondary:hover, .hmiwyu-button-secondary:focus {
    background: var(--hmiwyu-primary);
    color: var(--hmiwyu-on-primary);
    border-color: var(--hmiwyu-primary);
}

.hmiwyu-skip-link {
    display: block;
    text-align: center;
    margin-top: 1.25rem;
    color: var(--hmiwyu-text-muted);
    font-size: 0.9rem;
}
.hmiwyu-skip-link:hover { color: var(--hmiwyu-text); }

.hmiwyu-alert {
    background: var(--hmiwyu-alert-bg);
    color: var(--hmiwyu-alert-text);
    border-radius: var(--hmiwyu-radius);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.hmiwyu-empty-state {
    background: var(--hmiwyu-surface);
    border: 1px solid var(--hmiwyu-border);
    border-radius: var(--hmiwyu-radius);
    padding: 2rem 1.5rem;
    text-align: center;
    margin: 1rem 0;
}

.hmiwyu-address-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.6rem; }

.hmiwyu-address-card { border-radius: var(--hmiwyu-radius); overflow: hidden; }

.hmiwyu-address-link {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 1.1rem;
    background: var(--hmiwyu-surface);
    border: 1px solid var(--hmiwyu-border);
    border-radius: var(--hmiwyu-radius);
    text-decoration: none;
    color: var(--hmiwyu-text);
    transition: border-color 0.15s ease;
}
.hmiwyu-address-link:hover { border-color: var(--hmiwyu-border-strong); }

.hmiwyu-address-town { color: var(--hmiwyu-text-muted); font-size: 0.85rem; }

.hmiwyu-badge {
    display: inline-block;
    align-self: flex-start;
    margin-top: 0.4rem;
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--hmiwyu-border-strong);
    border-radius: var(--hmiwyu-radius-pill);
    font-size: 0.75rem;
}

.hmiwyu-badge-muted { background: transparent; color: var(--hmiwyu-text-muted); }

.hmiwyu-valuation-headline { text-align: center; padding: 2rem 0 1.5rem; }
.hmiwyu-valuation-label { display: block; color: var(--hmiwyu-text-muted); font-size: 0.9rem; margin-bottom: 0.35rem; }
.hmiwyu-valuation-figure {
    display: block;
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.05;
    word-break: break-word;
}

.hmiwyu-confidence-card, .hmiwyu-cta-card {
    background: var(--hmiwyu-surface);
    border: 1px solid var(--hmiwyu-border);
    border-radius: var(--hmiwyu-radius);
    padding: 1.35rem;
    margin-bottom: 1rem;
}

.hmiwyu-confidence-card h2, .hmiwyu-cta-card h2 { margin-top: 0; font-size: 1.05rem; font-weight: 500; }

.hmiwyu-breakdown-list { margin: 0.5rem 0 0; }
.hmiwyu-breakdown-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--hmiwyu-border);
    font-size: 0.9rem;
}
.hmiwyu-breakdown-row:last-child { border-bottom: none; }
.hmiwyu-breakdown-row dt { color: var(--hmiwyu-text-muted); margin: 0; }
.hmiwyu-breakdown-row dd { margin: 0; font-weight: 500; text-align: right; }

/* Comparable-sales section: mobile-first stacked cards, never a wide <table> */
.hmiwyu-comps-section { margin-bottom: 1rem; }
.hmiwyu-comps-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}
.hmiwyu-comp-card {
    background: var(--hmiwyu-surface);
    border: 1px solid var(--hmiwyu-border);
    border-radius: var(--hmiwyu-radius);
    padding: 0.7rem 0.8rem;
    display: flex;
    flex-direction: column;
}
.hmiwyu-comp-price { font-weight: 500; }
.hmiwyu-comp-sqft { color: var(--hmiwyu-text-muted); font-size: 0.8rem; }

.hmiwyu-note { color: var(--hmiwyu-text-muted); font-size: 0.85rem; }

.hmiwyu-cta-button {
    background: var(--hmiwyu-primary);
    color: var(--hmiwyu-on-primary);
    border-color: var(--hmiwyu-primary);
    display: block;
    margin-top: 0.85rem;
}
.hmiwyu-cta-button:hover, .hmiwyu-cta-button:focus {
    background: transparent;
    color: var(--hmiwyu-primary);
}

.hmiwyu-disclaimer-banner {
    background: transparent;
    color: var(--hmiwyu-text);
    border: 1px solid var(--hmiwyu-border-strong);
    border-radius: var(--hmiwyu-radius);
    padding: 1.1rem;
    margin-bottom: 1rem;
}

.hmiwyu-footer {
    text-align: center;
    color: var(--hmiwyu-text-muted);
    font-size: 0.8rem;
    padding: 2rem 1.25rem 3rem;
    border-top: 1px solid var(--hmiwyu-border);
    margin-top: 1rem;
}
.hmiwyu-footer a { color: var(--hmiwyu-text-muted); text-decoration: none; }
.hmiwyu-footer a:hover { color: var(--hmiwyu-text); }

.hmiwyu-footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 1rem 0;
}

/* Legal pages (Privacy/Terms) - plain long-form text, not the card-based layout used
   elsewhere, but still on the same variable system rather than PA's inline-style pattern. */
.hmiwyu-legal { max-width: var(--hmiwyu-max-width); }
.hmiwyu-legal h1 { font-size: 1.7rem; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 0.25rem; }
.hmiwyu-legal .hmiwyu-legal-updated { color: var(--hmiwyu-text-muted); font-size: 0.85rem; margin: 0 0 1.5rem; }
.hmiwyu-legal h2 { font-size: 1.05rem; font-weight: 500; margin: 1.5rem 0 0.5rem; }
.hmiwyu-legal p { line-height: 1.7; margin: 0 0 1rem; }
.hmiwyu-legal ul { line-height: 1.8; margin: 0 0 1rem; padding-left: 1.3rem; }
.hmiwyu-legal li { margin-bottom: 0.3rem; }
.hmiwyu-legal a { color: var(--hmiwyu-text); text-decoration: underline; text-underline-offset: 2px; }
.hmiwyu-legal-box {
    background: var(--hmiwyu-surface);
    border: 1px solid var(--hmiwyu-border);
    border-radius: var(--hmiwyu-radius);
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* 5-star "how good was this estimate" widget (Brief 996, Sean 2026-07-16) - reuses the
   confidence-card shell, stars styled as small circular ghost buttons matching the pill
   button's transparent -> solid-invert hover language rather than a separate colour system. */
.hmiwyu-feedback-card { text-align: center; }
.hmiwyu-star-rating {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.hmiwyu-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--hmiwyu-border-strong);
    border-radius: 50%;
    background: transparent;
    color: var(--hmiwyu-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hmiwyu-star:hover, .hmiwyu-star:focus {
    background: var(--hmiwyu-primary);
    color: var(--hmiwyu-on-primary);
    border-color: var(--hmiwyu-primary);
}
.hmiwyu-star:disabled { cursor: default; opacity: 0.55; }

@media (min-width: 30rem) {
    .hmiwyu-hero h1 { font-size: 2.6rem; }
    .hmiwyu-valuation-figure { font-size: 3.5rem; }
    .hmiwyu-comps-list { grid-template-columns: repeat(3, 1fr); }
}