/* ==========================================================================
   RoviTracker — Design System
   Colors sampled directly from the RoviTracker logo:
   Orange #F47920 · Black #0A0A0A · Warm Gray #4D4D4F
   Typeface: Titillium (self-hosted, assets/fonts/)
   ========================================================================== */

@font-face{
  font-family:"Titillium"; src:url("../assets/fonts/Titillium-Thin.otf") format("opentype");
  font-weight:100; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Titillium"; src:url("../assets/fonts/Titillium-ThinItalic.otf") format("opentype");
  font-weight:100; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Titillium"; src:url("../assets/fonts/Titillium-LightUpright.otf") format("opentype");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Titillium"; src:url("../assets/fonts/Titillium-LightItalic.otf") format("opentype");
  font-weight:300; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Titillium"; src:url("../assets/fonts/Titillium-Regular.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Titillium"; src:url("../assets/fonts/Titillium-RegularItalic.otf") format("opentype");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  /* Semibold is the heaviest cut available — registered across the whole
     600–900 range so any bold/800-weight rule in this file resolves to it
     instead of the browser faking a heavier weight. */
  font-family:"Titillium"; src:url("../assets/fonts/Titillium-Semibold.otf") format("opentype");
  font-weight:600 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Titillium"; src:url("../assets/fonts/Titillium-SemiboldItalic.otf") format("opentype");
  font-weight:600 900; font-style:italic; font-display:swap;
}

:root{
  --orange: #F47920;
  --orange-dark: #D9660E;
  --orange-light: #FFEDDD;
  --black: #0A0A0A;
  --charcoal: #1A1A19;
  --charcoal-2: #232320;
  --gray-900: #262623;
  --gray-700: #4D4D4F;
  --gray-500: #7A7A78;
  --gray-300: #D8D6D0;
  --gray-100: #F5F3EE;
  --white: #FFFFFF;
  /* Matches the two-tone blue/orange icon scheme used by RoviTracker's own
     quote-flow app (discover2.rovitracker.com), kept distinct from the
     marketing site's orange/black palette since these icons mirror that app. */
  --icon-blue: #1E40C4;
  --icon-orange: #F47920;
  /* Subtle secondary accent — sampled from the blue network-pattern hero
     banners on the current live site (rovitracker.com), used sparingly
     alongside the orange/black identity, never in place of it. */
  --blue: #1B7FCC;
  --blue-dark: #0F4670;
  --blue-light: #E8F2FB;

  --font: "Titillium", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px -12px rgba(10,10,10,0.25);
  --shadow-sm: 0 4px 14px -6px rgba(10,10,10,0.18);
  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--gray-900);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.15; font-weight:800; letter-spacing:-0.02em; }
p{ margin:0 0 1em; color: var(--gray-700); }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

