/* SecureRoad marketing site.
   One stylesheet for the whole site. The sample is one design applied to every
   page — light chrome, dark navy type, blue for emphasis, and navy reserved for
   the two bands that are meant to interrupt. */

:root {
  --navy: #0C1B3A;          /* headlines, and the dark bands */
  --navy-deep: #071528;
  --blue: #1F6FE5;
  --blue-dark: #1758C0;
  --blue-soft: #EAF1FD;
  --ink: #0C1B3A;
  --body: #55677E;
  --line: #E2E9F2;
  --line-soft: #EEF3F9;
  --page: #FFFFFF;
  --tint: #F5F9FE;
  --sky-1: #FBFDFF;
  --sky-2: #E8F1FC;
  --green: #16A34A;
  --amber: #F59E0B;
  --red: #EF4444;
  --shadow-sm: 0 1px 2px rgba(12, 27, 58, .05), 0 3px 10px rgba(12, 27, 58, .05);
  --shadow: 0 6px 16px rgba(12, 27, 58, .07), 0 22px 50px rgba(12, 27, 58, .10);
  --radius: 16px;
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --wide: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: var(--ui); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; letter-spacing: -0.028em; text-wrap: balance; color: var(--navy); }
h1 { font-size: clamp(40px, 5.2vw, 60px); font-weight: 800; }
h2 { font-size: clamp(30px, 3.7vw, 44px); font-weight: 800; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.014em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 26px; }
.kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 16px;
}
.lede { font-size: 18px; color: var(--body); max-width: 56ch; }
.hero-copy .lede { max-width: 52ch; }
em.hl { font-style: normal; color: var(--blue); }

/* The header used to live here: a sticky bar, hover dropdowns and a details
   menu, copied into every page and drifted into five variants. It is
   header.css now, shared with the landing page, and not one of those classes
   appears in any page any more. */

.btn {
  display: inline-flex; align-items: center; gap: 9px; border: 1px solid transparent;
  padding: 13px 24px; border-radius: 10px; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(31, 111, 229, .26); }
