/* ============================================================
   DSPV Media — Agent Branding Sessions
   Layers on site.css ("Twilight Gallery" tokens). Only the pieces
   the branding landing page adds: scarcity bar, JSON-driven offer
   card in the hero, the honest-trade grid, lead form, cohort strip,
   and FAQ. Reuses .section .ink .eyebrow .lead .btn .acard from site.css.
   ============================================================ */

/* ---- scarcity bar (always on for this page) ---- */
.bx-bar{display:block}
.bx-bar .wrap{gap:.9rem}
.bx-bar .bx-area{opacity:.85}
.bx-bar .bx-spots{font-weight:700}

/* ---- hero: no photo yet — honest moody ink field ---- */
.bx-hero{min-height:clamp(600px,90vh,880px)}
.bx-hero::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 12%,var(--amber-glow),transparent 55%),
    radial-gradient(90% 70% at 12% 100%,rgba(30,38,50,.9),transparent 60%),
    linear-gradient(180deg,#0C1119 0%,var(--ink) 55%,#0B0F16 100%)}
.bx-hero .hero-inner{max-width:640px}

/* ---- the offer card (A/B variant zone) ---- */
.bx-offer{position:relative;margin:1.8rem 0 1.8rem;
  background:rgba(22,28,39,.72);backdrop-filter:blur(10px);
  border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:clamp(1.3rem,3vw,1.9rem);overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
/* corner-bracket motif — the "this is the offer" signal, echoing site.css offer-card */
.bx-offer::after{content:"";position:absolute;inset:10px;pointer-events:none;opacity:.55;
  background:
    linear-gradient(var(--amber),var(--amber)) top left/18px 2px,
    linear-gradient(var(--amber),var(--amber)) top left/2px 18px,
    linear-gradient(var(--amber),var(--amber)) bottom right/18px 2px,
    linear-gradient(var(--amber),var(--amber)) bottom right/2px 18px;
  background-repeat:no-repeat}
.bx-offer-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;position:relative}
.bx-offer .bx-eyebrow{margin:0}
.bx-price{text-align:right;font-family:var(--display);line-height:1.05}
.bx-reg{display:block;font-family:var(--mono);color:var(--fog);
  text-decoration:line-through;font-size:var(--step-0);letter-spacing:.02em;margin-bottom:.15rem}
.bx-amt{display:block;font-size:clamp(2.2rem,1.6rem + 2.4vw,3rem);font-weight:800;
  color:var(--amber);letter-spacing:-.02em}
.bx-sub{display:block;font-family:var(--mono);color:var(--paper);opacity:.85;
  font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;margin-top:.2rem}
.bx-headline{font-family:var(--display);font-weight:800;font-stretch:110%;
  color:#fff;font-size:var(--step-1);letter-spacing:-.01em;margin:1rem 0 .5rem;position:relative}
.bx-line{color:var(--paper);margin:0 0 .7rem;position:relative;max-width:52ch}
.bx-fineprint{color:var(--fog);font-size:var(--step--1);line-height:1.5;margin:0;
  position:relative;max-width:56ch}

/* ---- the honest trade ---- */
.bx-trade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.bx-tcard{background:var(--paper-2);border:1px solid var(--line-light);
  border-radius:var(--radius);padding:1.7rem 1.5rem;position:relative}
.bx-tnum{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber-deep);border:1px solid var(--line-light);border-radius:2px;
  padding:.3rem .6rem;display:inline-block;margin-bottom:.9rem}
.bx-tcard h3{font-size:var(--step-1);margin-bottom:.4rem;letter-spacing:-.01em}
.bx-tcard p{margin:0;color:var(--fog-d);font-size:var(--step--1);line-height:1.5}

/* ---- why: founding-cohort strip (honest empty-state, not stock) ---- */
.bx-why .wrap{grid-template-columns:1fr 1.1fr}
.bx-cohort{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.bx-cohort-cell{aspect-ratio:3/4;border:1px dashed var(--line-dark);border-radius:var(--radius);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
  text-align:center;background:rgba(246,244,239,.03)}
.bx-cohort-cell span{font-family:var(--display);font-weight:700;font-stretch:110%;
  color:var(--paper);font-size:var(--step-0)}
.bx-cohort-cell small{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--fog)}
.bx-cohort-open{border-style:solid;border-color:var(--amber);
  background:radial-gradient(120% 100% at 50% 0,var(--amber-glow),transparent 70%)}
.bx-cohort-open span{color:var(--amber)}

/* ---- lead capture form ---- */
.bx-claim .lead{margin-bottom:2rem}
.bx-form{max-width:520px}
.bx-field{margin-bottom:1rem}
.bx-field label{display:block;font-family:var(--mono);font-size:var(--step--1);
  letter-spacing:.1em;text-transform:uppercase;color:var(--fog-d);margin-bottom:.4rem}
.bx-field input{width:100%;font:inherit;color:var(--charcoal);background:var(--paper);
  border:1px solid var(--line-light);border-radius:var(--radius);padding:.8em 1em;
  transition:border-color .18s,box-shadow .18s}
.bx-field input:focus{outline:none;border-color:var(--amber-deep);
  box-shadow:0 0 0 3px var(--amber-glow)}
.bx-field input:user-invalid{border-color:#c0492e}
.bx-consent{display:flex;gap:.7rem;align-items:flex-start;margin:.4rem 0 1.4rem;
  font-size:var(--step--1);color:var(--fog-d);line-height:1.5;max-width:520px;cursor:pointer}
.bx-consent input{margin-top:.2rem;flex:none;width:18px;height:18px;accent-color:var(--amber-deep)}
.bx-submit{width:100%;justify-content:center;font-size:var(--step-0)}
.bx-submit[disabled]{opacity:.6;cursor:progress}
.bx-microcopy{font-family:var(--mono);font-size:var(--step--1);color:var(--fog-d);
  letter-spacing:.03em;margin:.9rem 0 0;text-align:center}
.bx-formmsg{margin:.8rem 0 0;font-size:var(--step--1);text-align:center;min-height:1.2em}
.bx-formmsg.err{color:#c0492e}
.bx-thanks{max-width:520px}
.bx-thanks h2{font-size:var(--step-3);margin-bottom:.6rem}

/* ---- FAQ ---- */
.bx-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 2rem;margin-top:2rem}
.bx-faq details{border-bottom:1px solid var(--line-light);padding:.4rem 0}
.bx-faq summary{font-family:var(--display);font-weight:700;font-stretch:110%;
  font-size:var(--step-0);letter-spacing:-.01em;padding:.7rem 0;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.bx-faq summary::-webkit-details-marker{display:none}
.bx-faq summary::after{content:"+";color:var(--amber-deep);font-family:var(--mono);
  font-weight:400;font-size:1.3rem;transition:transform .2s}
.bx-faq details[open] summary::after{transform:rotate(45deg)}
.bx-faq details p{margin:0 0 .9rem;color:var(--fog-d);font-size:var(--step-0);
  line-height:1.55;max-width:56ch}

@media(max-width:900px){
  .bx-trade-grid{grid-template-columns:1fr}
  .bx-why .wrap{grid-template-columns:1fr}
  .bx-faq-grid{grid-template-columns:1fr}
}