/* =====================================================================
   High Point GPS — Add-on detail page (reusable template)
   Builds on the shared tokens in geotab.css. Contained funnel:
   one Back control + two bottom CTAs are the only interactive exits.
   ===================================================================== */

/* ---- page chrome ---- */
.detail-body{ background:var(--bg-page); }

/* unified centered content column — image, title and body share one left edge */
.detail-main .wrap{ max-width:52rem; }

/* hero media — top of page; the ONLY Back control lives inside the image */
.hero-top{ padding-top:1rem; }
@media (min-width:768px){ .hero-top{ padding-top:1.5rem; } }
.hero-media{ position:relative; border-radius:var(--radius-2xl); overflow:hidden;
  background:linear-gradient(135deg,#F9FAFB,#F3F4F6); outline:1px solid var(--border-1); outline-offset:-1px;
  box-shadow:var(--shadow-md); aspect-ratio:5/2; }
.hero-media img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center 42%; }
.hero-back{ position:absolute; top:1rem; left:1rem; z-index:2; display:inline-flex; align-items:center;
  justify-content:center; width:3rem; height:2.5rem; padding:0; border-radius:var(--radius-md);
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border:1px solid var(--border-1);
  box-shadow:var(--shadow-md); cursor:pointer; color:var(--fg1); transition:background .15s, transform .15s; }
.hero-back:hover{ background:#fff; transform:translateX(-3px); }
.hero-back:focus-visible{ outline:2px solid var(--blue-700); outline-offset:2px; }

/* title block — below the image */
.detail-intro{ padding:1.25rem 0 0; }
@media (min-width:768px){ .detail-intro{ padding:1.5rem 0 0; } }

/* Title + subtitle span the full hero image width. The hero image fills the
   .wrap (aspect-ratio 5/2, no height cap, so its width is the wrap width in
   every browser); max-width:none keeps the text block flush with the image
   edges. NB: no text-wrap:balance — it shortens every line to ~60% to balance
   them, leaving the title bunched on the left; greedy wrapping fills each line
   to the image edge. */
.detail-h1{ font-size:1.75rem; font-weight:700; line-height:1.15; letter-spacing:-.02em; color:var(--fg1);
  margin:0; max-width:none; }
@media (min-width:768px){ .detail-h1{ font-size:2.25rem; } }
.detail-sub{ margin:1rem 0 0; font-size:1.0625rem; line-height:1.55; color:var(--fg3); max-width:none; }

.detail-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
.d-tag{ display:inline-flex; align-items:center; gap:.375rem; font-size:.75rem; font-weight:600;
  border-radius:9999px; padding:.3125rem .75rem; }
.d-tag.custom{ color:var(--cat-custom-fg); background:var(--cat-custom-bg); box-shadow:inset 0 0 0 1px var(--cat-custom-ring); }
.d-tag.built{ color:var(--blue-700); background:var(--brand-50); box-shadow:inset 0 0 0 1px var(--brand-200); }
.d-tag.platform{ color:var(--cat-geotab-fg); background:var(--cat-geotab-bg); box-shadow:inset 0 0 0 1px var(--cat-geotab-ring); }
.d-tag.problem{ color:var(--tag-fg); background:var(--tag-bg); box-shadow:inset 0 0 0 1px var(--brand-200); }
.d-tag svg{ flex:0 0 auto; }

/* ---- case-study body ---- */
.case{ padding:2rem 0 1rem; }
@media (min-width:768px){ .case{ padding:2.5rem 0 1.5rem; } }

.case-block + .case-block{ margin-top:2.5rem; }
.case-label{ display:inline-block; font-size:.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--blue-700); margin-bottom:.625rem; }
.case h2{ font-size:1.5rem; font-weight:700; line-height:1.2; letter-spacing:-.02em; color:var(--fg1); margin:0; }
@media (min-width:768px){ .case h2{ font-size:1.75rem; } }
.case p{ font-size:1.0625rem; line-height:1.7; color:var(--fg2); margin:1rem 0 0; }
.case p b{ color:var(--fg1); font-weight:600; }

