/* ============================================================
   Landing page (index.html, uk_index.html)
   Scoped under .lp so the legacy globals in style.css / homepage.css
   (uppercase h3, button::after hover effect, :focus{outline:none})
   do not leak in. Header and footer keep their own stylesheets.
   ============================================================ */

@font-face {
  font-family: "Barlow";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow/barlow-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow/barlow-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow/barlow-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow/barlow-condensed-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow/barlow-condensed-latin-700-normal.woff2") format("woff2");
}

:root {
  --lp-paper: #ffffff;
  --lp-ink: #000000;
  --lp-asphalt: #3b4046;
  --lp-line: #d8dbe0;
  --lp-wash: #f3f4f6;
  --lp-sign: #f9c300;      /* MUTCD warning yellow (US / Canada sign) */
  --lp-sign-ink: #111111;
  --lp-uk-red: #c8102e;    /* UK regulatory sign border */
  --lp-red: #d63b54;       /* brand accent, unchanged */
  --lp-dark: #14171c;
  --lp-dark-fg: #f4f5f7;
  --lp-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --lp-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --lp-header-h: 99px;     /* fixed header from homepage.css */
}

/* ---------- base ---------- */
.lp {
  font-family: var(--lp-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--lp-ink);
  background: var(--lp-paper);
  -webkit-font-smoothing: antialiased;
}
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp h1, .lp h2, .lp h3 {
  font-family: var(--lp-display);
  font-weight: 600;
  line-height: 1;
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  text-wrap: balance;
}
.lp h2 { font-size: clamp(36px, 4.6vw, 56px); }
.lp h3 { font-size: 26px; }
.lp p { margin: 0; color: var(--lp-asphalt); max-width: 62ch; }
.lp p.lp-lede { font-size: 20px; margin-top: 20px; }
.lp a { color: inherit; }
.lp .lp-num { font-variant-numeric: tabular-nums; }
.lp-wrap { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
.lp-section { padding-block: 88px; }
.lp-section + .lp-section { border-top: 1px solid var(--lp-line); }
.lp-grid { display: grid; gap: 56px; align-items: center; }
.lp-grid > * { min-width: 0; }
.lp-grid--start { align-items: start; }

/* Focus: style.css kills outlines globally, restore a visible one here */
.lp :focus { outline: none; }
.lp :focus-visible { outline: 3px solid var(--lp-sign); outline-offset: 3px; }

/* ---------- buttons (two roles, same names everywhere) ---------- */
.lp .lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px; border-radius: 4px;
  font-family: var(--lp-body); font-weight: 600; font-size: 17px; letter-spacing: 0;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  position: static; transition: background-color .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.lp .lp-btn::after { content: none; }          /* cancel style.css button:after */
.lp .lp-btn span { letter-spacing: 0; }
.lp .lp-btn:hover span { opacity: 1; transform: none; }
.lp .lp-btn--primary { background: var(--lp-red); color: #fff; border-color: var(--lp-red); }
.lp .lp-btn--primary:hover { background: #c02d46; border-color: #c02d46; }
.lp .lp-btn--secondary { background: transparent; color: var(--lp-ink); border-color: var(--lp-ink); }
.lp .lp-btn--secondary:hover { background: var(--lp-ink); color: #fff; }
.lp .lp-btn[disabled] { opacity: .7; cursor: default; }
.lp-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- hero ---------- */
.lp-hero {
  position: relative; overflow: hidden; color: #fff;
  background: #1d1a1f;
  padding-top: calc(var(--lp-header-h) + 32px);
  padding-bottom: 96px;
}
.lp-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.lp-hero-shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(10,8,12,.88) 0%, rgba(10,8,12,.74) 55%, rgba(10,8,12,.48) 100%);
}
.lp-hero .lp-wrap { position: relative; z-index: 2; }
.lp-hero .lp-grid { grid-template-columns: 1.15fr 1fr; }
.lp-hero h1 { font-size: clamp(44px, 6vw, 84px); font-weight: 700; margin-bottom: 28px; color: #fff; }

.lp .lp-height { display: flex; align-items: flex-end; gap: 18px; margin: 0 0 26px; padding: 0; width: auto; background: transparent; flex-wrap: wrap; }  /* style.css paints every <form> white */
.lp-field { display: flex; flex-direction: column; gap: 6px; }
.lp-field label { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.82); }
.lp-field input {
  width: 118px; height: 64px; margin: 0;
  font: 600 40px/1 var(--lp-display); text-align: center;
  background: #fff; color: #111; border: 2px solid #fff; border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.lp-field input:focus-visible { outline: 3px solid var(--lp-sign); outline-offset: 2px; }
.lp-height-metric { align-self: flex-end; padding-bottom: 14px; font-family: var(--lp-display); font-weight: 600; font-size: 28px; color: rgba(255,255,255,.9); }
.lp-hero .lp-verdict { font-size: 22px; line-height: 1.4; color: #fff; max-width: 30ch; margin: 0 0 30px; }
.lp-verdict b { font-family: var(--lp-display); font-weight: 700; font-size: 30px; line-height: 1; }
.lp-hero .lp-ctas { margin-bottom: 18px; }
.lp-hero .lp-btn--secondary { color: #fff; border-color: #fff; }
.lp-hero .lp-btn--secondary:hover { background: #fff; color: var(--lp-ink); }
.lp-hero small { display: block; color: rgba(255,255,255,.74); font-size: 15px; max-width: 60ch; }
.lp-hero-state[hidden] { display: none; }

/* The sign: the one loud element on the page. */
.lp-sign-wrap { max-width: 460px; width: 100%; margin-inline: auto; text-align: center; }
.lp-sign { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 40px rgba(0,0,0,.45)); }
.lp-sign text { font-family: var(--lp-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-sign-cap {
  display: inline-block; margin-top: 18px;
  font-family: var(--lp-display); font-weight: 600; font-size: 22px;
  letter-spacing: .02em; text-transform: uppercase; color: #fff;
}
@media (prefers-reduced-motion: no-preference) {
  .lp-sign-wrap.bump .lp-sign { animation: lp-bump .28s ease-out; }
  @keyframes lp-bump { 0% { transform: scale(.97); } 60% { transform: scale(1.015); } 100% { transform: scale(1); } }
}

/* ---------- why it matters ---------- */
.lp-strike .lp-grid { grid-template-columns: 1fr 1.2fr; align-items: start; gap: 48px; }
.lp-bignum { font-family: var(--lp-display); font-weight: 700; font-size: clamp(72px, 10vw, 140px); line-height: .9; color: var(--lp-red); letter-spacing: -.01em; }
.lp-bignum-cap { font-size: 20px; color: var(--lp-ink); margin-top: 10px; max-width: 22ch; }
.lp .lp-source { font-size: 14px; color: var(--lp-asphalt); margin-top: 28px; max-width: 70ch; }
.lp-source a { color: var(--lp-red); }
.lp-strike p + p { margin-top: 18px; }

/* ---------- how it works ---------- */
.lp-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; counter-reset: lp-step; }
.lp-steps li { counter-increment: lp-step; border-top: 3px solid var(--lp-ink); padding-top: 14px; min-width: 0; }
.lp-steps li::before { content: counter(lp-step); font-family: var(--lp-display); font-weight: 700; font-size: 44px; line-height: 1; display: block; margin-bottom: 10px; }
.lp-steps h3 { margin-bottom: 8px; }
.lp-steps p { font-size: 16px; }
.lp-steps a { color: var(--lp-red); text-decoration: underline; }
.lp-price { margin-top: 40px; font-size: 18px; color: var(--lp-ink); }
.lp-how .lp-ctas { margin-top: 24px; }

/* ---------- HeadRoom band ---------- */
.lp-dark { background: var(--lp-dark); color: var(--lp-dark-fg); border-top: 0 !important; }
.lp-dark p { color: rgba(244,245,247,.78); }
.lp-dark h2, .lp-dark h3 { color: var(--lp-dark-fg); }
.lp-dark + .lp-section { border-top: 0; }
.lp-hr .lp-grid { grid-template-columns: 1.2fr 1fr; }
.lp-hr dl { margin: 28px 0 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; }
.lp-hr dl > div { min-width: 0; }
.lp-hr dt { font-weight: 600; font-size: 17px; }
.lp-hr dd { margin: 4px 0 0; font-size: 15px; color: rgba(244,245,247,.72); }
.lp-hr .lp-btn--secondary { color: var(--lp-dark-fg); border-color: var(--lp-dark-fg); }
.lp-hr .lp-btn--secondary:hover { background: var(--lp-dark-fg); color: var(--lp-dark); }
/* The poster and walkthrough already carry their own phone bezel, so no frame is drawn here */
.lp-phone-video { display: block; width: 320px; max-width: 100%; height: auto; aspect-ratio: 9 / 18.2; object-fit: contain; margin-inline: auto; background: transparent; border-radius: 28px; }
.lp .lp-phone-cap { text-align: center; font-size: 14px; margin: 18px auto 0; }
.lp-phone-cap a { color: var(--lp-dark-fg); text-decoration: underline; }

/* ---------- who it's for ---------- */
.lp-tablewrap { overflow-x: auto; margin-top: 36px; }
.lp-table { width: 100%; border-collapse: collapse; font-size: 17px; }
.lp-table th { text-align: left; font-weight: 600; font-size: 14px; color: var(--lp-asphalt); padding: 0 12px 12px 0; border-bottom: 2px solid var(--lp-ink); white-space: nowrap; }
.lp-table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--lp-line); vertical-align: top; }
.lp-table td:first-child { font-weight: 600; color: var(--lp-ink); }
.lp-table .lp-why { display: block; font-size: 15px; color: var(--lp-asphalt); font-weight: 400; }
.lp-table td.lp-h { font-family: var(--lp-display); font-weight: 600; font-size: 24px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-table td.lp-h small { display: block; font-family: var(--lp-body); font-size: 14px; font-weight: 500; color: var(--lp-asphalt); }
.lp-table td.lp-c { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-table td.lp-c button {
  background: none; border: 0; padding: 0; height: auto; display: inline; margin-left: 8px;
  font: inherit; color: var(--lp-red); font-weight: 600; text-decoration: underline; cursor: pointer;
}
.lp-table td.lp-c button::after { content: none; }
.lp-table td.lp-c button:hover { background: none; color: #c02d46; }

/* ---------- why this data is different ---------- */
.lp-data .lp-grid { grid-template-columns: 1.1fr 1fr; align-items: start; }
.lp-claims { margin: 36px 0 0; display: grid; gap: 26px; }
.lp-claims dt { font-family: var(--lp-display); font-weight: 600; font-size: 26px; line-height: 1.05; }
.lp-claims dd { margin: 8px 0 0; color: var(--lp-asphalt); max-width: 58ch; }
.lp-record { border: 2px solid var(--lp-ink); border-radius: 6px; padding: 24px 26px 22px; color: var(--lp-ink); background: var(--lp-paper); }
.lp-rec-head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; color: var(--lp-asphalt); padding-bottom: 12px; border-bottom: 1px solid var(--lp-line); }
.lp-rec-name { font-family: var(--lp-display); font-weight: 700; font-size: 38px; line-height: 1; margin-top: 18px; }
.lp-rec-where { color: var(--lp-asphalt); font-size: 15px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.lp-rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: 22px; }
.lp-rec-grid > div { min-width: 0; }
.lp-rec-grid span { display: block; font-size: 13px; font-weight: 600; color: var(--lp-asphalt); }
.lp-rec-grid b { display: block; font-family: var(--lp-display); font-weight: 600; font-size: 24px; line-height: 1.1; margin-top: 2px; }
.lp-compass { width: 240px; height: 240px; max-width: 100%; display: block; margin: 22px auto 0; color: var(--lp-ink); overflow: visible; }
.lp-compass .lp-cmp-approach { opacity: 0; }
.lp .lp-rec-note { font-size: 15px; margin-top: 14px; text-align: center; max-width: none; }

/* ---------- fleet ---------- */
.lp-fleet .lp-grid { grid-template-columns: 1.1fr 1fr; align-items: start; }
.lp-fleet ul { margin: 22px 0 32px; padding-left: 20px; color: var(--lp-asphalt); display: grid; gap: 8px; list-style: disc; }
.lp-fleet pre {
  margin: 0; background: var(--lp-wash); border: 1px solid var(--lp-line); border-radius: 6px; padding: 20px;
  font: 14px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--lp-ink); overflow-x: auto;
}
.lp-fleet pre .k { color: var(--lp-red); }
.lp-fleet small { display: block; margin-top: 10px; color: var(--lp-asphalt); font-size: 14px; }

/* ---------- FAQ ---------- */
.lp-faq-list { max-width: 760px; margin-top: 32px; }
.lp-faq-list details { border-top: 1px solid var(--lp-line); }
.lp-faq-list details:last-of-type { border-bottom: 1px solid var(--lp-line); }
.lp-faq-list summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; font-size: 19px; display: flex; justify-content: space-between; gap: 16px; color: var(--lp-ink); }
.lp-faq-list summary::-webkit-details-marker { display: none; }
.lp-faq-list summary::after { content: "+"; font-family: var(--lp-display); font-size: 28px; line-height: 1; color: var(--lp-red); flex: none; }
.lp-faq-list details[open] summary::after { content: "\2013"; }
.lp-faq-list details p { padding-bottom: 20px; }

/* ---------- responsive ---------- */
@media (max-width: 1023.98px) {
  .lp-hero .lp-grid, .lp-strike .lp-grid, .lp-hr .lp-grid, .lp-data .lp-grid, .lp-fleet .lp-grid { grid-template-columns: 1fr; gap: 40px; }
  .lp-steps { grid-template-columns: 1fr 1fr; }
  .lp-section { padding-block: 64px; }
  .lp-sign-wrap { max-width: 380px; }
}
@media (max-width: 767.98px) {
  .lp { font-size: 16px; }
  .lp-wrap { padding-inline: 16px; }
  .lp-hero { padding-top: 84px; padding-bottom: 64px; }   /* mobile header is shorter than the desktop bar */
  .lp-hero h1 { margin-bottom: 20px; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-hr dl { grid-template-columns: 1fr; }
  .lp .lp-btn { width: 100%; }
  .lp-field input { width: 96px; height: 56px; font-size: 34px; }
  .lp-height-metric { padding-bottom: 10px; font-size: 24px; }
  .lp-hero .lp-verdict { font-size: 19px; }
  .lp-hero .lp-verdict b { font-size: 26px; }
  .lp-sign-wrap { max-width: 300px; }
  .lp-rec-grid { grid-template-columns: 1fr; }
  .lp-record { padding: 20px 18px 18px; }
  .lp-rec-name { font-size: 30px; }
  .lp p.lp-lede { font-size: 18px; }
}
/* Compass: once the card is on screen (JS adds .draw) traffic approaches the deck on the two hazard
   headings and stops short of it, a few times, then rests in place. Deck traffic just sits there. */
.lp-compass.draw .lp-cmp-approach { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .lp-compass.draw .lp-cmp-approach--a { animation: lp-approach-a 2.4s ease-in-out 4 backwards; }
  .lp-compass.draw .lp-cmp-approach--b { animation: lp-approach-b 2.4s ease-in-out 4 backwards; animation-delay: .6s; }
  @keyframes lp-approach-a { 0% { transform: translateY(18px); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateY(-22px); opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }
  @keyframes lp-approach-b { 0% { transform: translateY(-18px); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateY(22px); opacity: 1; } 100% { transform: translateY(22px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .lp-compass .lp-cmp-approach { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lp * { transition: none !important; animation: none !important; }
}