section{ padding: 88px 0; }
@media (max-width: 780px){ section{ padding: 56px 0; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color: var(--orange-dark);
  margin-bottom: 14px;
}
.eyebrow::before{
  content:""; width:22px; height:2px; background:var(--orange); display:inline-block;
}

h2.section-title{ font-size: clamp(28px, 3.4vw, 42px); }
.section-sub{ max-width: 640px; font-size: 18px; color: var(--gray-700); }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 26px; border-radius: var(--radius-sm); font-weight:700; font-size:15px;
  border: 2px solid transparent; cursor:pointer; transition: all .15s ease;
  white-space: nowrap;
}
.btn-primary{ background: var(--orange); color: var(--white); border-color: var(--orange); }
.btn-primary:hover{ background: var(--orange-dark); border-color: var(--orange-dark); transform: translateY(-1px); }
.btn-dark{ background: var(--black); color:var(--white); border-color: var(--black); }
.btn-dark:hover{ background:#000; transform: translateY(-1px); }
.btn-outline{ background: transparent; color: var(--black); border-color: var(--gray-300); }
.btn-outline:hover{ border-color: var(--black); }
.btn-outline-light{ background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); }
.btn-outline-light:hover{ border-color: var(--white); }
.btn-lg{ padding: 16px 32px; font-size:16px; }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------------- Header ---------------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gray-300);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; gap: 24px; }
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand img{ height: 52px; width:auto; }
.nav-links{ display:flex; align-items:center; gap: 30px; }
.nav-links a{
  font-weight:600; font-size:14.5px; color: var(--gray-900);
  padding: 8px 0; border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a.active{ color: var(--orange-dark); border-color: var(--orange); }
.nav-cta{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.nav-cta .btn{ padding: 7px 13px; font-size: 12.5px; border-width: 1px; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--black); margin:5px 0; }

@media (max-width: 960px){
  .nav-links{
    position:fixed; top:66px; left:0; right:0;
    /* Explicit vh-based height, not bottom:0 (was part of an `inset`
       shorthand). site-header's backdrop-filter makes it the
       containing block for this fixed element (per spec, backdrop-
       filter/filter/transform do that), so `bottom:0` was resolving
       against site-header's own ~81px-tall box instead of the
       viewport — collapsing this panel to a ~15px sliver. Its link
       content still rendered below that at full height (visible
       overflow), just with no background behind it once it ran past
       the panel's real box, letting the page underneath show through.
       vh is always relative to the true viewport regardless of which
       element ends up as the containing block, so this is immune to
       that. */
    height: calc(100vh - 66px);
    background: var(--white); z-index: 150;
    flex-direction:column; align-items:flex-start; gap:0; padding: 10px 24px 24px;
    /* Fading via opacity made the solid white panel itself briefly
       translucent mid-transition, letting whatever's behind it (e.g. a
       dark hero section) bleed through the menu text. visibility keeps
       the background always fully opaque while it's on screen — only
       the slide (transform) animates — and is delayed on the way out
       so the slide-up still gets to finish before the panel vanishes. */
    transform: translateY(-8px); visibility:hidden; pointer-events:none;
    transition: transform .18s ease, visibility 0s linear .18s;
    border-top: 1px solid var(--gray-300);
    overflow-y:auto;
  }
  .nav-links.open{
    transform:none; visibility:visible; pointer-events:auto;
    transition: transform .18s ease, visibility 0s linear 0s;
  }
  .nav-links a{ width:100%; padding: 14px 0; border-bottom: 1px solid var(--gray-100); }
  .nav-toggle{ display:block; }
}

/* ---------------- Hero ---------------- */
.hero{
  position: relative; overflow:hidden;
  background: var(--black);
  color: var(--white);
  padding: 110px 0 100px;
}
.hero .container{ position:relative; z-index:2; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }
.hero h1{ font-size: clamp(34px, 5vw, 58px); color:var(--white); }
.hero h1 em{ font-style:normal; color: var(--orange); }
.hero p.lede{ font-size: 19px; color: rgba(255,255,255,.75); max-width: 520px; }
.hero-stats{ display:flex; gap:34px; margin-top: 44px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-size: 26px; color:var(--orange); }
.hero-stat span{ font-size: 13px; color: rgba(255,255,255,.6); }

.pattern-canvas{ width:100%; aspect-ratio: 1/1; }

/* dotted pattern backdrop — mostly orange, with an occasional blue dot
   (subtle nod to the network-dot hero art on the current live site) */
.dot-field{
  position:absolute; inset:0; z-index:1; opacity:.5;
  background-image:
    radial-gradient(rgba(244,121,32,.35) 1.6px, transparent 1.6px),
    radial-gradient(rgba(27,127,204,.3) 1.6px, transparent 1.6px);
  background-size: 26px 26px, 78px 78px;
  background-position: 0 0, 13px 39px;
  mask-image: radial-gradient(circle at 75% 40%, black, transparent 65%);
}

/* ---------------- Video section ---------------- */
.video-section{ text-align:center; }
.video-frame{
  max-width: 860px; margin: 40px auto 0; border-radius: var(--radius);
  overflow:hidden; border: 1px solid var(--gray-300); box-shadow: var(--shadow);
  background: var(--black);
}
.video-frame .ratio{ position:relative; width:100%; padding-top: 56.25%; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------------- Pillars ---------------- */
.pillars{ background: var(--gray-100); }
.pillar-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 48px; }
@media (max-width: 980px){ .pillar-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .pillar-grid{ grid-template-columns: 1fr; } }
.pillar-grid-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px){ .pillar-grid-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .pillar-grid-3{ grid-template-columns: 1fr; } }
.pillar-card{
  background: var(--white); border-radius: var(--radius); padding: 30px 26px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--gray-300);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pillar-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.pillar-icon{
  width:52px; height:52px; border-radius: 12px; background: var(--orange-light);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.pillar-icon svg{ width:26px; height:26px; }
.pillar-card h3{ font-size:19px; margin-bottom:8px; }
.pillar-card p{ font-size: 15px; margin-bottom:0; }

/* ---------------- Pattern / data section ---------------- */
.pattern-section{
  background: var(--black); color: var(--white); position:relative; overflow:hidden;
}
.pattern-section .dot-field{ opacity:.35; mask-image: radial-gradient(circle at 20% 30%, black, transparent 60%); }
.pattern-section::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:-80px; bottom:-80px; width:280px; height:280px; border-radius:50%;
  background: radial-gradient(circle, rgba(27,127,204,.16), transparent 70%);
}
.pattern-flex{ display:grid; grid-template-columns: .95fr 1.05fr; gap:60px; align-items:center; position:relative; z-index:2;}
@media (max-width: 900px){ .pattern-flex{ grid-template-columns:1fr; } }
.pattern-section h2{ color:var(--white); font-size: clamp(28px,3.6vw,40px); }
.pattern-section p{ color: rgba(255,255,255,.72); font-size:17.5px; }
.data-points{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.data-chip{
  display:flex; align-items:center; gap:10px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 10px 16px;
  font-size:14px; font-weight:600; color: rgba(255,255,255,.9);
}
.data-chip .dot{ width:7px; height:7px; border-radius:50%; background: var(--orange); flex-shrink:0; }
.data-chip:nth-child(3n) .dot{ background: var(--blue); }

/* ---------------- Stats strip ---------------- */
.stats-strip{ background: var(--orange); color:var(--white); padding: 56px 0; }
.stats-row{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; text-align:center; }
.stats-row div{ flex:1; min-width:150px; }
.stats-row b{ display:block; font-size: 34px; font-weight:800; }
.stats-row span{ font-size:14px; opacity:.9; }

/* ---------------- Cards / grids ---------------- */
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:44px; }
@media (max-width: 900px){ .grid-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .grid-3{ grid-template-columns: 1fr; } }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; margin-top:44px; }
@media (max-width: 700px){ .grid-2{ grid-template-columns: 1fr; } }

