/* =========================================================
   TXT-ERS COMPANION — APPROVED MESSAGE PAGE DESIGN

   Desktop:
   - editorial hero
   - overlapping message card
   - three horizontal learning cards
   - three horizontal resources

   Mobile:
   - compact editorial hero
   - overlapping message card
   - stacked learning cards
   - three compact resources in one horizontal row
   ========================================================= */


/* =========================================================
   1. TOKENS
   ========================================================= */

:root {
  --tx-navy: #0b2341;
  --tx-navy-soft: #29415c;
  --tx-copy: #39495c;
  --tx-muted: #6d7887;

  --tx-sage: #4d8f7c;
  --tx-sage-dark: #286959;
  --tx-sage-soft: #e4f1ec;

  --tx-coral: #ee9a7b;
  --tx-coral-soft: #ffe6dc;

  --tx-lavender: #a99bd4;
  --tx-lavender-soft: #eee9f8;

  --tx-cream: #fbf8f3;
  --tx-white: #fffefd;

  --tx-border:
    rgba(28, 46, 69, 0.08);

  --tx-shadow-sm:
    0 8px 24px
    rgba(35, 43, 59, 0.07);

  --tx-shadow-md:
    0 17px 44px
    rgba(35, 43, 59, 0.10);

  --tx-shadow-lg:
    0 26px 68px
    rgba(35, 43, 59, 0.14);

  --tx-radius-sm: 16px;
  --tx-radius-md: 23px;
  --tx-radius-lg: 31px;

  --tx-ease:
    cubic-bezier(0.22, 0.75, 0.24, 1);
}


/* =========================================================
   2. PAGE
   ========================================================= */

html {
  background: var(--tx-cream);
}

body.companion-page {
  min-height: 100vh;

  margin: 0;

  overflow-x: hidden;

  color: var(--tx-navy);

  background:
    radial-gradient(
      circle at 4% 5%,
      rgba(211, 233, 225, 0.38),
      transparent 25%
    ),
    radial-gradient(
      circle at 96% 8%,
      rgba(230, 223, 247, 0.34),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      #f9f7f2 0%,
      #fcfaf6 48%,
      #f8f6f2 100%
    );

  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.companion-shell {
  width:
    min(
      calc(100% - 40px),
      1180px
    );

  margin-inline: auto;
}


/* =========================================================
   3. HEADER
   ========================================================= */

.companion-header {
  padding: 18px 0 12px;

  background: transparent;
}

.companion-header-inner {
  width:
    min(
      calc(100% - 40px),
      1180px
    );

  min-height: 68px;

  margin-inline: auto;
  padding: 10px 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  border:
    1px solid rgba(255, 255, 255, 0.86);

  border-radius: 22px;

  background:
    rgba(255, 254, 252, 0.78);

  box-shadow: var(--tx-shadow-sm);

  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.companion-brand {
  display: inline-flex;
  align-items: center;

  gap: 12px;

  color: var(--tx-navy);

  text-decoration: none;
}

.companion-brand-mark {
  position: relative;

  width: 48px;
  height: 48px;

  flex: 0 0 auto;

  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 3px;

  padding: 8px;

  overflow: hidden;

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      #ffd0bd,
      #b8a9df 57%,
      #75a593
    );

  box-shadow:
    0 10px 23px
    rgba(91, 77, 143, 0.19);
}

.companion-brand-mark i {
  display: block;

  border-radius:
    10px 10px 3px 10px;

  border:
    1px solid
    rgba(255, 255, 255, 0.72);
}

.companion-brand-mark i:nth-child(2),
.companion-brand-mark i:nth-child(3) {
  border-radius:
    10px 3px 10px 10px;
}

.companion-brand-text {
  display: grid;

  gap: 2px;
}

.companion-brand-text strong {
  color: var(--tx-navy);

  font-size: 1.04rem;
  font-weight: 840;
  line-height: 1;
  letter-spacing: -0.025em;
}

.companion-brand-text small {
  color: var(--tx-muted);

  font-size: 0.65rem;
  font-weight: 640;
  line-height: 1.25;
}

.companion-support-link {
  min-height: 46px;

  padding: 6px 7px 6px 14px;

  display: inline-flex;
  align-items: center;

  gap: 10px;

  border-radius: 999px;

  color: var(--tx-navy);

  background:
    rgba(255, 255, 255, 0.70);

  box-shadow:
    0 7px 18px
    rgba(35, 43, 59, 0.06);

  font-size: 0.75rem;
  font-weight: 760;

  text-decoration: none;

  transition:
    transform 180ms var(--tx-ease),
    box-shadow 180ms ease,
    background 180ms ease;
}

.companion-support-link:hover {
  transform: translateY(-1px);

  background: #ffffff;

  box-shadow:
    0 11px 25px
    rgba(35, 43, 59, 0.10);
}

.header-support-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #ffd6c8,
      #f2a78c
    );
}

.header-support-icon img {
  width: 18px;
  height: 18px;
}


/* =========================================================
   4. HERO
   ========================================================= */

