/* ============================================================
   Worldly Treasures Liquidators: landing_page surface.
   Cold-Traffic Truckload Landing (build-39, ADR-0030).

   Ported from the Joe-approved Claude Design handoff
   "Cold-Traffic Truckload Landing"
   (design_handoff_landing_page/cold-traffic-landing/). It SUPERSEDES the
   build-37 CRO layout and its class system entirely.

   The handoff authored the page in inline styles against a design-system
   token layer and used Claude-Design style-hover / style-focus / style-active
   shorthands (which do nothing in a real browser). This file does two jobs:
     1. Reproduces that token layer at :root using the SAME token names the
        ported inline styles reference (so every var() resolves).
     2. Provides the real interactive states (the .lpc-* classes the template
        attaches in place of the design shorthands) plus the nav chrome and the
        scroll-reveal motion landing.js drives.

   landing.css loads ONLY on the landing surface (functions.php is_singular
   gate), so these :root tokens never collide with inventory.css. Mobile-first;
   desktop is progressive enhancement. One conversion action: the lead form.
   The JS hooks the render must keep are the data attributes (data-wtl-lp-cta /
   data-wtl-lp-form / -form-wrap / -success) and field names, never class names.
   ============================================================ */

:root {
  /* Brand primitives (the WTL master palette) */
  --wtl-navy: #1d2c3c;
  --wtl-navy-900: #14202c;
  --wtl-navy-700: #28394b;
  --wtl-gold: #d7a849;
  --wtl-gold-light: #f2cd7c;
  --wtl-gold-dark: #a87925;
  --wtl-ivory: #f3f3f3;
  --wtl-ivory-muted: #f5f0e6;
  --wtl-burgundy: #7c1d1d;
  --wtl-teal: #1d7c6f;

  /* Surfaces / text */
  --text-strong: var(--wtl-navy);
  --text-body: #2a3744;
  --text-muted: #7c7869;
  --text-on-navy: var(--wtl-ivory);
  --text-gold: var(--wtl-gold-dark);

  /* Borders */
  --hairline: rgba(29, 44, 60, 0.10);
  --border-on-navy: rgba(243, 243, 243, 0.16);
  --border-default: #d6d1c4;
  --border-strong: #a8a395;

  /* Status (the verified / honest-green family the design references) */
  --verified: var(--wtl-teal);
  --verified-soft: #e4f0ed;
  --verified-text: #155f55;

  /* Interaction */
  --focus-ring: 0 0 0 3px rgba(215, 168, 73, 0.45);
  --accent-gold-hover: #c79a36;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Type families: the platform loads Inter Tight (display) + Inter (body) +
     IBM Plex Mono globally; the design's inline styles reference these names. */
  --font-sans: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ====================== BASE ====================== */
body.wtl-lp {
  background: var(--wtl-ivory);
  color: var(--text-body);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wtl-lp-cold,
.wtl-lp-cold * { box-sizing: border-box; }
.wtl-lp-cold img { max-width: 100%; display: block; }

/* In-page CTAs anchor to the grid / sections; smooth-scroll with an offset so
   the sticky nav never covers the target. (build-137: #lead-form retired with
   the opt-in form; #inventory + #lp-close are the live targets.) */
html { scroll-behavior: smooth; }
:where(#top, #value, #proof, #inventory, #lp-close) { scroll-margin-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ====================== NAV (minimal conversion chrome) ======================
   header-landing.php: bigger brand logo + canonical phone only. No nav links,
   no secondary CTA (build-39). */
.lpnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(243, 243, 243, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.lpnav__inner {
  max-width: 1180px; margin: 0 auto;
  padding: 10px clamp(20px, 5vw, 48px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.lpnav__logo { display: inline-flex; align-items: center; text-decoration: none; }
.lpnav__logo img { height: 60px; width: auto; display: block; }
.lpnav__right { display: flex; align-items: center; gap: 12px; }
.lpnav__phone {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  color: var(--text-strong); font-weight: 600; font-size: 0.9375rem;
  padding: 8px; border-radius: 6px; white-space: nowrap;
}
.lpnav__phone svg { flex: none; }
.lpnav__phone-text { display: inline; }

@media (min-width: 880px) {
  .lpnav__logo img { height: 72px; }
}

/* Wide desktop (build-40): pull the logo + phone in to flank the centered hero
   text column. The centered headline occupies roughly the inner ~545px of the
   880px hero box; mirroring that as the grid's middle column puts the logo's right
   edge at the headline's left edge and the phone's left edge at its right edge
   (tightened across build-41/42 from the 784px content-box width, which left a gap
   to the centered headline).
   Gated at 1180px so the 174px-wide logo never clips into a too-small gutter;
   below that it keeps the edge-aligned flex layout. */
@media (min-width: 1180px) {
  .lpnav__inner {
    display: grid;
    grid-template-columns: 1fr min(545px, 100%) 1fr;
    column-gap: 0;
    align-items: center;
    max-width: none;
  }
  .lpnav__logo { grid-column: 1; justify-self: end; }
  .lpnav__right { grid-column: 3; justify-self: start; }
}

/* ====================== INTERACTIVE STATES ======================
   The .lpc-* classes replace the design's style-hover / style-focus / style-active
   shorthands (which are Claude-Design-runtime only). Static appearance stays on
   the inline styles; these add the real :hover / :focus / :active behavior. */

/* Gold conversion button (hero, value card, submit). The static look (background,
   box-shadow, transition) lives on the ported inline style, and inline wins over a
   class selector, so every state property the inline style ALSO sets needs
   !important to override it. transform is not set inline, so the lift needs none. */
.lpc-gold:hover { background: var(--accent-gold-hover) !important; transform: translateY(-1px); }
.lpc-gold:active { transform: scale(0.985); }
.lpc-gold:focus-visible { outline: none; box-shadow: var(--focus-ring) !important; }

/* build-137: the .lpc-ghost (hero ghost CTA, dropped build-135) and .lpc-field
   (opt-in form, removed build-137) rules retired with their markup. */

/* ====================== MOTION (scroll-reveal) ======================
   landing.js sets body.wtl-lp-anim only when IntersectionObserver is present and
   motion is allowed, then toggles .in on [data-reveal] blocks as they enter. The
   page is fully visible if JS never runs (no hidden trap). Drives `translate`
   (not `transform`) so any element transform composes instead of being overridden. */
body.wtl-lp-anim [data-reveal] {
  opacity: 0; translate: 0 22px;
  transition: opacity 0.7s var(--ease-standard), translate 0.7s var(--ease-standard);
}
body.wtl-lp-anim [data-reveal].in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  body.wtl-lp-anim [data-reveal] { opacity: 1; translate: 0 0; transition: none; }
}

/* ====================== MOBILE STICKY CTA (build-132, page-cro) ======================
   Mirrors the approved .stickybar (inventory.css, build-22/24) / .article__stickybar
   (article.css) pattern with this surface's own token names. Mobile-only; landing.js
   toggles .show once #lp-hero scrolls out of view and hides it again while #lead-form
   is in view, so it never competes with the real form CTA. */
.lpc-stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px clamp(16px, 4vw, 24px);
  background: var(--wtl-navy);
  border-top: 1px solid var(--border-on-navy);
  text-decoration: none;
  transform: translateY(110%);
  transition: transform 0.3s var(--ease-standard);
}
.lpc-stickybar.show { transform: translateY(0); }
.lpc-stickybar__lc {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wtl-gold-light);
}
.lpc-stickybar__btn {
  flex: none;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--wtl-gold);
  color: var(--wtl-navy);
  font: 700 0.85rem var(--font-sans);
}
@media (min-width: 940px) {
  .lpc-stickybar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lpc-stickybar { transition: none; }
}

/* ====================== HERO: the delivered-price math (LOCKED build-134) ======================
   Joe's pick from the build-133 ?hero=a|b|c preview round; the B (stencil) and C
   (cold ledger) rules are pruned. Locked brand system: navy/gold tokens, Inter
   Tight / Inter / Plex Mono, and the sanctioned Source Serif italic trust-pull
   (--serif resolves here because landing.css depends on inventory.css). Mobile-first. */

.lph { background: var(--wtl-navy); color: var(--text-on-navy); position: relative; }
.lph__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 12px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--wtl-gold-light);
}
.lph__eyebrow::before, .lph__eyebrow::after { content: ""; width: 22px; height: 2px; background: currentColor; opacity: .7; }
.lph__eyebrow--dark { color: var(--text-gold); }

