/* ═══════════════════════════════════════════════════════════════════
   FABLES LIBRARY — CONSOLIDATED STYLESHEET (June 11, 2026)
   Machine-consolidated from the layered patch history (v8/v9/v10,
   June 10 rhythm overhaul, June 11 fixes) with csso restructuring,
   which preserves cascade semantics exactly. 219KB -> 141KB.
   The pre-consolidation original is archived as
   styles-original-backup.css; to roll back, re-upload it as styles.css
   and bump the ?v= query string in index.html.
   ═══════════════════════════════════════════════════════════════════ */
@keyframes drift {
  0%,
  to {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(30px, 30px);
  }}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }}
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }}
@keyframes welcome-fade-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }}
@keyframes welcome-gentle-sway {
  0%,
  to {
    transform: rotate(-3deg) translateX(0);
  }
  50% {
    transform: rotate(3deg) translateX(4px);
  }}
:root {
  --forest-dark: #1a3a2e;
  --forest-deep: #2d5a4a;
  --sage: #718b7f;
  --cream: #f4f1e8;
  --parchment: #e8e4d9;
  --earth: #8b7355;
  --moss: #697d6f;
  --gold: #c9a961;
  --hero-ochre: #d8c27a;
  --shadow: rgba(26, 58, 46, 0.15);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,
html {
  overflow-x: hidden;
}
body {
  font-family: "Nunito Sans", sans-serif;
  background-color: var(--cream);
  color: var(--forest-dark);
  line-height: 1.8;
}
i[aria-hidden="true"] {
  font-style: normal;
}
.background-leaves {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.03;
  background-image:
    radial-gradient(circle at 20% 30%, var(--forest-dark) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, var(--forest-dark) 1px, transparent 1px);
  background-size:
    50px 50px,
    70px 70px;
  animation: drift 60s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .background-leaves,
  .logo,
  .sprout-decoration,
  .tagline,
  section {
    animation: none !important;
  }}
.logo,
section {
  position: relative;
}
.logo {
  z-index: 1;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 3.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--cream);
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  animation: fadeIn 1.2s ease-out;
}
.tagline {
  position: relative;
  z-index: 1;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.18rem;
  color: rgba(244, 241, 232, 0.92);
  font-weight: 500;
  font-style: normal;
  margin-bottom: 2rem;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.32);
  animation: fadeIn 1.4s ease-out;
  letter-spacing: 0.01em;
}
.sprout-decoration {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 3px;
  background: rgba(201, 169, 97, 0.95);
  margin: 2rem auto 0;
  animation: fadeIn 1.6s ease-out;
}
.sprout-decoration::after,
.sprout-decoration::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 12px;
  background: rgba(201, 169, 97, 0.95);
  top: -5px;
}
.sprout-decoration::before {
  left: 20px;
  transform: rotate(-25deg);
}
.sprout-decoration::after {
  right: 20px;
  transform: rotate(25deg);
}
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 2rem;
  position: relative;
  z-index: 1;
}
section {
  margin-bottom: 4rem;
  animation: slideUp 0.8s ease-out;
  animation-fill-mode: both;
}
section:nth-child(1) {
  animation-delay: 0.2s;
}
section:nth-child(2) {
  animation-delay: 0.3s;
}
section:nth-child(3) {
  animation-delay: 0.4s;
}
section:nth-child(4) {
  animation-delay: 0.5s;
}
h2,
h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--forest-deep);
}
h2 {
  font-size: 2.4rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
  position: relative;
  padding-left: 1.5rem;
}
h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background: var(--gold);
  border-radius: 2px;
}
h3 {
  font-size: 1.5rem;
  margin: 2rem 0 1rem;
  letter-spacing: 0.02em;
}
.featured-video h3,
p {
  color: var(--forest-dark);
}
p {
  font-size: 1.05rem;
  margin-bottom: 1.2rem;
  font-style: normal;
}
.featured-video {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0,
    rgba(232, 228, 217, 0.4) 100%
  );
  padding: 2.5rem;
  margin: 2rem 0;
  border-radius: 12px;
  box-shadow: 0 8px 30px var(--shadow);
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-left: 4px solid var(--gold);
  position: relative;
  overflow: hidden;
}
.featured-video::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
  opacity: 0.08;
  border-radius: 50%;
}
.featured-video::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: -20px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, var(--forest-deep) 0%, transparent 70%);
  opacity: 0.03;
  border-radius: 50%;
}
.featured-video h3 {
  margin-top: 0;
  font-size: 1.85rem;
  line-height: 1.25;
  margin-bottom: 0.85rem;
  position: relative;
  z-index: 1;
}
.featured-card-eyebrow,
p {
  font-family: "Nunito Sans", sans-serif;
  text-align: left;
}
.featured-card-eyebrow {
  margin: 0 0 0.55rem;
  color: var(--forest-deep);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 1.5rem 0;
  border-radius: 8px;
  box-shadow: 0 4px 15px var(--shadow);
  border: 1px solid rgba(201, 169, 97, 0.2);
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.featured-thumbnail-link,
.featured-vertical-wrapper {
  width: 100%;
  margin: 1.5rem auto 1rem;
  overflow: hidden;
  box-shadow: 0 4px 15px var(--shadow);
  border: 1px solid rgba(201, 169, 97, 0.3);
}
.featured-vertical-wrapper {
  max-width: 390px;
  aspect-ratio: 9/16;
  border-radius: 12px;
  background:
    linear-gradient(
      180deg,
      rgba(26, 58, 46, 0.18) 0%,
      rgba(26, 58, 46, 0.3) 100%
    ),
    linear-gradient(135deg, var(--parchment) 0%, var(--cream) 100%);
}
.featured-thumbnail-link {
  display: block;
  max-width: 720px;
  border-radius: 8px;
  background: var(--parchment);
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.featured-thumbnail-link:focus-visible,
.featured-thumbnail-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(26, 58, 46, 0.18);
}
.featured-thumbnail {
  display: block;
  width: 100%;
  height: auto;
}
.featured-vertical-panel {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  position: relative;
}
.featured-vertical-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(201, 169, 97, 0.2) 0,
      transparent 35%
    ),
    radial-gradient(
      circle at 50% 80%,
      rgba(113, 139, 127, 0.12) 0,
      transparent 45%
    );
  pointer-events: none;
}
.featured-vertical-panel-content {
  position: relative;
  z-index: 1;
  max-width: 18ch;
}
.featured-vertical-panel-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--forest-dark);
  margin-bottom: 0.8rem;
  letter-spacing: 0.02em;
}
.featured-vertical-panel-copy {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--moss);
}
.featured-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
  position: relative;
  z-index: 1;
}
.featured-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  padding: 0.8rem 1.15rem;
  border-radius: 4px;
  text-decoration: none;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  letter-spacing: 0.01em;
}
.featured-action-icon {
  width: 1.08rem;
  height: 1.08rem;
  flex: 0 0 auto;
  display: inline-block;
  color: currentColor;
  pointer-events: none;
}
.featured-action-icon img,
.featured-action-icon svg,
.featured-video__guide-icon img,
.featured-video__play-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.featured-action-icon svg {
  fill: currentColor;
}
.featured-action-link--primary {
  background: var(--forest-deep);
  color: var(--cream);
  border: 1px solid var(--forest-deep);
}
.featured-action-link--primary:focus-visible,
.featured-action-link--primary:hover {
  background: var(--forest-dark);
  border-color: var(--forest-dark);
  color: var(--cream);
  transform: translateY(-1px);
}
.featured-action-link--secondary {
  background: 0 0;
  color: var(--forest-deep);
  border: 1px solid rgba(201, 169, 97, 0.5);
}
.featured-action-link--secondary:focus-visible,
.featured-action-link--secondary:hover {
  color: var(--gold);
  border-color: var(--gold);
  transform: translateY(-1px);
}
.featured-section-heading {
  max-width: 900px;
  margin: 0 auto 1rem;
  padding-left: 1.5rem;
  text-align: left;
}
.featured-video--cinematic {
  background: #061f16;
  padding: 0;
  margin: 2rem auto;
  border: 0;
  border-left: 0;
  border-radius: 18px;
  box-shadow: 0 10px 34px rgba(6, 31, 22, 0.24);
  overflow: hidden;
}
.featured-video--cinematic::after,
.featured-video--cinematic::before {
  display: none;
}
.featured-video__header {
  padding: clamp(0.95rem, 2.4vw, 1.45rem) 1rem;
  text-align: center;
}
.featured-video--cinematic h3,
.featured-video__eyebrow {
  color: #f3d780;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  text-align: center;
}
.featured-video__eyebrow {
  margin: 0 0 0.45rem;
  font-size: clamp(2.25rem, 6vw, 3.45rem);
  line-height: 1;
  letter-spacing: 0.025em;
}
.featured-video--cinematic h3 {
  margin: 0;
  font-size: clamp(1.35rem, 4vw, 2rem);
  line-height: 1.22;
  letter-spacing: 0.01em;
}
.featured-video__thumbnail-link {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #061f16;
  text-decoration: none;
}
.featured-video__thumbnail-link:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}
.featured-video__thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}
.featured-video__thumbnail-link:focus-visible .featured-video__thumbnail,
.featured-video__thumbnail-link:hover .featured-video__thumbnail {
  transform: scale(1.012);
  filter: brightness(1.04);
}
.featured-video__play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: clamp(3.4rem, 10vw, 5.8rem);
  height: clamp(3.4rem, 10vw, 5.8rem);
  pointer-events: none;
}
.featured-video__duration-badge,
.featured-video__guide-link {
  align-items: center;
  justify-content: center;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
}
.featured-video__duration-badge {
  position: absolute;
  right: 0.65rem;
  bottom: 0.6rem;
  z-index: 3;
  display: inline-flex;
  padding: 0.16rem 0.42rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.featured-video__guide-link {
  display: flex;
  gap: 0.55rem;
  width: 100%;
  padding: clamp(1rem, 2.8vw, 1.5rem) 1rem;
  color: #f3d780;
  background: #061f16;
  border-top: 1px solid rgba(201, 169, 97, 0.12);
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.featured-video__guide-link:focus-visible,
.featured-video__guide-link:hover {
  color: var(--cream);
  background: #09291d;
}
.featured-video__guide-link:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}
.featured-video__guide-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}
@media (max-width: 520px) {
  .featured-video--cinematic {
    margin-left: 0;
    margin-right: 0;
  }
  .featured-video__header {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }}
.path-section {
  margin-bottom: 4rem;
}
.path-intro {
  text-align: center;
  font-family: "Nunito Sans", sans-serif;
  font-style: normal;
  font-weight: 500;
  color: var(--moss);
  font-size: 1.05rem;
  margin-bottom: 2rem;
  letter-spacing: 0.01em;
}
.path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.path-card {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 30px var(--shadow);
  border: 1px solid rgba(201, 169, 97, 0.25);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  text-decoration: none;
}
.path-card:focus-visible,
.path-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(26, 58, 46, 0.2);
}
.path-card img {
  display: block;
  width: 100%;
  height: auto;
}
.path-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.learning-read-note {
  font-family: "Nunito Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  color: var(--moss);
  font-size: 1rem;
}
.learning-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
  align-items: stretch;
}
.learning-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98) 0,
    rgba(232, 228, 217, 0.3) 100%
  );
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 20px var(--shadow);
  border: 1px solid rgba(201, 169, 97, 0.2);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease;
  position: relative;
  overflow: hidden;
}
.learning-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--forest-deep) 0%,
    var(--gold) 50%,
    var(--moss) 100%
  );
  opacity: 0.3;
}
.learning-card.active::before {
  height: 4px;
  opacity: 1;
  background: linear-gradient(90deg, var(--sage) 0%, var(--gold) 100%);
}
.learning-card:hover:not(.learning-card:has(.card-disabled)) {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px var(--shadow);
  border-color: var(--gold);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.card-icon {
  font-size: 2.8rem;
  line-height: 1;
}
.card-badge {
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--moss);
  background: rgba(113, 139, 127, 0.12);
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
}
.card-badge.active-badge {
  color: var(--sage);
  background: rgba(113, 139, 127, 0.2);
}
.learning-card h3 {
  font-size: 1.8rem;
  margin: 0 0 0.5rem;
  color: var(--forest-deep);
  line-height: 1.15;
}
.card-description {
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 0.8rem;
  text-align: left;
}
.card-btn,
.card-description,
.card-details {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.card-details {
  color: var(--forest-dark);
  margin: 0 0 1.5rem;
  flex-grow: 1;
  line-height: 1.6;
  text-align: left;
  font-weight: 400;
}
.card-btn {
  align-self: flex-start;
  font-weight: 600;
  color: #fff;
  background: var(--sage);
  padding: 0.65rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
  border: 1px solid transparent;
  cursor: pointer;
}
.card-btn:hover {
  background: var(--forest-deep);
  transform: translateX(4px);
}
.card-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.card-disabled {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  opacity: 0.5;
}
.icon-lock {
  font-size: 1.4rem;
  display: inline-block;
}
@media (max-width: 768px) {
  .learning-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
  }
  .learning-card {
    padding: 1.5rem;
  }
  .card-icon {
    font-size: 2.2rem;
  }
  .learning-card h3 {
    font-size: 1.6rem;
  }}
@media (max-width: 480px) {
  .learning-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .card-icon {
    font-size: 2rem;
  }
  .learning-card h3 {
    font-size: 1.3rem;
  }
  .card-btn {
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
  }}
.video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  margin: 1.5rem 0;
  padding: 2rem;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--parchment) 0%, var(--cream) 100%);
  border: 1px solid rgba(201, 169, 97, 0.25);
  box-shadow: 0 4px 15px var(--shadow);
  text-align: center;
}
.video-placeholder-inner {
  max-width: 28rem;
}
.resource-card h4,
.video-placeholder h4 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--forest-deep);
  margin-bottom: 0.75rem;
  letter-spacing: 0.03em;
}
.video-placeholder p {
  font-size: 1rem;
  color: var(--moss);
  line-height: 1.7;
  margin-bottom: 0;
}
.download-section {
  background: linear-gradient(135deg, var(--parchment) 0%, var(--cream) 100%);
  padding: 2.5rem;
  margin: 2rem 0;
  border-radius: 8px;
  border: 1px solid rgba(201, 169, 97, 0.3);
  box-shadow: inset 0 1px 3px rgba(201, 169, 97, 0.1);
}
.download-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.download-btn,
.resource-card p {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
}
.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  background: var(--forest-deep);
  color: var(--cream);
  text-decoration: none;
  font-weight: 600;
  border-radius: 4px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease;
  box-shadow: 0 2px 8px rgba(26, 58, 46, 0.2);
  letter-spacing: 0.01em;
}
.download-btn:hover {
  background: var(--forest-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 58, 46, 0.3);
}
.download-btn::after {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fdf6e3' d='M28 16l-7-7-1.414 1.414L24.172 15H4v2h20.172l-4.586 4.586L21 23l7-7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: rotate(90deg);
}
.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.resource-card {
  padding: 1.25rem 1.4rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-left: 4px solid var(--sage);
  box-shadow: 0 4px 12px rgba(26, 58, 46, 0.08);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease;
}
.resource-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(26, 58, 46, 0.12);
  border-left-color: var(--gold);
}
.resource-card h4 {
  font-size: 1.35rem;
  margin-bottom: 0.6rem;
  letter-spacing: 0.02em;
}
.resource-card p {
  color: var(--moss);
  margin-bottom: 1rem;
  line-height: 1.5;
  text-align: left;
}
@media (max-width: 768px) {
  .resource-grid {
    grid-template-columns: 1fr;
  }}
.bookshelf-link {
  color: var(--forest-deep);
  font-weight: 600;
  margin-left: 0.35rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 169, 97, 0.5);
  transition:
    color 0.25s ease,
    border-color 0.25s ease;
  white-space: nowrap;
}
.bookshelf-link:focus-visible,
.bookshelf-link:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.bookshelf-coming-soon {
  display: inline-block;
  margin-left: 0.35rem;
  color: var(--moss);
  font-weight: 600;
  white-space: nowrap;
}
.fl-contact-link {
  color: var(--forest-deep);
  font-weight: 600;
  text-decoration: none;
}
.fl-contact-link:focus-visible,
.fl-contact-link:hover {
  color: var(--forest-dark);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}
.fl-contact-link:focus-visible {
  outline: 3px solid rgba(191, 153, 31, 0.9);
  outline-offset: 3px;
  border-radius: 4px;
}
ul {
  list-style: none;
  padding-left: 0;
}
ul li {
  padding: 0.6rem 0 0.6rem 2rem;
  position: relative;
  font-size: 1.05rem;
}
ul li::before {
  content: "◆";
  position: absolute;
  left: 0.5rem;
  color: var(--gold);
  font-size: 0.7rem;
}
.cta-section {
  text-align: center;
  background: linear-gradient(135deg, var(--forest-deep) 0%, #1e4a3e 100%);
  color: var(--cream);
  padding: 3rem 2rem;
  margin: 3rem 0;
  box-shadow: 0 8px 30px var(--shadow);
  position: relative;
}
.cta-section::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50px;
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(201, 169, 97, 0.1) 0,
    transparent 70%
  );
  border-radius: 50%;
}
.cta-section h2,
.cta-section p {
  position: relative;
  z-index: 1;
}
.cta-section p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  max-width: none !important;
  margin: 0 auto clamp(2.25rem, 4vw, 3.5rem) !important;
  color: rgba(244, 241, 232, 0.96) !important;
  font-size: clamp(1.2rem, 2.25vw, 1.75rem) !important;
  line-height: 1.45 !important;
  text-align: center !important;
}
.instagram-btn,
.youtube-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  text-decoration: none;
  font-family: "Nunito Sans", sans-serif;
  border-radius: 4px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease;
  letter-spacing: 0.01em;
}
.youtube-btn {
  padding: 1.1rem 2.5rem;
  background: #c4150a;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(196, 21, 10, 0.28);
}
.youtube-btn:focus-visible,
.youtube-btn:hover {
  background: #a91209;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(196, 21, 10, 0.38);
}
.instagram-btn {
  padding: 1.05rem 2.2rem;
  background: 0 0;
  color: var(--cream);
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid rgba(244, 241, 232, 0.55);
}
.instagram-btn:focus-visible,
.instagram-btn:hover {
  background: rgba(244, 241, 232, 0.1);
  border-color: var(--cream);
  transform: translateY(-2px);
}
.social-icon {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  object-fit: contain;
  pointer-events: none;
}
.youtube-btn .social-icon {
  width: 1.45rem;
  height: 1.45rem;
}
.footer-social-row .social-icon,
.instagram-btn .social-icon {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0.16rem;
  border-radius: 999px;
  background: rgba(244, 241, 232, 0.92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.cta-buttons,
.footer-social-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: nowrap;
  margin-top: 0.5rem;
  position: relative;
  z-index: 1;
}
.footer-social-row {
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  margin-top: 1rem;
  color: rgba(244, 241, 232, 0.88);
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
}
.footer-social-row a {
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}
.back-to-top-link,
.footer-social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.footer-social-row a:focus-visible,
.footer-social-row a:hover {
  color: var(--gold);
  transform: translateY(-1px);
}
.footer-social-separator {
  color: rgba(244, 241, 232, 0.55);
  user-select: none;
}
.back-to-top-link {
  position: fixed;
  right: clamp(1rem, 3vw, 1.5rem);
  bottom: clamp(1rem, 3vw, 1.5rem);
  z-index: 9999;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--forest-deep);
  border: 1px solid rgba(201, 169, 97, 0.62);
  box-shadow: 0 8px 22px rgba(26, 58, 46, 0.24);
  color: var(--cream);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.back-to-top-link:focus-visible,
.back-to-top-link:hover {
  background: var(--forest-dark);
  border-color: rgba(201, 169, 97, 0.85);
  color: var(--cream);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(26, 58, 46, 0.28);
}
.back-to-top-link .social-icon {
  width: 1.55rem;
  height: 1.55rem;
}
.back-to-top-link:focus-visible {
  outline: 2px solid rgba(201, 169, 97, 0.75);
  outline-offset: 2px;
}
@media (max-width: 480px) {
  .back-to-top-link {
    right: 0.85rem;
    bottom: 0.85rem;
    width: 2.75rem;
    height: 2.75rem;
  }
  .back-to-top-link .social-icon {
    width: 1.4rem;
    height: 1.4rem;
  }}
@media (min-width: 769px) {
  .youtube-btn {
    white-space: nowrap;
  }}
.rm-only,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.rm-only {
  top: 0;
  left: 0;
  white-space: normal;
}
.skip-link {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 10000;
  transform: translateY(-160%);
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: var(--forest-dark);
  color: var(--cream);
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(26, 58, 46, 0.25);
  transition: transform 0.18s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.fl-library-section {
  background: linear-gradient(135deg, var(--parchment) 0%, var(--cream) 100%);
  border: 1px solid rgba(201, 169, 97, 0.3);
  border-radius: 8px;
  padding: 2.5rem;
  box-shadow: inset 0 1px 3px rgba(201, 169, 97, 0.1);
}#video-library-title {
  margin-left: auto;
  margin-right: auto;
}
.fl-library-intro {
  font-size: 1rem;
  margin-bottom: 1.75rem;
}
.fl-library-search {
  max-width: 760px;
  margin: 0 auto 1.25rem;
}
.fl-library-search-field {
  position: relative;
  width: 100%;
}
.fl-library-search-input {
  width: 100%;
  appearance: none;
  background: rgba(255, 255, 255, 0.78);
  color: var(--forest-dark);
  border-radius: 999px;
  padding: 0.82rem 3.15rem 0.82rem 1.1rem;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.2;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}
.fl-library-search-input::-webkit-search-cancel-button {
  appearance: none;
  display: none;
}
.fl-library-search-input:focus-visible {
  outline: 2px solid #c9a961;
  outline-offset: 2px;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 0 3px #c9a961;
}
.fl-library-search-clear {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  appearance: none;
  border: 0;
  background: 0 0;
  color: var(--forest-deep);
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}
.fl-library-search-clear[hidden] {
  display: none;
}
.fl-library-search-clear svg {
  display: block;
  width: 1.45rem;
  height: 1.45rem;
  fill: currentColor;
}
.fl-library-search-clear:hover {
  color: var(--forest-dark);
  transform: translateY(-50%) scale(1.05);
}
.fl-library-search-clear:focus-visible {
  color: var(--forest-dark);
  outline: 2px solid #c9a961;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(253, 246, 227, 0.9);
}
.fl-library-results-note {
  text-align: center;
  color: var(--moss);
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  margin: -0.75rem 0 1.5rem;
}
.fl-library-card mark {
  background: rgba(201, 169, 97, 0.3);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}/* Legacy Video Library category-pill + More panel filter UI retired 2026-06-15. Replaced by .fl-library-controls toolbar/popover below. */

.fl-library-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.fl-library-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98) 0,
    rgba(232, 228, 217, 0.18) 100%
  );
  border: 1px solid rgba(201, 169, 97, 0.24);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(26, 58, 46, 0.08);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
  display: flex;
  flex-direction: column;
}
.fl-library-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(26, 58, 46, 0.12);
}
.fl-library-card__summary {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  align-items: start;
}
.fl-library-section .fl-library-card,
.fl-library-section .fl-library-card * {
  text-align: left;
  text-justify: auto;
}
.fl-library-card__thumbnail,
.fl-library-media-column {
  min-width: 0;
  align-self: start;
}
.fl-library-media-column {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.fl-library-card__thumbnail-link,
.fl-library-card__thumbnail-shell {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(201, 169, 97, 0.28);
  background: linear-gradient(
    135deg,
    rgba(26, 58, 46, 0.95) 0,
    rgba(88, 94, 60, 0.9) 100%
  );
  box-shadow: 0 4px 12px rgba(26, 58, 46, 0.12);
}
.fl-library-card__thumbnail-link {
  text-decoration: none;
}
.fl-library-card__thumbnail-picture {
  display: block;
  width: 100%;
  height: 100%;
}
.fl-library-card__thumbnail-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fl-library-card__thumbnail-image--coming-soon {
  opacity: 1;
  filter: none;
}
.fl-library-card__thumbnail-placeholder-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  padding: 0;
  border-radius: 0;
  background: 0 0;
  border: 0;
  box-shadow: none;
  color: var(--forest-deep);
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(253, 246, 227, 0.75);
}
.fl-library-card__thumbnail-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    rgba(12, 24, 19, 0.05) 0,
    rgba(12, 24, 19, 0.18) 100%
  );
}
.fl-library-card__thumbnail-overlay img {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
}
.fl-library-card__duration-badge,
.fl-library-card__thumbnail-placeholder {
  position: absolute;
  align-items: center;
  justify-content: center;
  font-family: "Nunito Sans", sans-serif;
}
.fl-library-card__duration-badge {
  right: 0.55rem;
  bottom: 0.5rem;
  z-index: 2;
  display: inline-flex;
  padding: 0.16rem 0.42rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.fl-library-card__thumbnail-placeholder {
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  color: var(--forest-deep);
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.5;
  background:
    radial-gradient(
      circle at 25% 25%,
      rgba(255, 255, 255, 0.55),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(245, 240, 228, 0.98) 0,
      rgba(221, 231, 216, 0.92) 100%
    );
}
.fl-library-card__thumbnail-placeholder > div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
}
.fl-library-main-text {
  min-width: 0;
}
.fl-library-inline-actions,
.fl-library-meta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
}
.fl-library-inline-actions {
  gap: 0.78rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.fl-library-inline-actions .fl-library-action--guide,
.fl-library-inline-actions .fl-library-card-more-toggle,
.fl-library-inline-actions .fl-share-icon-btn {
  line-height: 1.35;
}
.fl-library-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.fl-library-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  color: var(--forest-dark);
  margin: 0;
  line-height: 1.16;
  letter-spacing: 0.01em;
}
.fl-library-subtitle {
  margin: 0.5rem 0 0;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--forest-dark);
}
.fl-library-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  text-align: left;
}
.fl-library-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  color: var(--forest-deep);
  white-space: nowrap;
}
.fl-library-rating__icon {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
  flex: 0 0 auto;
}
.fl-library-action,
.fl-library-chip {
  display: inline-flex;
  align-items: center;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 600;
}
.fl-library-chip {
  gap: 0.35rem;
  background: rgba(201, 169, 97, 0.12);
  color: var(--forest-deep);
  border: 1px solid rgba(201, 169, 97, 0.24);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.fl-library-action {
  appearance: none;
  justify-content: flex-start;
  gap: 0.4rem;
  width: auto;
  min-height: 0;
  padding: 0.15rem 0;
  border-radius: 0;
  text-decoration: none;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  border: 0;
  background: 0 0;
}
.fl-library-action:focus-visible,
.fl-library-action:hover {
  transform: translateY(-1px);
}
.fl-library-action__chevron,
.fl-library-action__icon {
  width: 1.08rem;
  height: 1.08rem;
  flex: 0 0 auto;
  pointer-events: none;
}
.fl-library-action__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
}
.fl-library-action--details {
  align-self: start;
  color: var(--forest-deep);
  padding-top: 0.1rem;
}
.fl-library-action--guide,
.fl-library-card-more-toggle {
  color: var(--forest-deep);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
}
.fl-library-action--guide {
  align-self: center;
  justify-self: start;
  margin-left: 0;
  text-align: left;
}
.fl-library-card-more-toggle {
  appearance: none;
  border: 0;
  background: 0 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-family: "Nunito Sans", sans-serif;
  padding: 0;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.fl-library-card-more-toggle:focus-visible,
.fl-library-card-more-toggle:hover,
.fl-share-icon-btn:focus-visible,
.fl-share-icon-btn:hover {
  color: var(--forest-dark);
}
.fl-library-card-more-toggle__icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  display: block;
}
.fl-share-icon-btn {
  appearance: none;
  border: 0;
  background: 0 0;
  color: var(--forest-deep);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.28rem;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.fl-share-icon-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
.fl-share-icon-btn img,
.fl-share-icon-btn svg {
  display: block;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}
.fl-share-icon-btn svg {
  color: currentColor;
}
.fl-share-icon-btn svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fl-share-icon-btn.is-copied {
  color: var(--forest-dark);
}
.fl-library-card__details {
  /* Lives inside .fl-library-content (the text column), so it inherits the
     card's horizontal padding from the content wrapper — top padding only. */
  border-top: 0;
  padding: 0.85rem 0 0;
  width: 100%;
  box-sizing: border-box;
}
.fl-library-card__details[hidden] {
  display: none;
}
.fl-library-details-grid {
  display: block;
  gap: 1rem;
  max-width: none;
}
.fl-library-details-grid > div + div {
  margin-top: 1rem;
}
.fl-library-details-label {
  display: inline-flex;
  margin-bottom: 0.35rem;
  color: var(--forest-deep);
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fl-library-details-text {
  margin: 0;
  color: var(--forest-dark);
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.98rem;
  line-height: 1.5;
}
.fl-library-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fl-library-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: rgba(201, 169, 97, 0.14);
  border: 1px solid rgba(201, 169, 97, 0.24);
  color: var(--forest-deep);
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.fl-library-tags li::before {
  content: none;
  display: none;
}
.fl-library-empty,
.social-links a {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
}
.fl-library-empty {
  grid-column: 1/-1;
  text-align: center;
  color: var(--moss);
  font-style: normal;
  padding: 1.5rem 1rem;
}
@media (max-width: 720px) {
  .fl-library-section {
    padding: 1.5rem;
  }
  .fl-library-card__summary {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }
  .fl-library-media-column {
    display: contents;
  }
  .fl-library-card__thumbnail {
    order: 1;
    width: 100%;
  }
  .fl-library-card.is-expanded .fl-library-card__thumbnail-link,
  .fl-library-card.is-expanded .fl-library-card__thumbnail-shell,
  .fl-library-card__thumbnail-link,
  .fl-library-card__thumbnail-shell {
    border-radius: 8px 8px 0 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
  .fl-library-card__thumbnail-image {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
  .fl-library-card.is-expanded .fl-library-card__thumbnail-image,
  .fl-library-card__thumbnail-image {
    border-radius: 8px 8px 0 0 !important;
  }
  .fl-library-card__thumbnail-link:focus-visible {
    outline: 2px solid #c9a961 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 3px rgba(253, 246, 227, 0.85) !important;
  }
  .fl-library-content {
    display: flex;
    flex-direction: column;
    order: 2;
    width: 100%;
    gap: 0.7rem;
    padding: 1rem;
  }
  .fl-library-action--details {
    order: 3;
    justify-self: start;
  }
  .fl-library-card__details {
    order: 4;
  }
  .fl-library-main-text {
    min-width: 0;
  }
  .fl-library-title {
    font-size: clamp(1.2rem, 5vw, 1.45rem);
    line-height: 1.2;
  }
  .fl-library-subtitle {
    font-size: 0.98rem;
    line-height: 1.38;
  }
  .fl-library-meta-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  .fl-library-inline-actions {
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 0;
    gap: 0.42rem;
    flex-wrap: nowrap;
  }
  .fl-library-inline-actions .fl-library-action--guide,
  .fl-library-inline-actions .fl-library-card-more-toggle,
  .fl-library-inline-actions .fl-share-icon-btn {
    min-height: auto;
    padding: 0.12rem 0;
    line-height: 1.28;
  }
  .fl-library-action--guide,
  .fl-library-card-more-toggle {
    justify-content: flex-start;
    text-align: left;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 700;
  }
  .fl-library-card-more-toggle {
    align-self: flex-start;
  }
  .fl-library-action__icon,
  .fl-library-card-more-toggle__icon {
    width: 1rem;
    height: 1rem;
  }
  .fl-library-action--guide {
    align-self: flex-start;
    margin-left: 0;
  }
  .fl-library-action {
    min-height: 44px;
    padding: 0.5rem 0.1rem;
  }
  .fl-library-details-text {
    line-height: 1.48;
  }
  .fl-library-card__thumbnail-link,
  .fl-library-card__thumbnail-shell {
  }}
@media (min-width: 721px) {
  .fl-library-card__summary {
    grid-template-columns: minmax(280px, 50%) minmax(0, 1fr);
    padding: 0;
    gap: 0;
    align-items: stretch;
  }
  .fl-library-media-column {
    gap: 0;
    height: 100%;
  }
  .fl-library-card__thumbnail {
    height: 100%;
  }
  .fl-library-card__thumbnail-link,
  .fl-library-card__thumbnail-shell {
    height: 100%;
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
    border-right: 0;
    border-radius: 12px 0 0 12px;
    box-shadow: none;
  }
  .fl-library-card.is-expanded .fl-library-card__thumbnail-link,
  .fl-library-card.is-expanded .fl-library-card__thumbnail-shell {
    border-radius: 12px 0 12px 0;
  }
  .fl-library-content {
    width: 100%;
    gap: 0.45rem;
    padding: 1rem 1.15rem;
  }
  .fl-library-meta-row {
    justify-content: flex-start;
    gap: 0.55rem;
    flex-wrap: wrap;
  }
  .fl-library-card__meta {
    gap: 0.4rem;
  }
  .fl-library-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: clamp(1.45rem, 1.9vw, 1.85rem);
    line-height: 1.12;
    font-weight: 600;
    margin-bottom: 0.35rem;
  }
  .fl-library-card[data-slug="gentle-care"] .fl-library-title {
    display: block;
    white-space: nowrap;
    font-size: clamp(1.28rem, 1.55vw, 1.5rem);
    line-height: 1.12;
    overflow: visible;
  }
  .fl-library-subtitle {
    margin-top: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.98rem;
    line-height: 1.35;
  }
  .fl-library-action--details {
    padding-top: 0;
  }
  .fl-library-card__details {
    /* Inside the right-hand text column; align with the title/subtitle. */
    padding: 0.85rem 0 0;
  }
  .fl-library-details-text {
    line-height: 1.46;
  }}
@media (min-width: 721px) and (max-width: 1099px) {
  .fl-library-card__summary {
    grid-template-columns: minmax(260px, 48%) minmax(0, 1fr);
  }}
@media (min-width: 1100px) {
  .fl-library-card__summary {
    grid-template-columns: minmax(320px, 50%) minmax(0, 1fr);
  }}
footer {
  background: var(--forest-dark);
  color: var(--parchment);
  padding: 1.25rem 2rem;
  text-align: center;
  border-top: 3px solid var(--gold);
}
.social-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}
.social-links a {
  color: var(--parchment);
  text-decoration: none;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease;
  padding: 0.5rem 1rem;
  letter-spacing: 0.01em;
}
.social-links a:focus-visible,
.social-links a:hover {
  color: var(--gold);
  transform: translateY(-2px);
}
.social-links a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
.copyright {
  margin: 0;
  font-size: 1rem;
  text-align: center;
  color: var(--parchment);
  opacity: 0.85;
}
@media (max-width: 1024px) {}
@media (max-width: 640px) {}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }}
@media (max-width: 768px) {
  header {
    padding: 2.75rem 1.25rem 2rem;
  }
  .logo {
    font-size: 2.4rem;
  }
  .tagline {
    font-size: 1.08rem;
  }
  h2 {
    font-size: 1.8rem;
  }
  .download-section,
  .featured-video {
    padding: 1.5rem;
  }
  .container {
    padding: 2rem 1.5rem;
  }
  p {
    text-align: left;
  }
  .path-grid {
    grid-template-columns: 1fr;
  }
  .cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-buttons a {
    justify-content: center;
  }}