.message-banner {
  position: relative;

  min-height: 330px;

  margin-top: 14px;
  padding: 48px;

  display: flex;
  align-items: center;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.90);

  border-radius: var(--tx-radius-lg);

  background:
    linear-gradient(
      135deg,
      #fffaf5 0%,
      #fffdfb 48%,
      #faf8fc 100%
    );

  box-shadow: var(--tx-shadow-md);

  isolation: isolate;
}

.banner-copy {
  position: relative;
  z-index: 4;

  width: min(54%, 620px);

  padding-bottom: 18px;
}

.banner-meta-row {
  display: flex;
  align-items: center;

  gap: 9px;
}

.banner-week {
  min-height: 29px;

  padding: 6px 11px;

  display: inline-flex;
  align-items: center;

  border:
    1px solid
    rgba(47, 119, 100, 0.12);

  border-radius: 999px;

  color: var(--tx-sage-dark);

  background:
    rgba(226, 241, 235, 0.90);

  font-size: 0.65rem;
  font-weight: 850;
  line-height: 1;

  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.banner-meta-dot {
  color: var(--tx-lavender);

  font-size: 1rem;
  line-height: 1;
}

#message-position {
  margin: 0;

  color: var(--tx-muted);

  font-size: 0.74rem;
  font-weight: 690;
}

.message-banner h1 {
  max-width: 600px;

  margin: 21px 0 0;

  color: var(--tx-navy);

  font-size:
    clamp(
      3rem,
      5.1vw,
      4.9rem
    );

  font-weight: 835;
  line-height: 0.98;
  letter-spacing: -0.057em;
}

.banner-title-accent {
  width: 55px;
  height: 6px;

  margin-top: 22px;

  display: block;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--tx-sage),
      #79ad9c
    );
}

.banner-art {
  position: absolute;

  right: 0;
  bottom: 0;

  z-index: 2;

  width: 54%;
  height: 100%;

  overflow: hidden;

  pointer-events: none;
}

.hero-background {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  overflow: visible;
}

.hero-tree {
  position: absolute;

  right: 1%;
  bottom: -4%;

  z-index: 5;

  width: auto;
  height: 88%;

  display: block;

  object-fit: contain;

  opacity: 0.96;

  transform:
    rotate(-6deg);

  transform-origin:
    bottom center;

  filter:
    drop-shadow(
      0 12px 18px
      rgba(16, 58, 45, 0.12)
    );

  pointer-events: none;

  user-select: none;
  -webkit-user-drag: none;
}
.message-progress {
  position: absolute;

  left: 48px;
  bottom: 26px;

  z-index: 5;
}


/* =========================================================
   5. MESSAGE CARD
   ========================================================= */

.current-message-card {
  position: relative;
  z-index: 6;

  margin-top: -47px;
  padding: 28px 34px;

  display: grid;

  grid-template-columns:
    76px
    minmax(0, 1fr)
    54px;

  gap: 23px;

  align-items: center;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.96);

  border-radius: var(--tx-radius-md);

  background:
    rgba(255, 255, 255, 0.96);

  box-shadow: var(--tx-shadow-lg);
}

.current-message-card::after {
  position: absolute;

  right: -44px;
  bottom: -58px;

  width: 164px;
  height: 124px;

  content: "";

  border-radius:
    110px 0 0 0;

  background:
    rgba(215, 232, 224, 0.48);

  pointer-events: none;
}

.message-card-icon {
  width: 76px;
  height: 76px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #548f7e,
      #2d6d5e
    );

  box-shadow:
    0 14px 30px
    rgba(45, 109, 94, 0.22);
}

.message-card-icon img {
  width: 31px;
  height: 31px;

  filter:
    brightness(0)
    invert(1);
}

.current-message-content {
  position: relative;
  z-index: 2;

  min-width: 0;
}

.message-card-heading {
  margin: 0 0 7px;

  color: var(--tx-sage-dark);

  font-size: 0.62rem;
  font-weight: 860;

  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.current-message-card blockquote {
  max-width: 820px;

  margin: 0;

  color: var(--tx-navy);

  font-size:
    clamp(
      1.05rem,
      1.75vw,
      1.38rem
    );

  font-weight: 660;
  line-height: 1.5;
  letter-spacing: -0.018em;
}

.message-instructions {
  margin: 10px 0 0;

  color: var(--tx-muted);

  font-size: 0.71rem;
  line-height: 1.5;
}

.message-protection-icon {
  position: relative;
  z-index: 2;

  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(237, 232, 248, 0.78);
}

.message-protection-icon img {
  width: 24px;
  height: 24px;
}


/* =========================================================
   6. LEARNING CARDS
   ========================================================= */

.core-card-grid {
  margin-top: 23px;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 17px;

  align-items: stretch;
}

.core-card {
  position: relative;

  min-width: 0;
  min-height: 285px;

  padding: 23px;

  display: grid;

  grid-template-columns:
    56px
    minmax(0, 1fr);

  grid-template-rows:
    auto 1fr;

  gap:
    15px
    16px;

  align-content: start;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.94);

  border-radius: var(--tx-radius-md);

  box-shadow: var(--tx-shadow-sm);

  transition:
    transform 190ms var(--tx-ease),
    box-shadow 190ms ease;
}

