.product-stage[data-interactive-scene] .scene-dates { display: flex; gap: 6px; padding: 4px; background: #161616; border: 1px solid #3b3b3b; border-radius: 10px; }
.scene-dates button { min-height: 44px; min-width: 72px; padding: 8px 16px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #b4b9b6; font: inherit; cursor: pointer; font-variant-numeric: tabular-nums; }
.scene-dates button[aria-pressed="true"] { color: #e6f4f0; background: #24332f; border-color: #54968b; }
.scene-dates button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Shared feedback, without delaying navigation or moving the content being read. */
.login-link, .primary-action, .hero-scroll-cue, .scene-dates button,
.advice-period-button, .advertising-toggle, .replay-button, summary {
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.reason-details > .reason-answer { padding: 0; overflow: hidden; }
.reason-answer > div { padding: 0 28px 24px; }
.reason-details[data-motion="true"] .reason-answer {
  transition: height 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.reason-details[data-motion="true"] > summary svg { transition: transform 200ms var(--ease-out); }
.reason-details[data-expanded="false"] > summary svg { transform: rotate(0deg); }
@media (max-width: 1190px) { .reason-answer > div { padding-inline: 23px; } }
@media (max-width: 600px) { .reason-answer > div { padding-inline: 18px; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .primary-action:not(:focus-visible) > svg { transition: transform 160ms var(--ease-out); }
  .login-link:not(:focus-visible), .primary-action:not(:focus-visible) {
    transition: transform 160ms var(--ease-out), color 160ms ease, background-color 160ms ease, border-color 160ms ease;
  }
  .login-link:active:not(:focus-visible), .primary-action:active:not(:focus-visible) {
    transform: scale(.98); transition-duration: 100ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reason-details[data-motion="true"] .reason-answer,
  .reason-details[data-motion="true"] > summary svg { transition: none; }
}
/* End shared feedback. */
.product-stage[data-interactive-scene][data-day="before"] .rank-before { opacity: 1; }
.product-stage[data-interactive-scene][data-day="before"] .rank-after { opacity: 0; }
.scene-event-slot { position: relative; border-bottom: 1px solid var(--border); }
.scene-event-slot .insight-card { border-bottom: 0; }
.scene-event-pending { position: absolute; inset: 0; display: grid; place-content: center; padding: 28px; color: var(--muted); font-size: 14px; line-height: 1.6; text-align: center; pointer-events: none; }
[data-interactive-scene][data-event="false"] .insight-card { opacity: 0; transform: translateY(6px); pointer-events: none; }
[data-interactive-scene][data-event="true"] .scene-event-pending { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .scene-dates button:not([aria-pressed="true"]):hover { color: var(--text); background: #282828; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 851px) {
  [data-interactive-scene][data-motion="user"] .rank-row { transition: transform 240ms var(--ease-out); }
  [data-interactive-scene][data-motion="auto"] .rank-row { transition: transform 1050ms var(--ease-in-out); }
  [data-interactive-scene]:not([data-motion="none"]) .insight-card { transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }
}

/* Advice: one optional comparison, not two competing recommendations. */
.advice-period-controls { display: inline-flex; gap: 4px; padding: 4px; margin: 14px 28px 0; border: 1px solid #3b3b3b; border-radius: 10px; background: #161616; }
.advice-period-button { min-height: 44px; padding: 8px 14px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #b4b9b6; font: inherit; font-size: 14px; cursor: pointer; }
.advice-period-button[aria-pressed="true"] { background: #29312e; border-color: #627b73; color: #e6f4f0; }
.advice-period-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.advice-period-result { display: grid; margin: 20px 28px 24px; }
.advice-period-panel { grid-area: 1 / 1; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: center; opacity: 0; transform: translateY(4px); pointer-events: none; }
[data-advice-interactive][data-period="day"] .advice-period-panel[data-period="day"],
[data-advice-interactive][data-period="week"] .advice-period-panel[data-period="week"] { opacity: 1; transform: translateY(0); pointer-events: auto; }
.advice-period-amount { font-size: 44px; font-weight: 500; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--accent); }
.advice-period-panel[data-period="day"] .advice-period-amount { color: #ef9da5; }
.advice-period-range { color: #c6c9c7; font-size: 13px; font-variant-numeric: tabular-nums; }
.advice-period-explanation { margin-top: 7px; font-size: 14px; line-height: 1.55; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .advice-period-button:not([aria-pressed="true"]):hover { color: var(--text); background: #282828; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-advice-interactive][data-period-motion="true"] .advice-period-panel { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
}
@media (max-width: 600px) {
  .advice-period-controls { margin-inline: 20px; display: flex; }
  .advice-period-button { flex: 1; padding-inline: 8px; }
  .advice-period-result { margin-inline: 20px; }
  .advice-period-panel { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .advice-period-amount { font-size: 36px; }
}