/* --- A: the delivered-price math (artifact hero) --- */
.lph-a__wrap {
  max-width: 1120px; margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 48px);
  display: flex; flex-direction: column; gap: 40px;
}
/* build-138 (Joe, mobile catch): the stacked single-column hero centers everything;
   left alignment is the DESKTOP treatment, applied only where the quote card sits
   beside the copy (the 960px two-column breakpoint below). */
.lph-a__copy { display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; }
.lph-a__ticks { justify-content: center; }
.lph-a__h1 {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.07; letter-spacing: -0.02em;
  color: #fff; text-wrap: balance;
}
.lph-a__sub { margin: 0; font-size: clamp(1rem, 0.9vw + 0.8rem, 1.2rem); line-height: 1.55; color: rgba(243, 243, 243, .78); max-width: 54ch; }
.lph-a__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.lph-a__ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.lph-a__ticks li { display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px var(--font-sans); color: rgba(243, 243, 243, .85); }
.lph-a__stars { display: inline-flex; align-items: center; gap: 10px; font: 600 13.5px var(--font-sans); color: rgba(243, 243, 243, .75); }

.lph-a__quote {
  margin: 0; background: #fdfcf9; border-radius: 14px;
  padding: clamp(24px, 3vw, 32px); padding-top: clamp(30px, 3.4vw, 38px);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .35);
  position: relative; color: var(--text-strong); align-self: stretch;
}
.lph-a__stamp {
  position: absolute; top: -14px; right: 18px;
  background: var(--wtl-gold); color: var(--wtl-navy);
  font: 800 11px var(--font-sans); letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.lph-a__quote-tag {
  font: 700 11px var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-gold); border-bottom: 1px dashed var(--border-default);
  padding-bottom: 12px; margin-bottom: 4px;
}
.lph-a__line { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px dashed var(--border-default); }
.lph-a__k { font: 700 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); flex: none; width: 64px; }
.lph-a__what { font: 500 14.5px var(--font-sans); color: var(--text-body); flex: 1; min-width: 0; }
.lph-a__num { font: 700 16px var(--font-mono); color: var(--text-strong); margin-left: auto; white-space: nowrap; }
.lph-a__line--total { border-bottom: 0; border-top: 2px solid var(--wtl-navy); margin-top: 2px; padding-top: 15px; }
.lph-a__line--total .lph-a__what { font-weight: 700; color: var(--text-strong); }
.lph-a__line--total .lph-a__num { font-size: 22px; }
.lph-a__quote-note { margin: 12px 0 0; font-family: var(--serif, Georgia, serif); font-style: italic; font-weight: 600; font-size: 15.5px; color: var(--text-gold); }