.core-card:hover {
  transform: translateY(-3px);

  box-shadow: var(--tx-shadow-md);
}

.core-card::before {
  position: absolute;

  right: 18px;
  top: 24px;

  width: 65px;
  height: 52px;

  content: "";

  opacity: 0.30;

  background-image:
    radial-gradient(
      circle,
      currentColor 1.4px,
      transparent 1.9px
    );

  background-size:
    14px 14px;

  pointer-events: none;
}

.core-card::after {
  position: absolute;

  right: -25px;
  bottom: -33px;

  width: 121px;
  height: 91px;

  content: "";

  border-radius:
    92px 0 0 0;

  pointer-events: none;
}

.why-core-card {
  color: var(--tx-sage);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.97),
      rgba(237, 247, 243, 0.96)
    );
}

.why-core-card::after {
  background:
    rgba(155, 198, 182, 0.44);
}

.think-core-card {
  color: var(--tx-coral);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.97),
      rgba(255, 241, 234, 0.96)
    );
}

.think-core-card::after {
  background:
    rgba(249, 171, 143, 0.48);
}

.try-core-card {
  color: var(--tx-lavender);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.97),
      rgba(242, 238, 250, 0.96)
    );
}

.try-core-card::after {
  background:
    rgba(182, 170, 222, 0.48);
}

.core-icon {
  position: relative;
  z-index: 2;

  width: 56px;
  height: 56px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  box-shadow:
    0 10px 22px
    rgba(34, 43, 58, 0.08);
}

.core-icon img {
  width: 26px;
  height: 26px;
}

.purple-core-icon {
  background: var(--tx-sage-soft);
}

.orange-core-icon {
  background: var(--tx-coral-soft);
}

.green-core-icon {
  background: var(--tx-lavender-soft);
}

.core-card-content-block {
  position: relative;
  z-index: 2;

  min-width: 0;
}

.core-card h2 {
  margin: 3px 0 0;

  color: var(--tx-navy);

  font-size: 1.08rem;
  font-weight: 820;
  line-height: 1.2;
  letter-spacing: -0.028em;
}

.core-title-accent {
  width: 28px;
  height: 4px;

  margin-top: 10px;

  display: block;

  border-radius: 999px;

  background: currentColor;
}

.core-card p {
  margin: 19px 0 0;

  color: var(--tx-copy);

  font-size: 0.81rem;
  line-height: 1.64;
}

.core-card-arrow {
  position: absolute;

  right: 21px;
  bottom: 18px;

  z-index: 2;

  color: var(--tx-navy);

  font-size: 1.1rem;
  font-weight: 700;

  opacity: 0.72;
}

.companion-card-link {
  min-height: 40px;

  margin-top: 17px;
  padding: 6px 0;

  display: inline-flex;
  align-items: center;

  gap: 9px;

  border: 0;

  background: transparent;

  color: var(--tx-navy);

  font: inherit;
  font-size: 0.73rem;
  font-weight: 790;

  cursor: pointer;
}

.companion-card-link span {
  font-size: 1.12rem;

  transition:
    transform 180ms var(--tx-ease);
}

.companion-card-link:hover span {
  transform: translateX(4px);
}


/* =========================================================
   7. ACTIVITY CARD FRONT
   ========================================================= */

.try-core-card.activity-card {
  min-height: 285px;

  padding: 0;

  display: block;

  overflow: visible;

  background: transparent;

  box-shadow: none;
}

.try-core-card.activity-card:hover {
  transform: none;

  box-shadow: none;
}

.try-core-card.activity-card::before,
.try-core-card.activity-card::after {
  display: none;
}

.activity-card-front {
  min-height: 285px;

  padding: 23px;

  display: grid;

  grid-template-columns:
    56px
    minmax(0, 1fr);

  gap: 16px;

  border:
    1px solid
    rgba(255, 255, 255, 0.94);

  border-radius: var(--tx-radius-md);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.97),
      rgba(242, 238, 250, 0.96)
    );

  box-shadow: var(--tx-shadow-sm);
}

.activity-card-front::before {
  position: absolute;

  right: 18px;
  top: 24px;

  width: 65px;
  height: 52px;

  content: "";

  opacity: 0.29;

  background-image:
    radial-gradient(
      circle,
      rgba(120, 104, 177, 0.88)
      1.4px,
      transparent 1.9px
    );

  background-size:
    14px 14px;

  pointer-events: none;
}

.activity-card-front::after {
  right: -25px;
  bottom: -33px;

  width: 121px;
  height: 91px;

  border-radius:
    92px 0 0 0;

  background:
    rgba(182, 170, 222, 0.48);
}


/* =========================================================
   8. EXPLORE MORE
   ========================================================= */

.explore-section {
  margin-top: 31px;
}

.explore-heading {
  margin-bottom: 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;
}

.explore-heading h2 {
  margin: 0;

  color: var(--tx-navy);

  font-size: 1.24rem;
  font-weight: 830;
  letter-spacing: -0.03em;
}

.explore-view-all {
  color: var(--tx-sage-dark);

  font-size: 0.7rem;
  font-weight: 780;
}

.resource-card-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 16px;
}

