/* =========================================================================
   Price page — layout not covered by theme.css's generic .ms-* classes.
   Reuses --ms-* tokens; scoped to this page only (auto-enqueued only when
   madeinsul_set_page_key('price') is active).
   ========================================================================= */

/* Fixed header clears the breadcrumb row (header is position:fixed sitewide;
   pages whose first section isn't a full-bleed hero need this top offset). */
.ms-crumbs { padding-top: calc(var(--ms-header-h) + 18px); }

/* ---- Hero (plain text, no photo) ---- */
.ms-price-hero { padding-bottom: clamp(40px, 5vw, 64px); }
.ms-price-hero__h1 {
  font-size: clamp(24px, 4.6vw, 74px);
  font-weight: 900;
  line-height: 1.22;
  margin-top: 14px;
}

.ms-price-main__heading { margin-bottom: clamp(32px, 4vw, 56px); }

/* ---- Notes / billing two-column row ---- */
.ms-notes-grid { display: flex; flex-wrap: wrap; gap: clamp(36px, 6vw, 90px); }
.ms-notes-grid__col { flex: 1 1 min(100%, 340px); }
.ms-notes-grid__col--billing { max-width: 520px; }
.ms-notes-grid__heading { margin-top: 16px; font-size: clamp(20px, 2.6vw, 34px); }
.ms-notes-grid__col .ms-lead { margin-top: clamp(22px, 2.6vw, 32px); }
.ms-notes-grid__list { margin-top: clamp(22px, 2.6vw, 32px); }
.ms-notes-grid__cta { margin-top: clamp(24px, 3vw, 36px); }

/* ---- No-lock-in block ----
   Deliberately NOT a solid accent-orange full-bleed background (rejected
   twice during design iteration). Sits on the standard dark section
   background; accent is reserved for the thin top rule and the headline
   text only, matching .ms-callout's restraint. */
.ms-lockin .ms-eyebrow { margin-top: 0; }
.ms-lockin__heading { color: var(--ms-accent); margin-top: 16px; }
.ms-lockin__sub {
  margin-top: clamp(20px, 2.4vw, 30px);
  font-family: var(--ms-font-head);
  font-size: clamp(17px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: -.015em;
  color: #F5F4F0;
}
.ms-lockin__body { max-width: 38em; margin-top: clamp(28px, 3.6vw, 44px); display: flex; flex-direction: column; gap: 16px; }

.ms-lockin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(34px, 4.4vw, 56px);
}
.ms-lockin-grid__cell {
  background: rgba(245, 244, 240, .05);
  border: 1px solid rgba(245, 244, 240, .16);
  border-radius: var(--ms-radius);
  padding: clamp(24px, 3vw, 40px);
}
.ms-lockin-grid__num {
  font-family: var(--ms-font-display);
  font-size: clamp(30px, 4.6vw, 64px);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.04em;
  color: var(--ms-accent);
}
.ms-lockin-grid__num--word { font-size: clamp(24px, 3.4vw, 48px); letter-spacing: -.035em; }
.ms-lockin-grid__num small { font-size: .42em; font-weight: 600; letter-spacing: .02em; margin-left: .14em; color: rgba(245, 244, 240, .6); }
.ms-lockin-grid__label {
  margin-top: 16px;
  font-family: var(--ms-font-head);
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 700;
  line-height: 1.7;
  color: #F5F4F0;
}

.ms-lockin__closer {
  margin-top: clamp(30px, 3.8vw, 50px);
  font-family: var(--ms-font-head);
  font-size: clamp(16px, 2vw, 26px);
  font-weight: 800;
  line-height: 1.7;
  letter-spacing: -.015em;
  color: #F5F4F0;
}
.ms-lockin__fine { margin-top: 20px; max-width: 52em; }

/* ---- FAQ ---- */
.ms-faq-grid { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 80px); align-items: flex-start; }
.ms-faq-grid__head { flex: 1 1 min(100%, 240px); max-width: 340px; }
.ms-faq-grid__heading { margin-top: 16px; font-size: clamp(19px, 2.3vw, 30px); }
.ms-faq-grid__body { flex: 1 1 min(100%, 340px); }

.ms-faq-list { border-top: 1px solid var(--ms-hairline-light); }
.ms-faq-item { border-bottom: 1px solid var(--ms-hairline-light); }
.ms-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: clamp(16px, 2vw, 20px);
  font-family: var(--ms-font-head);
  font-size: clamp(14.5px, 1.4vw, 15.5px);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.ms-faq-item summary::-webkit-details-marker { display: none; }
.ms-faq-item summary::after { content: "＋"; font-family: var(--ms-font-display); font-size: 17px; opacity: .55; flex: 0 0 auto; }
.ms-faq-item[open] summary::after { content: "−"; opacity: 1; color: var(--ms-accent); }
.ms-faq-item summary:hover { color: var(--ms-accent); }
.ms-faq-item p { padding-bottom: clamp(18px, 2.2vw, 22px); max-width: 44em; font-size: 13.5px; line-height: 2.05; color: var(--ms-lead); }

.ms-faq-foot { margin-top: clamp(28px, 3.4vw, 44px); }

@media (max-width: 720px) {
  .ms-lockin-grid { grid-template-columns: 1fr 1fr; }
}