html {
  scroll-behavior: smooth;
}
::selection {
  background: var(--gold);
  color: var(--forest-dark);
}#mission h2,
#mission h3,
#video-library h2,
.download-card h4,
.featured-video h3,
.fl-library-title,
.learning-card h3,
h2,
h3 {
  font-weight: 600;
}
@media (max-width: 768px) {
  .logo {
    font-size: 2.75rem;
    font-weight: 600;
    letter-spacing: 0.07em;
  }}
@media (max-width: 480px) {
  .logo {
    font-size: 2.35rem;
    letter-spacing: 0.055em;
  }}
.media-slot {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.card-with-media__media img,
.media-slot__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.media-slot--feature {
  border-radius: 8px;
  aspect-ratio: 16/9;
  border: 1px solid rgba(201, 169, 97, 0.28);
  box-shadow: 0 4px 15px var(--shadow);
}
.media-slot--card {
  border-radius: 12px;
  aspect-ratio: 5/3;
}
.media-slot--learning {
  border-radius: 8px;
  aspect-ratio: 16/7;
  margin-bottom: 1rem;
  border: 1px solid rgba(201, 169, 97, 0.22);
  box-shadow: 0 2px 8px rgba(26, 58, 46, 0.07);
}
.media-slot--thumbnail {
  border-radius: 6px;
  aspect-ratio: 16/9;
}
.media-slot--resource {
  border-radius: 6px;
  aspect-ratio: 3/2;
  margin-bottom: 1rem;
}
.media-slot--bookshelf {
  border-radius: 4px;
  aspect-ratio: 2/3;
}
.media-slot--decorative {
  border-radius: 10px;
  aspect-ratio: 16/5;
  margin-bottom: 1rem;
}
.media-slot.is-placeholder {
  background: linear-gradient(135deg, var(--parchment) 0%, var(--cream) 100%);
  border: 1px solid rgba(201, 169, 97, 0.3);
}
.media-slot.is-placeholder .media-slot__img {
  object-fit: contain;
  padding: 0.5rem;
}
.card-with-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 42%);
  align-items: stretch;
  overflow: hidden;
}
.card-with-media--featured {
  grid-template-columns: minmax(280px, 45%) minmax(0, 1fr);
}
.card-with-media__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  min-width: 0;
}
.featured-video.card-with-media {
  padding: 0;
}
.card-with-media__media {
  position: relative;
  overflow: hidden;
  min-height: 220px;
}
@media (min-width: 769px) and (max-width: 1023px) {
  .featured-deer-call-media img {
    object-position: left center !important;
  }}
@media (min-width: 1024px) {
  .featured-deer-call-media img {
    object-position: left center !important;
  }}
.card-with-media--featured .card-with-media__media {
  border-radius: 11px 0 0 11px;
  border-right: 1px solid rgba(201, 169, 97, 0.25);
}
.card-with-media--learning .card-with-media__media {
  border-radius: 0 11px 11px 0;
  border-left: 1px solid rgba(201, 169, 97, 0.25);
}
.card-with-media__media.is-placeholder {
  background: linear-gradient(
    135deg,
    rgba(45, 90, 74, 0.08) 0,
    rgba(201, 169, 97, 0.08) 100%
  );
}
.card-with-media__media.is-placeholder img {
  object-fit: contain;
  padding: 1.5rem;
}
@media (max-width: 768px) {
  .card-with-media,
  .card-with-media--featured {
    grid-template-columns: 1fr;
  }
  .card-with-media__media {
    order: -1;
    min-height: 200px;
    border-radius: 11px 11px 0 0 !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1px solid rgba(201, 169, 97, 0.25);
  }
  .card-with-media__content {
    padding: 1.5rem;
  }}
.counting-time-card {
  grid-column: 1/-1;
}
.counting-modules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.counting-module {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: rgba(201, 169, 97, 0.07);
  border: 1px solid rgba(201, 169, 97, 0.2);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  transition: background 0.2s ease;
}
.counting-module:hover {
  background: rgba(201, 169, 97, 0.13);
}
.counting-module__icon {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.counting-module__desc,
.counting-module__title {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
}
.counting-module__title {
  font-weight: 600;
  color: var(--forest-deep);
  margin: 0 0 0.2rem;
  line-height: 1.35;
}
.counting-module__desc {
  color: var(--moss);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .counting-modules-grid {
    grid-template-columns: 1fr;
  }}
.welcome-section {
  position: relative;
  padding: 3rem 1.5rem;
  overflow: hidden;
}
.welcome-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      ellipse at 15% 30%,
      rgba(45, 90, 74, 0.04) 0,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 85% 70%,
      rgba(201, 169, 97, 0.05) 0,
      transparent 50%
    );
  pointer-events: none;
  z-index: 0;
}
.welcome-section::after {
  content: "🍂";
  position: absolute;
  top: 2rem;
  right: 1rem;
  font-size: 3rem;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  animation: welcome-gentle-sway 6s ease-in-out infinite;
}
.welcome-container {
  position: relative;
  z-index: 1;
}
.welcome-header {
  text-align: center;
  margin-bottom: 3.5rem;
  animation: welcome-fade-up 0.8s ease-out both;
}
.welcome-headline {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--forest-dark);
  line-height: 1.25;
  margin-bottom: 0.75rem;
  padding-left: 0;
}
.welcome-headline::before {
  display: none;
}
.welcome-subheading {
  display: block;
  max-width: 620px;
  margin: 0 auto;
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  color: var(--moss);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.6;
}
.welcome-divider {
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 1.5rem auto 0;
}
.welcome-cards {
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .welcome-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }}
@media (min-width: 1024px) {
  .welcome-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }}
.welcome-card {
  padding: 2rem 1.5rem;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  animation: welcome-fade-up 0.8s ease-out both;
}
.welcome-card:nth-child(1) {
  animation-delay: 0.15s;
}
.welcome-card:nth-child(2) {
  animation-delay: 0.25s;
}
.welcome-card:nth-child(3) {
  animation-delay: 0.35s;
}
.welcome-card-img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 1rem;
  object-fit: cover;
  aspect-ratio: 5/3;
}
.welcome-card:hover {
  transform: translateY(-6px);
  border-color: #d2ab66;
  box-shadow: 0 12px 32px rgba(26, 58, 46, 0.18);
  background: #fbf6ea;
}
.welcome-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  width: 2px;
  height: 100%;
  background: var(--gold);
  transition: width 0.5s ease;
}
.welcome-card:hover::before {
  width: 4px;
}
.welcome-card-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  opacity: 0.85;
  transition:
    transform 0.4s ease,
    opacity 0.3s ease;
}
.welcome-card:hover .welcome-card-icon {
  transform: scale(1.15);
  opacity: 1;
}
.welcome-card-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--forest-dark);
  margin-bottom: 0.85rem;
  letter-spacing: 0.02em;
  padding-left: 0;
}
.welcome-card-title::before,
header.site-hero::after {
  display: none;
}
.welcome-cta {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 2rem;
  animation: welcome-fade-up 1s ease-out 0.6s both;
}
@media (min-width: 640px) {
  .welcome-cta {
    flex-direction: row;
    justify-content: center;
    gap: 1.5rem;
  }}
.welcome-btn {
  padding: 1rem 2rem;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.welcome-btn-primary {
  background: var(--forest-deep);
  color: var(--cream);
  border: 1.5px solid var(--forest-deep);
}
.welcome-btn-primary:hover {
  background: var(--forest-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(26, 58, 46, 0.2);
}
.welcome-btn-secondary {
  background: 0 0;
  color: var(--forest-deep);
  border: 1.5px solid rgba(201, 169, 97, 0.5);
}
.welcome-btn-secondary:hover {
  background: rgba(201, 169, 97, 0.15);
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(201, 169, 97, 0.15);
}
.welcome-btn-primary:active,
.welcome-btn-secondary:active,
.welcome-btn:active {
  transform: translateY(-1px);
}
.welcome-btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .welcome-card,
  .welcome-cta,
  .welcome-header,
  .welcome-section::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }}
header.site-hero {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 2048/394;
  padding: 0;
  display: block;
  background-color: #173826;
  background-image: url(assets/hero/banner1081-3840.jpg);
  background-image: image-set(
    url(assets/hero/banner1081-3840.webp) type("image/webp"),
    url(assets/hero/banner1081-3840.jpg) type("image/jpeg")
  );
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: 2px solid var(--gold);
  overflow: hidden;
}
.hero-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.hero-headline,
.hero-subheading {
  margin: 0;
}/* HERO — mobile/tablet artwork (Alex's new SVG), 360px-1079px.
   One consolidated source of truth for the sub-1080 hero, replacing the old
   banner480-720 / banner721-1080 images and the tall background-mobile overlay.
   Desktop (>=1080px) is left to the unchanged base rule above. */

@media (max-width: 1079px) {
  header.site-hero {
    aspect-ratio: auto;
    min-height: 0;
    height: 240px;            /* 580-1079px fixed; overridden below 580px */
    background-color: #173826;
    background-image: url("assets/hero/mobile-360x160and240x540.svg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }}/* 360px-579px: fluid height from 160px (360) to 240px (580). */

@media (max-width: 579px) {
  header.site-hero {
    height: clamp(160px, calc(29.09px + 36.36vw), 240px);
  }}
.welcome-section {
  padding: clamp(1.1rem, 2.4vw, 1.8rem) 1.5rem clamp(1rem, 2vw, 1.45rem);
  background: linear-gradient(
    180deg,
    var(--cream) 0%,
    rgba(232, 228, 217, 0.5) 100%
  );
}
.welcome-section::after {
  display: none;
}
.welcome-section + .container {
  padding-top: clamp(0.35rem, 0.9vw, 0.75rem);
}
.welcome-container {
  max-width: 1160px;
  margin: 0 auto;
}
.welcome-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin: 0;
  align-items: stretch;
}
.welcome-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.9rem;
  padding: clamp(1.05rem, 2vw, 1.35rem);
  min-height: 0;
  background: #f7f0e0;
  border: 1.5px solid #d2ab66;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}
.welcome-card-decoration,
.welcome-card-vignette {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  pointer-events: none;
  overflow: visible;
}
.welcome-card-decoration {
  height: clamp(54px, 6.4vw, 82px);
  min-height: 54px;
  margin: -0.15rem auto -0.05rem;
}
.welcome-card-decoration img,
.welcome-card-vignette img {
  display: block;
  width: min(82%, 260px);
  height: 100%;
  max-height: 82px;
  object-fit: contain;
  object-position: center;
}
.welcome-card-vignette {
  height: 28px;
  min-height: 26px;
  margin: -0.2rem auto 0;
}
.welcome-card-vignette img {
  width: min(56%, 170px);
  max-height: 28px;
  opacity: 0.95;
}
.welcome-card,
.welcome-card *,
.welcome-card:focus-visible,
.welcome-card:hover,
.welcome-card:link,
.welcome-card:visited {
  color: inherit;
  text-decoration: none !important;
}
.welcome-card:focus-visible,
.welcome-card:hover {
  transform: translateY(-4px);
  background: #f7f0e0;
  border-color: #d2ab66;
  box-shadow: 0 12px 32px rgba(26, 58, 46, 0.18);
}
.welcome-card-icon,
.welcome-card-img,
.welcome-card-title,
.welcome-card::before,
.welcome-cta,
.welcome-header {
  display: none !important;
}
.welcome-card-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(74px, 7.4vw, 102px);
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: 0;
  border: 1px solid rgba(201, 169, 97, 0.65);
  background:
    linear-gradient(
      180deg,
      rgba(26, 58, 46, 0.18) 0,
      rgba(26, 58, 46, 0.62) 100%
    ),
    image-set(
      url(assets/welcome-card-button-background.webp) type("image/webp"),
      url(assets/welcome-card-button-background.png) type("image/png")
    );
  background-position:
    center center,
    center center;
  background-size: auto, cover;
  background-repeat: no-repeat, no-repeat;
  color: var(--hero-ochre) !important;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.55rem, 2.45vw, 2rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.52);
  box-shadow:
    inset 0 0 0 1px rgba(244, 241, 232, 0.08),
    0 8px 20px rgba(26, 58, 46, 0.14);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.welcome-card-button__arrow {
  display: inline-block;
  margin-left: 0.28em;
  line-height: 1;
  transform: translateY(4px);
}
.welcome-card:focus-visible .welcome-card-button,
.welcome-card:hover .welcome-card-button {
  transform: translateY(-2px);
  border-color: rgba(201, 169, 97, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(244, 241, 232, 0.12),
    0 12px 26px rgba(26, 58, 46, 0.22);
}
.welcome-card-text {
  max-width: 27ch;
  margin: 0 auto;
  color: var(--moss) !important;
  text-decoration: none !important;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.01em;
}
@media (max-width: 900px) {
  .welcome-cards {
    grid-template-columns: 1fr;
  }}
@media (max-width: 820px) {/* (Obsolete tall hero with background-mobile overlay removed; the hero image
     is now the consolidated SVG. These remaining rules only style the
     screen-reader-only .hero-copy.) */
  
  .hero-copy {
    grid-column: 1;
    width: min(96vw, 760px);
    padding: 270px 0.5rem 1.25rem;
  }
  .hero-headline {
    font-size: clamp(1.7rem, 5.8vw, 2.45rem);
    line-height: 1.13;
    letter-spacing: 0.004em;
    margin-bottom: 0.9rem;
  }
  .hero-subheading {
    max-width: min(94vw, 56ch);
    letter-spacing: 0.012em;
  }
  .hero-subheading-line,
  .hero-subheading-line--primary,
  .hero-subheading-line--secondary {
    display: inline;
    font-size: clamp(0.9rem, 2.8vw, 1.08rem);
    line-height: 1.42;
  }
  .hero-subheading-line + .hero-subheading-line::before {
    content: " ";
  }}
@media (max-width: 520px) {/* (Obsolete 560px min-height hero removed; height is governed by the SVG
     rules above. Remaining rules only style the sr-only .hero-copy.) */
  
  .hero-copy {
    width: min(97vw, 520px);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 295px;
  }
  .hero-headline {
    font-size: clamp(1.45rem, 6.2vw, 2rem);
  }
  .hero-subheading {
    max-width: min(94vw, 54ch);
    letter-spacing: 0.008em;
  }
  .hero-subheading-line,
  .hero-subheading-line--primary,
  .hero-subheading-line--secondary {
    font-size: clamp(0.88rem, 3.4vw, 1rem);
    line-height: 1.38;
  }}/* (Removed obsolete sub-1080 hero overrides: the ≤820 banner721-1080 and ≤720
   banner480-720 !important blocks. The consolidated SVG rules above are now the
   single sub-1080 hero source.) */

.start-panel-section {
  position: relative;
  z-index: 1;
  background: linear-gradient(
    180deg,
    var(--cream) 0%,
    rgba(232, 228, 217, 0.42) 100%
  );
}
.start-panel {
  position: relative;
  min-height: clamp(610px, 60vw, 735px);
  margin: 0 auto;
  border: 2px solid rgba(210, 171, 102, 0.72);
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(255, 255, 255, 0.9) 0,
      rgba(255, 255, 255, 0) 36%
    ),
    linear-gradient(
      180deg,
      rgba(253, 246, 227, 0.98) 0,
      rgba(247, 240, 224, 0.96) 100%
    );
  box-shadow:
    0 10px 28px rgba(26, 58, 46, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  overflow: hidden;
}
.start-panel__content {
  position: relative;
  z-index: 2;
}
.start-panel__title {
  padding-left: 0;
  margin: 0 auto 0.65rem;
  letter-spacing: 0.025em;
}
.start-panel__title::before {
  display: none;
}
.start-panel__title-line {
  display: inline;
  white-space: nowrap;
}
.start-panel__divider {
  pointer-events: none;
}
.start-panel__intro {
  margin-left: auto;
  margin-right: auto;
}
.start-panel__contact,
.start-panel__note {
  margin-left: auto;
  margin-right: auto;
  color: var(--forest-dark);
  font-family: "Nunito Sans", sans-serif;
  text-align: left;
  letter-spacing: 0.01em;
}
.start-panel__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 auto clamp(1.35rem, 2.55vw, 2rem);
}
.start-panel-card {
  display: grid;
  justify-items: center;
  align-items: center;
  min-height: clamp(166px, 14.5vw, 202px);
  border: 1px solid rgba(210, 171, 102, 0.18);
  background: rgba(255, 250, 237, 0.64);
  color: var(--forest-dark);
  text-decoration: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(26, 58, 46, 0.04);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}
.start-panel-card:focus-visible,
.start-panel-card:hover {
  transform: translateY(-3px);
  border-color: rgba(210, 171, 102, 0.55);
  background: rgba(255, 250, 237, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 13px 26px rgba(26, 58, 46, 0.12);
}
.start-panel-card:focus-visible {
  outline: 3px solid rgba(201, 169, 97, 0.75);
  outline-offset: 3px;
}
.start-panel-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  background:
    linear-gradient(
      180deg,
      rgba(45, 90, 74, 0.82) 0,
      rgba(22, 80, 47, 0.95) 100%
    ),
    image-set(
      url(assets/welcome-card-button-background.webp) type("image/webp"),
      url(assets/welcome-card-button-background.png) type("image/png")
    );
  background-position:
    center center,
    center center;
  background-size: auto, cover;
  background-repeat: no-repeat, no-repeat;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 0 0 1px rgba(244, 241, 232, 0.12),
    0 8px 18px rgba(26, 58, 46, 0.16);
}
.start-panel-card__button span {
  display: inline-block;
  margin-left: 0.24em;
  transform: translateY(0.06em);
}
.start-panel-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(58px, 6.3vw, 82px);
  margin: 0.82rem auto 0.55rem;
}
.start-panel-card__label {
  display: block;
  color: var(--forest-dark);
  text-align: center;
}
.start-panel__note {
  max-width: 88ch;
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: clamp(1rem, 1.45vw, 1.12rem);
  font-weight: 500;
  line-height: 1.65;
}
.start-panel__contact {
  max-width: 88ch;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.55;
}
.fl-feedback-section h2::before,
.start-panel__contact,
.start-panel__note {
  display: none;
}
.start-panel__ducks {
  position: absolute;
  left: clamp(0.85rem, 2.3vw, 2.25rem);
  right: clamp(0.85rem, 2.3vw, 2.25rem);
  bottom: clamp(0.85rem, 1.35vw, 1.2rem);
  z-index: 1;
  pointer-events: none;
}
.start-panel__ducks img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.start-panel-section + .container {
  padding-top: clamp(0.75rem, 1.6vw, 1.25rem);
}
@media (max-width: 980px) {
  .start-panel {
    min-height: 0;
    padding-bottom: clamp(8.25rem, 24vw, 14rem);
  }
  .start-panel__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 660px;
  }}
@media (max-width: 640px) {
  .start-panel-section {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
  .start-panel {
    border-radius: 18px;
    padding: 1.55rem 0.85rem clamp(7.2rem, 27vw, 9.4rem);
  }
  .start-panel__title {
    font-size: clamp(1.6rem, 7.5vw, 2.8rem);
  }
  .start-panel__title-line {
    display: block;
    white-space: normal;
  }
  .start-panel__intro {
    font-size: 0.93rem;
    line-height: 1.6;
    text-align: left;
  }
  .start-panel__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    max-width: 520px;
  }
  .start-panel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-height: 146px;
    padding: 0.68rem 0.52rem 0.78rem;
    text-align: center;
  }
  .start-panel-card__button {
    width: 100%;
    max-width: 166px;
    min-height: 42px;
    padding: 0.42rem 0.78rem;
    font-size: clamp(1.14rem, 4.8vw, 1.35rem);
  }
  .start-panel-card__icon {
    width: 48px;
    height: 48px;
    margin: 0.28rem auto 0.05rem;
  }
  .start-panel-card__label {
    justify-self: center;
    margin-top: 0;
    text-align: center;
    font-size: 0.95rem;
  }
  .start-panel__ducks {
    left: 0.45rem;
    right: 0.45rem;
  }}
@media (max-width: 430px) {
  .start-panel__cards {
    grid-template-columns: 1fr;
    max-width: 360px;
    gap: 0.62rem;
  }
  .start-panel-card {
    min-height: 134px;
    padding: 0.72rem 0.85rem 0.82rem;
  }
  .start-panel-card__button {
    max-width: 290px;
    min-height: 46px;
    font-size: 1.35rem;
  }
  .start-panel-card__icon {
    width: 52px;
    height: 52px;
  }
  .start-panel-card__label {
    font-size: 1.02rem;
  }}
.start-panel-section {
  --fl-panel-gap: clamp(1.15rem, 2.25vw, 1.9rem);
  --fl-section-gap: clamp(2.75rem, 5vw, 4.75rem);
  --fl-feature-story-gap: clamp(0.85rem, 1.5vw, 1.25rem);
  padding-top: var(--fl-panel-gap);
}
.start-panel-section + .container #featured {
  margin-bottom: 0;
  padding-bottom: var(--fl-feature-story-gap);
}
.start-panel-section + .container #featured .featured-video__header {
  padding-top: clamp(0.65rem, 1.5vw, 1rem);
  padding-bottom: clamp(0.62rem, 1.45vw, 0.95rem);
}
.start-panel-section + .container #featured .featured-video__eyebrow {
  margin-bottom: 0.28rem;
}
@media (min-width: 981px) {
  .start-panel-section {
    --fl-section-gap: clamp(3.25rem, 5.5vw, 4.75rem);
  }
  .start-panel {
    min-height: clamp(650px, 62vw, 780px);
    padding-top: clamp(1.55rem, 2.85vw, 3.05rem);
    padding-bottom: clamp(10.25rem, 20vw, 15.25rem);
  }
  .start-panel__divider {
    margin-bottom: clamp(1.35rem, 2.65vw, 2.25rem);
  }
  .start-panel__cards {
    margin-bottom: clamp(2.45rem, 3.55vw, 3.35rem);
  }
  .start-panel-card {
    padding-top: clamp(1.02rem, 1.65vw, 1.25rem);
    padding-bottom: clamp(1.02rem, 1.65vw, 1.25rem);
  }}