.reflection-resource-card {
  position: relative;

  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.93);

  border-radius: var(--tx-radius-md);

  background: var(--tx-white);

  box-shadow: var(--tx-shadow-sm);

  text-decoration: none;

  transition:
    transform 190ms var(--tx-ease),
    box-shadow 190ms ease;
}

.reflection-resource-card:hover {
  transform: translateY(-3px);

  box-shadow: var(--tx-shadow-md);
}

.reflection-resource-card img,
.resource-thumbnail,
.resource-card-image {
  width: 100%;
  height: 142px;

  display: block;

  object-fit: cover;

  transition:
    transform 280ms var(--tx-ease);
}

.reflection-resource-card:hover img {
  transform: scale(1.025);
}

.resource-card-content {
  padding: 14px 16px 17px;
}

.resource-type,
.resource-eyebrow {
  color: var(--tx-sage-dark);

  font-size: 0.59rem;
  font-weight: 850;

  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.resource-card-content h3 {
  margin: 7px 0 0;

  color: var(--tx-navy);

  font-size: 0.84rem;
  font-weight: 790;
  line-height: 1.3;
}

.resource-card-content p {
  margin: 6px 0 0;

  color: var(--tx-muted);

  font-size: 0.65rem;
  line-height: 1.45;
}

.resource-action {
  color: var(--tx-sage-dark);

  font-size: 0.66rem;
  font-weight: 790;
}


/* =========================================================
   9. TAKEAWAY
   ========================================================= */

.takeaway-card {
  margin-top: 21px;
  padding: 20px 23px;

  display: grid;

  grid-template-columns:
    46px
    minmax(0, 1fr);

  gap: 14px;

  align-items: center;

  border:
    1px solid
    rgba(255, 255, 255, 0.94);

  border-radius: var(--tx-radius-md);

  background:
    linear-gradient(
      145deg,
      rgba(237, 247, 243, 0.96),
      rgba(247, 243, 252, 0.95)
    );

  box-shadow: var(--tx-shadow-sm);
}

.takeaway-icon {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      var(--tx-sage),
      #78ab9b
    );

  color: #ffffff;
}

.takeaway-label {
  margin: 0;

  color: var(--tx-sage-dark);

  font-size: 0.62rem;
  font-weight: 850;

  text-transform: uppercase;
  letter-spacing: 0.10em;
}

.takeaway-text {
  margin: 5px 0 0;

  color: var(--tx-navy);

  font-size: 0.83rem;
  font-weight: 680;
  line-height: 1.45;
}


/* =========================================================
   10. SUPPORT CARD
   ========================================================= */

.companion-support-card {
  position: relative;

  margin: 21px 0 44px;
  padding: 22px 26px;

  display: grid;

  grid-template-columns:
    58px
    minmax(0, 1fr)
    minmax(190px, 0.62fr)
    43px;

  gap: 17px;

  align-items: center;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.92);

  border-radius: var(--tx-radius-md);

  background:
    linear-gradient(
      145deg,
      rgba(238, 232, 249, 0.95),
      rgba(250, 247, 252, 0.96)
    );

  box-shadow: var(--tx-shadow-sm);
}

.companion-support-card::after {
  position: absolute;

  right: -31px;
  bottom: -42px;

  width: 139px;
  height: 108px;

  content: "";

  border-radius:
    105px 0 0 0;

  background:
    rgba(186, 171, 224, 0.32);

  pointer-events: none;
}

.support-heart {
  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #6754a8,
      #8d78ca
    );

  box-shadow:
    0 12px 26px
    rgba(91, 73, 156, 0.20);
}

.support-heart img {
  width: 28px;
  height: 28px;

  filter:
    brightness(0)
    invert(1);
}

.support-copy,
.support-secondary,
.support-arrow {
  position: relative;
  z-index: 2;
}

.support-copy strong,
.support-secondary strong {
  color: var(--tx-navy);

  font-size: 0.86rem;
  font-weight: 810;
}

.support-copy p,
.support-secondary p {
  margin: 4px 0 0;

  color: var(--tx-muted);

  font-size: 0.68rem;
  line-height: 1.48;
}

.support-arrow {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: var(--tx-navy);

  background:
    rgba(255, 255, 255, 0.72);

  font-size: 1.2rem;

  text-decoration: none;
}


/* =========================================================
   11. TABLET
   ========================================================= */

@media screen and (max-width: 900px) {
  .message-banner {
    min-height: 295px;

    padding: 40px 34px;
  }

  .banner-copy {
    width: 58%;
  }

  .banner-art {
  width: 58%;
}

.hero-tree {
  right: 0;
  bottom: -3%;

  height: 84%;
}

  .current-message-card {
    padding: 24px;

    grid-template-columns:
      68px
      minmax(0, 1fr);

    margin-top: -36px;
  }

  .message-card-icon {
    width: 68px;
    height: 68px;
  }

  .message-protection-icon {
    display: none;
  }

  .core-card {
    min-height: 305px;

    padding: 20px;

    grid-template-columns:
      50px
      minmax(0, 1fr);
  }

  .core-icon {
    width: 50px;
    height: 50px;
  }

  .activity-card-front {
    min-height: 305px;

    padding: 20px;

    grid-template-columns:
      50px
      minmax(0, 1fr);
  }

  .companion-support-card {
    grid-template-columns:
      55px
      minmax(0, 1fr)
      42px;
  }

  .support-secondary {
    display: none;
  }
}


