/* ═══════════════════════════════════════════════════════════════════════════
   MicroSquads — the thin layer on top of Bootstrap + Tailwind.

   Only three kinds of rule belong in here:
     1. component skins Bootstrap ships but we restyle (.btn, .accordion,
        .carousel, .offcanvas)
     2. stateful chrome Tailwind utilities cannot express (the nav's
        transparent → solid transition)
     3. third-party widget overrides (Leaflet)

   Everything else is done with Tailwind utilities in the markup.
   Bump ?v= in lib/shell.php (MS_ASSET_V) when this file changes.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --ms-ink:   #101418;
  --ms-brand: #E23A45;
  --ms-brand-dark: #C22633;
  --ms-gold:  #F5B93B;
}

body.ms9 {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  color: #101418;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.ms9 h1, .ms9 h2, .ms9 h3, .ms9 h4 { font-weight: 800; letter-spacing: -.022em; line-height: 1.08; }
.ms9 a { text-decoration: none; }
.ms9 a:hover { text-decoration: none; }
/* Bootstrap Reboot paints bare <a> link-blue. Only the footer has links with no
   colour utility of their own, so the fix is scoped there — a blanket
   `.ms9 a { color: inherit }` out-specifies Tailwind's text-* utilities and
   silently blanks out anything coloured by one (it ate the nav's Sign in). */
