/* ==========================================================================
   THE CAMPAIGN LANDING LAYER
   Loaded last, after art.css, and used only by /lp/. It defines no color, no
   type scale and no spacing of its own: every value below is a token the rest
   of the site already sets. A landing page that introduced a second design
   system would throw away the credibility it exists to borrow.

   What is actually new here is three things:
     1. a fifth hero family whose right-hand column is a form, not a drawing
     2. a simplified header and footer
     3. the form card's own surface, which has to work on the navy panel

   Everything else on these pages -- .needs, .card, .steps, .faq, .showcase,
   .closer, .index -- is the corporate component, unchanged.
   ========================================================================== */

/* --- the fifth hero family ----------------------------------------------- */
/* Navy, like .phero-service: this is the same company and the visitor should
   recognize it if they click through to the real site afterwards. */
.phero-lp .phero-panel { background: var(--navy); --phero-grid-line: rgba(120, 170, 230, 0.10); }
.phero-lp .phero-copy h1 { max-width: 15ch; }
.phero-lp .phero-copy .lead { max-width: 44ch; }

/* The form is the wider column here, not the narrower one: it is the thing
   the page is for. `start` rather than `center` so a long copy column does not
   drag a short form down the panel with it. */
.lp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr); align-items: start; }

/* Three facts as three items, so a wrap happens BETWEEN them and never inside
   one. As a single string it broke between "clients" and "worldwide". */
.lp-trust {
  margin-top: var(--s8);
  display: flex; flex-wrap: wrap; gap: 6px var(--s5);
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint);
}
/* Trailing, not leading: a leading separator that wraps ends up alone at the
   start of the second line. A trailing one stays with the item it follows. */
.lp-trust > span:not(:last-child)::after {
  content: "\00b7"; margin-left: var(--s5); opacity: 0.55;
}

/* --- the form card -------------------------------------------------------
   White on the navy panel, so the one thing the page wants is the one thing
   that is lit. No shadow tricks and no accent border: the contrast between
   paper and navy is already the strongest signal available. */
.lp-form {
  position: relative; z-index: 2;
  background: var(--paper);
  border-radius: var(--radius-panel);
  padding: clamp(22px, 2.6vw, 34px);
  box-shadow: var(--lift-3);
  scroll-margin-top: var(--s9);
}
.lp-form-h {
  font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3);
  color: var(--text); margin-bottom: var(--s6);
}
.lp-form .fields { gap: var(--s5) var(--s5); }
.lp-form textarea { min-height: 88px; }
.lp-form-foot { margin-top: var(--s7); }
.lp-form-foot p {
  margin-top: var(--s5); font-size: var(--t-sm);
  color: var(--text-dim); line-height: 1.55;
}

/* --- the "how we help" list ---------------------------------------------
   .index without the link affordances, because these items are statements
   rather than destinations. Reusing the component keeps the rhythm; dropping
   the hover and the underline sweep keeps it honest about not being clickable. */
.lp-item { display: block; padding: var(--s5) 0; border-top: 1px solid var(--rule); }
.lp-item:nth-child(-n+2) { border-top: 0; padding-top: clamp(16px, 2vw, 26px); }
.lp-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lp-item b {
  display: block; font-size: var(--t-h4); font-weight: var(--w-semi);
  color: var(--text); letter-spacing: var(--tr-h4);
}
.lp-item span {
  display: block; font-size: var(--t-sm); color: var(--text-dim);
  margin-top: 5px; line-height: 1.5;
}

/* A card that is not a link must not offer a link's hover. */
.card-static { transition: none; }
.card-static::before { content: none; }
.card-static b {
  display: block; font-size: var(--t-h4); font-weight: var(--w-semi);
  color: var(--text); letter-spacing: var(--tr-h4);
}