/* =========================================================
   12. MOBILE
   ========================================================= */

@media screen and (max-width: 600px) {
  .companion-shell,
  .companion-header-inner {
    width:
      calc(100% - 22px);
  }

  .companion-header {
    padding: 9px 0 6px;
  }

  .companion-header-inner {
    min-height: 60px;

    padding: 8px 10px;

    border-radius: 18px;
  }

  .companion-brand-mark {
    width: 41px;
    height: 41px;

    padding: 7px;

    border-radius: 13px;
  }

  .companion-brand-text strong {
    font-size: 0.92rem;
  }

  .companion-brand-text small {
    font-size: 0.58rem;
  }

  .companion-support-link {
    padding: 4px;

    box-shadow: none;
  }

  .companion-support-link > span:first-child {
    display: none;
  }

  .header-support-icon {
    width: 38px;
    height: 38px;
  }

  .message-banner {
    min-height: 242px;

    margin-top: 8px;
    padding: 25px 21px;

    align-items: flex-start;

    border-radius: 23px;
  }

  .banner-copy {
    width: 66%;

    padding-bottom: 0;
  }

  .banner-meta-row {
    gap: 6px;
  }

  .banner-week {
    min-height: 25px;

    padding: 5px 8px;

    font-size: 0.56rem;
  }

  #message-position {
    font-size: 0.61rem;
  }

  .message-banner h1 {
    margin-top: 15px;

    font-size:
      clamp(
        2rem,
        10.5vw,
        2.7rem
      );

    line-height: 1;
  }

  .banner-title-accent {
    width: 42px;
    height: 5px;

    margin-top: 15px;
  }

  .banner-art {
  right: -9%;
  bottom: 0;

  width: 72%;
  height: 100%;

  transform: none;
}

.hero-tree {
  right: 1%;
  bottom: -2%;

  height: 75%;

  transform:
    rotate(-5deg);
}

  .message-progress {
    left: 21px;
    bottom: 17px;
  }

  .current-message-card {
    margin-top: -17px;
    padding: 18px;

    grid-template-columns:
      57px
      minmax(0, 1fr);

    gap: 14px;

    border-radius: 20px;
  }

  .message-card-icon {
    width: 57px;
    height: 57px;
  }

  .message-card-icon img {
    width: 25px;
    height: 25px;
  }

  .message-card-heading {
    margin-bottom: 5px;

    font-size: 0.54rem;
  }

  .current-message-card blockquote {
    font-size: 0.88rem;
    line-height: 1.52;
  }

  .message-instructions {
    font-size: 0.61rem;
  }

  .core-card-grid {
    margin-top: 14px;

    grid-template-columns:
      minmax(0, 1fr);

    gap: 11px;
  }

  .core-card {
    min-height: 0;

    padding: 17px;

    grid-template-columns:
      49px
      minmax(0, 1fr);

    gap: 13px;

    border-radius: 19px;
  }

  .core-card:hover {
    transform: none;
  }

  .core-card::before {
    right: 14px;
    top: 17px;

    width: 52px;
    height: 42px;

    background-size:
      12px 12px;
  }

  .core-card::after {
    right: -21px;
    bottom: -26px;

    width: 96px;
    height: 71px;
  }

  .core-icon {
    width: 49px;
    height: 49px;
  }

  .core-icon img {
    width: 23px;
    height: 23px;
  }

  .core-card h2 {
    font-size: 0.98rem;
  }

  .core-title-accent {
    margin-top: 7px;
  }

  .core-card p {
    margin-top: 13px;

    padding-right: 19px;

    font-size: 0.72rem;
    line-height: 1.56;
  }

  .companion-card-link {
    min-height: 36px;

    margin-top: 10px;

    font-size: 0.67rem;
  }

  .core-card-arrow {
    right: 16px;
    bottom: 13px;

    font-size: 1rem;
  }

  .try-core-card.activity-card {
    min-height: 0;
  }

  .activity-card-front {
    min-height: 0;

    padding: 17px;

    grid-template-columns:
      49px
      minmax(0, 1fr);

    gap: 13px;

    border-radius: 19px;
  }

  .explore-section {
    margin-top: 22px;
  }

  .explore-heading {
    margin-bottom: 10px;
  }

  .explore-heading h2 {
    font-size: 1.04rem;
  }

  .explore-view-all {
    font-size: 0.62rem;
  }

  .resource-card-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 7px;
  }

  .reflection-resource-card {
    border-radius: 13px;
  }

  .reflection-resource-card img,
  .resource-thumbnail,
  .resource-card-image {
    height: 78px;
  }

  .resource-card-content {
    padding: 8px 8px 10px;
  }

  .resource-type,
  .resource-eyebrow {
    font-size: 0.43rem;
  }

  .resource-card-content h3 {
    margin-top: 4px;

    font-size: 0.56rem;
    line-height: 1.25;
  }

  .resource-card-content p {
    display: none;
  }

  .resource-action {
    font-size: 0.49rem;
  }

  .takeaway-card {
    margin-top: 15px;
    padding: 16px;

    grid-template-columns:
      40px
      minmax(0, 1fr);

    gap: 12px;

    border-radius: 18px;
  }

  .takeaway-icon {
    width: 40px;
    height: 40px;
  }

  .takeaway-label {
    font-size: 0.52rem;
  }

  .takeaway-text {
    font-size: 0.71rem;
  }

  .companion-support-card {
    margin: 15px 0 27px;
    padding: 17px;

    grid-template-columns:
      47px
      minmax(0, 1fr)
      36px;

    gap: 11px;

    border-radius: 19px;
  }

  .support-heart {
    width: 47px;
    height: 47px;
  }

  .support-heart img {
    width: 23px;
    height: 23px;
  }

  .support-copy strong {
    font-size: 0.76rem;
  }

  .support-copy p {
    font-size: 0.60rem;
  }

  .support-arrow {
    width: 36px;
    height: 36px;

    font-size: 1rem;
  }
}