@media (max-width: 720px) {
  .start-panel-section {
    --fl-section-gap: clamp(1.75rem, 7vw, 2.6rem);
  }}
.start-panel-section {
  padding: clamp(0.7rem, 1.4vw, 1.15rem) clamp(0.8rem, 1.5vw, 1.15rem)
    clamp(1.55rem, 3vw, 2.6rem) !important;
}
.start-panel {
  border-radius: 24px;
}
.start-panel__content {
  margin: 0 auto;
}
.start-panel-card {
  border-color: rgba(210, 171, 102, 0.2);
  border-radius: 12px;
  background: rgba(255, 250, 237, 0.62);
}
.start-panel-card__button {
  max-width: 100%;
  border-radius: 999px;
  color: var(--cream) !important;
}
.start-panel-card__icon {
  width: 100%;
  margin: clamp(0.7rem, 1.15vw, 1rem) auto 0;
  order: 3;
}
.start-panel-card__label {
  order: 2;
}
.cta-section h2::before,
.cta-section::after,
.cta-section::before,
.start-panel__ducks {
  display: none !important;
}
@media (min-width: 981px) {
  .start-panel {
    min-height: 0 !important;
    padding-top: clamp(2rem, 3.6vw, 3.25rem) !important;
    padding-bottom: clamp(2rem, 3.6vw, 3.2rem) !important;
  }
  .start-panel__cards {
    margin-bottom: 0 !important;
  }
  .start-panel-card {
    padding-top: clamp(1rem, 1.5vw, 1.35rem) !important;
    padding-bottom: clamp(1rem, 1.5vw, 1.25rem) !important;
  }}
@media (max-width: 980px) {
  .start-panel {
    padding-bottom: clamp(1.55rem, 4vw, 2.25rem) !important;
  }
  .start-panel__cards {
    max-width: 720px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }}
@media (max-width: 640px) {
  .start-panel {
    padding: 1.45rem 0.85rem 1.5rem !important;
  }
  .start-panel__title {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }
  .start-panel__intro {
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.2rem;
  }
  .start-panel-card {
    gap: 0.4rem;
    padding: 0.8rem 0.55rem 0.85rem !important;
  }
  .start-panel-card__button {
    min-height: 42px;
    font-size: clamp(1.14rem, 4.8vw, 1.35rem);
  }
  .start-panel-card__label {
    font-size: 0.96rem;
    margin-top: 0.35rem;
  }
  .start-panel-card__icon {
    height: clamp(94px, 26vw, 132px);
    margin-top: 0.3rem;
  }}
@media (max-width: 430px) {
  .start-panel__cards {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
  .start-panel-card__icon {
    height: 136px;
  }}
.fl-feedback-section {
  background:
    radial-gradient(
      circle at top right,
      rgba(201, 169, 97, 0.14),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.96) 0,
      rgba(232, 228, 217, 0.48) 100%
    );
  border-left: 4px solid var(--gold);
}
.fl-feedback-section h2 {
  margin-bottom: 0.55rem;
}
.fl-feedback-intro {
  margin: 0 auto 1.25rem;
  color: var(--moss);
  font-size: 1rem;
}
.fl-feedback-widget {
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  justify-items: center;
}
.fl-feedback-label {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  color: var(--forest-deep);
  text-align: center;
}
.fl-rating-stars {
  display: inline-flex;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.65rem;
  background: rgba(255, 255, 255, 0.72);
}
.fl-rating-star {
  appearance: none;
  border: 0;
  background: 0 0;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    color 0.15s ease,
    text-shadow 0.15s ease;
}
.fl-rating-star.is-active,
.fl-rating-star:focus-visible,
.fl-rating-star:hover {
  text-shadow: 0 2px 10px rgba(201, 169, 97, 0.22);
}
.fl-rating-star:focus-visible,
.fl-rating-star:hover {
  transform: translateY(-1px) scale(1.04);
}
.fl-rating-star:focus-visible {
  border-radius: 8px;
  outline: 2px solid #c9a961;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(253, 246, 227, 0.9);
}
.fl-feedback-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}
.fl-feedback-tag {
  appearance: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  cursor: pointer;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.95rem;
  padding: 0.55rem 0.85rem;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}
.fl-feedback-tag:focus-visible,
.fl-feedback-tag:hover {
  transform: translateY(-1px);
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.95);
}
.fl-feedback-note {
  max-width: 34rem;
  color: var(--moss);
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: center;
}
.fl-feedback-status {
  margin: 0;
  font-family: "Nunito Sans", sans-serif;
  text-align: center;
}
@media (max-width: 480px) {
  .fl-feedback-section {
    padding: 1.35rem 1rem;
  }
  .fl-rating-stars {
    gap: 0.22rem;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }}
.site-menu-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.58rem 0.85rem;
  border: 1px solid rgba(191, 153, 31, 0.72);
  border-radius: 999px;
  background: rgba(253, 246, 227, 0.96);
  color: var(--forest-dark);
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  box-shadow: 0 10px 28px rgba(26, 58, 46, 0.22);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.site-menu-toggle:focus-visible,
.site-menu-toggle:hover {
  transform: translateY(-1px);
  background: rgba(244, 241, 232, 0.98);
  color: var(--forest-dark);
  border-color: rgba(191, 153, 31, 0.72);
  outline: 0;
  box-shadow: 0 10px 28px rgba(26, 58, 46, 0.22);
}
.site-menu-toggle:focus-visible {
  box-shadow:
    0 0 0 2px rgba(191, 153, 31, 0.42),
    0 10px 28px rgba(26, 58, 46, 0.22);
}
.site-menu-toggle__icon {
  position: relative;
  width: 1.2rem;
  height: 0.9rem;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 auto;
}
.site-menu-toggle__icon span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition:
    transform 0.22s ease,
    opacity 0.18s ease;
}
.site-menu-toggle[aria-expanded="true"]
  .site-menu-toggle__icon
  span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.site-menu-toggle[aria-expanded="true"]
  .site-menu-toggle__icon
  span:nth-child(2) {
  opacity: 0;
}
.site-menu-toggle[aria-expanded="true"]
  .site-menu-toggle__icon
  span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
.site-menu-panel {
  position: fixed;
  top: 4.45rem;
  right: 1rem;
  z-index: 1000;
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 18px;
  background: rgba(244, 241, 232, 0.98);
  box-shadow: 0 18px 48px rgba(26, 58, 46, 0.26);
  transform-origin: top right;
  transform: translateY(-8px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.site-menu-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.site-menu-panel__title {
  margin: 0 0 0.35rem;
  padding: 0.35rem 0.55rem;
  color: var(--moss);
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
}
.site-menu-list {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-menu-list li {
  padding: 0;
  position: static;
  font-size: inherit;
}
.site-menu-list li::before {
  content: none;
}
.site-menu-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--forest-dark);
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}
.site-menu-link__label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.site-menu-link__icon {
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.site-menu-link__icon svg,
.site-menu-link__svg {
  display: block;
  max-width: 24px;
  max-height: 24px;
  overflow: visible;
  pointer-events: none;
  shape-rendering: geometricPrecision;
}
.site-menu-list a::after,
.site-menu-reading-btn::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23BF991F' d='M28 16l-7-7-1.414 1.414L24.172 15H4v2h20.172l-4.586 4.586L21 23l7-7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  line-height: 1;
}
.site-menu-list a:focus-visible,
.site-menu-list a:hover {
  background: rgba(201, 169, 97, 0.18);
  color: var(--forest-deep);
  outline: 2px solid rgba(191, 153, 31, 0.9);
  outline-offset: 3px;
  box-shadow: none;
  transform: translateX(2px);
}
@media (max-width: 640px) {
  .site-menu-toggle {
    top: 0.72rem;
    right: 0.72rem;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }
  .site-menu-toggle__text {
    display: none;
  }
  .site-menu-panel {
    top: 4rem;
    right: 0.72rem;
    width: min(18rem, calc(100vw - 1.44rem));
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
  }}
@media (prefers-reduced-motion: reduce) {
  .site-menu-list a,
  .site-menu-panel,
  .site-menu-toggle,
  .site-menu-toggle__icon span {
    transition: none !important;
  }}
.fl-inline-arrow {
  width: 1em;
  height: 1em;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -0.14em;
  margin-inline: 0.28em;
  color: currentColor;
  fill: currentColor;
  stroke: none;
  pointer-events: none;
}
[role="button"] .fl-inline-arrow:only-child,
a .fl-inline-arrow:only-child,
button .fl-inline-arrow:only-child {
  margin-inline: 0;
}
[role="button"] .fl-inline-arrow:first-child,
a .fl-inline-arrow:first-child,
button .fl-inline-arrow:first-child {
  margin-left: 0;
}
[role="button"] .fl-inline-arrow:last-child,
a .fl-inline-arrow:last-child,
button .fl-inline-arrow:last-child {
  margin-right: 0;
}
#featured {
  margin-bottom: clamp(2.75rem, 5vw, 4.5rem) !important;
}footer {
  margin-top: 0 !important;
}
#video-library-title {
  max-width: none !important;
  text-align: center !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(2.25rem, 6vw, 3.45rem) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--forest-deep) !important;
}#video-library-title {
  display: block !important;
  width: 100% !important;
  padding-left: 0 !important;
  margin: 0 auto clamp(1.05rem, 2vw, 1.45rem) !important;
  letter-spacing: 0.025em !important;
}#video-library-title::before {
  content: none !important;
  display: none !important;
}.fl-library-intro {
  max-width: 78ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
@media (max-width: 720px) {
  #featured {
    margin-bottom: clamp(2rem, 8vw, 3rem) !important;
  }}
.fl-library-search-input {
  border: 1px solid rgba(201, 169, 97, 0.42) !important;
  box-shadow: 0 2px 8px rgba(26, 58, 46, 0.045) !important;
}
.fl-library-search-input:focus,
.fl-library-search-input:focus-visible {
  outline: 0 !important;
  border-color: rgba(201, 169, 97, 0.72) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow:
    0 0 0 2px rgba(201, 169, 97, 0.28),
    0 2px 8px rgba(26, 58, 46, 0.05) !important;
}
.footer-line,
.site-footer {
  color: rgba(244, 241, 232, 0.9) !important;
  text-align: center !important;
}
.site-footer {
  background: linear-gradient(
    90deg,
    #0f3328 0%,
    var(--forest-dark) 50%,
    #0f3328 100%
  ) !important;
  padding: 1rem 2rem !important;
  border-top: 3px solid var(--gold) !important;
}
.footer-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem 1.25rem;
  margin: 0 !important;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.98rem;
  line-height: 1.35;
  opacity: 1 !important;
}
.footer-heart {
  color: var(--gold);
  font-size: 1rem;
  line-height: 1;
}
.footer-contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  color: rgba(244, 241, 232, 0.92);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}
.footer-contact-link:focus-visible,
.footer-contact-link:hover {
  color: var(--gold);
  transform: translateY(-1px);
}
.footer-contact-link:focus-visible {
  outline: 2px solid rgba(201, 169, 97, 0.8);
  outline-offset: 3px;
  border-radius: 4px;
}
.footer-mail-icon {
  font-size: 0.95rem;
  line-height: 1;
}
@media (max-width: 640px) {
  .site-footer {
    padding: 0.95rem 1rem !important;
  }
  .footer-line {
    gap: 0.35rem 0.7rem;
    font-size: 0.9rem;
  }}
.site-menu-panel {
  width: min(16.75rem, calc(100vw - 2rem));
  padding: 0.5rem;
  max-height: calc(100vh - 5.25rem);
  overflow-y: auto;
}
.site-menu-list {
  gap: 0.12rem;
}
.site-menu-list a {
  min-height: 38px;
  padding: 0.5rem 0.58rem;
  gap: 0.5rem;
  border-radius: 10px;
  font-size: 0.92rem;
}
.site-menu-link__label {
  gap: 0.46rem;
}
.site-menu-link__icon {
  flex-basis: 22px;
}
.site-menu-link__icon,
.site-menu-link__icon svg,
.site-menu-link__svg {
  width: 22px;
  height: 22px;
}
@media (max-width: 420px) {
  .site-menu-panel {
    width: min(15.7rem, calc(100vw - 1.5rem));
    right: 0.75rem;
    padding: 0.45rem;
  }
  .site-menu-list a {
    font-size: 0.9rem;
    padding-left: 0.52rem;
    padding-right: 0.52rem;
  }}
.site-menu-link__icon img,
.site-menu-link__img {
  display: block;
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
  pointer-events: none;
}
@media (max-width: 420px) {
  .site-menu-link__icon img,
  .site-menu-link__img {
    width: 22px;
    height: 22px;
    max-width: 22px;
    max-height: 22px;
  }}
.cta-section {
  background: #061f16 !important;
  color: #f4f1e8 !important;
  max-width: 1120px;
  margin: clamp(3rem, 7vw, 5rem) auto 3rem !important;
  padding: clamp(3.2rem, 6vw, 4.9rem) clamp(1.5rem, 5vw, 4rem)
    clamp(3rem, 5vw, 4.25rem) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(201, 169, 97, 0.22) !important;
  box-shadow: 0 18px 42px rgba(26, 58, 46, 0.18) !important;
}
.cta-section h2 {
  margin: 0 0 1.25rem !important;
  padding: 0 !important;
  color: #f4f1e8 !important;
  font-size: clamp(3rem, 6.2vw, 5.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: 0.015em !important;
}
.cta-section .cta-buttons {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.55rem) !important;
  margin: 0 auto clamp(1.65rem, 3vw, 2rem) !important;
  align-items: stretch;
}
.cta-section .instagram-btn,
.cta-section .youtube-btn {
  width: 100%;
  min-height: clamp(5.6rem, 8vw, 7.1rem);
  padding: 1.15rem 1.35rem !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
  font-family: "Nunito Sans", sans-serif !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  text-align: left !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.cta-section .youtube-btn {
  background: #d71912 !important;
  color: #fff !important;
  border: 1px solid rgba(244, 241, 232, 0.22) !important;
}
.cta-section .youtube-btn:focus-visible,
.cta-section .youtube-btn:hover {
  background: #bd120c !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18) !important;
}
.cta-section .instagram-btn {
  background: rgba(6, 31, 22, 0.86) !important;
}
.cta-section .instagram-btn:focus-visible,
.cta-section .instagram-btn:hover {
  background: rgba(244, 241, 232, 0.08) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.15) !important;
}
.cta-section .instagram-btn .social-icon,
.cta-section .youtube-btn .social-icon {
  padding: 0 !important;
  border-radius: 0 !important;
  background: 0 0 !important;
  box-shadow: none !important;
  flex: 0 0 auto;
  object-fit: contain;
}
.cta-section .instagram-btn .social-icon {
  filter: brightness(0) invert(1) sepia(8%) saturate(360%) hue-rotate(350deg)
    brightness(105%);
  opacity: 0.96;
}
.cta-section .footer-social-row {
  margin: 0 auto !important;
  color: rgba(244, 241, 232, 0.93) !important;
  font-size: clamp(1rem, 1.6vw, 1.25rem) !important;
  font-weight: 700 !important;
  gap: 0.55rem 0.85rem !important;
}
.cta-section .footer-social-row a {
  color: rgba(244, 241, 232, 0.93) !important;
  font-weight: 800 !important;
}
.cta-section .footer-social-row a:focus-visible,
.cta-section .footer-social-row a:hover {
  color: #f3d780 !important;
}
.cta-section .footer-social-row .social-icon {
  width: 1.35rem !important;
  height: 1.35rem !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: 0 0 !important;
  box-shadow: none !important;
  filter: brightness(0) invert(1) sepia(8%) saturate(360%) hue-rotate(350deg)
    brightness(105%);
  opacity: 0.94;
}
.cta-section .footer-social-separator {
  color: rgba(244, 241, 232, 0.76) !important;
}
@media (max-width: 840px) {
  .cta-section .cta-buttons {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
  .cta-section .instagram-btn,
  .cta-section .youtube-btn {
    min-height: 4.8rem;
    justify-content: flex-start !important;
    text-align: left !important;
  }}
@media (max-width: 520px) {
  .cta-section {
    margin-top: 3rem !important;
    padding: 2.45rem 1rem 2.3rem !important;
    border-radius: 8px !important;
  }
  .cta-section h2 {
    font-size: clamp(2.3rem, 12vw, 3.2rem) !important;
  }
  .cta-section p {
    font-size: 1.05rem !important;
    margin-bottom: 1.65rem !important;
  }
  .cta-section .instagram-btn,
  .cta-section .youtube-btn {
    font-size: 1.05rem !important;
    min-height: 4.2rem;
    gap: 0.8rem !important;
  }
  .cta-section .instagram-btn .social-icon,
  .cta-section .youtube-btn .social-icon {
    width: 1.85rem !important;
    height: 1.85rem !important;
  }
  .cta-section .footer-social-row {
    font-size: 0.95rem !important;
  }}
.cta-section .cta-buttons {
  width: min(100%, 980px) !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr) !important;
}
.cta-section .instagram-btn,
.cta-section .youtube-btn {
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: normal !important;
  padding-left: clamp(1rem, 1.8vw, 1.35rem) !important;
  padding-right: clamp(1rem, 1.8vw, 1.35rem) !important;
  font-size: clamp(1rem, 1.35vw, 1.28rem) !important;
}
.cta-section .instagram-btn span,
.cta-section .youtube-btn span {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.cta-section .instagram-btn .social-icon,
.cta-section .youtube-btn .social-icon {
  width: clamp(1.75rem, 2.9vw, 2.5rem) !important;
  height: clamp(1.75rem, 2.9vw, 2.5rem) !important;
}
@media (max-width: 900px) {
  .cta-section .cta-buttons {
    grid-template-columns: 1fr !important;
    width: min(100%, 420px) !important;
  }
  .cta-section .instagram-btn,
  .cta-section .youtube-btn {
    justify-content: flex-start !important;
    text-align: left !important;
  }}
.fl-feedback-section {
  max-width: 1120px !important;
  margin: clamp(3rem, 6vw, 5rem) auto !important;
  padding: clamp(2.45rem, 4.8vw, 4.05rem) clamp(1.25rem, 5.2vw, 4.4rem)
    clamp(2.15rem, 4.2vw, 3.15rem) !important;
  border: 2px solid rgba(210, 171, 102, 0.64) !important;
  border-left: 2px solid rgba(210, 171, 102, 0.64) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(
      circle at top right,
      rgba(201, 169, 97, 0.1),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.94) 0,
      rgba(247, 240, 224, 0.88) 100%
    ) !important;
  box-shadow:
    0 10px 30px rgba(26, 58, 46, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
}
.fl-feedback-section h2 {
  margin: 0 auto clamp(0.8rem, 1.5vw, 1.15rem) !important;
  padding: 0 !important;
  color: #061f16 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(3rem, 6.1vw, 5rem) !important;
  font-weight: 600 !important;
  line-height: 1.04 !important;
  letter-spacing: 0.012em !important;
  text-align: center !important;
}
.fl-feedback-intro {
  max-width: 64rem !important;
  margin: 0 auto clamp(1.55rem, 3vw, 2.4rem) !important;
  color: rgba(26, 58, 46, 0.68) !important;
  font-size: clamp(1.08rem, 1.8vw, 1.35rem) !important;
  line-height: 1.48 !important;
  font-weight: 500 !important;
  text-align: center !important;
}
.fl-feedback-widget {
  max-width: 920px !important;
  gap: clamp(1.2rem, 2.1vw, 1.65rem) !important;
}
.fl-feedback-label {
  color: #061f16 !important;
  font-size: clamp(1.25rem, 2.15vw, 1.75rem) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}
.fl-rating-stars {
  gap: clamp(0.32rem, 0.8vw, 0.55rem) !important;
  padding: clamp(0.48rem, 0.9vw, 0.68rem) clamp(0.9rem, 1.8vw, 1.35rem) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.76) !important;
  border: 1px solid rgba(210, 171, 102, 0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 4px 12px rgba(26, 58, 46, 0.035) !important;
}
.fl-rating-star {
  color: rgba(139, 115, 85, 0.36) !important;
  font-size: clamp(2.05rem, 4.3vw, 3.05rem) !important;
  padding: 0 0.03rem !important;
}
.fl-rating-star.is-active,
.fl-rating-star:focus-visible,
.fl-rating-star:hover {
  color: var(--gold) !important;
}
.fl-feedback-tags {
  gap: clamp(0.55rem, 1.15vw, 0.95rem) !important;
  margin-top: 0.05rem !important;
}
.fl-feedback-tag {
  min-height: 42px !important;
  padding: 0.55rem clamp(0.9rem, 1.65vw, 1.25rem) !important;
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(210, 171, 102, 0.58) !important;
  color: var(--forest-deep) !important;
  font-size: clamp(0.98rem, 1.55vw, 1.18rem) !important;
  font-weight: 600 !important;
}
.fl-feedback-tag.is-selected {
  background: var(--forest-deep) !important;
  color: var(--cream) !important;
  border-color: var(--forest-deep) !important;
}
.fl-feedback-divider {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) auto minmax(70px, 1fr);
  align-items: center;
  gap: 0.7rem;
  width: min(330px, 52vw);
  margin: clamp(0.15rem, 0.8vw, 0.45rem) auto 0 !important;
  color: var(--gold);
}
.fl-feedback-divider span {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.82));
}
.fl-feedback-divider span:last-child {
  background: linear-gradient(90deg, rgba(201, 169, 97, 0.82), transparent);
}
.fl-feedback-divider svg {
  display: block;
  width: 38px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fl-feedback-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 1.7vw, 1.35rem);
  margin-top: 0.05rem;
}
.fl-feedback-contact-text {
  margin: 0 !important;
  color: #061f16 !important;
  font-size: clamp(1.15rem, 2vw, 1.55rem) !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  text-align: center !important;
}
.fl-feedback-email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.48rem 1.1rem;
  border: 2px solid rgba(210, 171, 102, 0.7);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--forest-deep);
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp(0.98rem, 1.45vw, 1.18rem);
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(26, 58, 46, 0.04);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}
.fl-feedback-email:focus-visible,
.fl-feedback-email:hover {
  transform: translateY(-1px);
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.94);
  color: var(--forest-dark);
}
.fl-feedback-email:focus-visible {
  outline: 3px solid rgba(201, 169, 97, 0.38);
  outline-offset: 3px;
}
.fl-feedback-email-icon {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.fl-feedback-note {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.fl-feedback-status {
  min-height: 1.2rem !important;
  margin-top: -0.3rem !important;
  color: var(--forest-deep) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
}
@media (max-width: 760px) {
  .fl-feedback-section {
    padding: 2.25rem 1.05rem 2.1rem !important;
    border-radius: 18px !important;
  }
  .fl-feedback-section h2 {
    font-size: clamp(2.4rem, 11vw, 3.45rem) !important;
    max-width: 9.5ch;
  }
  .fl-feedback-intro {
    max-width: 26rem !important;
    font-size: 1rem !important;
  }
  .fl-feedback-widget {
    gap: 1.25rem !important;
  }
  .fl-feedback-label {
    font-size: 1.18rem !important;
  }
  .fl-feedback-tags {
    max-width: 360px;
    gap: 0.55rem !important;
  }
  .fl-feedback-tag {
    min-height: 38px !important;
    font-size: 0.95rem !important;
    padding: 0.48rem 0.82rem !important;
  }
  .fl-feedback-contact {
    flex-direction: column;
    gap: 0.65rem;
  }
  .fl-feedback-contact-text {
    font-size: 1.12rem !important;
  }
  .fl-feedback-email {
    font-size: 0.9rem;
    min-height: 40px;
    padding-left: 0.82rem;
    padding-right: 0.82rem;
  }}
#feedback.fl-feedback-section {
  transform: translateX(-50%) !important;
  width: min(1120px, calc(100vw - 3rem)) !important;
  max-width: none !important;
  margin: clamp(2.6rem, 5vw, 4.2rem) 0 clamp(3rem, 5vw, 4.5rem) !important;
  border: 2px solid rgba(210, 171, 102, 0.68) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(
      circle at top right,
      rgba(201, 169, 97, 0.1),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.94) 0,
      rgba(247, 240, 224, 0.88) 100%
    ) !important;
  box-shadow:
    0 10px 30px rgba(26, 58, 46, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
}
#feedback.fl-feedback-section h2 {
  margin: 0 auto 0.85rem !important;
  font-size: clamp(3.3rem, 5.7vw, 4.65rem) !important;
  line-height: 1.02 !important;
}
#feedback .fl-feedback-intro {
  max-width: 62rem !important;
}
#feedback .fl-rating-stars {
  padding: clamp(0.48rem, 0.8vw, 0.62rem) clamp(0.88rem, 1.5vw, 1.22rem) !important;
}
#feedback .fl-rating-star {
  color: rgba(139, 115, 85, 0.36) !important;
}
#feedback .fl-rating-star.is-active {
  color: var(--gold) !important;
}
#feedback .fl-feedback-tags {
  gap: clamp(0.55rem, 1.05vw, 0.9rem) !important;
}
#feedback .fl-feedback-tag {
  padding: 0.52rem clamp(0.92rem, 1.55vw, 1.25rem) !important;
}
#feedback .fl-feedback-contact {
  gap: clamp(0.9rem, 1.45vw, 1.25rem) !important;
}
#feedback .fl-feedback-status {
  display: none !important;
}
@media (max-width: 760px) {
  #feedback.fl-feedback-section {
    width: min(660px, calc(100vw - 2rem)) !important;
    padding: 2.35rem 1.05rem 2.15rem !important;
    border-radius: 18px !important;
  }
  #feedback.fl-feedback-section h2 {
    white-space: normal !important;
    max-width: 10ch !important;
    font-size: clamp(2.4rem, 11vw, 3.45rem) !important;
  }
  #feedback .fl-feedback-tags {
    flex-wrap: wrap !important;
    max-width: 380px !important;
  }
  #feedback .fl-feedback-contact {
    flex-direction: column !important;
  }}
:root {
  --fl-wide-card: 1040px;
}.container,
.welcome-container {
  max-width: var(--fl-wide-card) !important;
}#feedback.fl-feedback-section,
.cta-section,
.featured-video--cinematic {
  width: min(100%, var(--fl-wide-card)) !important;
}
#feedback .fl-feedback-divider svg {
  width: 36px !important;
  height: 18px !important;
}
@media (max-width: 760px) {.container,
.welcome-container {
    max-width: calc(100vw - 2rem) !important;
  }#feedback.fl-feedback-section,
.cta-section,
.featured-video--cinematic,
.start-panel {
    width: min(100%, calc(100vw - 2rem)) !important;
    max-width: calc(100vw - 2rem) !important;
  }
  #feedback .fl-feedback-divider {
    width: min(300px, 62vw) !important;
  }}
:root {
  --fl-card-visual-width: 976px;
  --fl-card-radius: 22px;
}.featured-video--cinematic,
.start-panel {
  max-width: var(--fl-card-visual-width) !important;
  box-sizing: border-box !important;
}
.start-panel {
  width: min(100%, var(--fl-card-visual-width)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: var(--fl-card-radius) !important;
}.featured-video--cinematic {
  width: 100% !important;
}.featured-video--cinematic,
.guided-reflections-section {
  margin-left: auto !important;
  margin-right: auto !important;
}.cta-section,
.fl-library-section,
.guided-reflections-section {
  max-width: var(--fl-card-visual-width) !important;
}#feedback.fl-feedback-section,
.cta-section,
.fl-library-section {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
#video-library.fl-library-section,
.cta-section,
.fl-library-section {
  border-radius: var(--fl-card-radius) !important;
  overflow: hidden !important;
}
#feedback.fl-feedback-section {
  position: relative !important;
  left: auto !important;
  transform: none !important;
  border-radius: var(--fl-card-radius) !important;
}#feedback.fl-feedback-section {
  max-width: var(--fl-card-visual-width) !important;
}
@media (max-width: 760px) {
  :root {
    --fl-card-visual-width: calc(100vw - 2rem);
  }#feedback.fl-feedback-section,
.cta-section,
.featured-video--cinematic,
.fl-library-section,
.guided-reflections-section,
.start-panel {
    width: var(--fl-card-visual-width) !important;
    max-width: var(--fl-card-visual-width) !important;
  }}
