/* ═══════════════════════════════════════════════════════════════════════════════════════════
   th-preorder.css — /property-agent-preorder only.

   Void / mint / paper. Satoshi 900 headings, Switzer body, Cabinet numerals. Double bezel
   (.shell > .core), hairline gaps as separators, the oversized ghost index numeral, the mint
   rule that grows along the foot on hover. No gold, no blue, no rounded icon tiles, no drop
   shadows on text.

   🚨 THE FONT FAMILIES ARE 'Satoshi' / 'Switzer' / 'Cabinet' — LITERAL NAMES, NOT VARIABLES.
   The first version of this file wrote `var(--f-display)`, `var(--f-ui)` and `var(--f-num)`.
   NONE OF THOSE CUSTOM PROPERTIES EXIST in th.css: it declares the @font-face families by name
   and uses them by name. Every one of them therefore fell through to its `inherit` fallback, so
   the plan names were not Satoshi 900 and the prices were not Cabinet — the cards carried none
   of the brand's typography while looking, in the source, exactly as if they did. A var() with a
   fallback fails SILENTLY and reads as deliberate. Check the property exists before trusting it.

   ⚠ EVERY COLOUR TOKEN IS INHERITED FROM th.css. Nothing here re-declares a brand colour — a
   second copy of `--mint` is how one page drifts a shade and nobody can say which is right.

   ⚠ ONLY TWO BLOCKS ARE STYLED HERE: the plan picker and the reserve form. Everything else on
   the page is a th_shell scene (hero, offer, ribbon, numeral, spec rows, mint field, FAQ) and is
   styled by th.css, which is the point — those scenes cannot drift from the rest of the site
   because there is only one copy of them.

   ⚠ NOT `th-prop.css` AND NOT `th-prop-pages.css`. Both names are taken (the property WIZARD
   stylesheet and the property HUB stylesheet); writing this under either would have truncated a
   live file, which has happened on this estate once already. Checked before creating.

   ⚠ THIS SHEET LOADS AFTER th.css AND IS UNLAYERED, so every rule here beats a `@layer th-scene`
   rule in th.css regardless of specificity. That is deliberate for `.pre-tier > .shell`, and it
   is the reason nothing here uses a bare element or shell-owned selector.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ══ section hooks ══════════════════════════════════════════════════════════════════════════
   Both sections need real rules, not just a name: the picker sits directly under a PAPER band
   and the form directly under the picker, so the void has to be reasserted and the vertical
   rhythm tightened — `.sec`'s default padding twice in a row reads as a gap, not a change of
   scene. */
.s-pre-plans { padding-bottom: clamp(72px, 9vh, 120px); }
.s-pre-form { padding-top: clamp(64px, 8vh, 108px); }

/* ══ THE PLAN PICKER ═══════════════════════════════════════════════════════════════════════
   A hairline grid: the SEPARATOR IS THE GAP, never a border. Same construction as `.cards`. */
.pre-tiers {
  display: grid; gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--line); border: 1px solid var(--line); border-radius: 2px;
}
@media (max-width: 1000px) { .pre-tiers { grid-template-columns: 1fr; } }

.pre-tier {
  position: relative; overflow: hidden; display: block; width: 100%; text-align: left;
  cursor: pointer; background: var(--void); border: 0; margin: 0;
  padding: clamp(1.7rem, 2.4vw, 2.2rem) clamp(1.4rem, 2vw, 1.9rem) clamp(2rem, 2.8vw, 2.5rem);
  color: inherit; font: inherit; -webkit-appearance: none; appearance: none;
  transition: background .5s var(--e-soft);
}
.pre-tier:hover { background: var(--ink); }
/* The recommended plan must READ as recommended before anything is clicked, or the only card
   with a badge looks identical to the two without one until you touch it. A hairline mint inset
   rather than a border: the grid's separators are its gaps, and a bordered cell in a hairline
   grid reads as a mistake. */
.pre-tier--best { box-shadow: inset 0 0 0 1px rgba(79, 216, 166, .3); }
.pre-tier--best:hover { box-shadow: inset 0 0 0 1px rgba(79, 216, 166, .48); }
/* ⚠ THE SELECTED STATE IS ON aria-pressed, NOT ON A CLASS. The button already has to carry the
   state for a screen reader; styling the same attribute means the two can never disagree. */
.pre-tier[aria-pressed="true"] { background: var(--ink-3); }
.pre-tier:focus-visible { outline: 2px solid var(--mint); outline-offset: -4px; }

/* the double bezel is a RING inside the cell rather than a card of its own — the cell is
   already separated from its neighbours by the hairline gap, and a second border around each
   one would be the flat-card-with-a-border look the brand explicitly rejects */
