/* ==========================================================================
       365 INVITATIONS TO PLAY — SCOPED SOFT SPARK RESOURCE PAGE STYLES
       ========================================================================== */

    .sc-location a {
      color: var(--sp-deep-sage);
      font-weight: 800;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .pr-hero-meta {
      margin-top: 18px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 20px;
    }

    .pr-store-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 700;
      color: var(--sp-deep-sage);
      text-decoration: underline;
      text-underline-offset: 4px;
      min-height: 36px;
    }

    .pr-small {
      font-size: 14px;
      line-height: 1.55;
      color: var(--sp-quiet);
    }

    .play-purchase-note {
      margin: 0;
    }

    /* Right Hero Book Pair inside .sc-hero-photo */
    .sc-hero-photo.pr-hero-book-stage {
      padding: 18px 18px 16px;
      background: var(--sp-white);
    }

    .play-book-pair {
      display: grid;
      grid-template-columns: 1.12fr 0.88fr;
      gap: 14px;
      align-items: end;
      background: var(--sp-cream);
      padding: 18px;
      border-radius: calc(var(--radius-lg) - 8px);
      border: 1px solid var(--sp-border-subtle);
    }

    .play-book-pair img {
      width: 100%;
      height: auto;
      aspect-ratio: auto;
      object-fit: contain;
      border-radius: 10px;
      border: 1px solid var(--sp-border-subtle);
      box-shadow: var(--sp-shadow-card);
      background: var(--sp-white);
    }

    /* Section Headings */
    .pr-section-heading {
      max-width: 720px;
      margin-bottom: clamp(28px, 3.8vw, 44px);
    }

    .pr-section-heading p:not(.sc-kicker) {
      margin-top: 14px;
      font-size: clamp(17px, 1.3vw, 19px);
      color: var(--sp-quiet);
      line-height: 1.65;
    }

    /* 3-Column Feature / Developmental Domain & How-To Cards (.play-use) */
    .play-use {
      background-color: var(--sp-white);
      border-block: 1px solid var(--sp-border-subtle);
    }

    .play-use--cream {
      background-color: var(--sp-cream);
      border-block: none;
    }

    .play-use-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(18px, 2.6vw, 28px);
    }

    .play-use-grid > article,
    .play-use-grid > div {
      border-radius: var(--radius-lg);
      padding: clamp(24px, 3vw, 32px);
      border: 1px solid var(--sp-border-subtle);
      box-shadow: var(--sp-shadow-card);
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
    }

    .play-use-grid > *:nth-child(1) {
      background-color: var(--sp-sage-tint);
    }
    .play-use-grid > *:nth-child(2) {
      background-color: var(--sp-blush-tint);
    }
    .play-use-grid > *:nth-child(3) {
      background-color: var(--sp-teal-tint);
    }

    .play-use-step-badge {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      font-family: var(--font-heading);
      font-size: 11.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--sp-ink);
      padding: 4px 11px;
      border-radius: 999px;
    }

    .play-use-grid > *:nth-child(1) .play-use-step-badge { background: var(--sp-sage); }
    .play-use-grid > *:nth-child(2) .play-use-step-badge { background: var(--sp-butter); }
    .play-use-grid > *:nth-child(3) .play-use-step-badge { background: var(--sp-dusty-teal); }

    .play-use-grid h3 {
      font-family: var(--font-heading);
      font-size: clamp(20px, 1.8vw, 23px);
      font-weight: 800;
      color: var(--sp-ink);
      line-height: 1.25;
    }

    .play-use-grid p {
      font-size: 16px;
      line-height: 1.62;
      color: var(--sp-ink);
    }

    /* Complete Sample Invitation Section (#try-an-invitation) */
    .play-example {
      display: grid;
      grid-template-columns: 0.82fr 1.18fr;
      gap: clamp(28px, 4.5vw, 56px);
      align-items: start;
      scroll-margin-top: 96px;
    }

    .play-example-intro {
      background: var(--sp-white);
      border: 1px solid var(--sp-border-subtle);
      border-radius: var(--radius-lg);
      padding: clamp(24px, 3.5vw, 38px);
      box-shadow: var(--sp-shadow-card);
      position: sticky;
      top: 100px;
    }

    .play-example-intro > p:not(.sc-kicker) {
      margin-top: 14px;
      font-size: 17px;
      color: var(--sp-quiet);
      line-height: 1.62;
    }

    .play-example-art-wrap {
      margin-block: 22px 18px;
      background: var(--sp-cream);
      border: 1px solid var(--sp-border-subtle);
      border-radius: var(--radius-md);
      padding: 18px;
      display: grid;
      place-items: center;
    }

    .play-example-art-wrap img {
      width: min(100%, 340px);
      height: auto;
    }

    .play-invitation {
      background: var(--sp-white);
      border: 1px solid var(--sp-border-subtle);
      border-top: 8px solid var(--sp-butter);
      border-radius: var(--radius-lg);
      padding: clamp(28px, 4vw, 48px);
      box-shadow: var(--sp-shadow-card);
    }

    .play-invitation .pr-kicker {
      display: inline-block;
      font-family: var(--font-heading);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      background: var(--sp-butter);
      color: var(--sp-ink);
      padding: 5px 13px;
      border-radius: 999px;
      margin-bottom: 12px;
    }

    .play-invitation h3 {
      font-family: var(--font-heading);
      font-size: clamp(28px, 3vw, 38px);
      font-weight: 800;
      color: var(--sp-ink);
      letter-spacing: -0.02em;
      line-height: 1.15;
    }

    .play-invitation-lead {
      margin-top: 12px;
      font-family: var(--font-serif-soft);
      font-style: italic;
      font-size: clamp(18px, 1.5vw, 21px);
      color: var(--sp-deep-sage);
      line-height: 1.5;
    }

    .play-invitation h4 {
      font-family: var(--font-heading);
      font-size: 15px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--sp-ink);
      margin-block: 24px 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .play-invitation h4::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--sp-sage);
      flex-shrink: 0;
    }

    .play-invitation p,
    .play-invitation li {
      font-size: 16px;
      line-height: 1.65;
      color: var(--sp-ink);
    }

    .play-invitation ol {
      padding-left: 22px;
      margin: 0;
      display: grid;
      gap: 12px;
    }

    .play-invitation ol li {
      padding-left: 6px;
    }

    .play-invitation ol li::marker {
      font-family: var(--font-heading);
      color: var(--sp-deep-sage);
      font-weight: 800;
    }

    .play-questions {
      background: var(--sp-sage-tint);
      border: 1px solid var(--sp-border-subtle);
      border-radius: var(--radius-md);
      padding: 20px 24px;
      margin-block: 26px;
    }

    .play-questions h4 {
      margin-top: 0;
    }

    .play-questions ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 8px;
    }

    .play-questions li {
      position: relative;
      padding-left: 20px;
      font-weight: 600;
    }

    .play-questions li::before {
      content: "?";
      position: absolute;
      left: 0;
      top: 0;
      font-family: var(--font-heading);
      font-weight: 800;
      color: var(--sp-deep-sage);
    }

    /* Disclosure Drawer (.pr-detail) */
    .pr-detail {
      background: var(--sp-cream);
      border: 1px solid var(--sp-border-subtle);
      border-radius: var(--radius-md);
      padding: 16px 22px;
      margin-top: 16px;
    }

    .pr-detail summary {
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 800;
      color: var(--sp-ink);
    }

    .pr-detail summary::-webkit-details-marker {
      display: none;
    }

    .pr-detail summary::after {
      content: "+";
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--sp-white);
      border: 1px solid var(--sp-border-subtle);
      color: var(--sp-deep-sage);
      font-weight: 800;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    .pr-detail[open] summary::after {
      content: "−";
      background: var(--sp-butter);
      color: var(--sp-ink);
    }

    .pr-detail > div {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--sp-border-subtle);
    }

    .play-care {
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px dashed var(--sp-border-subtle);
    }

    /* Inside Page Spread Previews (.pr-preview-grid) */
    .pr-previews-section {
      background: var(--sp-white);
      border-top: 1px solid var(--sp-border-subtle);
    }

    .pr-preview-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(20px, 3vw, 32px);
    }

    .pr-preview-grid figure {
      background: var(--sp-cream);
      border: 1px solid var(--sp-border-subtle);
      border-radius: var(--radius-lg);
      padding: 18px 18px 22px;
      box-shadow: var(--sp-shadow-card);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .pr-preview-grid figure:hover {
      transform: translateY(-3px);
      box-shadow: var(--sp-shadow-float);
    }

    .pr-preview-grid figure:nth-child(1) { background: var(--sp-sage-tint); }
    .pr-preview-grid figure:nth-child(2) { background: var(--sp-blush-tint); }
    .pr-preview-grid figure:nth-child(3) { background: var(--sp-teal-tint); }

    .pr-preview-grid a {
      display: block;
      border-radius: 12px;
      overflow: hidden;
      background: var(--sp-white);
      border: 1px solid var(--sp-border-subtle);
    }

    .pr-preview-grid img {
      width: 100%;
      height: auto;
      display: block;
    }

    .pr-preview-grid figcaption {
      margin-top: 16px;
      font-size: 15.5px;
      line-height: 1.55;
      color: var(--sp-ink);
    }

    .pr-preview-grid figcaption strong {
      display: block;
      font-family: var(--font-heading);
      font-size: 17px;
      font-weight: 800;
      color: var(--sp-ink);
      margin-bottom: 4px;
    }

    .pr-preview-note {
      margin-top: 24px;
      text-align: center;
      font-size: 15px;
    }

    /* Purchase Card & Free Sample Band (.play-buy & .play-free) */
    .play-buy-grid {
      background: var(--sp-white);
      border: 1px solid var(--sp-border-subtle);
      border-radius: var(--radius-xl);
      padding: clamp(28px, 4.5vw, 52px);
      box-shadow: var(--sp-shadow-card);
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: clamp(28px, 4.5vw, 56px);
      align-items: center;
    }

    .play-buy-copy p {
      margin-top: 16px;
      font-size: 17px;
      color: var(--sp-quiet);
      line-height: 1.65;
    }

    .play-buy-copy p.pr-small {
      font-size: 14px;
    }

    .play-buy-box {
      background: var(--sp-cream);
      border: 1.5px solid var(--sp-butter);
      border-radius: var(--radius-lg);
      padding: clamp(24px, 3.2vw, 34px);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .pr-price {
      font-family: var(--font-heading);
      font-size: clamp(38px, 4vw, 48px);
      font-weight: 800;
      color: var(--sp-ink);
      line-height: 1.1;
      letter-spacing: -0.03em;
    }

    .pr-price span {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 600;
      color: var(--sp-quiet);
      letter-spacing: 0;
      margin-left: 4px;
    }

    .play-buy-box .sc-actions {
      margin-top: 8px;
    }

    .play-buy-box .sc-button {
      width: 100%;
    }

    .play-free-card {
      margin-top: clamp(28px, 4vw, 44px);
      background: var(--sp-teal-tint);
      border: 1px solid var(--sp-border-subtle);
      border-radius: var(--radius-xl);
      padding: clamp(28px, 4vw, 44px);
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: clamp(24px, 4vw, 48px);
      align-items: center;
    }

    .play-free-card p:not(.sc-kicker):not(.pr-small) {
      font-size: 17px;
      color: var(--sp-ink);
      line-height: 1.65;
    }

    /* Author Bio Card (.pr-author) */
    .pr-author-card {
      background: var(--sp-white);
      border: 1px solid var(--sp-border-subtle);
      border-radius: var(--radius-xl);
      padding: clamp(28px, 4vw, 44px);
      box-shadow: var(--sp-shadow-card);
      display: grid;
      grid-template-columns: 160px 1fr;
      gap: clamp(24px, 3.5vw, 40px);
      align-items: center;
      margin-bottom: clamp(44px, 6vw, 72px);
    }

    .pr-author-card img {
      width: 160px;
      height: 200px;
      object-fit: cover;
      border-radius: var(--radius-md);
      border: 2px solid var(--sp-butter);
      box-shadow: var(--sp-shadow-card);
    }

    .pr-author-card p:not(.sc-kicker) {
      margin-top: 14px;
      margin-bottom: 16px;
      font-size: 17px;
      color: var(--sp-quiet);
      line-height: 1.65;
      max-width: 66ch;
    }

    /* Closing CTA Strip (.pr-closing) */
    .pr-closing {
      background: var(--sp-blush-tint);
      border-top: 1px solid var(--sp-border-subtle);
      text-align: center;
    }

    .pr-closing-inner {
      max-width: 680px;
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .pr-closing .sc-actions {
      justify-content: center;
    }

    .pr-local {
      margin-top: 20px;
    }

    /* Complete Four-Resource Bundle Cross-Sell (#collection) */
    .pr-collection {
      background: var(--sp-cream);
      border-top: 1px solid var(--sp-border-subtle);
      padding-block: clamp(56px, 7vw, 96px);
      scroll-margin-top: 90px;
    }

    .pr-collection-grid {
      background: var(--sp-white);
      border: 1px solid var(--sp-border-subtle);
      border-radius: var(--radius-xl);
      padding: clamp(28px, 4.5vw, 52px);
      box-shadow: var(--sp-shadow-card);
      display: grid;
      grid-template-columns: 1.12fr 0.88fr;
      gap: clamp(28px, 4.5vw, 56px);
      align-items: start;
    }

    .pr-collection-copy > p:not(.sc-kicker):not(.pr-small) {
      margin-top: 16px;
      font-size: 17px;
      color: var(--sp-quiet);
      line-height: 1.65;
    }

    .pr-included {
      list-style: none;
      padding: 0;
      margin: 24px 0;
      display: grid;
      gap: 12px;
    }

    .pr-included li {
      background: var(--sp-cream);
      border: 1px solid var(--sp-border-subtle);
      border-left: 6px solid var(--sp-sage);
      border-radius: var(--radius-md);
      padding: 14px 18px;
      line-height: 1.5;
    }

    .pr-included li:nth-child(1) { border-left-color: var(--sp-blush); }
    .pr-included li:nth-child(2) { border-left-color: var(--sp-sage); }
    .pr-included li:nth-child(3) {
      border-left-color: var(--sp-butter);
      background: rgba(241, 212, 154, 0.22);
    }
    .pr-included li:nth-child(4) { border-left-color: var(--sp-dusty-teal); }

    .pr-included strong {
      display: block;
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 800;
      color: var(--sp-ink);
    }

    .pr-included span {
      display: block;
      font-size: 14px;
      margin-top: 3px;
      color: var(--sp-quiet);
    }

    .pr-collection-buy {
      background: var(--sp-sage-tint);
      border: 1px solid var(--sp-border-subtle);
      border-radius: var(--radius-lg);
      padding: clamp(24px, 3.2vw, 34px);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .pr-four-books {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 8px;
      align-items: end;
    }

    .pr-four-books img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 6px;
      border: 1px solid var(--sp-border-subtle);
      box-shadow: var(--sp-shadow-card);
      background: var(--sp-white);
    }

    .pr-saving {
      font-family: var(--font-heading);
      font-size: 14.5px;
      font-weight: 700;
      color: var(--sp-ink);
      background: var(--sp-butter);
      padding: 6px 12px;
      border-radius: 999px;
      width: fit-content;
    }

    .pr-collection-buy .sc-button {
      width: 100%;
      margin-top: 4px;
    }

    @media (max-width: 960px) {
      .play-use-grid,
      .play-example,
      .pr-preview-grid,
      .play-buy-grid,
      .play-free-card,
      .pr-collection-grid {
        grid-template-columns: 1fr;
      }

      .play-example-intro {
        position: static;
      }

      .pr-author-card {
        grid-template-columns: 1fr;
        text-align: left;
      }
    }

    @media (max-width: 599px) {
      .play-book-pair {
        grid-template-columns: 1fr 1fr;
        padding: 12px;
        gap: 10px;
      }

      .pr-author-card img {
        width: 120px;
        height: 150px;
      }
    }