.guided-reflections-section {
  width: 100% !important;
  max-width: var(--fl-card-visual-width, 976px) !important;
  margin: 2.5rem auto 4rem !important;
  border-radius: var(--fl-card-radius, 22px) !important;
  overflow: hidden !important;
  background: #061f16;
  box-shadow: 0 12px 34px rgba(26, 58, 46, 0.22);
  border: 1px solid rgba(201, 169, 97, 0.28);
  box-sizing: border-box !important;
}
.guided-reflections-section::before,
.guided-reflections__title::before {
  display: none;
}
.guided-reflections__content {
  padding: clamp(1rem, 2.4vw, 1.45rem) 1rem clamp(1.05rem, 2.4vw, 1.35rem);
  text-align: center;
}
.guided-reflections__title {
  margin: 0 0 clamp(0.55rem, 1.3vw, 0.8rem);
  padding-left: 0;
  color: #f3d780;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.25rem, 6vw, 3.45rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.025em;
  text-align: center;
}
.guided-reflections__copy {
  max-width: 86ch;
  margin: 0 auto;
  color: rgba(244, 241, 232, 0.92);
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp(0.9rem, 1.35vw, 1rem);
  line-height: 1.5;
  text-align: center;
}
.guided-reflections__copy span {
  display: block;
}
@media (min-width: 761px) {
  .guided-reflections__copy span {
    white-space: nowrap;
  }}
.guided-reflections__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(0.95rem, 2.1vw, 1.35rem);
  min-height: 42px;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(244, 241, 232, 0.96) 0,
    rgba(232, 228, 217, 0.98) 100%
  );
  color: var(--forest-dark);
  border: 1px solid rgba(201, 169, 97, 0.8);
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(26, 58, 46, 0.16);
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.guided-reflections__button:focus-visible,
.guided-reflections__button:hover {
  background: var(--cream);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}
.guided-reflections__button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.guided-reflections__image-wrap {
  width: 100%;
  background: #061f16;
  border-top: 1px solid rgba(201, 169, 97, 0.12);
}
.guided-reflections__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center center;
}
@media (max-width: 760px) {
  .guided-reflections-section {
    width: var(--fl-card-visual-width, calc(100vw - 2rem)) !important;
    max-width: var(--fl-card-visual-width, calc(100vw - 2rem)) !important;
    margin-top: 2rem !important;
    margin-bottom: 3rem !important;
  }
  .guided-reflections__content {
    padding: 1.25rem 1rem 1.15rem;
  }
  .guided-reflections__copy span {
    display: inline;
  }
  .guided-reflections__button {
    min-width: 0;
    width: auto;
    max-width: 100%;
    padding-inline: 1.25rem;
  }}
.start-panel {
  min-height: 0 !important;
  height: auto !important;
}
.start-panel__divider {
  gap: 0.72rem !important;
  height: 22px !important;
}
.start-panel__divider-line {
  width: min(10vw, 130px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(210, 171, 102, 0.86),
    transparent
  );
}
.start-panel__divider-leaf {
  color: rgba(210, 171, 102, 0.95);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.4rem;
  line-height: 1;
  transform: rotate(45deg);
}
.start-panel__cards {
  align-items: stretch !important;
  margin-bottom: 0 !important;
}
.start-panel-card {
  min-height: 0 !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
}
.start-panel-card__icon img,
.start-panel-card__icon picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.start-panel-card__icon img {
  object-fit: contain !important;
  object-position: center bottom !important;
}
@media (max-width: 980px) {
  .start-panel-card__icon {
    height: clamp(112px, 20vw, 150px) !important;
  }}
@media (max-width: 640px) {
  .start-panel {
    padding: 1.45rem 0.85rem 1.5rem !important;
  }
  .start-panel__divider {
    height: 18px !important;
    margin-bottom: 1rem !important;
  }
  .start-panel__intro {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.15rem !important;
  }
  .start-panel-card__icon {
    height: clamp(86px, 23vw, 120px) !important;
  }}
.start-panel__divider img {
  display: block !important;
  width: min(34vw, 390px) !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
}
@media (max-width: 760px) {
  :root {
    --fl-feature-stack-gap: clamp(2rem, 7vw, 3rem);
  }
  .start-panel-card .start-panel-card__button,
  .start-panel-card__button,
  .start-panel-card__button *,
  .start-panel-card__button span {
    font-size: clamp(0.7rem, 2.75vw, 0.82rem) !important;
  }
  .start-panel-card__button {
    min-height: 32px !important;
    padding: 0.3rem 0.55rem !important;
  }}
#feedback.fl-feedback-section {
  padding: clamp(2.25rem, 4vw, 3.15rem) clamp(1.15rem, 4.4vw, 3.4rem) !important;
}
#feedback.fl-feedback-section h2 {
  margin: 0 auto clamp(0.65rem, 1.3vw, 0.95rem) !important;
  max-width: none !important;
  white-space: nowrap !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: var(--fl-home-title-size) !important;
  font-weight: 600 !important;
  line-height: var(--fl-home-title-line-height) !important;
  letter-spacing: var(--fl-home-title-tracking) !important;
  text-align: center !important;
}
#feedback .fl-feedback-intro {
  max-width: 66ch !important;
  margin: 0 auto clamp(1.2rem, 2.2vw, 1.7rem) !important;
  font-size: clamp(0.92rem, 1.25vw, 1.05rem) !important;
  line-height: 1.5 !important;
  color: rgba(26, 58, 46, 0.72) !important;
  text-align: center !important;
}
#feedback .fl-feedback-widget {
  max-width: 720px !important;
  gap: clamp(0.75rem, 1.45vw, 1.05rem) !important;
}
#feedback .fl-feedback-label {
  font-family: "Nunito Sans", sans-serif !important;
  font-size: clamp(1rem, 1.35vw, 1.12rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--forest-dark) !important;
}
#feedback .fl-rating-stars {
  gap: clamp(0.2rem, 0.55vw, 0.35rem) !important;
  padding: 0.38rem 0.78rem !important;
}
#feedback .fl-rating-star {
  font-size: clamp(1.8rem, 3.2vw, 2.25rem) !important;
  line-height: 1 !important;
  padding: 0 0.02rem !important;
}
#feedback .fl-feedback-tags {
  flex-wrap: wrap !important;
  gap: 0.55rem !important;
  margin-top: 0 !important;
}
#feedback .fl-feedback-tag {
  min-height: 34px !important;
  padding: 0.38rem 0.82rem !important;
  font-family: "Nunito Sans", sans-serif !important;
  font-size: clamp(0.82rem, 1vw, 0.94rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}
#feedback .fl-feedback-divider {
  width: min(320px, 46vw) !important;
  margin: clamp(0.2rem, 0.8vw, 0.45rem) auto 0 !important;
}
#feedback .fl-feedback-contact {
  gap: 0.65rem !important;
  margin-top: 0.1rem !important;
}
#feedback .fl-feedback-contact-text {
  margin: 0 !important;
  font-family: "Nunito Sans", sans-serif !important;
  font-size: clamp(0.98rem, 1.25vw, 1.08rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--forest-dark) !important;
  text-align: center !important;
}
#feedback .fl-feedback-email {
  font-family: "Nunito Sans", sans-serif !important;
  line-height: 1.1 !important;
}
@media (max-width: 760px) {
  #feedback.fl-feedback-section {
    padding: 2.1rem 1rem 1.95rem !important;
  }
  #feedback.fl-feedback-section h2 {
    white-space: normal !important;
    max-width: 12ch !important;
    font-size: clamp(2.25rem, 10vw, 3rem) !important;
  }
  #feedback .fl-feedback-intro {
    max-width: 34ch !important;
    font-size: clamp(0.86rem, 2.8vw, 0.95rem) !important;
  }
  #feedback .fl-feedback-label {
    font-size: clamp(0.95rem, 3.2vw, 1.04rem) !important;
  }
  #feedback .fl-feedback-tags {
    max-width: 360px !important;
  }
  #feedback .fl-feedback-tag {
    font-size: clamp(0.76rem, 2.65vw, 0.86rem) !important;
    min-height: 32px !important;
  }}
.start-panel {
  max-width: 1040px !important;
  padding: clamp(1.65rem, 2.8vw, 2.55rem) clamp(1.15rem, 3.2vw, 2.7rem)
    clamp(1.55rem, 2.65vw, 2.45rem) !important;
}
.start-panel__content {
  max-width: 920px !important;
}
.start-panel__title {
  font-size: clamp(2.35rem, 4.15vw, 3rem) !important;
  line-height: 1.04 !important;
  margin-bottom: clamp(0.42rem, 0.85vw, 0.7rem) !important;
}
.start-panel__intro {
  max-width: 84ch !important;
  margin-bottom: clamp(1.25rem, 2vw, 1.7rem) !important;
  font-size: clamp(0.98rem, 1.25vw, 1.14rem) !important;
  line-height: 1.58 !important;
  text-align: center !important;
}
.start-panel__cards {
  max-width: 820px !important;
  gap: clamp(0.75rem, 1.35vw, 1rem) !important;
}
.start-panel-card {
  padding: clamp(0.72rem, 1.08vw, 0.95rem) clamp(0.65rem, 1vw, 0.85rem)
    clamp(0.75rem, 1.08vw, 0.95rem) !important;
}
.start-panel-card__button {
  width: min(100%, 170px) !important;
}
.start-panel-card__label {
  margin-top: clamp(0.46rem, 0.75vw, 0.62rem) !important;
  font-family: "Nunito Sans", sans-serif !important;
  font-size: clamp(0.94rem, 1.18vw, 1.08rem) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
}
.start-panel-card__icon {
  height: clamp(104px, 10vw, 142px) !important;
  margin-top: clamp(0.48rem, 0.85vw, 0.72rem) !important;
}
@media (max-width: 980px) {
  .start-panel {
    max-width: 760px !important;
  }
  .start-panel__cards {
    max-width: 620px !important;
  }
  .start-panel__intro {
    max-width: 68ch !important;
    font-size: 0.98rem !important;
    line-height: 1.5 !important;
  }}
@media (max-width: 640px) {
  .start-panel {
    padding: 1.25rem 0.78rem 1.35rem !important;
  }
  .start-panel__title {
    font-size: clamp(1.82rem, 8.4vw, 2.45rem) !important;
  }
  .start-panel__divider {
    height: 18px !important;
    margin-bottom: 0.75rem !important;
  }
  .start-panel__intro {
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
    margin-bottom: 1rem !important;
  }
  .start-panel-card__button {
    width: min(100%, 118px) !important;
    min-height: 34px !important;
    font-size: 1rem !important;
    padding: 0.32rem 0.56rem !important;
  }
  .start-panel-card__label {
    font-size: 0.76rem !important;
    line-height: 1.12 !important;
    margin-top: 0.26rem !important;
  }
  .start-panel-card__icon {
    height: clamp(74px, 21vw, 108px) !important;
    margin-top: 0.25rem !important;
  }}
:root {
  --fl-feature-stack-gap: clamp(2.35rem, 4.4vw, 3.85rem);
}
.start-panel__divider {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: clamp(18px, 2vw, 28px) !important;
  margin: 0 auto clamp(0.95rem, 1.65vw, 1.35rem) !important;
}
.start-panel__divider-leaf,
.start-panel__divider-line {
  display: none !important;
}
.start-panel-card .start-panel-card__button,
.start-panel-card__button,
.start-panel-card__button *,
.start-panel-card__button span {
  font-family: "Nunito Sans", sans-serif !important;
  font-size: clamp(0.82rem, 0.95vw, 0.96rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
}
.start-panel-card__button {
  min-height: clamp(36px, 3vw, 42px) !important;
  padding: 0.38rem 0.74rem !important;
}
#featured {
  padding-bottom: 0 !important;
}
.start-panel-section + .container #featured .featured-video--cinematic {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
#featured .featured-video--cinematic {
  margin-bottom: 0 !important;
}
@media (max-width: 760px) {
  :root {
    --fl-feature-stack-gap: clamp(2rem, 7vw, 3rem);
  }
  .start-panel-card .start-panel-card__button,
  .start-panel-card__button,
  .start-panel-card__button *,
  .start-panel-card__button span {
    font-size: clamp(0.7rem, 2.75vw, 0.82rem) !important;
  }
  .start-panel-card__button {
    min-height: 32px !important;
    padding: 0.3rem 0.55rem !important;
  }}
:root {
  --fl-home-title-size: clamp(2.35rem, 4.15vw, 3rem);
  --fl-home-title-line-height: 1.04;
  --fl-home-title-tracking: 0.025em;
  --fl-home-body-size: clamp(1.08rem, 1.4vw, 1.24rem);
  --fl-home-body-line-height: 1.58;
  --fl-title-on-dark: #f3d780;
  --fl-title-on-light: #163c2f;
  --fl-body-on-dark: rgba(244, 241, 232, 0.92);
  --fl-body-on-light: #163c2f;
}#featured .featured-video__eyebrow,
#guided-reflections .guided-reflections__title,
.cta-section h2,
.start-panel__title {
  line-height: var(--fl-home-title-line-height) !important;
}#featured .featured-video__eyebrow,
#feedback-title,
#guided-reflections .guided-reflections__title,
.cta-section h2,
.start-panel__title {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: var(--fl-home-title-size) !important;
  font-weight: 600 !important;
  letter-spacing: var(--fl-home-title-tracking) !important;
  text-align: center !important;
}
@media (min-width: 901px) {#featured .featured-video__eyebrow,
#feedback-title,
#guided-reflections .guided-reflections__title,
.cta-section h2,
.start-panel__title,
.start-panel__title-line {
    white-space: nowrap !important;
    max-width: none !important;
  }
  #feedback-title,
  .cta-section h2,
  .start-panel__title {
    width: 100% !important;
  }}#feedback-title,
.start-panel__title {
  color: var(--fl-title-on-light) !important;
}#featured .featured-video__eyebrow,
#guided-reflections .guided-reflections__title,
.cta-section h2 {
  color: var(--fl-title-on-dark) !important;
}#feedback .fl-feedback-intro,
#guided-reflections .guided-reflections__copy,
.cta-section p,
.fl-library-intro,
.start-panel__intro {
  font-family: "Nunito Sans", sans-serif !important;
  font-size: var(--fl-home-body-size) !important;
  font-weight: 500 !important;
  line-height: var(--fl-home-body-line-height) !important;
  letter-spacing: 0.01em !important;
}#feedback .fl-feedback-intro,
.fl-library-intro,
.start-panel__intro {
  color: var(--fl-body-on-light) !important;
}#guided-reflections .guided-reflections__copy,
.cta-section p {
  color: var(--fl-body-on-dark) !important;
}
@media (min-width: 901px) {
  #guided-reflections .guided-reflections__copy span {
    display: block !important;
    white-space: nowrap !important;
  }}
@media (max-width: 900px) {#featured .featured-video__eyebrow,
#feedback-title,
#guided-reflections .guided-reflections__title,
.cta-section h2,
.start-panel__title {
    white-space: normal !important;
    max-width: none !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }}
@media (min-width: 901px) {#feedback .fl-feedback-intro {
    white-space: nowrap !important;
    max-width: none !important;
  }}
#feedback-title {
  line-height: var(--fl-home-title-line-height) !important;
}
@media (max-width: 900px) {
  #feedback-title {
    font-size: clamp(1.85rem, 3.2vw, 2.6rem) !important;
  }#feedback-title {
    white-space: normal !important;
  }#feedback .fl-feedback-intro {
    white-space: normal !important;
    max-width: 62ch !important;
  }}
#feedback .fl-ornament-divider,
.fl-ornament-divider {
  display: grid !important;
  grid-template-columns: minmax(70px, 1fr) auto minmax(70px, 1fr) !important;
  align-items: center !important;
  gap: 0.7rem !important;
  width: min(360px, 44vw) !important;
  height: auto !important;
  color: var(--gold) !important;
}
#feedback .fl-ornament-divider span,
.fl-ornament-divider span {
  display: block !important;
  width: auto !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 169, 97, 0.82)
  ) !important;
}
#feedback .fl-ornament-divider span:last-child,
.fl-ornament-divider span:last-child {
  background: linear-gradient(
    90deg,
    rgba(201, 169, 97, 0.82),
    transparent
  ) !important;
}
#feedback .fl-ornament-divider svg,
.fl-ornament-divider svg {
  display: block !important;
  width: 52px !important;
  height: 26px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.start-panel__divider.fl-ornament-divider {
  margin: 0 auto clamp(1rem, 2vw, 1.6rem) !important;
}
#feedback .fl-ornament-divider {
  margin: clamp(0.4rem, 1vw, 0.65rem) auto 0 !important;
}
#feedback .fl-feedback-email {
  min-height: 48px !important;
  padding: 0.55rem 1.35rem !important;
  border: 2px solid rgba(210, 171, 102, 0.9) !important;
  background: linear-gradient(135deg, #1a3a2e 0, #143024 100%) !important;
  color: #f4f1e8 !important;
  font-size: clamp(1rem, 1.3vw, 1.15rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 6px 18px rgba(26, 58, 46, 0.28) !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease !important;
}
#feedback .fl-feedback-email:focus-visible,
#feedback .fl-feedback-email:hover {
  background: linear-gradient(135deg, #2d5a4a 0, #1a3a2e 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(26, 58, 46, 0.34) !important;
}
#feedback .fl-feedback-email:focus-visible {
  outline: 3px solid var(--gold) !important;
  outline-offset: 3px !important;
}
#feedback .fl-feedback-email-icon {
  width: 1.15rem !important;
  height: 1.15rem !important;
  filter: brightness(0) invert(0.95) sepia(0.12) !important;
}
@media (prefers-reduced-motion: reduce) {
  #feedback .fl-feedback-email,
  #feedback .fl-feedback-email:focus-visible,
  #feedback .fl-feedback-email:hover {
    transition: none !important;
    transform: none !important;
  }}
.footer-mail-icon img {
  filter: brightness(0) invert(0.95) sepia(0.12) !important;
}
.cta-section {
  padding-top: clamp(1.6rem, 3vw, 2.3rem) !important;
  padding-bottom: clamp(1.4rem, 2.6vw, 2rem) !important;
}
#feedback .fl-feedback-email,
.cta-section {
  background: linear-gradient(180deg, #2d5a4a 0, #16502f 100%) !important;
}
#feedback .fl-feedback-email:focus-visible,
#feedback .fl-feedback-email:hover {
  background: linear-gradient(180deg, #356a57 0, #1d5c39 100%) !important;
}
.cta-section .instagram-btn {
  background: 0 0 !important;
  border: 2px solid rgba(244, 241, 232, 0.55) !important;
  color: #f4f1e8 !important;
}
.cta-section .instagram-btn:focus-visible,
.cta-section .instagram-btn:hover {
  background: rgba(244, 241, 232, 0.12) !important;
  border-color: rgba(244, 241, 232, 0.85) !important;
}
@media (max-width: 900px) {
  #feedback-title,
  #feedback.fl-feedback-section h2 {
    white-space: normal !important;
    max-width: none !important;
    width: 100% !important;
    font-size: var(--fl-home-title-size) !important;
    line-height: var(--fl-home-title-line-height) !important;
    letter-spacing: var(--fl-home-title-tracking) !important;
  }}
@media (max-width: 760px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }#feedback.fl-feedback-section,
.cta-section,
.featured-video--cinematic,
.fl-library-section,
.guided-reflections-section {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  .start-panel {
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }}
@media (min-width: 721px) {
  .fl-library-card__summary {
    overflow: hidden !important;
  }
  .fl-library-card__summary > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .fl-library-card__thumbnail,
  .fl-library-media-column {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .fl-library-card__thumbnail-link,
  .fl-library-card__thumbnail-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .fl-library-card__thumbnail iframe,
  .fl-library-card__thumbnail picture,
  .fl-library-card__thumbnail video,
  .fl-library-card__thumbnail-image,
  .fl-library-card__thumbnail-link img,
  .fl-library-card__thumbnail-shell img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    object-fit: cover !important;
  }
  .fl-library-card__thumbnail-overlay {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .fl-library-card__duration-badge img,
  .fl-library-card__thumbnail-overlay img {
    width: 56px !important;
    height: 56px !important;
    max-width: none !important;
    object-fit: contain !important;
  }}
@media (max-width: 768px) {
  .featured-video--cinematic {
    padding: 0 !important;
  }}
.start-panel-section {
  padding-top: clamp(1.1rem, 2vw, 1.6rem) !important;
  padding-bottom: clamp(1.1rem, 2vw, 1.6rem) !important;
}
:root {
  --fl-section-rhythm: clamp(1.5rem, 2.5vw, 2.25rem);
}
@media (max-width: 760px) {
  :root {
    --fl-section-rhythm: clamp(1.25rem, 4vw, 1.75rem);
  }}
#featured {
  margin-bottom: var(--fl-section-rhythm) !important;
}#feedback.fl-feedback-section,
#guided-reflections,
#join.cta-section,
#video-library.fl-library-section,
.cta-section,
.fl-library-section,
.guided-reflections-section {
  margin-top: 0 !important;
  margin-bottom: var(--fl-section-rhythm) !important;
}
.container {
  padding-bottom: 0 !important;
}
:root {
  --fl-feature-stack-gap: var(--fl-section-rhythm);
  --fl-feature-story-gap: var(--fl-section-rhythm);
  --fl-section-gap: var(--fl-section-rhythm);
  --fl-panel-gap: var(--fl-section-rhythm);
}.start-panel-section + .container #featured {
  margin-top: 0 !important;
  margin-bottom: var(--fl-section-rhythm) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.start-panel-section + .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.start-panel-section {
  padding-bottom: var(--fl-section-rhythm) !important;
}
@media (max-width: 760px) {
  #featured,
  .container {
    padding-top: 0 !important;
  }
  #featured {
    margin-top: 0 !important;
  }}
.container {
  padding-top: 0 !important;
}#featured {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#featured .featured-video--cinematic,
.featured-video--cinematic {
  margin-top: 0 !important;
}
@media (max-width: 980px) {
  #welcome.start-panel-section {
    padding-bottom: 1rem !important;
  }
  #welcome .start-panel {
    padding-bottom: 1.25rem !important;
  }}
#welcome.start-panel-section,
.start-panel-section {
  margin-bottom: 0 !important;
  background: 0 0 !important;
}
@media (max-width: 980px) and (min-width: 761px) {
  .start-panel-section {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .start-panel {
    width: 100% !important;
    max-width: var(--fl-card-visual-width) !important;
  }}
@media (min-width: 761px) {
  .start-panel-section {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .start-panel {
    width: 100% !important;
    max-width: var(--fl-card-visual-width) !important;
  }}
@media (min-width: 761px) and (max-width: 768px) {
  .start-panel-section {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }}/* RHYTHM: hero-to-panel gap — June 11
   The gap above the Start Here panel used an older clamp(1.1rem, 2vw,
   1.6rem) while the gap below it (and every other section gap) uses
   --fl-section-rhythm, so the first gap read slightly tighter. Align it. */


.start-panel-section {
  padding-top: var(--fl-section-rhythm) !important;
}/* FOOTER GREEN MATCH — June 11
   Footer background now uses the exact gradient of the "Join the Fables
   Library" card so the two dark-green blocks read as one family. */


.site-footer {
  background: linear-gradient(180deg, #2d5a4a 0, #16502f 100%) !important;
}/* LIGHT PANEL BACKGROUND UNIFICATION — June 11
   All light panels now repeat the exact "Parents & Educators: Start Here"
   panel background (soft white radial highlight over a warm cream
   gradient), replacing Video Library's cooler parchment gradient and
   Feedback's white-leaning mix. One warm cream family across the page. */


#video-library.fl-library-section,
.fl-library-section,
#feedback.fl-feedback-section {
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(255, 255, 255, 0.9) 0,
      rgba(255, 255, 255, 0) 36%
    ),
    linear-gradient(
      180deg,
      rgba(253, 246, 227, 0.98) 0,
      rgba(247, 240, 224, 0.96) 100%
    ) !important;
}/* START HERE PANEL TYPOGRAPHY REFRESH — June 11 (per mockup)
   1. Title: bolder weight, solid #163c2f.
   2. Vignette: crisper and more visible — slightly larger leaf, thicker
      stroke, full-strength gold rules.
   3. Less space under the vignette.
   4. Subtitle: larger, solid #163c2f.
   Scoped to the Start Here panel; other sections' titles unchanged. */


.start-panel__title {
  font-weight: 700 !important;
  color: #163c2f !important;
}

.start-panel__divider.fl-ornament-divider {
  margin: 0 auto clamp(0.45rem, 0.9vw, 0.7rem) !important;
  color: #c9a961 !important;
}

.start-panel__divider.fl-ornament-divider svg {
  width: 60px !important;
  height: 30px !important;
  stroke-width: 2.5 !important;
}

.start-panel__divider.fl-ornament-divider span {
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #c9a961) !important;
}

.start-panel__divider.fl-ornament-divider span:last-child {
  background: linear-gradient(90deg, #c9a961, transparent) !important;
}

.start-panel__intro {
  font-size: clamp(1.08rem, 1.4vw, 1.24rem) !important;
  color: #163c2f !important;
}/* START HERE INTRO LINE BREAK (desktop only) — June 11
   Forces the first subtitle line to end after "brings together" so the
   third line carries more words, matching the mockup. The break is
   invisible at tablet/mobile widths where natural wrapping applies. */


.start-panel__intro-br {
  display: none;
}

@media (min-width: 981px) {
  .start-panel__intro-br {
    display: inline;
  }}/* STORY WEAVER TITLE ON ONE LINE (desktop) — June 11 */


@media (min-width: 981px) {}/* ==================================================================
   LIGHT CARD REDESIGN — June 12
   All five feature cards (Featured Video, Story Weaver, Guided
   Reflections, Learning Gardens, Grown-Ups Help and FAQs) now share
   the "Parents & Educators: Start Here" panel treatment: warm cream
   gradient with a soft white radial highlight, 2px gold border, 22px
   radius, and #1A3A2E titles/copy. All CTAs use one dark-green pill
   (the Start Here card button). Learning Gardens collapses into a
   single panel holding 8 light sub-cards at 3/2/1 columns.
   Supersedes the deleted June 11 dark-card patches.
   ================================================================== */


:root {
  --fl-light-card-border: 2px solid rgba(210, 171, 102, 0.72);
  --fl-light-card-bg:
    radial-gradient(
      circle at 18% 18%,
      rgba(255, 255, 255, 0.9) 0,
      rgba(255, 255, 255, 0) 36%
    ),
    linear-gradient(
      180deg,
      rgba(253, 246, 227, 0.98) 0,
      rgba(247, 240, 224, 0.96) 100%
    );
  --fl-light-card-shadow:
    0 10px 28px rgba(26, 58, 46, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}/* ---------- 1. Shared card shells ---------- */.featured-video--cinematic,
.guided-reflections-section {
  border: var(--fl-light-card-border) !important;
  background: var(--fl-light-card-bg) !important;
  box-shadow: var(--fl-light-card-shadow) !important;
  border-radius: var(--fl-card-radius, 22px) !important;
  overflow: hidden !important;
}/* ---------- 2. One pill for every CTA ---------- */.guided-reflections__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  min-height: 42px !important;
  padding: 0.6rem 1.7rem !important;
  background:
    linear-gradient(
      180deg,
      rgba(45, 90, 74, 0.82) 0,
      rgba(22, 80, 47, 0.95) 100%
    ),
    image-set(
      url(assets/welcome-card-button-background.webp) type("image/webp"),
      url(assets/welcome-card-button-background.png) type("image/png")
    ) !important;
  background-position: center center, center center !important;
  background-size: auto, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  color: var(--cream) !important;
  font-family: "Nunito Sans", sans-serif !important;
  font-size: clamp(0.92rem, 1.05vw, 1.02rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  box-shadow:
    inset 0 0 0 1px rgba(244, 241, 232, 0.12),
    0 8px 18px rgba(26, 58, 46, 0.16) !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}.guided-reflections__button:hover,
.guided-reflections__button:focus-visible {
  transform: translateY(-1px) !important;
  background:
    linear-gradient(
      180deg,
      rgba(53, 106, 87, 0.86) 0,
      rgba(29, 92, 57, 0.96) 100%
    ),
    image-set(
      url(assets/welcome-card-button-background.webp) type("image/webp"),
      url(assets/welcome-card-button-background.png) type("image/png")
    ) !important;
  background-position: center center, center center !important;
  background-size: auto, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(244, 241, 232, 0.18),
    0 10px 24px rgba(26, 58, 46, 0.24) !important;
}.guided-reflections__button:focus-visible {
  outline: 3px solid rgba(201, 169, 97, 0.75) !important;
  outline-offset: 3px !important;
}/* ---------- 3. Light band typography (titles + copy on cream) ---------- */#featured .featured-video__title,
#guided-reflections .guided-reflections__title {
  color: var(--fl-title-on-light) !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: var(--fl-home-title-size) !important;
  font-weight: 600 !important;
  line-height: var(--fl-home-title-line-height) !important;
  letter-spacing: var(--fl-home-title-tracking) !important;
  text-align: center !important;
  text-shadow: none !important;
  margin: 0 !important;
}#featured .featured-video__subtitle,
#guided-reflections .guided-reflections__copy {
  color: var(--fl-title-on-light) !important;
  font-family: "Nunito Sans", sans-serif !important;
  font-size: var(--fl-home-body-size) !important;
  font-weight: 500 !important;
  line-height: var(--fl-home-body-line-height) !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  text-shadow: none !important;
  margin-bottom: 0 !important;
}
@media (min-width: 901px) {#featured .featured-video__title {
    white-space: nowrap !important;
  }}/* ---------- 4. Featured Video ---------- */


