/* Copyright (c) 2026 Datum Investment Solutions, LLC. All rights reserved.
   Proprietary and confidential. See LICENSE at the repository root. */

/* The front door. Its own stylesheet and its own palette variables rather
   than app.css, because app.css sets `main{display:grid}` and a dozen
   other things for the marketplace's map-and-list layout -- inheriting
   that here is how the ranking page ended up laid out in a 44% column.
   The colours are the product's, so this page and the first screen after
   it look like one thing.

   THIS PAGE IS LIGHT, ALWAYS. It is the only page in the product that
   does not follow the viewer's theme, and that is a decision rather than
   an omission: it is the cover, seen by people who have never met us,
   and a bright page is a more inviting first impression than a dark one.
   Every screen BEHIND the door still follows the theme -- see app.css,
   which carries the second palette.

   So there is no dark block here, and landing.html does not load
   theme.js. Two things follow from that and both are load-bearing:
     - `color-scheme: light` below, so the browser paints its own
       furniture -- scrollbars, form controls, the space past the page --
       to match, instead of leaving dark chrome around a white page on a
       machine set to dark;
     - no token may be defined anywhere but this block. There is no
       second palette for one to be missing from. */
:root{
  color-scheme: light;
  --ink:#0f1c2a; --ink2:#43586b; --mut:#7189a0; --line:#dfe9f2;
  --bg:#f7fafd; --card:#fff; --accent:#1d6fa8; --accent2:#e4f0f9;
  --ok:#1c6b58; --band:#f4f8fc;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--card);color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
a{color:inherit}

/* ---- the bar ---- */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 28px;border-bottom:1px solid var(--line);background:var(--card);
  position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.mark{background:var(--accent);color:#fff;font-weight:700;letter-spacing:.5px;
  padding:5px 9px;border-radius:6px;font-size:13.5px}
.wordmark{font-weight:600;font-size:15px;letter-spacing:-.1px}
.topnav{display:flex;align-items:center;gap:8px}
.signin{padding:9px 14px;font-size:14px;font-weight:600;text-decoration:none;
  border-radius:8px}
.signin:hover{background:var(--bg)}
.create{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  background:var(--accent);color:#fff;border-radius:999px;font-size:14px;
  font-weight:600;text-decoration:none}
.create:hover{filter:brightness(1.12)}

/* ---- the hero ----
   Full site width, and a fixed HEIGHT rather than an aspect ratio: the
   words have to sit in a predictable place, and a ratio makes the text
   box grow with the window until the headline is alone in a field of
   sky. object-fit does the rest. */
.hero{position:relative;height:clamp(420px,52vh,560px);overflow:hidden;
  background:linear-gradient(150deg,#123a56,#1d6fa8 55%,#2f8ec4)}
.heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block}
/* A scrim, because the headline has to be legible over whatever
   photograph is dropped in at assets/login.jpg -- a bright sky and a dark
   roof are the same box to the CSS.
   TWO LAYERS, not one. A flat wash strong enough for the sub-paragraph
   sitting on a sunlit roofline is strong enough to bury the photograph
   everywhere else, which is the whole reason for having a photograph. So
   the radial darkens where the words are and the linear keeps the top and
   bottom edges from washing out, and the picture stays a picture at the
   sides. Measured against the current image at 1440/900/420. */
.heroscrim{position:absolute;inset:0;
  background:
    radial-gradient(74% 86% at 50% 46%,rgba(6,18,32,.68),rgba(6,18,32,.18) 72%),
    linear-gradient(180deg,rgba(8,22,38,.50),rgba(8,22,38,.28) 42%,rgba(8,22,38,.62))}
.herotext{position:relative;max-width:820px;margin:0 auto;padding:0 24px;
  height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;color:#fff}
.herotext h1{margin:0;font-size:clamp(30px,4.4vw,50px);line-height:1.12;
  letter-spacing:-1px;font-weight:700;text-wrap:balance;
  text-shadow:0 2px 18px rgba(6,18,32,.45)}
.herotext p{margin:16px 0 0;max-width:60ch;font-size:clamp(15px,1.5vw,17px);
  line-height:1.6;color:#eaf2f9;text-shadow:0 1px 10px rgba(6,18,32,.45)}
.ctaform{margin:0}
/* WHITE ON THE PHOTOGRAPH, not from the palette. This pill and the words
   above it sit on the hero image rather than on the page's ground, so
   their colours belong to the image and not to the page -- the same
   reasoning that keeps --onfill out of app.css's two palettes. */
.cta{display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  padding:14px 30px;background:#fff;color:#0f1c2a;border-radius:999px;
  font:inherit;font-size:15.5px;font-weight:700;text-decoration:none;
  border:0;cursor:pointer}
.cta:hover{background:#f2f7fb}

/* ---- what it is ----
   Lifted over the hero's bottom edge, so the page reads as one piece
   rather than two stacked blocks. */
.pitch{position:relative;z-index:2;margin:-56px auto 0;max-width:1240px;
  padding:44px 40px 46px;background:var(--band);border-radius:16px 16px 0 0}
.pitch h2{margin:0 0 30px;text-align:center;font-size:clamp(24px,3vw,34px);
  font-weight:700;letter-spacing:-.6px}
.pitchrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.pitchcol{text-align:center;color:var(--accent)}
.pitchcol h3{margin:12px 0 7px;font-size:16px;color:var(--ink)}
.pitchcol p{margin:0;font-size:14px;line-height:1.6;color:var(--ink2);
  max-width:34ch;margin-inline:auto}

/* The way on from the three columns to the long page. Centred under them
   and in the accent, so it reads as the continuation it is rather than as
   a fourth claim. */
.pitchmore{margin:30px 0 0;text-align:center}
.pitchmore a{color:var(--accent);font-size:14.5px;font-weight:600;
  text-decoration:none}
.pitchmore a:hover{text-decoration:underline}

/* ---- what buyers say ----
   Between the claims and the inventory, which is where proof goes: after
   somebody has been told what this is and before they are shown the
   stock. Sits on the page ground rather than in the tinted band above it,
   so the two sections read as two things.

   PLACEHOLDER COPY -- see the comment in landing.html. */
.voices{max-width:1240px;margin:0 auto;padding:46px 40px 8px}
.voices h2{margin:0;text-align:center;font-size:clamp(21px,2.4vw,28px);
  font-weight:700;letter-spacing:-.4px}
.vlead{margin:7px 0 26px;text-align:center;font-size:13px;color:var(--ink2)}

.vrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){ .vrow{grid-template-columns:minmax(0,1fr)} }

/* A quote is not a card of figures, so it does not get the same treatment:
   no shadow, no fill, one hairline and a rule above the attribution. The
   quotation mark is drawn rather than typed -- an actual " in the text
   would be read aloud and would copy and paste into the quote. */
.vcard{margin:0;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:14px;padding:26px 24px 20px;
  background:var(--card)}
.vcard blockquote{margin:0 0 18px;flex:1;font-size:15px;line-height:1.65;
  color:var(--ink);position:relative}
.vcard blockquote::before{content:"\201C";position:absolute;top:-22px;left:-4px;
  font:700 46px/1 Georgia,'Times New Roman',serif;color:var(--accent);
  opacity:.25;pointer-events:none}

.vcard figcaption{display:flex;align-items:center;gap:11px;
  padding-top:15px;border-top:1px solid var(--line)}

/* THE AVATAR SLOT. A photograph if somebody has dropped one in, the
   person's initials if not -- and NOT a drawing of a face, which is what
   this carried for one release: "DO NOT EVER USE CARTOON IMAGES ON THIS
   WEBSITE."

   NO <img>, AND THAT IS THE WHOLE TRICK. An <img> pointed at a file that
   is not there draws a broken-image glyph over the initials -- measured
   in Chromium, alt="" and all. A background image that 404s paints
   nothing at all. So the initials are the element's ::before and the
   photograph is an ::after laid over them, taking its url from a --pic
   set inline; an absent file leaves ::after transparent, initials showing.

   It needs no JavaScript, which matters: the rest of this site works
   with scripting off and this should not be the exception.

   TO PUT A FACE HERE: drop a square jpg in, named after the person. The
   folder's README says where, and what shape. */
.vav{flex:0 0 auto;position:relative;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;background:var(--accent);
  color:#fff;font-size:14px;font-weight:700;letter-spacing:.02em}
.vav::before{content:attr(data-ini)}
.vav::after{content:"";position:absolute;inset:0;background-image:var(--pic);
  background-size:cover;background-position:center}

.vwho{min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.35}
.vwho b{font-size:14px}
.vwho i{font-style:normal;font-size:12.5px;color:var(--ink2)}

/* ---- the homes ---- */
.homes{max-width:1240px;margin:0 auto;padding:42px 40px 56px}
.homeshead{display:flex;align-items:baseline;gap:18px;margin:0 0 20px}
.homeshead h2{margin:0;font-size:24px;font-weight:700;letter-spacing:-.4px}
.viewallform{margin:0}
.viewall{font:inherit;font-size:14px;font-weight:600;color:var(--accent);
  background:none;border:0;padding:0;cursor:pointer}
.viewall:hover{text-decoration:underline}

/* THREE ACROSS, and six cards, so the row always fills. auto-fill picked
   four at desktop width and left the last two stranded beside a hole the
   size of two more cards -- a grid with a gap in it reads as something
   that failed to load rather than as a choice. Fixed counts that divide
   six: 3, then 2, then 1. */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--card);text-decoration:none;display:flex;flex-direction:column}
.card:hover{border-color:var(--accent);box-shadow:0 6px 20px rgba(16,42,66,.10)}
.cardpic{position:relative;aspect-ratio:4/3;background:var(--bg);overflow:hidden}
.cardpic img{width:100%;height:100%;object-fit:cover;display:block}
/* The badge is the honest label for a masked photograph: it says the
   picture is not this house rather than letting somebody assume it is. */
.masked{position:absolute;left:10px;top:10px;background:rgba(15,28,42,.78);
  color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 8px;border-radius:20px}
.cardbody{padding:13px 14px 15px}
.price{font-size:20px;font-weight:700;letter-spacing:-.5px;
  font-variant-numeric:tabular-nums}
.where{margin:3px 0 0;font-size:13px;color:var(--ink2)}
.kind{margin:1px 0 0;font-size:12.5px;color:var(--mut)}
.specs{display:flex;gap:14px;margin:11px 0 0;padding-top:10px;
  border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.spec{display:flex;flex-direction:column}
.spec b{font-size:13.5px;font-weight:700}
.spec span{font-size:10px;color:var(--mut);text-transform:uppercase;
  letter-spacing:.04em}
.spec.cap b{color:var(--ok)}

/* ---------------------------------------------------------------------
   /how-it-works.html
   ---------------------------------------------------------------------
   It shares this stylesheet -- and therefore the palette, the bar, the
   footer and the light-only decision -- because it is part of the cover:
   the same person, one click further in.

   SHORT. The first version was a manual and read like one: four steps
   with three paragraphs each, six measures with a paragraph each, a
   comparison table and a seven-question Q&A. What is left is a picture,
   a sentence, three steps, two lists and six numbers, and every rule
   below exists to keep it that size.

   No new tokens. A colour defined here would be a colour that exists only
   on this page, and the next one somebody added would be a shade off. */
.doc{max-width:1240px;margin:0 auto;padding:0 40px}

/* ---- the opening ----
   SPLIT, NOT FULL-BLEED. The cover already opens on a full-width
   photograph; a second one directly behind it reads as the same page
   twice. Words left, picture right, and both in the first screen. */
.dhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:48px;align-items:center;padding:54px 0 50px}
.dherotext{max-width:52ch}
.eyebrow{margin:0 0 14px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--accent)}
.dherotext h1{margin:0 0 18px;font-size:clamp(30px,4.4vw,50px);line-height:1.08;
  font-weight:700;letter-spacing:-1.2px;text-wrap:balance}
.lead{margin:0 0 28px;font-size:17px;line-height:1.6;color:var(--ink2)}

/* A FIXED FRAME. The photograph is whatever somebody drops in, so the
   box holds its shape and object-fit does the rest -- otherwise the
   headline beside it moves depending on which picture is in the folder.
   The frame is painted, so removing the image entirely leaves a panel
   rather than a collapsed column. */
.dherofig{aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  background:var(--band);border:1px solid var(--line)}
.dheroimg{width:100%;height:100%;object-fit:cover;display:block}

/* ---- three steps, one line each ---- */
/* THE BUTTON, FILLED. The cover's .cta is white on white deliberately --
   it sits on the hero photograph, where the page's palette does not
   apply. On this page it sits on the page's own ground, and white on
   white is invisible until hover: the exact defect .close and .seeall
   each shipped with once. So the primary here takes the accent. */
.doc .cta{background:var(--accent);color:#fff}
.doc .cta:hover{background:var(--accent);filter:brightness(1.12)}

.dsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;
  padding:8px 0 46px}
.dstep h3{margin:14px 0 7px;font-size:17px;font-weight:700;letter-spacing:-.3px}
.dstep p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink2);max-width:34ch}
.stepn{width:34px;height:34px;border-radius:50%;background:var(--accent);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}

