/* ==========================================================================
   page-home.css — light, and deliberately plain
   ==========================================================================
   Almost everyone who lands here arrives cold from a search, knowing nothing.
   Two things follow from that:

   1. LIGHT, not dark. A dark landing page reads as a product for people already
      in the club. This has to read as a tool a stranger might pay for.

   2. FEWER SECTIONS. The previous version had eight and explained itself three
      separate times. Someone who has never heard of this needs one clear claim,
      proof it is real, the price, and a way in. That is four things.

   One accent: a deep green. Not blue, because every property and finance tool
   is blue and it says nothing; green because the subject is rent and returns.
   Used sparingly — buttons, one number, the accordion marker.

   Independent of app.css on purpose, so a change made for the application can
   never alter what a prospect sees.
   ========================================================================== */

.home {
    --h-bg:      #FFFFFF;
    --h-bg-2:    #F7F8F7;
    --h-line:    #E3E6E4;
    --h-line-2:  #CFD4D1;
    --h-ink:     #12171A;
    --h-ink-2:   #4E585E;
    --h-ink-3:   #7C868C;
    --h-accent:  #2F6FDB;
    --h-accent-2:#2563C9;
    --h-accent-w:#EDF3FF;
    --h-r:       12px;

    margin: 0;
    background: var(--h-bg);
    color: var(--h-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.home *, .home *::before, .home *::after { box-sizing: border-box; }

.hm-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.hm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border: 1px solid var(--h-line-2);
    border-radius: 9px;
    background: #fff;
    color: var(--h-ink);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.hm-btn:hover { background: var(--h-bg-2); }
.hm-btn.is-solid { background: var(--h-accent); border-color: var(--h-accent); color: #fff; }
.hm-btn.is-solid:hover { background: var(--h-accent-2); border-color: var(--h-accent-2); }
.hm-btn.is-lg { padding: 14px 26px; font-size: 15.5px; }

/* --------------------------------------------------------------------------
   Bar
   -------------------------------------------------------------------------- */

.hm-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--h-line);
}
.hm-bar .hm-wrap { display: flex; align-items: center; gap: 24px; height: 62px; }
.hm-brand {
    display: flex; align-items: center; gap: 9px;
    font-size: 15.5px; font-weight: 700; letter-spacing: -.02em;
    color: var(--h-ink); text-decoration: none;
}
.hm-brand-mark {
    /* THE LOGO IS A CIRCLE IN A SQUARE FILE.

       favicon.png is 348x348 with the disc touching the LEFT and RIGHT edges
       but 12px of transparency at the TOP and BOTTOM. On a dark header that
       gap let the background through as two thin dark lines above and below
       the mark — which is what you were seeing. The homepage looked fine
       only because its bar is light, so the gap was invisible.

       Rather than re-cut the artwork, the mark is drawn as a circular badge
       with its own white face. The transparent strip is filled by the badge,
       the disc sits inside it, and it reads as deliberate on any background.
       One asset, still the same file as the tab icon. */
    display: block;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #FFFFFF;
    object-fit: cover;      /* fill the badge — the 12px strip is empty anyway */
}
.hm-bar-nav { display: flex; gap: 22px; flex: 1 1 auto; }
.hm-bar-nav a { font-size: 14px; color: var(--h-ink-2); text-decoration: none; }
.hm-bar-nav a:hover { color: var(--h-ink); }
.hm-bar-cta { display: flex; gap: 8px; }

/* --------------------------------------------------------------------------
   Hero — text left, a real record on the right

   The picture is built from HTML rather than being a screenshot or a stock
   photo. A screenshot is stale the day the interface changes; a stock photo of
   a house tells a stranger nothing about what the software does. A property
   record with numbers that add up tells them exactly.
   -------------------------------------------------------------------------- */

.hm-hero { padding: clamp(56px, 8vw, 92px) 0 clamp(48px, 7vw, 80px); }
.hm-hero .hm-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(32px, 5vw, 60px);
    align-items: center;
}
.hm-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(34px, 4.6vw, 52px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.035em;
}
.hm-lede {
    margin: 0 0 28px;
    max-width: 46ch;
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.6;
    color: var(--h-ink-2);
}
.hm-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.hm-hero-note { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--h-ink-3); }
.hm-hero-note strong { color: var(--h-ink-2); font-weight: 650; }