/* =========================================================
   13. SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 390px) {
  .message-banner {
    min-height: 226px;

    padding: 22px 18px;
  }

  .banner-copy {
    width: 68%;
  }

  .message-banner h1 {
    font-size: 1.91rem;
  }

  .banner-art {
  right: -12%;

  width: 78%;
}

.hero-tree {
  right: 0;

  height: 72%;
}

  .current-message-card {
    padding: 16px;

    grid-template-columns:
      52px
      minmax(0, 1fr);

    gap: 12px;
  }

  .message-card-icon {
    width: 52px;
    height: 52px;
  }

  .core-card,
  .activity-card-front {
    padding: 15px;

    grid-template-columns:
      46px
      minmax(0, 1fr);

    gap: 12px;
  }

  .core-icon {
    width: 46px;
    height: 46px;
  }

  .core-card p {
    padding-right: 14px;

    font-size: 0.69rem;
  }

  .reflection-resource-card img,
  .resource-thumbnail,
  .resource-card-image {
    height: 70px;
  }

  .resource-card-content h3 {
    font-size: 0.51rem;
  }
}


/* =========================================================
   14. REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion: reduce
) {
  .companion-support-link,
  .core-card,
  .companion-card-link span,
  .reflection-resource-card,
  .reflection-resource-card img {
    transition: none;
  }

  .core-card:hover,
  .reflection-resource-card:hover,
  .companion-support-link:hover {
    transform: none;
  }
}

/* =========================================================
   15. FINAL APPROVED-DESIGN POLISH
   ========================================================= */


/* =========================================================
   HERO ART REFINEMENT
   ========================================================= */

.banner-art {
  overflow: visible;
}

.banner-art svg {
  overflow: visible;
}


/* Make the three background shapes feel less rigid */

.banner-art path[fill="url(#hero-coral)"] {
  opacity: 0.88;
}

.banner-art path[fill="url(#hero-lavender)"] {
  opacity: 0.86;
}

.banner-art path[fill="url(#hero-sage)"] {
  opacity: 0.94;
}


/* =========================================================
   RESOURCE CARD RESET

   Removes legacy ribbon/icon distortion and keeps all
   labels and icons inside the resource card.
   ========================================================= */

.resource-card-grid {
  position: relative;

  width: 100%;
  min-width: 0;

  align-items: stretch;
}

.reflection-resource-card {
  position: relative;

  width: 100%;
  min-width: 0;
  height: auto !important;
  max-height: none !important;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  box-sizing: border-box;
}

.resource-thumbnail {
  position: relative;

  width: 100%;
  min-width: 0;
  height: auto;

  aspect-ratio: 16 / 9;

  flex: 0 0 auto;

  overflow: hidden;

  border-radius:
    var(--tx-radius-md)
    var(--tx-radius-md)
    0
    0;

  background: #eeeae3;
}

.resource-thumbnail > img:first-child,
.reflection-resource-card
  > img:first-child {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  transform: none;

  border-radius: 0;
}


/* Remove old decorative ribbons that distort the cards */

.resource-thumbnail::before,
.resource-thumbnail::after,
.resource-card-content::before,
.resource-card-content::after {
  max-width: 100%;
}


/* Resource text area */

.resource-card-content {
  position: relative;

  width: 100%;
  min-width: 0;
  height: auto !important;
  max-height: none !important;

  flex: 1 1 auto;

  padding:
    13px
    42px
    15px
    15px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  overflow: hidden;

  box-sizing: border-box;
}


/* READ / WATCH / EXPLORE badge */

.resource-type-badge {
  position: relative;
  z-index: 4;

  width: fit-content;
  max-width: calc(100% - 4px);
  min-height: 18px;

  margin: 0;
  padding: 0;

  display: inline-flex;
  align-items: center;

  gap: 6px;

  overflow: visible;

  border: 0;

  background: transparent !important;

  white-space: nowrap;
}

.resource-type-icon {
  width: 16px !important;
  height: 16px !important;

  min-width: 16px;
  max-width: 16px;

  flex: 0 0 16px;

  display: block;

  object-fit: contain !important;
  object-position: center;

  transform: none !important;

  filter: none !important;

  border-radius: 0 !important;
}