/* ---- a tinted band, alternating with the page ground ---- */
.docsec{padding:44px 0;border-top:1px solid var(--line)}
.docsec.band{background:var(--band);border-top:0;margin:0 -40px;
  padding-inline:40px;border-radius:16px}
.docsec h2{margin:0 0 18px;font-size:clamp(21px,2.6vw,30px);font-weight:700;
  letter-spacing:-.5px;text-wrap:balance}
.seclead{margin:-6px 0 22px;max-width:68ch;font-size:15px;line-height:1.6;
  color:var(--ink2)}

.twoup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
  align-items:start}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:22px 24px}
/* A rule along the top in the confirming colour: both are lists of what
   you get, so they are one pair rather than a comparison. */
.tcard.open{border-top:3px solid var(--ok)}
.tcard h3{margin:0 0 14px;font-size:15px;font-weight:700;letter-spacing:-.2px}

.ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:24px;font-size:14px;line-height:1.5;
  color:var(--ink2)}
/* Drawn, not an emoji: a tick is a different picture on every platform
   and a tofu box on some of them. */
.ticks li::before{content:"";position:absolute;left:2px;top:5px;width:10px;
  height:5px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);
  transform:rotate(-45deg)}

/* ---- the six tests, as a strip ----
   They were six cards with a paragraph each, which is a section about our
   method rather than about their money. Six numbers say the same thing in
   four seconds, and each one prints its own formula beside the figure on
   the listing for anybody who wants to check it. */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{display:flex;align-items:baseline;gap:9px;background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:8px 16px}