.btn-primary:hover { background: var(--blue-dark); }
.btn-outline { background: #fff; color: var(--blue); border-color: #C9DCF7; }
.btn-outline:hover { border-color: var(--blue); }
.btn-sm { padding: 9px 17px; font-size: 13.5px; border-radius: 8px; }

/* ── Hero: light, the landscape entering from the right ────── */
.hero { position: relative; background: linear-gradient(170deg, var(--sky-1) 0%, var(--sky-2) 100%); overflow: hidden; }
/* A photograph now, not the stand-in. It holds the right of the hero; the wash
   protects the column the words sit in, and a second wash fades its foot so it
   meets the band below as a horizon rather than a cut edge. The source is a
   cell of a contact sheet, so it is soft above about 1400px — a full-size
   original dropped in at the same path is the only fix for that. */
.hero-art { position: absolute; inset: 0 0 0 30%; }
.hero-art img { object-position: 60% 42%; }
.hero-art img, .hero-art svg { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The artwork dissolves into the page rather than sitting in a box, which is
   what makes the sample read as one surface instead of a hero with a picture. */
.hero-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(232, 241, 252, 0) 62%, rgba(232, 241, 252, .55) 88%, var(--sky-2) 100%),
    linear-gradient(90deg, var(--sky-2) 0%, var(--sky-2) 8%, rgba(232, 241, 252, .82) 24%, rgba(232, 241, 252, 0) 46%);
}
.hero-in { position: relative; padding: 96px 0 46px; min-height: 460px; }
.hero-copy { max-width: 600px; }
.hero-copy .lede { margin-top: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.pillar-band { background: #fff; border-bottom: 1px solid var(--line-soft); }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 44px 0; }
.pillar { display: grid; justify-items: center; text-align: center; gap: 12px; }
.pillar svg { width: 38px; height: 38px; color: var(--blue); }
.pillar span { font-size: 15px; font-weight: 600; color: var(--navy); }

/* ── Sections ──────────────────────────────────────────────── */
.section { padding: 84px 0; }
.section.tinted { background: var(--tint); }
.section.pale { background: linear-gradient(180deg, #FFFFFF 0%, var(--tint) 100%); }
.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { margin-top: 18px; }
.section-head.centered p { margin-left: auto; margin-right: auto; }
.split { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 58px; align-items: center; }
/* Alternating sides down the page, so four picture sections in a row read as a
   rhythm rather than as the same section four times. */
.split.flip { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.split.flip > :first-child { order: 2; }

/* ── Cards ─────────────────────────────────────────────────── */
.cards { display: grid; gap: 22px; }
.cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 27px 25px; box-shadow: var(--shadow-sm); transition: box-shadow .16s, transform .16s;
}
a.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 15px; color: var(--body); }
.tile {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue); margin-bottom: 18px;
}
.tile svg { width: 23px; height: 23px; }
.tile.green { background: #E7F7ED; color: var(--green); }
.tile.amber { background: #FEF3E2; color: var(--amber); }
.tile.red { background: #FDECEC; color: var(--red); }

.link-more { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-weight: 600; font-size: 15px; margin-top: 24px; }
.link-more:hover { gap: 12px; transition: gap .15s; }

/* ── Numbered steps ────────────────────────────────────────── */
.steps { display: grid; gap: 18px; }
.step { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 17px; align-items: start; }
.step b {
  width: 38px; height: 38px; border-radius: 50%; background: var(--blue); color: #fff;
  display: grid; place-items: center; font-size: 15px; font-weight: 700;
}
.step h3 { font-size: 17px; }
.step p { font-size: 15px; color: var(--body); margin-top: 4px; }

/* ── Product artwork ───────────────────────────────────────── */
.shot {
  margin: 0; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); background: #fff;
}
.shot img { display: block; width: 100%; height: auto; }

/* ── The full-bleed landscape band ─────────────────────────── */
.band { position: relative; background: var(--navy-deep); overflow: hidden; }
.band-art { position: absolute; inset: 0; }
.band-art img, .band-art svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.band-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7, 21, 40, .74) 0%, rgba(7, 21, 40, .34) 55%, rgba(7, 21, 40, .58) 100%);
}
.band-in { position: relative; padding: 96px 0; color: #fff; }
.band-in h2 { color: #fff; }
.band-in .kicker { color: #8FBEF7; }
.band-in p { margin-top: 16px; color: #D3E1F1; font-size: 18px; max-width: 56ch; }
.band-in .btn { margin-top: 30px; }

/* The footer used to live here too. It is footer.css now, shared with the
   landing page — dark, four link columns, and the same on every page. */

/* ── Pricing ───────────────────────────────────────────────── */
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.tier {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; height: 100%;
}
/* One tier carries the emphasis. Lifting all four would be lifting none. */
.tier.featured { border-color: var(--blue); box-shadow: var(--shadow); position: relative; }
.tier.featured::before {
  content: "Most chosen"; position: absolute; top: -12px; left: 24px;
  background: var(--blue); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; border-radius: 20px;
}
.tier-name { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-bottom: 11px; }
.tier h3 { font-size: 22px; margin-bottom: 11px; }
.tier .why { font-size: 14.5px; color: var(--body); min-height: 88px; }
.tier-price { margin: 22px 0 5px; display: flex; align-items: baseline; gap: 8px; }
.tier-price b { font-size: 40px; font-weight: 800; letter-spacing: -0.035em; }
.tier-price span { font-size: 14.5px; color: var(--body); }
.tier-scope { font-size: 14px; font-weight: 600; margin-bottom: 22px; }
.tier .btn { width: 100%; justify-content: center; }
.tier-includes {
  margin-top: 24px; padding-top: 19px; border-top: 1px solid var(--line-soft);
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #8496AB;
}
.tier ul { margin-top: 14px; display: grid; gap: 10px; }
.tier li { font-size: 14px; color: var(--body); display: grid; grid-template-columns: 17px 1fr; gap: 10px; }
.tier li::before { content: "✓"; color: var(--green); font-weight: 700; }

.addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 24px; }
.addon { background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.addon-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 11px; }
.addon-head h3 { font-size: 19px; }
.addon-head b { font-size: 21px; font-weight: 800; color: var(--blue); margin-left: auto; }
.addon-head em { font-style: normal; font-size: 13px; color: var(--body); width: 100%; }
.addon p { font-size: 15px; color: var(--body); }

.tbl-frame { border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; box-shadow: var(--shadow-sm); background: #fff; }
.cmp { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; text-align: center; }
.cmp thead th {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8496AB;
  font-weight: 700; border-bottom: 1px solid var(--line); background: var(--tint);
}
.cmp th:first-child, .cmp td:first-child { text-align: left; font-weight: 600; color: var(--navy); }
.cmp tr:last-child td { border-bottom: none; }
.cmp .yes { color: var(--green); font-weight: 700; }
.cmp .no { color: #BCC9D8; }

.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.principle b { display: block; font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--blue); margin-bottom: 13px; }
.principle h3 { margin-bottom: 10px; }
.principle p { font-size: 15px; color: var(--body); }
.fineprint { margin-top: 28px; font-size: 13.5px; color: var(--body); text-align: center; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1080px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .split, .split.flip { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  /* On one column the picture follows its words, whichever side it was on. */
  .split.flip > :first-child { order: 0; }
  .cards.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Sign in moves into the panel; the demo button is the one thing the bar
     keeps, because it is what the bar is for. */
  /* The landscape moves behind the words rather than beside them, and the wash
     turns vertical so the headline keeps its contrast. */
  .hero-art { inset: 0; opacity: .5; }
  .hero-art::after { background: linear-gradient(180deg, rgba(251, 253, 255, .88) 0%, rgba(232, 241, 252, .72) 100%); }
}
@media (max-width: 720px) {
  .cards.c3, .cards.c2, .cards.c4, .tiers, .addons, .principles, .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillars { gap: 26px; padding: 34px 0 42px; }
  .pillar { grid-template-columns: 38px 1fr; justify-items: start; text-align: left; align-items: center; }
  .tier .why { min-height: 0; }
  .section { padding: 58px 0; }
  .hero-in { padding: 56px 0 20px; }
}

/* ── Blocks the generated pages add ────────────────────────── */

/* Six steps in one column runs long. Two columns keeps a process readable
   without turning each step into a card that claims to stand alone. */
.steps-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; }
@media (max-width: 820px) { .steps-wide { grid-template-columns: minmax(0, 1fr); } }

/* Before and after. The color is on the marks, not the panels: two tinted
   blocks side by side would say the left one is an error rather than a past. */
.vs {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; box-shadow: var(--shadow-sm);
}
.vs h3 { margin-bottom: 18px; }
.vs ul { display: grid; gap: 12px; }
.vs li { font-size: 15px; color: var(--body); display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start; }
.vs li::before { font-weight: 700; }
.vs.bad { border-top: 3px solid var(--red); }
.vs.bad li::before { content: "\00d7"; color: var(--red); }
.vs.good { border-top: 3px solid var(--green); }
.vs.good li::before { content: "\2713"; color: var(--green); }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px; box-shadow: var(--shadow-sm); text-align: center;
}
.stat b { display: block; font-size: 42px; font-weight: 800; letter-spacing: -0.04em; color: var(--blue); }
.stat span { font-size: 14.5px; color: var(--body); }
@media (max-width: 820px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .stats { grid-template-columns: minmax(0, 1fr); } }

/* Risk, in a table cell. Same vocabulary the product uses. */
.pill { display: inline-block; padding: 3px 11px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.pill.high { background: #FDECEC; color: var(--red); }
.pill.med { background: #FEF3E2; color: #B26A05; }
.pill.low { background: #E7F7ED; color: var(--green); }

/* The icon glyphs the generated cards use, where the home page draws its own. */
.tile b { font-size: 20px; font-style: normal; line-height: 1; }

/* ── The verdict card ──────────────────────────────────────── */
/* One real reading, on a page otherwise full of illustrative figures. It is
   marked as real or as an example and never ambiguously between the two. */
.verdict-band { background: linear-gradient(180deg, var(--tint) 0%, #FFFFFF 100%); }
.verdict {
  max-width: 780px; margin: 0 auto; background: #fff;
  border: 1px solid var(--line); border-left: 4px solid var(--slate, #8496AB);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 32px;
}
.verdict[data-status="off_road"] { border-left-color: var(--red); }
.verdict[data-status="at_risk"] { border-left-color: var(--amber); }
.verdict[data-status="on_road"] { border-left-color: var(--green); }
.verdict[data-status="unknown"] { border-left-color: #8496AB; }

.verdict-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 18px; }
.verdict-ref { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.verdict-tier { font-size: 14px; color: var(--body); }
.verdict-status { margin-left: auto; display: flex; align-items: center; gap: 9px; font-size: 15px; }
.verdict-status .dot { width: 11px; height: 11px; border-radius: 50%; background: #8496AB; }
.verdict[data-status="off_road"] .dot { background: var(--red); }
.verdict[data-status="at_risk"] .dot { background: var(--amber); }
.verdict[data-status="on_road"] .dot { background: var(--green); }

.verdict-score { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.verdict-score b { display: block; font-size: 20px; font-weight: 700; }
.verdict-score span { font-size: 14.5px; color: var(--body); }

.verdict-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.verdict-counts div { text-align: center; background: var(--tint); border-radius: 10px; padding: 14px 8px; }
.verdict-counts b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.verdict-counts span { font-size: 12.5px; color: var(--body); }

.verdict-prov { margin-top: 20px; font-size: 13.5px; color: var(--body); text-align: center; }
/* A real reading earns the accent; an example is not allowed to look like one. */
.verdict[data-live="yes"] .verdict-prov { color: var(--blue); font-weight: 600; }
@media (max-width: 560px) { .verdict-counts { grid-template-columns: minmax(0, 1fr); } }

/* ── Vendors ───────────────────────────────────────────────── */
.vendors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.vendor {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.vendor h3 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #8496AB; margin-bottom: 14px;
}
.marks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.marks span { font-size: 15px; font-weight: 600; color: var(--navy); }
/* A mark is shown at a size that does not compete with the page's own name,
   and never recoloured — the vendor's file is the vendor's file. */
.marks img { height: 22px; width: auto; display: block; }
@media (max-width: 900px) { .vendors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .vendors { grid-template-columns: minmax(0, 1fr); } }

/* ── The rainbow call to action ────────────────────────────── */
/*
   The animated gradient CTA, in this site's own CSS.
   The reference implementation is a React component built from Tailwind
   utilities; these pages are static HTML and this project has no Tailwind, so
   the effect is rebuilt rather than the component installed. Same construction:
   two stacked backgrounds, one clipped to the padding box and one to the border
   box, so the border is the moving gradient and the face stays solid.
*/
/*
   The sweep, in SecureRoad's colors.

   Not a rainbow, and the reason is not taste. Green, amber and red mean things
   on this site: a control that passes, one that needs attention, one that
   fails. Spending them as decoration on a button teaches a reader that the
   colors are ornament, and then a red pill in a table has to argue for its
   own meaning. The sweep stays inside the blues, which mean nothing yet — the
   brand blue, the sky and cyan out of the road artwork, and one indigo to give
   the loop somewhere to travel.
*/
:root {
  --color-1: 216 79% 51%;   /* #1F6FE5, the primary */
  --color-2: 232 75% 63%;   /* indigo, the far end of the sweep */
  --color-3: 199 100% 55%;  /* #1BB8FF, the lane line in the road art */
  --color-4: 193 100% 57%;  /* #24D0FF, its highlight */
  --color-5: 208 89% 64%;   /* sky, between the two */
  --rainbow: linear-gradient(90deg,
    hsl(var(--color-1)), hsl(var(--color-5)), hsl(var(--color-3)),
    hsl(var(--color-4)), hsl(var(--color-2)));
  --rainbow-speed: 2.6s;
}

.btn-rainbow {
  position: relative;
  color: #fff;
  border: 2px solid transparent;
  border-radius: 12px;
  background-image: linear-gradient(var(--blue), var(--blue)), var(--rainbow);
  background-size: 200%;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 6px 18px rgba(31, 111, 229, .28);
  animation: rainbow var(--rainbow-speed) infinite linear;
}
.btn-rainbow:hover { background-image: linear-gradient(var(--blue-dark), var(--blue-dark)), var(--rainbow); }

/* The glow sits wholly below the button rather than behind it, so it needs no
   negative z-index — which would otherwise disappear inside the nav, whose
   sticky positioning makes a stacking context of its own. */
.btn-rainbow::before {
  content: "";
  position: absolute; left: 50%; bottom: -20%; transform: translateX(-50%);
  width: 60%; height: 20%;
  background-image: var(--rainbow);
  background-size: 200%;
  filter: blur(0.8rem);
  animation: rainbow var(--rainbow-speed) infinite linear;
}

@keyframes rainbow {
  from { background-position: 0%; }
  to   { background-position: 200%; }
}

/* A CTA that never stops moving is one some people cannot read past. The
   gradient stays; only the movement stops. */
@media (prefers-reduced-motion: reduce) {
  .btn-rainbow, .btn-rainbow::before { animation: none; }
  .btn-rainbow { background-position: 40%; }
}