/* The landing page, and only the landing page.
   Deliberately not in styles.css: eighteen other marketing pages share that
   file, and this design has its own type family, scale and palette. Keeping it
   separate means the landing page can be replaced wholesale without auditing
   what else moved. */

/* ── Tokens ───────────────────────────────────────────────── */
.lp {
  --blue-600: #1273e6;
  --blue-700: #0b58b8;
  --blue-800: #0a4e9f;
  --blue-500: #2a7ce0;
  --blue-400: #4a9dfb;

  --ink-900: #0d1b2a;
  --ink-700: #31465c;
  --ink-600: #3c5064;
  --ink-550: #43586d;
  --ink-500: #5b6f85;
  --ink-450: #25384c;

  --tint-50: #f4f8fd;
  --tint-100: #eef4fb;
  --tint-150: #eaf2fb;
  --tint-200: #f1f6fc;

  --line-light: #e6ecf4;
  --line-light-2: #e2eaf4;
  --line-blue: #bcd6f4;

  --navy-900: #07182c;
  --navy-850: #08182e;
  --dk-200: #d3e0ee;
  --dk-300: #b9cde1;
  --dk-400: #98b2cc;
  --dk-500: #7fa3c9;
  --dk-divider: rgba(255, 255, 255, .10);

  --shadow-btn: 0 10px 24px rgba(18, 115, 230, .28);
  --shadow-btn-sm: 0 6px 18px rgba(18, 115, 230, .25);
  --shadow-drop: 0 22px 50px -14px rgba(13, 27, 42, .28), 0 6px 16px -8px rgba(13, 27, 42, .16);
  --shadow-tile: 0 24px 60px -20px rgba(13, 27, 42, .35);

  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink-900);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
/* :where() so the reset carries no class weight — as `.lp a` it was
   (0,1,1) and beat one-class rules that state a color, which is how
   .lp-band-cta's white text came out navy on its blue button. */
:where(.lp) a { color: inherit; text-decoration: none; }
.lp h1, .lp h2, .lp p { margin: 0; }
.lp button { font-family: inherit; }
.lp img { display: block; max-width: 100%; }
/* The AVIF/WebP wrapper must not become a box: several images size against
   their parent (the 118px persona strip, the full-height tile), and an inline
   picture in between gives those percentages nothing to resolve against. */
.lp picture { display: contents; }

/* One ring everywhere, because a keyboard user should never have to guess
   which control they are on. */
.lp a:focus-visible,
.lp button:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The two-tone wordmark is a hard rule in the handoff: every occurrence of
   "SecureRoad" anywhere on the page renders dark + blue at weight 700. */
.lp .wm { font-weight: 700; }
.lp .wm-a { color: var(--ink-900); }
.lp .wm-b { color: var(--blue-600); }
.lp .on-dark .wm-a, .lp .wm-dark .wm-a { color: #fff; }
.lp .on-dark .wm-b, .lp .wm-dark .wm-b { color: var(--blue-400); }

/* ── Buttons ──────────────────────────────────────────────── */
.lp .btn {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: 8px; font-weight: 700; white-space: nowrap;
  border: none; cursor: pointer;
  transition: background .15s ease, transform .15s ease, border-color .15s ease, color .15s ease;
}
.lp .btn-primary {
  background: var(--blue-600); color: #fff;
  padding: 15px 26px; font-size: 15px; box-shadow: var(--shadow-btn);
}
.lp .btn-primary:hover { background: var(--blue-700); transform: translateY(-1px); }
.lp .btn-primary:active { background: var(--blue-800); transform: translateY(0); }
.lp .btn-secondary {
  background: #fff; color: var(--blue-600);
  padding: 15px 24px; font-size: 15px; border: 1.5px solid var(--line-blue);
}
.lp .btn-secondary:hover { border-color: var(--blue-600); transform: translateY(-1px); }
.lp .play-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue-600); color: #fff; font-size: 9px;
}

/* The header lives in header.css — every page shares it. */

/* ── Hero ─────────────────────────────────────────────────── */
.lp-hero { position: relative; }
.lp-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #f4f8fd 0%, #eef4fb 100%);
}
.lp-hero-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.16fr);
  align-items: stretch;
}
.lp-hero-copy {
  padding: clamp(28px, 4vw, 54px) clamp(20px, 3vw, 44px) 40px clamp(20px, 4vw, 56px);
  padding-left: max(clamp(20px, 4vw, 56px), calc((100vw - 1500px) / 2 + 56px));
  display: flex; flex-direction: column; justify-content: center;
  min-height: 642px;
}
.lp-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 2.2px;
  color: var(--blue-500); margin-bottom: 22px; max-width: 520px;
}
.lp-h1 {
  max-width: 600px; font-size: 66px; line-height: 1.04;
  letter-spacing: -2.4px; font-weight: 800; color: var(--ink-900);
}
.lp-h1 em { font-style: normal; color: var(--blue-600); }
.lp-brk { display: inline; }
.lp-hero-p {
  margin-top: 26px; max-width: 520px;
  font-size: 16.5px; line-height: 1.6; color: var(--ink-600); text-wrap: pretty;
}
.lp-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.lp-benefits {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start; margin-top: 44px;
  /* Pulls the first label back under the CTA above it, as specified. */
  margin-left: -34px; max-width: 560px;
}
.lp-benefit {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 6px 8px;
}
.lp-benefit + .lp-benefit { border-left: 1px solid rgba(18, 115, 230, .16); }
.lp-benefit span {
  font-size: 14px; font-weight: 600; color: var(--ink-450);
  text-align: center; line-height: 1.35;
}