.card{
  background:var(--white); border:1px solid var(--gray-300); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm);
}
.card h3{ font-size:19px; }
.card-icon{
  width:46px; height:46px; border-radius:10px; background: var(--black);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.card-icon svg{ width:24px; height:24px; stroke: var(--orange); }

/* ---------------- Industries ---------------- */
.industry-card{
  border-radius: var(--radius); padding: 30px; background: var(--gray-100);
  border: 1px solid var(--gray-300); height:100%;
}
.industry-card h3{ font-size:20px; }

/* ---------------- Testimonials ---------------- */
.testi-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:22px; margin-top:44px; }
@media (max-width: 800px){ .testi-grid{ grid-template-columns:1fr; } }
.testi-card{
  background: var(--gray-100); border-radius: var(--radius); padding: 28px;
  border-left: 4px solid var(--orange);
}
.testi-card p{ font-size:16px; color: var(--gray-900); font-style: italic; }
.testi-name{ font-weight:800; font-size:14.5px; }
.testi-role{ font-size:13px; color: var(--gray-500); }

/* ---------------- Feature rows (platform page) ---------------- */
.feature-row{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; }
.feature-row.reverse .feature-visual{ order:2; }
@media (max-width: 860px){
  .feature-row{ grid-template-columns:1fr; }
  .feature-row.reverse .feature-visual{ order:0; }
}
.feature-row + .feature-row{ margin-top: 90px; }
.feature-visual{
  background: var(--gray-100); border-radius: var(--radius); padding: 8px;
  border: 1px solid var(--gray-300);
}
.feature-visual img{ border-radius: 10px; width:100%; }
.tag-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.tag-pill{
  font-size:13px; font-weight:700; padding:8px 14px; border-radius:999px;
  background: var(--orange-light); color: var(--orange-dark);
}

