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

/* Datum Investment Solutions, LLC -- the public site.
 *
 * ONE BRAND ACROSS TWO DEPLOYMENTS. The website and the Marketplace are
 * separate bundles on separate hosts, and a visitor crosses between them
 * by pressing a button. So the LAYOUT here is the Marketplace cover's
 * layout, rule for rule: the same full-bleed hero with its two-layer
 * scrim and white pill, the same tinted band lifted over the hero's
 * bottom edge, the same three columns under it, the same chip-and-
 * wordmark bar. Anything changed in one of those probably has a twin in
 * web/public/landing.css and should change there too.
 *
 * THE GROUND IS DARK BLUE, and that is the one deliberate difference.
 * "Lets use the layout/landing we have on the Marketplace, for the main
 * website. And style the main website around that look and feel but keep
 * the dark blue color background on the pages." The cover is light-only;
 * this is not. The palette below is the product's DARK palette -- the one
 * every screen behind the login already draws itself in -- so the website
 * and a signed-in Marketplace look like one company, and the photograph
 * at the top is the same photograph either way.
 *
 * ONE PALETTE, COMMITTED. It is dark for everybody, not dark for whoever
 * has a dark desktop: a site that follows the viewer's theme agrees with
 * the Marketplace for half its visitors and disagrees for the other half,
 * which is the failure this replaced. Two things follow and both are
 * load-bearing:
 *   - `color-scheme: dark` below, so the browser paints its own furniture
 *     -- scrollbars, form controls, the space past the page -- to match,
 *     instead of leaving white chrome around a dark page;
 *   - no token may be defined anywhere but this block. There is no second
 *     palette for one to be missing from.
 */
:root{
  color-scheme: dark;
  --ink:#e6eef6; --ink2:#a9bccd; --mut:#8ba0b4; --line:#22384c;
  /* The ground, a step up for panels, and the tint the lifted band takes.
     Blue rather than grey the whole way down -- this is the colour the
     instruction was about. */
  --bg:#0b1622; --card:#101f2e; --band:#122740; --foot:#08121d;
  /* LIGHTER THAN THE COVER'S, NOT DARKER, and for the reason app.css
     gives: #1d6fa8 on a near-black ground is a link nobody can read. The
     brand blue is still the brand blue -- it is carrying white text on a
     pale page there and near-black text on a dark one here. */
  --accent:#5aa9dd; --accent2:#16304a; --onaccent:#07131d;
  /* The closing band, and the hero's fallback gradient: the cover's own
     two blues, which are vivid against this ground where the cover's
     near-black band would have disappeared into it. */
  --deep:#123a56; --deep2:#1d6fa8;
  --good:#7fd3b0; --goodbg:#12302a; --goodline:#1e4a3e;
  --crit:#f0a49c; --critbg:#331816; --critline:#5a2822;
  /* Deeper and wider than a daylight shadow: the one that reads as a
     lifted card on a pale ground is invisible on a dark one. */
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",
     Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);
     -webkit-font-smoothing:antialiased}
a{color:var(--accent)}
img,svg{max-width:100%}
h1,h2,h3{letter-spacing:-.02em;line-height:1.2;margin:0}
p{margin:0}

.wrap{width:min(1080px,100%);margin:0 auto;padding:0 20px}

/* ---- Header -------------------------------------------------------- */
/* Sticky, because the two things a visitor needs -- what this is, and the
   way in -- should not require scrolling back up to find. */
.bar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:14px;min-height:62px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;
  margin-right:auto}
/* THE CORPORATE LOGO, AND THE WORDMARK BESIDE IT. This was the WORD
   Datum in a blue rounded rectangle -- a stand-in drawn in CSS because
   there was no logo. There is one now, and it goes here:
   "You now have the corporate logo. Replace the word DATUM with the logo
   that says Datum in it."
   The tile is white and the artwork is not recoloured. This bar is dark
   navy and the Marketplace's is white, and the one treatment that works
   on both is the logo on a field of its own -- which is how it was drawn,
   on a white page. Tinting it to suit each ground was tried first and
   turned the gold window inside the D grey.
   The text stays in the markup for a reader with no stylesheet and for
   anyone copying the page; it is pushed out of sight rather than removed,
   because display:none takes it from a screen reader too. */
