/* Phone layouts are separate compositions, with controls beside the thing they change. */
@media (max-width: 800px) {
  html .hero { height: auto; }
  html .hero .hero-stage {
    position: relative;
    height: auto;
    min-height: 0;
    padding: max(640px, 100svh) 0 40px;
    overflow: clip;
  }
  html .hero .hero-photo { height: max(640px, 100svh); min-height: 0; clip-path: none; opacity: 1; }
  html .hero .hero-copy { top: clamp(130px, 22svh, 190px); opacity: 1; transform: none; }
  .hero-copy > .button, .goals-intro > .button { max-width: 100%; white-space: normal; text-align: center; }
  .hero-copy > .button > span { flex-shrink: 0; }
  html .hero .hero-bottom { top: calc(max(640px, 100svh) - 65px); bottom: auto; opacity: 1; }
  html .hero .hero-backdrop, html .hero .life-tag, html .hero .reveal-sticker { display: none; }
  html .hero .hero-anchor { top: max(640px, 100svh); }
  html .hero .reveal-copy {
    position: relative;
    inset: auto;
    max-width: none;
    margin: 0;
    padding: 40px 24px 28px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    scroll-margin-top: 0;
  }
  html .hero .reveal-copy h2 { font-size: clamp(36px, 9vw, 48px); }
  html .hero .reveal-copy > p:not(.eyebrow) { font-size: 15px; max-width: 36ch; }
  html .hero .reveal-copy .text-link { min-height: 44px; font-size: 14px; }
  html .hero .hero-device {
    display: block;
    position: relative;
    inset: auto;
    margin: 0 auto;
    width: min(320px, calc(100% - 48px));
    height: 638px;
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  main > .everyday.story { min-height: 0; padding-block: 40px; }
  .everyday .section-heading h2 { font-size: clamp(32px, 8vw, 42px); margin-top: 12px; }
  .everyday .section-heading { display: block; }
  .everyday .section-heading > p { max-width: 36ch; margin-top: 14px; font-size: 14px; }
  .product-tabs { margin: 22px 0 14px; gap: 4px; }
  .product-tabs button { flex: 1; min-height: 44px; padding: 10px 8px; font-size: 14px; }
  .product-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 0; border-radius: 22px; }
  .product-copy { padding: 22px 22px 0; }
  .product-copy h3 { font-size: 27px; line-height: 1.1; margin: 0 0 12px; }
  .product-copy h3 br { display: none; }
  .product-copy > p { font-size: 14px; max-width: 36ch; }
  .small-note { display: none; }
  .product-art { min-height: 310px; padding: 22px; }
  .spending-demo, .bill-demo, .wealth-demo { width: 100%; padding: 18px; transform: none; border-radius: 18px; }
  .demo-top { margin-bottom: 16px; }
  .spending-demo { display: grid; grid-template-columns: 108px minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .spending-demo .demo-top { grid-column: 1 / -1; }
  .spending-demo .donut { grid-row: 2 / span 4; width: 108px; height: 108px; margin: 0; }
  .spending-demo .donut > div { width: 90px; height: 90px; }
  .spending-demo .donut strong { font-size: 25px; }
  .spending-demo .donut small { display: none; }
  .spending-demo .category-row { grid-column: 2; display: block; padding: 6px 0; font-size: 13px; line-height: 1.35; }
  .spending-demo .category-row > span { gap: 5px; }
  .spending-demo .category-row b { display: block; margin-top: 2px; }
  [data-spending-motion] { gap: 12px; }
  [data-spending-motion] .floating-receipt {
    align-self: stretch;
    margin: 0;
    padding: 12px 14px;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    transform: none;
    clip-path: none;
    border-radius: 12px;
  }
  .floating-receipt strong { font-size: 20px; margin-left: auto; }
  .floating-receipt small { flex-basis: 100%; font-size: 12px; line-height: 1.4; }
  .bill-demo h4 { font-size: 23px; max-width: none; margin-bottom: 12px; }
  .calendar-strip { display: none; }
  .bill-row { padding: 12px 0; }
  .bill-total { padding-top: 14px; }
  .wealth-demo { max-width: 100%; }
  .wealth-demo h4 { font-size: 38px; line-height: 1.1; margin: 4px 0 8px; }
  .wealth-chart { height: 70px; width: 100%; margin: 8px 0; }
  .wealth-demo .bill-total { padding: 8px 0 0; }
  .wealth-next-step { margin-top: 12px; padding-top: 12px; }
  .wealth-next-step > span, .wealth-next-step p { display: none; }
  .wealth-next-step strong { font-size: 13px; }
  .art-scribble { display: none; }

  main > .savings-scenes.story {
    min-height: var(--story-height);
    grid-template-rows: auto minmax(240px, 1fr) auto;
    gap: 16px;
    padding: 28px 24px 24px;
    text-align: left;
    overflow: clip;
  }
  .savings-scenes::after {
    display: block;
    background: linear-gradient(180deg, #0b201db3 0%, #0b201d33 42%, #08171326 60%, #081713d9 100%);
  }
  .goals-intro { width: 100%; max-width: none; margin: 0; }
  .goals-intro h2 { font-size: clamp(30px, 8vw, 38px); line-height: 1.08; }
  .goals-intro p { font-size: 14px; line-height: 1.45; margin: 12px 0 18px; max-width: 36ch; }
  .goals-intro .button { min-height: 44px; padding: 10px 20px; }
  .goal-controls { grid-row: 3; gap: 0; }
  .goal-tabs { width: 100%; gap: 6px; }
  .goal-tabs button { flex: 1; padding: 9px 6px; font-size: 12px; }
  .goal-scene {
    position: static;
    isolation: auto;
    grid-area: 2 / 1;
    min-height: 240px;
    border-radius: 0;
    overflow: visible;
    background: none;
  }
  .goal-scene[hidden] { display: grid !important; visibility: hidden; pointer-events: none; }
  .goal-backdrop {
    inset: -64px 0;
    height: auto;
    z-index: -2;
    transform: translate3d(0, var(--goal-photo-offset, 0px), 0);
  }
  .goal-backdrop img { object-position: center; }
  [data-goal-scene="adventure"] .goal-backdrop img { object-position: 66% center; }
  [data-goal-scene="home"] .goal-backdrop img { object-position: 55% center; }
  [data-goal-scene="rain"] .goal-backdrop img { object-position: 60% center; }
  .goal-card {
    align-self: center;
    justify-self: center;
    width: min(264px, 100%);
    min-height: 240px;
    margin: 0;
    padding: 18px 22px;
    border: 1px solid #ffffff80;
    border-radius: 20px;
    text-align: center;
    background: #10251f66;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .goal-symbol { display: none; }
  .goal-amount { font-size: 38px; margin-top: 6px; }
  .goal-target { margin-top: 4px; }
  .goal-progress { margin-top: 16px; }
  .goal-plan { margin-top: 16px; }
  [data-goal-scene="adventure"] .goal-card { transform: none; }
  .goal-status.is-error { bottom: 82px; z-index: 1; }
  .goal-scene:focus-visible .goal-card { outline-offset: 4px; }
  .trust-details { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .trust-details-intro p { max-width: 36ch; }

  /* Without scripts, show readable panels in document flow instead of overlapping them. */
  html:not(.is-enhanced) .product-panels { display: block; }
  html:not(.is-enhanced) .product-panel[hidden] { visibility: visible; pointer-events: auto; }
}
@media (max-width: 360px) {
  .product-art, .product-copy { padding-inline: 16px; }
  .spending-demo { grid-template-columns: 108px minmax(0, 1fr); gap: 0 10px; padding: 14px; }
  .spending-demo .donut { width: 108px; height: 108px; }
  .spending-demo .donut > div { width: 90px; height: 90px; }
  .spending-demo .donut strong { font-size: 25px; }
  .goal-card { padding-inline: 20px; }
}