/* The peach feature story is scoped to the homepage tools section. */
.peach-tools { padding-bottom: 24px; }
.peach-tools .section-heading { margin-bottom: 18px; }
.peach-scroll-track { position: relative; }
.peach-stage { --peach-lift: 0px; position: relative; height: clamp(620px,calc(100svh - 88px),760px); padding: 14px 16px 28px; }
.peach-tools.is-enhanced:not(.is-direct) .peach-stage { position: sticky; top: 80px; }
.peach-layout { display: grid; grid-template-columns: minmax(260px,.76fr) minmax(0,1.5fr); align-items: center; gap: clamp(16px,3vw,46px); height: 100%; max-width: 1210px; margin-inline: auto; }
.peach-copy { position: relative; z-index: 5; padding-left: 10px; }
.peach-feature-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 22px; color: var(--purple); font-size: .65rem; letter-spacing: .08em; font-weight: 600; }
.peach-feature-kicker > span:first-child { color: var(--orange); font-size: 1.05rem; }
.peach-kicker-line { width: 24px; height: 1px; background: var(--line); }
.peach-copy h3 { margin: 0 0 18px; color: var(--ink); font: 600 clamp(2.4rem,3.5vw,3.6rem)/1.02 var(--display); letter-spacing: -.035em; }
.peach-feature-promise { max-width: 330px; margin: 0 0 12px; color: var(--orange); font-size: clamp(1.12rem,1.55vw,1.4rem); line-height: 1.3; }
.peach-feature-description { max-width: 330px; min-height: 72px; margin: 0; color: var(--ink); font-size: .96rem; line-height: 1.65; opacity: .8; }
.peach-navigation { display: flex; align-items: center; gap: 8px; margin-top: 28px; }
.peach-navigation[hidden] { display: none; }
.peach-arrow { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); font: 500 1.15rem/1 var(--body); cursor: pointer; }
.peach-arrow:disabled { opacity: .35; cursor: default; }
.peach-dots { display: flex; align-items: center; gap: 0; }
.peach-dot { display: grid; place-items: center; width: 27px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
.peach-dot span { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); opacity: .5; transition: width .2s ease,opacity .2s ease; }
.peach-dot[aria-current="step"] span { width: 18px; border-radius: 5px; background: var(--orange); opacity: 1; }
.peach-dot:focus-visible,.peach-arrow:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 999px; }
.peach-scroll-hint { margin: 14px 0 0; color: var(--purple); font-size: .56rem; letter-spacing: .09em; }
.peach-scroll-hint span { display: inline-block; margin-left: 7px; font-size: 1rem; }
.peach-skip { display: inline-block; margin-top: 17px; color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; font-size: .72rem; opacity: .75; }
.peach-skip:hover { opacity: 1; }
.peach-visual { position: relative; height: 100%; min-height: 540px; isolation: isolate; }
.peach-aura { position: absolute; inset: 3% -4% 1% -5%; z-index: -1; background: radial-gradient(ellipse,rgba(255,174,117,.2),rgba(238,231,255,.35) 47%,transparent 70%); pointer-events: none; }
.peach-wheel-position { position: absolute; top: 50%; right: 2%; width: min(540px,83%); aspect-ratio: 1; transform: translateY(-43%); }
.peach-wheel { position: absolute; inset: 0; transform: rotate(0deg); will-change: transform; }
.peach-cut-definitions { position: absolute; pointer-events: none; }
.peach-slice-wrap { position: absolute; inset: 0; }
.peach-tools:not(.is-direct) .peach-slice-wrap.is-lifted { will-change: transform; }
.peach-slice { position: absolute; inset: 0; }
.peach-slice img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.peach-stone { position: absolute; z-index: 2; inset: 0; clip-path: ellipse(16.2% 23.2% at 51% 50%); }
.peach-stone img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.peach-slice-label { position: absolute; z-index: 2; left: 73%; top: 21%; display: grid; gap: 4px; width: 145px; padding: 12px 14px; border: 1px solid #f2c6a9; border-radius: 15px; color: #392354; background: #fff3dd; box-shadow: 0 10px 28px rgba(122,63,44,.12); transform: translate(calc(-50% + var(--peach-lift) * .6),calc(-50% - var(--peach-lift) * .8)); }
.peach-slice-label span { color: #9b452c; font-size: .6rem; letter-spacing: .12em; }
.peach-slice-label strong { font: 600 1rem/1.1 var(--display); }
.peach-device { container-type: inline-size; position: absolute; z-index: 3; left: 10%; top: 49%; width: min(clamp(250px,24vw,320px),calc((100svh - 160px) * .45)); aspect-ratio: 250/530; padding: 7px; border: 2px solid #b7afc0; border-radius: 44px; background: #1d1924; box-shadow: inset 0 0 0 2px #39313f,0 28px 48px rgba(43,24,75,.24),6px 7px 0 rgba(39,32,95,.06); transform: translateY(-50%) rotate(-4deg); }
.peach-device-side { position: absolute; top: 25%; right: -5px; width: 3px; height: 48px; border-radius: 0 3px 3px 0; background: #766d7d; }
.peach-device-screen { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; padding: 19cqw 5cqw 7cqw; border-radius: 35px; overflow: hidden; color: #27205f; background: linear-gradient(160deg,#fffaf5 0%,#f6edf8 100%); }
.peach-device-status { position: absolute; inset: 4.5cqw 5cqw auto; display: flex; justify-content: space-between; align-items: center; font: 600 3.5cqw/1 var(--body); color: #27202d; }
.peach-device-status i { position: absolute; left: 50%; top: -1cqw; width: 32cqw; height: 8cqw; border-radius: 999px; background: #17131b; transform: translateX(-50%); }
.peach-device-brand { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; gap: 8px; }
.peach-device-brand img { width: 34cqw; height: auto; }
.peach-device-brand > span { font-size: 2.7cqw; letter-spacing: .08em; color: #80718c; }
.peach-phone-panels { position: relative; flex: 1; min-height: 0; margin-top: 5cqw; }
.peach-phone-panel { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4cqw; margin: 0; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease,transform .35s ease,visibility 0s .35s; }
.peach-phone-panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pp-screen-label { flex-shrink: 0; margin: 0; color: #73627e; font-size: 3.7cqw; line-height: 1.3; }
.peach-phone-panel > div:not(.pp-outcome):not(.pp-mini-row) { flex: 1; min-height: 0; }
.pp-outcome { flex-shrink: 0; padding: 4.7cqw; border: 1px solid rgba(73,49,168,.08); border-radius: 6cqw; background: rgba(255,255,255,.93); }
.pp-outcome > span { display: block; margin-bottom: 2cqw; color: #a24d35; font-size: 2.6cqw; font-weight: 600; letter-spacing: .09em; }
.pp-outcome h4 { margin: 0 0 2cqw; color: #27205f; font: 600 7cqw/1.05 var(--display); letter-spacing: -.02em; }
.pp-outcome p { margin: 0; color: #74657f; font-size: 3.5cqw; line-height: 1.4; }
.peach-device-home { position: absolute; bottom: 2.4cqw; left: 50%; width: 30cqw; height: 1.5cqw; border-radius: 10px; background: #27202d; transform: translateX(-50%); }
.pp-cycle { display: flex; flex-direction: column; gap: 3cqw; padding: 5cqw; border-radius: 6cqw; background: #ffe1d9; }
.pp-cycle > span { color: #a85354; font-size: 2.8cqw; letter-spacing: .12em; }
.pp-cycle > strong { color: #8b3457; font: 600 8cqw/1.05 var(--display); }
.pp-calendar { display: grid; grid-template-columns: repeat(7,1fr); gap: 1.8cqw; margin-block: 1cqw; }
.pp-calendar i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; color: #8f5568; background: rgba(255,255,255,.5); font-size: 3.1cqw; font-style: normal; }
.pp-calendar .marked { color: #ffffff; background: #ae416c; }
.pp-cycle small { margin-top: auto; color: #8f5568; font-size: 3cqw; }
.pp-meal { position: relative; overflow: hidden; border-radius: 6cqw; background: #e5edcf; }
.pp-meal img { width: 100%; height: 100%; object-fit: cover; }
.pp-meal > div { position: absolute; inset: auto 3cqw 3cqw; display: grid; gap: 1cqw; padding: 3cqw; border-radius: 4cqw; color: #3b5337; background: rgba(255,255,255,.93); }
.pp-meal strong { font: 600 5.5cqw/1.1 var(--display); }
.pp-meal span { font-size: 3cqw; }
.pp-mini-row { display: flex; flex-shrink: 0; justify-content: center; gap: 2cqw; }
.pp-mini-row span { padding: 2.2cqw 3cqw; border-radius: 999px; color: #6b567b; background: #eee5f5; font-size: 3cqw; }
.pp-body { display: flex; align-items: center; justify-content: center; gap: 2cqw; padding: 3cqw; border-radius: 6cqw; background: #e0efe9; }
.pp-body svg { height: 100%; max-width: 57%; fill: #b4d3c8; }
.pp-body svg .pp-body-dot { fill: #df734b; }
.pp-body > span { color: #365d53; font-size: 5cqw; line-height: 1.15; }
.pp-rest { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqw; padding: 4cqw; border-radius: 6cqw; color: #fff8f2; background: linear-gradient(150deg,#4a3376,#25204d); }
.pp-moon { color: #ffdca3; font-size: 18cqw; line-height: 1; }
.pp-rest > strong { font: 500 8cqw/1 var(--display); text-align: center; }
.pp-rest-bars { display: flex; align-items: end; justify-content: center; gap: 2cqw; width: 100%; height: 13cqw; margin-top: 2cqw; }
.pp-rest-bars i { width: 3.5cqw; border-radius: 2cqw; background: #bba0e7; }
.pp-rest small { margin-top: 2cqw; font-size: 2.8cqw; color: #dfd2f0; }
.pp-peachy { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 3cqw; border-radius: 6cqw; background: #ffe9ce; }
.pp-peachy img { height: 78%; max-width: 90%; object-fit: contain; }
.pp-peachy p { margin: 0; color: #824b40; font-size: 5cqw; }
.pp-care { display: flex; flex-direction: column; gap: 3cqw; padding: 4cqw; border-radius: 6cqw; color: #59436e; background: #e9e1f7; }
.pp-care-icon { color: #80619b; font-size: 10cqw; line-height: 1; }
.pp-care > strong { font: 600 6cqw/1.1 var(--display); }
.pp-care ul { display: grid; gap: 3cqw; margin: 1cqw 0 0; padding: 0; list-style: none; }
.pp-care li { display: flex; align-items: center; gap: 3cqw; font-size: 3.4cqw; }
.pp-care li b { display: grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: 50%; background: #fff; color: #80619b; font-size: 3cqw; }
.pp-care small { margin-top: auto; font-size: 2.7cqw; color: #725d89; }
.pp-movement { display: flex; flex-direction: column; justify-content: center; gap: 6cqw; padding: 5cqw; border-radius: 6cqw; color: #82412c; background: #ffddc2; }
.pp-movement > span { font-size: 20cqw; line-height: .8; }
.pp-movement > strong { font: 600 9cqw/1 var(--display); }
.pp-movement > div { display: flex; gap: 2cqw; }
.pp-movement b { padding: 2cqw; border-radius: 2cqw; background: #fff5e9; font-size: 3cqw; font-weight: 500; }
.pp-movement small { font-size: 3cqw; }
.pp-community { display: flex; flex-direction: column; justify-content: center; gap: 5cqw; padding: 5cqw; border-radius: 6cqw; color: #5c3b78; background: #eadcf7; }
.pp-avatars { display: flex; padding-left: 2cqw; }
.pp-avatars b { display: grid; place-items: center; width: 15cqw; height: 15cqw; margin-left: -2cqw; border: 2px solid #eadcf7; border-radius: 50%; background: #a678ba; color: #fff; font-size: 5cqw; }
.pp-avatars b:nth-child(2n) { background: #dc8c68; }
.pp-community > strong { font: 600 8cqw/1.05 var(--display); }
.pp-community > span { font-size: 3cqw; }
.pp-community-note { padding: 3cqw; border-radius: 3cqw; background: #fff5ff; font-size: 4cqw; line-height: 1.3; }
.peach-preview-note { position: absolute; bottom: 5px; left: 5%; margin: 0; color: var(--ink); font-size: .62rem; opacity: .55; }
.peach-track-progress { position: absolute; right: 16px; bottom: 6px; left: 16px; height: 1px; background: var(--line); }
.peach-track-progress > span { display: block; width: 100%; height: 2px; background: var(--orange); transform: scaleX(.01); transform-origin: left; }
.peach-feature-fallback { max-width: 800px; margin: 30px auto; }
.peach-feature-fallback dt { margin-top: 20px; font-weight: 600; }
.peach-feature-fallback dd { margin: 5px 0 0; }
.peach-tools.is-direct .peach-stage { position: relative; }
.peach-tools.is-direct .peach-wheel { will-change: auto; }
@media (max-width: 1000px) and (min-width: 701px) {
  .peach-layout { grid-template-columns: minmax(230px,.8fr) minmax(0,1.2fr); gap: 12px; }
  .peach-device { width: min(250px,calc((100svh - 160px) * .45)); left: 4%; }
  .peach-slice-label { width: 122px; padding: 10px; }
  .peach-slice-label strong { font-size: .9rem; }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .peach-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-width: 240px; }
  .peach-dots { grid-column: 1/-1; grid-row: 1; justify-content: space-between; }
  .peach-arrow:last-child { justify-self: end; }
}
@media (max-width: 700px) {
  .peach-tools { width: calc(100% - 28px); }
  .peach-tools .section-heading { margin-bottom: 8px; padding-inline: 10px; }
  .peach-stage { height: calc(100svh - 76px); min-height: 550px; max-height: 790px; padding: 4px 6px 16px; }
  .peach-tools.is-enhanced:not(.is-direct) .peach-stage { top: 72px; }
  .peach-layout { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
  .peach-visual { order: -1; flex: 1 1 auto; width: min(440px,100%); height: auto; min-height: 285px; max-height: 410px; }
  .peach-device { left: 5%; top: 48%; width: min(52%,210px,calc((100svh - 320px) * .44)); padding: 5px; border-radius: 31px; transform: translateY(-50%) rotate(-4deg); }
  .peach-device-screen { border-radius: 24px; }
  .peach-device-side { height: 30px; }
  .peach-wheel-position { right: 2%; top: 52%; width: 82%; }
  .peach-slice-label { width: 112px; padding: 9px 11px; border-radius: 12px; }
  .peach-slice-label strong { font-size: .9rem; }
  .peach-slice-label span { font-size: .5rem; }
  .peach-copy { flex: 0 0 auto; width: min(440px,100%); padding: 8px 4px 0; }
  .peach-feature-kicker { margin-bottom: 9px; font-size: .53rem; }
  .peach-feature-kicker > span:first-child { font-size: .8rem; }
  .peach-copy h3 { margin-bottom: 7px; font-size: 1.8rem; }
  .peach-feature-promise { max-width: none; margin-bottom: 5px; font-size: 1rem; }
  .peach-feature-description { max-width: none; min-height: 40px; font-size: .77rem; line-height: 1.45; }
  .peach-navigation { justify-content: flex-start; margin-top: 9px; gap: 4px; }
  .peach-arrow { flex-basis: 30px; width: 30px; height: 32px; }
  .peach-dot { width: 24px; height: 36px; }
  .peach-scroll-hint { display: none; }
  .peach-skip { margin-top: 3px; font-size: .65rem; }
  .peach-preview-note { bottom: 0; left: 5%; font-size: .5rem; }
  .peach-track-progress { bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .peach-phone-panel,.peach-dot span { transition: none; }
  .peach-wheel,.peach-slice-wrap { will-change: auto; }
}