.mark{background:#fff;border-radius:6px;padding:5px 8px;
  background-image:url(/datum-mark.png);background-repeat:no-repeat;
  background-position:center;background-size:auto 21px;
  width:37px;height:31px;box-sizing:border-box;
  overflow:hidden;text-indent:-999em;white-space:nowrap}
.wordmark{font-weight:600;font-size:15px;letter-spacing:-.1px}
.wordmark span{color:var(--mut)}

/* The places to go are links, not buttons -- the Marketplace's .topl.
   Only the way in is a button, because only the way in is an action. */
nav.links{display:flex;align-items:center;gap:4px}
.topl{padding:9px 13px;font-size:14px;font-weight:600;text-decoration:none;
  border-radius:8px;color:var(--ink);white-space:nowrap}
.topl:hover{background:var(--card)}
.topl[aria-current="page"]{color:var(--accent);background:var(--accent2)}
/* The way in, as the Marketplace draws it: a filled pill. */
.create{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;
  background:var(--accent);color:var(--onaccent);border-radius:999px;font-size:14px;
  font-weight:600;text-decoration:none;white-space:nowrap}
.create:hover{filter:brightness(1.12)}

/* The compact nav. Below 720px the links would wrap into a second row and
   push the way in off the first screen, so the select replaces them
   rather than sitting beside them. */
.jump{display:none}
@media (max-width:719px){
  nav.links{display:none}
  .jump{display:block}
}

/* ---- Buttons ------------------------------------------------------- */
/* Pills, because the Marketplace's are. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;
  padding:9px 18px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);white-space:nowrap}
.btn:hover{background:var(--accent2);border-color:var(--accent)}
/* A filled pill, like the bar's. */
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--onaccent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.big{padding:13px 26px;font-size:15px}

select,input,textarea{font:inherit;font-size:14px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:9px 10px;width:100%}
select:focus,input:focus,textarea:focus{outline:2px solid var(--accent);
  outline-offset:-1px;border-color:var(--accent)}
.jump select{width:auto;font-weight:600;cursor:pointer}

/* ---- Hero ----------------------------------------------------------
   The Marketplace cover's hero, verbatim in structure: full site width, 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.

   It replaces a picture-beside-the-words hero, which was a different page
   from the one behind the Log in button. */
.hero{position:relative;height:clamp(420px,52vh,560px);overflow:hidden;padding:0;
  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 /hero.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. */
.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)}
/* 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.

   ITS OWN CLASS, not .cta. .cta on this site is the row that holds two
   buttons -- on About, on Contact, in the closing band -- and giving it
   the pill's fill would have painted those rows white. */
.herocta{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}
.herocta:hover{background:#f2f7fb}

/* ---- What Datum does ------------------------------------------------
   Lifted over the hero's bottom edge, so the page reads as one piece
   rather than two stacked blocks. The Marketplace's .pitch. */
.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;
  /* A hairline, because on a dark page a band a few percent lighter than
     the ground has no edge of its own; the light cover gets one free from
     the contrast. */
  border:1px solid var(--line);border-bottom: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;display:flex;flex-direction:column;align-items:center}
.pitchcol h3{margin:13px 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}
/* NUMBERED, because these three are a sequence and not three claims:
   outreach finds the property, review underwrites it, and only then is
   there anything to capitalize. The Marketplace numbers the same way on
   /how-it-works.html. */
.stepn{width:34px;height:34px;border-radius:50%;background:var(--accent);
  color:var(--onaccent);display:grid;place-items:center;font-weight:700;
  font-size:15px;font-variant-numeric:tabular-nums}
.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}

/* THREE ACROSS FOR AS LONG AS THREE FIT. Each column is 34ch of prose,
   so three of them need about 820px of band; below that they stack. */
