/* The SecureRoad Paved Road.
   ------------------------------------------------------------------
   The landing page's account of the whole platform: six milestones on a
   rail, a card for each one carrying a picture of that step of the
   product, the four roads that join one highway, and what all of it is
   for.

   It replaced a nine-tile carousel. A carousel shows one thing at a
   time and asks you to wait for the rest; this says the whole thing at
   once, which is what a paved road is.

   The card pictures are built rather than screenshotted. The artwork's
   are 140px wide, and a 140px screenshot blown up to fill a card is a
   worse picture of the product than a drawing of it — and this one
   reflows, scales and can be read aloud. */

.lp-paved {
  --pr-line: #dfe8f4;
  --pr-ink-500: #5b6f85;
  padding: clamp(44px, 5vw, 72px) clamp(20px, 4vw, 56px) clamp(40px, 4.4vw, 60px);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(18, 115, 230, .07), transparent 62%),
    linear-gradient(180deg, #f6faff, #fff 58%);
  border-top: 1px solid var(--pr-line);
}
.pr-in { max-width: 1280px; margin: 0 auto; }

/* ---------- the rail ---------- */

.pr-rail {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px; margin: 0 0 clamp(30px, 3.4vw, 46px); padding: 0; list-style: none;
}
.pr-rail-item { position: relative; text-align: center; padding-top: 4px; }
.pr-rail-item a { display: block; color: inherit; }
.pr-rail-item a:hover b { color: var(--blue-600); }
.pr-rail-item a:hover .pr-rail-dot { background: var(--blue-700); }
.pr-rail-dot {
  position: relative; z-index: 1; transition: background .15s ease;
  display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 12px;
  border-radius: 50%; background: var(--blue-600); color: #fff;
  font-size: 14px; font-weight: 800;
  box-shadow: 0 0 0 5px rgba(18, 115, 230, .16);
}
/* the line between the milestones, drawn from each one to the next so it
   cannot run past either end of the rail */
.pr-rail-item::before {
  content: ""; position: absolute; top: 21px; left: 50%; width: 100%; height: 2px;
  background: var(--blue-400); opacity: .55;
}
.pr-rail-item:last-child::before { display: none; }
.pr-rail-item b {
  display: block; font-size: 14px; font-weight: 800; letter-spacing: -.2px;
  color: var(--ink-900); text-wrap: balance;
}
.pr-rail-item a > span:last-child {
  display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.4;
  color: var(--pr-ink-500);
}

/* ---------- the heading ---------- */

/* landing.css resets `.lp h1, .lp h2, .lp p { margin: 0 }` at (0,1,1). A bare
   class here is (0,1,0) and loses it, so every rule below that sets a margin
   on one of those elements names .lp-paved too — without it the lede's `auto`
   margins were dropped and it sat left of the heading it belongs under. */

.pr-head { text-align: center; margin-bottom: clamp(24px, 2.6vw, 34px); }
.pr-head .lp-eyebrow-sm { justify-content: center; }
.lp-paved .pr-lede {
  margin: 12px auto 0; max-width: 62ch;
  font-size: 15.5px; line-height: 1.6; color: var(--ink-600); text-wrap: pretty;
}

/* ---------- the six cards ---------- */

.pr-cards {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px;
  align-items: stretch;
}
.pr-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--pr-line); border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff, #fff);
  padding: 16px 14px 18px;
  transition: transform .18s cubic-bezier(.22, .8, .24, 1), box-shadow .18s ease, border-color .18s ease;
}
.pr-card:hover {
  transform: translateY(-3px); border-color: var(--line-blue);
  box-shadow: 0 18px 40px -22px rgba(13, 27, 42, .42);
}
.pr-card-h { display: flex; align-items: baseline; gap: 9px; }
.pr-card-h b {
  font-size: 17px; font-weight: 800; color: var(--blue-500);
  font-variant-numeric: tabular-nums;
}
.pr-card-h span {
  font-size: 15px; font-weight: 800; letter-spacing: -.3px; line-height: 1.2;
  color: var(--ink-900); text-wrap: balance;
}
.lp-paved .pr-claim {
  margin-top: 14px; font-size: 13.5px; font-weight: 800; line-height: 1.35;
  color: var(--ink-900); text-wrap: pretty;
}
.lp-paved .pr-copy {
  margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--ink-600);
  text-wrap: pretty;
}
.pr-card-cta {
  margin-top: auto; padding-top: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--blue-600);
}
.pr-card-cta span { transition: transform .18s cubic-bezier(.22, .8, .24, 1); }
.pr-card:hover .pr-card-cta span { transform: translateX(3px); }

