/* preview-desktop.css — desktop enhancements for the new site
   loaded AFTER home2.css. overrides scattered sizes into one system.

   TYPE SCALE (one size per role per breakpoint):
   ┌─────────────────┬───────┬───────┬───────┬───────┬───────┐
   │ role             │ 375px │ 640px │ 960px │1200px │1400px │
   ├─────────────────┼───────┼───────┼───────┼───────┼───────┤
   │ hero title       │ 32    │ 36    │ 52    │ 84    │ 92    │
   │ tagline/bigtext  │ 28    │ 32    │ 48    │ 68-72 │ 72-80 │
   │ final CTA        │ 26    │ 28    │ 36    │ 56    │ 60    │
   │ section heading  │ 26/3  │ 26/3  │ 36/5  │ 40/5  │ 44/5  │
   │ sub-heading      │ 17    │ 18    │ 19    │ 21    │ 22    │
   │ body             │ 15    │ 16    │ 17    │ 18    │ 19    │
   │ muted/note       │ 13    │ 14    │ 15    │ 16    │ 16    │
   └─────────────────┴───────┴───────┴───────┴───────┴───────┘

   SPACING SYSTEM (8px grid):
   - vertical tiers: dramatic 120-200px | editorial 100-160px | section 80-120px
   - horizontal tiers: generous clamp(64,8vw,140) | standard clamp(64,6vw,120)
   - heading margin-bottom: 48px (centered sections) | 32px (cover/compositional)
   - content widths: narrow 880-920px | wide 1060-1200px

   ALIGNMENT (principle: symmetrical balance = trust, calm, quiet rigor):
   - default: centered on viewport
   - cover sections (what you get, why people come): left-aligned (compositional with photo)
   - steps: left-aligned within centered grid cells
   - everything else: centered
*/

/* ═══════════════════════════════════════════════════════════════
   MOBILE TYPE UNIFICATION (overrides home2.css scattered values)
   home2.css has body at 13/14/15/16/17px depending on section.
   we normalize: body=15px, sub=17px, muted=13px at 375px.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* body: 15px everywhere */
  .cover-point span { font-size: 15px; line-height: 1.6; }
  .step-desc { font-size: 15px; line-height: 1.5; }
  .faq-answer-inner { font-size: 15px; line-height: 1.6; }
  .pricing-label { font-size: 15px; }

  /* sub-headings: 17px everywhere */
  .cover-point strong { font-size: 17px; }
  .step-title { font-size: 17px; }
  .faq-trigger { font-size: 17px; }

  /* muted/note: 13px */
  .pricing-note { font-size: 13px; }
}

@media (min-width: 481px) and (max-width: 640px) {
  /* body: 16px */
  .cover-point span { font-size: 16px; line-height: 1.6; }
  .step-desc { font-size: 16px; line-height: 1.55; }
  .faq-answer-inner { font-size: 16px; line-height: 1.6; }
  .pricing-label { font-size: 16px; }

  /* sub-headings: 18px */
  .cover-point strong { font-size: 18px; }
  .step-title { font-size: 18px; }
  .faq-trigger { font-size: 18px; }

  /* muted/note: 14px */
  .pricing-note { font-size: 14px; }
}