.chips b{font-size:14px;font-weight:600;letter-spacing:-.1px}
.chips span{font-size:13px;font-weight:700;color:var(--ok);
  font-variant-numeric:tabular-nums}

/* ---- the way out ---- */
.docend{margin:0 -40px;padding:52px 40px 58px;text-align:center;
  border-top:1px solid var(--line)}
.docend h2{margin:0 0 8px;font-size:clamp(21px,2.6vw,28px);font-weight:700;
  letter-spacing:-.5px}
.docend p{margin:0 0 22px;font-size:15px;color:var(--ink2)}
.docend .ctaform{display:flex;justify-content:center}

/* The bar's third link. Same weight as Sign in -- it is a place to go,
   not an action -- and marked when it is the page you are on. */
.topl{padding:9px 14px;font-size:14px;font-weight:600;text-decoration:none;
  border-radius:8px}
.topl:hover{background:var(--bg)}
.topl.on{color:var(--accent);background:var(--accent2)}

@media (max-width:900px){
  .doc{padding:0 22px}
  .docsec.band,.docend{margin-inline:-22px;padding-inline:22px}
  /* The words first, then the picture. A photograph above the headline on
     a phone is a screen of image before anything has been said. */
  .dhero{grid-template-columns:minmax(0,1fr);gap:28px;padding:34px 0 30px}
  .dsteps,.twoup{grid-template-columns:minmax(0,1fr);gap:24px}
  .dsteps{padding-bottom:34px}
}