/* ---------------- Quote Wizard ---------------- */
.wizard{
  background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius);
  box-shadow: var(--shadow); max-width: 880px; margin: 0 auto; overflow:hidden;
}
.wizard-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 20px 28px; border-bottom: 1px solid var(--gray-300);
}
.wizard-step-label{ font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--gray-500); }
.wizard-progress{ flex:1; margin: 0 24px; height:6px; border-radius:999px; background: var(--gray-100); overflow:hidden; }
.wizard-progress-bar{ height:100%; background: var(--orange); border-radius:999px; transition: width .25s ease; width:20%; }
.wizard-body{ padding: 36px 28px 8px; min-height: 380px; }
.wizard-body h3{ font-size: clamp(20px,2.6vw,26px); margin-bottom:8px; }
.wizard-body .wizard-sub{ color:var(--gray-700); margin-bottom:26px; font-size:15px; }
.wizard-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
@media (max-width: 700px){ .wizard-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .wizard-grid{ grid-template-columns: 1fr; } }
.wizard-option{
  border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); background: var(--white);
  padding: 22px 14px; text-align:center; cursor:pointer; transition: all .12s ease;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.wizard-option:hover{ border-color: var(--orange); }
.wizard-option.selected{ border-color: var(--orange); background: var(--orange-light); box-shadow: 0 0 0 1px var(--orange) inset; }
.wizard-option > svg{ width:52px; height:52px; }
.wizard-option .wo-primary{ fill: var(--icon-blue); }
.wizard-option .wo-secondary{ fill: var(--icon-orange); }
/* Two-icon "combo" cards (e.g. Equipment Rental) place both icons side by
   side, matching the app's own layout — not stacked/overlapping. */
.icon-stack{ display:flex; align-items:flex-end; gap:2px; }
.icon-stack > svg{ width:34px; height:34px; overflow:visible; }
.wizard-option span{ font-size:14px; font-weight:700; color: var(--gray-900); }
.wizard-option-lg{ padding: 26px 14px; }
.wizard-option-lg span{ font-size:19px; }
.wizard-grid-narrow{ max-width: 560px; }
.wizard-form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; max-width:620px; }
@media (max-width: 560px){ .wizard-form-grid{ grid-template-columns: 1fr; } }
.wizard-radio-row{ display:flex; gap:20px; flex-wrap:wrap; margin-top:8px; }
.wizard-radio-row label{ display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; cursor:pointer; }
.wizard-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding: 20px 28px; border-top: 1px solid var(--gray-300); background: var(--gray-100);
}
.wizard-summary{ padding: 8px 28px 28px; }
.wizard-summary-row{ display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--gray-100); font-size:14.5px; }
.wizard-summary-row:first-child{ border-top:none; }
.wizard-summary-row b{ color: var(--gray-900); }
.wizard-done{ text-align:center; padding: 60px 28px; }
.wizard-done svg{ width:56px; height:56px; stroke: var(--orange); margin-bottom:18px; }

