/* =====================================================================
   High Point GPS — /lp/geotab body  (Option 1, Pain-First)
   Mobile-first (375px) → desktop. Built on the HPGPS design-system tokens.
   ===================================================================== */

:root {
  /* Brand blue (primary) */
  --brand-50:#EFF6FF; --brand-100:#DBEAFE; --brand-200:#BFDBFE; --brand-300:#93C5FD;
  --brand-400:#60A5FA; --brand-500:#1E40AF; --brand-600:#1E3A8A; --brand-700:#1E2F6F;
  --blue-500:#3B82F6; --blue-600:#2563EB; --blue-700:#1D4ED8;
  --sky-100:#E0F2FE; --indigo-500:#6366F1;

  --logo-grey-light:#9CA3AF; --logo-grey-dark:#6B7280; --logo-blue:#1E9BD7; --logo-accent:#C77F2A;

  /* Neutrals / text */
  --fg1:#111827; --fg2:#374151; --fg3:#4B5563; --fg4:#6B7280; --fg5:#9CA3AF;
  --bg-page:#F9FAFB; --bg-surface:#FFFFFF; --bg-subtle:#F3F4F6;
  --border-1:#E5E7EB; --border-2:#D1D5DB; --border-faint:#F3F4F6;

  /* Category accents */
  --cat-custom-bg:#F0FDFA; --cat-custom-fg:#0F766E; --cat-custom-ring:#99F6E4;
  --cat-geotab-bg:#ECFDF5; --cat-geotab-fg:#047857; --cat-geotab-ring:#A7F3D0;
  --cat-fleet-bg:#EFF6FF; --cat-fleet-fg:#1D4ED8; --cat-fleet-ring:#BFDBFE;

  --success:#16A34A; --success-bg:#DCFCE7; --success-ring:#BBF7D0;
  --tag-bg:#F0F9FF; --tag-fg:#0369A1;

  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --radius-sm:.25rem; --radius-md:.5rem; --radius-lg:.75rem; --radius-xl:1rem; --radius-2xl:1.5rem; --radius-full:9999px;
  --shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
  --ring-focus:0 0 0 2px rgba(29,78,216,.18);
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-sans); color:var(--fg1); background:var(--bg-surface);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
img{ max-width:100%; display:block; }

/* ---- layout ---- */
.wrap{ max-width:72rem; margin:0 auto; padding:0 1rem; }
@media (min-width:640px){ .wrap{ padding:0 1.5rem; } }
@media (min-width:1024px){ .wrap{ padding:0 2rem; } }

.section{ padding:3rem 0; }
@media (min-width:768px){ .section{ padding:4.5rem 0; } }
.section.alt{ background:var(--bg-page); border-top:1px solid var(--border-faint); border-bottom:1px solid var(--border-faint); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.375rem; border-radius:9999px;
  padding:.25rem .625rem; margin-bottom:.75rem;
  font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
}
.eyebrow.blue{ background:var(--brand-100); color:var(--blue-700); }
.eyebrow.gray{ background:var(--bg-subtle); color:var(--fg4); }
.eyebrow.green{ background:var(--cat-geotab-bg); color:var(--cat-geotab-fg); box-shadow:inset 0 0 0 1px var(--cat-geotab-ring); }

h1,h2,h3{ margin:0; letter-spacing:-.02em; color:var(--fg1); }
.sec-title{ font-size:1.5rem; font-weight:700; line-height:1.2; }
@media (min-width:768px){ .sec-title{ font-size:1.875rem; } }
.sec-lede{ margin:.75rem 0 0; font-size:1rem; color:var(--fg3); max-width:46rem; line-height:1.625; }
.sec-head{ margin-bottom:2rem; }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer; border:0;
  font-family:inherit; transition:all .15s; text-decoration:none; }
