:root {
  --blue: #268BFF;
  --blue-dark: #1868D6;
  --ink: #141518;
  --ink-soft: #4A4E57;
  --bg-light: #F7F7F7;
  --bg-card: #F2F5FA;
  --teal: #26D3B0;
  --pro-bg: #DAF1E9;
  --pro-accent: #1FAE86;
  --white: #FFFFFF;
  --max: 1320px;
  --pad: clamp(20px, 5vw, 96px);
  --section-pad: 47px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
  width: 100%;
}

img {
  max-width: 100%;
  display: block;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

section {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* ---------------- HERO ----------------
     .hero is a viewport-height-aware flex column: min-height (not a
     fixed height) gives it a floor of one screen on desktop, while
     .hero-image is the single flexible element that grows to absorb
     leftover space or shrinks the store image (via object-fit) to fit
     a short viewport. Because it's min-height, content that genuinely
     needs more room (e.g. the mobile territory card) simply pushes the
     section taller instead of clipping. */
.hero {
  background: var(--bg-light);
  padding-top: clamp(24px, 3vw, 44px);
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.hero .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-height: 0;
}

.logo {
  height: 32px;
  align-self: flex-start;
  margin-bottom: 28px;
  flex: 0 0 auto;
}

.hero-heading {
  text-align: center;
  max-width: 760px;
  flex: 0 0 auto;
}

.hero-heading h1 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.14;
  color: var(--ink);
}

.hero-heading h1 .accent {
  color: var(--blue);
}

.hero-heading p {
  margin-top: 14px;
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--ink-soft);
  font-weight: 500;
}

/* territory / lead-quiz card — mobile mockup only */
.territory-card {
  display: none;
}

.hero-image {
  position: relative;
  width: 100%;
  max-width: 1460px;
  margin-top: clamp(16px, 2vw, 32px);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hero-store {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 994px;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  margin: 0 auto;
}

/* full-bleed skyline: breaks out to the true viewport width (not the
     narrower store-image box) via the 100vw + left:50%/translateX(-50%)
     trick, while staying bottom-anchored to the store's ground line so
     the two images always share the same "street level" at any width */
.hero-city {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: 120vw;
  max-width: 128vw;
  height: auto;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
}

.hero-tags {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 24px var(--pad) 38px;
  max-width: 900px;
  margin: 0 auto;
}

.hero-tags span {
  background: var(--white);
  border: 1px solid #E4E4E4;
  border-radius: 999px;
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.tag-break {
  display: none;
}

/* inset to the same content width as the logo/heading/pills (not
     full browser width) - matches the PSD reference exactly */
.hero-divider {
  flex: 0 0 auto;
  height: 6px;
  background: var(--blue);
  width: 99%;
}

.hero-divider-mobile {
  display: none;
}

.hero-city-mobile {
  display: none;
}

/* ---------------- MILLIONS SECTION ---------------- */
.millions .top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-end;
}

.millions h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--ink);
  margin-left: 159px;
}

.millions h2+h2 {
  margin-top: -2px;
  line-height: 1;
}

.millions .sub {
  margin-top: 9px;
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 600;
  color: var(--ink);
  margin-left: 159px;
}

.millions .sub-desc {
  margin-top: -1px;
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 500;
  margin-left: 159px;
}

.journey {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  margin-right: 150px;
}

.journey span.arrow {
  color: var(--blue);
  font-weight: 600;
}

.strip {
  margin-top: 32px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, transparent 0%, transparent 58%, var(--bg-light) 58%, var(--bg-light) 100%), linear-gradient(90deg, var(--teal), var(--blue));
  padding: 32px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  width: 80%;
  margin-left: 110px;
}

/* flex-basis:0 (not a fixed px, and not `width:calc(25% - 15px)` sized
     via a non-zero basis) so the 4 images always split the row evenly by
     construction - the browser's own flex distribution accounts for the
     gaps exactly. A fixed 200px basis wrapped the 4th image onto its own
     row (growing huge) at viewport widths (~1024-1290px and ~1750px+)
     where the container was wide enough for four calc(25%-15px) columns
     but not four fixed 200px ones; even switching to `width:calc(...)`
     with flex-basis:auto left a zero-slack fit that could still tip into
     wrapping (~769-990px) from sub-pixel rounding. flex-basis:0 has no
     such edge case. */