/* the record card */
.hm-card {
    border: 1px solid var(--h-line);
    border-radius: var(--h-r);
    background: #fff;
    box-shadow: 0 1px 2px rgba(18, 23, 26, .04), 0 12px 32px rgba(18, 23, 26, .06);
    overflow: hidden;
}
.hm-card-head { padding: 16px 18px; border-bottom: 1px solid var(--h-line); }
.hm-card-head b { display: block; font-size: 15px; font-weight: 650; }
.hm-card-head span { font-size: 12.5px; color: var(--h-ink-3); }
.hm-card-body { padding: 6px 18px 16px; }
.hm-line {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--h-line);
}
.hm-line:last-child { border-bottom: 0; }
.hm-line span { font-size: 13.5px; color: var(--h-ink-3); }
.hm-line b { font-size: 14.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.hm-line.is-total { margin-top: 2px; padding-top: 13px; border-top: 1px solid var(--h-line-2); border-bottom: 0; }
.hm-line.is-total span { color: var(--h-ink-2); font-weight: 600; }
.hm-line.is-total b { color: var(--h-accent); font-size: 17px; }
.hm-card-foot {
    padding: 11px 18px;
    border-top: 1px solid var(--h-line);
    background: var(--h-bg-2);
    font-size: 12px;
    color: var(--h-ink-3);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.hm-sec { padding: clamp(52px, 7vw, 84px) 0; }
.hm-sec.is-tint { background: var(--h-bg-2); border-top: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); }
.hm-sec h2 {
    margin: 0 0 12px;
    max-width: 22ch;
    font-size: clamp(25px, 3.2vw, 36px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.032em;
}
.hm-sub { margin: 0 0 36px; max-width: 60ch; font-size: 15.5px; line-height: 1.65; color: var(--h-ink-2); }

/* three plain columns */
.hm-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; }
.hm-three h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 650; letter-spacing: -.02em; }
.hm-three p { margin: 0; font-size: 14.5px; line-height: 1.68; color: var(--h-ink-2); }
.hm-three-mark {
    display: grid; place-items: center;
    width: 34px; height: 34px; margin-bottom: 14px;
    border-radius: 9px;
    background: var(--h-accent-w);
    color: var(--h-accent);
    font-size: 14px; font-weight: 800;
}

/* what is included — a plain list, not seven cards */
.hm-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 28px; }
.hm-list div { padding: 9px 0; border-bottom: 1px solid var(--h-line); }
.hm-list b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--h-accent); margin-bottom: 5px; }
.hm-list span { font-size: 14px; line-height: 1.6; color: var(--h-ink-2); }

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

.hm-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(204px, 1fr)); gap: 12px; }
.hm-plan {
    position: relative; display: flex; flex-direction: column;
    padding: 24px 20px;
    border: 1px solid var(--h-line);
    border-radius: var(--h-r);
    background: #fff;
}
.hm-plan.is-featured { border-color: var(--h-accent); box-shadow: 0 0 0 1px var(--h-accent); }
.hm-plan-tag {
    position: absolute; top: -10px; left: 20px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--h-accent); color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.hm-plan h3 { margin: 0 0 12px; font-size: 15px; font-weight: 650; }
.hm-plan-price { display: flex; align-items: baseline; gap: 5px; margin: 0 0 3px; }
.hm-plan-price strong { font-size: 33px; font-weight: 700; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.hm-plan-price span { font-size: 13px; color: var(--h-ink-3); }
.hm-plan-doors { flex: 1 1 auto; margin: 0 0 18px; font-size: 13.5px; color: var(--h-ink-2); }
.hm-plan .hm-btn { width: 100%; }
.hm-pricing-more { margin: 24px 0 0; font-size: 13.5px; color: var(--h-ink-3); }
.hm-pricing-more a { color: var(--h-accent); font-weight: 600; text-decoration: none; }
.hm-pricing-more a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Questions
   -------------------------------------------------------------------------- */

.hm-q { border-bottom: 1px solid var(--h-line); }
.hm-q summary { padding: 16px 0; cursor: pointer; font-size: 15.5px; font-weight: 620; list-style: none; }
.hm-q summary::-webkit-details-marker { display: none; }
.hm-q summary::after { content: "+"; float: right; color: var(--h-accent); font-weight: 600; }
.hm-q[open] summary::after { content: "\2212"; }
.hm-q p { margin: 0; padding: 0 0 18px; max-width: 72ch; font-size: 14.5px; line-height: 1.7; color: var(--h-ink-2); }

/* --------------------------------------------------------------------------
   Close + footer
   -------------------------------------------------------------------------- */

.hm-cta { padding: clamp(52px, 7vw, 84px) 0; text-align: center; border-top: 1px solid var(--h-line); }
.hm-cta h2 { margin: 0 auto 12px; max-width: 20ch; font-size: clamp(25px, 3.2vw, 36px); font-weight: 700; letter-spacing: -.032em; }
.hm-cta p { margin: 0 auto 24px; max-width: 52ch; font-size: 15.5px; line-height: 1.65; color: var(--h-ink-2); }

.hm-foot { padding: 40px 0 34px; background: var(--h-bg-2); border-top: 1px solid var(--h-line); }
.hm-foot-brand { font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--h-ink); text-decoration: none; }
.hm-foot-top p { margin: 7px 0 20px; max-width: 50ch; font-size: 13.5px; line-height: 1.6; color: var(--h-ink-3); }
.hm-foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-bottom: 18px; border-bottom: 1px solid var(--h-line); }
.hm-foot-links a { font-size: 13px; color: var(--h-ink-2); text-decoration: none; }
.hm-foot-links a:hover { color: var(--h-accent); }
.hm-foot-note { margin: 16px 0 0; font-size: 12.5px; color: var(--h-ink-3); }