.btn-pill{ border-radius:9999px; padding:.8125rem 1.5rem; font-size:.9375rem; font-weight:600; }
.btn-fill{ background:var(--blue-700); color:#fff; box-shadow:var(--shadow-sm); }
.btn-fill:hover{ background:var(--brand-500); color:#fff; }
.btn-out{ background:#fff; color:var(--fg2); border:1px solid var(--border-2); }
.btn-out:hover{ background:var(--bg-page); color:var(--fg2); }
.btn-white{ background:#fff; color:var(--brand-600); box-shadow:var(--shadow-md); }
.btn-white:hover{ background:#fff; color:var(--brand-700); }
.btn-ghost-light{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.4); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.2); color:#fff; }
@media (max-width:639px){ .btn-block-m{ width:100%; } }

/* ===================================================================
   1. PAIN MIRROR
   =================================================================== */
.pain h2{ font-size:1.625rem; font-weight:700; line-height:1.22; max-width:34ch; }
@media (min-width:768px){ .pain h2{ font-size:2.25rem; } }
.pain .scenario{ margin:1.25rem 0 0; font-size:1.0625rem; line-height:1.65; color:var(--fg2); max-width:48rem; }
.pain .scenario b{ color:var(--fg1); font-weight:600; }
.cost-grid{ margin-top:2rem; display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--border-1); border:1px solid var(--border-1); border-radius:var(--radius-xl); overflow:hidden; }
@media (min-width:640px){ .cost-grid{ grid-template-columns:repeat(3,1fr); } }
.cost{ background:#fff; padding:1.25rem 1.25rem 1.375rem; }
.cost .num{ font-size:1.75rem; font-weight:700; color:var(--fg1); letter-spacing:-.02em; line-height:1.1; }
.cost .num.bad{ color:var(--brand-500); }
.cost .lbl{ margin-top:.375rem; font-size:.8125rem; color:var(--fg4); line-height:1.4; }
.who{ margin-top:1.25rem; font-size:.875rem; color:var(--fg4); }
.who b{ color:var(--fg2); font-weight:600; }
/* solution box under the specific pain mirror — anchor for the hero "See how it works" CTA */
#pain-solution{ scroll-margin-top:1.5rem; }
.pain-solution{ margin-top:2rem; }
.pain-solution > h3{ margin:0; font-size:1.25rem; font-weight:700; line-height:1.25; color:var(--fg1); }
.pain-solution-body{ margin-top:.875rem; font-size:1rem; line-height:1.65; color:var(--fg2); max-width:48rem; }
.pain-solution-steps{ margin:1.125rem 0 0; padding:0; list-style:none; counter-reset:step; max-width:48rem;
  display:flex; flex-direction:column; gap:.75rem; }
.pain-solution-steps li{ position:relative; padding-left:2.75rem; font-size:1rem; line-height:1.6; color:var(--fg2);
  counter-increment:step; min-height:1.75rem; display:flex; align-items:center; }
.pain-solution-steps li::before{ content:counter(step); position:absolute; left:0; top:0;
  width:1.75rem; height:1.75rem; border-radius:9999px; background:var(--blue-50,#EFF6FF); color:var(--blue-700,#1D4ED8);
  font-size:.875rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.pain-solution-close{ font-weight:600; color:var(--fg1); }
.pain-solution .ship-list{ margin-top:1.5rem; }
.pain-solution-cta{ margin-top:1.5rem; }

/* ===================================================================
   2. MODULE SHOWCASE
   =================================================================== */
.avail{ display:inline-flex; align-items:center; gap:.375rem; font-size:.6875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; color:var(--success);
  background:var(--success-bg); box-shadow:inset 0 0 0 1px var(--success-ring);
  border-radius:9999px; padding:.25rem .625rem; }
.avail .dot{ width:.5rem; height:.5rem; border-radius:9999px; background:var(--success); }

.feature{ border-radius:var(--radius-xl); background:#fff; outline:1px solid var(--brand-200); outline-offset:-1px;
  box-shadow:var(--shadow-sm); overflow:hidden; }
.feature-grid{ display:grid; grid-template-columns:1fr; }
@media (min-width:900px){ .feature-grid{ grid-template-columns:1.05fr 1fr; } }
.feature-shot{ background:linear-gradient(135deg,#F9FAFB,#F3F4F6); position:relative; min-height:14rem; overflow:hidden; }
.feature-shot img{ width:100%; height:100%; object-fit:cover; object-position:top left; }
.feature-body{ padding:1.5rem; }
@media (min-width:768px){ .feature-body{ padding:2rem; } }
.feature-body .mod-name{ font-size:1.375rem; font-weight:700; letter-spacing:-.02em; margin:.625rem 0 .25rem; }
@media (min-width:768px){ .feature-body .mod-name{ font-size:1.625rem; } }
.feature-body .mod-promise{ font-size:1rem; font-weight:500; color:var(--fg2); margin:0 0 1rem; line-height:1.4; }
.feature-body p{ font-size:.9375rem; line-height:1.6; color:var(--fg3); margin:.625rem 0; }
.feature-body p .qa{ color:var(--fg2); font-weight:600; }

.beforeafter{ display:flex; align-items:stretch; gap:.5rem; margin:1.25rem 0 1rem; flex-wrap:wrap; }
.ba-cell{ flex:1 1 8rem; border-radius:var(--radius-md); padding:.75rem .875rem; }
.ba-cell.before{ background:var(--bg-subtle); }
.ba-cell.after{ background:var(--brand-50); box-shadow:inset 0 0 0 1px var(--brand-200); }
.ba-cell .k{ font-size:.625rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:var(--fg4); }
.ba-cell .v{ font-size:1.0625rem; font-weight:700; margin-top:.125rem; letter-spacing:-.01em; }
.ba-cell.before .v{ color:var(--fg3); text-decoration:line-through; text-decoration-color:var(--fg5); }
.ba-cell.after .v{ color:var(--brand-500); }
.ba-arrow{ align-self:center; color:var(--fg5); flex:0 0 auto; }
@media (max-width:420px){ .ba-arrow{ transform:rotate(90deg); } }

/* secondary modules */
.sub-head{ margin:2.75rem 0 1rem; font-size:.8125rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--fg4); }
.mod-grid{ display:grid; grid-template-columns:1fr; gap:.875rem; }
@media (min-width:640px){ .mod-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .mod-grid{ grid-template-columns:repeat(3,1fr); } }
.mod-card{ background:#fff; border-radius:var(--radius-lg); outline:1px solid var(--border-1); outline-offset:-1px;
  padding:1.125rem 1.125rem 1.25rem; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s, outline-color .2s; }
.mod-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-xl); outline-color:var(--brand-300); }
.mod-card .mc-top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; }
.mod-card h4{ font-size:1rem; font-weight:700; letter-spacing:-.01em; margin:0; color:var(--fg1); }
.mod-card p{ font-size:.875rem; line-height:1.5; color:var(--fg3); margin:.25rem 0 0; }
.mini-avail{ display:inline-flex; align-items:center; gap:.3125rem; font-size:.625rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; color:var(--success); white-space:nowrap; }
.mini-avail .dot{ width:.4375rem; height:.4375rem; border-radius:9999px; background:var(--success); }

/* 27-catalog reference strip */
.catalog-strip{ margin-top:2.5rem; border-radius:var(--radius-xl); background:var(--bg-page);
  border:1px solid var(--border-1); padding:1.5rem; display:flex; flex-wrap:wrap; align-items:center;
  gap:1.25rem 2rem; }
.cs-stats{ display:flex; flex-wrap:wrap; gap:1.25rem 2rem; }
.cs-stat{ display:flex; flex-direction:column; }
.cs-stat .n{ font-size:1.5rem; font-weight:700; letter-spacing:-.02em; color:var(--brand-500); line-height:1; }
.cs-stat .t{ font-size:.75rem; color:var(--fg4); margin-top:.25rem; max-width:11rem; }
.cs-note{ flex:1 1 14rem; font-size:.875rem; color:var(--fg3); line-height:1.55; min-width:12rem; }

/* ===================================================================
   3. OFFER CLARIFICATION
   =================================================================== */
.offer{ border-radius:var(--radius-xl); background:linear-gradient(135deg,#1d4ed8,#1e3a8a); color:#fff;
  padding:2rem 1.5rem; }
@media (min-width:768px){ .offer{ padding:2.75rem 2.5rem; } }
.offer .ey{ color:var(--brand-200); font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.offer h2{ color:#fff; font-size:1.5rem; font-weight:700; line-height:1.25; margin:.625rem 0 0; max-width:30ch; }
@media (min-width:768px){ .offer h2{ font-size:1.875rem; } }
.offer p{ color:rgba(255,255,255,.85); font-size:1rem; line-height:1.6; margin:.875rem 0 0; max-width:44rem; }
.offer p b{ color:#fff; font-weight:600; }

/* ===================================================================
   4. HOW IT WORKS  — stages
   =================================================================== */
.stages{ display:grid; grid-template-columns:1fr; gap:.875rem; counter-reset:stage; }
@media (min-width:768px){ .stages{ grid-template-columns:repeat(5,1fr); gap:.75rem; } }
.stage{ position:relative; background:#fff; border-radius:var(--radius-lg); outline:1px solid var(--border-1);
  outline-offset:-1px; padding:1.25rem; }
.stage .step-n{ width:1.75rem; height:1.75rem; border-radius:9999px; background:var(--brand-500); color:#fff;
  font-size:.8125rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:.75rem; }
.stage h4{ font-size:.9375rem; font-weight:700; margin:0 0 .375rem; color:var(--fg1); }
.stage p{ font-size:.8125rem; line-height:1.5; color:var(--fg3); margin:0; }
.stage .free-tag{ display:inline-block; margin-top:.5rem; font-size:.625rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--success); background:var(--success-bg); border-radius:9999px; padding:.125rem .5rem; }

/* ===================================================================
   5. PLATFORM-INTEGRATION CREDIBILITY (Geotab home-turf)
   =================================================================== */
.cred-grid{ display:grid; grid-template-columns:1fr; gap:2rem; align-items:start; }
@media (min-width:900px){ .cred-grid{ grid-template-columns:1fr 1fr; gap:3rem; } }
.cred-points{ display:grid; grid-template-columns:1fr; gap:0; border:1px solid var(--border-1);
  border-radius:var(--radius-xl); overflow:hidden; background:#fff; }
.cred-point{ display:flex; gap:.875rem; padding:1.125rem 1.25rem; border-bottom:1px solid var(--border-faint); }
.cred-point:last-child{ border-bottom:0; }
.cred-point .ic{ flex:0 0 auto; width:2.25rem; height:2.25rem; border-radius:var(--radius-md);
  background:var(--brand-50); color:var(--blue-700); display:flex; align-items:center; justify-content:center; }
.cred-point h4{ font-size:.9375rem; font-weight:700; margin:0 0 .1875rem; color:var(--fg1); }
.cred-point p{ font-size:.8125rem; line-height:1.5; color:var(--fg3); margin:0; }
.reseller{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.25rem; font-size:.875rem;
  font-weight:600; color:var(--cat-geotab-fg); background:var(--cat-geotab-bg);
  box-shadow:inset 0 0 0 1px var(--cat-geotab-ring); border-radius:9999px; padding:.5rem 1rem; }

/* ===================================================================
   6 & 7. WHAT YOU GET / PRICING SHAPE
   =================================================================== */
.two-col{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media (min-width:900px){ .two-col{ grid-template-columns:1fr 1fr; gap:1.5rem; } }
.panel{ background:#fff; border-radius:var(--radius-xl); outline:1px solid var(--border-1); outline-offset:-1px;
  padding:1.75rem; box-shadow:var(--shadow-sm); }
.panel > .eyebrow{ margin-bottom:.625rem; }
.panel h3{ font-size:1.25rem; font-weight:700; letter-spacing:-.02em; margin:0 0 1.25rem; }
.getlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.875rem; }
.getlist li{ display:flex; gap:.75rem; font-size:.9375rem; line-height:1.45; color:var(--fg2); }
.getlist li svg{ flex:0 0 auto; color:var(--success); margin-top:.125rem; }
.getlist li b{ color:var(--fg1); font-weight:600; }

.price-row{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.875rem 0; border-bottom:1px solid var(--border-faint); }
.price-row:last-of-type{ border-bottom:0; }
.price-row .pr-stage{ font-size:.9375rem; font-weight:600; color:var(--fg1); }
.price-row .pr-shape{ font-size:.8125rem; font-weight:600; color:var(--blue-700); text-align:right;
  background:var(--brand-50); border-radius:9999px; padding:.25rem .75rem; white-space:nowrap; }
.price-row .pr-shape.free{ color:var(--success); background:var(--success-bg); }
.price-note{ margin-top:1.125rem; font-size:.8125rem; color:var(--fg4); line-height:1.5; }

/* ===================================================================
   8. PROOF PLACEHOLDER (asset-asks)
   =================================================================== */
.proof-grid{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media (min-width:768px){ .proof-grid{ grid-template-columns:1.4fr 1fr; } }
.placeholder{ border:1.5px dashed var(--border-2); border-radius:var(--radius-xl); background:#fff;
  padding:1.75rem; position:relative; }
.placeholder .ph-tag{ display:inline-flex; align-items:center; gap:.375rem; font-size:.625rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--logo-accent); background:#FFF7ED;
  box-shadow:inset 0 0 0 1px #FED7AA; border-radius:9999px; padding:.25rem .625rem; margin-bottom:.875rem; }
.placeholder h4{ font-size:1rem; font-weight:700; margin:0 0 .5rem; color:var(--fg2); }
.placeholder .ph-q{ font-size:.875rem; line-height:1.55; color:var(--fg4); margin:0; }
.placeholder .ph-q b{ color:var(--fg3); font-weight:600; }
.placeholder ul{ margin:.75rem 0 0; padding-left:1.1rem; font-size:.8125rem; color:var(--fg4); line-height:1.7; }
.quote-skeleton{ margin-top:1rem; display:flex; flex-direction:column; gap:.5rem; }
.quote-skeleton .bar{ height:.625rem; border-radius:9999px; background:var(--bg-subtle); }
.quote-skeleton .bar.w1{ width:92%; } .quote-skeleton .bar.w2{ width:78%; } .quote-skeleton .bar.w3{ width:54%; }
.accolade-skeleton{ margin-top:1rem; display:flex; gap:.75rem; flex-wrap:wrap; }
.acc-chip{ flex:1 1 5rem; background:var(--bg-page); border:1px solid var(--border-1); border-radius:var(--radius-md);
  padding:.75rem; text-align:center; }
.acc-chip .acc-n{ font-size:1.125rem; font-weight:700; color:var(--fg5); }
.acc-chip .acc-t{ font-size:.6875rem; color:var(--fg5); margin-top:.25rem; }

/* ===================================================================
   9. FAQ
   =================================================================== */
.faq-group{ margin-bottom:1.75rem; }
.faq-group-title{ font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--fg4); margin:0 0 .75rem; }
.faq{ border:1px solid var(--border-1); border-radius:var(--radius-lg); background:#fff; overflow:hidden; }
.faq + .faq{ margin-top:.625rem; }
.faq summary{ list-style:none; cursor:pointer; padding:1rem 1.125rem; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; font-size:.9375rem; font-weight:600; color:var(--fg1); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .chev{ flex:0 0 auto; color:var(--fg4); transition:transform .2s; }
.faq[open] summary .chev{ transform:rotate(180deg); }
.faq summary:hover{ color:var(--blue-700); }
.faq .faq-a{ padding:0 1.125rem 1.125rem; font-size:.875rem; line-height:1.6; color:var(--fg3); margin:0; }
.faq .faq-a .asset-ask{ display:inline-block; margin-top:.5rem; font-size:.6875rem; font-weight:600;
  color:var(--logo-accent); background:#FFF7ED; box-shadow:inset 0 0 0 1px #FED7AA;
  border-radius:9999px; padding:.125rem .5rem; }

/* ===================================================================
   10. FINAL CTA
   =================================================================== */
.final{ position:relative; overflow:hidden; background:linear-gradient(135deg,#1d4ed8,#1e3a8a); color:#fff; }
.final .dots{ position:absolute; inset:0; opacity:.08; pointer-events:none;
  background-image:radial-gradient(#fff 1px, transparent 1px); background-size:22px 22px; }
.final-inner{ position:relative; display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }
@media (min-width:900px){ .final-inner{ grid-template-columns:1.05fr .95fr; gap:3.5rem; } }
.final h2{ color:#fff; font-size:1.75rem; font-weight:700; line-height:1.2; max-width:18ch; }
@media (min-width:768px){ .final h2{ font-size:2.25rem; } }
.final .final-lede{ color:rgba(255,255,255,.85); font-size:1rem; line-height:1.6; margin:1rem 0 1.75rem; max-width:34rem; }
.final-actions{ display:flex; flex-direction:column; gap:.75rem; align-items:flex-start; }
@media (min-width:480px){ .final-actions{ flex-direction:row; flex-wrap:wrap; align-items:center; } }
.callrow{ margin-top:1.5rem; font-size:.875rem; color:rgba(255,255,255,.8); }
.callrow a{ color:#fff; font-weight:700; text-decoration:none; }
.callrow a:hover{ text-decoration:underline; }

/* lead form card */
.form-card{ background:#fff; border-radius:var(--radius-xl); box-shadow:0 20px 60px rgba(15,23,42,.35); overflow:hidden; }
.form-card .fc-hd{ padding:1.25rem 1.5rem; border-bottom:1px solid var(--border-faint); }
.form-card .fc-hd h3{ font-size:1.0625rem; font-weight:700; color:var(--fg1); }
.form-card .fc-hd p{ font-size:.8125rem; color:var(--fg4); margin:.25rem 0 0; }
.form-card form{ padding:1.25rem 1.5rem 1.5rem; }
.field{ margin-bottom:.875rem; }
.field label{ display:block; font-size:.8125rem; font-weight:600; color:#334155; margin-bottom:.375rem; }
.field label .req{ color:#dc2626; }
.field input{ width:100%; box-sizing:border-box; border:1px solid var(--border-2); border-radius:var(--radius-md);
  padding:.625rem .75rem; font-size:.9375rem; color:var(--fg1); font-family:inherit; background:#fff; }
.field input:focus{ outline:none; border-color:var(--blue-700); box-shadow:var(--ring-focus); }
.field input.invalid{ border-color:#dc2626; box-shadow:0 0 0 2px rgba(220,38,38,.15); }
.field .err{ display:none; font-size:.75rem; color:#dc2626; margin-top:.3125rem; }
.field.show-err .err{ display:block; }
.send{ width:100%; background:var(--blue-700); border:0; color:#fff; font-size:.9375rem; font-weight:600;
  cursor:pointer; padding:.8125rem 1.25rem; border-radius:9999px; transition:background .15s; }
.send:hover{ background:var(--brand-500); }
.form-fine{ margin-top:.75rem; font-size:.6875rem; color:var(--fg5); text-align:center; line-height:1.5; }
.form-success{ text-align:center; padding:1.5rem .5rem; }
.form-success .ck{ width:3rem; height:3rem; border-radius:9999px; background:var(--success-bg); color:var(--success);
  display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; }
.form-success h3{ font-size:1.125rem; font-weight:700; color:var(--fg1); margin:0 0 .375rem; }
.form-success p{ font-size:.875rem; color:var(--fg4); margin:0; }

/* ---- locked hero stub (existing, above this work) ---- */
.hero-stub{ position:relative; overflow:hidden; border-bottom:1px solid var(--border-faint); background:#fff; }
.hero-blob{ position:absolute; top:-8rem; left:50%; transform:translateX(-50%); width:140%; height:24rem;
  border-radius:9999px; background:linear-gradient(90deg,#DBEAFE,#E0F2FE,#E0E7FF); opacity:.6; filter:blur(64px); pointer-events:none; }
.hero-dots{ position:absolute; inset:0; opacity:.04; pointer-events:none;
  background-image:radial-gradient(#0f172a 1px, transparent 1px); background-size:24px 24px; }
.hero-inner{ position:relative; padding:2.5rem 0 2.75rem; }
.hero-row{ display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; }
.logo-tile{ width:3.5rem; height:3.5rem; flex:0 0 auto; border-radius:1rem; background:#fff; padding:.5rem;
  box-shadow:var(--shadow-md); outline:1px solid var(--border-1); display:flex; align-items:center; justify-content:center; }
.logo-tile img{ width:100%; height:100%; object-fit:contain; }
.hero-h1{ font-size:1.625rem; font-weight:700; line-height:1.2; letter-spacing:-.02em; margin:0; max-width:34ch; text-wrap:balance; }
.hero-h1 .grad-text{ display:inline-block; margin-top:.15em; }
@media (min-width:768px){ .hero-h1{ font-size:2.25rem; } }
.grad-text{ background:linear-gradient(90deg,#2563eb,#6366f1); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-lede{ margin:.75rem 0 0; max-width:40rem; font-size:1rem; color:var(--fg3); }
.hero-cta{ margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.hero-cta .btn{ min-width:13.5rem; }
@media (max-width:639px){ .hero-cta{ flex-direction:column; align-items:stretch; } .hero-cta .btn{ width:100%; min-width:0; } }
.locked-flag{ position:absolute; top:.75rem; right:.75rem; z-index:3; font-size:.625rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--fg4); background:var(--bg-subtle);
  border:1px solid var(--border-1); border-radius:9999px; padding:.1875rem .5rem; }

/* footer mini */
.lp-footer{ border-top:1px solid var(--border-1); background:var(--bg-page); padding:2rem 0; }
.lp-footer .wrap{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.lp-footer img{ height:2rem; }
.lp-footer .legal{ font-size:.75rem; color:var(--fg5); }
.lp-footer a{ color:var(--fg4); }

/* ===================================================================
   REVISION — approved Option 1, refined
   =================================================================== */

/* ---- What we've shipped — full-width stacked rows ---- */
.ship-list{ display:flex; flex-direction:column; gap:1.5rem; margin-top:2rem; }
.ship-row{ display:grid; grid-template-columns:1fr; background:#fff; border-radius:var(--radius-xl);
  outline:1px solid var(--border-1); outline-offset:-1px; box-shadow:var(--shadow-sm); overflow:hidden;
  text-decoration:none; color:inherit; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, outline-color .25s ease; }
.ship-row:hover{ transform:translateY(-4px) scale(1.008); box-shadow:var(--shadow-xl); outline-color:var(--brand-300); }
.ship-row:focus-visible{ outline:2px solid var(--blue-700); outline-offset:2px; }
/* clickable-card cue */
.ship-cta{ display:inline-flex; align-items:center; gap:.375rem; margin-top:1.125rem; font-size:.875rem;
  font-weight:700; color:var(--blue-700); }
.ship-cta svg{ transition:transform .2s ease; }
.ship-row:hover .ship-cta{ color:var(--brand-500); }
.ship-row:hover .ship-cta svg{ transform:translateX(4px); }
@media (min-width:768px){ .ship-row{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); } }
.ship-shot{ background:linear-gradient(135deg,#F9FAFB,#F3F4F6); overflow:hidden; }
.ship-shot img{ width:100%; height:100%; object-fit:cover; object-position:right center; display:block; }
@media (max-width:767px){ .ship-shot{ aspect-ratio:16/10; } }
@media (min-width:768px){ .ship-shot{ min-height:18rem; } }
.ship-body{ padding:1.5rem; display:flex; flex-direction:column; justify-content:center; }
@media (min-width:768px){ .ship-body{ padding:2.25rem 2.5rem; } }
.ship-avail{ display:inline-flex; align-items:center; gap:.375rem; align-self:flex-start; font-size:.6875rem;
  font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--success);
  background:var(--success-bg); box-shadow:inset 0 0 0 1px var(--success-ring); border-radius:9999px;
  padding:.25rem .625rem; margin-bottom:.875rem; }
.ship-avail .dot{ width:.5rem; height:.5rem; border-radius:9999px; background:var(--success); }
.ship-body h3{ font-size:1.375rem; font-weight:700; letter-spacing:-.02em; margin:0 0 .5rem; color:var(--fg1); }
@media (min-width:768px){ .ship-body h3{ font-size:1.5rem; } }
.ship-desc{ font-size:.9375rem; line-height:1.6; color:var(--fg3); margin:0 0 1.25rem; max-width:42ch; }
.ship-desc b{ color:var(--fg1); font-weight:600; }
.ship-tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.s-tag{ display:inline-flex; align-items:center; gap:.3125rem; font-size:.6875rem; font-weight:600;
  border-radius:9999px; padding:.25rem .625rem; }
.s-tag.platform{ color:var(--cat-geotab-fg); background:var(--cat-geotab-bg); box-shadow:inset 0 0 0 1px var(--cat-geotab-ring); }
.s-tag.cat{ color:var(--tag-fg); background:var(--tag-bg); box-shadow:inset 0 0 0 1px var(--brand-200); }
.s-tag svg{ flex:0 0 auto; }

/* ---- In their words — reviews carousel ---- */
.rev-note{ display:inline-flex; align-items:center; gap:.375rem; margin-top:.875rem; font-size:.6875rem;
  font-weight:600; color:var(--logo-accent); background:#FFF7ED; box-shadow:inset 0 0 0 1px #FED7AA;
  border-radius:9999px; padding:.25rem .625rem; }
.rev-wrap{ margin-top:2rem; }
.rev-viewport{ overflow:hidden; }
.rev-track{ display:flex; gap:1.25rem; transition:transform .45s cubic-bezier(.4,0,.2,1); will-change:transform;
  touch-action:pan-y; }
.rev-card{ flex:0 0 auto; box-sizing:border-box; background:#fff; border-radius:var(--radius-xl);
  outline:1px solid var(--border-1); outline-offset:-1px; box-shadow:var(--shadow-sm);
  padding:1.5rem 1.5rem 1.375rem; display:flex; flex-direction:column; }
.rev-card .rq-mark{ font-size:2.5rem; line-height:.7; font-weight:700; color:var(--brand-200);
  font-family:Georgia, "Times New Roman", serif; margin-bottom:.5rem; }
.rev-quote{ font-size:1rem; line-height:1.55; color:var(--fg1); font-weight:500; margin:0 0 1.25rem; }
.rev-foot{ margin-top:auto; }
.rev-attrib{ display:flex; align-items:center; gap:.75rem; padding-top:1rem; border-top:1px solid var(--border-faint); }
.rev-avatar{ width:2.5rem; height:2.5rem; flex:0 0 auto; border-radius:9999px; background:var(--brand-100);
  color:var(--blue-700); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.875rem; }
.rev-who .nm{ font-size:.875rem; font-weight:700; color:var(--fg1); }
.rev-who .rl{ font-size:.75rem; color:var(--fg4); margin-top:.0625rem; }
.rev-meta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.rev-chip{ font-size:.625rem; font-weight:600; border-radius:9999px; padding:.1875rem .5rem; }
.rev-chip.plat{ color:var(--cat-geotab-fg); background:var(--cat-geotab-bg); box-shadow:inset 0 0 0 1px var(--cat-geotab-ring); }
.rev-chip.prob{ color:var(--tag-fg); background:var(--tag-bg); }

.rev-controls{ display:flex; align-items:center; justify-content:center; gap:1.25rem; margin-top:1.75rem; }
.rev-arrow{ width:2.75rem; height:2.75rem; flex:0 0 auto; border-radius:9999px; background:#fff;
  border:1px solid var(--border-2); color:var(--fg2); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s; }
.rev-arrow:hover{ background:var(--blue-700); border-color:var(--blue-700); color:#fff; box-shadow:var(--shadow-md); }
.rev-arrow:focus-visible{ outline:none; box-shadow:var(--ring-focus); }
.rev-dots{ display:flex; align-items:center; gap:.5rem; }
.rev-dot{ width:.5rem; height:.5rem; border-radius:9999px; background:var(--border-2); border:0; padding:0;
  cursor:pointer; transition:all .2s; }
.rev-dot.active{ background:var(--blue-700); width:1.375rem; }

/* ---- What we do — blue self-promotion (merged expertise) ---- */
.promo{ border-radius:var(--radius-2xl); background:linear-gradient(135deg,#1d4ed8,#1e3a8a); color:#fff;
  padding:2.25rem 1.5rem; overflow:hidden; position:relative; }
@media (min-width:768px){ .promo{ padding:3rem 3rem; } }
.promo .promo-dots{ position:absolute; inset:0; opacity:.08; pointer-events:none;
  background-image:radial-gradient(#fff 1px, transparent 1px); background-size:22px 22px; }
.promo-inner{ position:relative; display:grid; grid-template-columns:1fr; gap:1.75rem; }
@media (min-width:900px){ .promo-inner{ grid-template-columns:1fr 1fr; gap:3rem; align-items:center; } }
.promo .ey{ display:inline-flex; align-items:center; gap:.5rem; color:#fff; font-size:.6875rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); border-radius:9999px; padding:.3125rem .75rem; }
.promo h2{ color:#fff; font-size:1.625rem; font-weight:700; line-height:1.2; margin:1rem 0 0; max-width:22ch; }
@media (min-width:768px){ .promo h2{ font-size:2.125rem; } }
.promo .promo-lede{ color:rgba(255,255,255,.85); font-size:1.0625rem; line-height:1.6; margin:1rem 0 0; max-width:46rem; }
.promo .promo-lede b{ color:#fff; font-weight:600; }
.promo-points{ display:grid; grid-template-columns:1fr; gap:1px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-xl); overflow:hidden; }
.promo-point{ background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:1.375rem 1.5rem; display:flex; gap:.875rem; align-items:flex-start; }
.promo-point .pp-ic{ flex:0 0 auto; width:2.25rem; height:2.25rem; border-radius:var(--radius-md);
  background:rgba(255,255,255,.16); color:#fff; display:flex; align-items:center; justify-content:center; }
.promo-point h4{ font-size:.9375rem; font-weight:700; color:#fff; margin:0 0 .25rem; }
.promo-point p{ font-size:.8125rem; line-height:1.5; color:rgba(255,255,255,.78); margin:0; }
.promo-reseller{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.5rem; font-size:.875rem;
  font-weight:600; color:#fff; background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
  border-radius:9999px; padding:.5rem 1rem; }

/* ---- Lead modal (hero "Reach out to us") ---- */
.modal-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.55); display:none; align-items:center;
  justify-content:center; padding:1rem; z-index:90; }
.modal-overlay.open{ display:flex; animation:ov-in .18s ease; }
@keyframes ov-in{ from{ opacity:0; } to{ opacity:1; } }
.lead-modal{ width:100%; max-width:27rem; background:#fff; border-radius:var(--radius-xl);
  box-shadow:0 20px 60px rgba(15,23,42,.35); overflow:hidden; animation:lm-in .22s cubic-bezier(.2,.7,.3,1); }
@keyframes lm-in{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
.lead-modal .lm-hd{ position:relative; background:linear-gradient(135deg,#1d4ed8,#1e3a8a); color:#fff; padding:1.375rem 1.5rem; }
.lead-modal .lm-hd h3{ color:#fff; font-size:1.125rem; font-weight:700; }
.lead-modal .lm-hd p{ color:rgba(255,255,255,.85); font-size:.8125rem; margin:.25rem 0 0; }
.lm-close{ position:absolute; top:.75rem; right:.875rem; width:2rem; height:2rem; border:0; background:rgba(255,255,255,.15);
  color:#fff; border-radius:9999px; font-size:1.25rem; line-height:1; cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:background .15s; }
.lm-close:hover{ background:rgba(255,255,255,.28); }
.lead-modal form{ padding:1.25rem 1.5rem 1.5rem; }

/* ---- Expanded contact form bits ---- */
.field select{ width:100%; box-sizing:border-box; border:1px solid var(--border-2); border-radius:var(--radius-md);
  padding:.625rem .75rem; font-size:.9375rem; color:var(--fg1); font-family:inherit; background:#fff;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center; padding-right:2.25rem; }
.field select:focus{ outline:none; border-color:var(--blue-700); box-shadow:var(--ring-focus); }
.field .opt{ color:var(--fg5); font-weight:500; }
.field-row{ display:grid; grid-template-columns:1fr; gap:0; }
@media (min-width:480px){ .field-row{ grid-template-columns:1fr 1fr; gap:.875rem; } }
.field-row .field{ margin-bottom:.875rem; }