/*  Wave landing — mirrors WaveApp/Customer/MarketplaceHome.swift.
    Rule one: the iOS app is the source of truth. Every color is a token from
    styles.css (which carries WaveTheme verbatim), every gradient is a WaveKit
    gradient, radii are cardRadius 20 / chipRadius 12, and the display face is
    ui-rounded — SF Rounded on Apple platforms, where the app lives.

    Mobile-first: base styles are the phone layout, then two additive layers —
    @media (min-width: 700px)  tablet: wider cards, 2-col bands, rail chevrons
    @media (min-width: 1080px) desktop: 1180 content column, 3-col reviews    */

.home { font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }

/* ============================== nav ============================== */

.home nav.glass {
  position: sticky; top: 0; z-index: 30;
  max-width: 1180px; margin: 0 auto; border-radius: 0 0 14px 14px;
  /* the shared .glass is 55% opaque — right for a resting card, wrong for a
     bar that scrolls over headings. Opaque enough to occlude. */
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  flex-wrap: nowrap; overflow-x: auto; gap: 16px; padding: 12px 18px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.home nav.glass::-webkit-scrollbar { display: none }
.home nav.glass > * { flex: none; white-space: nowrap }
.home { scroll-padding-top: 84px }

/* ============================== hero ============================== */
/* Layer order is the app's ZStack, made explicit:
   gradient(0) < aurora(1) < photo(2) < dark scrim(3) < brand tint(4) < content(5) */

.hero-full {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-height: 540px; padding: 92px 20px 58px;
  border-radius: 0 0 24px 24px;
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 52%, #7c3aed 100%);
}
.aurora { position: absolute; inset: -25%; z-index: 1; filter: blur(70px); opacity: .6 }
.aurora i { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%;
            animation: drift 14s ease-in-out infinite alternate }
.aurora i:nth-child(1){ background:#60a5fa; top:-6%;  left:2%;   animation-delay:0s }
.aurora i:nth-child(2){ background:#a855f7; top:18%;  right:-4%; animation-delay:-3.5s }
.aurora i:nth-child(3){ background:#22d3ee; bottom:-8%;left:22%; animation-delay:-7s }
.aurora i:nth-child(4){ background:#818cf8; bottom:4%; right:16%;animation-delay:-10.5s }
@keyframes drift { to { transform: translate3d(6%,-5%,0) scale(1.14) } }

/* real listing photography, crossfaded exactly like the app's HomeHero */
.hero-photo { position: absolute; inset: 0; z-index: 2 }
.hero-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .9s ease-in-out;
}
.hero-photo img.on { opacity: 1 }
.hero-full::before {   /* vertical darkener — headline always clears */
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(180deg, rgba(2,6,23,.34), rgba(2,6,23,.62));
}
.hero-full::after {    /* brand tint — pulls any photo back toward the palette */
  content: ""; position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(135deg, rgba(37,99,235,.30), rgba(124,58,237,.34));
}
/* lift ONLY the content — a bare `.hero-full > *` here once flattened the
   aurora and the photo layer to position:relative and killed them both */
.hero-full > h1, .hero-full > .sub, .hero-full > .seg,
.hero-full > .hero-search, .hero-full > .trust, .hero-full > .hero-dots {
  position: relative; z-index: 5;
}

.hero-full h1 {
  margin: 0 0 12px; color: #fff; font-weight: 800;
  font-size: clamp(36px, 7.5vw, 58px); line-height: 1.02;
  letter-spacing: -.03em; text-wrap: balance;
  text-shadow: 0 2px 22px rgba(2,6,23,.45);
}
.hero-full .sub {
  margin: 0 auto; max-width: 32ch; color: rgba(255,255,255,.95);
  font-size: 17px; line-height: 1.5; font-weight: 500;
  text-shadow: 0 1px 12px rgba(2,6,23,.4);
}

.seg {
  display: inline-flex; gap: 4px; padding: 4px; margin: 24px 0 12px;
  border-radius: 999px; background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.seg a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
         padding: 10px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 700;
         color: #fff; transition: background .18s, color .18s }
.seg a[aria-current="page"] { background: #fff; color: #2563eb }
.seg a:not([aria-current]):hover { background: rgba(255,255,255,.14) }

.hero-search {
  display: flex; align-items: center; gap: 10px; width: min(560px, 100%);
  margin: 0 auto; padding: 0 8px 0 18px; height: 56px; border-radius: 999px;
  background: rgba(255,255,255,.17); border: 1px solid rgba(255,255,255,.38);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.hero-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none;
                     color: #fff; font: inherit; font-size: 16px }
.hero-search input::placeholder { color: rgba(255,255,255,.75) }
.hero-search svg { flex: none; opacity: .9 }
.hero-search button {
  flex: none; border: 0; cursor: pointer; font: inherit; font-weight: 800;
  font-size: 14px; color: #2563eb; background: #fff; border-radius: 999px;
  padding: 10px 20px; transition: transform .15s;
}
.hero-search button:hover { transform: scale(1.03) }

/* trust chips — every number rendered from the database, never asserted */
.trust { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px }
.trust span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: #fff;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.trust .star { color: #fbbf24 }

.hero-dots { display: flex; gap: 6px; justify-content: center; margin-top: 22px }
.hero-dots i { width: 6px; height: 6px; border-radius: 999px;
               background: rgba(255,255,255,.45); transition: all .35s }
.hero-dots i.on { width: 18px; background: #fff }

/* ============================== rails ============================== */

.wrap-x { max-width: 1180px; margin: 0 auto; padding: 0 16px }

.rail-scroll, .card-rail {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 10px 16px; margin: 0 -16px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.rail-scroll::-webkit-scrollbar, .card-rail::-webkit-scrollbar { display: none }
.card-rail { scroll-snap-type: x mandatory; padding-bottom: 12px }

.cat-rail { position: relative; z-index: 6; margin-top: -22px }
.pill {
  flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 12px 26px -16px rgba(15,23,42,.4);
  transition: transform .16s, border-color .16s;
}
.pill:hover { transform: translateY(-1px) }
.pill svg { width: 15px; height: 15px; color: var(--primary) }
.pill[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff }
.pill[aria-pressed="true"] svg { color: #fff }
.pill .n { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
           background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2) }
.pill[aria-pressed="true"] .n { background: rgba(255,255,255,.24); color: #fff }

/* shelf head — the app's RailHeader: gradient glyph tile + title + subtitle */
.shelf { margin: 36px 0; position: relative }
.shelf-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px }
.glyph { flex: none; width: 40px; height: 40px; border-radius: 12px;
         display: grid; place-items: center; color: #fff;
         box-shadow: 0 8px 18px -8px currentColor }
.glyph svg { width: 20px; height: 20px }
.g-blue   { background: linear-gradient(135deg,#2563eb,#4f46e5) }
.g-green  { background: linear-gradient(135deg,#05883c,#038661) }
.g-amber  { background: linear-gradient(135deg,#aa6600,#cd4b00) }
.g-violet { background: linear-gradient(135deg,#8324ff,#b230f3) }
.g-teal   { background: linear-gradient(135deg,#007fa3,#008480) }
.shelf-head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.018em; color: var(--ink) }
.shelf-head p  { margin: 2px 0 0; font-size: 13px; color: var(--ink-2) }
.shelf-head .spacer { flex: 1 }

/* desktop chevrons (hidden on touch widths) */
.rail-nav { display: none; gap: 8px }
.rail-nav button {
  width: 36px; height: 36px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  display: grid; place-items: center; transition: transform .15s, border-color .15s;
}
.rail-nav button:hover { transform: scale(1.06); border-color: var(--primary); color: var(--primary) }
.rail-nav svg { width: 16px; height: 16px }

/* -------- service cards: photography-first -------- */
.scard {
  flex: none; width: 248px; scroll-snap-align: center; text-decoration: none;
  border-radius: 20px; overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); color: inherit; position: relative;
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 16px 36px -24px rgba(15,23,42,.5);
  transition: transform .22s ease, box-shadow .22s ease;
}
.scard:hover { transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 26px 52px -26px rgba(15,23,42,.55) }
.scard .thumb { height: 140px; position: relative; overflow: hidden;
                background: linear-gradient(135deg,#2563eb,#4f46e5,#7c3aed) }
.scard .thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
                    transition: transform .5s ease }
.scard:hover .thumb img { transform: scale(1.05) }
.scard .thumb .mark { position: absolute; inset: 0; display: grid; place-items: center;
                      color: rgba(255,255,255,.3) }
.scard .thumb .mark svg { width: 44px; height: 44px }
.scard .badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 11px; font-weight: 800; color: #fff; padding: 4px 10px; border-radius: 999px;
  background: rgba(2,6,23,.45); border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.scard .body { padding: 13px 14px 15px }
.scard h3 { margin: 0 0 7px; font-size: 15.5px; font-weight: 700; line-height: 1.32;
            color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em }
.scard .row { display: flex; align-items: center; gap: 8px; justify-content: space-between }
.price { font-size: 13.5px; font-weight: 800; color: var(--primary); white-space: nowrap;
         background: color-mix(in srgb, var(--primary) 13%, transparent);
         padding: 4px 10px; border-radius: 999px }
.rate { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px;
        font-weight: 800; color: #b45309; white-space: nowrap }
:root:not([data-x]) .rate { }
@media (prefers-color-scheme: dark) { .rate { color: #fbbf24 } }
.vendor { font-size: 12px; font-weight: 700; color: var(--primary);
          text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis;
          white-space: nowrap }

/* -------- pro cards: cover + avatar monogram overlap -------- */
.pcard {
  flex: none; width: 252px; scroll-snap-align: center; text-decoration: none;
  border-radius: 20px; overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); color: inherit;
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 16px 36px -24px rgba(15,23,42,.5);
  transition: transform .22s ease, box-shadow .22s ease;
}
.pcard:hover { transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 26px 52px -26px rgba(15,23,42,.55) }
.pcard .cover { height: 108px; position: relative; overflow: hidden;
                background: linear-gradient(135deg,#2563eb,#7c3aed) }
.pcard .cover img { width: 100%; height: 100%; object-fit: cover; display: block;
                    transition: transform .5s ease }
.pcard:hover .cover img { transform: scale(1.05) }
.pcard .ava {
  width: 46px; height: 46px; border-radius: 999px; margin: -23px 0 0 14px;
  position: relative; z-index: 2; display: grid; place-items: center; overflow: hidden;
  color: #fff; font-size: 17px; font-weight: 800;
  background: linear-gradient(135deg,#2563eb,#7c3aed);
  border: 3px solid var(--surface);
  box-shadow: 0 6px 14px -6px rgba(15,23,42,.5);
}
.pcard .ava img { width: 100%; height: 100%; object-fit: cover }
.pcard .body { padding: 8px 14px 15px }
.pcard h3 { margin: 0 0 3px; font-size: 15.5px; font-weight: 800; color: var(--ink);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pcard .meta { font-size: 12.5px; color: var(--ink-2); margin-bottom: 9px;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pcard .row { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.pcard .go { font-size: 12.5px; font-weight: 800; color: var(--primary) }

/* -------- product cards -------- */
.gcard {
  flex: none; width: 186px; scroll-snap-align: center; text-decoration: none;
  border-radius: 20px; overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); color: inherit;
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 14px 30px -22px rgba(15,23,42,.5);
  transition: transform .22s ease, box-shadow .22s ease;
}
.gcard:hover { transform: translateY(-4px) }
.gcard .thumb { height: 122px; overflow: hidden;
                background: linear-gradient(135deg,#007fa3,#008480) }
.gcard .thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
                    transition: transform .5s ease }
.gcard:hover .thumb img { transform: scale(1.05) }
.gcard .body { padding: 11px 12px 13px }
.gcard h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; line-height: 1.3;
            color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em }

/* ============================== ecosystem ============================== */

.eco { margin: 52px 0; padding: 30px 22px 26px; border-radius: 24px;
       background: var(--surface); border: 1px solid var(--border);
       box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 20px 48px -32px rgba(15,23,42,.5) }
.eco > h2 { margin: 0 0 6px; font-size: clamp(24px, 4vw, 30px); font-weight: 800;
            letter-spacing: -.022em; color: var(--ink); text-wrap: balance }
.eco > p  { margin: 0 0 26px; color: var(--ink-2); max-width: 62ch; font-size: 15.5px; line-height: 1.55 }
.flow { display: grid; grid-template-columns: 1fr; gap: 12px; position: relative }
.step { position: relative; padding: 18px 16px 16px; border-radius: 16px;
        background: linear-gradient(180deg,
          color-mix(in srgb, var(--primary) 7%, transparent),
          color-mix(in srgb, var(--accent, #7c3aed) 5%, transparent));
        border: 1px solid var(--border) }
.step .dot {   /* the JobWorkflowBar stage rail, carried over */
  position: absolute; top: -13px; left: 16px; width: 26px; height: 26px;
  border-radius: 999px; display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 800;
  background: linear-gradient(135deg,#2563eb,#7c3aed);
  box-shadow: 0 0 0 4px var(--surface), 0 6px 14px -6px rgba(37,99,235,.7);
}
.step .k { font-size: 11px; font-weight: 800; letter-spacing: .11em;
           text-transform: uppercase; color: var(--primary) }
.step h3 { margin: 5px 0 4px; font-size: 15.5px; font-weight: 800; color: var(--ink) }
.step p  { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2) }

/* ============================== reviews ============================== */

.rvw-grid { display: grid; grid-template-columns: 1fr; gap: 12px }
.rvw {
  position: relative; padding: 18px 18px 16px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 14px 32px -24px rgba(15,23,42,.45);
  overflow: hidden;
}
.rvw::before { content: "\201C"; position: absolute; top: -14px; right: 8px;
               font-size: 110px; font-weight: 800; line-height: 1;
               color: color-mix(in srgb, var(--primary) 9%, transparent); pointer-events: none }
.rvw .stars { color: #f59e0b; font-size: 14px; letter-spacing: 2px; margin-bottom: 8px }
.rvw p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; color: var(--ink);
         display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden }
.rvw .who { display: flex; align-items: center; gap: 10px }
.rvw .who .ava { width: 34px; height: 34px; border-radius: 999px; flex: none;
                 display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800;
                 background: linear-gradient(135deg,#2563eb,#7c3aed) }
.rvw .who b { display: block; font-size: 13.5px; color: var(--ink) }
.rvw .who span { display: block; font-size: 12px; color: var(--ink-2) }

/* ============================== quote banner ============================== */
/* MarketplaceHome.quoteBanner, verbatim */
.quote-banner {
  position: relative; overflow: hidden; display: block; text-decoration: none;
  margin: 44px 0; padding: 24px 20px; min-height: 150px; border-radius: 20px;
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 52%, #7c3aed 100%);
  box-shadow: 0 16px 36px -18px rgba(37,99,235,.55);
}
.quote-banner .bub { position: absolute; right: -14px; top: -6px;
                     color: rgba(255,255,255,.14); transform: rotate(-8deg) }
.quote-banner .bub svg { width: 130px; height: 130px }
.quote-banner h2 { margin: 0 0 6px; font-size: 21px; font-weight: 800;
                   letter-spacing: -.018em; color: #fff }
.quote-banner p { margin: 0 0 14px; font-size: 14px; color: rgba(255,255,255,.9);
                  max-width: 46ch; line-height: 1.5 }
.quote-banner .cta { display: inline-block; font-size: 13.5px; font-weight: 800;
                     color: #2563eb; background: #fff; border-radius: 999px;
                     padding: 9px 18px; transition: transform .15s }
.quote-banner:hover .cta { transform: scale(1.04) }

/* ============================== phones ============================== */

.shots { display: grid; grid-template-columns: 1fr; gap: 34px; margin: 40px 0 6px;
         justify-items: center; align-items: start }
.phone { position: relative; width: 240px }
.phone .glass-body { position: relative; border-radius: 42px; padding: 9px;
  background: linear-gradient(160deg,#3f4756,#171b24 60%);
  box-shadow: 0 2px 4px rgba(15,23,42,.2), 0 34px 64px -30px rgba(15,23,42,.75) }
.phone .screen { position: relative; overflow: hidden; border-radius: 34px;
                 aspect-ratio: 240/506; background: var(--bg);
                 display: flex; flex-direction: column }
.phone .island { position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
                 width: 74px; height: 21px; border-radius: 999px; background: #0b0e14; z-index: 5 }
.phone figcaption { margin-top: 13px; text-align: center; font-size: 13px; color: var(--ink-2) }
.phone figcaption b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 800;
                      margin-bottom: 2px }

/* miniature app chrome (unchanged language, photo-backed hero) */
.mk-hero { padding: 34px 12px 14px; text-align: center; color: #fff; position: relative;
           overflow: hidden; border-radius: 0 0 14px 14px;
           background: linear-gradient(135deg,#2563eb,#4f46e5,#7c3aed) }
.mk-hero .ph { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: .85 }
.mk-hero .scrim { position: absolute; inset: 0;
                  background: linear-gradient(180deg, rgba(2,6,23,.3), rgba(37,99,235,.5)) }
.mk-hero > b, .mk-hero > span, .mk-hero > .mk-seg, .mk-hero > .mk-search { position: relative; z-index: 2 }
.mk-hero b { display: block; font-size: 13px; font-weight: 800; letter-spacing: -.01em }
.mk-hero span { display: block; font-size: 8.5px; opacity: .92; margin-top: 2px }
.mk-seg { display: inline-flex; gap: 3px; margin-top: 8px; padding: 2px;
          border-radius: 999px; background: rgba(255,255,255,.22) }
.mk-seg i { font-style: normal; font-size: 7.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px }
.mk-seg i.on { background: #fff; color: #2563eb }
.mk-seg i:not(.on) { color: #fff }
.mk-search { margin: 7px 8px 0; height: 17px; border-radius: 999px;
             background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.34) }
.mk-pills { display: flex; gap: 4px; padding: 0 8px; margin-top: -7px; position: relative; z-index: 3 }
.mk-pills i { font-style: normal; font-size: 7px; font-weight: 700; padding: 4px 8px;
              border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
              color: var(--ink); white-space: nowrap }
.mk-pills i.on { background: var(--primary); border-color: var(--primary); color: #fff }
.mk-row { padding: 10px 8px 0 }
.mk-row > b { display: block; font-size: 9px; font-weight: 800; color: var(--ink); margin-bottom: 5px }
.mk-cards { display: flex; gap: 6px }
.mk-card { flex: none; width: 66px; border-radius: 9px; overflow: hidden;
           background: var(--surface); border: 1px solid var(--border) }
.mk-card .t { height: 36px; background: linear-gradient(135deg,#2563eb,#7c3aed);
              position: relative; overflow: hidden }
.mk-card .t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.mk-card u { display: block; height: 4px; margin: 5px 5px 3px; border-radius: 2px;
             background: var(--border); text-decoration: none }
.mk-card u.s { width: 60% }
.mk-tabs { margin-top: auto; display: flex; justify-content: space-around; padding: 7px 0 9px;
           border-top: 1px solid var(--border); background: var(--surface) }
.mk-tabs i { width: 13px; height: 13px; border-radius: 4px; background: var(--border); font-style: normal }
.mk-tabs i.on { background: var(--primary) }
.mk-map { flex: 1; position: relative;
  background:
    radial-gradient(circle at 30% 26%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 42%),
    repeating-linear-gradient(0deg, var(--border) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 34px),
    var(--surface) }
.mk-pin { position: absolute; width: 21px; height: 21px; border-radius: 50%;
          display: grid; place-items: center; color: #fff; font-size: 8px; font-weight: 800;
          box-shadow: 0 4px 10px -3px rgba(15,23,42,.6); transform: translate(-50%,-50%) }
.mk-pin.b { background: #2563eb } .mk-pin.g { background: #05883c } .mk-pin.a { background: #cd4b00 }
.mk-pin.sel { width: 26px; height: 26px;
              box-shadow: 0 0 0 4px rgba(147,197,253,.6), 0 6px 14px -3px rgba(15,23,42,.6) }
.mk-callout { position: absolute; padding: 6px 8px; border-radius: 8px; background: var(--surface);
              border: 1px solid var(--border); box-shadow: 0 10px 22px -12px rgba(15,23,42,.6);
              transform: translate(-50%,-100%); white-space: nowrap }
.mk-callout b { display: block; font-size: 8px; font-weight: 800; color: var(--ink) }
.mk-callout span { font-size: 7px; color: var(--ink-2) }
.mk-stage { display: flex; align-items: center; gap: 4px; padding: 10px 10px 8px }
.mk-stage i { flex: none; width: 15px; height: 15px; border-radius: 50%;
              background: var(--border); font-style: normal }
.mk-stage i.done { background: var(--primary) }
.mk-stage u { flex: 1; height: 2px; background: var(--border); text-decoration: none }
.mk-stage u.done { background: var(--primary) }
.mk-lines { padding: 4px 10px }
.mk-lines div { display: flex; justify-content: space-between; padding: 5px 0;
                border-bottom: 1px solid var(--border) }
.mk-lines span { display: block; height: 5px; border-radius: 3px; background: var(--border) }
.mk-total { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px 0 }
.mk-total b { font-size: 12px; font-weight: 800; color: var(--ink) }
.mk-total span { font-size: 8px; color: var(--ink-2) }
.mk-pay { margin: 9px 10px 0; padding: 7px; border-radius: 9px; text-align: center;
          background: linear-gradient(135deg,#05883c,#038661); color: #fff;
          font-size: 9px; font-weight: 800 }
.mk-act { display: flex; align-items: center; gap: 6px; margin-bottom: 6px }
.mk-act i { flex: none; width: 8px; height: 8px; border-radius: 50%;
            background: var(--border); font-style: normal }
.mk-act i.d { background: var(--primary) }
.mk-act u { display: block; height: 4px; width: 78%; border-radius: 2px;
            background: var(--border); text-decoration: none }

/* ============================== footer ============================== */

.foot { margin-top: 60px; border-top: 1px solid var(--border);
        background: color-mix(in srgb, var(--surface) 60%, transparent) }
.foot-in { max-width: 1180px; margin: 0 auto; padding: 36px 16px 28px;
           display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px }
.foot .brandcol { grid-column: 1 / -1 }
.foot .brandcol .brand { font-size: 19px; font-weight: 800; color: var(--primary); text-decoration: none }
.foot .brandcol p { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); max-width: 34ch; line-height: 1.5 }
.foot h4 { margin: 0 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
           text-transform: uppercase; color: var(--ink-3) }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.foot a { font-size: 14px; color: var(--ink-2); text-decoration: none }
.foot a:hover { color: var(--primary) }
.foot .legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px;
               align-items: center; padding-top: 18px; margin-top: 4px;
               border-top: 1px solid var(--border); font-size: 12.5px; color: var(--ink-3) }
.foot .legal a { font-size: 12.5px; color: var(--ink-3) }

/* ============================== reveal ============================== */
/* hidden state lives ONLY under no-preference, so reduced-motion (and no-JS
   after the fallback below) never hides content */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(16px);
            transition: opacity .6s ease, transform .6s ease }
  .js .rv.in { opacity: 1; transform: none }
}
@media (prefers-reduced-motion: reduce) {
  .aurora i { animation: none }
  .scard, .pcard, .gcard, .scard .thumb img, .pcard .cover img { transition: none }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }

/* ============================== tablet ≥700 ============================== */

@media (min-width: 700px) {
  .hero-full { min-height: 580px; padding: 104px 24px 64px }
  .rail-nav { display: flex }
  .scard { width: 264px } .scard .thumb { height: 148px }
  .pcard { width: 266px }
  .flow { grid-template-columns: 1fr 1fr; gap: 22px 14px }
  .rvw-grid { grid-template-columns: 1fr 1fr }
  .shots { grid-template-columns: repeat(3, 1fr); gap: 20px }
  .phone { width: 218px }
  .foot-in { grid-template-columns: 1.4fr 1fr 1fr 1fr; padding: 44px 20px 30px }
  .foot .brandcol { grid-column: auto }
  .quote-banner { padding: 30px 28px }
  .quote-banner h2 { font-size: 24px }
}

/* ============================== desktop ≥1080 ============================== */

@media (min-width: 1080px) {
  .hero-full { min-height: 620px; border-radius: 0 0 28px 28px }
  .hero-full .sub { font-size: 18px; max-width: 40ch }
  .scard { width: 272px }
  .flow { grid-template-columns: repeat(4, 1fr) }
  /* connector line through the stage dots — the workflow rail at page scale */
  .flow::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px;
                  height: 2px; background: linear-gradient(90deg,#2563eb,#7c3aed);
                  opacity: .25 }
  .rvw-grid { grid-template-columns: repeat(3, 1fr) }
  .phone { width: 236px }
  .eco { padding: 38px 34px 30px }
}

.scard .thumb img, .gcard .thumb img, .pcard .cover img { position: relative; z-index: 1 }

/* On a phone, four chips wrap to three rows — and two of them say what the
   sub-headline just said. Keep the two that carry data. */
@media (max-width: 480px) {
  .trust span:nth-child(n+3) { display: none }
}