/* ---------- the pictures inside the cards ---------- */

.pr-shot { margin-top: 14px; }
.pr-win {
  border: 1px solid #e6edf7; border-radius: 10px; overflow: hidden;
  background: #fff; box-shadow: 0 6px 16px -12px rgba(13, 27, 42, .5);
}
.pr-win-plain { padding: 9px 8px; }
.pr-win-top {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 10px; border-bottom: 1px solid #eef3fa; background: #fbfdff;
}
.pr-win-top b { font-size: 11.5px; font-weight: 800; color: var(--ink-900); }
.pr-app-mark {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border-radius: 5px; background: var(--blue-600); color: #fff;
}
.pr-win-body { display: grid; grid-template-columns: 46px minmax(0, 1fr); }
.pr-side { margin: 0; padding: 8px 0; list-style: none; border-right: 1px solid #eef3fa; }
.pr-side li {
  padding: 3px 5px; font-size: 7.8px; font-weight: 600; color: var(--pr-ink-500);
  white-space: nowrap;
}
.pr-side li.on { color: var(--blue-600); font-weight: 800; }

.pr-kv { margin: 0; padding: 7px 6px; display: grid; gap: 4px; min-width: 0; }
.pr-kv > div { display: flex; align-items: center; gap: 5px; min-width: 0; }
.pr-kv dt { flex: none; width: 42px; font-size: 7.4px; color: var(--pr-ink-500); line-height: 1.25; }
.pr-kv dd {
  margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 3px;
  font-size: 8px; font-weight: 700; color: var(--ink-900); overflow-wrap: anywhere;
}
.pr-kv-wide { padding: 8px 0 0; }
.pr-kv-wide dt { width: 44px; font-size: 7.6px; }

.pr-chip {
  display: inline-block; padding: 2px 5px; border-radius: 999px;
  font-size: 7.2px; font-weight: 700; font-style: normal; line-height: 1.4;
  max-width: 100%;
}
.pr-chip-blue  { background: #e8f1fd; color: #1258ad; }
.pr-chip-green { background: #e3f7ec; color: #157a45; }
.pr-chip-red   { background: #fdeaea; color: #b42318; }
.pr-chip-amber { background: #fdf1dd; color: #94620a; }
.pr-chip-gray  { background: #eef2f7; color: #3c5064; }

.lp-paved .pr-shot-h {
  margin: 0 0 7px; font-size: 10px; font-weight: 800; color: var(--ink-900);
}
.lp-paved .pr-shot-h + .pr-shot-h, .lp-paved .pr-chips + .pr-shot-h, .lp-paved .pr-arch + .pr-shot-h { margin-top: 11px; }
.pr-arch {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 7px;
  border: 1px solid #e6edf7; border-radius: 8px; padding: 7px; background: #fbfdff;
}
.pr-arch b { display: block; font-size: 9.5px; font-weight: 800; color: var(--ink-900); }
.pr-arch i {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 8.5px; line-height: 1.4; color: var(--pr-ink-500);
}
.pr-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pr-frameworks {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px;
}
.pr-frameworks li {
  display: grid; justify-items: center; gap: 4px;
  font-size: 8px; font-weight: 700; color: var(--pr-ink-500);
}
.pr-frameworks span {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px;
  background: #e8f1fd; color: #1258ad; font-size: 7.5px; font-weight: 800;
}

.pr-tabs { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 9px; }
.pr-tabs span {
  padding: 3px 5px; border-radius: 5px; font-size: 7.2px; font-weight: 700;
  color: var(--pr-ink-500); background: #f2f6fb; white-space: nowrap;
}
.pr-tabs span.on { background: #e2eefc; color: var(--blue-600); }

/* the architecture diagram: rows of nodes with a rung between them */
.pr-graph { display: grid; justify-items: center; gap: 0; }
.pr-node {
  display: block; padding: 3px 5px; border-radius: 5px;
  border: 1px solid #dbe7f6; background: #f5f9fe;
  font-size: 7.2px; font-weight: 700; color: var(--ink-700); white-space: nowrap;
}
.pr-node-lead { background: #e8f1fd; border-color: #c8ddf7; }
.pr-node-app { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.pr-row { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.pr-rung { display: block; width: 1.5px; height: 12px; background: #c8ddf7; }
.lp-paved .pr-region {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 10px; font-size: 8.5px; font-weight: 700; color: var(--pr-ink-500);
}

.pr-story {
  margin: 0; padding: 8px; border-radius: 8px; background: #f5f9fe;
  border: 1px solid #e6edf7;
  font-size: 8.2px; line-height: 1.5; color: var(--ink-700);
}
.lp-paved .pr-where {
  margin-top: 10px; text-align: center;
  font-size: 8.5px; font-weight: 700; letter-spacing: .6px; color: var(--pr-ink-500);
}

.pr-code {
  margin: 0; padding: 9px; border-radius: 8px; overflow: hidden;
  background: #0e1a2b; color: #b9d4f5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 6.4px; line-height: 1.5;
}
.pr-code code { white-space: pre; display: block; }

.pr-validate { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.pr-validate li {
  display: flex; align-items: center; gap: 5px;
  font-size: 8.2px; color: var(--ink-700);
}
.pr-validate .pr-v-name { flex: 1; min-width: 0; }
/* A tick beside a control that is disabled, detected or missing would be
   the screen telling you the opposite of what it says. Failing rows carry a
   cross, and it is red. */
.pr-validate li::before {
  content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%;
  background: #16a34a no-repeat center /8px 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l5 5 9-11'/%3E%3C/svg%3E");
}
.pr-validate li.bad::before {
  background-color: #d92d20;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
}

/* ---------- four roads, one highway ---------- */

.pr-highway { margin: clamp(22px, 2.6vw, 34px) 0 0; }
.pr-highway img {
  width: 100%; height: auto; border-radius: 16px;
  box-shadow: 0 22px 48px -26px rgba(13, 27, 42, .45);
}

/* ---------- what it is for ---------- */

.pr-benefits {
  margin: clamp(20px, 2.2vw, 28px) 0 0; padding: 16px clamp(10px, 1.6vw, 20px);
  list-style: none;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--pr-line); border-radius: 14px; background: #fff;
}
.pr-benefits li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 11px;
  align-items: center; padding: 4px clamp(10px, 1.4vw, 18px);
  border-left: 1px solid #eef3fa;
}
.pr-benefits li:first-child { border-left: none; }
.pr-ben-icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #e8f1fd; color: var(--blue-600);
}
.pr-benefits b { display: block; font-size: 13px; font-weight: 800; color: var(--ink-900); }
.pr-benefits i {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 12px; line-height: 1.4; color: var(--pr-ink-500);
}

/* ---------- narrower ---------- */

@media (max-width: 1180px) {
  .pr-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .pr-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; }
  /* the rail wraps to two rows of three, so the connector must stop at the
     end of each row rather than running off into the margin */
  .pr-rail-item:nth-child(3n)::before { display: none; }
  .pr-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 0; }
  .pr-benefits li:nth-child(3n+1) { border-left: none; }
}

@media (max-width: 760px) {
  .pr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-rail-item:nth-child(3n)::before { display: block; }
  .pr-rail-item:nth-child(2n)::before { display: none; }
  .pr-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-benefits li { border-left: none; }
}

@media (max-width: 520px) {
  .pr-cards { grid-template-columns: minmax(0, 1fr); }
  .pr-rail { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pr-rail-item::before { display: none; }
  .pr-rail-item:nth-child(3n)::before, .pr-rail-item:nth-child(2n)::before { display: none; }
  .pr-benefits { grid-template-columns: minmax(0, 1fr); }
}