/* ---------------- Pricing ---------------- */
.pricing-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; align-items:stretch; }
@media (max-width: 900px){ .pricing-grid{ grid-template-columns: 1fr; max-width: 420px; margin-left:auto; margin-right:auto; } }
.pricing-card{
  background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius);
  padding: 34px 28px; display:flex; flex-direction:column; box-shadow: var(--shadow-sm);
}
.pricing-card.featured{
  border-color: var(--orange); box-shadow: var(--shadow); transform: translateY(-10px);
  position:relative;
}
@media (max-width: 900px){ .pricing-card.featured{ transform:none; } }
.pricing-card.featured::before{
  content:"Most Popular"; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background: var(--orange); color:var(--white); font-size:11.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; padding:5px 14px; border-radius: var(--radius-sm);
}
.pricing-tier{ font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color: var(--orange-dark); margin-bottom:10px; }
.pricing-price{ display:flex; align-items:baseline; gap:6px; margin-bottom:4px; }
.pricing-price b{ font-size:40px; font-weight:800; color: var(--black); }
.pricing-price span{ font-size:14px; color: var(--gray-500); }
.pricing-note{ font-size:13.5px; color: var(--gray-500); margin-bottom:22px; }
.pricing-features{ margin: 0 0 26px; flex-grow:1; }
.pricing-features li{
  display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color: var(--gray-700);
  padding: 8px 0; border-top: 1px solid var(--gray-100);
}
.pricing-features li:first-child{ border-top:none; }
.pricing-features li strong{ color: var(--gray-900); }
.pricing-features svg{ width:16px; height:16px; flex-shrink:0; margin-top:3px; stroke: var(--orange); }
.pricing-card .btn{ width:100%; }

/* ---------------- Metrics grid (icons of tracked data) ---------------- */
.metric-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap:16px; margin-top:44px; }
@media (max-width: 900px){ .metric-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px){ .metric-grid{ grid-template-columns: repeat(2,1fr); } }
.metric-tile{
  text-align:center; padding: 26px 14px; border-radius: var(--radius);
  background: var(--white); border:1px solid var(--gray-300);
}
.metric-tile img{ width:30px; height:30px; object-fit:contain; margin: 0 auto 12px; display:block; opacity:.6; }
.metric-tile span{
  font-weight:700; font-size:12px; display:block; color: var(--gray-500);
  text-transform:uppercase; letter-spacing:.04em;
}

/* ---------------- CTA band ---------------- */
.cta-band{
  background: var(--blue);
  color:var(--white); border-radius: 24px;
  padding: 56px 48px; display:flex; align-items:center; justify-content:space-between;
  gap: 24px; flex-wrap:wrap; position:relative; overflow:hidden;
}
.cta-band h2{ color:var(--white); font-size: clamp(24px,3vw,32px); margin-bottom:8px; }
.cta-band p{ color: rgba(255,255,255,.75); margin-bottom:0; }

