/* ==========================================================================
   S-14 THE FORM, Financial X-Ray rebuild (2026-09-13, second pass)
   The production form card (formcard.py), its lp.css treatment lifted and
   re-keyed. Now on NAVY (the page ends blue, Quinten): a white card, labels
   left with a colon, the fields on a two-column grid sized to what they
   hold (name and email wide, phone and occupation narrower), the brand line
   with the tree mark either side, the consents tightened, the gold submit.
   Every required control keeps a reserved slot for its red message. Behind
   the card: ONE finance graphic, a rising market line in gold, and the tree
   mark pulsing gold. Required = gold asterisk on the fields and on the two
   required consents only.
   ========================================================================== */
.lp-form {
  position: relative; z-index: 0; overflow: clip; isolation: isolate;
  background: var(--lp-navy); color: var(--c-white);
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  padding-inline: clamp(21px, 2vw + 7px, 42px);
  margin-block: 0; border-top: 0;
  font-family: var(--font-body);
  text-align: center;
}
.lp-form div { border-top: 0; margin-block: 0; padding-top: 0; }
.lp-form p, .lp-form h2, .lp-form form { margin-block: 0; }
.lp-form__inner { position: relative; z-index: 2; max-width: 640px; margin-inline: auto; }
.lp-form__h {
  font-family: var(--font-display); font-weight: 600;
  /* the section-lead size (review.css / reviews.css leads), capped by the
     measure so the title is two lines on every phone and never leaves one
     word mid-title (Quinten 2026-09-14: as big as the other section titles;
     the 20px / 24px phone steps in titlecase.css are gone). The cap is the
     phone box (100vw minus 21px each side) over the width of "Request Your
     Complimentary" per px of font, measured 13.9-14.05 in both engines,
     14.4 for slack: 24.2px at 390, 26.9px at 430, the clamp from ~470 up. */
  font-size: min(clamp(1.625rem, 1.2rem + 1.8vw, 2.625rem), calc((100vw - 42px) / 14.4));
  line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance;
  color: var(--c-white); margin-inline: auto; max-width: 26ch;
}
.lp-form .lp-form__sub {   /* .lp-form p zeroes margins; this wins on specificity */
  margin-top: 9px; margin-inline: auto;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.55;
  color: color-mix(in srgb, var(--c-white) 78%, var(--lp-gold)); text-wrap: balance; max-width: 40ch;
}
.lp-form .lp-form__cardwrap { margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); }   /* .lp-form div zeroes margins; this wins */

/* ---- behind the card: the arrowed market line, full width -----------------
   chart.js lays it at 1:1 in this box (inset 0 = the section), in the band
   under the card through the middle, climbing the right flank to the arrow.
   It draws over 4.2s once the section arrives (.is-drawn), the arrowhead
   riding the tip on the same path, then the gold fills in beneath. */