/* --------------------------------------------------------------------------
   RESPONSIVE — KEEP LAST
   A plain rule written after a media query beats it at equal specificity.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    /* the card goes BELOW the words: a table of numbers before the sentence
       explaining it is backwards, and on a phone the words come first */
    .hm-hero .hm-wrap { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .hm-bar-nav { display: none; }
    .hm-bar .hm-wrap { gap: 12px; }
    .hm-bar-cta { margin-left: auto; }
}

@media (max-width: 520px) {
    .hm-wrap { padding: 0 18px; }
    .hm-hero-cta .hm-btn { flex: 1 1 100%; }

    /* ----------------------------------------------------------------------
       MOBILE, PROPERLY

       Measured on a 390px viewport rather than guessed at. Two real problems:

       THIRTEEN of twenty-seven tappable things were under 40px tall — mostly
       footer and navigation links, which are inline text with no padding. On a
       desktop that is a precise mouse click; on a phone it is a miss. Every
       link now has real height.

       Ten pieces of text were under 13px. Fine on a monitor at arm's length,
       small on a phone held at reading distance.
       ---------------------------------------------------------------------- */

    /* legibility */
    .hm-list b { font-size: 12px; }
    .hm-list span { font-size: 14.5px; }
    .hm-foot-note { font-size: 13px; }
    .hm-card-head span { font-size: 13px; }
    .hm-card-foot { font-size: 12.5px; }
    .hm-hero-note { font-size: 14px; }

    /* the headline ran to five lines on a 360px screen */
    .hm-hero h1 { font-size: 30px; letter-spacing: -.03em; }

    /* a landing page on a phone is a long scroll already; this trims about a
       screen and a half without crowding anything */
    .hm-sec { padding: 44px 0; }
    .hm-hero { padding: 36px 0 44px; }
    .hm-cta { padding: 48px 0; }
    .hm-sub { margin-bottom: 28px; }
    .hm-three { gap: 22px; }
}

/* --------------------------------------------------------------------------
   TOUCH DEVICES

   Tap-target size is about the input device, not the screen width. These rules
   were behind a 520px breakpoint, which meant a 768px iPad — a finger, at
   arm's length — got the mouse-sized version. `pointer: coarse` catches the
   finger whatever the screen is, with a width fallback for browsers that do
   not report it.

   44px is the figure both Apple and Google publish, and it is roughly the pad
   of an adult thumb.
   -------------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 900px) {
    .home a, .home button, .home summary { touch-action: manipulation; }

    .hm-bar-nav a { display: flex; align-items: center; min-height: 44px; }
    .hm-btn { min-height: 44px; }
    .hm-brand { min-height: 44px; }

    .hm-foot-links { gap: 0 20px; }
    .hm-foot-links a { display: flex; align-items: center; min-height: 44px; font-size: 14px; }
    .hm-foot-brand { display: inline-flex; align-items: center; min-height: 44px; }

    .hm-q summary { padding: 18px 0; min-height: 48px; }
    .hm-pricing-more a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   THE BLUE                                              (Aug 2026)

   Two shades, on purpose.

   #4B90FF is the exact blue sampled out of favicon.png, and it is used only on
   the brand mark, where it is a logo rather than something you read.

   Everything that carries text — buttons, links, the accordion marker — uses
   #2F6FDB. The logo blue against white is 3.12:1, and normal-size text needs
   4.5:1 to be legible for someone with ordinary eyesight, let alone anyone
   with a mild sight impairment. The deeper shade is 4.75:1 both ways: dark
   enough to read as a link on white, light enough that white text sits on it.

   Same family, so the brand still reads as one colour.
   -------------------------------------------------------------------------- */
.brand-blue { color: #4B90FF; }

/* The Google button in the hero. The mark sits inline with the label, and the
   button must not shrink the icon when the text wraps on a narrow phone. */
.hm-hero-cta .hm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.hm-hero-cta .hm-btn svg { flex: 0 0 auto; }

/* The page already stacks these full-width at 520px (line ~286) — this only
   adds the tap height, which was not set. A bio link sends most people here
   on a phone and the first tap decides whether there is a second. */
@media (max-width: 520px) {
  .hm-hero-cta .hm-btn { min-height: 48px; }
}

/* WHAT YOU GET — the plain list of what is actually in the product.
   Reuses `.hm-three`, tightened to four across because these are short
   nouns rather than paragraphs. */
.hm-what { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px 28px; }
.hm-what h3 { font-size: 15px; }
.hm-what p { font-size: 13.5px; line-height: 1.6; }
.hm-lede-sm {
    margin: 0 0 26px; max-width: 56ch;
    font-size: 14.5px; line-height: 1.65; color: var(--h-ink-2);
}