@media (max-width:820px){
  .pitch{margin-top:-34px;padding:32px 22px 34px;border-radius:14px 14px 0 0}
  .pitchrow{grid-template-columns:minmax(0,1fr);gap:26px}
}
/* A shorter hero on a phone. At 52vh of a tall, narrow screen the
   photograph is most of the first screen and the words are all of the
   rest, with nothing to say there is a page underneath. */
@media (max-width:560px){
  .hero{height:clamp(360px,60vh,460px)}
}

/* ---- What buyers have said ------------------------------------------
   Between the claims and the rest of the page, which is where proof goes:
   after somebody has been told what this is. The Marketplace cover runs
   the same section in the same place, and these are the same three
   quotes -- one site, one set of words. */
.voices{padding:52px 0 8px}
.voices h2{text-align:center;font-size:clamp(21px,2.4vw,28px);letter-spacing:-.4px;
  margin-bottom:26px;text-wrap:balance}
.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, 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;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:26px 24px 20px}
.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:.3;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:var(--onaccent);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)}

/* ---- Sections ------------------------------------------------------- */
/* THE GROUND ALTERNATES, and the pitch band above is the tint. A second
   tinted section directly under it would put two bands of the same colour
   against each other with nothing between them but a hairline, which
   reads as one band that failed to finish. */
section{padding:52px 0}
.head{max-width:62ch;margin-bottom:30px}
.head h2{font-size:clamp(23px,3.4vw,30px);text-wrap:balance}
.head p{margin-top:12px;color:var(--ink2)}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
/* LIFTED, NOT DARKENED. On a dark ground a panel that goes a shade below
   the page sinks into it and stops reading as a panel at all, so --card
   sits a step ABOVE --bg. */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:22px;box-shadow:var(--shadow)}
.card h3{font-size:17px;margin-bottom:9px}
.card p{color:var(--ink2);font-size:14.6px}

/* The eyebrow, on the pages that are not the cover. */
.eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.lede{margin-top:16px;font-size:clamp(16px,2vw,18px);color:var(--ink2);
  max-width:56ch}
.cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}

/* The cover picture on About. Cropped to a band, and allowed past the
   measure on either side so it reads as a break in the page rather than
   an illustration wedged into a paragraph. */
.shot{display:block;width:100%;height:auto;border-radius:16px;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.shot.wide{margin:30px 0 4px;aspect-ratio:21/8;object-fit:cover}
@media (min-width:820px){.shot.wide{width:calc(100% + 72px);margin-left:-36px}}

ul.ticks{margin:12px 0 0;padding:0;list-style:none;color:var(--ink2);font-size:14.6px}
ul.ticks li{padding-left:24px;position:relative;margin-top:9px}
/* Drawn, not an emoji: a tick is a different picture on every platform
   and a tofu box on some of them. The Marketplace draws its the same way. */
ul.ticks li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;
  height:5px;border-left:2px solid var(--good);border-bottom:2px solid var(--good);
  transform:rotate(-45deg)}

/* The two ways a property pays. Presented side by side because the whole
   point is that they are a choice, not a ranking. */
.paths{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.paths{grid-template-columns:1fr 1fr}}
.path{border-top:3px solid var(--accent)}
.path.equity{border-top-color:var(--good)}
.path .tag{font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent)}
.path.equity .tag{color:var(--good)}

/* ---- Closing band --------------------------------------------------- */
/* THE CLOSING BAND, in the cover's own two blues. On this ground it is
   the brightest thing on the page, which is what a closing call to action
   is for; the near-black band it replaced was a slightly different dark
   blue on a dark blue page and read as nothing at all. */
.band{background:linear-gradient(160deg,var(--deep),var(--deep2));color:#eaf3fa;
  border:0}
