/* Homepage "Four Solutions" product lineup: four product cards in a row, each
   with the unit as a transparent cut-out standing on a muted surface, all
   bottom-aligned on one ground line so the row reads like a showroom.
   Built to the /brand page "Product card" spec (title, description, price,
   primary + secondary buttons side by side; card radius .5rem, 1px #E0E0E0
   border, soft shadow) with one deliberate exception: buttons use the card
   radius (.5rem) instead of the page's 2px, per Dan 2026-09-26.
   Loaded by index.html (baked) and by assets/vorp-configure-cta.js (runtime,
   which also rebuilds the markup whenever React re-renders the section).
   Images: /images/home/lineup-*.webp, trimmed from /images/build/*-stage.webp. */

.vorp-home-oldgrid{display:none!important}

.vorp-lineup{
  --ink:#0A0E14; --primary:#0089E0; --text:#3D3D3D; --caption:#515151;
  --border:#E0E0E0; --line:#D4D4D4; --muted:#F5F5F5;
  --radius-card:.5rem; --radius-btn:.5rem;
  --shadow-soft:0 2px 8px -2px rgb(0 0 0 / .08);
  --shadow-medium:0 4px 16px -4px rgb(0 0 0 / .12),0 2px 4px -1px rgb(0 0 0 / .06);
  --fh:clamp(190px,21vw,290px);      /* figure box height: every unit stands in a box this tall */
  margin:0 auto; max-width:80rem;
  font-family:Inter,system-ui,sans-serif;
}
.vorp-lineup-track{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem; align-items:stretch;
}

/* card */
.vorp-lineup-item{
  display:flex;flex-direction:column;min-width:0;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:box-shadow .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);
}
.vorp-lineup-item:hover{box-shadow:var(--shadow-medium);transform:translateY(-2px)}

/* muted surface the unit stands on; bottom-aligned so all four share a ground line */
.vorp-lineup-fig{
  display:flex;align-items:flex-end;justify-content:center;
  height:var(--fh);padding:1.75rem 1.25rem 0;box-sizing:content-box;
  background:linear-gradient(180deg,#ffffff 0%,var(--muted) 100%);
  border-bottom:1px solid var(--border);
  text-decoration:none;
}
.vorp-lineup-fig img{
  display:block;width:auto;max-width:100%;
  height:calc(var(--fh) * var(--s,1));object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 14px 10px rgba(10,14,20,.16));
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.vorp-lineup-item:hover .vorp-lineup-fig img{transform:translateY(-4px)}
.vorp-lineup-fig:focus-visible{outline:3px solid var(--primary);outline-offset:-3px}

.vorp-lineup-info{display:flex;flex-direction:column;flex:1;padding:1.25rem 1.25rem 1.4rem;text-align:left}

/* eyebrow: Inter SemiBold uppercase .75rem, .18em tracking, Action Blue */
.vorp-lineup-spec{
  margin:0 0 .5rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  font-size:.72rem;line-height:1.3;color:var(--primary);
}
/* title: Barlow Condensed Bold, uppercase */
.vorp-lineup-name{
  margin:0 0 .5rem;font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.35rem,1.7vw,1.6rem);line-height:1.1;letter-spacing:.02em;color:var(--ink);
}
.vorp-lineup-blurb{margin:0 0 1rem;font-size:.9rem;line-height:1.55;color:var(--text);flex:1}
/* price: Barlow Condensed 1.45rem */
.vorp-lineup-price{
  font-family:'Barlow Condensed',system-ui,sans-serif;font-size:1.45rem;line-height:1.1;color:var(--ink);
  margin-bottom:.8rem;
}
.vorp-lineup-cta{display:flex;gap:.5rem;flex-wrap:wrap}
.vorp-lineup .vorp-btn{
  display:inline-flex;align-items:center;justify-content:center;flex:1 1 6.5rem;min-width:0;
  padding:.7rem .75rem;border-radius:var(--radius-btn);
  font-family:'Barlow Condensed',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em;
  font-size:.95rem;font-weight:600;line-height:1;text-decoration:none;
  border:1.5px solid transparent;transition:background .13s,border-color .13s,color .13s;
}
.vorp-lineup .vorp-btn-p{background:var(--primary);color:#fff}
.vorp-lineup .vorp-btn-p:hover{background:var(--ink)}
.vorp-lineup .vorp-btn-s{background:#fff;color:var(--ink);border-color:var(--line)}
.vorp-lineup .vorp-btn-s:hover{border-color:var(--ink)}

/* tablets: two by two */
@media (min-width:640px) and (max-width:1023px){
  .vorp-lineup{--fh:clamp(220px,30vw,300px)}
  .vorp-lineup-track{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* phones: one row you swipe through, snapping card by card */
@media (max-width:639px){
  .vorp-lineup{--fh:min(230px,56vw)}
  .vorp-lineup-track{
    display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:.25rem .25rem 1rem;scrollbar-width:none;
  }
  .vorp-lineup-track::-webkit-scrollbar{display:none}
  .vorp-lineup-item{flex:0 0 min(80vw,320px);scroll-snap-align:center}
  .vorp-lineup-item:first-child{margin-left:calc((100% - min(80vw,320px)) / 2)}
  .vorp-lineup-item:last-child{margin-right:calc((100% - min(80vw,320px)) / 2)}
}
.vorp-lineup-hint{display:none;margin:.25rem 0 0;text-align:center;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8B9AB0}
@media (max-width:639px){.vorp-lineup-hint{display:block}}

@media (prefers-reduced-motion:reduce){
  .vorp-lineup-item,.vorp-lineup-fig img{transition:none}
  .vorp-lineup-item:hover,.vorp-lineup-item:hover .vorp-lineup-fig img{transform:none}
}