.ms9 footer a { color: inherit; }
.ms9 footer a:hover { color: #fff; }
.ms9 :focus-visible { outline: 3px solid var(--ms-brand); outline-offset: 2px; border-radius: 6px; }

/* ── Nav: transparent over the hero, solid once you scroll ──────────────── */
.ms-nav { background: transparent; transition: background .28s ease, box-shadow .28s ease; }
.ms-nav.is-scrolled, .ms-nav.is-solid { background: var(--ms-ink); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.ms-nav-links a { color: rgba(255,255,255,.82); font-weight: 600; font-size: .95rem; }
.ms-nav-links a:hover { color: #fff; }
.ms-burger { background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; padding: 4px 6px; }
.ms-oc { background: var(--ms-ink); color: #fff; width: 300px; }
.ms-oc a { color: rgba(255,255,255,.85); font-weight: 600; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.ms-oc a:hover { color: #fff; }
.ms-oc .btn { border-bottom: 0; }

/* ── Buttons (Bootstrap .btn, our skin) ─────────────────────────────────── */
.ms9 .btn {
  --bs-btn-focus-box-shadow: none;
  font-weight: 700; border-radius: 10px; padding: 11px 20px;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.ms9 .btn:active { transform: translateY(1px); }
.ms9 .btn-sm { padding: 8px 15px; font-size: .9rem; border-radius: 9px; }
.ms9 .btn-lg { padding: 15px 28px; font-size: 1.06rem; border-radius: 12px; }

.btn-brand { background: var(--ms-brand); color: #fff; border: 0; }
.btn-brand:hover, .btn-brand:focus { background: var(--ms-brand-dark); color: #fff; }
.btn-ink { background: var(--ms-ink); color: #fff; border: 0; }
.btn-ink:hover { background: #23292F; color: #fff; }
.btn-white { background: #fff; color: var(--ms-ink); border: 0; }
.btn-white:hover { background: #F1F2F4; color: var(--ms-ink); }
.btn-outline-ink { background: transparent; color: var(--ms-ink); border: 1.5px solid #D7DBE0; }
.btn-outline-ink:hover { background: #F5F6F7; color: var(--ms-ink); border-color: #B9C0C8; }
.btn-outline-white { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.42); }
.btn-outline-white:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.ms-hero { position: relative; min-height: 660px; display: flex; align-items: flex-end; }
.ms-hero-bg { position: absolute; inset: 0; overflow: hidden; }
.ms-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.ms-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,20,24,.72) 0%, rgba(16,20,24,.18) 30%, rgba(16,20,24,.34) 58%, rgba(16,20,24,.88) 100%),
    linear-gradient(96deg, rgba(16,20,24,.72) 0%, rgba(16,20,24,.30) 46%, rgba(16,20,24,0) 78%);
}
.ms-hero-in { position: relative; width: 100%; }

/* PadSplit's underline device — a gold rule under the phrase that matters.
   Painted as a background on the span so it sits above the hero image; a
   negative z-index would drop it behind the photograph. */
.ms-mark {
  white-space: nowrap;
  background-image: linear-gradient(var(--ms-gold), var(--ms-gold));
  background-repeat: no-repeat;
  background-size: 100% .14em;
  background-position: 0 calc(100% - .1em);
}

/* ── Location search bar (the hero's primary action) ────────────────────── */
.ms-search {
  display: flex; align-items: stretch; gap: 0; background: #fff;
  border-radius: 14px; box-shadow: 0 18px 44px -18px rgba(0,0,0,.55); overflow: hidden;
}
.ms-search select {
  flex: 1; border: 0; padding: 18px 20px; font-size: 1.02rem; font-weight: 600;
  color: var(--ms-ink); background: #fff; appearance: none; cursor: pointer; min-width: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' fill='none' stroke='%235A6673' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1l5.5 5.5L12 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px;
}
.ms-search select:focus { outline: 0; }
.ms-search button { border: 0; padding: 18px 28px; font-weight: 800; white-space: nowrap; }

/* ── Listing cards (Airbnb pattern: photo, then a tight fact block) ─────── */
.ms-card { background: #fff; border-radius: 16px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.ms-card:hover { transform: translateY(-4px); }
.ms-card-shot { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #ECEEF1; border-radius: 14px; }
.ms-card-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ms-card:hover .ms-card-shot img { transform: scale(1.05); }
.ms-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(255,255,255,.95); color: var(--ms-ink);
  font-size: .74rem; font-weight: 800; letter-spacing: .02em;
  padding: 6px 11px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.16);
}
.ms-badge.hot { background: var(--ms-brand); color: #fff; }

/* Selected location — the map and the slider stay in sync through this class */
.ms-card.is-picked { box-shadow: 0 0 0 3px var(--ms-ink); }

/* ── Bootstrap carousel, restyled as an Airbnb-style rail ───────────────── */
.ms-rail { position: relative; }
.ms-rail .carousel-control-prev, .ms-rail .carousel-control-next {
  width: 42px; height: 42px; top: 50%; transform: translateY(-50%); opacity: 1;
  background: #fff; border-radius: 50%; box-shadow: 0 2px 10px rgba(16,20,24,.24);
  border: 1px solid #E4E7EB; color: var(--ms-ink);
}
.ms-rail .carousel-control-prev { left: -14px; }
.ms-rail .carousel-control-next { right: -14px; }
.ms-rail .carousel-control-prev:hover, .ms-rail .carousel-control-next:hover { background: #F3F4F6; }
.ms-rail .carousel-control-prev-icon, .ms-rail .carousel-control-next-icon { display: none; }
.ms-rail .carousel-control-prev::after, .ms-rail .carousel-control-next::after {
  font-family: 'bootstrap-icons'; font-size: 1.15rem; line-height: 1;
}
.ms-rail .carousel-control-prev::after { content: '\F284'; }
.ms-rail .carousel-control-next::after { content: '\F285'; }
@media (max-width: 991px) {
  .ms-rail .carousel-control-prev { left: 2px; }
  .ms-rail .carousel-control-next { right: 2px; }
}

/* ── Accordion (FAQ) ────────────────────────────────────────────────────── */
.ms9 .accordion { --bs-accordion-border-color: #E4E7EB; --bs-accordion-btn-focus-box-shadow: none; }
.ms9 .accordion-item { border-left: 0; border-right: 0; border-radius: 0 !important; }
.ms9 .accordion-item:first-of-type { border-top: 0; }
.ms9 .accordion-button {
  font-weight: 800; font-size: 1.1rem; padding: 22px 0; background: transparent; color: var(--ms-ink);
  letter-spacing: -.015em;
}
.ms9 .accordion-button:not(.collapsed) { background: transparent; color: var(--ms-ink); box-shadow: none; }
.ms9 .accordion-body { padding: 0 0 22px; color: #4B5560; max-width: 72ch; line-height: 1.65; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.ms9 .form-control, .ms9 .form-select {
  border: 1.5px solid #D9DDE2; border-radius: 10px; padding: 12px 14px; font-weight: 500;
}
.ms9 .form-control:focus, .ms9 .form-select:focus {
  border-color: var(--ms-brand); box-shadow: 0 0 0 4px rgba(226,58,69,.13);
}
.ms9 .form-label { font-weight: 700; font-size: .88rem; margin-bottom: 6px; }

/* Payment method picker — a radio card, not a dropdown */
.ms-pay input { position: absolute; opacity: 0; }
.ms-pay label {
  display: flex; gap: 14px; align-items: flex-start; width: 100%; cursor: pointer;
  padding: 16px 18px; border: 1.5px solid #DDE1E6; border-radius: 12px; transition: all .16s ease;
}
.ms-pay label:hover { border-color: #B9C0C8; background: #FAFBFC; }
.ms-pay input:checked + label { border-color: var(--ms-ink); background: #fff; box-shadow: 0 0 0 1.5px var(--ms-ink); }
.ms-pay input:focus-visible + label { outline: 3px solid var(--ms-brand); outline-offset: 2px; }
.ms-pay .bi { font-size: 1.4rem; line-height: 1; color: var(--ms-ink); }

/* ── Leaflet ────────────────────────────────────────────────────────────── */
.ms-map { height: 100%; min-height: 420px; border-radius: 16px; z-index: 1; }
.ms-map .leaflet-container { font-family: 'Figtree', sans-serif; }
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 10px 30px -10px rgba(16,20,24,.4); }
.leaflet-popup-content { margin: 14px 16px; font-family: 'Figtree', sans-serif; }
.leaflet-control-attribution { font-size: 10px; }
/* Approximate-area marker: a disc, not a pin — these mark the market, not the
   house, and a precise pin would imply an address we do not publish. */
.ms-pin {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--ms-ink); color: #fff; font-weight: 800; font-size: .82rem;
  border: 3px solid #fff; box-shadow: 0 4px 14px rgba(16,20,24,.4);
}
.ms-pin.is-picked { background: var(--ms-brand); transform: scale(1.14); }

@media (max-width: 767px) {
  .ms-hero { min-height: 580px; }
  .ms-search { flex-direction: column; }
  .ms-search button { width: 100%; }
}

/* ── Market / Location picker cards ─────────────────────────────────────── */
.ms-pick {
  display: block; width: 100%; background: #fff; border: 1.5px solid #E1E5EA;
  border-radius: 16px; padding: 22px 22px 20px; cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ms-pick:hover { border-color: var(--ms-ink); transform: translateY(-3px);
                 box-shadow: 0 10px 30px -14px rgba(16,20,24,.35); }
.ms-spots {
  flex: none; display: grid; place-items: center; min-width: 44px; height: 44px;
  padding: 0 10px; border-radius: 12px; background: var(--ms-ink); color: #fff;
  font-weight: 800; font-size: 1.1rem;
}

/* Breadcrumb through Markets → Locations → Squad Houses */
.ms-crumb {
  background: none; border: 0; padding: 4px 2px; color: #5A6673;
  font-weight: 700; font-size: .92rem; cursor: pointer;
}
.ms-crumb:hover { color: var(--ms-ink); }
.ms-crumb.is-on { color: var(--ms-ink); }
.ms-crumb.is-static { cursor: default; color: var(--ms-ink); }
.ms-crumb.is-static:hover { color: var(--ms-ink); }

.ms9 .btn.disabled { opacity: .55; pointer-events: none; }

/* ── The two steps ──────────────────────────────────────────────────────── */
.ms-step {
  position: relative; background: #fff; border: 1.5px solid #E1E5EA;
  border-radius: 18px; padding: 30px 28px;
}
.ms-step.is-locked { background: #FAFBFC; border-style: dashed; }
.ms-step .n {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--ms-ink); color: #fff;
  font-weight: 800; font-size: 1rem; margin-bottom: 16px;
}
.ms-step.is-locked .n { background: #C6CCD3; }
.ms-step-arrow {
  display: grid; place-items: center; color: #98A2AE; font-size: 1.5rem;
}
@media (max-width: 767px) { .ms-step-arrow { transform: rotate(90deg); padding: 6px 0; } }

/* ═══════════════════════════════════════════════════════════════════════════
   THE FUNNEL — one screen at a time.
   The home page is a wizard, not a scrolling page: only the active screen is
   in the document flow, so there is nothing below the fold to wander into.
   ═════════════════════════════════════════════════════════════════════════ */
.ms-screen { display: none; }
.ms-screen.is-on { display: block; animation: ms-in .32s ease both; }
@keyframes ms-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ms-screen.is-on { animation: none; } }

/* The intro screen is the only one with a photograph behind it */
.ms-screen[data-screen="intro"] {
  position: relative; min-height: calc(100vh - 72px);
  display: none; align-items: center;
}
.ms-screen[data-screen="intro"].is-on { display: flex; }
.ms-screen-bg { position: absolute; inset: 0; overflow: hidden; }
.ms-screen-bg img { width: 100%; height: 100%; object-fit: cover; }
.ms-screen-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,20,24,.74) 0%, rgba(16,20,24,.30) 34%, rgba(16,20,24,.86) 100%),
    linear-gradient(96deg, rgba(16,20,24,.76) 0%, rgba(16,20,24,.30) 52%, rgba(16,20,24,0) 82%);
}
.ms-screen-in { position: relative; width: 100%; padding: 56px 0; }

/* ── The rail ───────────────────────────────────────────────────────────── */
.ms-rail-bar {
  position: sticky; top: 72px; z-index: 40;
  background: #fff; border-bottom: 1px solid #E4E7EB;
}
/* The rail is a sibling ABOVE the intro screen, not an overlay on it, so a
   translucent fill here just shows the white page behind. On the intro it goes
   solid ink instead, and nav + rail read as one dark header. */
.ms-funnel.is-intro .ms-rail-bar {
  background: var(--ms-ink); border-bottom-color: rgba(255,255,255,.10);
}
/* ── The three steps, in the order they happen ─────────────────────────────
   Named .ms-steprail, NOT .ms-rail — that one is already taken by the
   Bootstrap photo carousel higher up this file.

   Labels and numbers are rendered from lib/steps.php. Do not write them here
   or in a template: the funnel and the intro cards each kept their own copy
   once, and drifted into describing two different orders.
   ─────────────────────────────────────────────────────────────────────────── */
.ms-railwrap { display: flex; align-items: center; gap: 18px; }
.ms-steprail {
  display: flex; align-items: center; gap: 9px;
  list-style: none; margin: 0; padding: 11px 0;
}
/* The note is the point of the bar, so it gets the far end to itself. */
.ms-rail-note { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.ms-rail-note .n { font-size: .82rem; font-weight: 600; color: #6B7682; }
.ms-funnel.is-intro .ms-rail-note .n { color: rgba(255,255,255,.62); }
.ms-steprail li {
  display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap;
  font-size: .87rem; font-weight: 700; color: #98A2AE;
}
/* Required / Optional. This pair is the whole point of the rail: the training
   is what is being sold, the squad house is a choice on top of it. */
.ms-steprail .tag, .ms-rail-note .tag, .ms-tag {
  font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; background: #ECEEF1; color: #6B7682;
}
.ms-steprail .tag.is-opt, .ms-rail-note .tag.is-opt, .ms-tag.is-opt {
  background: #FDF3E0; color: #8A6410;
}
/* On the ink intro bar the pale pill would glare, so it goes translucent. */
.ms-funnel.is-intro .ms-rail-note .tag.is-opt {
  background: rgba(245,185,59,.18); color: var(--ms-gold);
}
.ms-tag { display: inline-block; margin-left: 8px; vertical-align: 2px; }
.ms-steprail-sep { color: #D2D7DD; font-size: .8rem; }

/* Where you are, and what is behind you. No numbers: these panes are one
   optional decision, and numbering them read as a checklist you had to clear
   before you were allowed to join. */
.ms-steprail li.is-on { color: var(--ms-ink); }
.ms-steprail li.is-done { color: #1E7A4C; }
.ms-steprail li.is-done > .t::after {
  content: '\2713'; font-size: .82em; font-weight: 800; margin-left: 5px;
}

/* On the intro the bar is solid ink, so the rail inverts with it. */
.ms-funnel.is-intro .ms-steprail li { color: rgba(255,255,255,.55); }
.ms-funnel.is-intro .ms-steprail-sep { color: rgba(255,255,255,.26); }
.ms-funnel.is-intro .ms-steprail li.is-on { color: #fff; }

@media (max-width: 860px) {
  /* The breadcrumb keeps its line and the note drops beneath it, rather than
     the note being pushed off the edge — that a squad house is optional is
     the single most important thing this bar says. */
  .ms-railwrap { flex-wrap: wrap; gap: 0 12px; }
  .ms-steprail { gap: 7px; padding: 8px 0 2px; }
  .ms-steprail li { font-size: .78rem; }
  .ms-rail-note { margin-left: 0; padding-bottom: 8px; gap: 7px; }
  .ms-rail-note .n { font-size: .75rem; }
  .ms-rail-note .tag { font-size: .56rem; padding: 2px 6px; }
}
@media (max-width: 470px) {
  /* The full sentence wraps to three lines here, so a short form takes over.
     It must not just restate the pill next to it — the pill already says
     OPTIONAL, so the words say what the alternative actually is. */
  .ms-rail-note .n { display: none; }
  .ms-rail-note::after {
    content: 'or take the training virtually';
    font-size: .75rem; font-weight: 600; color: #6B7682;
  }
  .ms-funnel.is-intro .ms-rail-note::after { color: rgba(255,255,255,.62); }
}

/* ── The same three steps for pages outside the funnel ──────────────────── */
.ms-strip {
  display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap;
  list-style: none; margin: 0 0 30px; padding: 0;
}
.ms-strip-step {
  flex: 1 1 210px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  background: #fff; border: 1px solid #E4E7EB; border-radius: 14px; padding: 15px 17px;
}
.ms-strip-step .hd { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.ms-strip-step .n {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: #ECEEF1; color: #8B95A1; font-size: .78rem; font-weight: 800; flex: none;
}
.ms-strip-step .tag {
  font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; background: #ECEEF1; color: #6B7682;
}
.ms-strip-step .tag.is-opt { background: #FDF3E0; color: #8A6410; }
.ms-strip-step b { font-size: 1.02rem; color: #98A2AE; }
.ms-strip-step .p {
  font-size: 1.18rem; font-weight: 800; letter-spacing: -.01em; color: #98A2AE; margin-top: 1px;
}
.ms-strip-step .p.is-tbd { font-size: .92rem; font-weight: 700; }
.ms-strip-step .s { font-size: .89rem; line-height: 1.45; color: #A8B0BA; margin-top: 2px; }
.ms-strip-step .ms-buys { color: #98A2AE; }
.ms-strip-step .ms-buys i { color: #C7CDD4; }
.ms-strip-step.is-on .ms-buys { color: #5A6673; }
.ms-strip-step.is-on .ms-buys i { color: var(--ms-brand); }
.ms-strip-step.is-done .ms-buys { color: #4E7A63; }
.ms-strip-step.is-done .ms-buys i { color: #1E7A4C; }
.ms-strip-step.is-on { border-color: var(--ms-ink); border-width: 2px; padding: 14px 16px; }
.ms-strip-step.is-on .n { background: var(--ms-brand); color: #fff; }
.ms-strip-step.is-on b { color: var(--ms-ink); }
.ms-strip-step.is-on .p { color: var(--ms-ink); }
.ms-strip-step.is-done .p { color: #1E7A4C; }
.ms-strip-step.is-on .s { color: #5A6673; }
.ms-strip-step.is-done { border-color: #9FD3B4; background: #F3FBF6; }
.ms-strip-step.is-done .n { background: #1E7A4C; color: #fff; }
.ms-strip-step.is-done b { color: #1E7A4C; }
.ms-strip-arrow { display: flex; align-items: center; color: #C7CDD4; }
@media (max-width: 720px) {
  .ms-strip-arrow { display: none; }
  .ms-strip-step { flex: 1 1 100%; }
}

/* ── The two main steps, shown on the intro ─────────────────────────────── */
.ms-two { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; }
.ms-two-card {
  flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px; padding: 18px 20px; backdrop-filter: blur(6px);
}
.ms-two-card .n {
  display: flex; align-items: center; gap: 9px;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ms-gold);
}
.ms-two-card .n em {
  font-style: normal; font-size: .62rem; letter-spacing: .1em; padding: 3px 7px;
  border-radius: 999px; background: rgba(255,255,255,.16); color: rgba(255,255,255,.9);
}
/* The optional one is visibly lighter-weight than the required one, so the
   pair reads at a glance without anyone parsing the words. */
.ms-two-card.is-opt { background: rgba(255,255,255,.05); border-style: dashed; }
.ms-two-card.is-opt .n { color: rgba(255,255,255,.65); }
.ms-two-card b { color: #fff; font-size: 1.08rem; }
/* The figure, given room to be read. "Confirmed on your call" is the correct
   state when a fee is unset, so it is styled as real copy rather than as a
   gap — never substitute a guessed number for it. */
.ms-two-card .p {
  color: var(--ms-gold); font-size: 1.22rem; font-weight: 800; letter-spacing: -.01em;
  margin-top: 2px;
}
.ms-two-card .p.is-tbd { font-size: .95rem; font-weight: 700; color: rgba(255,255,255,.72); }

/* ── What each fee buys ─────────────────────────────────────────────────────
   Shared by the dark intro cards and the light strip; only the colours differ.
   Ticks are their own column so a wrapped line stays aligned under its text
   rather than sliding under the tick. */
.ms-buys { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.ms-buys li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start;
  font-size: .9rem; line-height: 1.4; }
.ms-buys i { font-size: .95rem; line-height: 1.35; }
.ms-two-card .ms-buys { color: rgba(255,255,255,.82); }
.ms-two-card .ms-buys i { color: var(--ms-gold); }
.ms-two-card.is-opt .ms-buys { color: rgba(255,255,255,.74); }
.ms-buys-note { display: block; margin-top: 9px; font-size: .84rem; line-height: 1.4; font-style: italic; }
.ms-two-card .ms-buys-note { color: rgba(255,255,255,.6); }
.ms-strip-step .ms-buys-note { color: #A8B0BA; }
.ms-strip-step.is-on .ms-buys-note { color: #6B7682; }
.ms-two-card .s { color: rgba(255,255,255,.7); font-size: .9rem; line-height: 1.45; }
.ms-two-arrow { align-self: center; color: rgba(255,255,255,.45); font-size: 1.3rem; }
@media (max-width: 640px) { .ms-two-arrow { transform: rotate(90deg); align-self: center; } }

/* ── Back link and plan summary ─────────────────────────────────────────── */
.ms-back {
  display: inline-flex; align-items: center; gap: 8px; background: none; border: 0;
  padding: 0; color: #5A6673; font-weight: 700; font-size: .92rem; cursor: pointer;
}
.ms-back:hover { color: var(--ms-ink); }
.ms-plan-step {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px;
  border-radius: 50%; background: var(--ms-ink); color: #fff; font-weight: 800; font-size: .85rem;
}
.ms-plan-step.is-next { background: #ECEEF1; color: #5A6673; }

/* ── Opening screen with the explainer video ────────────────────────────── */
.ms-intro-split { display: grid; grid-template-columns: 1.08fr .92fr; gap: 52px; align-items: center; }
.ms-intro-video { min-width: 0; }
.ms-video-frame {
  position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden;
  background: #000; box-shadow: 0 24px 60px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.12);
}
.ms-video-frame iframe, .ms-video-frame video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
@media (max-width: 1023px) {
  .ms-intro-split { grid-template-columns: 1fr; gap: 34px; }
  .ms-intro-video { max-width: 640px; }
}

/* ── The designed opening background (no photograph) ────────────────────────
   Used whenever no intro image is set, which is the default. It is built, not
   borrowed: a deep ink field, a faint plotted grid that nods at the markets
   map, and two soft brand glows. Nothing here depicts a house — the screen is
   about the program, and a photo of a home reads as a rental listing.
   ─────────────────────────────────────────────────────────────────────────── */
.ms-screen-bg.is-designed {
  background:
    radial-gradient(1100px 620px at 76% 18%, rgba(226,58,69,.26), transparent 62%),
    radial-gradient(880px 520px at 12% 88%, rgba(245,185,59,.15), transparent 60%),
    linear-gradient(155deg, #151A20 0%, #101418 46%, #0B0E11 100%);
}
.ms-screen-bg.is-designed::before {
  content: ''; position: absolute; inset: 0;
  /* Plotted grid — the same language as the markets map, at low volume. */
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 100% at 70% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 100% at 70% 30%, #000 30%, transparent 78%);
}
/* The photo overlay would double-darken a background that is already dark. */
.ms-screen-bg.is-designed::after { background: none; }

/* ── The opening headline ───────────────────────────────────────────────────
   Three lines at three scales rather than one uniform slab: the term, then
   what it buys, then the part that makes it different. The size drop does the
   emphasis, so the copy needs no exclamation marks to carry weight.
   ─────────────────────────────────────────────────────────────────────────── */
.ms-h1 { margin: 26px 0 0; display: flex; flex-direction: column; }
.ms-h1 .l1, .ms-h1 .l2, .ms-h1 .l3 { display: block; color: #fff; }
.ms-h1 .l1 {
  font-size: clamp(3rem, 6.6vw, 5.4rem); font-weight: 900;
  letter-spacing: -.038em; line-height: .92;
}
.ms-h1 .l2 {
  font-size: clamp(1.35rem, 2.5vw, 2.05rem); font-weight: 600;
  letter-spacing: -.015em; line-height: 1.18; color: rgba(255,255,255,.82);
  margin-top: 12px; max-width: 22ch;
}
.ms-h1 .l3 { margin-top: 14px; font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.1; }
.ms-h1 .l3 em {
  font-style: italic; font-weight: 800; letter-spacing: -.022em;
  background-image: linear-gradient(var(--ms-gold), var(--ms-gold));
  background-repeat: no-repeat; background-size: 100% .12em;
  background-position: 0 calc(100% - .04em);
}

/* The virtual choice, offered level with the markets */
.ms-pick.is-virtual {
  background: var(--ms-ink); border-color: var(--ms-ink);
  box-shadow: 0 10px 30px -16px rgba(16,20,24,.6);
}
.ms-pick.is-virtual:hover { border-color: var(--ms-gold); }
.ms-spots.is-virtual { background: rgba(245,185,59,.18); color: var(--ms-gold); font-size: 1.15rem; }