.lp-form { padding-bottom: clamp(11rem, 8rem + 8vw, 15rem); }   /* the band under the card the line runs through */
.lp-form__chart { position: absolute; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; max-width: none; }
.lp-form__a0 { stop-color: var(--lp-gold-light); stop-opacity: 0.74; }
.lp-form__a1 { stop-color: var(--lp-gold); stop-opacity: 0.06; }
.lp-form__area { fill: url(#lp-form-area); opacity: 0; transition: opacity 1.4s ease-out 6.3s; }
.lp-form__line {
  fill: none; stroke: var(--lp-gold-light); stroke-width: 3; stroke-opacity: 1;
  stroke-linejoin: round; stroke-linecap: round;
  transition: stroke-dashoffset 6.3s ease-in-out 0.3s;   /* slow enough to watch every rise and fall */
}
.lp-form__apex {
  fill: none; stroke: var(--lp-gold-light); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round;
  offset-rotate: auto; opacity: 0;
  transition: offset-distance 6.3s ease-in-out 0.3s, opacity 0.3s ease-out 0.3s;
}
.lp-form.is-drawn .lp-form__apex { opacity: 1; }
/* the second line: in from the top, middle-ish, down and to the left, off
   the left edge. It waits until the first has left the right edge (0.3s +
   6.3s) and a couple of seconds more, then runs 4.2s */
.lp-form__line2 {
  fill: none; stroke: var(--lp-gold-light); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round;
  transition: stroke-dashoffset 4.2s ease-in-out 9s;
}
.lp-form__apex2 {
  fill: none; stroke: var(--lp-gold-light); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round;
  offset-rotate: auto; opacity: 0;
  transition: offset-distance 4.2s ease-in-out 9s, opacity 0.3s ease-out 9s;
}
.lp-form.is-drawn .lp-form__apex2 { opacity: 1; }
.lp-form.is-drawn .lp-form__area { opacity: 1; }

/* ---- the card ------------------------------------------------------------- */
.lp-form .lp-card {
  background: var(--c-white);
  border: 1px solid color-mix(in srgb, var(--lp-gold) 40%, transparent); border-top: 3px solid var(--lp-gold);
  border-radius: 14px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lp-gold) 18%, transparent), 0 21px 63px color-mix(in srgb, var(--arbor-navy-deep) 70%, transparent), 0 0 42px color-mix(in srgb, var(--lp-gold) 14%, transparent);
  padding: clamp(1.25rem, 0.85rem + 1.7vw, 2rem);
  text-align: left; color: var(--arbor-text);
}
/* the fields: two columns sized to what they hold (3fr : 2fr), one column under 640 */
.lp-form .lp-card__fields { display: grid; grid-template-columns: 3fr 2fr; column-gap: 14px; row-gap: 4px; align-items: start; }
.lp-form .lp-field { display: flex; flex-direction: column; align-items: stretch; gap: 5px; margin-bottom: 0; min-width: 0; }
.lp-form .lp-field label {
  display: inline-flex; align-items: baseline;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--arbor-text-light); text-align: left;
}
/* the colon comes from the stylesheet, so the label word stays exactly what the copy gate allows */
.lp-form .lp-field label::after { content: ":"; order: 1; }
.lp-form .lp-field label .lp-req { order: 2; }
.lp-req { color: var(--lp-gold-dark); margin-left: 3px; }
.lp-form .lp-field input {
  min-height: 49px; padding: 11px 14px; width: 100%; box-sizing: border-box;
  font-family: var(--font-body); font-size: 1rem; color: var(--arbor-text); text-align: left;
  background: var(--paper); border: 1px solid color-mix(in srgb, var(--lp-navy) 14%, transparent); border-radius: 10px;
  scroll-margin-block: clamp(84px, 10vh, 96px) clamp(120px, 20vh, 140px);   /* clears a fixed bar and the phone keyboard */
  transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out, background-color 0.3s ease-out;
}
.lp-form .lp-field input:focus {
  background: var(--c-white); border-color: var(--lp-gold); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-gold) 18%, transparent);
}
.lp-form .lp-field input[aria-invalid="true"] { border-color: var(--lp-err); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-err) 14%, transparent); }
/* the error slot is ALWAYS in the layout (min-height), so a message cannot push the card */
.lp-form .lp-field__err, .lp-form .lp-consent__err {
  min-height: 1.25em; font-size: 0.8125rem; line-height: 1.25; color: var(--lp-err); text-align: left; text-wrap: pretty;
}

/* everything after the fields spans both columns */
.lp-form .lp-form__ident, .lp-form .lp-consent, .lp-form .lp-card__submit, .lp-form .lp-card__error,
.lp-form .lp-card__reassure, .lp-form .lp-card__foot { grid-column: 1 / -1; }

/* the brand line, centred, the tree mark on both sides */
.lp-form .lp-form__ident {
  margin-top: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--arbor-border);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--lp-navy); text-wrap: balance;
}
.lp-form__mark {
  display: inline-block; width: 22px; height: 22px; flex: 0 0 auto;
  background-color: var(--lp-gold);
  -webkit-mask: url(_img/mark.svg) center / contain no-repeat;
          mask: url(_img/mark.svg) center / contain no-repeat;
}

/* the consents, tightened: 14px stays (Quinten's 2026-09-07 floor), the
   leading and the gaps come in, the row is still the 49px target */
.lp-form .lp-consent { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.lp-form .lp-consent__row {
  display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: start;
  cursor: pointer; touch-action: manipulation; min-height: 49px; padding-block: 4px;
}
.lp-form .lp-consent__box {
  width: 19px; height: 19px; margin: 0; min-height: 19px; accent-color: var(--lp-gold);
  border: 1px solid color-mix(in srgb, var(--lp-navy) 14%, transparent); border-radius: 4px;
  transform: translateY(2px);
}
.lp-form .lp-consent__t { font-size: 0.875rem; line-height: 1.4; color: var(--arbor-text); text-wrap: pretty; max-width: none; }
.lp-form .lp-consent__t a { color: var(--arbor-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color 0.3s ease-out; }
.lp-form .lp-consent__err { grid-column: 2; }
.lp-form .lp-consent__box:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 2px; }
@media (hover: hover) { .lp-form .lp-consent__t a:hover { color: var(--lp-gold-dark); } }

/* submit, centred, the same gold component; then the reassure and the policy links */
.lp-form .lp-card__submit { margin-top: 10px; justify-self: center; width: fit-content; }
.lp-form .lp-card__error { margin-top: 9px; font-size: 0.875rem; color: var(--lp-err); text-align: center; }
.lp-form .lp-card__reassure { margin-top: 9px; font-size: 0.8125rem; color: var(--arbor-text-light); text-align: center; text-wrap: pretty; }
.lp-form .lp-card__foot { margin-top: 8px; }
.lp-form .lp-card__legal { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--arbor-text-light); }
.lp-form .lp-card__legal a { color: var(--arbor-text-light); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 640px) {
  .lp-form .lp-card__fields { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-form .lp-field input, .lp-form .lp-consent__t a, .lp-form__line, .lp-form__area, .lp-form__apex, .lp-form__line2, .lp-form__apex2 { transition: none; }
}