/* ==========================================================================
   NetAcre — site.css (below-the-fold components)
   Tokens, base type, header, hero, focus and reduced-motion live in the inline
   critical CSS in base.html. Contrast ledger is recorded there.
   ========================================================================== */

/* --- generic section rhythm --- */
.section{padding:clamp(3.5rem,7vw,6rem) 0}
/* On the sand-100 panel, ink-500 muted text is only 4.36:1 — swap muted to the
   darker panel token (>=4.5:1) for everything scoped inside a panel. */
.section--panel{background:var(--bg-panel); border-block:1px solid var(--border);
  --text-muted:var(--text-muted-panel)}
.section__head{max-width:52ch}
.section__lead{font-size:var(--fs-400); color:var(--text-soft); max-width:60ch}

/* a survey-corner rule: hairline + filled marker (encodes a section boundary) */
.rule{display:flex; align-items:center; gap:.75rem; margin:0 0 var(--sp-lg)}
.rule::before{content:""; width:9px; height:9px; background:var(--accent);
  transform:rotate(45deg); flex:0 0 auto}
.rule::after{content:""; height:1px; background:var(--border-strong); flex:1 1 auto}

/* ---------------------------------------------------------------- what it is */
.intro__questions{display:grid; gap:var(--sp-md); margin-top:var(--sp-lg);
  grid-template-columns:1fr 1fr}
.qcard{background:var(--bg); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--sp-md) var(--sp-lg)}
.section--panel .qcard{background:var(--sand-50)}
.qcard__tier{font-size:var(--fs-100); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin:0 0 var(--sp-xs)}
.qcard__tier--plus{color:var(--sage)}
.qcard__q{font-family:var(--font-display); font-size:var(--fs-500); line-height:1.18;
  color:var(--text); margin:0}
.qcard__price{display:block; font-family:var(--font-body); font-size:var(--fs-200);
  font-weight:600; color:var(--text-muted); margin-top:var(--sp-xs)}

/* --- three "coming" value cards --- */
.cards{display:grid; gap:var(--sp-md); margin-top:var(--sp-xl);
  grid-template-columns:repeat(3,1fr)}
.card{position:relative; display:flex; flex-direction:column;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--sp-lg); box-shadow:var(--shadow-sm)}
.section--panel .card{background:var(--sand-50)}
.card__icon{width:44px; height:44px; margin-bottom:var(--sp-md); color:var(--accent)}
.card__tier{position:absolute; top:var(--sp-md); right:var(--sp-md);
  font-size:var(--fs-100); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sage); border:1px solid var(--sage-400); border-radius:var(--r-pill);
  padding:.15rem .6rem}
.card h3{font-size:var(--fs-400); margin-bottom:var(--sp-xs)}
.card p{color:var(--text-soft); margin:0; max-width:34ch}

/* ------------------------------------------------------------- trust pledge */
.trust{background:var(--ink-900); color:var(--cream-hero); position:relative; overflow:hidden}
.trust__grain{position:absolute; inset:0; opacity:.06; background-image:var(--grain);
  background-size:180px 180px; pointer-events:none}
.trust__inner{position:relative; max-width:40rem; text-align:center; margin-inline:auto}
.trust .eyebrow{color:var(--amber); justify-content:center}
.trust .eyebrow::before{background:var(--amber)}
.trust__pledge{font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.75rem,1.1rem + 2.6vw,2.75rem); line-height:1.18;
  color:var(--cream-hero); margin:0 auto var(--sp-md); max-width:20ch}
.trust__pledge em{color:var(--amber); font-style:normal}
.trust__support{color:var(--cream-hero); opacity:.85; font-size:var(--fs-400);
  max-width:46ch; margin-inline:auto}

/* --------------------------------------------------------------- texas-first */
.texas{display:flex; align-items:center; gap:var(--sp-lg); flex-wrap:wrap;
  justify-content:space-between}
.texas__copy{max-width:40ch}
.texas h2{font-size:var(--fs-600)}
.texas p{color:var(--text-soft); margin:0}
.texas__map{flex:0 0 auto; width:132px; height:132px; color:var(--sage-400)}
.texas__seq{display:inline-flex; gap:.5rem; margin-top:var(--sp-md); flex-wrap:wrap}
.texas__chip{font-size:var(--fs-200); font-weight:600; padding:.3rem .85rem;
  border-radius:var(--r-pill); border:1px solid var(--border-strong); color:var(--text-muted)}
.texas__chip--now{background:var(--accent); color:var(--cream); border-color:var(--accent)}

/* ------------------------------------------------------------------ waitlist */
.waitlist{background:var(--bg-panel); border-block:1px solid var(--border)}
.waitlist__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:start}
.waitlist__intro h2{font-size:var(--fs-700)}
.waitlist__intro p{color:var(--text-soft); max-width:40ch}
.waitlist__assurances{list-style:none; padding:0; margin:var(--sp-md) 0 0}
.waitlist__assurances li{position:relative; padding-left:1.9rem; margin-bottom:var(--sp-xs);
  color:var(--text-soft)}
.waitlist__assurances li::before{content:""; position:absolute; left:0; top:.35em;
  width:18px; height:18px; background:var(--accent);
  -webkit-mask:var(--check) center/contain no-repeat; mask:var(--check) center/contain no-repeat}
:root{--check:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")}

.form{background:var(--bg); border:1px solid var(--border-strong); border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.25rem); box-shadow:var(--shadow-sm)}
.field{margin-bottom:var(--sp-md)}
.field label{display:block; font-size:var(--fs-200); font-weight:700; color:var(--text);
  margin-bottom:.4rem}
