/* Desktop Visual Pass V0.9 — consolidated desktop composition, hierarchy and palette */
@media (min-width: 981px) {
  /* How it works: clearer section label hierarchy */
  .how-panel {
    background: #f6c84f;
    border-radius: 36px;
    padding: 76px 72px;
  }

  .how-panel .eyebrow-dark {
    color: rgba(255,255,255,.96);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .015em;
    margin-bottom: 8px;
  }

  .how-panel .section-heading h2 {
    color: #15383b;
    font-size: 54px;
    line-height: 1.12;
    margin: 6px 0 18px;
  }

  .how-panel .section-heading p {
    color: rgba(21,56,59,.70);
    font-size: 21px;
    line-height: 1.6;
  }

  .how-panel .section-heading { max-width: 860px; margin-bottom: 56px; }
  .how-panel .workflow-grid { gap: 28px; }
  .how-panel .workflow-step { padding: 34px; min-height: 246px; }
  .how-panel .step-no { font-size: 17px; margin-bottom: 34px; }
  .how-panel .workflow-step h3 { font-size: 28px; margin-bottom: 14px; }
  .how-panel .workflow-step p { font-size: 18px; line-height: 1.6; }

  .product-story .feature-copy .eyebrow {
    font-size: 17px;
    letter-spacing: .025em;
  }

  .product-story .feature-copy > p { font-size: 20px; line-height: 1.6; }
  .product-story .check-list li { font-size: 18px; }
  /* Feature 02 + 03: inset editorial cards on white canvas */
  .feature-two,
  .feature-three {
    background: #fff;
    color: var(--ink);
    padding: 78px 0;
  }

  .feature-two .feature-grid,
  .feature-three .feature-grid {
    border-radius: 42px;
    padding: 58px 56px;
    gap: 58px;
    overflow: hidden;
  }

  .feature-two .feature-grid {
    background: #143b46;
    color: #fff;
    box-shadow: 0 24px 60px rgba(12,41,48,.09);
  }

  .feature-two .feature-copy .eyebrow {
    color: #b8eee3;
  }

  .feature-two .feature-copy h2 {
    color: #fff;
    font-size: 38px;
    line-height: 1.16;
  }

  .feature-two .feature-copy > p {
    color: rgba(255,255,255,.82);
  }

  .feature-two .check-list li {
    color: rgba(255,255,255,.88);
  }

  .feature-two .check-list li::before {
    background: #f6c84f;
    box-shadow: none;
  }

  .feature-two .feature-visual-stage {
    padding: 28px;
    border-radius: 30px;
    background: rgba(255,255,255,.10);
  }

  .feature-two .feature-visual {
    border-radius: 24px;
    box-shadow: 0 24px 54px rgba(9,31,38,.18);
  }

  /* Feature 03: bright butter yellow, not ochre */
  .feature-three .feature-grid {
    background: #ffd96a;
    box-shadow: 0 24px 60px rgba(44,55,50,.07);
  }

  .feature-three .feature-copy .eyebrow {
    color: #0d635c;
  }

  .feature-three .feature-copy h2 {
    color: #12383b;
    font-size: 38px;
    line-height: 1.16;
  }

  .feature-three .feature-copy > p,
  .feature-three .check-list li {
    color: #355356;
  }

  .feature-three .check-list li::before {
    background: #0d655e;
    box-shadow: none;
  }

  .feature-three .feature-visual-stage {
    padding: 26px;
    border-radius: 30px;
    background: rgba(255,255,255,.38);
    border: 1px solid rgba(255,255,255,.48);
  }

  .feature-three .feature-visual {
    background: #fff;
    border-color: rgba(16,42,46,.08);
    border-radius: 24px;
    box-shadow: 0 24px 54px rgba(68,67,41,.13);
  }

  /* Why: white editorial canvas + neutral principle panel */
  .why {
    background: #fff;
    padding: 92px 0 86px;
  }

  .why > .container {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: 86px;
    align-items: center;
    box-shadow: none;
  }

  .why .section-heading {
    margin: 0 auto;
    max-width: 430px;
    text-align: center;
  }

  .why .section-heading .eyebrow {
    color: #0f7066;
  }

  .why .section-heading h2 {
    color: #15383b;
    font-size: 40px;
    line-height: 1.15;
    margin: 8px 0 0;
  }

  .why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: #f5f6f3;
    border: 1px solid #e8ebe6;
    border-radius: 32px;
    padding: 10px 28px;
  }

  .why-grid > .why-stepper-panel[hidden] {
    display: grid !important;
  }

  .why-grid article {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #dfe4df;
    border-radius: 0;
    padding: 24px 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas:
      "num title"
      "num desc";
    column-gap: 18px;
    align-items: start;
    box-shadow: none;
  }

  .why-grid > .why-stepper-panel:last-of-type {
    border-bottom: 0;
  }

  .why-grid span {
    grid-area: num;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ffd96a;
    border: 0;
    color: #15383b;
    font-size: 12px;
    font-weight: 800;
    margin-top: 2px;
  }

  .why-grid h3 {
    grid-area: title;
    margin: 0 0 4px;
    font-size: 21px;
    color: #15383b;
  }

  .why-grid p {
    grid-area: desc;
    margin: 0;
    max-width: 560px;
    color: #667273;
  }

  /* FAQ: heading and accordion share one left edge */
  .faq-section {
    background: #fcfcf8;
    padding: 78px 0 104px;
  }

  .faq-section .faq-grid {
    display: block;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  .faq-section .faq-heading {
    position: static;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 24px;
    text-align: center;
  }

  .faq-section .faq-heading .eyebrow {
    margin-bottom: 7px;
  }

  .faq-section .faq-heading h2 {
    font-size: 38px;
    line-height: 1.16;
    margin: 0;
    color: #15383b;
  }

  .faq-section .faq-list {
    border-top: 0;
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
  }

  .faq-section .faq-list details {
    border: 1px solid #e1e6e2;
    border-radius: 17px;
    background: #fff;
    padding: 0 22px;
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
  }

  .faq-section .faq-list details:hover {
    border-color: #cad7d2;
  }

  .faq-section .faq-list details[open] {
    border-color: #e2c25c;
    background: #fffdf6;
    box-shadow: 0 10px 26px rgba(16,42,46,.05);
  }

  .faq-section .faq-list summary {
    min-height: 68px;
    font-size: 16px;
  }

  .faq-section .faq-list summary span {
    color: #0f7066;
  }

  .faq-section .faq-list details p {
    margin: -2px 42px 20px 0;
    color: #667577;
    max-width: 760px;
  }
}