/* inline before→after metric strip */
.metric-strip{ margin-top:1.75rem; 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:560px){ .metric-strip{ grid-template-columns:repeat(3,1fr); } }
.metric{ background:#fff; padding:1.25rem 1.25rem 1.375rem; }
.metric .m-num{ font-size:1.625rem; font-weight:700; letter-spacing:-.02em; line-height:1.05; color:var(--brand-500); }
.metric .m-lbl{ margin-top:.375rem; font-size:.8125rem; color:var(--fg4); line-height:1.45; }

/* applies-to bullet list */
.applies{ margin:1.25rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.75rem; }
.applies li{ display:flex; gap:.75rem; font-size:1rem; line-height:1.55; color:var(--fg2); }
.applies li svg{ flex:0 0 auto; color:var(--success); margin-top:.1875rem; }

/* ---- curated portal copy (reproduced 1:1) ----
   Long-form case study lifted verbatim from the source addon pages. Typographic
   rhythm only — no portal/Tailwind dependency. */
.kb-prose{ color:var(--fg2); font-size:1.0625rem; line-height:1.7; }
.kb-prose > :first-child{ margin-top:0; }
.kb-prose p{ margin:1rem 0 0; }
.kb-prose strong{ color:var(--fg1); font-weight:600; }
.kb-prose h3{ font-size:1.375rem; font-weight:700; line-height:1.25; letter-spacing:-.02em; color:var(--fg1);
  margin:2rem 0 0; }
.kb-prose h4{ font-size:1.1875rem; font-weight:700; line-height:1.3; letter-spacing:-.01em; color:var(--fg1);
  margin:1.75rem 0 0; }
.kb-prose ul{ margin:1rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.625rem; }
.kb-prose li{ position:relative; padding-left:1.5rem; }
.kb-prose li::before{ content:""; position:absolute; left:.25rem; top:.75rem; width:.4375rem; height:.4375rem;
  border-radius:9999px; background:var(--brand-400); }
.kb-prose li > p{ margin:0; }
.kb-prose li > p + p{ margin-top:.375rem; }
.kb-prose br{ line-height:0; }

/* info callout — the source "blue note" box (setup / ideal-for guidance) */
.addon-callout{ display:flex; gap:.75rem; align-items:flex-start; margin:0 0 1.75rem; padding:1rem 1.25rem;
  background:var(--brand-50); border-radius:var(--radius-lg); box-shadow:inset 0 0 0 1px var(--brand-200); }
.addon-callout svg{ flex:0 0 auto; color:var(--blue-700); margin-top:.1875rem; }
.addon-callout p{ margin:0; font-size:.9375rem; line-height:1.55; color:var(--blue-800,#1e3a8a);
  white-space:pre-line; }

/* Industries / Tags chip row, below the case body */
.addon-meta{ margin-top:2.5rem; }
.addon-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.addon-chip{ font-size:.8125rem; font-weight:500; color:var(--fg3); background:var(--bg-subtle,#F3F4F6);
  border-radius:9999px; padding:.3125rem .75rem; box-shadow:inset 0 0 0 1px var(--border-1); }

/* ---- screenshot gallery ---- */
.gallery{ padding:3rem 0; }
@media (min-width:768px){ .gallery{ padding:4rem 0; } }

.gallery-head{ margin-bottom:1.75rem; }
.gallery-head .case-label{ margin-bottom:.5rem; }
.gallery-head h2{ font-size:1.5rem; font-weight:700; letter-spacing:-.02em; color:var(--fg1); margin:0; }
.shots{ display:flex; flex-direction:column; gap:1.5rem; }

.shot{ border-radius:var(--radius-2xl); overflow:hidden; background:linear-gradient(135deg,#F9FAFB,#F3F4F6);
  outline:1px solid var(--border-1); outline-offset:-1px; box-shadow:var(--shadow-sm); }
.shot-zoom{ display:block; width:100%; border:0; padding:0; margin:0; background:none; cursor:zoom-in;
  position:relative; }
.shot-zoom img{ width:100%; height:auto; display:block; transition:transform .35s ease; }
.shot-zoom:hover img{ transform:scale(1.02); }
.shot-zoom .zoom-hint{ position:absolute; bottom:.75rem; right:.75rem; display:inline-flex; align-items:center;
  gap:.375rem; font-size:.6875rem; font-weight:600; color:#fff; background:rgba(17,24,39,.72);
  backdrop-filter:blur(4px); border-radius:9999px; padding:.3125rem .625rem; opacity:0; transform:translateY(4px);
  transition:opacity .2s, transform .2s; pointer-events:none; }
.shot-zoom:hover .zoom-hint{ opacity:1; transform:none; }
.shot-cap{ padding:.875rem 1.25rem; background:#fff; border-top:1px solid var(--border-faint);
  font-size:.8125rem; color:var(--fg4); line-height:1.5; }
.shot-cap b{ color:var(--fg2); font-weight:600; }

/* video gallery item — responsive 16:9 youtube-nocookie embed */
.shot-video .video-frame{ position:relative; width:100%; aspect-ratio:16/9; }
.shot-video .video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* placeholder shots (asset pending) */
.shot.placeholder-shot{ background:#fff; outline:1.5px dashed var(--border-2); }
.shot-ph{ aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:1.5rem; gap:.75rem; }
.shot-ph .ph-ic{ width:3rem; height:3rem; border-radius:9999px; background:var(--bg-subtle); color:var(--fg5);
  display:flex; align-items:center; justify-content:center; }
.shot-ph .ph-title{ font-size:.9375rem; font-weight:700; color:var(--fg2); }
.shot-ph .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:.1875rem .5rem; }

/* ---- lightbox ---- */
.lightbox{ position:fixed; inset:0; z-index:95; display:none; align-items:center; justify-content:center;
  background:rgba(15,23,42,.88); padding:1.5rem; cursor:zoom-out; }
.lightbox.open{ display:flex; animation:ov-in .18s ease; }
.lightbox img{ max-width:100%; max-height:92vh; width:auto; height:auto; border-radius:var(--radius-lg);
  box-shadow:0 30px 80px rgba(0,0,0,.5); animation:lm-in .22s cubic-bezier(.2,.7,.3,1); }
.lb-close{ position:absolute; top:1rem; right:1.25rem; width:2.5rem; height:2.5rem; border:0;
  background:rgba(255,255,255,.14); color:#fff; border-radius:9999px; font-size:1.5rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.lb-close:hover{ background:rgba(255,255,255,.28); }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:2.75rem; height:2.75rem; border:0;
  background:rgba(255,255,255,.14); color:#fff; border-radius:9999px; cursor:pointer; display:flex;
  align-items:center; justify-content:center; transition:background .15s; z-index:1; }
.lb-nav:hover{ background:rgba(255,255,255,.28); }
.lb-prev{ left:1.25rem; }
.lb-next{ right:1.25rem; }
.lightbox.single-shot .lb-nav{ display:none; }
@media (max-width:560px){ .lb-prev{ left:.5rem; } .lb-next{ right:.5rem; } }

/* ===================================================================
   BOTTOM CONVERSION BLOCK — the focal point. Exactly two actions.
   =================================================================== */
.convert{ position:relative; overflow:hidden; background:linear-gradient(135deg,#1d4ed8,#1e3a8a); color:#fff;
  padding:3.5rem 0; }
@media (min-width:768px){ .convert{ padding:4.5rem 0; } }
.convert .dots{ position:absolute; inset:0; opacity:.08; pointer-events:none;
  background-image:radial-gradient(#fff 1px, transparent 1px); background-size:22px 22px; }
.convert .wrap{ position:relative; max-width:52rem; text-align:center; }
.convert h2{ color:#fff; font-size:1.75rem; font-weight:700; line-height:1.2; letter-spacing:-.02em;
  margin:0 auto; max-width:22ch; }
@media (min-width:768px){ .convert h2{ font-size:2.25rem; } }
.convert .convert-lede{ color:rgba(255,255,255,.85); font-size:1.0625rem; line-height:1.6;
  margin:1rem auto 0; max-width:42rem; }

/* the two card-buttons */
.convert-actions{ margin-top:2.25rem; display:grid; grid-template-columns:1fr; gap:1rem; max-width:38rem;
  margin-left:auto; margin-right:auto; }
@media (min-width:560px){ .convert-actions{ grid-template-columns:1fr 1fr; } }
.cta-card{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:.5rem;
  padding:1.5rem 1.5rem 1.625rem; border-radius:var(--radius-2xl); cursor:pointer; border:0;
  font-family:inherit; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, background .15s; }
.cta-card .cc-ic{ width:2.5rem; height:2.5rem; border-radius:9999px; display:flex; align-items:center;
  justify-content:center; }
.cta-card .cc-title{ font-size:1.125rem; font-weight:700; letter-spacing:-.01em; }
.cta-card .cc-sub{ font-size:.8125rem; line-height:1.45; }
.cta-card .cc-go{ margin-top:.375rem; display:inline-flex; align-items:center; gap:.375rem; font-size:.875rem;
  font-weight:700; }
.cta-card .cc-go svg{ transition:transform .18s ease; }
.cta-card:hover .cc-go svg{ transform:translateX(4px); }

.cta-card.primary{ background:#fff; box-shadow:var(--shadow-xl); }
.cta-card.primary:hover{ transform:translateY(-3px); box-shadow:0 26px 60px rgba(0,0,0,.32); }
.cta-card.primary .cc-ic{ background:var(--brand-50); color:var(--blue-700); }
.cta-card.primary .cc-title{ color:var(--fg1); }
.cta-card.primary .cc-sub{ color:var(--fg4); }
.cta-card.primary .cc-go{ color:var(--blue-700); }

.cta-card.secondary{ background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }
.cta-card.secondary:hover{ transform:translateY(-3px); background:rgba(255,255,255,.16); }
.cta-card.secondary .cc-ic{ background:rgba(255,255,255,.16); color:#fff; }
.cta-card.secondary .cc-title{ color:#fff; }
.cta-card.secondary .cc-sub{ color:rgba(255,255,255,.78); }
.cta-card.secondary .cc-go{ color:#fff; }

.convert-call{ margin-top:1.75rem; font-size:.875rem; color:rgba(255,255,255,.8); }
.convert-call a{ color:#fff; font-weight:700; text-decoration:none; }
.convert-call a:hover{ text-decoration:underline; }

/* ===================================================================
   QUALIFYING FORM MODAL — full fields
   =================================================================== */
.qf-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.55); display:none; align-items:flex-start;
  justify-content:center; padding:1.5rem 1rem; z-index:90; overflow-y:auto; }
.qf-overlay.open{ display:flex; animation:ov-in .18s ease; }
.qf-modal{ width:100%; max-width:34rem; margin:auto; 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); }
.qf-hd{ position:relative; background:linear-gradient(135deg,#1d4ed8,#1e3a8a); color:#fff; padding:1.5rem 1.75rem; }
.qf-hd h3{ color:#fff; font-size:1.25rem; font-weight:700; letter-spacing:-.01em; }
.qf-hd p{ color:rgba(255,255,255,.85); font-size:.875rem; margin:.375rem 0 0; line-height:1.5; }
.qf-close{ position:absolute; top:.875rem; right:1rem; 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; }
.qf-close:hover{ background:rgba(255,255,255,.28); }
.qf-body{ padding:1.5rem 1.75rem 1.75rem; }
.qf-body textarea{ 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;
  resize:vertical; min-height:5rem; line-height:1.5; }
.qf-body textarea:focus{ outline:none; border-color:var(--blue-700); box-shadow:var(--ring-focus); }
.qf-prefill{ font-size:.75rem; color:var(--fg4); background:var(--brand-50); border-radius:var(--radius-md);
  padding:.625rem .75rem; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; line-height:1.4; }
.qf-prefill svg{ flex:0 0 auto; color:var(--blue-700); }
.qf-prefill b{ color:var(--fg2); font-weight:600; }