@media (min-width: 641px) and (max-width: 959px) {
  /* body: 17px */
  .cover-point span { font-size: 17px; line-height: 1.6; }
  .step-desc { font-size: 17px; line-height: 1.6; }
  .faq-answer-inner { font-size: 17px; line-height: 1.65; }
  .pricing-label { font-size: 17px; }

  /* sub-headings: 19px */
  .cover-point strong { font-size: 19px; }
  .step-title { font-size: 19px; }
  .faq-trigger { font-size: 19px; }

  /* muted/note: 15px */
  .pricing-note { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════
   SECTION HEADING — consistent across all sections
   ═══════════════════════════════════════════════════════ */

@media (min-width: 960px) {
  .section-heading {
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-align: center;
  }
  .cover-text .section-heading {
    font-size: 36px;
    font-weight: 500;
    text-align: left;
  }

  /* more breathing room before gift section */
  .pricing-cta { padding-bottom: 60px; }

  /* big text: center it (not left-pinned) */
  .big-text { text-align: center; }
  .big-text .title-lg { margin: 0 auto; }

  /* gift grid: center on viewport */
  .gift-grid { margin: 0 auto; }
}

/* remove decorative ::after line at desktop — whitespace is enough */
@media (min-width: 1200px) {
  .section-heading::after { display: none; }
  .cover-text .section-heading::after { display: none; }
  .pricing-cta { padding-bottom: 40px; } /* fix #5: section owns 80px bottom now, cta just adds button breathing room */
}

/* ═══════════════════════════════════════════════════════
   DESKTOP 960px+ — unified body=17px, sub=19px
   ═══════════════════════════════════════════════════════ */

@media (min-width: 960px) {
  /* body: 17px everywhere */
  .cover-point span { font-size: 17px; line-height: 1.65; }
  .step-desc { font-size: 17px; line-height: 1.65; }
  .faq-answer-inner { font-size: 17px; line-height: 1.65; }
  .pricing-label { font-size: 17px; }

  /* sub-headings: 19px everywhere */
  .cover-point strong { font-size: 19px; }
  .step-title { font-size: 19px; }
  .faq-trigger { font-size: 19px; }

  /* muted/note: 15px */
  .pricing-note { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════
   WIDE DESKTOP (1200px+) — body=18px, sub=21px
   ═══════════════════════════════════════════════════════ */

@media (min-width: 1200px) {

  /* — HERO — */
  .hero { height: calc(100vh - 80px); height: calc(100svh - 80px); min-height: calc(100svh - 80px); }
  .hero-bg.desktop { background-position: center 30%; }
  .hero-title.title-xl { font-size: 84px; letter-spacing: -0.05em; max-width: 10.5ch; }
  .hero-content { padding: 0 64px clamp(104px, 12vh, 136px); }
  .hero-cta .btn { height: 64px; padding: 0 48px; font-size: 17px; }

  /* — TAGLINE — (fix #4: horizontal padding matches siblings) */
  .tagline { padding: clamp(100px, 14vw, 160px) clamp(64px, 6vw, 120px); }
  .tagline .title-lg { font-size: 68px; letter-spacing: -0.04em; line-height: 1.05; }

  /* — BIG TEXT — centered, constrained width */
  .big-text { padding: clamp(100px, 14vw, 160px) clamp(64px, 8vw, 140px); text-align: center; }
  .big-text .title-lg { font-size: 72px; max-width: 920px; margin: 0 auto; letter-spacing: -0.05em; line-height: 1.08; }

  /* — SECTION HEADINGS: 40px / weight 500 — */
  .section-heading { font-size: 40px; font-weight: 500; margin-bottom: 48px; }
  .cover-text .section-heading { font-size: 40px; font-weight: 500; margin-bottom: 32px; } /* fix #7: 28→32 on 8px grid */
  /* fix #1: faq heading margin was 40px, now 48px like all other sections — removed override */

  /* — UNIFIED BODY: 18px — */
  .cover-point span { font-size: 18px; line-height: 1.7; }
  .step-desc { font-size: 18px; line-height: 1.7; }
  .faq-answer-inner { font-size: 18px; line-height: 1.7; }
  .pricing-label { font-size: 18px; }
  .footer-text { font-size: 18px; }

  /* — UNIFIED SUB-HEADINGS: 21px — */
  .cover-point strong { font-size: 21px; margin-bottom: 6px; }
  .step-title { font-size: 21px; }
  .faq-trigger { font-size: 21px; padding: 24px 0; }

  /* — MUTED/NOTE: 16px — */
  .pricing-note { font-size: 16px; }

  /* — COVER SECTIONS — left-aligned (compositional with photo), more edge breathing room */
  .cover-section { min-height: 100vh; min-height: 100svh; }
  .cover-content { padding: 80px clamp(64px, 8vw, 140px) 80px; } /* fix #3: bottom 56→80 matches section minimum */
  .cover-text { max-width: 56%; }
  .cover-cta.btn { height: 64px; padding: 0 48px; font-size: 17px; }

  /* — STEPS — */
  .steps-section { padding: clamp(80px, 10vw, 120px) clamp(64px, 6vw, 120px); }
  .steps-list { max-width: 1060px; gap: 2px; }
  .step { padding: 48px 40px; }
  .step-number { font-size: 80px; }

  /* — PRICING — */
  .pricing-section { padding: clamp(80px, 10vw, 120px) clamp(64px, 6vw, 120px) 80px; } /* fix #5: bottom 40→80, section owns spacing */
  .pricing-list { max-width: 880px; }
  .pricing-row { padding: 32px 0; } /* fix #2: was regressing from 28→24; now 32 (on 8px grid) */
  .pricing-price { font-size: 52px; }
  .pricing-cta .btn { height: 64px; padding: 0 48px; font-size: 17px; }

  /* — GIFT: replace marble with B&W portfolio photo — */
  .gift-section {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.75), rgba(0,0,0,0.55)),
                       url('https://img.monomo.space/tildont/slide-06.webp');
    background-size: cover;
    background-position: center 40%;
    padding: clamp(80px, 10vw, 120px) clamp(64px, 6vw, 120px);
  }
  .gift-grid { max-width: 1060px; margin: 0 auto; } /* fix #6: removed duplicate rule */
  .gift-img img { border-radius: 20px; }
  .gift-desc { font-size: 21px; line-height: 1.6; color: rgba(255,255,255,0.75); }
  .gift-cta-btn.btn { height: 64px; padding: 0 48px; font-size: 17px; }

  /* — FAQ — */
  .faq-section { padding: clamp(80px, 10vw, 120px) clamp(64px, 6vw, 120px); }
  .faq-list { max-width: 880px; }

  /* — FINAL CTA — */
  .final-cta { padding: clamp(120px, 16vw, 200px) 0; }
  .final-cta .title-sm { font-size: 56px; letter-spacing: -0.03em; margin-bottom: 52px; }
  .final-cta .btn { height: 64px; padding: 0 48px; font-size: 17px; }

  /* — FOOTER — */
  .footer { padding: 80px 0; }

  /* — SLIDER — */
  .slider-desktop .slider-wrapper { min-height: 100vh; min-height: 100svh; }
  .slider-arrow { width: 64px; height: 64px; }
}

/* ═══════════════════════════════════════════════════════
   MBP 16" (1400px+) — body=19px, sub=22px
   ═══════════════════════════════════════════════════════ */

@media (min-width: 1400px) {
  .hero-bg.desktop { background-position: center 26%; }
  .hero-title.title-xl { font-size: 92px; }
  .tagline .title-lg { font-size: 72px; }
  .big-text .title-lg { font-size: 80px; max-width: 980px; }

  /* section headings: 44px */
  .section-heading { font-size: 44px; }
  .cover-text .section-heading { font-size: 44px; }

  /* body: 19px everywhere */
  .cover-point span { font-size: 19px; }
  .step-desc { font-size: 19px; }
  .faq-answer-inner { font-size: 19px; max-width: 780px; }
  .pricing-label { font-size: 19px; }
  .footer-text { font-size: 19px; }

  /* sub-headings: 22px everywhere */
  .cover-point strong { font-size: 22px; }
  .step-title { font-size: 22px; }
  .faq-trigger { font-size: 22px; }

  /* cover: optimal text width */
  .cover-text { max-width: 52%; }

  /* steps: 4-col */
  .steps-list { max-width: 1200px; grid-template-columns: repeat(4, 1fr); }
  .step { padding: 40px 28px; }
  .step-number { font-size: 84px; }

  /* pricing */
  .pricing-list { max-width: 920px; }
  .pricing-price { font-size: 54px; }

  /* FAQ */
  .faq-list { max-width: 920px; }

  /* gift */
  .gift-grid { max-width: 1120px; }
  .gift-desc { font-size: 22px; }

  /* final CTA */
  .final-cta .title-sm { font-size: 60px; }
}

/* ═══════════════════════════════════════════════════════
   ULTRA-WIDE (1600px+) — body=20px, sub=23px
   ═══════════════════════════════════════════════════════ */

@media (min-width: 1600px) {
  .hero-bg.desktop { background-position: center 24%; }
  .hero-title.title-xl { font-size: 96px; }
  .tagline .title-lg { font-size: 76px; }
  .big-text .title-lg { font-size: 84px; max-width: 1060px; }

  /* section headings: 48px */
  .section-heading { font-size: 48px; }
  .cover-text .section-heading { font-size: 48px; }

  /* body: 20px */
  .cover-point span { font-size: 20px; }
  .step-desc { font-size: 20px; }
  .faq-answer-inner { font-size: 20px; }
  .pricing-label { font-size: 20px; }

  /* sub-headings: 23px */
  .cover-point strong { font-size: 23px; }
  .step-title { font-size: 23px; }
  .faq-trigger { font-size: 23px; }

  .cover-text { max-width: 48%; }
  .final-cta .title-sm { font-size: 64px; }
  .pricing-price { font-size: 56px; }
  .gift-desc { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════
   RETINA HAIRLINES
   ═══════════════════════════════════════════════════════ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .nav.scrolled { border-bottom-width: 0.5px; }
  .pricing-row { border-bottom-width: 0.5px; }
  .faq-item { border-bottom-width: 0.5px; }
  .step { border-width: 0.5px; }
}

/* ═══════════════════════════════════════════════════════
   HOVER REFINEMENTS (pointer devices only)
   ═══════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-1px);
    transition: transform 0.2s ease-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
  }

  .nav-links a { position: relative; }
  .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: #161616;
    transition: width 0.3s ease-out;
  }
  .nav-links a:hover::after { width: 100%; }

  .faq-trigger:hover { color: #606060; transition: color 0.2s ease-out; }

  .cover-cta.btn:hover,
  .final-cta .btn-white:hover {
    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.15);
  }

  .pricing-row:hover {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    transition: background 0.2s ease-out;
  }

  .gift-img img { transition: transform 0.6s ease-out; }
  .gift-img:hover img { transform: scale(1.02); }

  .footer-social a:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease-out;
  }
}

/* ═══════════════════════════════════════════════════════
   GIFT SECTION: B&W photo on desktop, marble on mobile
   mobile keeps lightweight local marble from home2.css
   ═══════════════════════════════════════════════════════ */

@media (min-width: 960px) {
  .gift-section {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.75), rgba(0,0,0,0.55)),
                       url('https://img.monomo.space/tildont/slide-06.webp');
    background-size: cover;
    background-position: center 40%;
  }
}

/* ═══════════════════════════════════════════════════════
   PRICING NOTE (new element)
   ═══════════════════════════════════════════════════════ */

.pricing-note {
  max-width: 800px;
  margin: 24px auto 0;
  text-align: center;
  font-size: var(--copy-regular);
  color: #606060;
  line-height: 1.6;
  padding: 0 20px;
}

@media (min-width: 960px) {
  .pricing-note { padding: 0 40px; }
}

@media (min-width: 1200px) {
  .pricing-note { max-width: 880px; margin-top: 32px; }
}

/* scroll snap removed — caused jerky "swivel" at section borders on desktop */