.lp-hero-photo-cell { position: relative; min-height: 600px; }
/* Oversized and pulled left on purpose so the road sign in the photograph
   stays in frame; the two masks dissolve the left and top edges into the
   gradient so the photo has no visible border. */
.lp-hero-photo {
  position: absolute; left: -58%; top: 0;
  width: 158%; height: 100%; object-fit: cover;
  /* The wider the viewport, the more the photo is scaled up and the more the
     cover crop eats. Biased off center so the hand-script line at the top of
     the frame survives; the bottom it gives up is road that meets the dark
     band anyway. */
  object-position: 50% 32%;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, transparent 26%, rgba(0, 0, 0, .3) 38%, #000 56%),
    linear-gradient(180deg, transparent 0, #000 11%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, transparent 26%, rgba(0, 0, 0, .3) 38%, #000 56%),
    linear-gradient(180deg, transparent 0, #000 11%, #000 100%);
  mask-composite: intersect;
}
/* Qualified by element, because the base `.lp img` rule is (0,1,1) and a bare
   class is (0,1,0) — it loses, and the photo silently snaps back to its cell. */
.lp img.lp-hero-photo { max-width: none; }

/* ── Trust / stats band ───────────────────────────────────── */
.lp-trust { background: var(--navy-850); color: #fff; padding: 30px clamp(20px, 4vw, 56px); }
/* One thing in the band now that the logo wall is gone, so it is centered
   rather than left sitting in the half it used to share. */
.lp-trust-in {
  max-width: 1100px; margin: 0 auto; text-align: center;
}
.lp-trust-label {
  font-size: 11px; font-weight: 600; letter-spacing: 1.8px;
  color: #8ba7c6; margin-bottom: 24px;
}
.lp-logos {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 1.6vw, 38px);
  font-size: 19px; font-weight: 600; color: #e7eef7; opacity: .92;
}
.lp-logos .ms { display: inline-flex; align-items: center; gap: 8px; }
.lp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; gap: 18px; }
.lp-stat { border-left: 1px solid rgba(255, 255, 255, .13); padding: 0 16px; }
.lp-stat:first-child { border-left: none; }
.lp-stat b { display: block; font-size: 30px; font-weight: 800; color: var(--blue-400); letter-spacing: -1px; }
.lp-stat span { display: block; font-size: 13px; line-height: 1.4; color: #c6d6e8; margin-top: 6px; }

/* ── Flattened image sections ─────────────────────────────── */
/* Sections 4 and 5 ship as composed images, as the handoff does. The one
   interactive element is the CTA layered over the painted button. */
.lp-band { position: relative; line-height: 0; }
.lp-band img { width: 100%; height: auto; }
.lp-band-cta {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--blue-600); color: #fff; border-radius: 10px;
  font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 10px 24px rgba(18, 115, 230, .34);
  transition: background .15s ease, transform .15s ease;
  /* Positioned as a share of the 1440x812 artwork so it stays over the painted
     button when the image scales. */
  left: 3.40%; top: 47.29%; width: 15.90%; height: 6.65%;
  min-width: 0;
}
.lp-band-cta:hover { background: var(--blue-700); transform: translateY(-1px); }
.lp-band-cta:active { background: var(--blue-800); transform: translateY(0); }

/* ── Personas ─────────────────────────────────────────────── */
.lp-personas { padding: 0 clamp(20px, 4vw, 56px) clamp(40px, 5vw, 64px); }
.lp-personas-in {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.6fr);
  gap: clamp(28px, 4vw, 52px); align-items: center;
}
.lp-personas-h2 {
  margin-top: 14px; font-size: clamp(22px, 2.3vw, 29px); font-weight: 800;
  letter-spacing: -.9px; line-height: 1.18; color: var(--ink-900);
}
.lp-personas-p { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--ink-550); text-wrap: pretty; }
.lp-outline-cta {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 9px;
  margin-top: 24px; border: 1.5px solid var(--line-blue); border-radius: 8px;
  padding: 12px 20px; font-size: 14px; font-weight: 700; white-space: nowrap;
  transition: border-color .15s ease;
}
.lp-outline-cta:hover { border-color: var(--blue-600); }
.lp-persona-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lp-persona {
  border: 1px solid var(--line-light); border-radius: 10px;
  overflow: hidden; background: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.lp-persona:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -14px rgba(13, 27, 42, .35); }
/* the cards are links now, and one tagline runs to two lines, so the
   arrows are pushed to the bottom rather than left to float */