/* ---- foot ----
   Three bands: who we are and what we do, the links, then the
   disclosures and the copyright line. The disclosures are deliberately
   the quietest thing on the page -- they have to be present and readable
   and they are not what anybody came for. */
.foot{border-top:1px solid var(--line);background:var(--bg)}

/* ---- the shell the server-rendered pages share ----
   The blog and the notices (privacy, cookies, terms, ...) are both drawn
   by one template in web/server.js, so the parts of it that are not the
   content belong here with the rest of the shared shell rather than
   twice, once in each of their stylesheets. */
.blogbody{background:var(--bg)}
/* A reader who arrived from a search result has seen no other page of
   this site, so this row is the whole of the navigation they get. */
.bfootnav{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;
  padding:30px 24px 4px}
.bfootnav a{color:var(--ink2);text-decoration:none;font-size:14px;font-weight:600}
.bfootnav a:hover{color:var(--accent);text-decoration:underline}
/* THE NOTICES, QUIETER AND UNDERNEATH. They are not navigation -- nobody
   arrives wanting the cookie notice -- but they have to be one click from
   every page, which is the whole reason a footer exists. */
.bfootlaw{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;
  padding:12px 24px 0}
.bfootlaw a{color:var(--mut);text-decoration:none;font-size:12.5px}
.bfootlaw a:hover{color:var(--accent);text-decoration:underline}
/* The small capitalised line above a title, on a masthead or a notice. */
.beyebrow{margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
/* The brand, then FOUR link columns -- Marketplace, Account, Notices,
   Contact. The brand column is narrower than it was to make room for the
   fourth without squeezing the others into two words a line. */
.footcols{max-width:1240px;margin:0 auto;padding:36px 40px 26px;display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:28px}
.footbrand p{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--ink2);
  max-width:36ch}