.featured-video__header {
  padding: clamp(1.05rem, 2vw, 1.4rem) 1rem clamp(1.15rem, 2.1vw, 1.5rem) !important;
  text-align: center;
}
#featured .featured-video__subtitle {
  margin: clamp(0.55rem, 1.1vw, 0.8rem) auto 0 !important;
  max-width: 70ch;
}/* Crop to the artwork (top 526px of the 1460x731 asset; the baked white
   base is dropped) and let the white footer strip carry the link. */

.featured-video__thumbnail-link {
  aspect-ratio: 1460 / 526 !important;
  background: 0 0 !important;
}
.featured-video__thumbnail-picture {
  display: block;
  width: 100%;
  height: 100%;
}
.featured-video__thumbnail {
  object-position: top center !important;
}
.featured-video__footer {
  background: 0 0; /* card cream shows through, matching the header */
  padding: clamp(0.9rem, 1.8vw, 1.3rem) 1rem;
  text-align: center;
}
.featured-video__guide-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  width: auto !important;
  padding: 0.35rem 0.5rem !important;
  border: 0 !important;
  background: 0 0 !important;
  color: var(--fl-title-on-light) !important;
  font-family: "Nunito Sans", sans-serif !important;
  font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.featured-video__guide-link:hover,
.featured-video__guide-link:focus-visible {
  color: #0f3328 !important;
  background: 0 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 0.2em;
}
.featured-video__guide-link:focus-visible {
  outline: 3px solid rgba(201, 169, 97, 0.75) !important;
  outline-offset: 3px !important;
}/* ---------- 6. Guided Reflections ---------- */


.guided-reflections__content {
  padding: clamp(1.05rem, 2vw, 1.4rem) 1rem clamp(1.15rem, 2.1vw, 1.5rem) !important;
}
.guided-reflections__button {
  margin-top: clamp(0.95rem, 2.1vw, 1.35rem) !important;
}
.guided-reflections__image-wrap {
  background: 0 0 !important;
  border-top: 0 !important;
  display: flex;
  justify-content: center;
  padding: 0 clamp(1rem, 3vw, 2.5rem) clamp(1.1rem, 2.2vw, 1.6rem);
  box-sizing: border-box;
}
.guided-reflections__image {
  width: min(100%, 760px) !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}
@media (max-width: 980px) {}
@media (max-width: 640px) {}/* ---------- 10. Reduced motion ---------- */


@media (prefers-reduced-motion: reduce) {.guided-reflections__button,
.featured-video__guide-link {
    transition: none !important;
    transform: none !important;
  }}/* ==================================================================
   VIDEO LIBRARY SHELL + BUTTON ARROW SPACING + ONE-LINE FILTERS
   — June 12 follow-up
   ================================================================== *//* 1. Video Library card matches the Start Here panel shell (it already
   shares the background; add the gold outline and soft shadow). */



#video-library.fl-library-section {
  border: var(--fl-light-card-border) !important;
  box-shadow: var(--fl-light-card-shadow) !important;
}/* 2. More air between button label and arrow icon. The arrow enhancer
   wraps the glyph in an SVG whose own margins are zeroed inside the
   aria-hidden span, so the span carries the gap. */.guided-reflections__button > span[aria-hidden] {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5em;
}
.start-panel-card__button span {
  margin-left: 0.5em !important;
}
@media (min-width: 981px) {}/* 2. More/Less toggle: the caret SVG (inserted by the arrow enhancer)
   rotates when the panel is open; the label text is swapped in JS. *//* (More/Less caret rules retired with the legacy filter UI.) *//* 3. Search field: width is set inline by the filter overflow script to
   match the visible filter row exactly (first filter through the More
   toggle); keep it centered and never wider than the section. */





.fl-library-search {
  margin-left: auto !important;
  margin-right: auto !important;
}/* ==================================================================
   PAGE BACKGROUND OUTSIDE CARDS — June 12 follow-up
   The canvas behind all cards is now #ece3c8. Set on body only; the
   --cream variable is untouched because it also colors button text
   and other foregrounds.
   ================================================================== */


body {
  background-color: #ece3c8 !important;
}/* --- (2) Section rhythm ---
   Every panel shares one cream; alternating a hair-warmer fill on the
   Featured, Guided Reflections, Learning Gardens, and Feedback panels
   gives the stack a gentle two-beat rhythm without leaving the palette. */.featured-video--cinematic,
.guided-reflections-section,
#feedback.fl-feedback-section {
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(255, 255, 255, 0.82) 0,
      rgba(255, 255, 255, 0) 36%
    ),
    linear-gradient(
      180deg,
      rgba(250, 243, 224, 0.98) 0,
      rgba(243, 234, 211, 0.97) 100%
    ) !important;
}/* --- (3) Uniform horizontal inset for full-bleed card images ---
   Featured Video and Grown-Ups artwork ran edge to edge while their
   copy was padded; inset the images to match. Story Weaver already
   insets via its overlay, so it is left alone. */


.featured-video__thumbnail-link {
  margin: 0 clamp(0.85rem, 2vw, 1.5rem) !important;
  width: auto !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}/* --- (5) Video Library tile clarity ---
   The rows already carry a tile; lift the border and shadow so each
   reads as a distinct card against the section cream, matching the
   gardens. */


.fl-library-card {
  border-color: rgba(201, 169, 97, 0.45) !important;
  box-shadow: 0 6px 16px rgba(26, 58, 46, 0.07) !important;
}/* --- (6) Detail labels: already forest-green (--forest-deep) in the
   base styles; the uppercase tracking just reads light at small size.
   No change needed; intentionally left as-is. *//* --- (7) Footer transition ---
   A gold rule above the green Join block echoes the gold accents used
   throughout and softens the cream-to-forest jump. */




.cta-section {
  border-top: 3px solid rgba(201, 169, 97, 0.6) !important;
}/* ==================================================================
   PILL LABEL CENTERING — June 12 (generalized)
   The inline arrow span sits at the right of every pill, so a centered
   flex row places the label left of the pill's true center on all of
   them (Start Here mini-buttons, Start, Browse, garden cards). Fix once
   on the shared class: keep the arrow inline next to the label, and add
   an invisible left spacer matching the arrow span's footprint so the
   visible label+arrow unit is centered. Buttons whose arrow span sits
   in normal flow get balanced; buttons without an arrow are unaffected
   (the spacer is tiny and symmetric only matters when an arrow exists,
   but an empty 0-content pill still tolerates the spacer cosmetically).
   ================================================================== */.guided-reflections__button,
.start-panel-card__button {
  position: relative !important;
}/* Counterweight mirrors the arrow span: its 0.5em left gap + the SVG
   glyph (1em) + the SVG's 0.28em side margins = ~2.06em. Only added
   when the button actually contains an arrow span. */.guided-reflections__button:has(> span[aria-hidden])::before,
.start-panel-card__button:has(> span[aria-hidden])::before {
  content: "";
  flex: 0 0 auto;
  width: 2.06em;
}/* ============================================================
   MASTER STYLE LOCK — all seven section/card titles + intros
   Master = "Parents & Educators: Start Here"
   Title:  Cormorant Garamond, 700, #163c2f,
           clamp(2.35rem,4.15vw,4rem), lh 1.04, tracking 0.025em, centered
   Intro:  Nunito Sans, 500, #163c2f,
           clamp(1.08rem,1.4vw,1.24rem), lh 1.58, tracking 0.01em, centered
   Type only. No background changes.
   ============================================================ */#featured .featured-video__title,
#guided-reflections .guided-reflections__title,
#video-library-title,
#feedback-title {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: var(--fl-home-title-size) !important;
  font-weight: 700 !important;
  line-height: var(--fl-home-title-line-height) !important;
  letter-spacing: var(--fl-home-title-tracking) !important;
  color: var(--fl-title-on-light) !important;
  text-align: center !important;
  text-shadow: none !important;
}#featured .featured-video__subtitle,
#guided-reflections .guided-reflections__copy,
.fl-library-intro,
#feedback .fl-feedback-intro {
  font-family: "Nunito Sans", sans-serif !important;
  font-size: var(--fl-home-body-size) !important;
  font-weight: 500 !important;
  line-height: var(--fl-home-body-line-height) !important;
  letter-spacing: 0.01em !important;
  color: var(--fl-body-on-light) !important;
  text-align: center !important;
  text-shadow: none !important;
}/* ============================================================
   MASTER STYLE LOCK — line-height + size normalization
   Legacy per-section rules (lh 1 / 1.04 / 1.3, and two title sizes)
   outrank the base lock by specificity. Restate at matching/higher
   specificity, last in source order, so all seven tie exactly.
   Grid card titles (.bot-launch-grid .bot-launch-card__title) are a
   SEPARATE object and are intentionally excluded.
   ============================================================ *//* Titles: force master line-height + size on the stragglers */#featured .featured-video__header .featured-video__title,
#guided-reflections .guided-reflections__content .guided-reflections__title,
#video-library #video-library-title,
#feedback #feedback-title {
  font-size: var(--fl-home-title-size) !important;
  line-height: var(--fl-home-title-line-height) !important;
  letter-spacing: var(--fl-home-title-tracking) !important;
}/* Descriptions: force master line-height; undo title-lh leak onto body */#featured .featured-video__header .featured-video__subtitle,
#guided-reflections .guided-reflections__content .guided-reflections__copy,
#video-library .fl-library-intro,
#feedback .fl-feedback-intro {
  font-size: var(--fl-home-body-size) !important;
  line-height: var(--fl-home-body-line-height) !important;
}/* ============================================================
   MASTER SPACING LOCK
   (a) Card top -> title = master panel padding-top
       clamp(1.65rem, 2.8vw, 2.55rem) on each card's title band.
   (b) Title -> description gap unified across all seven cards
       via title margin-bottom clamp(0.42rem,0.85vw,0.7rem),
       description margin-top zeroed.
   Selectors compounded with section IDs to win on specificity.
   ============================================================ *//* (a) Distance from top of card to title */




#featured .featured-video__header {
  padding-top: clamp(1.65rem, 2.8vw, 2.55rem) !important;
}
#guided-reflections .guided-reflections__content {
  padding-top: clamp(1.65rem, 2.8vw, 2.55rem) !important;
}
#video-library.fl-library-section {
  padding-top: clamp(1.65rem, 2.8vw, 2.55rem) !important;
}
#feedback.fl-feedback-section {
  padding-top: clamp(1.65rem, 2.8vw, 2.55rem) !important;
}/* (b) Title -> description gap: uniform bottom margin, zero top margin *//* Block section titles (centered) */#featured .featured-video__header .featured-video__title,
#guided-reflections .guided-reflections__content .guided-reflections__title,
#video-library #video-library-title,
#feedback #feedback-title {
  margin: 0 auto clamp(0.42rem, 0.85vw, 0.7rem) !important;
}/* Descriptions: remove top margin so the title margin-bottom is the gap */#featured .featured-video__header .featured-video__subtitle,
#guided-reflections .guided-reflections__content .guided-reflections__copy,
#video-library .fl-library-intro,
#feedback .fl-feedback-intro {
  margin-top: 0 !important;
}/* ============================================================
   JOIN / CTA card — master FONT + SPACING, colors preserved.
   Colors (gold title, cream body, dark bg/border) left as-is.
   ============================================================ */


.cta-section h2 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: var(--fl-home-title-size) !important;
  font-weight: 700 !important;
  line-height: var(--fl-home-title-line-height) !important;
  letter-spacing: var(--fl-home-title-tracking) !important;
  text-align: center !important;
  margin: 0 auto clamp(0.42rem, 0.85vw, 0.7rem) !important;
}
.cta-section p {
  font-family: "Nunito Sans", sans-serif !important;
  font-size: var(--fl-home-body-size) !important;
  font-weight: 500 !important;
  line-height: var(--fl-home-body-line-height) !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem) !important;
}
.cta-section {
  padding-top: clamp(1.65rem, 2.8vw, 2.55rem) !important;
}/* ============================================================
   JOIN / CTA buttons — keep 3-across through tablet, smaller.
   Collapse to single column only on phones (<600px).
   Overrides the max-width:840 and max-width:900 single-column
   blocks for the 600px+ range (later source order, same specificity).
   ============================================================ */


@media (min-width: 600px) {
  .cta-section .cta-buttons {
    grid-template-columns:
      minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    width: min(100%, 980px) !important;
    max-width: none !important;
  }
  .cta-section .instagram-btn,
  .cta-section .youtube-btn {
    justify-content: center !important;
  }}/* ============================================================
   VIDEO LIBRARY cards — white background, larger dark type,
   and "X of N videos / Load more" pagination control.
   ============================================================ *//* (3) White cards */




.fl-library-card {
  background: #ffffff !important;
}/* (2) Larger, dark card typography */


.fl-library-title {
  font-size: clamp(1.55rem, 2.2vw, 2.05rem) !important;
  color: #163c2f !important;
  line-height: 1.18 !important;
}
.fl-library-details-text {
  font-size: clamp(1.02rem, 1.25vw, 1.16rem) !important;
  color: #163c2f !important;
}
.fl-library-chip {
  font-size: 0.95rem !important;
}
.fl-library-details-label {
  font-size: 0.84rem !important;
}/* (4) Load more control (Amazon "Subscribe & Save" style) */


.fl-library-loadmore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.6rem, 1.2vw, 0.9rem);
  margin-top: clamp(1.4rem, 2.6vw, 2.1rem);
  text-align: center;
}
.fl-library-loadmore__count {
  margin: 0;
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  font-weight: 600;
  color: #163c2f;
  letter-spacing: 0.01em;
}
.fl-library-loadmore__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.6rem 1.8rem;
  border: 1px solid rgba(26, 58, 46, 0.55);
  border-radius: 999px;
  background: #ffffff;
  color: #163c2f;
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.fl-library-loadmore__btn:hover {
  background: #1a3a2e;
  border-color: #1a3a2e;
  color: #f4f1e8;
  box-shadow: 0 8px 18px rgba(26, 58, 46, 0.16);
  transform: translateY(-1px);
}
.fl-library-loadmore__btn:focus-visible {
  outline: 3px solid rgba(201, 169, 97, 0.75);
  outline-offset: 3px;
}/* ============================================================
   VIDEO LIBRARY range pagination chips (Show 1-10 / 11-20 / All)
   Replaces the bottom "load more" control. Styled to match the
   category filter buttons, placed in a row below the grid.
   ============================================================ */


.fl-library-loadmore { display: none !important; }/* legacy control retired */ 

.fl-library-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  margin: 1.15rem auto 0;
}
.fl-library-pages[hidden] {
  display: none;
}
.fl-library-page-btn {
  appearance: none;
  border: 1px solid rgba(201, 169, 97, 0.35);
  background: rgba(255, 255, 255, 0.72);
  color: var(--forest-dark);
  border-radius: 999px;
  padding: 0.7rem 1rem;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.fl-library-page-btn:hover {
  transform: translateY(-1px);
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.92);
}
.fl-library-page-btn.is-active {
  background: var(--forest-deep);
  color: var(--cream);
  border-color: var(--forest-deep);
}
.fl-library-page-btn:focus-visible {
  outline: 3px solid rgba(201, 169, 97, 0.75);
  outline-offset: 3px;
}/* ============================================================
   Footer stripe — font as large as master description text.
   ============================================================ */


.footer-line {
  font-size: clamp(1.08rem, 1.4vw, 1.24rem) !important;
}/* ============================================================
   "Parents & Educators: Start Here" — the four mini cards get a
   solid white background, matching the video-library cards.
   ============================================================ */


.start-panel-card,
.start-panel-card:hover,
.start-panel-card:focus-visible {
  background: #ffffff !important;
}/* ============================================================
   Guided Reflections illustration — enlarge to fill the card
   width (was capped at 760px, leaving wide empty margins).
   ============================================================ */


.guided-reflections__image {
  width: min(100%, 1040px) !important;
}/* ============================================================
   Guided Reflections image — full-bleed cover like Story Weaver.
   Fills the card left-to-right and down to the bottom edge; the
   section's overflow:hidden + radius clips the rounded corners.
   ============================================================ */


.guided-reflections__image-wrap {
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  background: transparent !important;
  width: 100% !important;
}
.guided-reflections__image {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center bottom !important;
  display: block !important;
}/* ============================================================
   Guided Reflections — CTA overlaps the faded top of the
   illustration. Controlled visual overlap, NOT vertical
   separation: content stays in normal flow, the image is pulled
   upward with a negative margin, and the CTA layers above it.
   No fixed height / min-height / spacer / space-between.
   ============================================================ */


.guided-reflections-section {
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.guided-reflections__content {
  position: relative !important;
  z-index: 2 !important;
  padding-bottom: 0 !important; /* remove reserved gap under the CTA */
}
.guided-reflections__button {
  position: relative !important;
  z-index: 3 !important; /* CTA stays above the illustration */
}
.guided-reflections__image-wrap {
  position: relative !important;
  z-index: 1 !important;
  padding: 0 !important;
  margin: -48px 0 0 0 !important; /* pull illustration up behind the CTA */
}
.guided-reflections__image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  object-fit: fill !important; /* height:auto => natural ratio, no crop */
  /* Fade the upper edge so the watercolor melts up behind the CTA. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 6px, #000 118px);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 6px, #000 118px);
}/* ============================================================
   Guided Reflections — gentle CTA/illustration overlap.
   Small negative margin for a subtle overlap; show the FULL
   illustration (no crop) so it fits the frame with breathing
   room beneath it. Panel height follows the natural image.
   ============================================================ */


.guided-reflections__image-wrap {
  margin: -22px 0 0 0 !important; /* subtle overlap behind the CTA */
}
.guided-reflections__image {
  height: auto !important;
  aspect-ratio: auto !important;   /* natural ratio -> full image, no crop */
  object-fit: contain !important;
  object-position: center top !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 6px, #000 96px) !important;
  mask-image: linear-gradient(to bottom, transparent 0, transparent 6px, #000 96px) !important;
}/* ============================================================
   Guided Reflections — match redesign: soft watercolor bears
   shown wide, with the CTA overlapping the illustration's
   faded top. The asset is a transparent watercolor PNG (organic
   deckle edges), so no CSS mask is needed. Full image, no crop.
   ============================================================ */


.guided-reflections__image-wrap {
  padding: 0 !important;
  margin: -40px 0 0 0 !important;  /* CTA overlaps the faded top */
  width: 100% !important;
}
.guided-reflections__image {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: auto !important;   /* full image, no crop */
  object-fit: contain !important;
  object-position: center top !important;
  -webkit-mask-image: none !important;  /* image already has soft alpha edges */
  mask-image: none !important;
}/* ============================================================
   Header adjustments:
   1) Ornament divider uses welcome-vignette.svg (replaces the
      inline black leaf paths). Size both dividers' image.
   2) Titles capped at 3rem (handled in tokens above).
   3) Sub-titles (descriptions) bolder -> 600.
   ============================================================ */


.fl-ornament-divider__img {
  display: block !important;
  width: min(34vw, 320px) !important;
  height: auto !important;
  margin: 0 auto !important;
  opacity: 1 !important;
}
.fl-ornament-divider {
  height: auto !important;  /* let the SVG define its own height */
}/* Sub-titles / descriptions: bolder */.start-panel__intro,
#featured .featured-video__subtitle,
#guided-reflections .guided-reflections__copy,
.fl-library-intro,
#feedback .fl-feedback-intro,
.cta-section p {
  font-weight: 600 !important;
}/* ============================================================
   Batch adjustments
   ============================================================ *//* 1. Menu button: white background */




.site-menu-toggle {
  background: #ffffff !important;
}/* 5. Feedback vignette: show the welcome-vignette shape clearly,
   not constrained or clipped by the legacy divider sizing. */


#feedback .fl-feedback-divider {
  width: auto !important;
  height: auto !important;
}
#feedback .fl-feedback-divider .fl-ornament-divider__img {
  width: min(34vw, 320px) !important;
  height: auto !important;
  margin: 0 auto !important;
}/* 6. Join CTA: less spacing after the sub-title */


.cta-section p {
  margin-bottom: clamp(1.15rem, 2.2vw, 1.75rem) !important;
}/* Menu dropdown panel: solid white for contrast (matches toggle) */


.site-menu-panel {
  background: #ffffff !important;
}/* Menu panel: narrower so it isn't so wide. Arrows stay right-
   aligned (space-between); width fits the longest label. */



.site-menu-panel {
  width: min(15.5rem, calc(100vw - 2rem)) !important;
}
@media (max-width: 640px) {
  .site-menu-panel {
    width: min(14.5rem, calc(100vw - 1.5rem)) !important;
  }}
.site-menu-link__label > span {
  white-space: nowrap !important;
}/* Ornament divider now holds a single <img> (welcome-vignette.svg),
   not the old line|leaf|line trio. The leftover 3-column grid pushed
   the image into the left column. Center it and make it a bit smaller. */


.fl-ornament-divider {
  display: flex !important;
  grid-template-columns: none !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.fl-ornament-divider__img {
  width: min(28vw, 230px) !important; /* a bit smaller, centered */
  height: auto !important;
  margin: 0 auto !important;
}/* ============================================================
   Ornament dividers (Start Here + Feedback): unify size and
   centering. High-specificity to beat legacy per-divider rules
   (.start-panel__divider img = min(34vw,390px); #feedback
   .fl-feedback-divider width:auto). Single <img> child centered.
   ============================================================ */


.start-panel__divider.fl-ornament-divider,
#feedback .fl-feedback-divider.fl-ornament-divider {
  display: flex !important;
  grid-template-columns: none !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.start-panel__divider.fl-ornament-divider .fl-ornament-divider__img,
#feedback .fl-feedback-divider.fl-ornament-divider .fl-ornament-divider__img,
.start-panel__divider img,
#feedback .fl-feedback-divider img {
  display: block !important;
  width: min(30vw, 210px) !important;
  height: auto !important;
  margin: 0 auto !important;
}/* ==================================================================
   VIDEO LIBRARY — COMPACT FILTER TOOLBAR + RADIO POPOVER
   Added 2026-06-15. Replaces the retired category-pill / More-panel UI.
   Component namespace: .fl-library-controls / -toolbar / -filter-trigger
   / -active-filters / -active-chip / -result-count / -filter-popover
   / -filter-group / -radio / -filter-actions.
   Placed last in source order to win by cascade against historical
   library rules without adding another !important override layer.
   ================================================================== *//* Search field: search icon at left, clear button at right. */




.fl-library-search-field {
  display: flex;
  align-items: center;
}
.fl-library-search-icon {
  position: absolute;
  left: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--moss);
  pointer-events: none;
}
.fl-library-search-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.fl-library-search-input {
  padding-left: 3rem;
  min-height: 48px;
}/* Positioned wrapper so the popover can overlap the grid without
   pushing it down, and so the grid/chips share one column. */


.fl-library-controls {
  position: relative;
}/* Primary toolbar row: Filters button first, search second, both on one
   line at desktop widths and aligned with the video cards. The popover
   is a positioned child of .fl-library-controls and anchors under the
   button. Active chips live on their own row below (not in this flex
   row) so they never steal width from the search field. *//* Controls block: the common parent of the Filters button, search field,
   and active-filter chips. Its margin-bottom is the single source of the
   gap between the whole controls area and the first video card (~24px
   desktop). The popover is absolutely positioned inside the nested
   .fl-library-toolbar-primary, so this margin shifts only the cards
   downward and never separates the pointer from the button. */



.fl-library-controls-block {
  position: relative;
  width: 100%;
  margin-bottom: 1.5rem;
}
.fl-library-toolbar-primary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0 0 0.65rem;
}/* --- Filters trigger button (forest green, cream text) --- */


.fl-library-filter-trigger {
  appearance: none;
  flex: 0 0 auto;
  min-width: 130px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.62rem 1rem;
  border: 1px solid var(--forest-deep);
  border-radius: 13px;
  background: var(--forest-deep);
  color: var(--cream);
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.fl-library-filter-trigger:hover {
  background: var(--forest-dark);
  border-color: var(--forest-dark);
}
.fl-library-filter-trigger:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.fl-library-filter-trigger__icon,
.fl-library-filter-trigger__caret {
  display: inline-flex;
  align-items: center;
}
.fl-library-filter-trigger__icon {
  width: 1.2rem;
  height: 1.2rem;
}
.fl-library-filter-trigger__icon svg { width: 100%; height: 100%; fill: currentColor; }
.fl-library-filter-trigger__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fl-library-filter-trigger__caret {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}
.fl-library-filter-trigger__caret svg { width: 100%; height: 100%; }
.fl-library-filter-trigger[aria-expanded="true"] .fl-library-filter-trigger__caret {
  transform: rotate(180deg);
}/* --- Active filter chips (cream pills, gold border, forest text) --- */


.fl-library-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
}
.fl-library-active-filters[hidden] { display: none; }
.fl-library-active-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 32px;
  padding: 0.28rem 0.72rem;
  border: 1px solid rgba(201, 169, 97, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--forest-deep);
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.fl-library-active-chip:hover {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.98);
}
.fl-library-active-chip:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.fl-library-active-chip__x {
  font-size: 1.1rem;
  line-height: 1;
  color: var(--forest-deep);
}/* --- Result count (right aligned, forest green, no wrap) --- */


.fl-library-result-count {
  margin: 0;
  flex: 0 0 auto;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--forest-deep);
  white-space: nowrap;
}/* --- Filter popover (overlaps grid; does not push it down) --- */


.fl-library-filter-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 40;
  width: min(384px, calc(100vw - 3rem));
  padding: 1.25rem 1.35rem 1.1rem;
  background: var(--cream);
  border: 1px solid rgba(201, 169, 97, 0.55);
  border-radius: 16px;
  box-shadow: 0 14px 38px rgba(26, 58, 46, 0.16);
  box-sizing: border-box;
}
.fl-library-filter-popover[hidden] { display: none; }
.fl-library-filter-popover__notch {
  position: absolute;
  top: -8px;
  left: 28px;
  width: 16px;
  height: 16px;
  background: var(--cream);
  border-left: 1px solid rgba(201, 169, 97, 0.55);
  border-top: 1px solid rgba(201, 169, 97, 0.55);
  transform: rotate(45deg);
}
.fl-library-filter-popover__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.9rem;
}
.fl-library-filter-popover__heading {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--forest-dark);
}
.fl-library-filter-popover__header .fl-library-result-count {
  margin: 0;
  margin-left: auto;
}
.fl-library-filter-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1.4rem;
  align-items: start;
}
.fl-library-filter-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.fl-library-filter-group {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.fl-library-filter-group__legend {
  padding: 0;
  margin: 0 0 0.4rem;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--forest-deep);
}/* --- Native radio rows --- */


.fl-library-radio {
  display: grid;
  grid-template-columns:
    1.25rem
    minmax(0, 1fr)
    minmax(1.75rem, max-content);
  align-items: center;
  column-gap: 0.75rem;
  width: 100%;
  padding: 0.22rem 0;
  min-height: 36px;
  line-height: 1.2;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  color: var(--forest-dark);
  cursor: pointer;
}
.fl-library-radio__input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  justify-self: start;
  border: 2px solid rgba(45, 90, 74, 0.55);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: border-color 0.15s ease;
}
.fl-library-radio__label {
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.2;
  white-space: nowrap;
}
.fl-library-radio__count {
  justify-self: end;
  min-width: 1.75rem;
  text-align: right;
  font-size: 0.78rem;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--moss);
}
.fl-library-radio__input::before {
  content: "";
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  transform: scale(0);
  background: var(--forest-deep);
  transition: transform 0.12s ease;
}
.fl-library-radio input[type="radio"]:checked {
  border-color: var(--forest-deep);
}
.fl-library-radio input[type="radio"]:checked::before {
  transform: scale(1);
}
.fl-library-radio input[type="radio"]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}/* The visually-styled control span is decorative; the real input above
   carries the state. Hide the span (kept for markup symmetry). */

.fl-library-radio__control { display: none; }
.fl-library-radio:hover input[type="radio"]:not(:checked) {
  border-color: var(--gold);
}/* --- Popover actions --- */


