/* Validated.Directory 2.0.0 · Start (BEA-432; content/sign-up.md). Loads after the kit, /dir/shell.css and
   /start/form.css; only this page's own. Night turning to dawn (the first screen opens on the price, a site plan on a
   desk at sunrise), then three things on one survey line (the scene), then the day and the owner's form, whose received
   state burns the Box V, and the AI box. Every part reads still first; html.m adds the motion (page.js). */

.show-draft [data-draft] { outline: 2px dashed var(--barn); outline-offset: 3px; }
.n { font-family: var(--mono); font-size: 0.9em; letter-spacing: -0.02em; white-space: nowrap; }

/* 1 · The first screen. Phone and tablet: the words on night, the desk at sunrise between the headline and the lead.
   Laptop: the window and desk on the right, its left edge fading into the night where the words are. */
.first { position: relative; overflow: hidden; background: linear-gradient(180deg, #060a18 0%, #0a1024 34%, #121d3a 72%, #1d2a3a 100%); }
.first-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.first-copy { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; height: 100svh; min-height: 560px; max-height: 1100px; padding-top: calc(78px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 899px) { html:not(.js) .first-copy { padding-top: calc(176px + env(safe-area-inset-top, 0px)); } }
.first .eyebrow { color: var(--cream); }
.first h1 { margin-top: 12px; color: var(--white); text-shadow: 0 2px 28px rgba(6, 10, 24, 0.6); }
.first-top, .first-low { position: relative; z-index: 2; }
.first-art { position: relative; z-index: 1; min-height: 0; margin: 14px calc(-1 * var(--gut-r)) 10px calc(-1 * var(--gut)); overflow: hidden; }
.first-art picture { display: contents; }
.first-img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 62%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 46px, #000 calc(100% - 26px), transparent 100%), linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 46px, #000 calc(100% - 26px), transparent 100%), linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-composite: intersect;
}
.first-fx { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.lead { font-size: var(--fs-lead); line-height: 1.45; max-width: 36ch; color: var(--cream); }
.first .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; margin-top: 16px; }
.first .actions .btn { min-width: 132px; }
.first .coords { margin-top: 16px; }

/* 3 · Day. */
.day > .topo { -webkit-mask-image: linear-gradient(transparent 40px, #000 220px); mask-image: linear-gradient(transparent 40px, #000 220px); }

/* Short phones: the same, set tighter. */
@media (max-height: 760px) and (max-width: 899px) {
  .first-copy { padding-top: calc(70px + env(safe-area-inset-top, 0px)); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .first h1 { margin-top: 8px; }
  .lead { font-size: 16.5px; }
  .first .actions { margin-top: 10px; }
  .first .coords { margin-top: 10px; }
  .first-art { margin-top: 10px; margin-bottom: 6px; }
}

@media (min-width: 900px) {
  .first-copy { position: static; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 0.9fr) auto auto minmax(0, 1fr); min-height: 680px; padding-top: 92px; padding-bottom: 40px; }
  .first-top { grid-row: 2; max-width: min(600px, 46vw); }
  .first-low { grid-row: 3; max-width: min(600px, 46vw); margin-top: 28px; }
  .first .coords { max-width: 420px; margin-top: 26px; }
  .first-art { position: absolute; top: 0; right: var(--read-x); bottom: 0; left: auto; width: var(--hero-art); margin: 0; }
  .first-img { object-position: 60% 50%; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.55) 16%, #000 34%, #000 100%), linear-gradient(180deg, transparent 0, transparent 66px, #000 180px, #000 calc(100% - 60px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.55) 16%, #000 34%, #000 100%), linear-gradient(180deg, transparent 0, transparent 66px, #000 180px, #000 calc(100% - 60px), transparent 100%); }
  .lead { font-size: 20px; }
}