/* A real screen, with the feature that explains it immediately beside it. */
.features-section { background: #f1f2e9; border-block: 0; position: relative; }
.features-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 90px); }
.features-copy h2 { font-size: clamp(42px, 4.6vw, 62px); line-height: 1.07; margin: 20px 0; }
.features-copy .muted-heading { color: #6c816a; }
.features-copy .section-intro { max-width: 360px; }
.feature-choice-list { display: grid; margin-top: 26px; gap: 8px; }
.feature-choice { display: grid; grid-template-columns: 27px minmax(0, 1fr) 22px; gap: 13px; align-items: start; position: relative; padding: 18px 17px; border: 1px solid #c5d1bf; border-radius: 16px; background: #faf7f280; color: #303d35; transition: background .3s, border-color .3s, box-shadow .3s; }
.feature-choice-number { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #adbea6; border-radius: 50%; color: #426653; font-size: 10px; font-variant-numeric: tabular-nums; }
.feature-choice-copy { display: grid; gap: 5px; }
.feature-choice-copy strong { font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -.025em; }
.feature-choice-copy > span { color: #606f63; font-size: 13px; line-height: 1.7; }
.feature-choice-copy small { color: #426653; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.feature-choice .feature-choice-arrow { width: 18px; height: 18px; margin-top: 4px; color: #426653; rotate: -35deg; transition: rotate .3s; }
.feature-choice:hover { background: #fffdfa; border-color: #799273; }
.feature-choice[aria-current="true"] { background: #fffdfa; border-color: #71876c; box-shadow: 0 5px 15px #303d3508; }
.feature-choice[aria-current="true"] .feature-choice-number { color: #faf7f2; background: #426653; border-color: #426653; }
.feature-choice[aria-current="true"] .feature-choice-arrow { rotate: 0deg; }
.feature-choice:focus-visible { outline: 3px solid #9d583c; outline-offset: 3px; }
.feature-device-note { display: flex; gap: 9px; align-items: flex-start; margin-top: 24px; font-size: 12px; line-height: 1.7; color: #526650; }
.feature-device-note .icon { width: 18px; height: 18px; margin-top: 1px; }
.feature-talk-note { margin-top: 9px; font-size: 10px; line-height: 1.6; color: #606f63; }

.app-showcase { align-self: center; background: #e3e9dd; border: 1px solid #c5d1bf; border-radius: 120px 120px 28px 28px; padding: 38px 30px 23px; box-shadow: none; }
.showcase-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 10px 19px; color: #426653; font-size: 10px; letter-spacing: .045em; }
.showcase-heading > span:last-child { white-space: nowrap; color: #6c7c65; font-variant-numeric: tabular-nums; }
.showcase-heading b { font-weight: 500; color: #303d35; }
.app-showcase .preview-tabs { background: #faf7f2; border: 1px solid #c5d1bf; border-radius: 15px; }
.app-showcase .preview-tabs button, .app-showcase.is-enhanced .preview-tabs::before { border-radius: 10px; }
.app-showcase .preview-stage { position: relative; }
.app-showcase .preview-panel { padding-top: 29px; }
.screen-scenery { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.screen-arch { position: absolute; width: 91%; height: 76%; top: 23px; left: 4.5%; border-radius: 180px 180px 15px 15px; background: #f7eee1; border: 1px solid #fffdfa; transition: background .65s; }
.screen-scenery svg { position: absolute; top: 5%; left: -5%; width: 110%; max-width: none; height: 80%; color: #849b794a; }
.app-showcase[data-screen="baby"] .screen-arch { background: #efe0cf; }
.app-showcase[data-screen="start"] .screen-arch { background: #f6f3e9; }
.app-showcase .app-screen-link { display: block; width: min(100%, var(--device-width)); height: auto; aspect-ratio: auto; overflow: visible; border: 6px solid #27372f; border-radius: 26px; background: #18241e; box-shadow: 0 18px 30px #20382c2b, 0 0 0 1px #738574, 0 0 0 2px #fffdfa20 inset; }
.app-showcase .app-screen-link::before, .app-showcase .app-screen-link::after { content: none; display: none; }
.app-showcase .app-screen-link img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: initial; border-radius: 20px; }
.app-showcase .app-screen-link:hover { border-color: #3a5142; }
html[data-theme="night"] .app-showcase .app-screen-link:hover { border-color: #58715d; }
.app-showcase .app-screen-link:focus-visible { border-radius: 26px; outline: 3px solid var(--peach); outline-offset: 5px; }
.app-showcase .screen-zoom-label { top: calc(100% + 17px); bottom: auto; min-height: 34px; padding: 7px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--sage); box-shadow: 0 3px 8px #20382c0d; }
.app-showcase .app-screen-link:hover .screen-zoom-label { border-color: var(--sage); }
.app-showcase .screen-caption { position: relative; max-width: 350px; margin-top: 68px; min-height: 68px; color: #53634f; }
.app-showcase .screen-caption strong { font-size: 17px; }
.app-showcase .screen-gallery-note { color: #526650; border-color: #bfcfba; margin-top: 20px; }

/* The Plus art has a shared stage, framed like the opening room. */
.plus-showcase { border-top: 0; }
.plus-tabs { padding-top: 0; padding-bottom: 23px; }
.plus-panel { gap: clamp(30px, 5vw, 70px); padding-top: 32px; }
.plus-panel-art { border-radius: 40px; background: #eef1e7; min-height: 530px; padding: 29px 24px 24px; }
.plus-panel-art::before { inset: 22px 8% 65px; background: #f8eee0; border: 1px solid #fffdfacc; border-radius: 220px 220px 22px 22px; }
.plus-panel-art::after { width: 76%; height: 16px; aspect-ratio: auto; top: auto; bottom: 63px; border: 0; border-radius: 50%; background: #4266530c; transform: translateX(-50%); }
[data-plus-panel="bubble"] .plus-panel-art::before { background: #f8eee0; }
[data-plus-panel="family"] .plus-panel-art::before { background: #dce7d9; }
[data-plus-panel="routine"] .plus-panel-art::before { background: #dde5d9; }
.plus-panel-copy { padding-inline: 0; }
.plus-art-caption { position: relative; z-index: 1; margin-top: 13px; }
.plus-showcase-note { padding-top: 23px; }

@media (max-width: 1100px) {
  .app-showcase { padding: 31px 23px 22px; border-radius: 80px 80px 26px 26px; }
  .features-copy h2 { font-size: 44px; }
  .feature-choice { padding: 15px 13px; gap: 10px; }
  .feature-choice-copy strong { font-size: 16px; }
  .plus-panel-art { padding-inline: 15px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .features-layout { gap: 28px; }
  .features-copy h2 { font-size: 39px; }
  .feature-choice { grid-template-columns: 22px minmax(0, 1fr); }
  .feature-choice-number { width: 22px; height: 22px; font-size: 9px; }
  .feature-choice-arrow { display: none; }
  .feature-choice-copy > span { font-size: 12px; }
  .feature-choice-copy strong { font-size: 15px; }
  .app-showcase { padding-inline: 16px; }
}
@media (max-width: 800px) {
  .plus-panel-art { min-height: 435px; padding: 22px 12px; border-radius: 30px; }
  .plus-panel-art::before { inset: 17px 7% 60px; }
  .plus-panel-art::after { bottom: 59px; }
}
@media (max-width: 700px) {
  .features-layout { display: flex; flex-direction: column; gap: 0; }
  .features-copy { display: contents; }
  .features-copy > .eyebrow { order: 0; }
  .features-copy h2 { order: 1; font-size: 42px; margin: 20px 0; }
  .features-copy > .section-intro { order: 2; margin-bottom: 26px; }
  .feature-choice-list { order: 4; margin-top: 24px; }
  .feature-choice { grid-template-columns: 24px minmax(0, 1fr) 18px; padding: 17px 14px; gap: 10px; }
  .feature-choice-number { width: 24px; height: 24px; }
  .feature-choice-copy > span { font-size: 13px; }
  .feature-choice-copy small { display: none; }
  .feature-device-note { order: 5; margin-top: 19px; }
  .feature-talk-note { order: 6; }
  .app-showcase { order: 3; max-width: 465px; padding: 29px 19px 20px; border-radius: 70px 70px 24px 24px; }
  .showcase-heading { padding-inline: 5px; font-size: 10px; }
  .app-showcase .app-screen-link { width: min(100%, var(--device-mobile-width)); }
  .app-showcase .preview-panel { padding-top: 23px; }
  .app-showcase .screen-caption { margin-top: 66px; font-size: 12px; min-height: 64px; }
  .app-showcase .screen-caption strong { font-size: 16px; }
  .screen-arch { top: 18px; }
  .plus-panel-art { min-height: 435px; margin-inline: -3px; }
  .plus-tabs { padding-bottom: 17px; }
  .plus-panel { padding-top: 22px; }
  .plus-panel-copy { padding-top: 10px; }
}
@media (max-width: 350px) {
  .features-copy h2 { font-size: 37px; }
  .feature-choice { padding: 14px 11px; grid-template-columns: 22px minmax(0, 1fr) 16px; gap: 9px; }
  .feature-choice-copy strong { font-size: 15px; }
  .feature-choice-copy > span { font-size: 12px; }
  .app-showcase { padding-inline: 13px; }
  .showcase-heading { font-size: 9px; }
  .plus-panel-art { padding-inline: 0; }
}
.motion-enabled[data-motion="paused"] .feature-choice, .motion-enabled[data-motion="paused"] .feature-choice-arrow { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .feature-choice, .feature-choice-arrow, .screen-arch { transition: none !important; }
}