.band h2{color:#fff}
.band p{color:#b9cfe0}
.band .btn{background:#fff;border-color:#fff;color:#0d2436}
.band .btn:hover{background:#eaf3fa;border-color:#eaf3fa}
.band .btn.outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.band .btn.outline:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ---- The About masthead --------------------------------------------
   SPLIT, NOT FULL-BLEED -- the Marketplace's /how-it-works.html makes the
   same call for the same reason: the cover already opens on a full-width
   photograph, and 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:8px 0 44px}
.dherotext{max-width:52ch}
.dherotext h1{font-size:clamp(30px,4.4vw,46px);line-height:1.08;
  letter-spacing:-1.2px;text-wrap:balance}
/* 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 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}
@media (max-width:820px){
  /* 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:26px;padding-bottom:30px}
}

/* The same tinted band, with nothing above it to be lifted over. */
.pitch.flat{margin-top:0;border-radius:16px}

/* Two columns of one-line items -- the whole of what underwriting covers,
   read in about four seconds rather than four paragraphs. */
ul.ticks.two{display:grid;grid-template-columns:minmax(0,1fr);gap:0 30px}
@media (min-width:680px){ul.ticks.two{grid-template-columns:1fr 1fr}}

/* WHAT WE ARE NOT. Same shape as the ticks and a different mark, because
   it is the same kind of list saying the opposite thing: a rule rather
   than a tick, drawn rather than typed for the same reason. */
ul.nots{margin:12px 0 0;padding:0;list-style:none;color:var(--ink2);font-size:14.6px}
ul.nots li{padding-left:24px;position:relative;margin-top:9px}
ul.nots li::before{content:"";position:absolute;left:2px;top:.78em;width:11px;
  height:2px;border-radius:2px;background:var(--mut)}

/* ---- Page body (About / Contact) ----------------------------------- */
.page{padding:52px 0 8px}
.page h1{font-size:clamp(27px,4.4vw,38px)}
.prose{max-width:68ch}
.prose p+p,.prose p+h2,.prose ul+h2,.prose ul+p{margin-top:18px}
.prose h2{font-size:20px;margin-top:32px}
.prose p{color:var(--ink2)}

.form{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:22px;box-shadow:var(--shadow)}
.field{margin-top:15px}
.field:first-child{margin-top:0}
/* SIDE BY SIDE MEANS LEVEL. In a .row only the first field is a
   first-child, so the second one kept its 15px and sat a row-gap lower
   than the one beside it -- Email's box and Phone's box out of line by
   exactly that. The grid gap is what spaces these. */
.row>.field{margin-top:0}
.field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:5px;
  letter-spacing:.02em}
.field .hint{margin-top:5px;font-size:12px;color:var(--mut)}
textarea{min-height:118px;resize:vertical}
.row{display:grid;gap:15px;grid-template-columns:minmax(0,1fr)}
@media (min-width:620px){.row{grid-template-columns:1fr 1fr}}
/* Off screen but still read aloud. Two different jobs share the trick:
   a label the design does not need but a screen reader does (.vh), and the
   honeypot field that only a bot ever fills in (.hp). */
.vh,.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{margin-top:15px;padding:10px 12px;border-radius:8px;font-size:13.5px;
  background:var(--goodbg);border:1px solid var(--goodline);color:var(--good);
  display:none}
.note[data-shown]{display:block}
.note.bad{background:var(--critbg);border-color:var(--critline);color:var(--crit)}

/* ---- Footer -------------------------------------------------------- */
footer{border-top:1px solid var(--line);background:var(--foot);
  padding:30px 0 40px;margin-top:52px;color:var(--mut);font-size:13.5px}
/* The closing band already ends the page, so the gap was a stripe of
   white between the dark band and the footer's tint -- which reads as a
   section that failed to load.
   :has(), because the band is the last child of <main> and the footer is
   a sibling of <main>, not of the band. A browser too old for it gets the
   stripe back and nothing worse. */
main:has(> .band:last-child) + footer{margin-top:0;border-top:0}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
footer nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:16px}
footer a{color:var(--ink2);text-decoration:none}
footer a:hover{color:var(--accent);text-decoration:underline}
.legal{margin-top:12px;font-size:12px;color:var(--mut);max-width:70ch;
  line-height:1.55}