.field .opt{font-weight:400; color:var(--text-muted)}
.field input[type=email],.field input[type=text]{width:100%; min-height:52px;
  padding:.75rem 1rem; font:inherit; color:var(--text); background:var(--sand-50);
  border:1px solid var(--border-strong); border-radius:var(--r-md); transition:border-color .15s ease, box-shadow .15s ease}
.field input:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(168,70,31,.18)}
.field input::placeholder{color:var(--text-muted); opacity:.75}
/* Invalid field: red border + inline warning glyph (not colour alone). */
.field input[aria-invalid="true"]{border-color:var(--clay-700); border-width:2px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F3A18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 8v5'/><path d='M12 16.4h.01'/></svg>");
  background-repeat:no-repeat; background-position:right .85rem center;
  background-size:20px 20px; padding-right:2.75rem}
.field input[aria-invalid="true"]:focus{border-color:var(--clay-700);
  box-shadow:0 0 0 3px rgba(143,58,24,.22)}

/* Larger, comfortable hit area around the consent control. */
.consent{display:flex; align-items:flex-start; gap:.7rem;
  margin:0 0 var(--sp-md) -.5rem; padding:.5rem; border-radius:var(--r-md)}
.consent input[type=checkbox]{flex:0 0 auto; width:24px; height:24px; margin-top:.1rem;
  accent-color:var(--accent); cursor:pointer}
.consent label{font-size:var(--fs-200); color:var(--text-soft); line-height:1.5; cursor:pointer}
.form .btn{width:100%}
.form__micro{font-size:var(--fs-200); color:var(--text-muted); margin:var(--sp-md) 0 0}

.honeypot{position:absolute!important; left:-9999px; width:1px; height:1px;
  overflow:hidden; opacity:0}

/* live status region (JS enhancement) */
.form__status{margin-top:var(--sp-md); font-size:var(--fs-300); font-weight:600;
  min-height:1.4em}
.form__status--ok{color:var(--sage)}
.form__status--err{color:var(--clay-700)}
.form.is-done .form__body{display:none}
.form__done{display:none}
.form.is-done .form__done{display:block; text-align:center; padding:var(--sp-md) 0}
.form__done h3{color:var(--sage); font-size:var(--fs-500)}

/* no-JS / native redirect thank-you banner */
.banner{background:var(--sage); color:var(--cream-hero)}
.banner--err{background:var(--clay-700)}
.banner__inner{display:flex; gap:.75rem; align-items:center; padding:var(--sp-sm) 0;
  font-weight:600}
.banner a{color:var(--cream-hero); text-decoration:underline}

/* ----------------------------------------------------------------- footer */
.site-footer{background:var(--ink-900); color:var(--cream-hero); padding:var(--sp-xl) 0 var(--sp-lg)}
.site-footer__inner{display:grid; gap:var(--sp-md); grid-template-columns:1fr auto;
  align-items:start}
.wordmark--footer{color:var(--cream-hero); font-size:var(--fs-500)}
.wordmark--footer sup{font-family:var(--font-body); font-size:.5em; top:-.7em}
.site-footer__line{color:var(--cream-hero); opacity:.7; margin:.4rem 0 0; font-size:var(--fs-200)}
.site-footer__links{display:flex; gap:var(--sp-md); align-items:center}
.site-footer__links a{color:var(--cream-hero); text-decoration:none; font-weight:600; font-size:var(--fs-200)}
.site-footer__links a:hover{color:var(--amber); text-decoration:underline}
.site-footer__copy{grid-column:1/-1; color:var(--cream-hero); opacity:.55;
  font-size:var(--fs-200); margin:var(--sp-md) 0 0; border-top:1px solid rgba(247,241,231,.14);
  padding-top:var(--sp-md)}
.site-footer :focus-visible{outline-color:var(--amber)}

/* ------------------------------------------------------------ prose (privacy) */
.prose{max-width:66ch; padding:clamp(3rem,6vw,5rem) 0}
.prose h1{font-size:var(--fs-700); margin-bottom:var(--sp-xs)}
.prose__meta{color:var(--text-muted); font-size:var(--fs-200); margin-bottom:var(--sp-lg)}
.prose h2{font-size:var(--fs-500); margin:var(--sp-lg) 0 var(--sp-xs)}
.prose p,.prose li{color:var(--text-soft)}
.prose ul{padding-left:1.25rem}
.prose li{margin-bottom:var(--sp-xs)}
.prose__callout{background:var(--bg-panel); border-left:3px solid var(--accent);
  border-radius:var(--r-md); padding:var(--sp-md) var(--sp-md); margin:var(--sp-md) 0}
.prose__callout p{margin:0; color:var(--text)}

/* ---------------------------------------------------------------- 404 */
.notfound{min-height:60vh; display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; padding:var(--sp-2xl) 0}
.notfound h1{font-size:var(--fs-800)}
.notfound p{color:var(--text-soft)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:900px){
  .cards{grid-template-columns:1fr; gap:var(--sp-md)}
  .waitlist__grid{grid-template-columns:1fr}
  .intro__questions{grid-template-columns:1fr}
}
@media (max-width:560px){
  .site-header__inner{min-height:60px}
  .nav__email{display:none}
  .nav .btn{min-height:48px}
  .site-footer__inner{grid-template-columns:1fr}
  .site-footer__links{flex-wrap:wrap}
  .texas__map{width:96px; height:96px}
}