/* Approved elongated home menu and vivid unwashed timer panorama. */
#app[data-page="home"] { padding-top: 13px !important; }
#app[data-page="home"] .top { margin-bottom: 4px; }
#app[data-page="home"] .brand { font-size: clamp(23px, 5.2vw, 34px); }
#app[data-page="home"] .welcome { min-height: 66px; margin-bottom: 13px; }
#app[data-page="home"] .welcome .lead { font-size: clamp(27px, 6.5vw, 43px); margin: 3px 0 5px; }
#app[data-page="home"] .welcome .sub { font-size: clamp(14px, 3.5vw, 21px); }
#app[data-page="home"] .sectionTitle { font-size: clamp(18px, 4.5vw, 27px); margin: 14px 0 10px; }
#app[data-page="home"] .featureGrid { gap: 11px 10px; }
#app[data-page="home"] .feature {
  aspect-ratio: 3.05 / 1; min-height: 58px; padding: 0 8px 0 0; gap: 2px;
  border-radius: 14px; border: 1.2px solid #fff8e6;
  box-shadow: inset 0 2px 2px #ffffffed, inset 0 -3px 5px #412e3442,
    inset 1px 0 1px #ffffffa8, 0 5px 7px var(--tile-shadow), 0 1px 2px #7553362b;
}
#app[data-page="home"] .feature::before {
  background: radial-gradient(ellipse at 48% -10%, #ffffff9c, transparent 53%), linear-gradient(168deg,#fff2,transparent 50%,#00000016);
  box-shadow: inset 0 0 0 1px #fff3;
}
#app[data-page="home"] .feature .art {
  width: clamp(62px, 18vw, 115px) !important; height: clamp(50px, 13.8vw, 100px) !important;
  flex: 0 0 auto; background-size: contain !important;
  filter: drop-shadow(0 4px 2px #48240940) saturate(1.08) contrast(1.03);
}
#app[data-page="home"] .feature b { font-size: clamp(13px, 3.6vw, 24px); letter-spacing: -.5px; }
#app[data-page="home"] .feature .chevron { font-size: 24px; width: 8px; }
#app[data-page="home"] .feature-activity { background: radial-gradient(ellipse at 50% 0%, #fff66c,transparent 65%),linear-gradient(115deg,#ffde26,#ffd537 57%,#f6aa17); }
#app[data-page="home"] .feature-baby { background: radial-gradient(ellipse at 48% 0%,#ffbfc7,transparent 64%),linear-gradient(115deg,#ffa0b5,#f786a0 58%,#e96180); }
#app[data-page="home"] .feature-tasks { background: radial-gradient(ellipse at 49% 0%,#6ce7ff,transparent 65%),linear-gradient(115deg,#2cc3ff,#29adf4 57%,#087bdc); }
#app[data-page="home"] .feature-money { background: radial-gradient(ellipse at 49% 0%,#6ce4b6,transparent 65%),linear-gradient(115deg,#29c5a7,#0daf94 55%,#007768); }
#app[data-page="home"] .feature-meds { background: radial-gradient(ellipse at 49% 0%,#e4b4ff,transparent 66%),linear-gradient(115deg,#c081f1,#ae62e6 58%,#803cc8); }
#app[data-page="home"] .feature-shopping { background: radial-gradient(ellipse at 49% 0%,#d8efa2,transparent 65%),linear-gradient(115deg,#b3ce88,#9dbd70 55%,#648647); }
#app[data-page="home"] .fx6-cookbook-feature {
  aspect-ratio: 6.3 / 1; min-height: 61px !important; padding: 1px 11px 1px 0 !important; gap: 7px !important;
  background: radial-gradient(ellipse at 53% 0%,#ffc873,transparent 67%),linear-gradient(115deg,#f19b49,#f49848 53%,#ce6a29);
}
#app[data-page="home"] .fx6-home-icon {
  width: 39%; flex: 0 0 39%; height: 58px; max-height: none;
  background-size: cover; background-position: center 60%;
  filter: drop-shadow(0 3px 2px #56260a40) saturate(1.08);
}
#app[data-page="home"] .fx6-cookbook-feature b { font-size: clamp(17px, 4.4vw, 27px); }
#app[data-page="home"] .timerHero {
  aspect-ratio: 4.15 / 1; min-height: 88px; gap: 0; padding: 7px 10px 7px 0;
  border-radius: 17px; overflow: hidden;
  background: url('./assets/self-time-panorama-v10.png') center top/cover no-repeat;
  box-shadow: inset 0 1px 2px #fff, 0 5px 9px #85471b3b;
}
#app[data-page="home"] .timerHero::before,#app[data-page="home"] .timerHero::after { display: none; }
#app[data-page="home"] .timerHero .art { background: none; visibility: hidden; flex: 0 0 34%; width: 34%; height: 1px; filter: none; }
#app[data-page="home"] .timerCopy { align-self: flex-start; text-align: center; padding-top: 3px; flex: 1; }
#app[data-page="home"] .timerCopy>b { font-size: clamp(15px, 4vw, 25px); color: #1c160e; font-weight: 800; }
#app[data-page="home"] .timerCopy .clock { font-size: clamp(25px, 6.6vw, 43px); color: #15130e; margin-top: 5px; letter-spacing: -1px; text-shadow: 0 1px 1px #ffd57328; }
#app[data-page="home"] .timerToggle { width: 34px; height: 34px; min-width: 34px; font-size: 19px; margin-left: 4px; align-self: flex-end; color: #cf4d54; background: #fff0e4; }
#app[data-page="home"] .moreActivities { margin-top: 12px; padding: 10px 15px; }
#app[data-page="home"] .moreActivities summary { font-size: 14px; }
/* Old corner sprays and old variation in leaf opacity/hue are replaced by
   measured free-space decoration, whose entire movement envelope is protected. */
