/* ==========================================================================
   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: soft off-white ground, near-black light-weight Manrope
   headings, dark-slate pill buttons, large 24px rounded cards, and a floating
   pill nav. Weight 300 headings at large sizes are the load-bearing detail —
   going heavier reads as a different, busier product.
   ========================================================================== */

:root {
    --hw-bg: #f8f8f8;
    --hw-surface: #ffffff;
    --hw-surface-2: #f9f9f9;

    --hw-ink: #1c1e1f;
    --hw-body: #6c7072;
    --hw-faint: #9a9ea0;

    --hw-line: #ebebef;
    --hw-line-soft: #f1f1f1;

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

    --hw-accent: #3ebb7f;

    --hw-r-card: 24px;
    --hw-r-md: 20px;
    --hw-r-sm: 14px;
    --hw-r-pill: 999px;

    --hw-container: 1320px;
    --hw-pad: 24px;

    --hw-shadow-sm: 0 1px 2px rgba(28, 30, 31, .04);
    --hw-shadow-md: 0 8px 30px rgba(28, 30, 31, .06);
    --hw-shadow-lg: 0 24px 60px rgba(28, 30, 31, .10);

    --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: 16px;
    font-weight: 300;
    line-height: 1.7;
    -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;
    /* Light weight at large sizes is the whole character of this design. */
    font-weight: 300;
    line-height: 1.14;
    letter-spacing: -0.015em;
}
.hw h1 { font-size: clamp(34px, 4.6vw, 56px); }
.hw h2 { font-size: clamp(28px, 3.2vw, 42px); }
.hw h3 { font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; }
.hw h4 { font-size: 17px; font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.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; }

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

.hw-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--hw-surface); border: 1px solid var(--hw-line);
    border-radius: var(--hw-r-pill); padding: 7px 16px;
    font-size: 13px; font-weight: 400; color: var(--hw-body);
    box-shadow: var(--hw-shadow-sm);
}
.hw-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hw-accent); }

.hw-section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.hw-section-head h2 { margin: 20px 0 14px; }
.hw-section-head .sub { font-size: 17px; color: var(--hw-body); }

