/* ==========================================================================
   LinchPin Product Tour — extracted from the React/dc-runtime bundle
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
    --navy-950: #071A33;
    --navy-900: #0A1F3D;
    --navy-800: #0E2A4F;
    --navy-700: #123A63;
    --ink:      #123A5E;
    --body:     #5B6B7C;
  
    --blue:       #1F6FD0;
    --blue-dark:  #17559F;
    --blue-mid:   #3F86DC;
    --blue-soft:  #9FC4F0;
    --blue-pale:  #EAF2FD;
  
    --orange:       #F58220;
    --orange-dark:  #E4711A;
    --orange-light: #F9A24A;
    --orange-pale:  #FDF0E4;
  
    --green:       #17A673;
    --green-light: #3FBF8F;
    --green-pale:  #E8F6F1;
  
    --bg-soft: #F4F8FD;
    --bg-card: #F7FAFE;
    --border:  #E4EBF3;
  
    /* --font-head: 'Poppins', sans-serif;
    --font-body: 'Open Sans', system-ui, sans-serif; */
}
  
/* ---------------------------------------------------------------- basics -- */
body {margin: 0;background: #fff;color: var(--body);
    /* font-family: var(--font-body); */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 16px;line-height: 1.65;-webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
::selection { background: var(--orange); color: #fff; }

.container      { max-width: 1240px; margin: 0 auto; }
.container--md  { max-width: 1180px; margin: 0 auto; }
.container--sm  { max-width: 1000px; margin: 0 auto; }
.container--xs  { max-width: 860px;  margin: 0 auto; }

.section        { padding: 80px 40px; }
.section--tall  { padding: 88px 40px; }
.section--soft  { background: var(--bg-soft); }
.section--white { background: #fff; }

.section-head        { text-align: center; margin-bottom: 44px; }
.section-head--tight { margin-bottom: 40px; }
.section-head p      { margin: 0 auto; max-width: 680px; font-size: 17px; text-wrap: pretty; }

.eyebrow {display: inline-block;padding: 6px 16px;border-radius: 999px;font-family: var(--font-head);font-size: 11px;font-weight: 600;letter-spacing: 0.12em;margin-bottom: 16px;}
.eyebrow--blue   { background: var(--blue-pale);   color: var(--blue); }
.eyebrow--orange { background: var(--orange-pale); color: var(--orange-dark); }
.eyebrow--light  { background: rgba(255, 255, 255, 0.1); color: var(--blue-soft); }
.eyebrow--green  { background: var(--green-pale);  color: var(--green); }
.eyebrow--gap    { margin-bottom: 18px; }

.tick       { color: var(--green);       font-weight: 700; }
.tick--soft { color: var(--green-light); font-weight: 700; }

/* ---------------------------------- buttons ------------------------------- */
.lp-btn {display: inline-block;font-family: var(--font-head);font-weight: 600;border-radius: 8px;cursor: pointer;transition: background 0.15s ease, color 0.15s ease;}
.lp-btn--primary { background: var(--orange); color: #fff; font-size: 16px; padding: 15px 30px; }
.lp-btn--primary:hover { background: var(--orange-dark); color: #fff; }
.lp-btn--outline {display: inline-flex;align-items: center;gap: 10px;border: 1px solid #4B6E9B;color: #fff;font-size: 16px;padding: 15px 26px;}
.lp-btn--outline:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.play-tri {width: 9px;height: 11px;background: #fff;clip-path: polygon(0 0, 100% 50%, 0 100%);display: inline-block;}

/* --------------------------------- hero ----------------------------------- */
.hero {background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-800) 70%, var(--navy-700) 100%);color: #fff;padding: 80px 40px 40px;text-align: center;}
/* Same treatment as .boomerang-logo, re-toned for the dark hero: the white fill and pale dashed border of the light-section version disappear here. */
.hero-logo {
    width: 220px;height: 58px;margin: 0 auto 22px;border: 1px dashed #33547E;border-radius: 10px;background: rgba(255, 255, 255, 0.04);display: flex;align-items: center;
    justify-content: center;font-family: var(--font-head);font-size: 10px;letter-spacing: 0.1em;color: #8FA8C6;
}  
.hero-pill {
    display: inline-block;padding: 7px 16px;border-radius: 999px;background: rgba(245, 130, 32, 0.16);color: var(--orange-light);font-family: var(--font-head);font-size: 12px;
    font-weight: 600;letter-spacing: 0.1em;margin-bottom: 24px;
}
.hero-title {margin: 0 0 22px;font-family: var(--font-head);font-weight: 700;font-size: 62px;line-height: 1.06;letter-spacing: -0.022em;color: #fff;text-wrap: balance;}
.hero-sub {margin: 0 auto 34px;max-width: 760px;font-size: 19px;color: #B9CBE0;text-wrap: pretty;}
.hero-actions {display: flex;justify-content: center;flex-wrap: wrap;gap: 14px;margin-bottom: 36px;}
.hero-badges {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 12px;max-width: 720px;margin: 0 auto 56px;}
.hero-badge {background: rgba(255, 255, 255, 0.06);border: 1px solid rgba(255, 255, 255, 0.12);border-radius: 10px;padding: 15px;display: flex;align-items: center;justify-content: center;gap: 10px;}
.hero-badge-text { font-size: 14px; color: #E4EDF7; }
  
/* video mock */
.video-frame {
    max-width: 1080px;margin: 0 auto;background: rgba(9, 26, 49, 0.7);border: 1px solid rgba(255, 255, 255, 0.14);border-top-left-radius: 16px;
    border-top-right-radius: 16px;padding: 14px 14px 0;box-shadow: 0 -10px 60px rgba(0, 0, 0, 0.35);
}
.video-bar { display: flex; align-items: center; gap: 8px; padding: 4px 8px 14px; }
.video-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.video-dot--orange { background: var(--orange); }
.video-dot--green  { background: var(--green-light); }
.video-dot--blue   { background: #4B6E9B; }
.video-bar-title {margin-left: 8px;font-family: var(--font-head);font-size: 12px;color: #9FB6D0;}
.video-stage {
    aspect-ratio: 16 / 8;border-top-left-radius: 10px;border-top-right-radius: 10px;background: repeating-linear-gradient(135deg, #12325A 0 12px, #0D2748 12px 24px);
    display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 14px;
}
.video-play {
    width: 64px;height: 64px;border-radius: 50%;background: var(--orange);display: flex;align-items: center;justify-content: center;
    box-shadow: 0 10px 26px rgba(245, 130, 32, 0.4);border: 0;padding: 0;cursor: pointer;
}
.video-play .play-tri { width: 14px; height: 17px; margin-left: 4px; }
.video-note {font-family: var(--font-head);font-size: 11px;letter-spacing: 0.12em;color: #8FA8C6;}
  
/* ------------------------------------ problem ----------------------------- */
.problem h2 {margin: 0 auto 12px;max-width: 880px;font-family: var(--font-head);font-weight: 700;font-size: 40px;line-height: 1.16;color: var(--ink);text-wrap: balance;}
.problem .section-head p { margin: 0; font-size: 17px;max-width: none; }
.problem-grid {background: #fff;border: 1px solid var(--border);border-radius: 16px;display: grid;grid-template-columns: repeat(5, minmax(0, 1fr));overflow: hidden;box-shadow: 0 10px 30px rgba(18, 58, 94, 0.06);}
.problem-card { padding: 30px 24px; border-right: 1px solid #EEF3F9; }
.problem-card:last-child { border-right: 0; }
.problem-card h3 {margin: 0 0 10px;font-family: var(--font-head);font-size: 16px;font-weight: 600;color: var(--ink);}
.problem-card p { margin: 0; font-size: 14.5px; } 
.icon-tile {width: 44px;height: 44px;border-radius: 11px;display: flex;align-items: center;justify-content: center;margin-bottom: 16px;}
.icon-tile--blue   { background: var(--blue-pale); }
.icon-tile--orange { background: var(--orange-pale); }
.icon-tile--green  { background: var(--green-pale); }
  
/* -------------------------------------------------------------- platform -- */
.platform h2 {margin: 0 0 12px;font-family: var(--font-head);font-weight: 700;font-size: 44px;color: var(--ink);}
.platform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.platform-card {background: var(--bg-card);border: 1px solid var(--border);border-radius: 16px;padding: 34px;display: grid;grid-template-columns: 56px 1fr;gap: 22px;}
.icon-badge {width: 56px;height: 56px;border-radius: 14px;display: flex;align-items: center;justify-content: center;}
.icon-badge--blue   { background: var(--blue); }
.icon-badge--orange { background: var(--orange); }
.icon-badge--green  { background: var(--green); }
.icon-badge--navy   { background: var(--ink); }
.kicker {font-family: var(--font-head);font-size: 11px;font-weight: 600;letter-spacing: 0.14em;margin-bottom: 8px;}
.kicker--blue   { color: var(--blue); }
.kicker--orange { color: var(--orange-dark); }
.kicker--green  { color: var(--green); }
.kicker--navy   { color: var(--ink); }
.platform-card h3 {margin: 0 0 14px;font-family: var(--font-head);font-size: 22px;font-weight: 600;color: var(--ink);}
.check-list { display: grid; gap: 9px; font-size: 15px; }
.check-item { display: flex; gap: 10px; }
.learn-more {display: inline-block;margin-top: 16px;font-family: var(--font-head);font-size: 14px;font-weight: 600;}
.learn-more--orange { color: var(--orange-dark); }
.learn-more--green  { color: var(--green); }
.learn-more--navy   { color: var(--ink); }
  
/* -------------------------------------------------------------- features -- */
.features { background: var(--navy-800); color: #fff; }
.features h2 {margin: 0;font-family: var(--font-head);font-weight: 700;font-size: 40px;color: #fff;}
.features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.feature-card {background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.12);border-radius: 16px;padding: 34px;display: flex;flex-direction: column;gap: 18px;}
.feature-card--blue   { border-top: 3px solid var(--blue); }
.feature-card--orange { border-top: 3px solid var(--orange); }
.feature-card--green  { border-top: 3px solid var(--green); }
.feature-card--sky    { border-top: 3px solid var(--blue-soft); }

.feature-top {display: flex;align-items: center;justify-content: space-between;gap: 16px;}
.feature-tag {font-family: var(--font-head);font-size: 12px;font-weight: 600;letter-spacing: 0.12em;}
.feature-tag--blue   { color: var(--blue-soft); }
.feature-tag--orange { color: var(--orange-light); }
.feature-tag--green  { color: #6FD9B3; }
.feature-num {font-family: var(--font-head);font-size: 13px;font-weight: 600;color: rgba(255, 255, 255, 0.28);}
.feature-card h3 {margin: 0;font-family: var(--font-head);font-size: 27px;font-weight: 700;line-height: 1.2;color: #fff;}
.feature-card > p {margin: 0;font-size: 16.5px;color: #B9CBE0;text-wrap: pretty;}
.feature-list {display: grid;gap: 12px;color: #DCE6F2;padding-top: 6px;border-top: 1px solid rgba(255, 255, 255, 0.1);}
.feature-list .check-item { gap: 12px; }
.feature-list .check-item:first-child { padding-top: 10px; }
  
/* ------------------------------------------------------------- inventory -- */
/* Option A of inventory-tracking-website-copy.html — the numbers version —
    rebuilt in the page's own section language: a section-head, a two-panel
    scale comparison, the break-even strip, and the year-one return cards. */
.inv h2 {margin: 0 0 14px;font-family: var(--font-head);font-weight: 700;font-size: 36px;color: var(--ink);line-height: 1.22;text-wrap: balance;}
.inv .section-head p { max-width: 720px; font-size: 17px; }

/* the scale comparison: what's parked vs what it costs */
.inv-ledger {
    display: grid;grid-template-columns: 1fr auto 1fr;align-items: stretch;gap: 0;max-width: 940px;margin: 0 auto 22px;border: 1px solid var(--border);border-radius: 18px;
    overflow: hidden;box-shadow: 0 12px 34px rgba(18, 58, 94, 0.07);
}
.inv-panel { padding: 34px 34px 32px; }
.inv-panel--rest { background: var(--orange-pale); }
.inv-panel--cost { background: var(--bg-card); }
.inv-panel p {margin: 0;font-size: 15px;line-height: 1.6;text-wrap: pretty;}
.inv-panel-label {font-family: var(--font-head);font-size: 11px;font-weight: 600;letter-spacing: 0.12em;text-transform: uppercase;margin-bottom: 10px;}
.inv-panel--rest .inv-panel-label { color: var(--orange-dark); }
.inv-panel--cost .inv-panel-label { color: var(--blue); }
.inv-panel-figure {font-family: var(--font-head);font-weight: 700;font-size: 46px;line-height: 1.05;letter-spacing: -0.02em;margin-bottom: 12px;font-variant-numeric: tabular-nums;}
.inv-panel--rest .inv-panel-figure { color: var(--orange-dark); }
.inv-panel--cost .inv-panel-figure { color: var(--ink); }
.inv-panel-figure small {font-size: 18px;font-weight: 600;letter-spacing: 0;color: var(--body);}
.inv-ledger-vs {display: flex;align-items: center;justify-content: center;padding: 0 4px;background: #fff;border-left: 1px solid var(--border);border-right: 1px solid var(--border);}
.inv-ledger-vs span {font-family: var(--font-head);font-size: 12px;font-weight: 600;letter-spacing: 0.1em;text-transform: uppercase;color: var(--body);padding: 0 14px;}
  
/* break-even strip */
.inv-breakeven {display: flex;align-items: center;gap: 24px;max-width: 940px;margin: 0 auto 46px;padding: 24px 30px;background: var(--green-pale);border-radius: 16px;}
.inv-breakeven-num {
    flex: 0 0 auto;width: 62px;height: 62px;border-radius: 16px;background: var(--green);color: #fff;display: flex;align-items: center;
    justify-content: center;font-family: var(--font-head);font-size: 30px;font-weight: 700;
}
.inv-breakeven-copy h3 {margin: 0 0 4px;font-family: var(--font-head);font-size: 20px;font-weight: 600;color: var(--ink);text-wrap: pretty;}
.inv-breakeven-copy p {margin: 0;font-size: 15.5px;text-wrap: pretty;} 
/* year-one return */
.inv-return-title {margin: 0 0 22px;text-align: center;font-family: var(--font-head);font-size: 13px;font-weight: 600;letter-spacing: 0.14em;text-transform: uppercase;color: var(--body);}
.inv-grid {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 20px;margin-bottom: 36px;}
.inv-card {border: 1px solid var(--border);border-radius: 14px;padding: 30px 26px;text-align: center;}
.inv-card-icon {width: 52px;height: 52px;border-radius: 13px;margin: 0 auto 18px;display: flex;align-items: center;justify-content: center;}
.inv-card-icon--blue   { background: var(--blue-pale); }
.inv-card-icon--orange { background: var(--orange-pale); }
.inv-card-icon--green  { background: var(--green-pale); }
.inv-card-figure {font-family: var(--font-head);font-size: 32px;font-weight: 700;color: var(--ink);line-height: 1.1;letter-spacing: -0.02em;font-variant-numeric: tabular-nums;}
.inv-card-figure small { font-size: 20px; font-weight: 700; color: var(--green); }
.inv-card h4 {margin: 6px 0 10px;font-family: var(--font-head);font-size: 16px;font-weight: 600;color: var(--ink);}
.inv-card p { margin: 0; font-size: 15px; text-wrap: pretty; }
.inv-closing {max-width: 860px;margin: 0 auto;text-align: center;font-size: 18px;line-height: 1.6;font-weight: 600;color: var(--ink);text-wrap: pretty;}
.inv-basis {max-width: 780px;margin: 20px auto 0;text-align: center;font-size: 13px;line-height: 1.6;color: var(--body);opacity: 0.85;text-wrap: pretty;}
   
/* ---------------------------------- boomerang ----------------------------- */
.boomerang .container--md { text-align: center; }
.boomerang-name {margin: 0 0 18px;font-family: var(--font-head);font-weight: 700;font-size: 30px;letter-spacing: 0.01em;color: var(--ink);}
.boomerang-logo {
    width: 220px;/*height: 58px;*/margin: 0 auto 22px;border: 1px dashed #C6D5E6;border-radius: 10px;background: #fff;display: flex;align-items: center;
    justify-content: center;font-family: var(--font-head);font-size: 10px;letter-spacing: 0.1em;color: #93A5B8;
}
.boomerang-title {margin: 0 auto 14px;max-width: 820px;font-family: var(--font-head);font-weight: 700;font-size: 42px;line-height: 1.14;color: var(--ink);}
.boomerang-lede {margin: 0 auto 40px;max-width: 720px;font-size: 17px;text-wrap: pretty;}
.boomerang-card {background: #fff;border: 1px solid var(--border);border-radius: 18px;overflow: hidden;text-align: left;box-shadow: 0 12px 34px rgba(18, 58, 94, 0.07);}
.boomerang-card-head {background: linear-gradient(90deg, var(--orange), var(--orange-dark));color: #fff;padding: 26px 34px;}
.boomerang-card-head h3 {margin: 0 0 12px;font-family: var(--font-head);font-size: 19px;font-weight: 600;}
.boomerang-card-head p {margin: 0;font-size: 16.5px;color: #FFF1E4;text-wrap: pretty;}
.boomerang-card-body { padding: 30px 34px; }
.boomerang-card-body h3 {margin: 0 0 12px;font-family: var(--font-head);font-size: 19px;font-weight: 600;color: var(--ink);}
.boomerang-card-body p { margin: 0 0 18px; font-size: 16.5px; text-wrap: pretty; }
.boomerang-card-body p:last-child { margin: 0; font-size: 16px; }
.boomerang-card-body a { font-family: var(--font-head); font-weight: 600; }
  
/* --------------------------------- growth ---------------------------- */
.growth h2 {margin: 0 0 12px;font-family: var(--font-head);font-weight: 700;font-size: 42px;color: var(--ink);}
.growth .section-head p { max-width: 660px; }
.growth-grid {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 20px;margin-bottom: 34px;}
.growth-card {border: 1px solid var(--border);border-radius: 14px;padding: 32px;text-align: center;}
.growth-icon {width: 52px;height: 52px;border-radius: 13px;margin: 0 auto 18px;display: flex;align-items: center;justify-content: center;}
.growth-icon--blue   { background: var(--blue-pale); }
.growth-icon--green  { background: var(--green-pale); }
.growth-icon--orange { background: var(--orange-pale); }
.growth-card h3 {margin: 0 0 10px;font-family: var(--font-head);font-size: 18px;font-weight: 600;color: var(--ink);}
.growth-card p { margin: 0; font-size: 15.5px; }
.growth-points {display: grid;grid-template-columns: 1fr 1fr;gap: 14px 40px;max-width: 1000px;margin: 0 auto;}
.growth-points .check-item { gap: 12px; }
  
/* ----------------------------------- rental ------------------------------- */
.rental-card {background: #fff;border: 1px solid var(--border);border-radius: 18px;padding: 40px 44px;max-width: 960px;margin: 0 auto;text-align: left;box-shadow: 0 12px 34px rgba(18, 58, 94, 0.07);}
.rental-card h2 {margin: 0 0 12px;font-family: var(--font-head);font-weight: 700;font-size: 34px;color: var(--ink);text-wrap: pretty;}
.rental-lede {margin: 0 0 26px;font-size: 17px;text-wrap: pretty;}
.rental-points {display: grid;gap: 14px;font-size: 16px;}
.rental-points .check-item { gap: 12px; }
.rental-close {margin: 26px 0 0;padding-top: 22px;border-top: 1px solid var(--border);font-style: italic;font-size: 16px;color: var(--ink);text-wrap: pretty;}
  
/* -------------------------------- rollout --------------------------------- */
.rollout h2 {margin: 0;font-family: var(--font-head);font-weight: 700;font-size: 42px;color: var(--ink);}
.steps {position: relative;display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 20px;margin-bottom: 30px;}
.steps-line {position: absolute;left: 8%;right: 8%;top: 23px;height: 2px;background: linear-gradient(90deg, var(--blue), var(--orange));}
.step { position: relative; text-align: center; }
.step-num {
    width: 46px;height: 46px;border-radius: 50%;color: #fff;font-family: var(--font-head);font-weight: 700;display: flex;align-items: center;
    justify-content: center;margin: 0 auto 18px;border: 4px solid var(--bg-soft);
}
.step-num--1 { background: var(--blue); }
.step-num--2 { background: var(--blue-mid); }
.step-num--3 { background: var(--orange-light); }
.step-num--4 { background: var(--orange); }
.step h3 {margin: 0 0 8px;font-family: var(--font-head);font-size: 18px;font-weight: 600;color: var(--ink);}
.step p { margin: 0; font-size: 15px; }
.rollout-note {
    background: #fff;border: 1px solid var(--border);border-radius: 12px;padding: 24px 26px;max-width: 940px;margin: 0 auto;text-align: left;font-size: 16px;
    text-wrap: pretty;border-width: 1px 1px 1px 4px;border-style: solid;
    border-color: rgb(228, 235, 243) rgb(228, 235, 243) rgb(228, 235, 243) rgb(245, 130, 32);
}
  
/* ------------------------------------- cta -------------------------------- */
.cta {background: linear-gradient(180deg, var(--navy-800), var(--navy-950));color: #fff;}
.cta .container--xs { text-align: center; }
.cta h2 {margin: 0 0 16px;font-family: var(--font-head);font-weight: 700;font-size: 44px;line-height: 1.12;color: #fff;}
.cta-lede {margin: 0 auto 36px;max-width: 620px;font-size: 18px;color: #B9CBE0;text-wrap: pretty;}
.demo-card {background: #fff;border-radius: 16px;padding: 36px;color: var(--body);text-align: left;box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);}
.demo-card h3 {margin: 0 0 8px;font-family: var(--font-head);font-size: 22px;font-weight: 700;color: var(--ink);}
.demo-card > p { margin: 0 0 24px; font-size: 15.5px; }
.demo-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field {display: grid;gap: 8px;font-size: 14px;font-family: var(--font-head);color: var(--ink);}
.field--full { grid-column: span 2; }
.field-label { display: flex; align-items: center; gap: 2px; }
.req { color: #E03B3B; }
.field input {
    padding: 13px 14px;border-radius: 8px;/* border: 1px solid #DCE5EF; */border: 2px solid #abcdf4fc;background: #F5F8FC;font-family: var(--font-body);
    font-size: 15px;color: var(--ink);height: 7px;
}
.field input:focus {outline: 2px solid rgba(31, 111, 208, 0.35);outline-offset: 1px;border-color: var(--blue);}
.field.has-error input { border-color: #E03B3B; background: #FDF3F3; }
.form-note { grid-column: span 2; margin: 0; font-size: 14px; }
.form-note--error   { color: #E03B3B; }
.form-note--success { color: var(--green); }
.btn-submit {
    margin-top: 6px;padding: 14px 40px;border: 0;border-radius: 8px;background: var(--orange);color: #fff;font-family: var(--font-head);font-weight: 600;
    font-size: 16px;cursor: pointer;justify-self: start;
}
.btn-submit:hover { background: var(--orange-dark); }
.trust-bar {
    margin-top: 26px;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;gap: 10px 0;background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);border-radius: 999px;padding: 16px 10px;
}
.trust-item {display: flex;align-items: center;gap: 9px;padding: 0 22px;font-size: 15px;color: #E4EDF7;}
.trust-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.18); }
  
/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1100px) {
    .problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .problem-card { border-bottom: 1px solid #EEF3F9; }
    .problem-card:nth-child(2n) { border-right: 0; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; }
    .steps-line { display: none; }
}
  
@media (max-width: 900px) {
    .section, .section--tall { padding: 60px 22px; }
    .hero { padding: 60px 22px 0; }
    .hero-title { font-size: 40px; }
    .hero-sub { font-size: 17px; }
    .hero-badges { grid-template-columns: 1fr; }
    .platform-grid,
    .features-grid,
    .growth-points,
    .demo-form { grid-template-columns: 1fr; }
    .field--full, .form-note { grid-column: auto; }
    .growth-grid { grid-template-columns: 1fr; }
    .inv-grid { grid-template-columns: 1fr; }
    .inv-ledger { grid-template-columns: 1fr; max-width: 520px; }
    .inv-ledger-vs {border-left: 0;border-right: 0;border-top: 1px solid var(--border);border-bottom: 1px solid var(--border);padding: 8px 0;}
    .inv-panel { padding: 26px 24px; }
    .inv-panel-figure { font-size: 38px; }
    .inv-breakeven { gap: 18px; padding: 20px 22px; }
    .inv-breakeven-num { width: 52px; height: 52px; font-size: 25px; border-radius: 13px; }
    .inv-breakeven-copy h3 { font-size: 17.5px; }
    .inv-closing { font-size: 16.5px; }
    .problem h2, .boomerang-title, .growth h2, .rollout h2, .cta h2, .inv h2 { font-size: 30px; }
    .rental-card h2 { font-size: 26px; }
    .rental-card { padding: 28px 24px; }
    .platform h2, .features h2 { font-size: 30px; }
    .feature-card h3 { font-size: 22px; }
    .platform-card { padding: 26px; }
    .demo-card { padding: 26px; }
    .trust-sep { display: none; }
}  
@media (max-width: 620px) {
    .inv-breakeven { flex-direction: column; align-items: flex-start; text-align: left; }
    .problem-grid { grid-template-columns: 1fr; }
    .problem-card { border-right: 0; }
    .steps { grid-template-columns: 1fr; }
    .platform-card { grid-template-columns: 1fr; gap: 16px; }
}  
/* ==========================================================================
SITE CHROME — announcement bar, header, footer, back-to-top.
Copied verbatim from /var/www/html/realtime-gps/style.css so this page's
header and footer render identically to the rest of the site.
Do not hand-edit: re-copy from realtime-gps when that chrome changes.
========================================================================== */
  
:root {
    /* Shared site chrome — same values as realtime-gps/style.css */
    --color-dark-blue:    #0b3459;
    --color-navy:         #1a365d;
    --color-orange:       #ed8936;
    --color-orange-hover: #dd6b20;
    --color-white:        #ffffff;
    --color-light-gray:   #f7fafc;
    --color-text:         #2d3748;
    --header-height:      72px;
    --max-width:          1280px;
    --font-chrome: "Public Sans", Helvetica, Arial, sans-serif;
}
  
/* The chrome was authored against a global `* { box-sizing: border-box }` and a
`ul { margin:0; padding:0 }` reset. The page body below deliberately keeps the
default content-box, so both resets are scoped to the chrome only. */
.announcement-bar, .announcement-bar *, .site-header, .site-header *, .site-footer, .site-footer *, .back-to-top, .back-to-top * { box-sizing: border-box; } 
.header-nav, .footer-col ul { margin: 0; padding: 0; list-style: none; }
/* .announcement-bar, .site-header, .site-footer { font-family: var(--font-chrome); } */
.site-footer p, .site-footer h3, .site-footer h4 { margin: 0; }
  
/* ---- Announcement Bar ---- */
.announcement-bar {background: linear-gradient(90deg, #0b3459 0%, #1a365d 50%, #0f4c75 100%);color: rgba(255,255,255,.9);text-align: center;padding: 8px 16px;font-size: .8125rem;font-weight: 500;position: relative;z-index: 1001;letter-spacing: .01em;}
.announcement-bar a {color: var(--color-orange);text-decoration: none;font-weight: 600;margin-left: 6px;}
.announcement-bar a:hover { text-decoration: underline; }
.announcement-bar__close {position: absolute;right: 16px;top: 50%;transform: translateY(-50%);background: none;border: none;color: rgba(255,255,255,.5);cursor: pointer;font-size: 1rem;padding: 4px;line-height: 1;transition: color .2s;}
.announcement-bar__close:hover { color: #fff; }
/* ---- Sticky Header ---- */
.site-header {position: sticky; top: 0; z-index: 1000;background: var(--color-dark-blue);transition: background .3s, box-shadow .3s, backdrop-filter .3s;}
.site-header--glass {background: rgba(11, 52, 89, .85);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);}
.site-header.scrolled {background: rgba(11, 52, 89, .95);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);box-shadow: 0 4px 30px rgba(0,0,0,.2);}
.header-inner {max-width: 1280px; margin: 0 auto;display: flex; align-items: center; justify-content: space-between;padding: 0 24px; height: var(--header-height);}
.header-logo img { height: 44px; width: auto; display: block; }
.header-logo { text-decoration: none; display: flex; align-items: center; gap: 10px; }
.header-logo img { height: 48px; }
  
/* ---- Logo treatment ----
logo-blue-pingmaster.jpg is a blue/orange mark on a transparent background,
so it is rendered white to read against the dark header. */
/* .header-logo img { filter: brightness(0) invert(1); } */
  
/* Nav */
.header-nav { display: flex; align-items: center; gap: 4px; list-style: none; }
.header-nav > li { position: relative; }
.header-nav > li > a {display: block; padding: 8px 16px; border-radius: 6px;color: rgba(255,255,255,.85); text-decoration: none; font-size: .9rem; font-weight: 500;transition: background .2s, color .2s;}
.header-nav > li > a:hover,
.header-nav > li > a.active { background: rgba(255,255,255,.1); color: #fff; }
  
/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown > a::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 6px;border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;vertical-align: middle; }
.dropdown-menu {position: absolute; top: 100%; left: 0; min-width: 200px;background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.15);opacity: 0; visibility: hidden; transform: translateY(8px);transition: all .2s ease; padding: 8px 0; z-index: 100;}
.nav-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu a {display: block; padding: 10px 20px; color: var(--color-text); text-decoration: none;font-size: .875rem; transition: background .15s;}
.dropdown-menu a:hover { background: var(--color-light-gray); color: var(--color-dark-blue); }
  
/* Action buttons */
.header-actions { display: flex; align-items: center; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 22px;border-radius: 6px; font-size: .875rem; font-weight: 600; text-decoration: none;cursor: pointer; border: 2px solid transparent; transition: all .2s; font-family: inherit; }
.btn-orange { background: var(--color-orange); color: #fff; border-color: var(--color-orange); }
.btn-orange:hover { background: var(--color-orange-hover); border-color: var(--color-orange-hover);    color: #fff; }
.btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-outline-white:hover { background: rgba(255,255,255,.1); border-color: #fff;     color: #fff;}
  
/* Hamburger */
.mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.mobile-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; transition: all .3s; }
  
/* Hamburger -> X when the menu is open */
.mobile-toggle span { transform-origin: center; }
.mobile-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  
@media (max-width: 991px) {
    .mobile-toggle { display: block; }
    .header-nav, .header-actions { display: none; }
    .header-nav.open, .header-actions.open { display: flex; }
    /* Fixed height clipped the open menu — let the header grow instead */
    .header-inner { flex-wrap: wrap; height: auto; min-height: var(--header-height); }
    .header-nav.open {flex-direction: column; align-items: stretch; width: 100%; order: 3; padding: 8px 0 16px;border-top: 1px solid rgba(255,255,255,.1); gap: 0;max-height: calc(100vh - var(--header-height) - 60px); overflow-y: auto;}
    .header-nav.open > li { width: 100%; }
    .header-nav.open > li > a { padding: 12px 4px; border-radius: 4px; font-size: 1rem; }
    .header-actions.open {width: 100%; order: 4; padding-bottom: 16px; justify-content: center; gap: 12px;border-top: 1px solid rgba(255,255,255,.08); padding-top: 16px;}
    .header-actions.open .btn { flex: 1; max-width: 200px; }
    /* Submenu is collapsed until "Services" is tapped */
    .dropdown-menu { position: static; box-shadow: none; visibility: visible;transform: none; background: rgba(255,255,255,.05); border-radius: 0;opacity: 1; display: none; padding: 4px 0; margin: 4px 0; }
    .nav-dropdown.dropdown-open .dropdown-menu { display: block; }
    .nav-dropdown.dropdown-open > a::after { transform: rotate(180deg); }
    .nav-dropdown > a::after { transition: transform .2s; }
    .dropdown-menu a { color: rgba(255,255,255,.8); padding: 10px 16px; }
    .dropdown-menu a:hover { background: rgba(255,255,255,.1); color: #fff; }
    /* Don't let the page scroll behind an open menu */
    body.nav-open { overflow: hidden; }
}
  
  
/* ===========================================
    FOOTER — MODERN
=========================================== */
.site-footer--modern {background: linear-gradient(180deg, #0b1e36 0%, #060d1b 100%);color: #fff;}
.site-footer--modern .footer-main {padding: 64px 0 40px;}
.site-footer--modern .social-link {width: 38px;height: 38px;border-radius: 10px;background: rgba(255,255,255,.06);transition: all .3s ease;}
.site-footer--modern .social-link:hover {background: var(--color-orange);color: #fff;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(237,137,54,.3);}
.footer-bottom--modern {border-top: none;position: relative;padding: 20px 0;}
.footer-bottom--modern::before {content: '';position: absolute;top: 0;left: 5%;right: 5%;height: 1px;background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);}
  
/* ---- Footer ---- */
/* .site-footer { background: var(--color-navy); color: rgba(255,255,255,.75); } */
.footer-main { padding: 64px 0 40px; }
.footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.footer-main .footer-inner {display: grid;grid-template-columns: 1.5fr 1fr 1fr 1.2fr;gap: 40px;}
.footer-logo-text {font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 10px;}
.footer-tagline { font-size: .875rem; color: rgba(255,255,255,.6); margin-bottom: 20px; }
.footer-social { display: flex; gap: 12px; margin-top: 7px;}
.social-link {
    width: 36px; height: 36px; border-radius: 8px;background: rgba(255,255,255,.08); display: flex;
    align-items: center; justify-content: center;color: rgba(255,255,255,.6); transition: all .2s; text-decoration: none;
}
.social-link:hover { background: var(--color-orange); color: #fff; }
.footer-col h4 {font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em;color: rgba(255,255,255,.4); font-weight: 600; margin-bottom: 16px;}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a {color: rgba(255,255,255,.7); text-decoration: none; font-size: .875rem;transition: color .2s;}
.footer-col ul a:hover { color: #fff; }
.footer-contact li {display: flex; align-items: center; gap: 10px;}
.footer-contact svg { flex-shrink: 0; color: var(--color-orange); }
.footer-bottom {/*border-top: 1px solid rgba(255,255,255,.08);*/ padding: 20px 0;}
.footer-bottom .footer-inner {display: flex; justify-content: space-between; align-items: center;}
.footer-bottom p { font-size: .8125rem; color: rgba(255,255,255,.4); }
.footer-bottom a { color: rgba(255,255,255,.5); text-decoration: none; font-size: .8125rem; }
.footer-bottom a:hover { color: #fff; }
  
/* ---- Back to Top Button ---- */
.back-to-top {
    position: fixed; bottom: 32px; right: 32px; z-index: 999;width: 48px; height: 48px; border-radius: 50%;background: var(--color-dark-blue); color: #fff;
    border: none; cursor: pointer;display: flex; align-items: center; justify-content: center;box-shadow: 0 4px 12px rgba(0,0,0,.2);
    opacity: 0; transform: translateY(20px); pointer-events: none;transition: opacity .3s, transform .3s, background .2s;
}
.back-to-top.visible {opacity: 1; transform: translateY(0); pointer-events: auto;}
.back-to-top:hover { background: var(--color-orange); }
  
/* ===========================================
    FOOTER — RESPONSIVE
=========================================== */
/* .footer-inner already supplies max-width + gutters; the outer element padding only double-padded the footer (and overflowed it on small screens). */
.site-footer--modern { padding: 0; }
@media (max-width: 900px) {
    .footer-main .footer-inner {grid-template-columns: 1fr 1fr;gap: 32px 24px;}
    .footer-main { padding: 48px 0 32px; }
}
@media (max-width: 600px) {
    .footer-main .footer-inner {grid-template-columns: 1fr;gap: 28px;}
    .footer-main { padding: 40px 0 28px; }
    /* .footer-col.footer-brand { text-align: center; } */
    .footer-social { /*justify-content: center;*/margin-top: 7px; }
    .footer-bottom .footer-inner {flex-direction: column;gap: 8px;text-align: center;}
}
/* Back-to-top: smaller and tucked in on phones */
@media (max-width: 600px) {.back-to-top {bottom: 20px; right: 20px;width: 44px; height: 44px;}}