#app:not([data-page="money"]) .headerBranch { display: none; }
#app[data-page="home"] > .fx7-leaf-layer::before,#app[data-page="home"] > .fx7-leaf-layer::after { display: none; }
.fx10-leaf { position: absolute; display: block; pointer-events: none; }
.floatingLeaves.fx7-leaf-layer .fx10-leaf .leaf {
  position: absolute; left: calc(50% - var(--leaf-size)/2) !important; top: calc(50% - var(--leaf-size)/2) !important;
  width: var(--leaf-size) !important; height: var(--leaf-size) !important;
  opacity: 1 !important; object-fit: contain; filter: saturate(1.2) contrast(1.04);
  animation: fx10-wind var(--leaf-duration) ease-in-out var(--leaf-delay) infinite alternate;
  transform-origin: center; transform: rotate(var(--leaf-angle));
}
@keyframes fx10-wind { from { transform: translate(calc(-1 * var(--leaf-motion)),calc(-1 * var(--leaf-motion))) rotate(calc(var(--leaf-angle) - 8deg)); } to { transform: translate(var(--leaf-motion),var(--leaf-motion)) rotate(calc(var(--leaf-angle) + 8deg)); } }
@media(prefers-reduced-motion:reduce) { .floatingLeaves.fx7-leaf-layer .fx10-leaf .leaf { animation: none; } }
@media(max-width:350px) {
  #app[data-page="home"] .feature .art { width: 52px !important; height: 48px !important; }
  #app[data-page="home"] .feature b { font-size: 12.5px; letter-spacing: -.5px; }
  #app[data-page="home"] .feature .chevron { width: 7px; font-size: 21px; }
  #app[data-page="home"] .fx6-cookbook-feature b { font-size: 16px; }
  #app[data-page="home"] .timerHero .art { flex-basis: 31%; width: 31%; }
  #app[data-page="home"] .timerCopy>b { font-size: 14px; }
  #app[data-page="home"] .timerCopy .clock { font-size: 24px; }
  #app[data-page="home"] .timerToggle { width: 31px; height: 31px; min-width: 31px; }
}
@media(min-width:600px) {
  #app[data-page="home"] .welcome { min-height: 84px; }
  #app[data-page="home"] .featureGrid { gap: 13px 14px; }
  #app[data-page="home"] .feature { min-height: 80px; border-radius: 19px; padding: 0 13px 0 0; gap: 6px; }
  #app[data-page="home"] .feature b { font-size: 24px; }
  #app[data-page="home"] .fx6-cookbook-feature { min-height: 104px !important; gap: 15px !important; padding-right: 16px !important; }
  #app[data-page="home"] .fx6-home-icon { height: 101px; }
  #app[data-page="home"] .timerHero { min-height: 153px; border-radius: 23px; padding: 14px 18px 12px 0; }
  #app[data-page="home"] .timerCopy>b { font-size: 28px; }
  #app[data-page="home"] .timerCopy .clock { font-size: 48px; }
  #app[data-page="home"] .timerToggle { width: 49px; height: 49px; min-width: 49px; font-size: 27px; }
}