/* --- the campaign header ------------------------------------------------- */
.lp-hdr {
  position: relative; z-index: 90;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.lp-hdr-in {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 74px; padding-block: var(--s3); flex-wrap: wrap;
}
.lp-hdr-since {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); margin: 0;
}
.lp-hdr-act { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
/* Same rule as the corporate header: the number itself does not fit beside
   the action on a phone, so below 35em the icon stays at a full 44px. */
.lp-hdr .tel-mini { display: none; }
@media (max-width: 44em) {
  .lp-hdr-since { display: none; }
}
@media (max-width: 35em) {
  .lp-hdr .tel { display: none; }
  .lp-hdr .tel-mini { display: inline-flex; }
}

/* --- the campaign footer ------------------------------------------------- */
/* Navy, like the corporate footer. It reuses .ftr-tel, .ftr-bot and
   .ftr-legal, and those carry hard-coded light colours for the dark ground
   they were written for -- on a pale ground the phone number measured 1.08:1.
   Re-pointing the tokens is one line in tokens.css; overriding four colours
   here would be four chances to miss the fifth. */
.lp-ftr {
  padding-block: var(--s10) var(--s7);
  margin-top: var(--s10);
}
.lp-ftr-brand .wordmark { height: 26px; color: var(--snow); }
.lp-ftr-top {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--s8); align-items: start;
}
.lp-ftr-brand p {
  margin-top: var(--s5); max-width: 42ch;
  font-size: var(--t-sm); color: var(--text-dim); line-height: 1.6;
}
.lp-ftr-reach p { font-size: var(--t-sm); color: var(--text-dim); }
.lp-ftr-reach p + p { margin-top: var(--s3); }
.lp-ftr .ftr-bot { margin-top: var(--s9); }
@media (max-width: 44em) {
  .lp-ftr-top { grid-template-columns: minmax(0, 1fr); }
}

/* --- reflow --------------------------------------------------------------
   em, not px, for the same reason every other collapse on this site is in em:
   a reader at 200% text zoom must reach the single-column layout, and a px
   query never moves when they change their text size. */
@media (max-width: 61.25em) {
  .lp-grid { grid-template-columns: minmax(0, 1fr); }
  .phero-lp .phero-copy h1, .phero-lp .phero-copy .lead { max-width: 30ch; }
  .lp-form { margin-top: var(--s8); }
}
@media (max-width: 38.75em) {
  .lp-item:nth-child(2) { border-top: 1px solid var(--rule); padding-top: var(--s5); }
}

/* --- the light island inside the dark panel ------------------------------
   .lp-form is white paper sitting inside .phero-lp .phero-panel, which
   re-points the semantic tokens to the navy set. Without putting them back,
   every label, every border and every focus ring inside the card would be
   drawn for a dark ground on a white one: snow text on paper, and a cyan
   focus ring at 1.4:1. This is the same mechanism .on-dark uses, run in the
   other direction, and it is the only place on the site that needs it. */
.lp-form {
  --bg:          var(--paper);
  --bg-2:        var(--paper-2);
  --surface:     var(--paper);
  --surface-2:   var(--paper-2);
  --text:        var(--ink);
  --text-2:      var(--ink-2);
  --text-dim:    var(--ink-3);
  --text-faint:  var(--ink-4);
  --rule:        var(--line);
  --rule-strong: var(--line-2);
  --surface-edge: var(--line);
  --control-edge: var(--edge);
  --link:        var(--blue);
  --link-hover:  var(--blue-deep);
  --mark:        var(--blue);
  --keyline:     var(--blue);
  --focus:       var(--blue);
  --state-warn:  var(--warn);
  --state-fault: var(--fault);
  --state-ok:    var(--ok);
  --film:        var(--blue-film);
  color: var(--text);
}

/* Same reason as .faq summary in styles.css: a long product or platform name
   is one unbreakable token, and these are the two places on a landing page
   where one lands in a narrow column. */
.lp-item b, .card-static b { overflow-wrap: break-word; }