.footbrand .brand{display:inline-flex;align-items:center;gap:10px}
/* The wordmark is hidden in the top bar on a narrow screen because the
   bar is one row and the buttons need it. Down here there is room. */
.footbrand .wordmark{display:inline}
/* The fair-housing mark. Every US property site carries one; leaving it
   off is conspicuous to the people who look for it. */
.ehologo{display:flex;align-items:center;gap:7px;font-size:12px;
  color:var(--mut);margin-top:14px !important}

.footnav h3{margin:0 0 12px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--mut)}
.footnav ul{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:9px}
.footnav a,.footnav button{font:inherit;font-size:13.5px;color:var(--ink2);
  text-decoration:none;background:none;border:0;padding:0;cursor:pointer;
  text-align:left}
.footnav a:hover,.footnav button:hover{color:var(--accent);text-decoration:underline}
.footnav form{margin:0}
.footnav li span{font-size:13.5px;color:var(--ink2)}

/* THE DISCLOSURES. 11.5px and --mut, which is the smallest anything on
   this page gets: small enough that it reads as boilerplate, large
   enough to actually read. Not a scrolling box and not collapsed behind
   a summary -- a disclosure somebody has to open is a disclosure that
   was not made. */
.legal{max-width:1240px;margin:0 auto;padding:20px 40px 4px;
  border-top:1px solid var(--line);columns:2;column-gap:44px}
/* TWO COLUMNS, not one wide one. Boilerplate still has to be readable:
   across the full 1240px these ran to about two hundred characters a
   line, which is roughly twice what an eye tracks back from reliably --
   and a disclosure nobody can read is the same as one that was not made.
   Capping the measure alone left the right half of the band empty. Two
   columns fix the line length and use the space, and break-inside keeps
   a paragraph from being split down the middle. */
.legal p{margin:0 0 11px;font-size:11.5px;line-height:1.65;color:var(--mut);
  break-inside:avoid}
.legal b{color:var(--ink2);font-weight:600}

.footin{max-width:1240px;margin:0 auto;padding:16px 40px 26px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--mut)}
.footin b{color:var(--ink)}

@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* The brand column spans, so the link columns stay side by side rather
     than each getting a fifth of a narrow screen. */
  .footcols{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;
    padding:30px 22px 22px}
  .legal{columns:1}
  .footbrand{grid-column:1/-1}
  .legal,.footin{padding-left:22px;padding-right:22px}
  .pitchrow{grid-template-columns:1fr;gap:26px}
  .pitch{margin-top:-36px;padding:32px 24px 34px;border-radius:14px 14px 0 0}
  .homes{padding:34px 22px 44px}
  .top{padding:12px 18px}
  .wordmark{display:none}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .footcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{height:clamp(360px,60vh,460px)}
  .signin{padding:8px 10px}
  .create{padding:8px 13px}
  /* THE WORD LINKS COME OUT OF THE BAR ON A PHONE. With them in it, the
     bar was three pixels wider than the screen and the whole page
     scrolled sideways -- on the cover, before anything was added to it.
     Sign in and Create Account are what the bar is for at this width;
     every other destination is in the footer, which is where somebody on
     a phone goes looking anyway. */
  .topl{display:none}
}