.fl-library-filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 0.95rem;
  border-top: 1px solid rgba(201, 169, 97, 0.4);
}
.fl-library-filter-clear {
  appearance: none;
  border: 0;
  background: 0 0;
  padding: 0.5rem 0.1rem;
  min-height: 44px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--forest-deep);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fl-library-filter-clear:hover { color: var(--forest-dark); }
.fl-library-filter-clear:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  text-decoration: none;
}
.fl-library-filter-apply {
  appearance: none;
  border: 1px solid var(--forest-deep);
  background: var(--forest-deep);
  color: var(--cream);
  min-height: 44px;
  padding: 0.6rem 1.5rem;
  border-radius: 12px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.fl-library-filter-apply:hover {
  background: var(--forest-dark);
  border-color: var(--forest-dark);
}
.fl-library-filter-apply:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}/* --- Age tag on cards (informational; no removal control) --- */


.fl-library-age-tag {
  display: inline-flex;
  align-items: center;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(45, 90, 74, 0.28);
  background: rgba(45, 90, 74, 0.08);
  color: var(--forest-deep);
}/* The video-library section is clamped with overflow:hidden elsewhere
   (rounded-card crop). The filter popover must overlap the grid and
   escape that clip, so allow overflow specifically here. Cards remain
   inside the section padding, so nothing else visibly spills. Higher
   specificity + later source order beats the historical override
   without adding a competing !important on the shared selector. */


#video-library.fl-library-section.fl-library-section {
  overflow: visible !important;
}/* ---------- Mobile / tablet: full-width anchored panel <769px ---------- */


@media (max-width: 768px) {
  .fl-library-toolbar-primary {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .fl-library-search {
    order: 1;
    width: 100%;
  }
  .fl-library-filter-trigger {
    order: 2;
    align-self: flex-start;
    min-width: 0;
  }
  .fl-library-filter-popover {
    left: 0;
    right: 0;
    width: auto;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    max-height: min(72vh, 560px);
    max-height: min(72dvh, 560px);
    overflow: hidden;
  }
  .fl-library-filter-popover__notch {
    left: 24px;
  }
  .fl-library-filter-columns {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .fl-library-filter-popover__header {
    flex-wrap: wrap;
    gap: 0.15rem 1rem;
  }
  .fl-library-controls-block {
    margin-bottom: 1.125rem;
  }/* --- Mobile filter ordering: flatten col wrappers, explicit order --- *//* display:contents dissolves .fl-library-filter-col so the four
     fieldsets become direct grid children of .fl-library-filter-columns,
     making CSS order work across both source columns.               */

  
  
  .fl-library-filter-col {
    display: contents;
  }
  .fl-library-filter-group--age        { order: 1; }
  .fl-library-filter-group--story-types { order: 2; }
  .fl-library-filter-group--resources  { order: 3; }
  .fl-library-filter-group--themes     { order: 4; }/* The header and action footer are fixed panel regions. Only the
     option list scrolls, so labels can never pass beneath the buttons. */

  
  .fl-library-filter-popover__header {
    flex: 0 0 auto;
  }
  .fl-library-filter-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }
  .fl-library-filter-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    padding-right: 0.15rem;
    padding-bottom: 0.85rem;
  }
  .fl-library-filter-actions {
    position: static;
    flex: 0 0 auto;
    z-index: auto;
    margin-top: 0;
    padding-top: 0.85rem;
    background: var(--cream);
    box-shadow: none;
  }}/* ---------- Reduced motion ---------- */


@media (prefers-reduced-motion: reduce) {
  .fl-library-filter-trigger__caret,
  .fl-library-radio input[type="radio"],
  .fl-library-radio input[type="radio"]::before,
  .fl-library-active-chip,
  .fl-library-filter-apply,
  .fl-library-filter-trigger {
    transition: none;
  }}/* ---------- Forced colors (high-contrast) ---------- */


@media (forced-colors: active) {
  .fl-library-filter-trigger,
  .fl-library-filter-apply {
    border: 1px solid ButtonText;
  }
  .fl-library-filter-popover {
    border: 1px solid CanvasText;
  }
  .fl-library-active-chip {
    border: 1px solid ButtonText;
  }
  .fl-library-radio input[type="radio"] {
    border-color: ButtonText;
  }
  .fl-library-radio input[type="radio"]:checked::before {
    background: Highlight;
  }
  .fl-library-radio input[type="radio"]:checked {
    border-color: Highlight;
  }
  .fl-library-age-tag {
    border: 1px solid CanvasText;
  }
  .fl-library-filter-trigger:focus-visible,
  .fl-library-filter-apply:focus-visible,
  .fl-library-filter-clear:focus-visible,
  .fl-library-active-chip:focus-visible,
  .fl-library-radio input[type="radio"]:focus-visible {
    outline: 2px solid Highlight;
  }}/* ==================================================================
   VIDEO LIBRARY — BATCH 9: popover stacking + faceted availability
   + zero-result empty state. Added 2026-06-15 (v=20260615b).
   Placed last in source order to win by cascade without new
   !important layers on shared selectors.
   ================================================================== *//* --- Issue 1: open-state stacking above the next section --------- *//* The Video Library establishes its own stacking context only while
   the filter panel is open, lifting the whole section (and therefore
   the absolutely-positioned popover) above the following Learning
   Gardens section. When closed it returns to the normal flow so it
   never sits above the menu, back-to-top, or other global overlays. */





#video-library {
  position: relative;
}
#video-library.is-filter-open {
  z-index: 20;
}
#video-library .fl-library-filter-popover {
  z-index: 30;
}/* --- Issue 2: per-option counts + unavailable (disabled) rows ---- */


.fl-library-radio.is-unavailable {
  cursor: not-allowed;
}
.fl-library-radio.is-unavailable .fl-library-radio__label {
  color: rgba(26, 58, 46, 0.4);
}
.fl-library-radio.is-unavailable .fl-library-radio__count {
  color: rgba(26, 58, 46, 0.4);
}
.fl-library-radio.is-unavailable input[type="radio"] {
  border-color: rgba(45, 90, 74, 0.25);
  cursor: not-allowed;
}/* No hover highlight on unavailable rows. */

.fl-library-radio.is-unavailable:hover input[type="radio"]:not(:checked) {
  border-color: rgba(45, 90, 74, 0.25);
}
.fl-library-radio input[type="radio"]:disabled {
  cursor: not-allowed;
}/* --- Zero-result applied empty state ----------------------------- */


.fl-library-empty__text {
  margin: 0 0 1rem;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--moss);
}
.fl-library-empty__clear {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 1.3rem;
  border: 1px solid rgba(26, 58, 46, 0.45);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--forest-deep);
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.fl-library-empty__clear:hover {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
  color: var(--cream);
}
.fl-library-empty__clear:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fl-library-empty__clear {
    transition: none;
  }}/* Forced-colors: ensure disabled radios and the clear button remain
   distinguishable without relying on opacity/color alone. */


@media (forced-colors: active) {
  .fl-library-radio.is-unavailable input[type="radio"] {
    border-color: GrayText;
  }
  .fl-library-radio.is-unavailable .fl-library-radio__label,
  .fl-library-radio.is-unavailable .fl-library-radio__count {
    color: GrayText;
  }
  .fl-library-empty__clear {
    border: 1px solid ButtonText;
  }
  .fl-library-empty__clear:focus-visible {
    outline: 2px solid Highlight;
  }}/* ==================================================================
   VIDEO LIBRARY — BATCH 11: search aligns with cards + count column
   keeps story-type labels on one line. Added 2026-06-15 (v=...d).
   Placed last so it wins by cascade without new !important layers
   except where overriding an existing historical !important.
   ================================================================== *//* Search sits in the primary toolbar row beside the Filters button and
   flexes to fill the remaining width, so its right edge aligns with the
   video cards. min-width:0 lets it shrink instead of overflowing. The
   margin override clears the historical auto side margins (which were
   set with !important, so this must match). */




.fl-library-search {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
  margin: 0 !important;
}
.fl-library-search-field,
.fl-library-search-input {
  width: 100%;
}/* 4. Slightly wider desktop panel (420–440px) so option rows have room.
/* 4. Wider desktop panel (470px) + EQUAL filter columns so the long
   left-column labels ("Reflection Guides", "Wonder & Nature") have room
   and never overflow into the count column. Desktop-only so the mobile
   full-width single-column layout (defined in the max-width:768px block
   above) is never overridden by later source order. */


@media (min-width: 769px) {
  .fl-library-filter-popover {
    width: min(470px, calc(100vw - 3rem));
  }
  .fl-library-filter-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
  }}/* (Batch 13) The duplicate .fl-library-radio grid + .fl-library-radio__text
   rules that previously lived here were removed. They referenced a
   .fl-library-radio__text class that no longer exists in the markup (the
   label is .fl-library-radio__label) and their column-gap/grid-template
   overrode the authoritative rule above, collapsing the radio-to-label
   gap. The single source of truth is now the .fl-library-radio block
   defined earlier (1.25rem | 1fr | 1.75rem, column-gap 0.7rem). *//* ==================================================================
   MOBILE FEATURE CARDS: give Guided Reflections and Fables Guide more
   breathing room without changing the Story Weaver mobile layout.
   Added 2026-06-16.
   ================================================================== */





@media (max-width: 520px) {/* Guided Reflections: smaller one-line title, calmer copy measure,
     and a lighter CTA/image overlap. */
  
  #guided-reflections .guided-reflections__content {
    padding: 1.45rem 0.85rem 0.45rem !important;
  }
  #guided-reflections .guided-reflections__title {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 0.72rem !important;
    font-size: clamp(1.95rem, 8.8vw, 2.1rem) !important;
    line-height: 1.04 !important;
    letter-spacing: 0.018em !important;
    white-space: nowrap !important;
  }
  #guided-reflections .guided-reflections__copy {
    max-width: 31ch !important;
    font-size: 1rem !important;
    line-height: 1.48 !important;
  }
  #guided-reflections .guided-reflections__button {
    width: min(100%, 18rem) !important;
    margin-top: 1.05rem !important;
    padding: 0.7rem 0.8rem !important;
  }
  #guided-reflections .guided-reflections__image-wrap {
    margin-top: -18px !important;
  }/* Keep the floating control out of the title area on narrow phones. */

  
  .back-to-top-link {
    right: 0.25rem !important;
    bottom: 0.55rem !important;
    width: 2.35rem !important;
    height: 2.35rem !important;
  }
  .back-to-top-link .social-icon {
    width: 1.15rem !important;
    height: 1.15rem !important;
  }}/* ----------------------------------------------------------------------------
   Fables Guide desktop scale.
   The Fables Guide section was capped at --fl-card-visual-width (976px), so the
   child rendered ~2/3 of Alex's intended ~1100px panel. Widen ONLY this section
   to fill its container. The section's .container ancestor is 1040px wide, so we
   target min(100%, 1040px): matching Alex's larger scale without overflowing the
   container (a 1180px value would overflow here). Scoped to #fables-guide /
   #fables-guide-bot; other bots keep their 976px treatment. Desktop only. */


@media (min-width: 769px) {}/* ==================================================================
   ALEX AUDIT ADJUSTMENTS — 2026-06-18
   ================================================================== *//* Menu correction: keep the compact content-sized panel, but give the
   illustrated icons enough visual weight while preserving every text label. */




.site-menu-panel {
  width: max-content !important;
  max-width: calc(100vw - 1.5rem) !important;
}
.site-menu-list a {
  min-height: 38px !important;
  font-weight: 800 !important;
}
.site-menu-link__label {
  gap: 0.46rem !important;
  white-space: nowrap !important;
}
.site-menu-link__label > span:last-child {
  white-space: nowrap !important;
}
.site-menu-list a::after {
  flex: 0 0 1em !important;
}
.site-menu-link__icon {
  flex-basis: 28px !important;
}
.site-menu-link__icon,
.site-menu-link__icon svg,
.site-menu-link__svg,
.site-menu-link__icon img,
.site-menu-link__img {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
}
.site-menu-toggle__icon {
  width: 1.2rem !important;
  height: 0.9rem !important;
}
.site-menu-toggle__icon span {
  height: 2px !important;
}
.site-menu-toggle[aria-expanded="true"] .site-menu-toggle__icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg) !important;
}
.site-menu-toggle[aria-expanded="true"] .site-menu-toggle__icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg) !important;
}

@media (max-width: 420px) {
  .site-menu-panel {
    width: max-content !important;
    max-width: calc(100vw - 1.5rem) !important;
  }
  .site-menu-link__icon {
    flex-basis: 26px !important;
  }
  .site-menu-link__icon,
  .site-menu-link__icon svg,
  .site-menu-link__svg,
  .site-menu-link__icon img,
  .site-menu-link__img {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
  }}/* Feedback: increase the two requested prompts while preserving responsive fit. */


#feedback .fl-feedback-label {
  font-size: clamp(1.22rem, 1.75vw, 1.48rem) !important;
  line-height: 1.3 !important;
}
#feedback .fl-feedback-contact-text {
  font-size: clamp(1.18rem, 1.55vw, 1.38rem) !important;
  line-height: 1.3 !important;
}
@media (max-width: 760px) {
  #feedback .fl-feedback-label {
    font-size: clamp(1.12rem, 4.2vw, 1.28rem) !important;
  }
  #feedback .fl-feedback-contact-text {
    font-size: clamp(1.08rem, 4vw, 1.22rem) !important;
  }}/* ============================================================
   ALEX AUDIT 2026-06-18 — GUIDED REFLECTIONS PANEL REDESIGN
   Match the approved light storybook panel: title, CTA, centered
   watercolor illustration, then the two-line explanatory copy.
   This final scoped override intentionally replaces the older
   dark/full-bleed Guided Reflections treatments above.
   ============================================================ */




#guided-reflections.guided-reflections-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: min(100%, var(--fl-card-visual-width, 976px)) !important;
  max-width: var(--fl-card-visual-width, 976px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 2.5rem auto 4rem !important;
  padding: clamp(2rem, 4vw, 2.75rem) clamp(1.25rem, 5vw, 4.5rem) clamp(1.8rem, 3.5vw, 2.4rem) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border: 2px solid rgba(201, 169, 97, 0.78) !important;
  border-radius: 30px !important;
  background: linear-gradient(100deg, #fffdf8 0%, #fffaf0 56%, #fdf4df 100%) !important;
  box-shadow: 0 8px 24px rgba(26, 58, 46, 0.05) !important;
}

#guided-reflections.guided-reflections-section::before,
#guided-reflections .guided-reflections__title::before {
  display: none !important;
}

#guided-reflections .guided-reflections__content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

#guided-reflections .guided-reflections__title {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  color: var(--forest-dark) !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(2.45rem, 5.2vw, 3rem) !important;
  font-weight: 400 !important;
  line-height: 1.04 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  white-space: normal !important;
}

#guided-reflections .guided-reflections__button {
  position: relative !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: min(100%, 294px) !important;
  min-height: 44px !important;
  margin: 1.15rem 0 0 !important;
  padding: 0.72rem 1.55rem !important;
  border: 1px solid rgba(201, 169, 97, 0.82) !important;
  border-radius: 999px !important;
  background: #1f6243 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  font-family: "Nunito Sans", sans-serif !important;
  font-size: clamp(0.98rem, 1.8vw, 1.08rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease !important;
}

#guided-reflections .guided-reflections__button:hover,
#guided-reflections .guided-reflections__button:focus-visible {
  background: var(--forest-dark) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 7px 16px rgba(26, 58, 46, 0.16) !important;
}

#guided-reflections .guided-reflections__button:focus-visible {
  outline: 3px solid rgba(201, 169, 97, 0.72) !important;
  outline-offset: 3px !important;
}

#guided-reflections .guided-reflections__image-wrap {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: min(70%, 560px) !important;
  margin: 1.15rem auto 0.7rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

#guided-reflections .guided-reflections__image {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

#guided-reflections .guided-reflections__copy {
  display: block !important;
  width: 100% !important;
  max-width: 54rem !important;
  margin: 0.15rem auto 0 !important;
  padding: 0 !important;
  color: var(--forest-dark) !important;
  font-family: "Nunito Sans", sans-serif !important;
  font-size: clamp(1rem, 2vw, 1.18rem) !important;
  font-weight: 400 !important;
  line-height: 1.48 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
}

#guided-reflections .guided-reflections__copy span {
  display: block !important;
  white-space: normal !important;
}/* Phone-only copy is intentionally shorter. Keep the full editorial copy
   on tablets and larger screens. */


#guided-reflections .guided-reflections__copy--mobile {
  display: none !important;
}

@media (max-width: 760px) {
  #guided-reflections.guided-reflections-section {
    width: var(--fl-card-visual-width, calc(100vw - 2rem)) !important;
    max-width: var(--fl-card-visual-width, calc(100vw - 2rem)) !important;
    margin-top: 2rem !important;
    margin-bottom: 3rem !important;
    padding: 1.65rem 1rem 1.45rem !important;
    border-radius: 24px !important;
  }

  #guided-reflections .guided-reflections__title {
    font-size: clamp(2.15rem, 10vw, 2.55rem) !important;
  }

  #guided-reflections .guided-reflections__button {
    min-width: 0 !important;
    width: min(100%, 294px) !important;
    margin-top: 1rem !important;
    padding-inline: 1.1rem !important;
  }

  #guided-reflections .guided-reflections__image-wrap {
    width: min(100%, 560px) !important;
    margin-top: 1rem !important;
    margin-bottom: 0.75rem !important;
  }

  #guided-reflections .guided-reflections__copy {
    max-width: 34rem !important;
    font-size: clamp(0.98rem, 4.2vw, 1.08rem) !important;
    line-height: 1.5 !important;
  }}


@media (max-width: 520px) {
  #guided-reflections .guided-reflections__copy--desktop {
    display: none !important;
  }

  #guided-reflections .guided-reflections__copy--mobile {
    display: block !important;
  }}/* ============================================================
   HELP + GUIDED REFLECTIONS PANEL ALIGNMENT — June 19, 2026
   Match the Parents & Educators panel's title typography, title-to-CTA
   rhythm, and warm cream background. The Fables Guide artwork is
   cropped inside a real media frame, rather than pulled upward with a
   negative margin, so the CTA keeps a small intentional breathing gap.
   ============================================================ *//* Exact Start Here background, overriding the older alternating-panel tint. */#guided-reflections.guided-reflections-section {
  background: var(--fl-light-card-bg) !important;
}/* Use the same title face and metrics as Parents & Educators: Start Here. */.start-panel__title,
#guided-reflections .guided-reflections__content .guided-reflections__title {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: var(--fl-home-title-size) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  line-height: var(--fl-home-title-line-height) !important;
  letter-spacing: var(--fl-home-title-tracking) !important;
  color: var(--fl-title-on-light) !important;
  text-align: center !important;
  text-shadow: none !important;
}/* One shared title-to-button gap, with no extra flex-gap or button margin. */#guided-reflections .guided-reflections__content {
  gap: 0 !important;
}#guided-reflections .guided-reflections__content .guided-reflections__title {
  margin: 0 0 clamp(0.42rem, 0.85vw, 0.7rem) !important;
}#guided-reflections .guided-reflections__button {
  margin-top: 0 !important;
}

@media (max-width: 760px) {}/* ==================================================================
   ALEX MENU ICON UPDATE — 2026-06-23
   Alex's revised illustrations are intentionally larger. Keep them within
   the approved 40–44px range while preserving single-line labels and the
   compact hover treatment. Desktop/tablet uses 42px; narrow phones use 40px.
   ================================================================== */



.site-menu-panel {
  width: min(18.5rem, calc(100vw - 1.5rem)) !important;
  max-width: none !important;
  padding: 0.42rem !important;
}

.site-menu-list {
  gap: 0.06rem !important;
}

.site-menu-list a {
  min-height: 48px !important;
  padding: 0.16rem 0.72rem 0.16rem 0.5rem !important;
  gap: 0.62rem !important;
  border-radius: 9px !important;
  font-size: 0.9rem !important;
  line-height: 1.15 !important;
  transform: none !important;
}

.site-menu-link__label {
  flex: 1 1 auto !important;
  gap: 0.62rem !important;
}

.site-menu-link__label > span:last-child {
  white-space: nowrap !important;
}

.site-menu-list a::after,
.site-menu-reading-btn::after {
  flex: 0 0 1rem !important;
  width: 1rem !important;
  height: 1rem !important;
  margin-left: auto !important;
}

.site-menu-link__icon {
  flex: 0 0 42px !important;
}

.site-menu-link__icon,
.site-menu-link__icon svg,
.site-menu-link__svg,
.site-menu-link__icon img,
.site-menu-link__img {
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
}/* Hover stays inside the existing row box instead of adding a large
   external outline that makes the option appear taller than its neighbours. */


.site-menu-list a:hover {
  background: rgba(201, 169, 97, 0.14) !important;
  color: var(--forest-deep) !important;
  outline: 0 !important;
  box-shadow: inset 0 0 0 1.5px rgba(191, 153, 31, 0.72) !important;
  transform: none !important;
}

.site-menu-list a:focus-visible {
  background: rgba(201, 169, 97, 0.14) !important;
  color: var(--forest-deep) !important;
  outline: 2px solid rgba(191, 153, 31, 0.92) !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 420px) {
  .site-menu-panel {
    width: calc(100vw - 1.5rem) !important;
    max-width: calc(100vw - 1.5rem) !important;
    padding: 0.38rem !important;
  }

  .site-menu-list a {
    min-height: 46px !important;
    padding: 0.14rem 0.58rem 0.14rem 0.42rem !important;
    gap: 0.48rem !important;
    font-size: 0.88rem !important;
  }

  .site-menu-link__label {
    gap: 0.5rem !important;
  }

  .site-menu-link__icon {
    flex: 0 0 40px !important;
  }

  .site-menu-link__icon,
  .site-menu-link__icon svg,
  .site-menu-link__svg,
  .site-menu-link__icon img,
  .site-menu-link__img {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }}/* Guided Reflections: use the same branded textured CTA treatment as
   Story Weaver instead of the later flat-green override. */


#guided-reflections .guided-reflections__button {
  background:
    linear-gradient(
      180deg,
      rgba(45, 90, 74, 0.82) 0,
      rgba(22, 80, 47, 0.95) 100%
    ),
    image-set(
      url(assets/welcome-card-button-background.webp) type("image/webp"),
      url(assets/welcome-card-button-background.png) type("image/png")
    ) !important;
  background-position: center center, center center !important;
  background-size: auto, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  color: var(--cream) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  box-shadow:
    inset 0 0 0 1px rgba(244, 241, 232, 0.12),
    0 8px 18px rgba(26, 58, 46, 0.16) !important;
}
#guided-reflections .guided-reflections__button:hover,
#guided-reflections .guided-reflections__button:focus-visible {
  background:
    linear-gradient(
      180deg,
      rgba(53, 106, 87, 0.86) 0,
      rgba(29, 92, 57, 0.96) 100%
    ),
    image-set(
      url(assets/welcome-card-button-background.webp) type("image/webp"),
      url(assets/welcome-card-button-background.png) type("image/png")
    ) !important;
  background-position: center center, center center !important;
  background-size: auto, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  color: var(--cream) !important;
}/* Match the Video Library intro's final 600 weight. */


#guided-reflections .guided-reflections__copy {
  font-weight: 600 !important;
}/* The collapsed card now renders its existing short subtitle. Keep it
   visually secondary and compact before the metadata/actions row. */


#video-library .fl-library-subtitle {
  color: var(--moss);
  font-weight: 500;
}/* Filters and Search are one control family, so both use the same pill. */


#video-library .fl-library-filter-trigger {
  border-radius: 999px;
}/* ═══════════════════════════════════════════════════════════════════
   PHASE 1 MOBILE PARENTS & EDUCATORS — 2026-06-23
   Mobile-only rebuild of the #welcome "Parents & Educators" panel to a
   compact 2×2 card grid matching the approved reference. Every rule is
   scoped under #welcome and confined to max-width:720px so desktop /
   tablet (≥721px) styling is untouched. ID-scoped selectors + !important
   defeat the layered legacy .start-panel overrides above.
   ═══════════════════════════════════════════════════════════════════ *//* Mobile-only short intro is hidden everywhere by default; revealed only
   inside the mobile media query. Keeps it out of the desktop a11y tree. */




#welcome .start-panel__intro--mobile {
  display: none;
}

@media (max-width: 720px) {/* --- Outer section + panel: fill width with ~8px page margins --- */
  
  #welcome.start-panel-section {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  #welcome .start-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: clamp(1rem, 4.4vw, 1.35rem) clamp(1rem, 5vw, 1.3rem)
      clamp(1.1rem, 4.6vw, 1.4rem) !important;
    border: 1px solid rgba(201, 169, 97, 0.6) !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 4px 16px rgba(26, 58, 46, 0.06) !important;
  }/* --- Header: title on one line, no "Start Here"/colon, no divider --- */

  
  #welcome .start-panel__title {
    font-size: clamp(1.7rem, 7.9vw, 1.95rem) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    margin: 0 auto 0.5rem !important;
  }
  #welcome .start-panel__title-line {
    display: inline !important;
    white-space: nowrap !important;
  }
  #welcome .start-panel__title-colon,
  #welcome .start-panel__title-line--suffix,
  #welcome .start-panel__divider,
  #welcome .start-panel__note,
  #welcome .start-panel__contact {
    display: none !important;
  }/* --- Description: approved short copy, two balanced centered lines --- */

  
  #welcome .start-panel__intro--desktop {
    display: none !important;
  }
  #welcome .start-panel__intro--mobile {
    display: block !important;
    max-width: none !important;
    margin: 0 auto 1.05rem !important;
    font-family: "Nunito Sans", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #2d5a4a !important;
    text-align: center !important;
  }/* --- Card grid: always 2 columns, equal cells, no 1-col collapse --- */

  
  #welcome .start-panel__cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(8px, 3vw, 11px) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    align-items: stretch !important;
  }/* --- Each card: equal size, thin gold border, compact padding --- */

  
  #welcome .start-panel-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    justify-items: center !important;
    align-content: stretch !important;
    gap: 0.3rem !important;
    min-height: 168px !important;
    padding: 10px 9px 11px !important;
    border: 1px solid rgba(201, 169, 97, 0.45) !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      0 4px 12px rgba(26, 58, 46, 0.05) !important;
  }
  #welcome .start-panel-card:focus-visible {
    outline: 3px solid rgba(201, 169, 97, 0.75) !important;
    outline-offset: 2px !important;
  }/* --- Green pill button: top, full-width inset, white label --- */

  
  #welcome .start-panel-card__button {
    order: 1 !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0.32rem 0.6rem !important;
    border-radius: 999px !important;
  }
  #welcome .start-panel-card__button,
  #welcome .start-panel-card__button *,
  #welcome .start-panel-card__button span {
    font-size: clamp(0.78rem, 3.4vw, 0.9rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }/* --- Illustration: largest element, centered, never cropped --- */

  
  #welcome .start-panel-card__icon {
    order: 2 !important;
    width: 100% !important;
    height: 86px !important;
    min-height: 0 !important;
    margin: 0.18rem 0 0.05rem !important;
    align-self: center !important;
  }
  #welcome .start-panel-card__icon picture,
  #welcome .start-panel-card__icon img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }/* --- Bottom label: one line, centered --- */

  
  #welcome .start-panel-card__label {
    order: 3 !important;
    margin: 0 !important;
    font-family: "Nunito Sans", sans-serif !important;
    font-size: clamp(0.78rem, 3.4vw, 0.88rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    text-align: center !important;
    color: #2d5a4a !important;
  }}/* Narrowest phones: step the description down to 14px, and let it use a
   little of the panel's side padding (intro only) so line 1 still holds
   "...playful tools" and the copy stays exactly two lines — no overflow. */


@media (max-width: 340px) {
  #welcome .start-panel__intro--mobile {
    font-size: 14px !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
  }}/* Narrow-phone header safe area: the fixed hamburger menu occupies the same
   vertical band as the one-line title at <=400px. Add top breathing room to
   the panel only (no title resize/shift, no side-padding change). */


@media (max-width: 400px) {
  #welcome .start-panel {
    padding-top: 2.5rem !important;
  }}/* Button optical centering: center each word independently in its pill and
   float the arrow at the right edge so it no longer biases the label right.
   The legacy ::before counterweight (styles.css ~6479) is neutralized on
   mobile so only the word remains in flow and centers truly. */


