/* Validated.Directory 2.0.0 · Pricing (BEA-432; DIR 46, 55, 68, 70). Loads after /brand/tokens.css, /brand/base.css and
   /dir/shell.css; only this page's own. Night (one price held out of the township), the inclusion scene (a light runs
   down the survey line from the price into each of the seven things it includes), dawn (Scout one step up, and groups),
   day (what $29 is not, the terms, Start, the AI box), the night footer. Without motion every lot shows lit and still. */

.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; }

/* Light, as these pages hold it: a section or a lot that is lit glows from its edge in, light on the night blue. */
.first, .incl { --lit: linear-gradient(180deg, rgba(244, 196, 90, 0.27), rgba(244, 196, 90, 0.07)); --lit-edge: inset 0 0 0 1px rgba(244, 196, 90, 0.95), inset 0 0 20px rgba(244, 196, 90, 0.2), 0 0 24px rgba(244, 196, 90, 0.24); }

/* 1 · The first screen (night): the words, the township with one parcel held, the lead and where we are. */
.first { position: relative; overflow: hidden; background: radial-gradient(130% 55% at 72% 100%, rgba(43, 69, 99, 0.5), rgba(43, 69, 99, 0) 72%), linear-gradient(180deg, #060a18 0%, #0a1024 40%, #0f1a34 80%, #142038 100%); }
.first-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.first-copy { position: relative; z-index: 2; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; height: 100svh; min-height: 600px; max-height: 1100px; padding-top: calc(78px + env(safe-area-inset-top, 0px)); padding-bottom: calc(14px + 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.55); }
.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: 14px; }
.first .actions .btn { min-width: 132px; }
.first .coords { margin-top: 14px; }
.plat { position: relative; align-self: center; height: min(100% - 24px, 100vw); margin: 12px calc(-1 * var(--gut-r)) 12px calc(-1 * var(--gut)); }
.plat .twp { position: absolute; inset: 0; }
.held { position: absolute; z-index: 2; left: calc(100% / 3 + 1px); top: calc(100% / 3 + 1px); width: calc(100% / 3 - 1px); height: calc(100% / 3 - 1px); display: grid; align-content: end; padding: 9px 11px 10px; background: rgba(8, 13, 30, 0.96); border: 1px solid rgba(240, 230, 207, 0.32); }
.held::before { content: ""; position: absolute; inset: -1px; background: var(--lit); box-shadow: inset 0 0 0 1px rgba(244, 196, 90, 0.95), inset 0 0 30px rgba(244, 196, 90, 0.2), 0 0 36px rgba(244, 196, 90, 0.3); }
.pl-k { position: absolute; left: 9px; top: 8px; font: 500 9.5px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-bright); }
.pl-p { position: relative; font: 500 clamp(26px, 8vw, 50px)/1 var(--mono); letter-spacing: -0.02em; color: var(--white); }
.pl-u { position: relative; margin-top: 4px; font: 400 11px/1.2 var(--mono); color: var(--cream); }
.m .held::before { opacity: 0; }
.m .twp.run ~ .held::before { animation: hold 1s ease-out 1.6s both; }
@keyframes hold { 0% { opacity: 0; } 22% { opacity: 1; box-shadow: inset 0 0 0 1px #fff3cf, inset 0 0 30px rgba(244, 196, 90, 0.4), 0 0 50px rgba(244, 196, 90, 0.6); } 100% { opacity: 1; } }

/* 2 · The inclusion scene (night). Still first: the heading, then the seven lots on the survey line, all lit. */
.incl { position: relative; background: linear-gradient(180deg, #142038 0%, var(--canvas) 16%, var(--canvas) 84%, #111c36 100%); }
.incl .stage { padding: 64px 0 64px; }
html:not(.js) .incl .stage { background-image: linear-gradient(rgba(240, 230, 207, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(240, 230, 207, 0.06) 1px, transparent 1px); background-size: 60px 60px; }
.incl-in { position: relative; z-index: 3; }
.incl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.incl-head h2 { margin: 0; font-size: clamp(26px, 7vw, 50px); line-height: 1.08; color: var(--white); max-width: 16ch; }
.incl-head h2 .n { color: var(--gold-bright); }
.beats { display: none; }
.lots { --tl: rgba(240, 230, 207, 0.3); display: grid; gap: 12px; margin-top: 22px; padding-left: 18px; border-left: 1px solid rgba(244, 196, 90, 0.55); }
.lot { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 56px; padding: 9px 12px 9px 9px; background: rgba(11, 18, 37, 0.94); border: 1px solid rgba(244, 196, 90, 0.62); --cm: rgba(244, 196, 90, 0.9); }
.lot::before { content: ""; position: absolute; inset: -1px; z-index: 0; background: var(--lit); box-shadow: var(--lit-edge); pointer-events: none; }
.lot::after { content: ""; position: absolute; left: -24px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; background: var(--x) center / 11px no-repeat; }
.lot-n { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 30px; border: 1px solid rgba(244, 196, 90, 0.75); font: 500 12px/1 var(--mono); color: var(--gold-bright); }
.lot-t { position: relative; z-index: 1; font-size: 15px; line-height: 1.42; color: var(--cream); }
.lot-t b { font-weight: 600; color: var(--white); }
.incl-end { position: relative; margin-top: 18px; padding-left: 19px; font: 500 13px/1.5 var(--mono); color: var(--gold-bright); }

/* The scene in motion: a tall track and a sticky stage; each lot starts dark and the scroll lights it. */
.m .incl .track { height: 520vh; height: 520svh; }
.m .incl .stage { padding: 0; }
.m .incl-in { position: absolute; left: 0; right: 0; top: calc(70px + env(safe-area-inset-top, 0px)); transform-origin: 50% 0; }
.m .beats { display: flex; gap: 5px; flex: 0 0 auto; padding-bottom: 6px; }
.m .beats i { width: 14px; height: 3px; background: rgba(240, 230, 207, 0.22); transition: background-color 0.3s; }
.m .beats i.on { background: var(--gold-bright); }
.m .lots { border-left-color: transparent; }
.m .lot { border-color: var(--rule); --cm: rgba(240, 230, 207, 0.45); transition: border-color 0.4s, box-shadow 0.4s; }
.m .lot::before { opacity: 0; transition: opacity 0.4s ease-out; }
.m .lot-n { border-color: rgba(240, 230, 207, 0.4); color: var(--cream-2); transition: color 0.4s, border-color 0.4s, background-color 0.4s; }
.m .lot-t { color: var(--cream-2); transition: color 0.4s; }
.m .lot-t b { color: var(--cream); transition: color 0.4s; }
.m .lot.on { border-color: rgba(244, 196, 90, 0.62); --cm: rgba(244, 196, 90, 0.9); }
.m .lot.on::before { opacity: 1; }
.m .lot.on .lot-n { border-color: var(--gold-bright); color: #1a1406; background: var(--gold-bright); }
.m .lot.on .lot-t { color: var(--cream); }
.m .lot.on .lot-t b { color: var(--white); }
.m .incl-end { opacity: 0; }
.incl .sky { -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }

/* 3 · Dawn: one step up, and groups. Both cards cross the sunrise as one card (sunrise-wipe). */
.ways-head { background: linear-gradient(180deg, #111c36 0%, var(--night-2) 50%, var(--indigo) 100%); color: var(--cream); padding: 66px 0 28px; }
.ways-head h2 { max-width: 14ch; color: var(--white); }
.ways .dawn-art { -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.ways-card { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; }
.ways-card .face-night { inset: 0; }
.ways-card .face-day, .ways-card .face-night { display: grid; gap: 26px; align-items: start; padding: 0; background: none; color: inherit; }
.pcard { position: relative; padding: 20px 18px 22px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.3); color: var(--ink); --cmt: rgba(240, 230, 207, 0.85); --cmb: var(--ink); box-shadow: 0 34px 60px -38px rgba(35, 31, 26, 0.7); }
.pcard + .pcard { --cmt: var(--ink); }
.pc-name { font: 600 19px/1.3 var(--sans); }
.pc-price { margin-top: 8px; font: 500 15px/1.4 var(--mono); }
.pc-price b { font-weight: 500; font-size: clamp(30px, 8.6vw, 42px); line-height: 1.08; letter-spacing: -0.02em; }
.pc-say { margin-top: 12px; font: 400 clamp(25px, 6.6vw, 34px)/1.12 var(--display); }
.pc-body { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--ink); max-width: 44ch; }
.pc-act { margin-top: 20px; }
.btn-ink { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ink:hover { background: rgba(35, 31, 26, 0.06); }
.face-night .pcard { background: rgba(11, 18, 37, 0.95); color: var(--cream); border-color: var(--rule); box-shadow: none; }
.face-night .pcard + .pcard { --cmt: rgba(240, 230, 207, 0.85); }
.face-night .pc-body { color: var(--cream); }
.face-night .pc-act > span { display: inline-flex; align-items: center; min-height: 46px; padding: 12px 22px; border: 1px solid rgba(240, 230, 207, 0.72); font: 600 var(--fs-button)/1 var(--sans); font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase; }

/* 4 · Day: what $29 is not, the terms, Start; the AI box, the one piece of night left in it. */
.day > .topo { -webkit-mask-image: linear-gradient(transparent 60px, #000 240px); mask-image: linear-gradient(transparent 60px, #000 240px); }
.not { position: relative; padding-top: 64px; }
.not h2 { max-width: 14ch; }
.nots { display: grid; margin-top: 24px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.3); }
.nt { display: grid; align-content: start; gap: 4px; padding: 16px 18px 17px; border-top: 1px solid var(--rule-ink); }
.nt:first-child { border-top: 0; }
.nt dt { font: 600 18px/1.3 var(--sans); color: var(--ink); }
.nt dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.nt dd a { color: var(--ink); text-decoration-color: var(--barn); text-decoration-thickness: 2px; }
.terms { position: relative; padding-top: 52px; }
.terms h2 { font-size: clamp(28px, 7vw, 40px); }
.every { display: grid; margin-top: 16px; max-width: 560px; }
.every li { position: relative; padding: 11px 0 11px 22px; border-top: 1px solid var(--rule-ink); font: 500 15px/1.45 var(--mono); color: var(--ink); }
.every li:last-child { border-bottom: 1px solid var(--rule-ink); }
.every li::before { content: ""; position: absolute; left: 0; top: 17px; width: 9px; height: 9px; background: var(--x-ink) center / 9px no-repeat; }
.terms-more { margin-top: 12px; }
.terms-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); text-decoration-color: var(--barn); text-decoration-thickness: 2px; }
.sum-act { margin-top: 22px; }
.sum-act .btn { min-width: 150px; }
.ai-sec { position: relative; padding-top: 36px; padding-bottom: 96px; }
.ai-sec .aibox { max-width: 820px; margin: 0 auto; }
.aibox h2 { font-size: clamp(28px, 7vw, 38px); line-height: 1.1; color: var(--white); margin-top: 0; }

/* Short phones: the same, set tighter. */
@media (max-height: 760px) and (max-width: 899px) {
  .first-copy { padding-top: calc(66px + 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; }
  .plat { margin-top: 8px; margin-bottom: 6px; height: min(100% - 16px, 100vw); }
  .m .incl-in { top: calc(62px + env(safe-area-inset-top, 0px)); }
  .incl-head h2 { font-size: 24px; }
  .lots { margin-top: 14px; gap: 12px; }   /* 12px, as everywhere: the lots' corner marks never meet */
  .lot { min-height: 50px; padding-top: 7px; padding-bottom: 7px; }
  .lot-t { font-size: 14px; }
}

/* Laptop and up: the words left and the township right; the lots in two columns along their own survey line. */
@media (min-width: 700px) {
  .lead { font-size: 20px; }
  .ways-card .face-day, .ways-card .face-night { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 900px) {
  .first-copy { --tw: min(560px, 100svh - 260px, 42vw); grid-template-columns: minmax(0, 1fr) var(--tw); grid-template-rows: minmax(0, 0.9fr) auto auto minmax(0, 1fr); column-gap: clamp(32px, 4.5vw, 72px); min-height: 680px; padding-top: 92px; padding-bottom: 40px; }
  .first-top { grid-row: 2; grid-column: 1; }
  .first-low { grid-row: 3; grid-column: 1; margin-top: 26px; }
  .plat { grid-column: 2; grid-row: 1 / -1; width: var(--tw); height: var(--tw); margin: 0; }
  .plat .twp i { font-size: 10.5px; padding: 6px 7px; }
  .held { padding: 12px 14px 14px; }
  .pl-k { left: 12px; top: 11px; font-size: 10.5px; }
  .pl-u { font-size: 13px; }
  .first .coords { max-width: 420px; }
  .incl .stage { padding: 96px 0 96px; }
  .incl-in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; }
  .incl-head { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 22px; padding-top: 8px; }
  .incl-head h2 { font-size: clamp(40px, 4.2vw, 60px); }
  .lots { grid-column: 2; grid-row: 1; margin-top: 0; row-gap: 10px; padding-left: 28px; }
  .lot::after { left: -34px; }
  .lot { min-height: 66px; padding: 12px 18px 12px 12px; column-gap: 16px; }
  .lot-n { width: 40px; height: 34px; font-size: 13px; }
  .lot-t { font-size: 16.5px; }
  .incl-end { grid-column: 2; grid-row: 2; margin-top: 22px; padding-left: 29px; font-size: 14px; }
  .m .incl-in { top: max(104px, 13vh); }
  .ways-head { padding: 104px 0 40px; }
  .pcard { padding: 28px 28px 30px; }
  .not { padding-top: 84px; }
  .nots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nt { padding: 22px 26px 24px; }
  .nt:nth-child(2) { border-top: 0; }
  .nt:nth-child(2n) { border-left: 1px solid var(--rule-ink); }
  .terms { padding-top: 64px; }
  .ai-sec { padding-top: 48px; padding-bottom: 130px; }
}