/* =========================================
   Never Miss — design system + page styles
   ========================================= */

/* --- Variables ------------------------------------------------ */
:root {
  --rr-red-50:  #FAD2D9;
  --rr-red-200: #F4A5B3;
  --rr-red-500: #E41F40;
  --rr-red-600: #C21A36;
  --rr-red-700: #B61933;
  --rr-red-900: #5B0C1A;

  --rr-gray-0:   #FFFFFF;
  --rr-gray-25:  #FAFBFC;
  --rr-gray-50:  #F5F6F8;
  --rr-gray-100: #EBEDF0;
  --rr-gray-200: #DFE2E6;
  --rr-gray-300: #C6CBD2;
  --rr-gray-400: #9AA1AC;
  --rr-gray-500: #6B7280;
  --rr-gray-600: #4B5158;
  --rr-gray-700: #333740;
  --rr-gray-800: #1F2229;
  --rr-gray-900: #101216;

  --color-bg-page:        var(--rr-gray-25);
  --color-bg-surface:     var(--rr-gray-0);
  --color-bg-inverse:     var(--rr-gray-900);
  --color-text-primary:   var(--rr-gray-900);
  --color-text-secondary: var(--rr-gray-500);
  --color-border:         var(--rr-gray-200);
  --color-brand:          var(--rr-red-500);
  --color-brand-hover:    var(--rr-red-600);
  --color-brand-subtle:   var(--rr-red-50);

  --font-display: 'Fira Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-body-sm: 14px;
  --text-body-lg: 20px;
  --text-h3:      24px;
  --text-h2:      32px;

  --leading-snug:  1.3;
  --leading-normal: 1.6;
  --tracking-cta:  2px;
  --tracking-nav:  1px;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgba(16,18,22,0.04);
  --shadow-sm: 0 2px 8px rgba(16,18,22,0.06);
  --shadow-md: 0 0 15px rgba(16,18,22,0.08);
  --ease-std:  cubic-bezier(0.4,0,0.2,1);
}

/* --- Hero section --------------------------------------------- */

@keyframes nmWordmarkReveal {
  0%   { clip-path: inset(0 100% 0 0); transform: scale(1.04); }
  65%  { clip-path: inset(0 0% 0 0);   transform: scale(1.04); }
  100% { clip-path: inset(0 0% 0 0);   transform: scale(1);    }
}
@keyframes nmFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nm-page-hero {
  position: relative;
  background-image: url('/assets/img/Backgrounds/rr-bg-v1_compressed.avif');
  background-size: cover;
  background-position: center;
  filter: brightness(0.98);
  overflow: hidden;
}

.nm-page-hero__container {
  position: relative;
  filter: brightness(1.02);
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 48px 0;
  display: flex;
  align-items: center;
  gap: 56px;
}

.nm-page-hero__text {
  flex: 1 1 0;
  min-width: 0;
  text-align: left;
  padding-bottom: 80px;
}

.nm-page-hero__anim {
  flex: 0 0 400px;
  display: flex;
  align-items: flex-end;
}

.nm-page-hero__anim .nm-hero {
  padding: 24px 0 60px;
}

@media (max-width: 991px) {
  .nm-page-hero__container {
    flex-direction: column;
    padding: 80px 24px 0;
    gap: 16px;
  }
  .nm-page-hero__text {
    text-align: center;
    padding-bottom: 0;
  }
  .nm-page-hero__anim {
    flex: none;
    width: 100%;
    max-width: 380px;
    align-self: center;
  }
}

.nm-page-wordmark {
  margin: 0;
  font-family: 'Lobster Two', cursive;
  font-weight: 700;
  font-size: clamp(48px, 10vw, 100px);
  font-style: italic;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--color-brand);
  display: inline-block;
  will-change: clip-path, transform;
  animation: nmWordmarkReveal 1100ms cubic-bezier(0.4,0,0.2,1) both;
}
@media (max-width: 991px) {
  .nm-page-wordmark {
    white-space: normal;
    font-size: clamp(44px, 11vw, 80px);
  }
}

.nm-page-sub {
  margin: 24px 0 0;
  max-width: 540px;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  animation: nmFadeUp 600ms ease 950ms both;
}

.nm-page-hero__cta {
  margin-top: 36px;
  animation: nmFadeUp 600ms ease 1250ms both;
}