@media (max-width: 760px) {
  #welcome .start-panel-card__button {
    position: relative !important;
    justify-content: center !important;
    padding-left: 1.6rem !important;
    padding-right: 1.6rem !important;
  }
  #welcome .start-panel-card__button::before {
    content: none !important;
  }
  #welcome .start-panel-card__button span {
    position: absolute !important;
    top: 50% !important;
    right: 0.72rem !important;
    margin-left: 0 !important;
    transform: translateY(-50%) !important;
  }}/* Short-landscape phones: a 2x2 grid stretches into wide, shallow cards, so
   switch to a single row of four. Gated to landscape, 540-900px wide, and
   <=500px tall, so portrait and normal-height tablet/desktop are untouched.
   This block carries the FULL mobile-content treatment (short title, two-line
   description, white surfaces, button/illustration/label stacking order, and
   centered-word/right-arrow button) because the wider landscape widths
   (812, 896) sit above the 720/760px mobile breakpoints and would otherwise
   fall back to the desktop "Start Here" header and label-over-art card. */


@media (orientation: landscape) and (min-width: 540px) and (max-width: 900px) and (max-height: 500px) {/* Panel: white field, compact padding */
  
  #welcome .start-panel {
    padding: 1rem 0.9rem 1.1rem !important;
    background: #ffffff !important;
    background-image: none !important;
  }/* Header: short one-line title, no divider / colon / "Start Here" suffix */
  
  #welcome .start-panel__title {
    font-size: clamp(1.75rem, 4.5vw, 2.15rem) !important;
    margin-bottom: 0.3rem !important;
    white-space: nowrap !important;
  }
  #welcome .start-panel__title-colon,
  #welcome .start-panel__title-line--suffix,
  #welcome .start-panel__divider,
  #welcome .start-panel__note,
  #welcome .start-panel__contact {
    display: none !important;
  }/* Description: approved two-line mobile copy */
  
  #welcome .start-panel__intro--desktop {
    display: none !important;
  }
  #welcome .start-panel__intro--mobile {
    display: block !important;
    max-width: none !important;
    margin: 0 auto 0.8rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-family: "Nunito Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: #2d5a4a !important;
    text-align: center !important;
  }/* Grid: one horizontal row of four */
  
  #welcome .start-panel__cards {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
    max-width: none !important;
    margin: 0 auto !important;
    align-items: stretch !important;
  }/* Card: button / illustration / label stack, white, thin gold border */
  
  #welcome .start-panel-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    justify-items: center !important;
    align-content: stretch !important;
    gap: 0.3rem !important;
    min-width: 0 !important;
    min-height: 190px !important;
    padding: 0.55rem 0.42rem 0.65rem !important;
    border: 1px solid rgba(201, 169, 97, 0.45) !important;
    border-radius: 24px !important;
    background: #ffffff !important;
  }/* Button: centered word, arrow floated near right edge */
  
  #welcome .start-panel-card__button {
    order: 1 !important;
    position: relative !important;
    justify-content: center !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 32px !important;
    padding-left: 1.35rem !important;
    padding-right: 1.35rem !important;
    font-size: 0.76rem !important;
  }
  #welcome .start-panel-card__button::before {
    content: none !important;
  }
  #welcome .start-panel-card__button span {
    position: absolute !important;
    top: 50% !important;
    right: 0.58rem !important;
    margin-left: 0 !important;
    transform: translateY(-50%) !important;
  }/* Illustration: substantial, centered, never cropped */
  
  #welcome .start-panel-card__icon {
    order: 2 !important;
    width: 100% !important;
    height: clamp(78px, 18vh, 94px) !important;
    min-height: 0 !important;
    margin-top: 0.3rem !important;
    align-self: center !important;
  }/* Label: one line */
  
  #welcome .start-panel-card__label {
    order: 3 !important;
    font-size: clamp(0.7rem, 1.75vw, 0.8rem) !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
    margin-top: 0.2rem !important;
    color: #2d5a4a !important;
  }}/* PHASE 2 SHARED WELCOME + FEATURED TYPOGRAPHY — 2026-06-23
   Root cause: a global "master typography" system once made #welcome and
   #featured headers identical, but Phase 1's <=720px rules shrank only
   #welcome's title (clamp 1.7-1.95rem) and recoloured its description, while
   #featured kept the larger desktop token (clamp 2.35-3rem) and #163c2f. Below
   721px that produced two typography systems. This block restores ONE shared,
   responsive contract for both panels' titles and descriptions. Selectors are
   stated at 1-ID + 2-class specificity and placed last so they tie/beat every
   older section rule (incl. the Phase 1 #welcome overrides and the master
   lock). Layout, cards, video, backgrounds, and other sections are untouched. *//* Base shared typography (all widths) */




#welcome .start-panel .start-panel__title,
#featured .featured-video__header .featured-video__title {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.025em !important;
  color: #163c2f !important;
  text-align: center !important;
  text-shadow: none !important;
}
#welcome .start-panel .start-panel__intro,
#featured .featured-video__header .featured-video__subtitle {
  font-family: "Nunito Sans", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  color: #2d5a4a !important;
  text-align: center !important;
  text-shadow: none !important;
}/* Title -> description gap shared; description top margin zeroed (mobile only,
   so the Parents desktop paragraph's external spacing is left unchanged). */


#welcome .start-panel .start-panel__title,
#featured .featured-video__header .featured-video__title {
  margin-bottom: 0.5rem !important;
}
#welcome .start-panel .start-panel__intro--mobile,
#featured .featured-video__header .featured-video__subtitle {
  margin-top: 0 !important;
}/* Mobile (<=720px): one shared title size + one shared description size */


@media (max-width: 720px) {
  #welcome .start-panel .start-panel__title,
  #featured .featured-video__header .featured-video__title {
    font-size: clamp(1.95rem, 6.5vw, 2.35rem) !important;
    line-height: 1.05 !important;
    letter-spacing: 0.025em !important;
  }
  #welcome .start-panel .start-panel__intro--mobile,
  #featured .featured-video__header .featured-video__subtitle {
    font-size: clamp(0.9375rem, 2.3vw, 1rem) !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    color: #2d5a4a !important;
  }/* Let the longer title wrap rather than overflow at the narrowest widths;
     "Parents & Educators" still fits one line from ~344px up. */
  
  #welcome .start-panel .start-panel__title {
    white-space: normal !important;
  }}/* Narrow phones (<=340px): step both descriptions down together */


@media (max-width: 340px) {
  #welcome .start-panel .start-panel__intro--mobile,
  #featured .featured-video__header .featured-video__subtitle {
    font-size: 14px !important;
  }}/* Short landscape (540-900px wide, <=500px tall): same shared title and
   description values for both panels. Four-card layout is left untouched. */


@media (orientation: landscape) and (min-width: 540px) and (max-width: 900px) and (max-height: 500px) {
  #welcome .start-panel .start-panel__title,
  #featured .featured-video__header .featured-video__title {
    font-size: var(--fl-home-title-size) !important;
    line-height: 1.05 !important;
    letter-spacing: 0.025em !important;
    color: #163c2f !important;
  }
  #welcome .start-panel .start-panel__intro--mobile,
  #featured .featured-video__header .featured-video__subtitle {
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #2d5a4a !important;
  }}/* PHASE 2 FEATURED VIDEO RESPONSIVE COPY — 2026-06-23
   One semantic title + one subtitle; the visible wording swaps at 720/721px.
   Spans are display-only switches and inherit the locked typography contract,
   so font family/size/weight/line-height/tracking/colour are unchanged. */


.featured-video__copy--mobile {
  display: none;
}
@media (max-width: 720px) {
  #featured .featured-video__copy--desktop {
    display: none !important;
  }
  #featured .featured-video__copy--mobile {
    display: inline !important;
  }}/* PHASE 2 FEATURED GUIDE FULL-WIDTH TOUCH TARGET — 2026-06-23
   On mobile/tablet (<=1024px) the whole footer band is one tap target: the
   footer's padding is moved onto the anchor, which becomes a full-width,
   >=56px-high flex link. The icon + text stay centered; the band keeps its
   clean look with only a larger invisible hit area. Desktop (>1024px) keeps
   the existing inline-link treatment. */


@media (max-width: 1024px) {
  #featured .featured-video__footer {
    padding: 0 !important;
  }
  #featured .featured-video__guide-link {
    display: flex !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: clamp(0.9rem, 2.4vw, 1.2rem) 1rem !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    cursor: pointer;
  }
  #featured .featured-video__guide-link:hover,
  #featured .featured-video__guide-link:focus-visible {
    background: rgba(201, 169, 97, 0.1) !important;
  }
  #featured .featured-video__guide-link:active {
    background: rgba(201, 169, 97, 0.16) !important;
  }
  #featured .featured-video__guide-link:focus-visible {
    outline: 3px solid rgba(201, 169, 97, 0.75) !important;
    outline-offset: -3px !important;
  }}
@media (max-width: 720px) {}/* PHASE 3 SHARED WELCOME + FEATURED + STORY WEAVER TYPOGRAPHY — 2026-06-23
   Extends the locked Phase 2 contract to #story-weaver so all three feature
   headers compute identical title/description typography at every viewport.
   Restated last, at 1-ID + 2-class specificity, to beat the older Story
   Weaver rules (weight 600 leak, var-token sizing, and the compressed
   title-to-description gap at styles.css ~8089). */#welcome .start-panel .start-panel__title,
#featured .featured-video__header .featured-video__title {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.025em !important;
  color: #163c2f !important;
  text-align: center !important;
  text-shadow: none !important;
}#welcome .start-panel .start-panel__intro,
#featured .featured-video__header .featured-video__subtitle {
  font-family: "Nunito Sans", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  color: #2d5a4a !important;
  text-align: center !important;
  text-shadow: none !important;
}/* Title -> description gap shared; description top margin zeroed (mobile copy
   only for Parents). Story Weaver's description-to-CTA gap is left intact. */#welcome .start-panel .start-panel__title,
#featured .featured-video__header .featured-video__title {
  margin-bottom: 0.5rem !important;
}#welcome .start-panel .start-panel__intro--mobile,
#featured .featured-video__header .featured-video__subtitle {
  margin-top: 0 !important;
}/* Mobile (<=720px): one shared title size + one shared description size */


@media (max-width: 720px) {#welcome .start-panel .start-panel__title,
#featured .featured-video__header .featured-video__title {
    font-size: clamp(1.95rem, 6.5vw, 2.35rem) !important;
    line-height: 1.05 !important;
    letter-spacing: 0.025em !important;
  }#welcome .start-panel .start-panel__intro--mobile,
#featured .featured-video__header .featured-video__subtitle {
    font-size: clamp(0.9375rem, 2.3vw, 1rem) !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    color: #2d5a4a !important;
  }}/* Narrow phones (<=340px): step all three descriptions down together */


@media (max-width: 340px) {#welcome .start-panel .start-panel__intro--mobile,
#featured .featured-video__header .featured-video__subtitle {
    font-size: 14px !important;
  }}/* Short landscape (540-900px wide, <=500px tall): same shared values */


@media (orientation: landscape) and (min-width: 540px) and (max-width: 900px) and (max-height: 500px) {#welcome .start-panel .start-panel__title,
#featured .featured-video__header .featured-video__title {
    font-size: var(--fl-home-title-size) !important;
    line-height: 1.05 !important;
    letter-spacing: 0.025em !important;
    color: #163c2f !important;
  }#welcome .start-panel .start-panel__intro--mobile,
#featured .featured-video__header .featured-video__subtitle {
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #2d5a4a !important;
  }}/* PHASE 1 MOBILE PANEL WIDTH + OUTLINE RESTORE — 2026-06-23
   The Phase 1 mobile rebuild gave #welcome only 8px side margins, width:100%,
   and a faint 1px border, so it rendered wider than Featured/Story Weaver with
   a weaker outline. Rejoin the shared mobile card geometry: same visual width
   (16px margins), the shared 2px muted-gold border and shadow. The approved
   white Phase 1 background and outer radius are preserved. */


@media (max-width: 760px) {
  #welcome .start-panel {
    width: var(--fl-card-visual-width) !important;
    max-width: var(--fl-card-visual-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border: var(--fl-light-card-border) !important;
    box-shadow: var(--fl-light-card-shadow) !important;
    background: #ffffff !important;
    background-image: none !important;
  }}/* PHASE 1 MOBILE DESCRIPTION TWO-LINE LOCK — 2026-06-23
   After the panel rejoined the shared (narrower) mobile width, the first
   intended description line stopped fitting at ~341-400px, so it wrapped once
   naturally and then the intentional <br> added a third line. nowrap keeps
   each intended line intact; the -12px side margins let the copy borrow from
   the panel's padding (not its width) so it still clears the border. Font
   size stays on the shared contract (15px here, 14px at <=340px). */



@media (max-width: 400px) {
  #welcome .start-panel__intro--mobile {
    white-space: nowrap !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
  }}/* PHASE 1 WARM MINI-CARD SURFACES — 2026-06-23
   Alex's reference gives the four mini cards a subtle warm-ivory fill that
   reads slightly warmer than the pure-white outer panel. The Phase 1 portrait
   and short-landscape blocks forced them to #fff; restore the warm surface for
   the cards only. The outer #welcome .start-panel stays pure white. */


@media (max-width: 760px) {
  #welcome .start-panel-card {
    background: rgba(255, 250, 237, 0.72) !important;
  }
  #welcome .start-panel-card:hover,
  #welcome .start-panel-card:focus-visible {
    background: rgba(255, 250, 237, 0.9) !important;
  }}/* PHASE 1 WARM MINI-CARD SURFACES (short landscape) — 2026-06-23
   The short-landscape block runs to 900px wide, so 812/896 sit above the
   760px rule above and would otherwise stay white. Mirror the warm surface
   in the same short-landscape media query (mobile phones held sideways);
   tall viewports >=761px (tablet/desktop) are unaffected. */


@media (orientation: landscape) and (min-width: 540px) and (max-width: 900px) and (max-height: 500px) {
  #welcome .start-panel-card {
    background: rgba(255, 250, 237, 0.72) !important;
  }
  #welcome .start-panel-card:hover,
  #welcome .start-panel-card:focus-visible {
    background: rgba(255, 250, 237, 0.9) !important;
  }}/* STORY WEAVER MOBILE CTA OPTICAL ALIGNMENT — 2026-06-23
   Nudge the CTA down 5px so it sits centered in the remaining header space
   (the description-to-button gap was reading tighter than button-to-image). */


@media (max-width: 760px) {}/* PHASE 4 GUIDED REFLECTIONS MOBILE ALIGNMENT — 2026-06-23
   Root cause: the title was left on the older Guided-Reflections values
   (weight 400 / clamp(2.45rem,5.2vw,3rem) at styles.css ~8158, with the master
   lock ~8323 forcing var(--fl-home-title-size)); it never joined the shared
   <=720px contract used by Parents/Featured/Story Weaver, so it rendered larger
   (37.6px vs 31.2px at 360). The CTA also carried three competing margins
   (1.15rem / 1rem / 0) and a flat-green fallback under the branded textured
   green. This block rejoins the shared title contract and gives the CTA the
   Story Weaver geometry with ONE spacing source. Scoped to #guided-reflections. *//* Title -> shared contract (matches Story Weaver at every viewport) */




#guided-reflections .guided-reflections__content .guided-reflections__title {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.025em !important;
  color: #163c2f !important;
  text-align: center !important;
  text-shadow: none !important;
  margin-bottom: 0 !important;
}

@media (max-width: 720px) {
  #guided-reflections .guided-reflections__content .guided-reflections__title {
    font-size: clamp(1.95rem, 6.5vw, 2.35rem) !important;
    line-height: 1.05 !important;
    letter-spacing: 0.025em !important;
  }}

@media (orientation: landscape) and (min-width: 540px) and (max-width: 900px) and (max-height: 500px) {
  #guided-reflections .guided-reflections__content .guided-reflections__title {
    font-size: var(--fl-home-title-size) !important;
    line-height: 1.05 !important;
    letter-spacing: 0.025em !important;
    color: #163c2f !important;
  }}/* CTA -> Story Weaver geometry/typography; branded textured green kept (~8519).
   One spacing source: title->button via the button's margin-top (~11px);
   button->image stays the existing ~16px image-wrap margin-top. */


@media (max-width: 760px) {
  #guided-reflections .guided-reflections__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100%, 294px) !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0.65rem 1.25rem !important;
    font-family: "Nunito Sans", sans-serif !important;
    font-size: clamp(0.92rem, 3.6vw, 1rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
  }
  #guided-reflections .guided-reflections__content .guided-reflections__button {
    margin-top: 11px !important;
  }}/* PHASE 4 GUIDED REFLECTIONS MOBILE COPY — 2026-06-24
   Move the caption desktop/mobile switch from the old 520px breakpoint to the
   shared 720/721 boundary so 521-720px shows the approved short mobile copy. */


@media (max-width: 720px) {
  #guided-reflections .guided-reflections__copy--desktop {
    display: none !important;
  }
  #guided-reflections .guided-reflections__copy--mobile {
    display: block !important;
  }}
@media (min-width: 721px) {
  #guided-reflections .guided-reflections__copy--desktop {
    display: block !important;
  }
  #guided-reflections .guided-reflections__copy--mobile {
    display: none !important;
  }}/* PHASE 4 GUIDED REFLECTIONS WHITE MOBILE CARD — 2026-06-24
   Alex's reference uses a clean white card (not the shared cream gradient).
   Override only the outer panel background; border, radius, shadow, and the
   transparent illustration wrapper are unchanged. */


@media (max-width: 720px) {
  #guided-reflections.guided-reflections-section {
    background: #ffffff !important;
    background-image: none !important;
  }}/* ============================================================
   MOBILE GLOBAL WHITE PANEL SURFACES — 2026-06-24
   White is the shared mobile panel surface system (not a per-panel
   decoration). Every major light content panel becomes pure white from top
   to bottom; the warm cream stays only in the page gutters between panels.
   Join the Library and the footer (dark green) are intentionally excluded.
   Poster Corner (#poster-corner-bot) is included below now that the panel
   exists in index.html. Mobile-only: <=720px portrait + short landscape.
   ============================================================ */


@media (max-width: 720px) {#welcome .start-panel,
#featured .featured-video--cinematic,
#guided-reflections.guided-reflections-section,
#video-library.fl-library-section,
#feedback.fl-feedback-section {
    background: #ffffff !important;
    background-image: none !important;
  }/* Parents mini-cards keep their approved warm-ivory fill (exception). */

  
  #welcome .start-panel-card {
    background: rgba(255, 250, 237, 0.72) !important;
  }/* Guided Reflections child surfaces: keep the white panel continuous. */

  
  #guided-reflections .guided-reflections__content,
  #guided-reflections .guided-reflections__image-wrap,
  #guided-reflections .guided-reflections__copy {
    background: transparent !important;
    background-image: none !important;
  }
  #guided-reflections .guided-reflections__image-wrap {
    border-top: 0 !important;
  }/* Featured Video header/footer must not reintroduce cream behind text. */

  
  #featured .featured-video__header,
  #featured .featured-video__footer,
  #featured .featured-video__guide-link {
    background-color: transparent !important;
    background-image: none !important;
  }}/* Short phone landscape (sideways phones, <=500px tall) is still mobile. */


@media (orientation: landscape) and (min-width: 540px) and (max-width: 900px) and (max-height: 500px) {#welcome .start-panel,
#featured .featured-video--cinematic,
#guided-reflections.guided-reflections-section,
#video-library.fl-library-section,
#feedback.fl-feedback-section {
    background: #ffffff !important;
    background-image: none !important;
  }
  #welcome .start-panel-card {
    background: rgba(255, 250, 237, 0.72) !important;
  }
  #guided-reflections .guided-reflections__content,
  #guided-reflections .guided-reflections__image-wrap,
  #guided-reflections .guided-reflections__copy {
    background: transparent !important;
    background-image: none !important;
  }
  #guided-reflections .guided-reflections__image-wrap {
    border-top: 0 !important;
  }
  #featured .featured-video__header,
  #featured .featured-video__footer,
  #featured .featured-video__guide-link {
    background-color: transparent !important;
    background-image: none !important;
  }}/* ============================================================
   PHASE 5 MOBILE FILTER PANEL — VIEWPORT FIT + INTERNAL SCROLL — 2026-06-24
   The mobile/short-landscape filter is a fixed full-viewport sheet (8px
   insets, safe-area aware) sized with 100dvh so it always fits small phones
   with browser chrome. Header + action footer stay put; only the options
   area scrolls. Real existing selectors are used (no duplicate panel).
   ============================================================ */


@media (max-width: 720px) {
  #video-library .fl-library-filter-popover {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(
      100dvh
      - max(8px, env(safe-area-inset-top))
      - max(8px, env(safe-area-inset-bottom))
    ) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }/* A bubble notch is meaningless for a centered full-viewport sheet. */
  
  #video-library .fl-library-filter-popover__notch { display: none !important; }

  #video-library .fl-library-filter-popover__header { flex: 0 0 auto !important; }
  #video-library .fl-library-filter-form {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  #video-library .fl-library-filter-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem !important;
  }
  #video-library .fl-library-filter-actions {
    position: relative !important;
    flex: 0 0 auto !important;
    margin-top: auto !important;
    background: var(--cream) !important;
    border-top: 1px solid rgba(210, 171, 102, 0.35) !important;
    z-index: 2;
  }/* Lock the page behind the open sheet (mobile only). */

  
  body.is-filter-open {
    overflow: hidden !important;
    touch-action: none;
  }}

@media (orientation: landscape) and (min-width: 540px) and (max-width: 900px) and (max-height: 500px) {
  #video-library .fl-library-filter-popover {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(
      100dvh
      - max(8px, env(safe-area-inset-top))
      - max(8px, env(safe-area-inset-bottom))
    ) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  #video-library .fl-library-filter-popover__notch { display: none !important; }
  #video-library .fl-library-filter-popover__header { flex: 0 0 auto !important; }
  #video-library .fl-library-filter-form {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  #video-library .fl-library-filter-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem !important;
  }
  #video-library .fl-library-filter-actions {
    position: relative !important;
    flex: 0 0 auto !important;
    margin-top: auto !important;
    background: var(--cream) !important;
    border-top: 1px solid rgba(210, 171, 102, 0.35) !important;
    z-index: 2;
  }
  body.is-filter-open {
    overflow: hidden !important;
    touch-action: none;
  }}/* Phase 5 fix: the section's slideUp animation leaves an identity transform on
   #video-library, which makes the fixed filter sheet resolve against the
   section instead of the viewport. Drop it only while the sheet is open (the
   load animation is long finished, so this is visually inert). */


@media (max-width: 720px) {
  #video-library.is-filter-open { animation: none !important; transform: none !important; }}
@media (orientation: landscape) and (min-width: 540px) and (max-width: 900px) and (max-height: 500px) {
  #video-library.is-filter-open { animation: none !important; transform: none !important; }}/* ============================================================
   MOBILE VIDEO LIBRARY — FULL FILTERED LIST — 2026-06-28
   Mobile renders the SAME filtered, paginated result set as desktop (a vertical
   stack of cards). The old in-sheet "Show Stories" range + "Select a Story"
   picker and the single-card view were removed; the page/range controls
   (.fl-library-pages) now show beneath the cards on every viewport.
   ============================================================ *//* Phase 5 fix: the fixed-sheet rule uses display:flex !important, which would
   otherwise defeat the no-!important [hidden] rule and keep the closed sheet
   on screen. Restore hidden behaviour at the same priority. */




@media (max-width: 720px) {
  #video-library .fl-library-filter-popover[hidden] { display: none !important; }}
@media (orientation: landscape) and (min-width: 540px) and (max-width: 900px) and (max-height: 500px) {
  #video-library .fl-library-filter-popover[hidden] { display: none !important; }}/* ============================================================
   MOBILE VIDEO LIBRARY — VISIBLE PANEL + CARD TO MATCH MOCKUP
   — 2026-06-24, updated 2026-06-28. Styles the mobile header, toolbar, and the
   compact stacked story cards (one card per row) for the full filtered list
   (the filter popover is untouched). Overrides the old column-stacking mobile
   rules. Scoped to #video-library; <=720px + short landscape. Desktop
   (>=721px) unchanged.
   ============================================================ *//* Responsive intro: short line on mobile, full on desktop. */




.fl-library-intro__short { display: none; }
@media (max-width: 720px) {
  #video-library .fl-library-intro__full { display: none !important; }
  #video-library .fl-library-intro__short { display: inline !important; }}
@media (orientation: landscape) and (min-width: 540px) and (max-width: 900px) and (max-height: 500px) {
  #video-library .fl-library-intro__full { display: none !important; }
  #video-library .fl-library-intro__short { display: inline !important; }}/* Mobile placeholder visually reads "Search" (set in main.js). */



@media (max-width: 720px) {/* ---- Panel padding: card uses the full content width ---- */
  
  #video-library.fl-library-section {
    padding: 1.35rem 0.9rem 1.4rem !important;
  }/* ---- Toolbar: Filter (icon) + Search on ONE row ---- */

  
  #video-library .fl-library-toolbar-primary {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.65rem !important;
    width: 100% !important;
  }
  #video-library .fl-library-filter-trigger {
    order: 1 !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    align-self: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
  }
  #video-library .fl-library-filter-trigger__label,
  #video-library .fl-library-filter-trigger__caret {
    display: none !important;
  }
  #video-library .fl-library-search {
    order: 2 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
  }
  #video-library .fl-library-search-input {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 14px !important;
  }/* ---- Story card shell ---- */

  
  #video-library .fl-library-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid rgba(210, 171, 102, 0.48) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(26, 58, 46, 0.06) !important;
  }/* ---- Thumbnail fills the card width as a wide, shallow banner ----
     The dedicated mobile assets (small-thumbs/*.png) are 1280x320 (4:1):
     giraffes left, open space right. Match the box to the art so object-fit
     shows the full composition instead of a cropped 16:9 center slice. */

  
  #video-library .fl-library-card__thumbnail-link,
  #video-library .fl-library-card__thumbnail-shell {
    aspect-ratio: 4 / 1 !important;
  }
  #video-library .fl-library-card__thumbnail-link,
  #video-library .fl-library-card__thumbnail-shell,
  #video-library .fl-library-card__thumbnail-image {
    border-radius: 19px 19px 0 0 !important;
    width: 100% !important;
  }/* ---- Card content ---- */

  
  #video-library .fl-library-content {
    width: 100% !important;
    padding: 0.95rem 0.9rem 1rem !important;
    gap: 0.65rem !important;
  }
  #video-library .fl-library-title {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(1.5rem, 7vw, 1.8rem) !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    color: #163c2f !important;
    margin: 0 !important;
  }/* Mobile never shows the short description under the title — it is surfaced
     as the first line inside Details when expanded. Data preserved. */
  
  #video-library .fl-library-subtitle {
    display: none !important;
  }/* ---- Metadata chips on one wrapping row ---- */

  
  #video-library .fl-library-meta-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  #video-library .fl-library-card__meta {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }/* ---- Actions on one row: Details · Reflection Guide · (Share at right) ---- */

  
  #video-library .fl-library-inline-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 0.75rem !important;
    white-space: nowrap !important;
  }
  #video-library .fl-library-card-more-toggle { order: 1 !important; }
  #video-library .fl-library-action--guide { order: 2 !important; margin-left: 0 !important; }
  #video-library .fl-share-icon-btn { order: 3 !important; margin-left: auto !important; }/* Share: icon only; keep "Share" in the a11y tree; reveal text when copied. */

  
  #video-library .fl-share-icon-btn > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  #video-library .fl-share-icon-btn.is-copied > span {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 0 0.3rem !important;
    clip: auto !important;
    overflow: visible !important;
  }}/* Short landscape: same one-row toolbar + actions as portrait mobile. */


@media (orientation: landscape) and (min-width: 540px) and (max-width: 900px) and (max-height: 500px) {
  #video-library .fl-library-toolbar-primary {
    display: flex !important; flex-direction: row !important; align-items: center !important;
    gap: 0.65rem !important; width: 100% !important;
  }
  #video-library .fl-library-filter-trigger {
    order: 1 !important; flex: 0 0 48px !important; width: 48px !important; min-width: 48px !important;
    height: 48px !important; min-height: 48px !important; padding: 0 !important;
    justify-content: center !important; border-radius: 14px !important;
  }
  #video-library .fl-library-filter-trigger__label,
  #video-library .fl-library-filter-trigger__caret { display: none !important; }
  #video-library .fl-library-search { order: 2 !important; flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; margin: 0 !important; }
  #video-library .fl-library-search-input { width: 100% !important; min-height: 48px !important; border-radius: 14px !important; }
  #video-library .fl-library-subtitle { display: none !important; }
  #video-library .fl-library-meta-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.5rem !important; }
  #video-library .fl-library-inline-actions { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; width: 100% !important; gap: 0.75rem !important; white-space: nowrap !important; }
  #video-library .fl-library-card-more-toggle { order: 1 !important; }
  #video-library .fl-library-action--guide { order: 2 !important; margin-left: 0 !important; }
  #video-library .fl-share-icon-btn { order: 3 !important; margin-left: auto !important; }}/* Narrowest phones: tighten the action row so Details · Reflection Guide ·
   Share stay on one line without clipping (no wrapping). */


