/* Organizations page (/organizations/): For Organizations + Client Care Access.
   Page-scoped styles loaded after styles.css. Core tokens only; the page's
   own identity comes from the sage wash bands, sage rules, and kelp labels.
   Documented in DESIGN_SYSTEM.md §9 ("Organizations page"). */

/* In-page section nav (sits under the sticky site header) */
.organizations-page .section-nav { position: relative; z-index: 15; display: block; width: auto; gap: 0; padding: 0; border-bottom: 1px solid rgba(55, 94, 119, .14); background: rgba(255, 255, 255, .55); }
.organizations-page .section-nav-links { display: flex; min-height: 3.25rem; align-items: center; justify-content: space-between; gap: 1.2rem; }
.organizations-page .section-nav a { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--blue); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.organizations-page .section-nav a::after { bottom: .45rem; }

/* Shared section rhythm */
.org-section { padding-block: clamp(4rem, 8vw, 7rem); scroll-margin-top: 1rem; }
.org-section.alt { background: var(--mist); }
.org-samples, .org-faq { background: linear-gradient(180deg, rgba(139, 167, 131, .14), rgba(139, 167, 131, .2)); }
.org-pricing { background: linear-gradient(100deg, rgba(227, 214, 194, .38), var(--cream)); }
.org-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.org-split h2 { max-width: 12ch; margin-bottom: 1.2rem; }
.org-split .lead { margin-bottom: 1rem; }
.org-split > div > p:not(.eyebrow):not(.lead) { max-width: 36rem; }
.org-split > div > p:last-child { margin-bottom: 0; }
.org-section-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 3vw, 2.6rem); }
.org-section-head h2 { max-width: 16ch; margin-bottom: 1.2rem; }
.org-section-head p:last-child { max-width: 42rem; margin-bottom: 0; font-size: clamp(1.05rem, 1.7vw, 1.15rem); line-height: 1.6; }
.org-note { max-width: 42rem; margin: 1.4rem 0 0; color: rgba(38, 63, 80, .75); font-size: .88rem; line-height: 1.55; }

/* Hero: paper surface, copy left, arched photo right */
.org-hero { position: relative; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 7vw, 6rem); }
.has-kelp-sketch .org-hero, .has-kelp-sketch .org-connect { z-index: 13; }
.org-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(16rem, .8fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.org-hero h1 { max-width: 13ch; margin-bottom: 1.3rem; font-size: clamp(3.2rem, 5.6vw, 5.6rem); line-height: .95; }
.org-hero h1 em { color: var(--ocean); font-style: italic; font-weight: 400; }
.org-hero .lead { max-width: 34rem; margin-bottom: 1rem; }
.org-hero-copy > p:not(.eyebrow):not(.lead) { max-width: 36rem; margin-bottom: 0; font-size: 1.05rem; line-height: 1.6; }
.org-hero .button-row { margin-top: 1.8rem; }
.org-hero-photo { margin: 0; }
.org-hero-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 50% 50% 1.25rem 1.25rem / 40% 40% 1.25rem 1.25rem; object-fit: cover; object-position: center; box-shadow: var(--shadow); }
.org-hero-photo figcaption { margin-top: 1rem; color: var(--blue-deep); font-family: var(--serif); font-size: 1.1rem; font-style: italic; text-align: center; }