/* ---------------- FAQ ---------------- */
.faq-item{ border-bottom: 1px solid var(--gray-300); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding: 22px 0; font-size:17px; font-weight:700; color:var(--black);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-q .plus{ font-size:22px; color: var(--orange); flex-shrink:0; transition: transform .15s ease; }
.faq-item.open .plus{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .2s ease; }
.faq-item.open .faq-a{ max-height: 400px; }
.faq-a p{ padding-bottom: 22px; margin:0; }

/* ---------------- Contact ---------------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:flex-start; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; } }
.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:6px; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding: 13px 14px; border-radius: var(--radius-sm); border: 1px solid var(--gray-300);
  font-family: var(--font); font-size:15px; background: var(--white);
}
.form-field input:focus, .form-field textarea:focus{ outline:2px solid var(--orange); outline-offset:1px; }
.form-status{ margin:14px 0 0; font-size:14px; font-weight:600; min-height:1.4em; }
.form-status-success{ color:#1E7B3C; }
.form-status-error{ color:#B3261E; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 520px){ .form-row{ grid-template-columns:1fr; } }
.form-check{ display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; font-size:14px; }
.form-check input[type="checkbox"]{ width:16px; height:16px; margin-top:2px; flex-shrink:0; accent-color:var(--orange); }
.form-check label{ font-weight:400; }
.form-check a{ color:var(--orange); font-weight:600; }
.contact-info-card{
  background: var(--blue); color:var(--white); border-radius: var(--radius); padding:32px;
}
.contact-info-card h3{ color:var(--white); }
.contact-row a{ color: var(--orange); font-weight:700; }
.contact-row{ display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.contact-row svg{ width:20px; height:20px; stroke: var(--orange); flex-shrink:0; margin-top:2px; }

/* ---------------- Footer ---------------- */
.site-footer{ background: var(--black); color: rgba(255,255,255,.65); padding: 64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-brand{ display:flex; align-items:baseline; gap:2px; font-weight:800; font-size:22px; margin-bottom:14px; }
.footer-brand .fb-rovi{ color: var(--orange); }
.footer-brand .fb-tracker{ color: var(--white); }
.footer-tagline{ font-size:14px; max-width:260px; }
.footer-col h4{ color:var(--white); font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; }
.footer-col li{ margin-bottom:10px; font-size:14.5px; }
.footer-col a:hover{ color: var(--orange); }
.footer-bottom{
  margin-top: 48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px;
}
.footer-bottom-links{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-bottom-links a:hover{ color: var(--orange); }

/* ---------------- Stat highlight (e.g. recovery rate) ---------------- */
.stat-highlight{ text-align:center; margin: 40px auto 0; }
.stat-highlight .num{ font-size: 56px; font-weight:800; color: var(--orange); line-height:1; }
.stat-highlight .label{ font-size:16px; font-weight:700; color: var(--gray-900); margin-top:8px; }
.stat-highlight .footnote{ font-size:12.5px; color: var(--gray-500); max-width:540px; margin: 10px auto 0; }

.stat-highlight-inline{ display:flex; align-items:baseline; gap:14px; margin-top:20px; flex-wrap:wrap; }
.stat-highlight-inline .num{ font-size:34px; font-weight:800; color: var(--orange); line-height:1; }
.stat-highlight-inline .label{ font-size:14.5px; font-weight:700; color: var(--gray-900); }
.stat-highlight-inline .footnote{ flex-basis:100%; font-size:12px; color: var(--gray-500); margin-top:2px; }

/* ---------------- Blog ---------------- */
.blog-content{ max-width: 720px; margin: 0 auto; }
.blog-content h2{ font-size: 26px; margin-top: 1.8em; margin-bottom:.6em; }
.blog-content h2:first-child{ margin-top:0; }
.blog-content h3{ font-size: 20px; margin-top: 1.6em; margin-bottom:.5em; font-weight:800; }
.blog-content p{ margin-bottom: 1.2em; font-size:16.5px; }
.blog-content ul, .blog-content ol{ margin: 0 0 1.2em 1.4em; }
.blog-content li{ margin-bottom:.5em; font-size:16.5px; color:var(--gray-700); }
.blog-content img{ width:100%; border-radius: var(--radius); margin: 1.6em 0; display:block; }
.blog-content a{ color: var(--orange-dark); font-weight:600; text-decoration:underline; }
.blog-content strong, .blog-content b{ color: var(--gray-900); }
.blog-meta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:14px; color: rgba(255,255,255,.65); margin-top:6px; }
.blog-meta .badge{ background: var(--orange); }

.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; margin-top:44px; }
@media (max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .blog-grid{ grid-template-columns:1fr; } }
.blog-card{
  display:flex; flex-direction:column; border:1px solid var(--gray-300); border-radius:var(--radius);
  overflow:hidden; background:var(--white); transition:transform .15s ease, box-shadow .15s ease;
}
.blog-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.blog-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:var(--gray-100); }
.blog-card-body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex-grow:1; }
.blog-card-meta{ font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-dark); margin-bottom:10px; }
.blog-card h2, .blog-card h3{ font-size:18px; margin-bottom:10px; line-height:1.3; }
.blog-card p{ font-size:14.5px; color:var(--gray-700); margin-bottom:16px; flex-grow:1; }
.blog-card .read-more{ font-size:14px; font-weight:700; color:var(--orange-dark); }
.blog-card a.card-link{ color:inherit; }
.blog-card a.card-link:hover h2, .blog-card a.card-link:hover h3{ color: var(--orange-dark); }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top:56px; flex-wrap:wrap; }
.pagination a, .pagination span{
  display:flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 6px;
  border-radius:var(--radius-sm); border:1px solid var(--gray-300); font-weight:700; font-size:14px;
}
.pagination a:hover{ border-color:var(--orange); }
.pagination .active{ background:var(--black); color:var(--white); border-color:var(--black); }