@media (prefers-reduced-motion: reduce) {
  .nm-page-wordmark,
  .nm-page-sub,
  .nm-page-hero__cta {
    animation: none;
    clip-path: none;
    opacity: 1;
    transform: none;
  }
}

/* --- Hero animation component (.nm-hero) ----------------------
   Styles lifted verbatim from context/never-miss-hero-anim.html,
   then tweaked: background → transparent, min-height → auto
   so the mockup sits inside the hero section seamlessly.
   -------------------------------------------------------------- */

.nm-hero, .nm-hero * { box-sizing: border-box; }

.nm-hero {
  --nm-red:       #C8102E;
  --nm-red-soft:  rgba(200,16,46,0.10);
  --nm-green:     #2FA96A;
  --nm-green-soft:rgba(47,169,106,0.12);
  --nm-ink:       #1C1C1E;
  --nm-gray-600:  #6E6E73;
  --nm-gray-300:  #D1D1D6;
  --nm-gray-100:  #F2F2F4;
  --nm-card-bg:   #FFFFFF;
  --nm-loop:      12s;
  --nm-ease:      cubic-bezier(0.45,0,0.2,1);

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-align:  left;
  background:  transparent;
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       100%;
  padding:     48px 20px 72px;
  min-height:  auto;
}

.nm-stage {
  position: relative;
  width: 100%;
  max-width: 380px;
}
.nm-stage::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: radial-gradient(closest-side, rgba(200,16,46,0.06), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.nm-card {
  position: relative; z-index: 1;
  width: 100%; height: 480px;
  background: var(--nm-card-bg);
  border-radius: 28px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.06),
    0 24px 48px -12px rgba(0,0,0,0.12);
  overflow: hidden;
  animation: nm-breathe 4.5s ease-in-out infinite;
}
@keyframes nm-breathe {
  0%,100% { transform: scale(1);     box-shadow: 0 1px 2px rgba(0,0,0,0.04),0 8px 24px rgba(0,0,0,0.06),0 24px 48px -12px rgba(0,0,0,0.12); }
  50%     { transform: scale(1.006); box-shadow: 0 1px 2px rgba(0,0,0,0.04),0 12px 32px rgba(0,0,0,0.07),0 30px 56px -12px rgba(0,0,0,0.14); }
}

.nm-statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 0;
  font-size: 12px; color: var(--nm-gray-600); letter-spacing: 0.02em;
}
.nm-statusbar .nm-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--nm-gray-300);
  display: inline-block; margin-right: 6px;
}

.nm-panels { position: relative; height: calc(100% - 40px); }
.nm-panel {
  position: absolute; inset: 0;
  padding: 28px 26px 26px;
  display: flex; flex-direction: column;
  will-change: opacity, transform;
}

/* Panel 1 — Incoming call */
.nm-panel--call {
  align-items: center; justify-content: space-between; text-align: center;
  animation: nm-call-panel var(--nm-loop) var(--nm-ease) infinite;
}
@keyframes nm-call-panel {
  0%,12.5%  { opacity:1; }
  16.25%,97.5%{ opacity:0; }
  100%      { opacity:1; }
}
.nm-call-top  { margin-top: 28px; }
.nm-call-label{ font-size:13px; font-weight:400; color:var(--nm-gray-600); margin:0 0 6px; }
.nm-call-name { font-size:21px; font-weight:600; color:var(--nm-ink);     margin:0; }

.nm-ring-wrap {
  position:relative; width:92px; height:92px;
  display:flex; align-items:center; justify-content:center;
}
.nm-ring {
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--nm-red); opacity:0;
  animation: nm-ring-pulse 1.8s ease-out infinite;
}
.nm-ring--b { animation-delay:.6s; }
.nm-ring--c { animation-delay:1.2s; }
@keyframes nm-ring-pulse {
  0%  { transform:scale(0.7); opacity:.55; }
  80%,100% { transform:scale(1.55); opacity:0; }
}
.nm-phone-badge {
  position:relative; width:60px; height:60px; border-radius:50%;
  background:var(--nm-red);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(200,16,46,0.28);
}
.nm-phone-badge svg { width:24px; height:24px; }