.lp-persona { color: inherit; text-decoration: none; display: flex; flex-direction: column; }
/* The source portraits are upright and the frame is not. A cover fit scales
   to the card's width whatever this height is, so the height is how much of
   the person you see: at 150 the frame closed over the tops of their heads.
   The crop is held near the top for the same reason — centring lands on a
   collar, and anything past about 8% takes the hair off. */
.lp-persona-img { height: 200px; flex: none; }
.lp-persona-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.lp-persona-body { padding: 12px 12px 14px; flex: 1; display: flex; flex-direction: column; }
.lp-persona-body b { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink-900); }
.lp-persona-body b.dev { color: var(--blue-600); }
.lp-persona-body span { display: block; font-size: 11.5px; line-height: 1.4; color: var(--ink-500); margin-top: 5px; }
.lp-persona-body i { display: block; font-style: normal; text-align: right; color: var(--blue-600); font-size: 14px; margin-top: auto; padding-top: 8px; }

/* The footer lives in footer.css — every page shares it. */

/* ── Responsive ───────────────────────────────────────────── */
/* The prototype pinned a 1440px canvas and scaled it with CSS zoom. That is a
   prototype device, not a layout — the handoff says so explicitly — so the
   composition reflows here instead. */
@media (max-width: 1100px) {
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-hero-copy { min-height: 0; padding-bottom: 8px; }
  .lp-hero-photo-cell { min-height: 380px; order: 2; }
  .lp-hero-photo {
    left: 0; width: 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 100%);
  }
  .lp-h1 { font-size: clamp(38px, 6vw, 66px); letter-spacing: -1.6px; }
  .lp-brk { display: none; }
  .lp-benefits { margin-left: 0; }
  .lp-personas-in { grid-template-columns: minmax(0, 1fr); }
  .lp-persona-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-h2 { font-size: clamp(28px, 4vw, 40px); }
}

@media (max-width: 760px) {
  .lp-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; max-width: none; }
  .lp-benefit:nth-child(3) { border-left: none; }
  .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .lp-persona-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-hero-ctas .btn { width: 100%; justify-content: center; }
}

/* Autoplay and long transitions are motion someone did not ask for. */

/* ── Motion ───────────────────────────────────────────────────
   Feedback on things the reader is already pointing at. Nothing animates on
   scroll and nothing loops: this page is nine full-bleed images and a moving
   carousel already, and motion competing with motion reads as noise. */

/* Same gleam as the header CTA, so the two primary buttons behave alike.
   The band CTA is deliberately absent from the position declaration: it is
   already absolutely positioned over the artwork, and this selector outranks
   the rule that puts it there — re-declaring position:relative dropped it back
   into flow, where the band's line-height:0 squashed it flat. Absolute already
   gives ::after the containing block the sweep needs. */
.lp .btn-primary { position: relative; overflow: hidden; }
.lp .lp-band-cta { overflow: hidden; }
.lp .btn-primary::after, .lp .lp-band-cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 22%, rgba(255, 255, 255, .30) 50%, transparent 78%);
  transform: translateX(-130%);
}
.lp .btn-primary:hover::after, .lp .lp-band-cta:hover::after {
  transform: translateX(130%); transition: transform .62s ease;
}
.lp .btn-primary:active { transform: translateY(0) scale(.985); }

/* Outline buttons fill from the left instead of only changing their border. */
.lp .btn-secondary, .lp .lp-outline-cta { position: relative; z-index: 0; overflow: hidden; }
.lp .btn-secondary::before, .lp .lp-outline-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--tint-100);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .26s cubic-bezier(.22, .8, .24, 1);
}
.lp .btn-secondary:hover::before, .lp .lp-outline-cta:hover::before { transform: scaleX(1); }
.lp .lp-outline-cta:hover { transform: translateY(-1px); }
.lp .btn-secondary:active, .lp .lp-outline-cta:active { transform: translateY(0) scale(.985); }

.lp .btn-primary > span, .lp .lp-band-cta > span, .lp .lp-outline-cta > span {
  display: inline-block; transition: transform .18s cubic-bezier(.22, .8, .24, 1);
}
.lp .btn-primary:hover > span,
.lp .lp-band-cta:hover > span,
.lp .lp-outline-cta:hover > span { transform: translateX(3px); }

/* The play glyph is the subject of its button, so it grows rather than slides. */
.lp .play-glyph { transition: transform .2s cubic-bezier(.22, .8, .24, 1); }
.lp .btn-secondary:hover .play-glyph { transform: scale(1.14); }

/* The card lift existed; the shadow that makes it read as height did not. */
.lp-persona { transition: transform .18s cubic-bezier(.22, .8, .24, 1), box-shadow .18s ease, border-color .18s ease; }
.lp-persona:hover { border-color: var(--line-blue); box-shadow: 0 14px 34px -16px rgba(13, 27, 42, .40); }
.lp-persona i { transition: transform .18s cubic-bezier(.22, .8, .24, 1); }
.lp-persona:hover i { transform: translateX(3px); }

/* Benefit icons acknowledge the pointer without the row rearranging itself. */
.lp-benefit svg { transition: transform .22s cubic-bezier(.22, .8, .24, 1); }
.lp-benefit:hover svg { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}