/* ---------------- Legal pages ---------------- */
.legal-content{ max-width: 760px; margin: 0 auto; }
.legal-content h2{ font-size: 22px; margin-top: 2.2em; }
.legal-content h2:first-child{ margin-top: 0; }
.legal-content h3{ font-size: 16px; margin-top: 1.6em; letter-spacing:.02em; }
.legal-content p{ margin-bottom: 1.1em; }
.legal-content .legal-updated{ color: var(--gray-500); font-size:14px; margin-bottom:2.5em; }

/* misc */
.badge{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; background: var(--black); color:var(--white);
  padding:6px 12px; border-radius:999px;
}
.mt-0{ margin-top:0 !important; }
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------------- Risk Map: homepage hero preview ---------------- */
.risk-map-preview-card{
  background: var(--gray-100); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 18px 16px; overflow:hidden;
}
.risk-map-preview-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;
}
.risk-map-preview-label{
  font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--gray-700);
}
.risk-map-preview-demo{
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--blue-dark);
  background: var(--blue-light); padding:3px 8px; border-radius:999px; white-space:nowrap;
}
.risk-map-preview-map{
  width:100%; aspect-ratio:1/1; border-radius: var(--radius-sm); overflow:hidden;
  background: var(--gray-300); position:relative;
}
.risk-map-preview-map .leaflet-control-attribution{ font-size:9px; }
.risk-map-preview-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px;
}
.risk-map-preview-foot p{ font-size:13px; color: var(--gray-700); margin:0; }
.risk-map-preview-link{ font-weight:700; font-size:14px; color: var(--orange-dark); white-space:nowrap; }
.risk-map-preview-link:hover{ text-decoration:underline; }
.risk-map-preview-fallback{
  display:flex; align-items:center; justify-content:center; text-align:center; height:100%;
  font-size:13px; color: var(--gray-700); padding:20px;
}
/* Shared with theft-risk-map.html's own <style> block — styles Leaflet's
   own tooltip (bindTooltip) rather than a manually positioned element.
   Leaflet only fires the mouseover that triggers this on real mouse
   input, so it's naturally desktop-only with no extra touch-detection
   code needed. */
.leaflet-tooltip.risk-map-hover-tip{
  background: var(--black); color: var(--white); border:0; font-size:12.5px;
  padding:7px 11px; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}
.leaflet-tooltip.risk-map-hover-tip.leaflet-tooltip-top:before{ border-top-color: var(--black); }
.risk-map-hover-tip .hint{ display:block; font-size:10.5px; color: rgba(255,255,255,.6); margin-top:2px; }

.reveal.in{ opacity:1; transform:none; }

/* The phone number renders as an image (see roviRevealContactInfo in
   js/main.js) so it can't be read as text by a scraping bot, even one
   that executes JS. Sized in em so the same asset scales correctly
   whether it's sitting in a 14px footer link or a btn-lg button. */
.phone-img{ height:1em; width:auto; vertical-align:-0.12em; display:inline-block; }