.pre-tier > .shell {
  display: block; padding: 0; background: none; border: 0;
  border-radius: calc(var(--rad) - 6px);
}
.pre-tier > .shell > .core {
  display: block; padding: 0; background: none; box-shadow: none; overflow: visible;
  border-radius: 0;
}

/* the oversized ghost index — the AE "feature plate" cue, and what replaces an icon tile */
.pre-tier__ix {
  position: absolute; right: .45rem; top: -.35rem;
  font-family: 'Cabinet', ui-sans-serif, sans-serif; font-weight: 900;
  font-size: clamp(3.6rem, 5.4vw, 5.6rem); letter-spacing: -.07em; line-height: 1;
  pointer-events: none; color: rgba(255, 255, 255, .05);
  transition: color .7s var(--e-soft), transform .8s var(--e-soft);
}
.pre-tier:hover .pre-tier__ix,
.pre-tier[aria-pressed="true"] .pre-tier__ix {
  color: rgba(52, 245, 173, .16); transform: translateY(-5px);
}
.pre-tier__g { display: block; width: 22px; height: 22px; color: var(--mint); }
.pre-tier__g svg { width: 100%; height: 100%; }

.pre-tier__tag {
  display: inline-block; margin: 1.1rem 0 -.2rem;
  font-family: 'Switzer', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-mint); background: var(--mint);
  padding: .4rem .68rem; border-radius: 999px;
}
.pre-tier__n {
  display: block; margin-top: 1.1rem; position: relative;
  font-family: 'Satoshi', ui-sans-serif, system-ui, sans-serif; font-weight: 900;
  font-size: clamp(1.22rem, 1.9vw, 1.5rem); letter-spacing: -.045em; line-height: 1;
}
.pre-tier__today { display: block; margin-top: 1.1rem; }
.pre-tier__today b {
  display: block;
  font-family: 'Cabinet', ui-sans-serif, sans-serif; font-weight: 900;
  font-size: clamp(2.2rem, 4.2vw, 3.1rem); letter-spacing: -.055em; line-height: .9; color: #fff;
}
.pre-tier__today i {
  display: block; margin-top: .35rem; font-style: normal;
  font-size: .8rem; font-weight: 500; letter-spacing: .01em; color: rgba(255, 255, 255, .46);
}
.pre-tier__then {
  display: block; margin-top: .8rem; padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-size: .85rem; font-weight: 600; line-height: 1.45; color: var(--mint);
}
.pre-tier__blurb {
  display: block; margin-top: .95rem; font-size: .9rem; line-height: 1.55;
  color: rgba(255, 255, 255, .48); max-width: 34ch;
}
.pre-tier__meta {
  display: block; margin-top: .9rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
}
.pre-tier__f { display: block; margin-top: 1.1rem; }
.pre-tier__f span {
  display: block; position: relative; padding-left: 1.15rem; margin-top: .48rem;
  font-size: .85rem; line-height: 1.5; color: rgba(255, 255, 255, .58);
}
.pre-tier__f span::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--mint);
}
/* the tap affordance swaps its own words on select, so the chosen card SAYS it is chosen
   rather than only looking half a shade different */
.pre-tier__pick {
  display: block; margin-top: 1.4rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .34); transition: color .45s var(--e-soft);
}
.pre-tier__pick em { display: none; font-style: normal; }
.pre-tier:hover .pre-tier__pick { color: rgba(255, 255, 255, .62); }
.pre-tier[aria-pressed="true"] .pre-tier__pick { color: var(--mint); }
.pre-tier[aria-pressed="true"] .pre-tier__pick i { display: none; }
.pre-tier[aria-pressed="true"] .pre-tier__pick em { display: inline; }

/* a mint rule grows along the foot — the only movement in the grid, exactly as `.card::after` */
.pre-tier::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--glow), var(--mint-lo));
  transition: width .75s var(--e-soft);
}
.pre-tier:hover::after { width: 100%; }
.pre-tier[aria-pressed="true"]::after { width: 100%; }

.pre-note {
  margin: clamp(1.4rem, 2.6vw, 2rem) 0 0;
  font-size: .86rem; line-height: 1.6; color: rgba(255, 255, 255, .38); max-width: 78ch;
}

/* ══ THE RESERVE FORM ══════════════════════════════════════════════════════════════════════ */
.pre-lay {
  display: grid; gap: clamp(18px, 2.4vw, 30px);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
}
/* 🚨 ON A PHONE THE RAIL GOES FIRST, AND THIS IS NOT A LAYOUT PREFERENCE.
   Stacked in source order the summary rail — the amount, the launch date and the words "not
   refundable" — landed BELOW the "Hold my spot" button, so the one screen where a customer
   commits money showed them the button before the price. Source order is right on a wide screen
   (the rail is a sticky aside beside the fields) and wrong the moment it stacks. */
