@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;700;800;900&display=swap");

/* SleepCrafters additions. Loaded after the engine's own styles. */

/* Vertical (9:16) videos hosted on Mux: a tall, phone-shaped frame,
   centred, instead of the engine's landscape frame. */
.media-frame:has(iframe[src*="player.mux.com"]) {
  padding-top: 0;
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 380px;
  margin: 16px auto;
}

/* The CSTS offer page (long form), in the look of the GHL complete-system page:
   Inter Tight, light-blue headings and button, cream page, pink warning band,
   yellow and black progress bar, red no-thanks link. */

.op {
  --op-accent: #5BADD8;
  --op-accent-hover: #3F98C7;
  --op-deep: #17160F;
  --op-deepest: #0D0D0A;
  --op-gold: #F4C430;
  --op-cream: #FBF4EA;
  --op-head: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --op-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #FDF8F1;
}
.op h1 { font-weight: 900; color: #17160F; letter-spacing: -0.01em; }
.op h2 { font-weight: 800; color: #5BADD8; }
.op .op-warn { background: #F6DADA; color: #8E3B3B; font-weight: 700; text-transform: uppercase; font-size: 14px; }
.op .op-warn strong { color: #8E3B3B; }
.op .op-progress { background: repeating-linear-gradient(-45deg, #F4C430 0 14px, #E7B520 14px 28px); }
.op .op-step-bar { background: rgba(0, 0, 0, 0.18); }
.op .op-done .op-step-bar, .op .op-here .op-step-bar { background: #17160F; opacity: 1; }
.op .op-step-text, .op .op-here .op-step-text { color: #17160F; }
.op .op-step-note { color: #17160F; }
.op .op-kicker { color: #17160F; font-size: 15px; }
.op .op-card, .op .op-quote { border-radius: 20px; box-shadow: 0 6px 22px rgba(23, 22, 15, 0.06); }
.op .op-card::before { background: #5BADD8; }
.op .op-bonus-badge { background: #5BADD8; color: #FFFFFF; }
.op .op-pricebox { background: #FFFFFF; border-color: #5BADD8; }
.op .op-btn { background: #5BADD8; border-radius: 20px; box-shadow: 0 8px 28px rgba(91, 173, 216, 0.45); font-weight: 800; }
.op .op-btn:hover { background: #3F98C7; }
.op .op-no { color: #A33A3A; }
.op .op-guarantee { background: #EEF6FB; border-color: #CFE4F2; }

/* The long-form offer's own video frame, made phone-shaped for vertical Mux videos. */
.op .op-video:has(iframe[src*="player.mux.com"]) { aspect-ratio: 9 / 16; max-width: 380px; }