@media (max-width: 340px) {
  #video-library .fl-library-inline-actions { gap: 0.45rem !important; }
  #video-library .fl-library-inline-actions .fl-library-action--guide,
  #video-library .fl-library-inline-actions .fl-library-card-more-toggle {
    font-size: 0.86rem !important;
  }}/* PHASE 5 MOBILE CARD ACTION RHYTHM — 2026-06-24
   Keep Details · Reflection Guide · Share as one compact left-aligned group
   (no margin-left:auto pushing Share to the far edge), and nudge the whole row
   ~4px down from the metadata pills. Mobile + short-landscape only. */


@media (max-width: 720px) {
  #video-library .fl-library-inline-actions {
    justify-content: flex-start !important;
    gap: 0.65rem !important;
    margin-top: 4px !important;
  }
  #video-library .fl-share-icon-btn {
    margin-left: 0 !important;
  }}
@media (max-width: 340px) {
  #video-library .fl-library-inline-actions {
    gap: 0.48rem !important;
  }}
@media (orientation: landscape) and (min-width: 540px) and (max-width: 900px) and (max-height: 500px) {
  #video-library .fl-library-inline-actions {
    justify-content: flex-start !important;
    gap: 0.65rem !important;
    margin-top: 4px !important;
  }
  #video-library .fl-share-icon-btn {
    margin-left: 0 !important;
  }}/* ============================================================
   VIDEO LIBRARY — DETAILS IS MOBILE-ONLY — 2026-06-27
   Details (toggle + expandable panel) exists in markup and is fully active at
   <=720px. At >=721px the desktop/tablet card shows ONLY Share + Reflection
   Guide: the toggle and panel are removed from layout (display:none, so no
   reserved gap), and any card left in an expanded state on mobile reverts to
   the normal collapsed look when the viewport crosses to desktop. The short
   description stays visible under the title on desktop via .fl-library-subtitle.
   ============================================================ */


@media (min-width: 721px) {
  #video-library .fl-library-card-more-toggle,
  #video-library .fl-library-card__details {
    display: none !important;
  }/* A previously-expanded mobile card must not look expanded on desktop. */
  
  #video-library .fl-library-card.is-expanded .fl-library-card__thumbnail-link,
  #video-library .fl-library-card.is-expanded .fl-library-card__thumbnail-shell {
    border-radius: 12px 0 0 12px !important;
  }}/* PHASE 6 LEARNING GARDENS — HIDE COMING SOON ON MOBILE — 2026-06-25
   All active Gardens stay in the one-column mobile flow; only the Coming Soon
   tile is hidden. display:none removes it from layout + the a11y tree, leaving
   no empty grid slot. Explicit mobile-intent rule, independent of the desktop
   (>=981px) tile-visibility logic. HTML/data untouched; tablet/desktop unchanged. */


@media (max-width: 720px) {}
@media (orientation: landscape) and (min-width: 540px) and (max-width: 900px) and (max-height: 500px) {}/* ============================================================
   MOBILE GLOBAL PANEL RHYTHM + TITLE CONTRACT — 2026-06-25
   One labeled final block, placed last so it wins the cascade at mobile
   widths. Two corrections, each using a SINGLE mechanism:

   (1) PANEL-TO-PANEL GAP = flat 16px.
       Every major panel already shares ONE rhythm mechanism: its own
       margin-bottom: var(--fl-section-rhythm) (and #welcome's matching
       padding-bottom). That token was a viewport-scaling clamp (~20-28px),
       and #guided-reflections was the ONE panel that overrode the shared
       margin-bottom with its own 2rem/3rem margins (styles.css ~8266),
       producing the unequal 32px/48px gaps around it. We retune the token
       to a flat 16px and rejoin Guided Reflections to the shared system.
       No parent gap + child margin stacking is introduced.

   (2) ONE LIGHT-PANEL TITLE CONTRACT for all nine homepage titles.
       Video Library / Learning Gardens / Help & FAQs / Feedback / Join had
       drifted onto the larger desktop token (clamp 2.35-3rem, and Feedback
       at weight 600). Restated here, last, at >= the older rules'
       specificity so all light titles compute identically. Join keeps its
       accessible gold because it sits on the dark-green panel.

   Mobile-only: portrait <=720px + short phone landscape. 721px and wider
   with normal height is untouched. No layout, width, padding, background,
   border, radius, card, filter, or interaction is changed here.
   ============================================================ *//* --- (1) Panel rhythm: flat 16px (portrait <=720px) --- */




@media (max-width: 720px) {
  :root { --fl-section-rhythm: 16px !important; }
  #guided-reflections.guided-reflections-section {
    margin-top: 0 !important;
    margin-bottom: var(--fl-section-rhythm) !important;
  }}/* --- (1) Panel rhythm: flat 16px (short phone landscape) --- */

@media (orientation: landscape) and (min-width: 540px) and (max-width: 900px) and (max-height: 500px) {
  :root { --fl-section-rhythm: 16px !important; }
  #guided-reflections.guided-reflections-section {
    margin-top: 0 !important;
    margin-bottom: var(--fl-section-rhythm) !important;
  }}/* --- (2) Shared title contract (portrait <=720px) --- */


@media (max-width: 720px) {#welcome .start-panel .start-panel__title,
#featured .featured-video__header .featured-video__title,
#guided-reflections .guided-reflections__content .guided-reflections__title,
#video-library #video-library-title,
#feedback #feedback-title,
#join.cta-section h2 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(1.95rem, 6.5vw, 2.35rem) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: 0.025em !important;
    text-align: center !important;
    text-shadow: none !important;
  }/* Light panels: shared deep-green title color */#welcome .start-panel .start-panel__title,
#featured .featured-video__header .featured-video__title,
#guided-reflections .guided-reflections__content .guided-reflections__title,
#video-library #video-library-title,
#feedback #feedback-title {
    color: #163c2f !important;
  }/* Join: identical metrics, accessible gold on its dark-green panel */
  
  #join.cta-section h2 {
    color: #f3d780 !important;
  }}/* --- (2) Shared title contract (short phone landscape) ---
   One title-size token (var(--fl-home-title-size)) for every panel so all
   nine compute identically at any given short-landscape viewport. */


@media (orientation: landscape) and (min-width: 540px) and (max-width: 900px) and (max-height: 500px) {#welcome .start-panel .start-panel__title,
#featured .featured-video__header .featured-video__title,
#guided-reflections .guided-reflections__content .guided-reflections__title,
#video-library #video-library-title,
#feedback #feedback-title,
#join.cta-section h2 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: var(--fl-home-title-size) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: 0.025em !important;
    text-align: center !important;
    text-shadow: none !important;
  }#welcome .start-panel .start-panel__title,
#featured .featured-video__header .featured-video__title,
#guided-reflections .guided-reflections__content .guided-reflections__title,
#video-library #video-library-title,
#feedback #feedback-title {
    color: #163c2f !important;
  }
  #join.cta-section h2 {
    color: #f3d780 !important;
  }}/* ============================================================
   TABLET / DESKTOP EXTENSION (>=721px, normal height) — 2026-06-25
   Same two corrections at wider widths. Guided Reflections also drifted off
   the shared rhythm on desktop (its own 2.5rem/4rem margins -> 40px/64px gaps
   at styles.css ~4911), so the same single mechanism applies: retune the
   shared --fl-section-rhythm token to one consistent 32px and rejoin Guided
   Reflections to it. Titles are unified to the existing desktop size token so
   all nine compute identically at every desktop viewport (fixes Feedback's
   weight 600 and the 1.04/1.05 line-height split). Gated to normal viewport
   height (min-height: 501px) so short phone landscape keeps its 16px rhythm.
   Internal padding, widths, backgrounds, images, and interactions unchanged.
   ============================================================ *//* --- Panel rhythm: one consistent 32px (tablet/desktop) --- */




@media (min-width: 721px) and (min-height: 501px) {
  :root { --fl-section-rhythm: 32px !important; }
  #guided-reflections.guided-reflections-section {
    margin-top: 0 !important;
    margin-bottom: var(--fl-section-rhythm) !important;
  }}/* --- Shared title contract (tablet/desktop) --- */


@media (min-width: 721px) and (min-height: 501px) {#welcome .start-panel .start-panel__title,
#featured .featured-video__header .featured-video__title,
#guided-reflections .guided-reflections__content .guided-reflections__title,
#video-library #video-library-title,
#feedback #feedback-title,
#join.cta-section h2 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: var(--fl-home-title-size) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: 0.025em !important;
    text-align: center !important;
    text-shadow: none !important;
  }#welcome .start-panel .start-panel__title,
#featured .featured-video__header .featured-video__title,
#guided-reflections .guided-reflections__content .guided-reflections__title,
#video-library #video-library-title,
#feedback #feedback-title {
    color: #163c2f !important;
  }
  #join.cta-section h2 {
    color: #f3d780 !important;
  }}/* ============================================================
   PHASE 7 — HELP & FAQS MOBILE ALIGNMENT — 2026-06-26
   Controlled alignment to Alex's mobile mockup. Scope: #fables-guide-bot
   only. The panel reads: title -> CTA -> full watercolor illustration, on a
   pure-white surface (the global mobile white-panel rule already supplies the
   white; not duplicated here). Title typography is the global contract
   (handled by the shared title block above) — no Help-specific size.

   Root causes corrected here (earlier #fables-guide-bot rules: ~6987 negative
   margin + top fade mask, ~7836 -36px margin, ~8364 object-fit:cover keyed to
   a non-existent .cover-media wrapper): the illustration was object-fit:cover,
   pulled up with negative margins behind a fade; the gaps below the CTA and
   below the image had collapsed (~5px / ~2px); the CTA was 42px tall / 232px.

   One spacing source per gap (no flex-gap + margin doubling, no negative
   margins): panel-top->title = overlay padding-top; title->CTA = title
   margin-bottom; CTA->image = image margin-top (overlay padding-bottom 0);
   image->panel-bottom = image margin-bottom. External panel spacing and the
   Fables Guide launch interaction are untouched.
   ============================================================ */


@media (max-width: 720px) {}/* Short phone landscape: identical visual system. */


@media (orientation: landscape) and (min-width: 540px) and (max-width: 900px) and (max-height: 500px) {}

@media (max-width: 720px) {}/* Short phone landscape: same system, but cap image height harder so the
   artwork doesn't dominate the shallow viewport. */


@media (orientation: landscape) and (min-width: 540px) and (max-width: 900px) and (max-height: 500px) {}/* ============================================================
   PHASE 8 — FEEDBACK PANEL MOBILE ALIGNMENT — 2026-06-26
   Scope: #feedback only. Matches Alex's mobile mockup, which keeps the panel
   "pleasantly direct": title -> question -> stars -> divider -> contact line
   -> email button. On mobile we swap the title to "Your Feedback" (responsive
   spans in index.html; no CSS-generated text) and hide the intro paragraph
   and the topic chips. The small-print note is already sr-only and the status
   line is already display:none, so the contact row is the last in-flow item.
   Rhythm uses the widget's single flex gap; per-element nudges only where a
   gap was out of range. Title typography stays on the global contract.
   Mobile (<=720px) + short phone landscape only; 721px+ keeps the full
   desktop feedback content (intro, chips, "Leave Us Your Feedback").
   ============================================================ *//* Base: the mobile title span is hidden until a mobile breakpoint shows it. */




#feedback .fl-feedback-title__mobile { display: none; }

@media (max-width: 720px) {/* Responsive title */
  
  #feedback .fl-feedback-title__desktop { display: none !important; }
  #feedback .fl-feedback-title__mobile { display: inline !important; }/* Mobile content reduction (real selectors; not nth-child; HTML retained) */

  
  #feedback .fl-feedback-intro,
  #feedback .fl-feedback-tags { display: none !important; }/* Internal rhythm: one mechanism (widget flex gap) + targeted nudges. */

  
  #feedback.fl-feedback-section {
    padding: 1.5rem 1.05rem 1.4rem !important;   /* top->title ~24px; email->bottom ~25px */
  }
  #feedback #feedback-title {
    margin: 0 auto 1.1rem !important;             /* title->question ~18px */
  }
  #feedback .fl-feedback-widget {
    gap: 1rem !important;                          /* question->rating, rating->divider, divider->contact */
  }
  #feedback .fl-feedback-contact {
    gap: 0.85rem !important;                       /* contact text -> email ~14px */
  }/* Divider: narrower than the panel (~55-65% of content width).
     High specificity (1 ID + 3 classes) to beat the shared ornament sizing. */

  
  #feedback .fl-feedback-divider.fl-ornament-divider .fl-ornament-divider__img {
    width: 60% !important;
    max-width: 380px !important;   /* keep ~60% of content across the mobile range */
  }}/* Short phone landscape: same simplified content + rhythm. */


@media (orientation: landscape) and (min-width: 540px) and (max-width: 900px) and (max-height: 500px) {
  #feedback .fl-feedback-title__desktop { display: none !important; }
  #feedback .fl-feedback-title__mobile { display: inline !important; }
  #feedback .fl-feedback-intro,
  #feedback .fl-feedback-tags { display: none !important; }
  #feedback.fl-feedback-section {
    padding: 1.5rem 1.05rem 1.4rem !important;
  }
  #feedback #feedback-title {
    margin: 0 auto 1.1rem !important;
  }
  #feedback .fl-feedback-widget {
    gap: 1rem !important;
  }
  #feedback .fl-feedback-contact {
    gap: 0.85rem !important;
  }
  #feedback .fl-feedback-divider.fl-ornament-divider .fl-ornament-divider__img {
    width: 52% !important;
    max-width: 340px !important;
  }}/* Narrowest phones: the email pill is sized by its address text and would
   otherwise reach the gold border at 320px. Trim its inline padding, gap, and
   text a touch (and the panel's side padding) so it clears the border with a
   comfortable margin. mailto, icon, and full address are unchanged. */


@media (max-width: 360px) {
  #feedback.fl-feedback-section {
    padding-left: 0.8rem !important;
    padding-right: 0.8rem !important;
  }
  #feedback .fl-feedback-email {
    padding-left: 0.72rem !important;
    padding-right: 0.72rem !important;
    gap: 0.4rem !important;
    font-size: 0.92rem !important;
  }}/* ============================================================
   PHASE 9 — JOIN THE LIBRARY MOBILE ALIGNMENT — 2026-06-26
   Scope: #join only (the footer <footer class="site-footer"> is a separate
   element and is NOT touched). Matches Alex's mobile mockup: short title
   "Join the Library" + short description (responsive spans in index.html,
   no CSS-generated text), a full-width YouTube button, and Instagram +
   Pinterest as two equal columns on one row. The dark-green panel surface,
   gold outline, gold title colour, icons, destinations, and external-link
   attributes are unchanged. Mobile (<=720px) + short phone landscape only;
   721px+ keeps the desktop title, full description, and social layout.
   ============================================================ *//* Base: mobile-only spans hidden until a mobile breakpoint reveals them. */




#join .join-title__mobile,
#join .join-desc__mobile { display: none; }

@media (max-width: 720px) {/* Responsive title + description */
  
  #join .join-title__desktop,
  #join .join-desc__desktop { display: none !important; }
  #join .join-title__mobile,
  #join .join-desc__mobile { display: inline !important; }/* Social layout: YouTube full width; Instagram + Pinterest side by side. */

  
  #join .cta-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.8rem 0.7rem !important;          /* row 12.8px (YT->row) / col 11.2px (IG<->Pin) */
    width: 100% !important;
    max-width: none !important;
  }
  #join .youtube-btn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 56px !important;
  }
  #join .youtube-btn,
  #join .instagram-btn {
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }
  #join .instagram-btn {
    width: 100% !important;
    min-height: 56px !important;
    gap: 0.4rem !important;                      /* free up text width so the */
    padding-left: 0.5rem !important;            /* label fits two centred lines */
    padding-right: 0.5rem !important;
  }
  #join .instagram-btn .social-icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }/* Instagram/Pinterest labels may wrap to two centred lines. */
  
  #join .instagram-btn span {
    white-space: normal !important;
    text-align: center !important;
  }/* Internal rhythm: section padding + heading/paragraph/grid margins. */

  
  #join.cta-section {
    padding: 1.5rem 1rem 1.6rem !important;     /* top->title ~24px; last row->bottom ~26px */
  }
  #join.cta-section h2 {
    margin: 0 auto 0.6rem !important;           /* title->description ~10px */
  }
  #join.cta-section p {
    margin: 0 auto 1.5rem !important;           /* description->YouTube ~24px */
  }
  #join .footer-social-row {
    margin-top: 1.3rem !important;              /* social row->Also on ~21px */
  }}/* Short phone landscape: identical mobile copy + layout. */


@media (orientation: landscape) and (min-width: 540px) and (max-width: 900px) and (max-height: 500px) {
  #join .join-title__desktop,
  #join .join-desc__desktop { display: none !important; }
  #join .join-title__mobile,
  #join .join-desc__mobile { display: inline !important; }

  #join .cta-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.8rem 0.7rem !important;
    width: 100% !important;
    max-width: none !important;
  }
  #join .youtube-btn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 56px !important;
  }
  #join .youtube-btn,
  #join .instagram-btn {
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }
  #join .instagram-btn {
    width: 100% !important;
    min-height: 56px !important;
    gap: 0.4rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  #join .instagram-btn .social-icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
  #join .instagram-btn span {
    white-space: normal !important;
    text-align: center !important;
  }
  #join.cta-section {
    padding: 1.5rem 1rem 1.6rem !important;
  }
  #join.cta-section h2 {
    margin: 0 auto 0.6rem !important;
  }
  #join.cta-section p {
    margin: 0 auto 1.5rem !important;
  }
  #join .footer-social-row {
    margin-top: 1.3rem !important;
  }}/* Narrowest phones: the Instagram/Pinterest columns get tight enough that the
   label would wrap to three lines. Trim the icon, gap, padding, and text a
   touch so it stays two centred lines at 320px. Icons/labels/links unchanged. */


@media (max-width: 360px) {
  #join .instagram-btn {
    gap: 0.35rem !important;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    font-size: 0.95rem !important;
  }
  #join .instagram-btn .social-icon {
    width: 1.35rem !important;
    height: 1.35rem !important;
  }}/* Menu: Poster Corner now uses the supplied framed-leaf icon
   (assets/menu-icons/007poster-corner.svg) with the standard
   .site-menu-link__icon/.site-menu-link__img markup, so no reserved-slot
   placeholder is needed. *//* Mobile: pure white panel surface, vertical stack, comfortable equal rhythm.
   The shared white-panel selector group above already sets the white surface;
   here we only tune the cover stack spacing for narrow widths. */




@media (max-width: 720px) {}/* Short-phone landscape: keep the cover compact using the established
   short-landscape query shape. */

@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {}
@media (max-width: 720px) {}/* CTA touch target: ensure the closed-panel CTA meets the 44px minimum on
   mobile (a generic mobile bot-button rule otherwise trims it to ~42px). */


@media (max-width: 720px) {}/* ============================================================
   PARENTS & EDUCATORS PANEL — SIMPLIFIED 2x2 THROUGH 1023px — 2026-06-27
   Mobile/tablet-only redesign of #welcome: one compact 2x2 grid of four
   full-card-link destinations, each laid out as
   action strip -> destination label -> illustration. Active through 1023px;
   the existing desktop design is restored at 1024px and up. Placed last and
   scoped to #welcome, so it UNIFIES the previously split <=720 / 721-1023
   behaviour without touching any other panel. Shared design-system colours
   and radii; no fixed card heights (text/zoom-safe).
   ============================================================ */


@media (max-width: 1023px) {/* Heading: short form only. Hide colon, "Start Here" suffix, divider,
     note and contact across the whole range. */
  
  #welcome .start-panel .start-panel__title-colon,
  #welcome .start-panel .start-panel__title-line--suffix,
  #welcome .start-panel .start-panel__divider,
  #welcome .start-panel .start-panel__note,
  #welcome .start-panel .start-panel__contact {
    display: none !important;
  }/* Matches the shared title-contract specificity and is placed later, so it
     wins across <=1023 and keeps the heading ~26-28px instead of growing to
     the desktop size. */
  
  #welcome .start-panel .start-panel__title {
    font-size: clamp(1.65rem, 6.2vw, 1.78rem) !important;  /* ~26-28px */
    line-height: 1.12 !important;
    letter-spacing: 0.02em !important;
    white-space: normal !important;
    margin: 0 auto 0.6rem !important;
  }/* Prefix line only ("Parents & Educators"); the suffix span stays hidden
     by the rule above (don't re-show it via a broad title-line rule). */
  
  #welcome .start-panel .start-panel__title-line:not(.start-panel__title-line--suffix) {
    display: inline !important;
    white-space: normal !important;
  }/* Description: short song-rich copy only, >=14px, comfortable line-height. */

  
  #welcome .start-panel__intro--desktop { display: none !important; }
  #welcome .start-panel__intro--mobile {
    display: block !important;
    max-width: 34ch !important;
    margin: 0 auto 1.1rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-family: "Nunito Sans", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #2d5a4a !important;
    text-align: center !important;
    white-space: normal !important;
  }/* Panel: restrained side padding. */

  
  #welcome .start-panel {
    padding-left: clamp(16px, 4.4vw, 18px) !important;
    padding-right: clamp(16px, 4.4vw, 18px) !important;
  }/* 2x2 grid through 1023px (overrides the 721-1023 desktop 4-column grid).
     Capped + centred so the cards stay compact on tablets. */

  
  #welcome .start-panel__cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(10px, 2.6vw, 12px) !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    align-items: stretch !important;
  }/* Card = whole clickable link; flex column: strip -> label -> art.
     No fixed height (text/zoom-safe); equal heights via the grid stretch. */

  
  #welcome .start-panel-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 0.45rem !important;
    padding: clamp(8px, 2.2vw, 12px) !important;
    border: 1px solid rgba(201, 169, 97, 0.45) !important;
    border-radius: 22px !important;
    background: #ffffff !important;
  }
  #welcome .start-panel-card:focus-visible {
    outline: 3px solid rgba(201, 169, 97, 0.75) !important;
    outline-offset: 2px !important;
  }/* (1) Action strip at the top: green, full width, >=44px, 17-18px label,
     inline arrow (override the older floated-arrow treatment). */

  
  #welcome .start-panel-card__button {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0.5rem 0.7rem !important;
    border-radius: 999px !important;
  }
  #welcome .start-panel-card__button::before { content: none !important; }
  #welcome .start-panel-card__button,
  #welcome .start-panel-card__button * {
    font-size: clamp(1.0625rem, 4.6vw, 1.125rem) !important;  /* 17-18px */
    font-weight: 800 !important;
    line-height: 1.1 !important;
  }
  #welcome .start-panel-card__button span {
    position: static !important;
    transform: none !important;
    margin-left: 0.3em !important;
    right: auto !important;
    top: auto !important;
  }/* (2) Destination label below the strip: >=14px, may wrap (no clipping). */

  
  #welcome .start-panel-card__label {
    order: 2 !important;
    margin: 0.1rem 0 0 !important;
    font-family: "Nunito Sans", sans-serif !important;
    font-size: clamp(0.875rem, 3.6vw, 0.95rem) !important;  /* 14-15.2px */
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    white-space: normal !important;
    color: #2d5a4a !important;
  }/* (3) Illustration centred beneath the label. object-fit: contain (the
     watercolor scenes are not safe to crop), consistent ~90-110px area. */

  
  #welcome .start-panel-card__icon {
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: clamp(90px, 24vw, 110px) !important;
    min-height: 0 !important;
    margin: auto 0 0 !important;
  }
  #welcome .start-panel-card__icon picture,
  #welcome .start-panel-card__icon img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }}/* Narrowest phones (<340px): one column rather than clipping the cards. */


@media (max-width: 339px) {
  #welcome .start-panel__cards { grid-template-columns: 1fr !important; }}/* ── Reading Mode ──────────────────────────────────────────────────────── */



.site-menu-reading-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--forest-dark);
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.25;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  min-height: 38px;
  padding: 0.5rem 0.58rem;
  gap: 0.5rem;
  border-radius: 10px;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.site-menu-reading-btn:focus-visible,
.site-menu-reading-btn:hover {
  background: rgba(201, 169, 97, 0.18);
  color: var(--forest-deep);
  outline: 2px solid rgba(191, 153, 31, 0.9);
  outline-offset: 3px;
  box-shadow: none;
  transform: translateX(2px);
}

@media (max-width: 420px) {
  .site-menu-reading-btn {
    font-size: 0.9rem;
    padding-left: 0.52rem;
    padding-right: 0.52rem;
  }}

.reading-mode-panel {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow-y: auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: #fff;
  color: #1a3a2e;
  padding: 1.5rem 1rem;
  font-size: 1rem;
  line-height: 1.7;
}

.reading-mode-panel__inner {
  max-width: 760px;
  margin: 0 auto;
}

.reading-mode-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #d0e4d8;
}

.reading-mode-panel__header h2 {
  margin: 0;
  font-size: 1.25rem;
  outline: none;
}

.reading-mode-panel__header h2:focus-visible {
  outline: 2px solid #1a5c3a;
  outline-offset: 3px;
  border-radius: 3px;
}

.reading-mode-exit {
  flex-shrink: 0;
  padding: 0.4rem 1.1rem;
  border: 1px solid #1a3a2e;
  border-radius: 999px;
  background: #1a3a2e;
  color: #f5ead8;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.reading-mode-exit:focus-visible {
  outline: 2px solid #1a3a2e;
  outline-offset: 3px;
}

.reading-mode-panel a {
  color: #1a5c3a;
  text-underline-offset: 2px;
}

.reading-mode-panel a:focus-visible {
  outline: 2px solid #1a3a2e;
  outline-offset: 2px;
  border-radius: 2px;
}

.reading-mode-panel h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.35rem;
  font-size: 1rem;
}

.reading-mode-panel ul {
  padding-left: 1.5rem;
  margin: 0.35rem 0 1rem;
}

.reading-mode-panel li {
  margin-bottom: 0.2rem;
}

@media (min-width: 600px) {
  .reading-mode-panel {
    padding: 2rem 2rem;
  }}/* MENU PARITY — Reading Mode row must match the standard navigation rows.
   The arrows already share the same SVG and 1rem box. Matching the row
   dimensions removes the optical size difference caused by the taller button. */


.site-menu-reading-btn {
  min-height: 48px !important;
  padding: 0.16rem 0.72rem 0.16rem 0.5rem !important;
  gap: 0.62rem !important;
  border-radius: 9px !important;
  font-size: 0.9rem !important;
  line-height: 1.15 !important;
}

@media (max-width: 420px) {
  .site-menu-reading-btn {
    min-height: 46px !important;
    padding: 0.14rem 0.58rem 0.14rem 0.42rem !important;
    gap: 0.48rem !important;
    font-size: 0.88rem !important;
  }}

/* ============================================================
   Help & FAQs section — static <details>/<summary> accordion
   ============================================================ */

.help-faqs__list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.help-faqs__item {
  border: 1px solid rgba(201, 169, 97, 0.32);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 2px 8px rgba(26, 58, 46, 0.04);
  overflow: hidden;
}

.help-faqs__item[open] {
  border-color: rgba(45, 90, 74, 0.35);
}

.help-faqs__question {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--forest-dark);
  list-style: none;
  line-height: 1.4;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Remove default disclosure triangle in all browsers */
.help-faqs__question::-webkit-details-marker {
  display: none;
}

.help-faqs__question::marker {
  display: none;
}

/* Custom open/close indicator */
.help-faqs__question::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gold);
  flex-shrink: 0;
}

.help-faqs__item[open] > .help-faqs__question::after {
  content: '\2212'; /* minus sign */
}

.help-faqs__question:focus-visible {
  outline: 3px solid rgba(201, 169, 97, 0.55);
  outline-offset: -3px;
  border-radius: 10px;
}

.help-faqs__answer {
  padding: 0 1.25rem 1rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--forest-dark);
  border-top: 1px solid rgba(201, 169, 97, 0.2);
}

.help-faqs__answer p {
  margin: 0.75rem 0 0;
}

@media (max-width: 600px) {
  .help-faqs__question {
    padding: 0.9rem 1rem;
    font-size: 1rem;
  }

  .help-faqs__answer {
    padding: 0 1rem 0.9rem;
  }
}