@media (max-width: 980px) {
  .pre-lay { grid-template-columns: 1fr; }
  .pre-lay .pre-sum { order: 1; }
  .pre-lay .pre-form { order: 2; }
}

.pre-form > .shell { display: block; }
.pre-form > .shell > .core { display: block; padding: clamp(1.5rem, 3vw, 2.5rem); }

.pre-grid { display: grid; gap: 1.05rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .pre-grid { grid-template-columns: 1fr; } }
.pre-f { display: block; }
.pre-f--wide { display: block; margin-top: 1.05rem; }
.pre-l {
  display: block; margin-bottom: .5rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
}
.pre-i {
  width: 100%; box-sizing: border-box; padding: .92rem 1.05rem;
  background: var(--void); color: #fff;
  border: 1px solid var(--line-2); border-radius: 14px;
  font-family: 'Switzer', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem; font-weight: 400; line-height: 1.3;
  transition: border-color .3s var(--e-soft), background .3s var(--e-soft);
}
.pre-i::placeholder { color: rgba(255, 255, 255, .28); }
.pre-i:hover { border-color: rgba(255, 255, 255, .24); }
.pre-i:focus { outline: none; border-color: var(--mint); background: var(--ink); }
.pre-i--area { resize: vertical; min-height: 92px; }
/* ⚠ THE HONEYPOT IS HIDDEN IN CSS, NOT WITH AN INLINE STYLE — the CSP forbids inline styles the
   same way it forbids inline script, and a field that fails to hide is a field a real person
   fills in. */
.pre-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pre-go {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  margin-top: clamp(1.5rem, 2.6vw, 2.1rem);
}
.pre-go .btn[disabled] { opacity: .5; pointer-events: none; }
.pre-go__sec {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; line-height: 1.4; color: rgba(255, 255, 255, .38); max-width: 30ch;
}
.pre-go__sec svg { width: 15px; height: 15px; flex: none; color: var(--mint); }

.pre-msg {
  margin: 1rem 0 0; min-height: 1.35em;
  font-size: .9rem; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, .58);
}
/* the danger tone is the estate's `#ff9b9b`, not an invented salmon — the admin bake's closed
   palette gate rejects anything else and the two surfaces should not disagree */
.pre-msg[data-state="err"] { color: #ff9b9b; }
.pre-msg[data-state="ok"] { color: var(--mint); }

/* ══ THE SUMMARY RAIL ══════════════════════════════════════════════════════════════════════
   The running answer to "what is about to come off my card". Sticky on a wide screen so the
   figure stays beside the fields as they are filled; static under 980px, where sticky inside a
   single column just pins it over the form. */
.pre-sum { position: sticky; top: clamp(84px, 11vh, 120px); }
@media (max-width: 980px) { .pre-sum { position: static; } }
.pre-sum > .shell { display: block; }
.pre-sum > .shell > .core {
  display: block; padding: clamp(1.4rem, 2.4vw, 1.9rem);
  background: linear-gradient(165deg, #0C1512, #050706 62%);
}
.pre-sum__plan {
  font-family: 'Satoshi', ui-sans-serif, system-ui, sans-serif; font-weight: 900;
  font-size: clamp(1.3rem, 2.1vw, 1.7rem); letter-spacing: -.045em; line-height: 1;
}
.pre-sum__rows {
  display: grid; gap: 1px; margin-top: 1.3rem;
  background: var(--line); border: 1px solid var(--line); border-radius: 2px;
}
.pre-sum__r {
  display: flex; align-items: baseline; justify-content: space-between; gap: .9rem;
  background: var(--void); padding: .85rem .95rem;
}
.pre-sum__r span { font-size: .82rem; line-height: 1.35; color: rgba(255, 255, 255, .46); }
.pre-sum__r b {
  font-family: 'Cabinet', ui-sans-serif, sans-serif; font-weight: 900;
  font-size: 1.18rem; letter-spacing: -.04em; white-space: nowrap; color: #fff;
}
.pre-sum__r--now { background: rgba(79, 216, 166, .09); }
.pre-sum__r--now span { color: rgba(255, 255, 255, .72); }
.pre-sum__r--now b { color: var(--mint); font-size: 1.5rem; }
.pre-sum__cred {
  margin-top: .95rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
}
.pre-sum__note {
  margin: 1.1rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: .8rem; line-height: 1.62; color: rgba(255, 255, 255, .4);
}
.pre-sum__note b { color: rgba(255, 255, 255, .78); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .pre-tier, .pre-tier::after, .pre-tier__ix, .pre-i { transition: none; }
}