.nm-call-actions { display:flex; gap:46px; margin-bottom:6px; }
.nm-call-btn {
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,0.10);
}
.nm-call-btn svg       { width:20px; height:20px; }
.nm-call-btn--decline  { background:var(--nm-gray-100); }
.nm-call-btn--decline svg { stroke:#A1A1A6; }
.nm-call-btn--answer   { background:var(--nm-green); }
.nm-call-btn--answer svg  { stroke:#fff; }

/* Panel 2 — AI answered */
.nm-panel--ai {
  align-items:center; justify-content:center; text-align:center; gap:30px;
  opacity:0;
  animation: nm-ai-panel var(--nm-loop) var(--nm-ease) infinite;
}
@keyframes nm-ai-panel {
  0%,12.5% { opacity:0; }
  16.25%,31.25% { opacity:1; }
  35%,100% { opacity:0; }
}
.nm-ai-header { display:flex; align-items:center; gap:8px; }
.nm-ai-name   { font-size:19px; font-weight:600; color:var(--nm-ink); }
.nm-ai-pill   {
  font-size:11px; font-weight:600; letter-spacing:.04em;
  color:#fff; background:var(--nm-red);
  padding:3px 8px; border-radius:20px;
}
.nm-ai-sub { font-size:13px; color:var(--nm-gray-600); margin-top:-14px; }

.nm-wave {
  display:flex; align-items:center; justify-content:center;
  gap:5px; height:44px;
}
.nm-wave span {
  display:block; width:4px; border-radius:3px;
  background:var(--nm-red);
  animation: nm-wave-bar 1.1s ease-in-out infinite;
}
.nm-wave span:nth-child(1){ height:14px; animation-delay:-0.9s; }
.nm-wave span:nth-child(2){ height:28px; animation-delay:-0.6s; }
.nm-wave span:nth-child(3){ height:40px; animation-delay:-0.3s; }
.nm-wave span:nth-child(4){ height:22px; animation-delay:-1.05s;}
.nm-wave span:nth-child(5){ height:34px; animation-delay:-0.15s;}
.nm-wave span:nth-child(6){ height:18px; animation-delay:-0.75s;}
.nm-wave span:nth-child(7){ height:26px; animation-delay:-0.45s;}
@keyframes nm-wave-bar {
  0%,100% { transform:scaleY(0.4); opacity:.6; }
  50%     { transform:scaleY(1);   opacity:1;  }
}

/* Panel 3 — Chat */
.nm-panel--chat {
  justify-content:flex-start; opacity:0;
  animation: nm-chat-panel var(--nm-loop) var(--nm-ease) infinite;
}
@keyframes nm-chat-panel {
  0%,31.25% { opacity:0; }
  35%,92.5% { opacity:1; }
  97.5%,100%{ opacity:0; }
}
.nm-chat-header {
  display:flex; align-items:center; gap:10px;
  padding-bottom:16px;
  border-bottom:1px solid var(--nm-gray-100);
  margin-bottom:18px;
}
.nm-avatar {
  width:32px; height:32px; border-radius:50%;
  background:var(--nm-red-soft); color:var(--nm-red);
  font-size:12px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.nm-chat-title { font-size:14px; font-weight:600; color:var(--nm-ink); }
.nm-chat-sub   { font-size:11.5px; color:var(--nm-gray-600); }
.nm-bubble-row { display:flex; justify-content:flex-end; }
.nm-bubble {
  max-width:88%; background:var(--nm-ink); color:#fff;
  font-size:14px; line-height:1.45;
  padding:13px 15px;
  border-radius:18px 18px 4px 18px;
}
.nm-bubble .nm-cursor {
  display:inline-block; width:2px; height:14px;
  background:rgba(255,255,255,.7);
  margin-left:2px; transform:translateY(2px);
  animation: nm-caret .8s steps(1) infinite;
}
@keyframes nm-caret {
  0%,49%   { opacity:1; }
  50%,100% { opacity:0; }
}
.nm-delivered {
  text-align:right; font-size:11px; color:var(--nm-gray-600);
  margin-top:7px;
  display:flex; align-items:center; justify-content:flex-end; gap:4px;
  opacity:0;
  animation: nm-delivered-fade var(--nm-loop) var(--nm-ease) infinite;
}
.nm-delivered svg { width:12px; height:12px; }
@keyframes nm-delivered-fade {
  0%,66.25%{ opacity:0; }
  69%,92.5%{ opacity:1; }
  97.5%,100%{ opacity:0; }
}

/* Panel 4 — Booked toast */
.nm-badge-wrap {
  position:absolute; left:20px; right:20px; bottom:22px;
  opacity:0; transform:translateY(22px);
  animation: nm-badge-slide var(--nm-loop) var(--nm-ease) infinite;
}
@keyframes nm-badge-slide {
  0%,70%    { opacity:0; transform:translateY(22px); }
  73.75%,92.5%{ opacity:1; transform:translateY(0); }
  97.5%     { opacity:0; transform:translateY(10px); }
  100%      { opacity:0; transform:translateY(22px); }
}
.nm-badge {
  display:flex; align-items:center; gap:10px;
  background:var(--nm-green-soft);
  border:1px solid rgba(47,169,106,0.25);
  border-radius:16px; padding:13px 16px;
  box-shadow:0 8px 20px rgba(0,0,0,0.06);
}
.nm-badge-check {
  width:26px; height:26px; border-radius:50%;
  background:var(--nm-green);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.nm-badge-check svg { width:14px; height:14px; }
.nm-badge-text { font-size:13.5px; font-weight:600; color:#1E5B3B; }

@media (prefers-reduced-motion: reduce) {
  .nm-card { animation:none; }
  .nm-panel--call,.nm-panel--ai,.nm-panel--chat,
  .nm-ring,.nm-wave span,.nm-delivered,.nm-bubble .nm-cursor {
    animation: none !important;
  }
  .nm-panel--call,.nm-panel--ai { opacity:0 !important; display:none; }
  .nm-panel--chat  { opacity:1 !important; position:relative; }
  .nm-delivered    { opacity:1 !important; }
  .nm-bubble .nm-cursor { display:none; }
  .nm-badge-wrap   {
    opacity:1 !important; transform:translateY(0) !important;
    animation:none !important; position:relative;
    left:0; right:0; bottom:0; margin-top:18px;
  }
}
@media (max-width:420px) {
  .nm-card  { height:440px; border-radius:22px; }
  .nm-panel { padding:22px 20px 20px; }
}

/* --- Shared section chrome ------------------------------------ */

.nm-section-eyebrow {
  font-family: var(--font-display);
  font-weight: 700; font-size: 13px;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: 12px; display: block;
}
.nm-section-title {
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase; letter-spacing: 1px;
  font-size: clamp(24px, 3.5vw, 32px);
  margin: 0; color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

/* --- Problem -------------------------------------------------- */
.nm-problem {
  padding: 90px 24px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* --- Pricing -------------------------------------------------- */
.nm-pricing {
  padding: 90px 24px;
  max-width: 1280px;
  margin: 0 auto;
}
.nm-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px;
  align-items: stretch;
}
.nm-price-card {
  border-radius: var(--radius-md);
  padding: 36px 32px;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  justify-content: space-between; gap: 24px;
  transition: transform 300ms var(--ease-std), box-shadow 300ms var(--ease-std);
}
.nm-price-card--light {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}
.nm-price-card--dark {
  background: var(--color-bg-inverse);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow-md);
}
.nm-price-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.nm-price-card--dark:hover { box-shadow:0 16px 40px rgba(0,0,0,.25); }

.nm-card-eyebrow {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: var(--tracking-cta);
  text-transform: uppercase; color: var(--color-text-secondary);
}
.nm-price-card--dark .nm-card-eyebrow { color: rgba(241,243,245,.55); }

.nm-card-name {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--text-h3); text-transform: uppercase;
  letter-spacing: .5px; margin: 6px 0 0;
  color: var(--color-text-primary);
}
.nm-price-card--dark .nm-card-name { color: #fff; }

.nm-card-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(228,31,64,.14); color: var(--rr-red-200);
  border: 1px solid rgba(228,31,64,.4);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: var(--tracking-nav);
  text-transform: uppercase; margin-bottom: 16px;
}

.nm-card-price {
  font-family: var(--font-display); font-weight: 900;
  font-size: 30px; color: var(--color-text-primary);
  display: block; line-height: 1; margin: 18px 0 4px;
}
.nm-price-card--dark .nm-card-price { color: #fff; }

.nm-card-price-sub {
  font-family: var(--font-body); font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}
.nm-price-card--dark .nm-card-price-sub { color: rgba(241,243,245,.6); }

.nm-card-divider { height:1px; background:var(--color-border); margin:24px 0; }
.nm-price-card--dark .nm-card-divider { background:rgba(255,255,255,.12); }

.nm-card-features {
  list-style: none; margin: 0 0 32px; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.nm-card-features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--font-body); font-size: var(--text-body-sm);
  line-height: var(--leading-snug); color: var(--color-text-primary);
}
.nm-price-card--dark .nm-card-features li { color: rgba(241,243,245,.85); }
.nm-card-check { color:var(--color-brand); font-weight:700; flex-shrink:0; }

/* --- How it works -------------------------------------------- */
.nm-steps-wrap { padding: 90px 24px; max-width: 1280px; margin: 0 auto; }
.nm-steps-grid {
  position: relative;
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 32px; max-width: 900px; margin: 0 auto;
}
.nm-steps-line {
  position: absolute; top: 40px;
  left: calc(16.6% + 8px); right: calc(16.6% + 8px);
  height: 2px; background: var(--color-border); z-index: 0;
}
.nm-steps-line-fill {
  height: 100%; background: var(--color-brand);
  width: 0%; transition: width 1100ms cubic-bezier(0.4,0,0.2,1) 150ms;
}
.nm-steps-line-fill.nm-line-visible { width: 100%; }

.nm-step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 20px;
}
.nm-step__icon-wrap {
  width: 80px; height: 80px; border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  font-size: 1.25rem; color: var(--color-brand);
  opacity: 0; transform: scale(0.6);
  transition: opacity 450ms var(--ease-std), transform 450ms var(--ease-std);
}
.nm-step__icon-wrap.nm-icon-visible { opacity: 1; transform: scale(1); }
.nm-step__label {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-body-lg);
  color: var(--color-text-primary);
  text-transform: uppercase; letter-spacing: .5px;
}

@media (max-width:640px) {
  .nm-steps-grid { grid-template-columns:1fr; gap:40px; }
  .nm-steps-line  { display:none; }
}

/* --- FAQ ----------------------------------------------------- */
.nm-faq-wrap { padding: 90px 24px; max-width: 1280px; margin: 0 auto; }

/* --- Final CTA ----------------------------------------------- */
.nm-final-cta {
  position: relative; padding: 100px 24px; text-align: center;
  background: var(--color-brand);
  background-image: url('/assets/img/Backgrounds/rr-bg-v1_compressed.avif');
  background-blend-mode: multiply;
  background-size: cover; background-position: center;
}
.nm-final-cta__inner { max-width: 640px; margin: 0 auto; }
.nm-final-cta h2 {
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; letter-spacing: 1px;
  font-size: clamp(24px, 3.5vw, 32px);
  margin: 0 0 32px; color: #fff;
}

/* White outlined button for use on dark/brand backgrounds */
.btn-outline-white {
  color: #fff; border: 2px solid rgba(255,255,255,.8);
  background: transparent; font-family: var(--font-display);
  letter-spacing: var(--tracking-cta); font-size: 14px;
  padding: 12px 32px; border-radius: var(--radius-sm);
  text-transform: uppercase; text-decoration: none;
  transition: background 200ms, color 200ms, border-color 200ms;
  display: inline-block;
}
.btn-outline-white:hover {
  background: #fff; color: var(--color-brand);
  border-color: #fff;
}

/* --- FAQ accordion ------------------------------------------- */
#nm-faq-accordion .accordion-button {
  background-color: #E41F40;
  color: #fff;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 700;
}
#nm-faq-accordion .accordion-button:not(.collapsed) {
  background-color: #E41F40;
  color: #fff;
  box-shadow: none;
}
#nm-faq-accordion .accordion-button:hover {
  background-color: #C21A36;
}
#nm-faq-accordion .accordion-button::after {
  filter: invert(1) brightness(2);
}

/* --- Responsive ---------------------------------------------- */
@media (max-width:767px) {
  .nm-problem,
  .nm-pricing,
  .nm-steps-wrap,
  .nm-faq-wrap     { padding: 64px 20px; }
  .nm-final-cta    { padding: 80px 20px; }
  .nm-price-card   { padding: 28px 20px; }
  .nm-pricing-grid { grid-template-columns: 1fr; }
}

/* Dark mode compat */
[data-bs-theme=dark] .nm-price-card--light {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}
[data-bs-theme=dark] .nm-step__icon-wrap {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}