.resource-type-text {
  min-width: 0;

  display: inline-block;

  color: var(--tx-sage-dark);

  font-size: 0.58rem;
  font-weight: 850;
  line-height: 1;

  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* Resource title */

.reflection-resource-card h3 {
  min-width: 0;

  margin: 7px 0 0;

  color: var(--tx-navy);

  font-size: 0.82rem;
  font-weight: 790;
  line-height: 1.28;

  display: -webkit-box;

  overflow: hidden;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  overflow-wrap: anywhere;
}


/* Keep source and action from covering one another */

.resource-source {
  max-width: calc(100% - 6px);

  margin: 6px 0 0;

  color: var(--tx-muted);

  font-size: 0.62rem;
  line-height: 1.25;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resource-action {
  position: absolute;

  right: 13px;
  bottom: 13px;
  top: auto;

  z-index: 6;

  width: 27px;
  height: 27px;

  margin: 0;
  padding: 0;

  display: grid;
  place-items: center;

  transform: none;

  overflow: hidden;

  border-radius: 50%;

  color: var(--tx-sage-dark);

  background:
    rgba(231, 241, 237, 0.94);

  font-size: 0;
  line-height: 1;

  box-shadow:
    0 5px 13px
    rgba(43, 86, 70, 0.10);
}

.resource-action::after {
  content: "›";

  display: block;

  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;

  transform:
    translateY(-1px);
}

.reflection-resource-card.is-opened
  .resource-action::before {
  content: "✓";

  display: block;

  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.reflection-resource-card.is-opened
  .resource-action::after {
  display: none;
}


/* =========================================================
   CARD OVERLAP SAFEGUARDS
   ========================================================= */

.core-card-grid,
.core-card,
.try-core-card.activity-card,
.activity-card-frame,
.activity-card-front {
  box-sizing: border-box;
}

.core-card-grid {
  position: relative;

  isolation: isolate;
}

.core-card,
.try-core-card.activity-card {
  position: relative;

  width: 100%;
  max-width: 100%;

  margin: 0;

  z-index: 1;
}

.core-card:hover {
  z-index: 3;
}

.activity-card-frame {
  width: 100%;
  max-width: 100%;

  margin: 0;
}

.activity-card-front {
  width: 100%;
  max-width: 100%;
}


/* =========================================================
   MOBILE FIXES
   ========================================================= */

@media screen and (max-width: 600px) {
  .core-card-grid {
    width: 100%;
    max-width: 100%;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 16px !important;

    overflow: visible;

    padding: 0;

    box-sizing: border-box;
  }

  .core-card,
  .try-core-card.activity-card {
    width: 100% !important;
    max-width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;

    transform: none !important;

    box-sizing: border-box;
  }

  .activity-card-frame,
  .activity-card-front {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    box-sizing: border-box;
  }

  .core-card + .core-card,
  .core-card + .activity-card,
  .activity-card + .core-card {
    margin-top: 0 !important;
  }


  /* Three compact resources remain in one row */

  .resource-card-grid {
    width: 100%;
    max-width: 100%;

    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap: 9px !important;

    overflow: visible !important;

    padding: 0 0 4px !important;

    box-sizing: border-box;
  }

  .reflection-resource-card {
    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    height: auto !important;
    max-height: none !important;

    flex: initial !important;

    border-radius: 13px;

    box-sizing: border-box;
  }

  .resource-thumbnail {
    height: 76px;

    flex-basis: 76px;

    border-radius:
      13px
      13px
      0
      0;
  }

  .resource-card-content {
    min-height: 76px;

    padding:
      8px
      24px
      9px
      8px;
  }

  .resource-type-badge {
    gap: 3px;

    max-width: 100%;
  }

  .resource-type-icon {
    width: 11px !important;
    height: 11px !important;

    min-width: 11px;
    max-width: 11px;

    flex-basis: 11px;
  }

  .resource-type-text {
    font-size: 0.42rem;

    letter-spacing: 0.045em;
  }

  .reflection-resource-card h3 {
    margin-top: 4px;

    font-size: 0.54rem;
    line-height: 1.24;

    -webkit-line-clamp: 3;
  }

  .resource-source {
    display: none;
  }

  .resource-action {
    right: 6px;
    bottom: 7px;

    width: 19px;
    height: 19px;
  }

  .resource-action::after {
    font-size: 0.92rem;
  }

  .reflection-resource-card.is-opened
    .resource-action::before {
    font-size: 0.58rem;
  }
}


/* =========================================================
   SMALL PHONE SAFETY
   ========================================================= */

@media screen and (max-width: 390px) {
  .core-card-grid {
    gap: 14px !important;
  }

  .resource-card-grid {
    gap: 7px !important;
  }

  .resource-thumbnail {
    height: 68px;

    flex-basis: 68px;
  }

  .resource-card-content {
    min-height: 70px;

    padding:
      7px
      20px
      8px
      7px;
  }

  .resource-type-icon {
    width: 10px !important;
    height: 10px !important;

    min-width: 10px;
    max-width: 10px;

    flex-basis: 10px;
  }

  .resource-type-text {
    font-size: 0.38rem;
  }

  .reflection-resource-card h3 {
    font-size: 0.49rem;
  }
}

/* =========================================================
   DEFINITIVE HERO ART LAYERS
   ========================================================= */

.banner-art {
  position: absolute;
  right: 0;
  bottom: 0;

  z-index: 2;

  width: 54%;
  height: 100%;

  overflow: hidden;
  isolation: isolate;

  pointer-events: none;
}

.hero-background {
  position: absolute;
  inset: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  display: block !important;

  opacity: 1 !important;
  visibility: visible !important;

  overflow: hidden;

  pointer-events: none;
}

.hero-shape {
  display: block;

  opacity: 1;
  visibility: visible;
}

.hero-shape-coral {
  opacity: 0.9;
}

.hero-shape-lavender {
  opacity: 0.9;
}

.hero-shape-sage {
  opacity: 0.96;
}

.hero-contours,
.hero-dot-pattern {
  display: block;

  visibility: visible;
}

.hero-tree {
  position: absolute;

  right: 4%;
  bottom: -3%;

  z-index: 2;

  width: auto;
  height: 86%;

  display: block;

  opacity: 0.96;

  transform: rotate(-5deg);
  transform-origin: bottom center;

  filter:
    drop-shadow(
      0 12px 18px
      rgba(16, 58, 45, 0.12)
    );

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

@media screen and (max-width: 900px) {
  .banner-art {
    width: 58%;
  }

  .hero-tree {
    right: 2%;
    bottom: -2%;

    height: 82%;
  }
}

@media screen and (max-width: 600px) {
  .banner-art {
    right: -9%;
    bottom: 0;

    width: 72%;
    height: 100%;
  }

  .hero-tree {
    right: 3%;
    bottom: -1%;

    height: 73%;

    transform: rotate(-4deg);
  }
}

@media screen and (max-width: 390px) {
  .banner-art {
    right: -12%;

    width: 78%;
  }

  .hero-tree {
    right: 2%;

    height: 70%;
  }
}

/* =========================================================
   MOBILE RESOURCE CAROUSEL

   Full-size resource cards that scroll horizontally.
   No hero or tree changes.
   ========================================================= */

@media screen and (max-width: 600px) {
  .resource-card-grid {
    width: 100%;
    max-width: 100%;

    display: flex !important;

    grid-template-columns: none !important;

    align-items: stretch;

    gap: 12px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding:
      2px
      18px
      14px
      1px !important;

    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1px;

    overscroll-behavior-x: contain;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    box-sizing: border-box;
  }

  .resource-card-grid::-webkit-scrollbar {
    display: none;
  }

  .reflection-resource-card {
    /*
     * Full readable card with a small portion of the
     * next card visible as a scrolling cue.
     */
    flex:
      0 0
      min(82vw, 300px) !important;

    width:
      min(82vw, 300px) !important;

    min-width:
      min(82vw, 300px) !important;

    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    scroll-snap-align: start;

    border-radius: 20px;

    box-sizing: border-box;
  }

  .resource-thumbnail {
    width: 100%;

    height: auto !important;

    aspect-ratio: 16 / 9;

    flex: 0 0 auto !important;

    overflow: hidden;

    border-radius:
      20px
      20px
      0
      0;
  }

  .resource-thumbnail > img:first-child,
  .reflection-resource-card
    > img:first-child,
  .resource-card-image {
    width: 100% !important;
    height: 100% !important;

    display: block;

    object-fit: cover;
    object-position: center;

    transform: none;
  }

  .resource-card-content {
    width: 100%;

    min-height: 112px;

    padding:
      14px
      46px
      16px
      15px;

    box-sizing: border-box;
  }

  .resource-type-badge {
    min-height: 18px;

    gap: 6px;

    max-width: 100%;
  }

  .resource-type-icon {
    width: 16px !important;
    height: 16px !important;

    min-width: 16px;
    max-width: 16px;

    flex: 0 0 16px;
  }

  .resource-type-text,
  .resource-type,
  .resource-eyebrow {
    font-size: 0.58rem;

    letter-spacing: 0.08em;
  }

  .reflection-resource-card h3,
  .resource-card-content h3 {
    margin-top: 7px;

    font-size: 0.82rem;
    line-height: 1.3;

    -webkit-line-clamp: 2;
  }

  .resource-card-content p,
  .resource-source {
    display: block;

    margin-top: 6px;

    font-size: 0.62rem;
    line-height: 1.35;
  }

  .resource-action {
    right: 13px;
    bottom: 13px;

    width: 28px;
    height: 28px;
  }

  .resource-action::after {
    font-size: 1.15rem;
  }

  .reflection-resource-card.is-opened
    .resource-action::before {
    font-size: 0.72rem;
  }
}

@media screen and (max-width: 390px) {
  .resource-card-grid {
    gap: 11px !important;

    padding-right: 15px !important;
  }

  .reflection-resource-card {
    flex:
      0 0
      84vw !important;

    width:
      84vw !important;

    min-width:
      84vw !important;
  }
}