/* Desktop direction: approved light split, 15 September 2026.
   All existing mobile layout rules and the original mobile watch image are retained. */
.desktop-attention { display: none; }

@media (min-width: 901px) {
  body { background: #f6f5ee; }
  .wrap { max-width: 1440px; padding-inline: clamp(40px, 5.3vw, 80px); }
  .centered-header { height: 108px; }
  .brand-lockup .brand { font-size: 29px; gap: 7px; }
  .brand-lockup .brand img { width: 78px; height: 34px; }
  .brand-lockup .app-label { font-size: 9px; border-radius: 5px; padding: 6px 7px; }

  .hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: center;
    padding-block: 28px 72px;
    min-height: min(720px, calc(100svh - 108px));
  }
  .hero h1 {
    font-size: clamp(58px, 6.1vw, 88px);
    font-weight: 650; letter-spacing: -.055em; line-height: 1.07;
    margin: 0 0 30px;
  }
  .hero h1 em { font-weight: 400; letter-spacing: -.055em; }
  .hero-subtitle { font-size: clamp(21px, 2vw, 28px); font-weight: 600; margin: 0 0 14px; line-height: 1.4; }
  .hero-copy .intro { max-width: 570px; font-size: 17px; line-height: 1.7; }
  .story-link { font-size: 15px; line-height: 1.5; margin-top: 24px; padding-block: 8px; gap: 16px; }
  .story-link span { flex-shrink: 0; font-size: 23px; font-weight: 400; }
  .watch-hero {
    margin: 0; padding: 0; background: transparent; box-shadow: none;
    border-radius: 0; overflow: visible; width: 100%; justify-self: center;
  }
  .watch-hero picture { display: block; }
  .watch-hero img { display: block; width: 100%; height: auto; max-height: 620px; object-fit: contain; mix-blend-mode: normal; filter: drop-shadow(0 22px 15px #13282018); }
  .watch-hero .watch-heading, .watch-hero .watch-closing { display: none; }

  .section-heading h2, .contact h2 { font-size: clamp(40px, 4vw, 58px); line-height: 1.12; letter-spacing: -.045em; font-weight: 500; }
  .section-heading > .eyebrow, .clarity .index, .contact .eyebrow { font-size: 12px; line-height: 1.6; letter-spacing: .12em; }
  .section-heading > .eyebrow { margin-bottom: 20px; }

  .timeline-section {
    display: grid; grid-template-columns: 1.3fr 1fr; column-gap: 80px;
    row-gap: 64px; padding-block: 88px 104px; border-top: 1px solid #d9dfd3;
  }
  .timeline-section > .section-heading { max-width: none; margin: 0; }
  .timeline-section > .section-heading h2 { margin: 0; }
  .timeline-layout { display: contents; }
  .facilitator-guide {
    background: transparent; border-left: 1px solid #b6c5b1;
    padding: 8px 0 8px 28px; max-width: 370px; align-self: end; justify-self: end;
  }
  .facilitator-guide > p:not(.eyebrow) { font-size: 17px; line-height: 1.7; }
  .facilitator-guide strong { font-weight: 400; }
  .timeline { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }
  .timeline-step { padding: 30px 0 0; }
  .timeline-step:before, .timeline-step:last-child:before { display: block; position: absolute; left: 0; top: 0; bottom: auto; height: 1px; width: calc(100% + 34px); background: #b6c5b1; }
  .timeline-step:last-child:before { width: 100%; }
  .timeline-step:after { content: ''; position: absolute; width: 9px; height: 9px; top: -4px; left: 0; border-radius: 50%; background: #163e35; box-shadow: 0 0 0 5px #f6f5ee; }
  .step-number { display: none; }
  .step-meta { font-size: 11px; letter-spacing: .1em; color: #956046; margin-bottom: 18px; }
  .step-body h3 { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.35; letter-spacing: -.04em; font-weight: 550; min-height: 2.7em; margin: 0 0 20px; }
  .step-body blockquote { border: 0; padding: 0; background: transparent; font-size: 15px; line-height: 1.8; color: #52675d; margin: 0; }

  .clarity {
    position: relative; grid-template-columns: minmax(0, 1fr) minmax(260px, .9fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 65px); padding-block: 96px; align-items: center;
    background: #eeeee5; box-shadow: 0 0 0 100vmax #eeeee5; clip-path: inset(0 -100vmax);
  }
  .clarity .section-heading h2 { font-size: clamp(36px, 3.5vw, 50px); margin-top: 20px; }
  .static-report { padding: 0; }
  .single-report { width: 280px; max-width: 100%; }
  .single-report .phone { height: 545px; box-shadow: 0 20px 34px #14382c20; }
  .single-report figcaption { font-size: 12px; line-height: 1.7; margin-top: 24px; }
  .single-report figcaption strong { font-size: 14px; font-weight: 500; }
  .desktop-attention { display: block; }
  .desktop-attention h3 { font-size: clamp(25px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.04em; line-height: 1.25; margin: 0 0 24px; }
  .desktop-attention p { font-size: 15px; line-height: 1.8; color: #52675d; margin: 0 0 14px; }
  .desktop-attention .attention-lead { color: #163e35; font-size: 18px; line-height: 1.5; }
  .desktop-attention .attention-closing { margin-top: 32px; padding-top: 24px; border-top: 1px solid #c7d1c0; color: #163e35; font-size: 17px; }
  .desktop-attention strong { font-weight: 500; }

  .pricing { padding-block: 104px 96px; }
  .pricing > .section-heading { text-align: center; }
  .pricing .section-heading h2 { margin-bottom: 0; }
  .bundles { gap: 0; margin-top: 64px; }
  .bundle, .bundle:nth-child(2), .bundle:nth-child(3) { background: transparent; border: 0; padding: 12px 40px 20px; }
  .bundle + .bundle { border-left: 1px solid #c6d1c0; }
  .bundle h3 { font-size: 27px; font-weight: 500; letter-spacing: -.04em; }
  .bundle .price { font-size: 64px; font-weight: 500; letter-spacing: -.05em; margin: 26px 0 20px; }
  .price span { font-size: 13px; color: #52675d; }
  .allowance { font-size: 14px; line-height: 1.7; font-weight: 500; }
  .bundle ul { font-size: 15px; line-height: 2; margin: 24px 0 0; color: #52675d; }
  .bundle-cta { margin-top: 44px; }
  .button { padding: 18px 25px; border-radius: 5px; }

  .contact.wrap {
    max-width: none; margin: 0; border-radius: 0; padding-block: 84px;
    padding-inline: max(5.3vw, calc((100vw - 1280px) / 2));
    display: block; position: relative; background: #163e35;
  }
  .contact > div { display: grid; grid-template-columns: 1.3fr 1fr; column-gap: 96px; max-width: 1280px; margin: auto; }
  .contact .eyebrow { grid-column: 1; grid-row: 1; margin: 0 0 20px; }
  .contact h2 { grid-column: 1; grid-row: 2 / 5; font-size: clamp(42px, 4vw, 58px); margin: 0; }
  .contact p:not(.eyebrow) { grid-column: 2; max-width: 450px; font-size: 17px; line-height: 1.7; margin: 0 0 12px; }
  .contact p:nth-of-type(2) { grid-row: 2; }
  .contact p:nth-of-type(3) { grid-row: 3; }
  .contact .light { grid-column: 2; grid-row: 4; justify-self: start; margin-top: 15px; font-size: 14px; }
  .contact-flower { display: none; }
  footer.wrap { padding-block: 30px; font-size: 12px; }
  footer small { font-size: 11px; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .hero h1 { font-size: 59px; }
  .hero-copy .intro { font-size: 16px; }
  .story-link { font-size: 13px; gap: 12px; }
  .timeline-section { column-gap: 40px; }
  .timeline { gap: 24px; }
  .timeline-step:before { width: calc(100% + 24px); }
  .clarity { grid-template-columns: minmax(0, 1fr) 280px; gap: 38px; }
  .clarity > .section-heading { grid-column: 1; grid-row: 1; align-self: end; }
  .clarity > .report-demo { grid-column: 2; grid-row: 1 / 3; }
  .desktop-attention { grid-column: 1; grid-row: 2; align-self: start; }
  .desktop-attention h3 br { display: none; }
  .bundle { padding-inline: 25px; }
  .contact > div { column-gap: 48px; }
}