.care-heading {
  max-width: 45rem;
  margin: 0 auto clamp(24px, 3.2vw, 38px);
  text-align: center;
}
.care-guide {
  --care-moss: #34462e;
  --care-sage: #e9efe8;
  --care-border: #d9e1d5;
  --care-accent: #527546;
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 14px;
  max-width: 66rem;
  margin-inline: auto;
}
.care-host, .care-content {
  min-width: 0;
  border: 1px solid var(--care-border);
  border-radius: 24px;
}
.care-host {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 27px;
  margin: 0;
  padding: clamp(20px, 3vw, 30px);
  background: linear-gradient(165deg, #f7f8f2, #eef2ea);
  color: var(--care-moss);
  text-align: center;
}
.care-portrait-wrap {
  position: relative;
  width: min(100%, 13.5rem);
}
.care-portrait {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  padding: 3px;
  border: 1px solid #cfdacf;
  border-radius: 22px;
  background: linear-gradient(150deg, #f8faf6, #dce7d9);
  box-shadow: 0 14px 30px -18px #34462e66, 0 3px 8px #34462e0c;
}
.care-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background: var(--care-sage);
  object-fit: cover;
  object-position: center bottom;
}
.care-presence {
  position: absolute;
  inset: auto 50% -12px auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  transform: translateX(50%);
  border: 1px solid var(--care-border);
  border-radius: 999px;
  background: #fbfcf8;
  box-shadow: 0 3px 10px #34462e18;
  color: var(--care-moss);
  font-size: .6875rem;
  font-weight: 720;
  white-space: nowrap;
}
.care-presence-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--care-accent);
}
.care-presence-dot::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  content: "";
  animation: care-pulse 1.4s .3s 3 ease-out both;
}
@keyframes care-pulse {
  from { opacity: .38; transform: scale(1); }
  to { opacity: 0; transform: scale(2.7); }
}
.care-host figcaption { max-width: 34ch; }
.care-host figcaption > strong {
  display: block;
  font-size: clamp(1.65rem, 3.2vw, 2.15rem);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -.05em;
}
.care-role {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 9px;
  border: 1px solid var(--care-border);
  border-radius: 999px;
  background: var(--care-sage);
  font-size: .73rem;
  font-weight: 660;
}
.care-host figcaption p {
  margin-top: 12px;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.55;
}

.care-content {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3vw, 34px);
  padding: clamp(18px, 3vw, 30px);
  background: #fdfdf9;
  color: var(--care-moss);
}
.care-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.care-guide [hidden] { display: none; }
.care-tabs button {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 4px;
  min-height: 66px;
  min-width: 0;
  padding: 8px clamp(9px, 1.5vw, 14px);
  border: 1px solid var(--care-border);
  border-radius: 12px;
  background: #f6f8f2;
  color: var(--care-moss);
  cursor: pointer;
  text-align: left;
  font-size: .875rem;
  font-weight: 690;
  line-height: 1.25;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.care-tabs button span {
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
  opacity: .87;
  white-space: nowrap;
}
@media (hover: hover) {
  .care-tabs button:hover { border-color: #9aaf92; background: var(--care-sage); }
}
.care-tabs button[aria-selected="true"] {
  border-color: var(--care-moss);
  background: var(--care-moss);
  color: #f8fbf6;
}

.care-panel { margin-block: auto; }
.care-panel h3 {
  max-width: 23ch;
  margin: 8px 0 11px;
  font-size: clamp(1.6rem, 3.25vw, 2.3rem);
  font-weight: 740;
  letter-spacing: -.045em;
  line-height: 1.08;
  text-wrap: balance;
}
.care-panel > p:not(.care-kicker) {
  max-width: 56ch;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.56;
}
.care-kicker {
  color: #47623e;
  font-size: .7rem;
  font-weight: 740;
  letter-spacing: .11em;
}
.care-example {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(8px, 1.3vw, 14px);
  margin-top: 20px;
  padding: clamp(12px, 1.7vw, 19px);
  border: 1px solid var(--care-border);
  border-radius: 17px;
  background: #f2f5ee;
}
.care-request, .care-result {
  padding: clamp(12px, 1.4vw, 16px);
  border: 1px solid var(--care-border);
  border-radius: 12px;
}
.care-request {
  position: relative;
  background: #fff;
}
.care-request::after {
  position: absolute;
  top: calc(50% - 4px);
  right: -5px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border-top: 1px solid var(--care-border);
  border-right: 1px solid var(--care-border);
  background: #fff;
  content: "";
}
.care-arrow { width: 19px; height: 19px; color: var(--care-accent); }
.care-result {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--care-sage);
}
.care-result svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  padding: 2px;
  border-radius: 50%;
  background: #d8e7d4;
  color: #3d6431;
}
.care-example strong { display: block; font-size: .8125rem; line-height: 1.4; }
.care-example p {
  margin-top: 4px;
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.45;
}
.care-panel:not([hidden]) .care-example { animation: care-reveal .23s var(--ease) both; }
@keyframes care-reveal {
  from { opacity: .65; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.care-video-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  margin-top: 3px;
  color: #3c562f;
  font-size: .825rem;
  font-weight: 730;
}
.care-video-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.care-video-link .ui-icon { width: 15px; height: 15px; }

@media (max-width: 800px) {
  .care-guide { grid-template-columns: minmax(0, 1fr); }
  .care-host {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    padding: 23px 26px 29px;
    text-align: left;
  }
}
@media (max-width: 520px) {
  .care-host {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding: 21px;
    text-align: center;
  }
  .care-portrait-wrap { width: min(100%, 11.5rem); }
  .care-content { padding: 16px; }
  .care-tabs { gap: 5px; }
  .care-tabs button { padding-inline: 7px; font-size: .75rem; }
  .care-example { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .care-arrow { justify-self: center; transform: rotate(90deg); }
  .care-request::after {
    inset: auto auto -5px calc(50% - 4px);
    transform: rotate(135deg);
  }
}
@media (max-width: 360px) {
  .care-tabs button { padding-inline: 6px; }
  .care-tabs button span { font-size: .625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .care-tabs button { transition: none; }
  .care-presence-dot::after, .care-panel:not([hidden]) .care-example { animation: none; }
}