@media (min-width: 960px) {
  .lph-a__wrap { flex-direction: row; align-items: center; gap: 56px; }
  .lph-a__copy { flex: 1 1 55%; align-items: flex-start; text-align: left; }
  .lph-a__ticks { justify-content: flex-start; }
  .lph-a__quote { flex: 1 1 45%; align-self: center; }
}

/* ====================== LIVE INVENTORY (build-134, shop-first) ======================
   The section shell only; the tiles + .grid layout ride the globally-enqueued
   inventory.css unchanged (same markup as the containers + /lp/live/). */
.lph-inv { background: #fff; padding: clamp(44px, 6vw, 76px) 0; border-bottom: 1px solid var(--hairline); }
.lph-inv__wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.lph-inv__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: clamp(22px, 3vw, 34px); }
.lph-inv__h2 {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw + 0.4rem, 2.2rem); line-height: 1.12; letter-spacing: -0.011em;
  color: var(--text-strong); text-wrap: balance;
}
.lph-inv__lede { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--text-body); max-width: 52ch; }

/* Pager (build-135): mono chip buttons over the client-paged full catalog. */
.lph-inv__pager {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: clamp(22px, 3vw, 32px);
}
.lph-inv__pager-count { font: 600 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.lph-inv__pager-btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.lph-inv__pg {
  min-width: 40px; padding: 9px 13px; border: 1px solid var(--border-default); border-radius: 8px;
  background: #fff; color: var(--text-strong); font: 700 13px var(--font-mono);
  cursor: pointer; transition: border-color 140ms, background 140ms;
}
.lph-inv__pg:hover:not(:disabled) { border-color: var(--wtl-gold-dark); }
.lph-inv__pg:disabled { opacity: .4; cursor: default; }
.lph-inv__pg:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lph-inv__pg--on { background: var(--wtl-navy); color: var(--wtl-gold-light); border-color: var(--wtl-navy); }
.lph-inv__pg-gap { font: 700 13px var(--font-mono); color: var(--text-muted); padding: 0 2px; }

/* Sticky bar live count (build-134): mirrors the container sticky's mono count. */
.lpc-stickybar__lc b { color: #fff; }

/* ====================== THE BURN / THE FIX (build-136) ======================
   Solution-forward ledger rows, the objection-ledger vocabulary (Joe's twice-locked
   pick) recut light-mode: the burn small + muted on the left, OUR FIX carrying the
   visual weight on the right. Mobile stacks burn-over-fix inside each row. */
.lpc-fix { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; background: #fff; }
.lpc-fix__row {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(18px, 3vw, 26px);
  border-top: 1px solid var(--hairline);
}
.lpc-fix__row:first-child { border-top: 0; }
.lpc-fix__tag {
  display: inline-block; font: 700 10.5px var(--font-mono); letter-spacing: .16em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 4px; margin-bottom: 8px;
}
.lpc-fix__tag--burn { background: #f5e2e2; color: var(--wtl-burgundy); }
.lpc-fix__tag--fix { background: var(--verified-soft); color: var(--verified-text); }
.lpc-fix__burn-txt { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--text-muted); }
.lpc-fix__ans-txt { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--text-strong); font-weight: 500; }

@media (min-width: 760px) {
  .lpc-fix__row { flex-direction: row; gap: clamp(20px, 3vw, 36px); align-items: flex-start; }
  .lpc-fix__burn { flex: 0 0 34%; }
  .lpc-fix__ans { flex: 1; border-left: 1px solid var(--hairline); padding-left: clamp(20px, 3vw, 36px); }
}

/* ====================== THE STATEMENT (build-137) ======================
   The page thesis, pulled out of the burn/fix section into its own full-bleed
   navy moment (it was an afterthought floating in ivory). The serif italic is
   the design system's sanctioned trust-pull, second of three placements here. */
.lpc-built { background: var(--wtl-navy); padding: clamp(56px, 8vw, 96px) 0; }
.lpc-built__wrap {
  max-width: 780px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.lpc-built__setup {
  margin: 0; font-family: var(--serif, Georgia, serif); font-style: italic;
  font-size: clamp(1.15rem, 1.6vw + 0.6rem, 1.55rem); line-height: 1.45;
  color: rgba(243, 243, 243, .82); text-wrap: balance;
}
.lpc-built__thesis {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--wtl-gold); text-wrap: balance;
}

/* ====================== FAQ (build-132, page-cro) ======================
   Native <details>/<summary>, zero JS (the same zero-dependency pattern the retired
   build-35 FAQ used). The native marker is suppressed in favor of a rotating "+"
   driven off the [open] attribute. */
.lpc-faq__item {
  border-bottom: 1px solid var(--hairline);
  padding: 4px 0;
}
.lpc-faq__q {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font: 600 1.02rem var(--font-sans);
  color: var(--text-strong);
}
.lpc-faq__q::-webkit-details-marker { display: none; }
.lpc-faq__q::after {
  content: "+";
  flex: none;
  font: 400 1.3rem var(--font-mono);
  color: var(--text-gold);
  transition: transform 0.2s var(--ease-standard);
}
.lpc-faq__item[open] .lpc-faq__q::after { transform: rotate(45deg); }
.lpc-faq__a {
  margin: 0 0 18px;
  max-width: 62ch;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text-body);
}