/* Website presentation only. Native screen styling stays in styles.css. */
.planning-section { padding-block:85px; }
.plan-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  grid-template-areas:"intro preview" "install preview";
  column-gap:85px;
  row-gap:50px;
  align-items:start;
}
.plan-intro { grid-area:intro; padding-top:55px; }
.planning-copy h2 { font-size:clamp(42px,4.1vw,59px); line-height:1.08; }
.planning-copy h2>span { color:#617457; }
.planning-copy>p:not(.eyebrow) { color:#53644b; }
.plan-preview { grid-area:preview; min-width:0; scroll-margin-top:20px; }
.plan-preview-label { display:flex; justify-content:space-between; gap:12px; margin-bottom:20px; font-size:12px; font-weight:550; }
.plan-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:28px; border-bottom:1px solid #b9c7ae; }
.plan-nav button { display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:13px 8px 16px; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:transparent; color:#617259; text-align:left; font-size:13px; line-height:1.3; }
.plan-nav button>span { font-size:10px; color:#6b7c62; letter-spacing:.08em; }
.plan-nav button[aria-pressed=true] { border-bottom-color:#334a29; color:#26371f; font-weight:600; }
.plan-nav button:focus-visible,.plan-next:focus-visible,.plan-install a:focus-visible { outline:2px solid #334a29; outline-offset:4px; }
.plan-preview .phone { --s:.84; }
.plan-stage { min-height:755px; align-items:flex-start; }
.plan-watch-stage { flex-direction:column; align-items:center; justify-content:center; gap:20px; }
.plan-watch-device { width:330px; }
.plan-watch-device .watch-exercise strong { font-weight:inherit; }
.plan-watch-device .watch-exercise { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.plan-watch-device .watch-action { cursor:default; text-align:center; }
.plan-watch-summary { max-width:360px; color:#4e6245; font-size:13px; line-height:1.7; text-align:center; }
#plan-watch-empty { padding:40px; color:#4e6245; font-size:15px; line-height:1.7; text-align:center; }
.plan-preview-footer { text-align:center; margin-top:24px; }
#plan-caption { font-size:13px; color:#506449; line-height:1.6; }
.plan-next { border:0; background:transparent; min-height:44px; padding:12px; margin-top:7px; color:#2c4521; font-size:14px; font-weight:600; }
.plan-next:hover { color:#5b7c4c; }
.plan-install { grid-area:install; margin:0; padding-bottom:50px; align-self:end; }
.plan-install .cta-note { color:#5e7054; }
.plan-preview:not(.is-ready) .plan-nav,.plan-preview:not(.is-ready) .plan-next { display:none; }
/* The website controls sit outside the device; no app layout overrides here. */
@media(max-width:1050px) and (min-width:761px) {
  .plan-layout { column-gap:40px; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
  .planning-copy h2 { font-size:43px; }
  .plan-nav button { font-size:12px; padding-inline:5px; }
  .plan-preview .phone { --s:.73; }
  .plan-stage { min-height:658px; }
  .plan-watch-device { width:300px; }
}
@media(max-width:760px) {
  .planning-section { padding-block:65px; }
  .plan-layout { grid-template-columns:minmax(0,1fr); grid-template-areas:"intro" "preview" "install"; gap:34px; }
  .plan-intro { padding:0; }
  .planning-copy h2 { font-size:clamp(36px,8.5vw,49px); }
  .planning-copy>p:not(.eyebrow) { font-size:14px; max-width:440px; line-height:1.7; margin-top:22px; }
  .plan-preview { scroll-margin-top:12px; }
  .plan-preview-label { margin-bottom:10px; }
  .plan-nav { position:sticky; top:0; z-index:6; background:#e8eddf; padding-top:8px; margin-bottom:24px; }
  .plan-nav button { font-size:12px; padding:10px 4px 14px; }
  .plan-preview .phone { --s:.78; }
  .plan-stage { min-height:702px; }
  .plan-watch-device { width:300px; max-width:100%; }
  .plan-install { border-top:1px solid #bac7af; padding:28px 0 0; text-align:center; }
  .plan-install>p:first-child { font-size:20px; }
  .plan-preview-footer { margin-top:18px; }
  #plan-caption { font-size:12px; }
}
@media(max-width:365px) {
  .plan-nav button { font-size:11px; }
  .plan-preview .phone { --s:.72; }
  .plan-stage { min-height:650px; }
}
@media(max-width:335px) {
  .plan-preview .phone { --s:.64; }
  .plan-stage { min-height:580px; }
  .plan-preview-label { font-size:11px; }
}
.motion-paused .plan-preview * { animation:none!important; transition:none!important; }