/* Tenacious J Carriers — PPC landing page scaffolding.
   Composes the design-system tokens (var(--tj-*)). */

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--tj-white); }

.lp { font-family: var(--font-body); color: var(--tj-gray-700); background: var(--tj-white); }
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp img { max-width: 100%; }

/* ---- Layout primitives ----------------------------------- */
.lp-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 5vw; }
.lp-section { padding: 88px 0; position: relative; }
.lp-section--tight { padding: 64px 0; }
.lp-section--gray { background: var(--tj-gray-300); }
.lp-section--ink { background: var(--tj-ink); color: var(--text-on-dark-dim); }

/* ---- Display headings ------------------------------------ */
/* KeeponTruckin ships a single weight — let heading elements (which default to
   bold) render at normal weight so the chunky face stays legible. Outlined
   .lp-mark words keep their definition from the green text-stroke. */
.lp h1, .lp h2, .lp h3, .lp h4, .lp h5, .lp h6 { font-weight: 400; }

.lp-h2 { font-family: var(--font-display); font-size: clamp(34px, 4.4vw, 54px); line-height: 1.08;
  margin: 0; color: var(--tj-black); text-transform: uppercase; letter-spacing: -0.01em; }
.lp-h2--ondark { color: var(--tj-white); }
.lp-h3 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); line-height: 1.12;
  margin: 0; color: var(--tj-black); text-transform: uppercase; }
.lp-lede { font-size: 18px; line-height: 1.65; color: var(--tj-gray-600); max-width: 60ch; margin: 0; }
.lp-lede--ondark { color: var(--text-on-dark-dim); }

/* a word inside a display heading gets the lime text-outline */
.lp-mark { color: var(--tj-black); -webkit-text-stroke: 0.7px var(--tj-green); }
.lp-mark--ondark { color: var(--tj-white); -webkit-text-stroke: 0.7px var(--tj-green); }
.lp-hl { background: var(--tj-green); color: var(--tj-black); padding: 0 6px; }

/* ---- Section title block --------------------------------- */
.lp-titleblock { display: flex; flex-direction: column; gap: 18px; max-width: 720px; margin-bottom: 52px; }
.lp-titleblock--center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }

/* ---- Generic checkmark / list ---------------------------- */
.lp-checks { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lp-check { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; font-weight: 600; }
.lp-check__mark { flex: none; width: 24px; height: 24px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  background: var(--tj-black); color: var(--tj-green); margin-top: 1px; }

@media (max-width: 760px) {
  .lp-section { padding: 60px 0; }
}

/* ---- Brand lightning bolt (eyebrows / kicker) ------------- */
.lp-bolt { height: 16px; width: auto; display: block; flex: none; }
.lp-bolt--lg { height: 22px; }

/* ---- Button tri-star end-cap ------------------------------
   The brand tri-star SVG is injected into each cap by tristar.js. Force its
   strokes white (over the SVG's own black) so it reads on the black cap, size
   it to the cap, and rotate it clockwise on hover. */
.lp .tjc-btn__star svg { width: 28px; height: 28px; display: block;
  transition: transform 0.6s var(--ease-out); }
.lp .tjc-btn--sm .tjc-btn__star svg { width: 22px; height: 22px; }
.lp .tjc-btn__star svg .cls-1 { fill: var(--tj-green) !important; stroke: none !important; }
.lp .tjc-btn:hover .tjc-btn__star svg { transform: rotate(360deg); }

/* The quote form's submit stretches full-width in the column; flush the
   tri-star end-cap to the right edge instead of centering the content. */
.lp-qf__form .tjc-btn { width: 100%; justify-content: space-between; }
.lp-qf__form .tjc-btn__label { flex: 1; justify-content: center; }