.strip img {
  min-width: 140px;
  flex: 1 1 0%;
  border-radius: 14px;
  object-fit: cover;
  aspect-ratio: 1.28/1;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

/* mobile circular cluster — hidden on desktop */
.strip-mobile {
  display: none;
}

.together {
  text-align: center;
  margin-top: 64px;
}

.together h3 {
  font-size: clamp(24px, 3vw, 34px);
  margin-left: 418px;
  margin-top: -32px;
}

.together p {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  margin-left: 418px;
}

/* forces "eBikeGo" / "brings it together." onto two lines on mobile
     only — hidden on desktop so the heading keeps its single-line look */
.mobile-break {
  display: none;
}

/* ---------------- TRUST + BRAND ----------------
     One full-width section carries a single background that starts
     light gray and turns white partway down (behind the product
     cards) - the blue "banner" is a smaller centered box floating
     inside it, not a full-width section of its own. */
.trust-brand {
  background: linear-gradient(to bottom, #F7F7F7 0%, #F7F7F7 68%, #FFFFFF 68%, #FFFFFF 100%);
}

.trust-banner {
  position: relative;
  width: min(960px, calc(100% - 40px));
  margin: -48px auto;
  min-height: 120px;
  background: var(--blue);
  border-radius: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 32px;
}

.trust-banner h2 {
  color: var(--white);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.25;
  max-width: 780px;
  margin-top: -43px;
}

.trust-pills {
  position: relative;
  /* z-index: 2; */
  margin-top: 12px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.trust-pills span {
  background: var(--ink);
  color: var(--white);
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 14px;
  font-weight: 600;
}

.brand-row {
  margin-top: 40px;
}

.brand-heading {
  text-align: center;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--ink);
}

.cards-grid {
  margin-top: 32px;
  width: min(860px, calc(100% - 32px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.prod-card {
  background: var(--bg-card);
  border: 1px solid rgba(20, 21, 24, 0.06);
  border-radius: -1px;
  padding: 16px 16px 20px;
  display: flex;
  flex-direction: column;
}

/* decorative end-clones only exist for the mobile peek-loop illusion;
     the desktop grid must keep showing exactly the 4 real cards */
.prod-card-clone {
  display: none;
}

.prod-card img {
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 1.35/1;
  object-fit: contain;
  background: var(--bg-card);
}

.prod-card h4 {
  margin-top: 14px;
  color: var(--blue);
  font-size: 20px;
  font-weight: 700;
  text-align: left;
}

.prod-card p {
  margin-top: 3px;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
  text-align: left;
}

/* ---------------- STORE FORMAT ---------------- */
.format h2 {
  text-align: center;
  font-size: clamp(20px, 2.4vw, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  letter-spacing: 0.02em;
  margin-top: -40px;
}

.format h2::before,
.format h2::after {
  content: "";
  flex: 1;
  max-width: 180px;
  height: 0;
  border-top: 2px dashed var(--blue);
}

.format-grid {
  margin-top: 40px;
  max-width: 1018px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.format-grid .price-card {
  flex: 1 1 0;
  min-width: 0;
}

/* main card body: rectangular, no large rounding - only a hint of
     softness on the corners */
.price-card {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.price-card.lite {
  background: #F1F5FA;
}

.price-card.pro {
  background: #DDF2EB;
}

.price-head {
  position: relative;
  z-index: 1;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 25px;
  overflow: hidden;
}

/* text must render ABOVE the diagonal split: ::after is generated
     content and paints last (i.e. on top) by default, so both header
     children get an explicit z-index above it regardless of DOM order */
.price-head>* {
  position: relative;
  z-index: 3;
}

/* header split into two regions along one diagonal line running from
     (45%, top) to (52%, bottom) - a full trapezoid on the right of that
     line, NOT a small corner wedge. Needs all 4 corners of that trapezoid
     (top-left, top-right, bottom-right, bottom-left) - a missing 4th
     point previously collapsed this into a triangle that only touched
     the header's top-right corner at a single point, leaving a sliver of
     the card's own background visible as a small wedge right at that
     corner instead of a clean white fill. */
.price-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  /* clip-path: polygon(45% 0, 100% 0, 100% 100%, 52% 100%); */
  clip-path: polygon(45% 0, 100% 0, 100% 64%, 53% 63%);
  z-index: 0;
  pointer-events: none;
}

.price-head .tier {
  font-size: clamp(27px, 3.2vw, 50px);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.lite .tier {
  color: var(--blue);
}

.pro .tier {
  color: var(--pro-accent);
}

.price-head .amount {
  font-size: clamp(20px, 3vw, 35px);
  font-weight: 700;
  color: #777777;
  white-space: nowrap;
  margin-top: -23px;
}

.price-divider {
  margin: 9px 8px;
  border-top: 1px solid rgba(20, 21, 24, 0.08);
}

/* block (not inline-block) so it collapses cleanly with .price-divider's
     margin instead of picking up a phantom whitespace line-box from the
     newline between the two divs in markup - that phantom gap is what was
     stopping the negative margin-top from actually pulling the pill up
     onto the divider line. width:fit-content + margin-left:auto is what
     lets a block box sit flush-right without the divider's fixed-px hack. */
.price-sqft {
  position: relative;
  z-index: 2;
  display: block;
  width: fit-content;
  margin: -26px 25px 14px auto;
  background: var(--white);
  padding: 6px 34px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: #1c69c3;
}

.price-feats {
  padding: 0 24px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 25px;
}

.price-feats div {
  border-left: 2px solid var(--blue);
  padding-left: 14px;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 500;
  color: #1c69c3;
}

/* The colored card body (.price-card's own background) shows through
     every child by default, including the footer. Giving .price-footer
     its OWN opaque white background is what visually separates it into
     a distinct white strip below the colored body - no HTML change or
     restructuring needed, the footer just paints over the card's color
     for its own box. .price-feats' bottom padding above is what gives
     the colored body a clean, deliberate edge right before this starts. */
.price-footer {
  position: relative;
  z-index: 1;
  background: var(--white);
  margin-top: 0;
  height: 54px;
  padding: 0 24px 0 0;
  display: flex;
  align-items: stretch;
}

/* fixed proportions, not flex:1 - the CTA must NOT grow to fill the
     row, it sits at ~55% width with participation text taking the rest.
     No left padding on the footer so the CTA sits flush against the
     card's bottom-left edge, matching the reference. */
.price-cta {
  width: 66%;
  height: 54px;
  display: flex;
  align-items: center;
  padding-left: 24px;
  font-weight: 700;
  font-size: 22px;
  color: var(--white);
  clip-path: polygon(0 0, 88% 0, 63% 129%, 0% 100%);
  margin-top: -11px;
}

.lite .price-cta {
  background: var(--blue);
}

.pro .price-cta {
  background: var(--pro-accent);
}

.price-min {
  width: 48%;
  padding-left: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
}

.price-min span {
  line-height: 1.15;
}

.price-min b {
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

/* ---------------- NETWORK VISION ---------------- */
.network {
  background: var(--blue);
  color: var(--white);
  overflow: hidden;
}

.network .wrap {
  position: relative;
}

.network-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  padding-top: 12px;
}

.network-copy {
  flex: 1 1 220px;
  align-self: flex-start;
}

.network-image {
  flex: 1.3 1 380px;
  display: flex;
  justify-content: center;
}

.network-copy h2 {
  font-size: clamp(26px, 3.6vw, 44px);
  margin-left: 85px;
}

.network-copy .sub {
  margin-top: 5px;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 500;
  margin-left: 95px;
  line-height: 1;
}

.network-image img {
  width: 100%;
  max-width: 460px;
  height: auto;
  border-radius: 8px;
  margin: 0 auto;
}

.network-note {
  flex: 1 1 220px;
  align-self: center;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 700;
  line-height: 1.35;
}

.network-note .small {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.9;
}

/* desktop: three-column layout (left copy / center image / right note),
     all three top-aligned to the same row so the left and right text
     sit level with each other regardless of image height */
@media (min-width:1025px) {

  /* capping the middle track at the image's own max-width (460px)
       instead of letting it stretch (1fr) keeps the whole 3-column
       group compact on wide screens, with the text hugging the image
       instead of the grid stretching it apart; max-width + margin:auto
       centers that compact group within the wider .wrap */
  .network-top {
    display: grid;
    grid-template-columns: 220px minmax(380px, 460px) 220px;
    align-items: start;
    gap: 20px;
    max-width: 940px;
    margin: 0 auto;
  }

  .network-copy,
  .network-image {
    flex: none;
    align-self: flex-start;
  }

  /* right note sits vertically centered against the image, while the
       left copy stays anchored to the top — matches the reference where
       "1,500+ STORES..." sits lower, level with the image's midpoint,
       not level with "THE NETWORK VISION" */
  .network-note {
    flex: none;
    align-self: center;
    font-weight: 300;
    font-size: 22px;
  }
}

.network-story {
  text-align: center;
  margin-top: 20px;
}

.network-copy .sub {
  margin-top: 18px;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 600;
}

.network-story h3 {
  font-size: clamp(24px, 3vw, 34px);
  max-width: 760px;
  margin: 0 auto;
}

.network-story .partner {
  margin-top: 14px;
  font-weight: 600;
  font-size: 16px;
  opacity: 0.95;
}

/* form */
.form-card {
  margin-top: 25px;
  max-width: 570px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.form-row input {
  flex: 1 1 240px;
}

.form-card input,
.form-card textarea {
  width: 100%;
  background: rgba(20, 105, 210, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 0 14px;
  height: 34px;
  color: var(--white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
}

.form-card input::placeholder,
.form-card textarea::placeholder {
  color: rgba(255, 255, 255, 0.85);
}

.form-card textarea {
  height: 75px;
  padding: 10px 14px;
  resize: vertical;
}

.submit-btn {
  margin-top: 12px;
  background: #F5F5F5;
  color: var(--blue);
  border: none;
  border-radius: 999px;
  height: 38px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  width: 100%;
}

.submit-btn:hover {
  background: var(--white);
}

.form-success {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
}

.form-error-box {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 80, 80, 0.6);
  color: var(--white);
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

.form-error-box ul {
  margin: 0;
  padding-left: 18px;
}

/* ---------------- FOOTER ---------------- */
footer {
  background: var(--white);
  padding: 26px var(--pad);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
}

footer .links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

footer .links>* {
  margin-right: 18px;
}

footer .links>*:last-child {
  margin-right: 0;
}

/* ================= DESKTOP FLUID TUNING ================= */

@media (max-width:1366px) {
  :root {
    --section-pad: 72px;
  }
}

/* ================= TABLET (1024px) ================= */

@media (max-width:1024px) {
  :root {
    --section-pad: 64px;
    --pad: 32px;
  }

  .hero {
    padding-top: 36px;
  }

  .hero-image {
    margin-top: 28px;
  }

  .format-grid {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .format-grid .price-card {
    flex: 1 1 100%;
  }

  /* Below the ≥1025px 3-column grid there's no longer room for
       copy/image/note side by side, so stack and center them the same
       way the ≤768px mobile composition already does - this range
       (769-1024px, e.g. iPad Mini/Air, Surface Pro 7) previously had no
       matching treatment of its own: it inherited the desktop base
       styles' left-aligned, indented (margin-left:85-95px) heading/sub
       and an image forced ABOVE the heading via order:-1, instead of
       heading -> image -> note. */
  .network-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
  }

  /* the base (desktop 3-column) rule sets align-self:flex-start on
       .network-copy for the row layout - left uncleared here, it beats
       .network-top's align-items:center and pins the whole copy block
       to the left edge instead of centering it as a column-flex item,
       even though text-align:center makes the text look centered
       *within its own shrink-to-fit box* at narrow widths where that
       box is nearly as wide as the container anyway. */
  .network-copy {
    flex: 1 1 100%;
    align-self: center;
    text-align: center;
  }

  .network-copy h2 {
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.05;
    font-weight: 800;
    text-align: center;
    margin: 0;
  }

  .network-copy .sub {
    margin-top: 10px;
    margin-left: 0;
    font-size: clamp(20px, 2.6vw, 25px);
    line-height: 1.05;
    font-weight: 500;
    text-align: center;
  }

  .network-image {
    order: 2;
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 22px auto 0;
    flex: none;
  }

  .network-note {
    order: 3;
    width: 100%;
    flex: 1 1 100%;
    text-align: center;
    margin: 18px auto 0;
    color: var(--white);
  }
}

@media (max-width:992px) {
  .millions .top {
    flex-direction: column;
    align-items: flex-start;
  }

  .journey {
    font-size: 14px;
  }

  /* low enough that all 4 images still fit on one row all the way down
       to 769px (where .strip is swapped for the mobile cluster) - 140px
       left a dead zone around 769-990px where the 4th image wrapped onto
       its own row and grew huge */
  .strip img {
    min-width: 105px;
  }
}

/* ================= MOBILE COMPOSITION (<=768px) =================
     The mobile mockup is a distinct composition, not a shrunk desktop
     layout. Elements below switch structure/visibility rather than
     just scaling down. */

@media (max-width:768px) {
  :root {
    --section-pad: 52px;
    --pad: 1px;
  }

  /* Hero */
  .hero {
    padding-top: 30px;
    text-align: center;
  }

  .hero .wrap {
    align-items: center;
  }

  .logo {
    align-self: center;
    width: 132px;
    height: auto;
    margin-bottom: 16px;
  }

  .hero-heading p {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }

  /* .hero-image becomes a non-positioned (static) wrapper on mobile so
       .hero-city's containing block is .hero itself, not this narrower
       store box — that lets the illustration act as a true background
       layer spanning behind both the wizard card and the store. */
  .hero-image {
    margin-top: 12px;
    position: static;
  }

  .hero-store {
    max-width: 375px;
    margin: 14px auto;
    position: relative;
    z-index: 3;
    width: 116%;
  }

  /* the desktop skyline swaps for a separate mobile-only illustration
       (a13.png) here - hide the desktop image and give .hero-city-mobile
       its own positioning instead. a13.png is a small 390x92 graphic
       with its illustration drawn at the LEFT/RIGHT EDGES of that canvas
       (not a wide full-bleed background like the desktop skyline), so
       unlike the desktop image it must render close to its natural
       width - stretching it out full-bleed (as the desktop image needs)
       would push those edge illustrations off-screen and show only the
       blank middle of the graphic. Positioned to peek out on both sides
       of the territory-card, just above the store photo below it. */
  .hero-city {
    display: none;
  }

  .hero-city-mobile {
    display: block;
    position: absolute;
    top: 349px;
    bottom: auto;
    left: 0;
    transform: none;
    width: 100%;
    max-width: none;
    height: auto;
    z-index: 0;
    pointer-events: none;
  }

  .territory-card {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 5;
    width: 283px;
    max-width: calc(100vw - 32px);
    min-height: 270px;
    margin-top: 32px;
    margin-left: auto;
    margin-right: auto;
    background: #F8FAFC;
    border: 1px solid #CBD5E1;
    border-radius: 24px;
    box-shadow: 0 10px 26px rgba(20, 21, 24, 0.08);
    padding: 16px 24px 14px;
    text-align: left;
  }

  .territory-card .wizard-steps,
  .territory-card .wizard-success {
    order: 1;
  }

  .territory-card .tc-progress {
    order: 2;
    margin-top: 14px;
    margin-bottom: 0;
    padding-top: 12px;
    /* border-top:1px solid rgba(20,21,24,0.08); */
  }

  .territory-card .wizard-error {
    order: 3;
  }

  .territory-card .wizard-nav {
    order: 4;
  }

  .territory-card .tc-bar {
    height: 5px;
    border-radius: 3px;
    background: #ECECEC;
    overflow: hidden;
  }

  .territory-card .tc-fill {
    width: 17%;
    height: 100%;
    background: var(--blue);
    border-radius: 3px;
    transition: width .2s ease;
  }

  .territory-card .tc-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-soft);
  }

  /* step 1 (territory) gets the blue centered title + flat white pill
       options from the mockup — label left, price right, no radio dot */
  .wizard-steps .wizard-step:first-child .wizard-q {
    color: var(--blue);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
  }

  .wizard-steps .wizard-step:first-child .wizard-opt {
    justify-content: space-between;
    background: var(--white);
    border: 1px solid rgba(20, 21, 24, 0.06);
    box-shadow: 0 1px 4px rgba(20, 21, 24, 0.05);
    border-radius: 10px;
    padding: 8px 12px;
    min-height: 30px;
    font-size: 14.5px;
  }

  .wizard-steps .wizard-step:first-child .wizard-radio {
    display: none;
  }

  .wizard-steps .wizard-step:first-child .wizard-opt-label {
    font-weight: 600;
    color: var(--ink);
  }

  .wizard-steps .wizard-step:first-child .wizard-opt-price {
    font-weight: 700;
    color: var(--ink);
    font-size: 14.5px;
  }

  .wizard-steps .wizard-step:first-child .wizard-opt.selected {
    background: #EAF3FF;
    border-color: var(--blue);
  }

  .wizard-step {
    display: none;
  }

  .wizard-step.active {
    display: block;
  }

  .wizard-q {
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.35;
    margin-bottom: 12px;
  }

  .wizard-opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-light);
    border: 1.5px solid transparent;
    border-radius: 9px;
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
  }

  .wizard-opt input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .wizard-input {
    display: block;
    width: 100%;
    background: var(--bg-light);
    border: 1.5px solid transparent;
    border-radius: 9px;
    padding: 11px 12px;
    margin-bottom: 8px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
  }

  .wizard-input:focus {
    outline: none;
    border-color: var(--blue);
    background: #EAF3FF;
  }

  .wizard-input::placeholder {
    color: var(--ink-soft);
  }

  .wizard-radio {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #C9CFD6;
    position: relative;
  }

  .wizard-opt.selected {
    background: #EAF3FF;
    border-color: var(--blue);
    color: var(--ink);
  }

  .wizard-opt.selected .wizard-radio {
    border-color: var(--blue);
  }

  .wizard-opt.selected .wizard-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--blue);
  }

  .wizard-success {
    display: none;
    text-align: center;
    padding: 6px 0 2px;
  }

  .wizard-success.active {
    display: flex;
    flex-direction: column;
    padding: 6px 0 10px;
  }

  /* the normal wizard-step state needs the card's 270px floor height,
       but the success/"currently exploring" panels are much shorter —
       without this, min-height:270px on .territory-card left a large
       empty gap below the "Back to Form" button */
  .territory-card:has(.wizard-success.active) {
    min-height: 0;
  }

  .wizard-success .big {
    font-weight: 700;
    font-size: 20px;
    color: var(--blue);
    margin-bottom: 5px;
  }

  .wizard-success p {
    font-size: 18px;
    color: var(--ink-soft);
    font-weight: 500;
    line-height: 1.35;
    max-width: 190px;
    margin: 0 auto;
  }

  .wizard-success-back {
    margin-top: 24px;
    align-self: center;
    width: 158px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: var(--blue);
    color: var(--white);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
  }

  .wizard-error {
    margin-top: 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: #D5342C;
    background: #FCEBEA;
    border-radius: 8px;
    padding: 8px 10px;
  }

  .wizard-nav {
    display: flex;
    gap: 10px;
    margin-top: 14px;
  }

  .wizard-btn {
    flex: 1;
    padding: 11px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
  }

  .wizard-back {
    background: var(--bg-light);
    color: var(--ink-soft);
  }

  .wizard-back[hidden] {
    display: none;
  }

  .wizard-next {
    background: var(--blue);
    color: var(--white);
  }

  .wizard-next[hidden] {
    display: none;
  }

  /* Next only shows on the final step now (every other step auto-advances
     on selection) - when it's hidden, Back is the row's only child and
     flex:1 would stretch it across the full width; size it to its content
     and keep it on the left instead, like a normal "go back" control. */
  .wizard-nav:has(.wizard-next[hidden]) .wizard-back {
    flex: 0 0 auto;
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero-tags {
    gap: 8px;
    padding: 16px var(--pad) 34px;
    position: relative;
    z-index: 6;
  }

  .hero-tags span {
    padding: 4px 22px 6px;
    font-size: 16px;
    background: var(--bg-light);
    border-color: transparent;
    box-shadow: none;
    color: gray;
  }

  /* .hero-tags span (specificity 0,1,1) would otherwise beat a plain
       .tag-break (0,1,0) and win the border/background/padding fight —
       .hero-tags .tag-break (0,2,0) outranks it regardless of source
       order */
  .hero-tags .tag-break {
    display: block;
    flex-basis: 100%;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .hero {
    background: none;
  }

  .hero-divider {
    display: none;
  }

  .hero-divider-mobile {
    display: block;
    width: 100%;
    height: auto;
    margin-top: -38px;
  }

  /* ---------------- MILLIONS (mobile composition) ---------------- */
  .millions {
    text-align: center;
    padding-top: 28px;
    padding-bottom: 40px;
  }

  .millions .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .millions h2 {
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    font-size: 25px;
    line-height: 1.0;
  }

  .millions .sub {
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;
    font-size: 18px;
    text-align: center;
  }

  .millions .sub-desc {
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    max-width: 293px;
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
  }

  .journey {
    margin-right: 0;
    margin-top: 14px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    white-space: nowrap;
  }

  /* swap the rectangular desktop strip for the circular cluster */
  .strip {
    display: none;
  }

  .strip-mobile {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 22px;
  }

  .cluster {
    position: relative;
    width: 338px;
    max-width: 100%;
    height: 350px;
    margin: 0 auto;
  }

  .cluster .c-img {
    position: absolute;
    z-index: 2;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 0;
    box-shadow: none;
  }

  .cluster .c1 {
    top: 0;
    left: 0;
  }

  .cluster .c2 {
    top: 0;
    right: 0;
  }

  .cluster .c3 {
    bottom: 0;
    left: 0;
  }

  .cluster .c4 {
    bottom: 0;
    right: 0;
  }

  /* Dotted connectors: <img> elements can't reliably carry generated
       content, so each of the 3 dotted paths is its own independent
       pseudo-element — deliberately NOT sharing a box/corner between two
       lines (an earlier L-shaped top+right combo produced a visible
       diagonal artifact at the shared corner). The two horizontal lines
       live on .cluster (before/after); the vertical line lives on
       .strip-mobile (the only other non-<img> element available), offset
       from its horizontal center by the same amount .cluster's C2/C4
       column sits off ITS OWN center — since .strip-mobile centers
       .cluster via flex, the two centers coincide, so that offset is
       reusable relative to .strip-mobile's 50% mark. Each box runs
       CENTER-to-CENTER between circles; the circles sit above
       (z-index:2) and their own opaque bodies clip the portion of the
       line that falls inside them, leaving only the gap visible. */
  .cluster::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 70px;
    top: 70px;
    width: 180px;
    height: 0;
    border-top: 2px dotted var(--blue);
    pointer-events: none;
  }

  .cluster::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 70px;
    top: 280px;
    width: 180px;
    height: 0;
    border-top: 2px dotted var(--blue);
    pointer-events: none;
  }

  .strip-mobile::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: calc(50% + 90px);
    top: 70px;
    width: 0;
    height: 210px;
    border-left: 2px dotted var(--blue);
    pointer-events: none;
  }

  .cluster .c-arrow {
    position: absolute;
    z-index: 3;
    width: 26px;
    height: auto;
    display: block;
    pointer-events: none;
  }

  .cluster .a1,
  .cluster .a3 {
    width: 16px;
  }

  .cluster .a1 {
    left: 50%;
    top: 70px;
    transform: translate(-50%, -50%);
    width: 13px;
  }

  .cluster .a2 {
    left: 260px;
    top: 175px;
    transform: translate(-50%, -50%);
    width: 24px;
  }

  .cluster .a3 {
    left: 50%;
    top: 280px;
    transform: translate(-50%, -50%);
    width: 13px;
  }

  .together {
    margin-top: 22px;
    text-align: center;
  }

  .together h3 {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    font-size: 24px;
    line-height: 1.05;
  }

  .mobile-break {
    display: block;
  }

  .together p {
    margin-left: auto;
    margin-right: auto;
    margin-top: 9px;
    max-width: 375px;
    font-size: 17px;
    line-height: 1.3;
  }

  /* ---------------- TRUST (mobile: full-bleed blue block) ----------------
       .trust-banner and .trust-pills each paint their own solid blue and
       sit flush (zero margin) against one another so the block reads as
       one continuous blue area; .trust-brand's desktop gradient is swapped
       for solid white so nothing shows through beneath them. */
  .trust-brand {
    background: var(--white);
    margin-top: -40px;
  }

  .trust-banner {
    position: relative;
    width: 100%;
    min-height: auto;
    margin: -19px auto;
    border-radius: 0;
    background: var(--blue);
    padding: 40px 15px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .trust-banner h2 {
    max-width: 350px;
    margin: 0 auto;
    text-align: center;
    color: var(--white);
    font-size: 25px;
    line-height: 1.05;
    font-weight: 800;
  }

  .trust-banner h2 .trust-sub-line {
    font-weight: 500;
  }

  .trust-pills {
    width: 100%;
    background: var(--blue);
    margin: 0;
    padding: 18px 15px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .trust-pills span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 18px;
    background: #141518;
    color: var(--white);
    border-radius: 999px;
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
  }

  .trust-pills span:nth-child(1) {
    width: 277px;
    max-width: calc(100vw - 30px);
  }

  .trust-pills span:nth-child(2) {
    width: 348px;
    max-width: calc(100vw - 30px);
  }

  .trust-pills span:nth-child(3) {
    width: 305px;
    max-width: calc(100vw - 30px);
  }

  /* Brand heading: force "One Brand." / "Every Age. Every Use." onto
       two lines via the shared .mobile-break <br> (hidden on desktop) */
  .brand-heading {
    max-width: 340px;
    margin: 0 auto 34px;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--ink);
  }

  /* Brand: peek-carousel — full-bleed to the true viewport width (same
       100vw + calc(50%-50vw) technique used elsewhere) so partial cards
       are visible past the .wrap padding on both edges. Horizontal
       scroll/snap behavior itself is unchanged from before. */
  .cards-grid {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 18px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 16px 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .cards-grid::-webkit-scrollbar {
    display: none;
  }

  .prod-card {
    flex: 0 0 min(300px, 79vw);
    scroll-snap-align: center;
    height: 370px;
    padding: 17px;
    border: 1px solid rgba(20, 21, 24, 0.08);
    border-radius: 0;
  }

  /* reveal the decorative end-clones only in the mobile carousel */
  .prod-card-clone {
    display: flex;
  }

  .prod-card img {
    width: 100%;
    height: 240px;
    margin: 15px auto 0;
    aspect-ratio: auto;
    object-fit: contain;
  }

  .prod-card h4 {
    margin-top: 18px;
    padding-left: 20px;
    font-size: 29px;
    line-height: 1;
    font-weight: 700;
  }

  .prod-card p {
    margin-top: 7px;
    padding-left: 20px;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 500;
  }

  /* ---------------- STORE FORMAT (mobile) ---------------- */
  .format {
    padding-top: 12px;
    padding-bottom: 35px;
  }

  .format .wrap {
    padding-left: 18px;
    padding-right: 18px;
    margin-top: -28px;
  }

  /* the desktop rule makes h2 a flex row with flex:1 dashes flanking
       the text — fine for one line, but here the text wraps to two
       lines and eats almost the whole row, squeezing the dashes to
       near-zero width (why they were invisible). Absolutely positioning
       the dashes instead sidesteps that competition for space entirely:
       they're pinned to the h2 box's edges at a fixed height matching
       the second line ("STORE FORMAT"), independent of how wide the
       wrapped text actually is. */
  .format h2 {
    position: relative;
    display: block;
    width: 100%;
    max-width: 345px;
    margin: 0 auto;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0.01em;
  }

  /* top:75% + translateY(-50%) lands on the vertical center of the
       second line for ANY two-line-wrapped heading, regardless of the
       exact font-size/line-height metrics the browser computes — much
       more reliable than guessing a fixed px offset per breakpoint */
  .format h2::before,
  .format h2::after {
    content: "";
    position: absolute;
    top: 86%;
    transform: translateY(-50%);
    width: 57px;
    height: 0;
    border-top: 3px dashed var(--blue);
    max-width: none;
    flex: none;
  }

  .format h2::before {
                left: -85px;
        width: 17%;
  }

  .format h2::after {
           right: -63px;
        width: 18%;
  }

  .format-grid {
    width: 100%;
    max-width: 340px;
    margin-top: 22px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .format-grid .price-card {
    flex: none;
    width: 100%;
    min-width: 0;
    margin-top: 20px;
  }

  /* card becomes a flex column with a fixed floor height (not a cap) so
       .price-footer{margin-top:auto} can pin the CTA/participation row to
       the bottom while the card still grows to fit all its content —
       this is what stops the Pro card's longer feature text from being
       clipped by overflow:hidden */
  .price-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 262px;
    height: auto;
    overflow: hidden;
    border-radius: 3px;
  }

  .price-head {
    height: auto;
    flex: none;
    align-items: flex-start;
    padding: 18px 16px 10px;
  }

  /* the diagonal white wedge is a generated ::after that paints after
       (on top of) the tier/amount text by default — keep it behind them */
  .price-head>* {
    position: relative;
    z-index: 2;
  }

  .price-head::after {
    z-index: 0;
  }

  .price-head .tier {
    font-size: 30px;
  }

  .price-head .amount {
    font-size: 26px;
    margin-top: -17px;
  }

  .price-divider {
    margin: 14px 14px 0;
  }

  /* pulled up with a negative margin so it visually straddles the
       divider line above it, rather than sitting in the gap below it */
  .price-sqft {
    height: auto;
    /* margin: -12px auto 14px; */
            padding: 6px 26px;
        font-size: 13px;
        top: 7px;
  }

  .price-feats {
    min-height: 85px;
    padding: 0 14px;
    gap: 12px 14px;
  }

  .price-feats div {
    border-left: 2px solid var(--blue);
    padding-left: 10px;
    font-size: 14px;
    line-height: 1.25;
  }

  .pro .price-feats div {
    border-left-color: var(--pro-accent);
    color: var(--pro-accent);
  }

  .price-footer {
    flex: none;
    height: 44px;
    margin-top: auto;
    padding: 0;
    display: flex;
    align-items: stretch;
  }

  .price-cta {
    width: 55%;
    height: 44px;
    padding: 0 0 0 16px;
    display: flex;
    align-items: center;
    font-size: 16px;
    /* clip-path:polygon(0 0, 88% 0, 100% 100%, 0 100%); 
      */
    clip-path: polygon(0 0, 88% 0, 37% 486%, 0 110%);
  }

  /* stacked (label above amount), not the desktop's side-by-side row —
       there isn't enough width in this 45% column for both on one line
       without the nowrap amount overflowing and getting clipped by the
       card's overflow:hidden */
  .price-min {
    width: 45%;
    padding: 0 10px 0 6px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    font-size: 10px;
    line-height: 1.15;
  }

  .network-copy .sub {
    margin-left: 0;
  }

  .network-copy {
    align-self: center;
  }

  .price-min b {
    font-size: 14px;
    white-space: nowrap;
  }

  /* Network vision */
  .network {
    padding-top: 52px;
    padding-bottom: 55px;
  }

  .network-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
  }

  /* base rule's align-self:flex-start (meant for the desktop row
       layout) otherwise beats align-items:center here and pins the
       whole block left instead of centering it - see the ≤1024px
       block above for the full explanation. */
  .network-copy {
    align-self: center;
    text-align: center;
  }

  .network-copy h2 {
    font-size: 30px;
    line-height: 1.05;
    font-weight: 800;
    text-align: center;
    margin: 0;
  }

  .network-copy .sub {
    margin-top: 10px;
    margin-left: 0;
    font-size: 25px;
    line-height: 1.05;
    font-weight: 500;
    text-align: center;
  }

  .network-image {
    order: 2;
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 22px auto 0;
  }

  .network-image img {
    width: 100%;
    max-width: 401px;
    margin: 22px auto
  }

  .network-note {
    order: 3;
    width: 100%;
    flex: 1 1 100%;
    text-align: center;
    margin: 18px auto 0;
    color: var(--white);
  }

  .network-note .big {
    font-size: 25px;
    line-height: 1.05;
    font-weight: 500;
    text-align: center;
    color: var(--white);
  }

  .network-note .small {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--white);
    opacity: 1;
  }

  /* Mobile mockup does not show the story heading / form — keep the
       markup (for easy re-enable) but hide it to match the reference. */
  .network-story {
    display: none;
  }

  .form-row input {
    flex: 1 1 100%;
  }

  /* Footer: only the copyright line appears in the mobile mockup */
  footer {
    min-height: 80px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  footer>div:first-child {
    font-size: 20px;
    font-weight: 500;
    color: var(--ink-soft);
    white-space: nowrap;
  }

  footer .links {
    display: none;
  }
}

@media (max-width:576px) {

  h1,
  .hero-heading h1 {
    font-size: 26px;
  }

  .millions h2 {
    font-size: 38px;
  }

  .together h3 {
    font-size: 35px;
    margin-top: 51px;
  }

  .trust-banner h2 {
    font-size: 25px;
  }

  .network-copy h2 {
    font-size: 28px;
  }

  .network-story h3 {
    font-size: 22px;
  }
}

@media (max-width:480px) {
  .strip img {
    width: 100%;
    flex: 1 1 100%;
  }
}

@media (max-width:425px) {
  .hero {
    padding-top: 26px;
  }

  .logo {
    height: 42px;
    margin-bottom: 16px;
    width: 179px;
  }

  .hero-heading h1 {
    font-size: 31px;
  }

  .hero-heading p {
    font-size: 15px;
    margin-top: 10px;
  }

  .hero-image {
    margin-top: 12px;
  }

  .hero-tags {
    padding: 14px var(--pad) 26px;
    gap: 6px;
  }
}

@media (max-width:375px) {
  :root {
    --pad: 16px;
  }

  .hero-tags span {
    padding: 7px 12px;
    font-size: 10.5px;
  }
}

@media (max-width:360px) {
  .hero-heading h1 {
    font-size: 22px;
  }

  .hero-tags span {
    padding: 6px 10px;
    font-size: 10px;
  }

  .hero-tags {
    gap: 6px;
  }

  /* recomputed circle/connector geometry for the narrower cluster —
       see the base ≤768px block for how each coordinate is derived */
  .cluster {
    width: 300px;
    height: 328px;
  }

  .cluster .c-img {
    width: 130px;
    height: 130px;
  }

  .cluster::before {
    left: 65px;
    top: 65px;
    width: 170px;
  }

  .cluster::after {
    left: 65px;
    top: 263px;
    width: 170px;
  }

  .strip-mobile::before {
    left: calc(50% + 85px);
    top: 65px;
    height: 198px;
  }

  .cluster .c-arrow {
    width: 24px;
  }

  .cluster .a1,
  .cluster .a3 {
    width: 15px;
  }

  .cluster .a1 {
    top: 65px;
  }

  .cluster .a2 {
    left: 235px;
    top: 164px;
  }

  .cluster .a3 {
    top: 263px;
  }

  .network-image {
    max-width: 345px;
  }

  .network-image img {
    max-width: 345px;
  }

  /* Store Format and Network Vision scaled down ~90% from the ≤768px
       base so the recently-enlarged text/cards keep fitting comfortably
       instead of cramping or wrapping oddly at this narrower width */
  .format h2 {
    font-size: 29px;
  }

  .price-card {
    min-height: 270px;
  }

  .price-head .tier {
    font-size: 27px;
  }

  .price-head .amount {
    font-size: 14px;
  }

  .price-sqft {
    font-size: 12px;
  }

  .price-feats div {
    font-size: 13px;
  }

  .price-cta {
    font-size: 14px;
  }

  .price-min {
    font-size: 9px;
  }

  .price-min b {
    font-size: 13px;
  }

  .network-copy h2 {
    font-size: 27px;
  }

  .network-copy .sub {
    font-size: 20px;
  }

  .network-note .big {
    font-size: 22px;
  }

  .network-note .small {
    font-size: 14px;
  }
}

@media (max-width:320px) {
  .hero-heading h1 {
    font-size: 20px;
  }

  .territory-card {
    padding: 14px;
  }

  .cluster {
    width: 270px;
    height: 295px;
  }

  .cluster .c-img {
    width: 118px;
    height: 118px;
  }

  .cluster::before {
    left: 59px;
    top: 59px;
    width: 152px;
  }

  .cluster::after {
    left: 59px;
    top: 236px;
    width: 152px;
  }

  .strip-mobile::before {
    left: calc(50% + 76px);
    top: 59px;
    height: 177px;
  }

  .cluster .c-arrow {
    width: 22px;
  }

  .cluster .a1,
  .cluster .a3 {
    width: 14px;
  }

  .cluster .a1 {
    top: 59px;
  }

  .cluster .a2 {
    left: 211px;
    top: 148px;
  }

  .cluster .a3 {
    top: 236px;
  }

  .journey {
    font-size: 9px;
  }

  .network-image {
    width: calc(100vw - 24px);
    max-width: none;
  }

  .network-image img {
    max-width: none;
  }

  footer>div:first-child {
    font-size: 18px;
  }

  /* Store Format and Network Vision scaled down ~80% from the ≤768px
       base — see the ≤360px block above for the same reasoning */
  .format h2 {
    font-size: 26px;
  }

  .price-card {
    min-height: 240px;
  }

  .price-head .tier {
    font-size: 24px;
  }

  .price-head .amount {
    font-size: 13px;
  }

  .price-sqft {
    font-size: 10px;
  }

  .price-feats div {
    font-size: 11px;
  }

  .price-cta {
    font-size: 13px;
  }

  .price-min {
    font-size: 8px;
  }

  .price-min b {
    font-size: 11px;
  }

  .network-copy h2 {
    font-size: 24px;
  }

  .network-copy .sub {
    font-size: 18px;
  }

  .network-note .big {
    font-size: 20px;
  }

  .network-note .small {
    font-size: 13px;
  }
}

/* the base ≤768px rule above (-85px/-63px) is only safe from ~500px up -
   below that the h2 box has less and less clearance to the wrap's edge
   (and below ~370px the h2 itself gets squeezed narrower than its own
   290px max-width, shrinking that clearance further still), so the same
   fixed offsets overflow the page anywhere from 320px up to the 395px
   band above. Worst case in this range is 320px, where the h2 box fills
   almost the full wrap width and only the wrap's own 18px padding is
   left to work with - these offsets stay just inside that everywhere
   from 320-394px. */
@media (max-width:394px) {
  .format h2::before {
    left: -20px;
  }
  .format h2::after {
    right: -15px;
  }
  .format h2::before{
    width: 19%;
  }
      .format h2::after{
    width: 19%;
      }
}

@media (min-width:395px) and (max-width:415px) {
   .territory-card {
    width: 315px;
    /* padding: 30px 35px 24px; */
  }
  .hero-store{
    max-width: 406px;
  }
      .cluster .a2 {
        left: 260px;
        width: 21px;

}
    .cluster .a1 {
        width: 12px;
}
.cluster .a3 {
        width: 12px;
}
    /* left/right pulled in from -67px/-83px: at this width the h2's own
       box only has ~57.5px of clearance to the wrap's edge on either
       side, so the old offsets pushed both dashes past the viewport -
       the right one alone by ~25.5px, which was real page-level
       horizontal overflow (not just clipped by overflow-x:hidden on
       real devices, it could rubber-band/scroll into view). */
    .format h2::before {
        left: -52px;
        width: 25%;
    }
    .format h2::after {
        right: -52px;
        width: 27%;
    }
        /* .price-sqft{
          padding: 7px 26px;
        font-size: 12px;
        top: 8px;
        } */
        .price-sqft{
                      padding: 5px 26px;
        font-size: 11px;
        top: 10px;
        }
            .format h2{
              max-width: 299px;
            }
}

@media (min-width:420px) and (max-width:480px) {
  .territory-card {
    width: 350px;
    padding: 30px 35px 24px;
  }

  .hero-store {
    max-width: 450px;
  }

  .format-grid {
   max-width: 395px;
        gap: 35px;
  }

    .cluster .a3 {
        left: 50%;
        top: 281px;
        transform: translate(-50%, -50%);
        width: 13px;

    }
    .cluster .a1 {
        width: 13px;}

  .logo {
    width: 210px;
  }

  .hero-heading {
    margin-top: 20px;
  }

  .wizard-steps .wizard-step:first-child .wizard-q {
    font-size: 25px;
  }

  h1,
  .hero-heading h1 {
    font-size: 34px;
  }

  .hero-heading p {
    max-width: 341px;
    font-size: 18px;
  }

  .hero-city-mobile {
    top: 450px;
  }

  .wizard-steps .wizard-step:first-child .wizard-opt {
    font-size: 18.5px;
  }

  .wizard-q {
    margin-bottom: 32px;
  }

  .hero-tags span {

    font-size: 21px;
  }

  .wizard-btn {
    font-size: 18.5px;
  }

  .millions .sub-desc {
    margin-top: 10px;
  }

  .journey {
    margin-top: 25px;
  }

  .cluster {
    margin: 27px auto;
    width: 373px;
  }

  .cluster .a1 {
    width: 12px;
  }

  .cluster .a2 {
    left: 299px;
            width: 23px;
  }

  .strip-mobile::before {
    left: calc(50% + 112px);
  }

  /* pulled in from -136px/-98px: at the narrow end of this range (420px)
     the h2 box only has ~65px of clearance to the wrap's edge on either
     side, so those offsets pushed both dashes well past the viewport -
     genuine page-level horizontal overflow, not just a clipped visual. */
  .format h2::before {
           left: -60px;
        width: 31%;
        border-top: 3px dashed var(--blue);
  }

  .format h2::after {
   right: -60px;
        width: 32%;
        border-top: 3px dashed var(--blue);

  }
  .format {
    padding-bottom: 43px;
  }

  .price-head .tier {
    font-size: 40px;
  }

  .price-head .amount {
    font-size: 32px;
  }

  .price-feats div {
    font-size: 17px;
  }

  .price-footer {
    height: 34px;
  }

  .price-cta {
            font-size: 22px;
  }

  .price-min {
    padding: 6px 10px 0 6px;

    font-size: 13px;

  }

  .pro .price-feats div {
    color: #1a6ac9;
  }

  .price-sqft {
    font-size: 13px;
    padding: 6px 26px;
       
        top: 8px;
  }
  .format h2{
    max-width: 344px;
  }
  .format {
    padding-bottom: 43px;
  }
}