/* Sample player card */
.org-samples-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(20rem, 1.1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.org-samples-grid h2 { max-width: 9ch; margin-bottom: 1.2rem; }
.org-samples-grid .lead { max-width: 30rem; margin-bottom: 0; }
.sample-player { min-width: 0; border: 1px solid rgba(55, 94, 119, .15); border-radius: 2rem 2rem 1rem 1rem; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--white); box-shadow: var(--shadow); }
.sample-label { display: block; margin-bottom: .55rem; color: var(--blue-deep); font-size: .85rem; font-weight: 700; }
.sample-player select { width: 100%; min-height: 3rem; border: 1px solid rgba(55, 94, 119, .38); border-radius: .75rem; padding: .7rem .9rem; background: var(--cream); color: var(--blue-deep); font: inherit; text-overflow: ellipsis; }
.sample-player select:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }
.sample-now-label { margin: 1.4rem 0 .25rem; color: var(--coral-ink); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sample-now { margin: 0 0 1.1rem; color: var(--blue); font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.65rem); font-weight: 600; line-height: 1.2; }
.sample-controls { display: flex; align-items: center; gap: 1.1rem; }
.sample-toggle { min-width: 9rem; gap: .6rem; cursor: pointer; font-family: inherit; }
.sample-toggle-icon { font-size: .9rem; line-height: 1; }
.sample-progress { display: grid; min-width: 0; flex: 1; gap: .3rem; }
.sample-progress input { width: 100%; margin: 0; accent-color: var(--blue); cursor: pointer; }
.sample-progress input:disabled { cursor: default; opacity: .5; }
.sample-progress input:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
.sample-progress span { color: rgba(38, 63, 80, .75); font-size: .8rem; font-variant-numeric: tabular-nums; }
.sample-player audio[hidden] { display: none; }
.sample-privacy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: 1.2rem; border-radius: .8rem; padding: .85rem 1rem; background: var(--mist); }
.sample-privacy[hidden] { display: none; }
.sample-privacy p { margin: 0; color: var(--blue-deep); font-size: .85rem; font-weight: 700; line-height: 1.45; }
.sample-privacy .privacy-button { border-color: var(--blue); background: var(--blue); color: var(--white); }
.sample-privacy .privacy-button[hidden] { display: none; }
.sample-error, .sample-footnote { margin: 1rem 0 0; color: rgba(38, 63, 80, .75); font-size: .85rem; }
.sample-error { color: var(--coral-ink); font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Side panels (employer package, ways to share) */
.org-panel { border: 1px solid rgba(55, 94, 119, .12); border-radius: 1.5rem; padding: clamp(1.5rem, 3vw, 2.4rem); background: var(--white); box-shadow: 0 14px 34px rgba(38, 63, 80, .08); }
.org-panel .eyebrow { margin-bottom: .9rem; font-size: .7rem; }
.org-panel h3 { max-width: 14ch; margin-bottom: 1.2rem; font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.org-features { margin: 0; padding: 0; list-style: none; }
.org-features li { position: relative; padding-left: 1.6rem; margin-bottom: .85rem; font-size: .97rem; line-height: 1.55; }
.org-features li:last-child { margin-bottom: 0; }
.org-features li::before { position: absolute; top: .75em; left: 0; width: 1rem; height: 2px; background: var(--sage); content: ""; }
.share-row { padding: 1rem 0; border-top: 1px solid rgba(55, 94, 119, .16); }
.share-row strong { display: block; margin-bottom: .2rem; color: var(--blue); font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.share-row p { margin: 0; font-size: .95rem; line-height: 1.55; }
.care-panel .org-note { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(55, 94, 119, .16); font-size: .85rem; }

/* Listening access demo */
.org-demo { padding-top: 0; }
.demo-card { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; border: 1px solid rgba(55, 94, 119, .12); border-radius: 1.5rem; padding: clamp(1.4rem, 3vw, 2.4rem); background: var(--white); box-shadow: 0 14px 34px rgba(38, 63, 80, .08); }
.demo-copy h2 { max-width: 12ch; margin-bottom: 1rem; font-size: clamp(2rem, 3.4vw, 3rem); }
.demo-copy p:last-child { margin-bottom: 0; color: rgba(38, 63, 80, .78); font-size: .95rem; }
.demo-frame { display: grid; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1.25rem 1.25rem .75rem .75rem; background: var(--blue-deep); }
.demo-frame video { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-touch-callout: none; }

/* Guide ideas */
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.guide-card { min-width: 0; border: 1px solid rgba(55, 94, 119, .12); border-radius: 1.5rem; padding: clamp(1.35rem, 2.5vw, 1.8rem); background: var(--white); box-shadow: 0 14px 34px rgba(38, 63, 80, .08); }
.guide-number { display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 1rem; color: var(--kelp); font-size: .76rem; font-weight: 800; letter-spacing: .12em; }
.guide-number::before { width: 2rem; height: 1px; background: currentColor; content: ""; }
.guide-card h3 { margin-bottom: 1rem; font-size: clamp(1.4rem, 1.9vw, 1.7rem); }
.guide-card p:not(.guide-number) { margin: 0; font-size: .93rem; line-height: 1.55; }
.guide-card p + p { margin-top: .9rem; }
.guide-card strong { display: block; margin-bottom: .15rem; color: var(--coral-ink); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* Partner support */
.support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.support-grid article { border-top: 2px solid var(--sage); padding-top: 1.3rem; }
.support-grid h3 { margin-bottom: .6rem; font-size: 1.4rem; }
.support-grid p { margin: 0; font-size: .97rem; line-height: 1.55; }

/* Pricing & partnership */
.org-pricing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.org-pricing-grid h2 { max-width: 10ch; margin-bottom: 1.2rem; }
.org-pricing-grid .lead { max-width: 30rem; margin-bottom: 0; }
.pricing-list article { padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid rgba(55, 94, 119, .16); }
.pricing-list h3 { margin-bottom: .5rem; font-size: 1.4rem; }
.pricing-list p { margin: 0; font-size: .97rem; line-height: 1.55; }
.pricing-list .button { margin-top: .4rem; }

/* Grounded in practice */
.org-approach { padding-block: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid rgba(55, 94, 119, .14); }
.org-approach-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.org-approach-grid .eyebrow { margin: .35rem 0 0; }
.org-approach h2 { max-width: 16ch; margin-bottom: 1rem; font-size: clamp(2rem, 3.4vw, 3rem); }
.org-approach-grid div > p:not(.eyebrow) { max-width: 40rem; font-size: 1.05rem; line-height: 1.6; }
.org-approach-grid div > p:last-child { margin-bottom: 0; }

/* FAQ */
.org-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.org-faq-intro h2 { max-width: 12ch; margin-bottom: 1.2rem; }
.org-faq-intro p:last-child { max-width: 34rem; margin-bottom: 0; font-size: 1.02rem; line-height: 1.6; }
.org-faq-list details { border-top: 1px solid rgba(55, 94, 119, .18); }
.org-faq-list details:last-child { border-bottom: 1px solid rgba(55, 94, 119, .18); }
.org-faq-list summary { position: relative; display: flex; min-height: 2.75rem; align-items: center; gap: 1rem; padding: .9rem 2.25rem .9rem 0; color: var(--blue); cursor: pointer; font-size: 1.02rem; font-weight: 700; line-height: 1.4; list-style: none; }
.org-faq-list summary::-webkit-details-marker { display: none; }
.org-faq-list summary::after { position: absolute; top: 50%; right: .5rem; width: .6rem; height: .6rem; margin-top: -.45rem; border-right: 2px solid var(--coral); border-bottom: 2px solid var(--coral); content: ""; transform: rotate(45deg); transition: transform 160ms ease; }
.org-faq-list details[open] summary::after { transform: translateY(.25rem) rotate(225deg); }
.org-faq-list summary:hover { color: var(--blue-deep); }
.org-faq-list summary:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.org-faq-list details p { max-width: 38rem; margin: 0 0 1.1rem; color: rgba(38, 63, 80, .8); font-size: .95rem; line-height: 1.6; }

/* Let's connect: ocean band with the inquiry form */
.org-connect { position: relative; padding-block: clamp(4rem, 8vw, 7rem); background: linear-gradient(110deg, var(--ocean), var(--blue)); color: var(--white); scroll-margin-top: 1rem; }
.org-connect-grid { display: grid; grid-template-columns: minmax(17rem, .9fr) minmax(20rem, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.org-connect-copy .eyebrow { color: #f4bfaf; }
.org-connect-copy h2 { max-width: 12ch; color: var(--white); font-size: clamp(2.8rem, 4.8vw, 4.7rem); line-height: 1; }
.org-connect-copy > p:not(.eyebrow):not(.hero-note) { max-width: 34rem; margin-bottom: 1.6rem; color: rgba(255, 255, 255, .9); font-size: 1.08rem; line-height: 1.65; }
.org-connect a:focus-visible, .org-connect button:focus-visible { outline-color: var(--white); }
.org-connect .site-form { color: var(--blue-deep); }
.org-connect .site-form a:focus-visible, .org-connect .site-form button:focus-visible { outline-color: var(--coral); }

@media (max-width: 950px) {
  .organizations-page .section-nav { display: block; grid-template-columns: none; padding-bottom: 0; }
  .organizations-page .section-nav-links { justify-content: flex-start; gap: 1.4rem; overflow-x: auto; scrollbar-width: thin; }
  .organizations-page .section-nav a { flex: 0 0 auto; }
  .org-hero-grid { grid-template-columns: 1fr; }
  .org-hero-photo { max-width: 26rem; }
  .org-hero-photo img { aspect-ratio: 5 / 4; border-radius: 50% 50% 1.25rem 1.25rem / 62% 62% 1.25rem 1.25rem; }
  .org-samples-grid, .org-split, .org-pricing-grid, .org-faq-grid, .org-connect-grid, .org-approach-grid { grid-template-columns: 1fr; }
  .org-approach-grid .eyebrow { margin-top: 0; }
  .demo-card { grid-template-columns: 1fr; }
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-grid { gap: 1.5rem; }
}

@media (max-width: 680px) {
  .org-hero { padding-block: 2.5rem 3rem; }
  .org-hero h1 { font-size: clamp(2.7rem, 11vw, 3.8rem); }
  .org-hero .lead { font-size: 1.02rem; line-height: 1.48; }
  .org-hero .button-row .button { width: 100%; }
  .org-hero-photo { max-width: none; }
  .org-section, .org-connect { padding-block: 3rem; }
  .org-demo { padding-top: 0; }
  .sample-player { border-radius: 1.4rem 1.4rem .8rem .8rem; }
  .sample-controls { align-items: stretch; flex-direction: column; gap: .9rem; }
  .sample-toggle { width: 100%; }
  .guide-grid, .support-grid { grid-template-columns: 1fr; }
  .demo-frame { border-radius: 1rem 1rem .6rem .6rem; }
  .org-approach { padding-block: 2.5rem; }
}