.hw-btn, .hw-btn-light {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    border-radius: var(--hw-r-pill); padding: 14px 28px;
    font-family: var(--hw-font); font-size: 15px; font-weight: 500;
    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 ---------------------------------------------------------- */

.hw-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.hw-brand .mark {
    width: 34px; height: 34px; border-radius: 10px; flex: none;
    background: var(--hw-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.hw-brand .name { font-size: 15.5px; font-weight: 600; color: var(--hw-ink); letter-spacing: -0.01em; white-space: nowrap; }
.hw-brand .name span { font-weight: 300; color: var(--hw-body); }

/* One floating bar carrying brand, links and CTA. It sits above the page
   rather than spanning it edge to edge, which is what keeps the rounded-card
   language consistent from the nav all the way down. Light and opaque so it
   reads the same over the dark hero photo and the off-white sections below. */
.hw-topnav {
    position: fixed; z-index: 50; top: 18px; left: 50%; transform: translateX(-50%);
    width: calc(100% - 2 * var(--hw-pad)); max-width: 1200px;
    display: flex; align-items: center; gap: 24px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(28, 30, 31, .07);
    border-radius: var(--hw-r-pill); padding: 9px 9px 9px 18px;
    box-shadow: 0 10px 34px rgba(28, 30, 31, .10);
}
.hw-topnav-links { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.hw-topnav-links a {
    display: inline-flex; align-items: center; border-radius: var(--hw-r-pill);
    padding: 9px 16px; font-size: 14.5px; font-weight: 400; 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: rgba(28, 30, 31, .05); }
.hw-topnav-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.hw-topnav-signin { font-size: 14.5px; font-weight: 400; color: var(--hw-body); padding: 9px 12px; white-space: nowrap; transition: color .2s ease; }
.hw-topnav-signin:hover { color: var(--hw-ink); }
.hw-btn-onnav { padding: 11px 22px; font-size: 14.5px; }

@media (max-width: 900px) {
    /* The links collapse before the brand and CTA do — those two are what a
       phone visitor actually needs, and the sections are all reachable by
       scrolling anyway. */
    .hw-topnav-links { display: none; }
    .hw-topnav { gap: 12px; justify-content: space-between; }
    .hw-topnav-actions { margin-left: auto; }
}
@media (max-width: 480px) {
    .hw-topnav { top: 12px; padding: 8px 8px 8px 14px; }
    .hw-topnav-signin { display: none; }
    .hw-brand .name { font-size: 14.5px; }
}

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

/* Top padding clears the fixed nav; the page should never open with the bar
   sitting on top of the photo's edge. */
.hw-hero { position: relative; padding: 92px var(--hw-pad) 0; }
.hw-hero-inner {
    position: relative; max-width: var(--hw-container); margin: 0 auto;
    border-radius: 32px; overflow: hidden;
    min-height: 620px; display: flex; align-items: flex-end;
    /* The inset rounded "framed" hero is what keeps the off-white page visible
       around the photo instead of the image running edge to edge. */
    background: #1c1e1f;
}
.hw-hero-inner img.bg {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    animation: hw-kenburns 26s ease-in-out infinite alternate;
}
@keyframes hw-kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
.hw-hero-inner::after {
    content: ""; position: absolute; inset: 0;
    /* Two scrims, not one: the vertical pass seats the copy against the bottom
       of the frame, and the horizontal pass keeps the left column dark even
       where the photo itself is brightest (lit windows sit right behind the
       lead paragraph). Without the second one the body copy loses contrast
       halfway across the line. */
    background:
        linear-gradient(90deg, rgba(17,20,24,.78) 0%, rgba(17,20,24,.45) 42%, rgba(17,20,24,0) 72%),
        linear-gradient(180deg, rgba(17,20,24,.5) 0%, rgba(17,20,24,.18) 32%, rgba(17,20,24,.9) 100%);
}
/* Wide enough that "Every home accounted for." holds one line at the headline's
   top clamp size — narrower and the hard break below strands "for." on its own. */
.hw-hero-copy { position: relative; z-index: 2; padding: clamp(48px, 6vw, 76px) clamp(28px, 5vw, 72px); max-width: 1000px; }
.hw-hero-copy h1 { color: #fff; margin: 0 0 22px; }
.hw-hero-copy h1 span { display: block; }
.hw-hero-copy .lead { font-size: 18px; color: rgba(255,255,255,.84); max-width: 600px; margin-bottom: 34px; }
.hw-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hw-hero-note { margin-top: 20px; font-size: 14px; color: rgba(255,255,255,.6); }
.hw-hero-actions .hw-btn { background: #fff; color: var(--hw-ink); }
.hw-hero-actions .hw-btn:hover { background: rgba(255,255,255,.88); }
.hw-hero-actions .hw-btn-light { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; backdrop-filter: blur(8px); }
.hw-hero-actions .hw-btn-light:hover { background: rgba(255,255,255,.2); }

@media (max-width: 860px) {
    .hw-hero { padding-top: 80px; }
    .hw-hero-inner { min-height: 540px; }
    /* 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-actions .hw-btn, .hw-hero-actions .hw-btn-light { width: 100%; }
}

/* 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: 300; 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 ----------------------------------------------------------- */

.hw-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hw-card {
    background: var(--hw-surface); border: 1px solid var(--hw-line);
    border-radius: var(--hw-r-md); padding: 28px 26px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hw-card:hover { transform: translateY(-4px); box-shadow: var(--hw-shadow-md); border-color: #e2e2e8; }
.hw-card .ico {
    width: 42px; height: 42px; border-radius: 12px; margin-bottom: 18px;
    background: var(--hw-surface-2); border: 1px solid var(--hw-line-soft);
    color: var(--hw-ink); display: flex; align-items: center; justify-content: center;
}
.hw-card h4 { margin-bottom: 8px; }
.hw-card p { font-size: 14.5px; }
@media (max-width: 1000px) { .hw-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hw-cards { grid-template-columns: 1fr; } }

/* 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: 52px; font-weight: 300; 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: 16px; font-weight: 400; 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: 32px; overflow: hidden;
    padding: clamp(56px, 8vw, 96px) clamp(24px, 5vw, 64px); text-align: center;
    background: #1c1e1f;
}
.hw-cta img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hw-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,20,24,.82), rgba(17,20,24,.9)); }
.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: #fff; 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-dark); color: rgba(255,255,255,.62); margin-top: 100px; padding: 64px var(--hw-pad) 40px; }
.hw-footer-inner { max-width: var(--hw-container); margin: 0 auto; }
.hw-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 44px; }
.hw-footer .hw-brand .name { color: #fff; }
.hw-footer .hw-brand .name span { color: rgba(255,255,255,.6); }
.hw-footer .hw-brand .mark { background: rgba(255,255,255,.12); }
.hw-footer .blurb { margin-top: 16px; font-size: 14.5px; max-width: 320px; line-height: 1.7; }
.hw-footer h5 { font-size: 14px; font-weight: 500; 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: 800px) { .hw-footer-grid { grid-template-columns: 1fr; gap: 32px; } }

/* 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: 760px; margin: 0 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;
}

.hw-demo .hw-demo-go { width: 100%; justify-content: center; }
.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 --------------------- */

.hw-path {
    list-style: none; margin: 0; padding: 0;
    max-width: 720px; margin-inline: auto;
    position: relative;
}
/* 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: 15px; top: 12px; bottom: 12px;
    width: 2px; background: var(--hw-line);
}
.hw-path li { position: relative; padding: 0 0 34px 52px; }
.hw-path li:last-child { padding-bottom: 0; }
.hw-path li::before {
    content: ""; position: absolute; left: 8px; top: 6px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--hw-surface); border: 2px solid var(--hw-primary);
}
.hw-path .when {
    display: inline-block; margin-bottom: 7px;
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--hw-primary);
}
.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: 720px; 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: 500; color: var(--hw-ink); }
.hw-nots ul {
    list-style: none; margin: 0 0 18px; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 11px 22px;
}
.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: 640px) {
    .hw-path li { padding-left: 44px; }
    .hw-nots { padding: 24px 20px; }
}