/* RC1 accessibility hardening: visible keyboard focus without changing mouse/touch styling. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid #0f7066;
  outline-offset: 3px;
  border-radius: 8px;
}

.btn:focus-visible {
  outline-color: #15383b;
  outline-offset: 4px;
}

@media (min-width: 981px) {
  .hero-visual.product-asset-shell {
    width: 126%;
    margin-left: -12%;
  }

  .product-story { position: relative; isolation: isolate; overflow: clip; }
  .product-story-rail {
    position: absolute; z-index: -1; top: 86px; right: 0; bottom: 86px;
    left: calc(50% + 8px); border-radius: 76px 0 0 76px;
    background: var(--story-rail-color, #167C78);
  }
  .product-story .feature-block { background: transparent; color: var(--ink); padding: 94px 0; }
  .product-story .feature-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 42px; }
  .product-story .feature-copy { grid-column: 1 / span 5; align-self: center; }
  .product-story .feature-visual-stage { grid-column: 6 / -1; padding: 0; background: transparent; border: 0; }
  .feature-media-safe-area {
    position: relative;
    min-height: 430px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .feature-media-primary {
    position: relative; z-index: 2; width: min(100%, 680px); margin-left: -6%;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
  }
  .product-story .feature-one .feature-media-primary,
  .product-story .feature-two .feature-media-primary,
  .product-story .feature-three .feature-media-primary {
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
  }
  .product-story .feature-one .feature-media-primary { margin-left: -24%; }
  .product-story .feature-two .feature-media-primary,
  .product-story .feature-three .feature-media-primary { margin-left: 3%; }
  .feature-media-primary img { border-radius: 0; }
  .product-story [data-story-section="discovery"] .feature-media-primary img {
    transform: scale(1.42); transform-origin: 56% 50%;
  }
  .product-story [data-story-section="matching"] .feature-media-primary img {
    transform: scale(1.25);
    transform-origin: 56% 50%;
  }
  .product-story [data-story-section="confirm"] .feature-media-primary img {
    transform: scale(1.16);
    transform-origin: 52% 50%;
  }
  .feature-media-secondary { position: absolute; z-index: 3; right: -3%; bottom: -4%; max-width: 38%; }

  .product-story .feature-two .feature-grid,
  .product-story .feature-three .feature-grid {
    background: transparent;
    border-radius: 0;
    padding: 0;
    overflow: visible;
    box-shadow: none;
  }

  .product-story .feature-two .feature-visual-stage,
  .product-story .feature-three .feature-visual-stage {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .product-story [data-story-section="matching"] .feature-copy,
  .product-story [data-story-section="matching"] .feature-copy h2 { color: var(--ink); }

  .product-story [data-story-section="matching"] .feature-copy .eyebrow { color: var(--teal); }

  .product-story [data-story-section="matching"] .feature-copy > p,
  .product-story [data-story-section="matching"] .check-list li { color: var(--muted); }

  .product-story [data-story-section="discovery"] .feature-copy,
  .product-story [data-story-section="confirm"] .feature-copy { color: var(--ink); }
}