/* One size for every phone in the feature rows. Change it here and every
   row follows — the carousel scales off this too, since its contents are
   sized in cqw against the phone's own width. */
:root {
  --phone-width: min(100%, 240px);
}

@media (min-width: 1024px) {
  :root {
    --phone-width: min(100%, 270px);
  }
}

/* Keep the small checklist ticks bold inside their soft circles. */
ion-icon[name="checkmark"] {
  --ionicon-stroke-width: 64px;
}

/* Stacked screenshots: the first frame stays in normal flow so it sets the
   box height, the rest overlay it. Only .is-active is opaque. */
.theme-frame,
.entry-frame {
  transition: opacity 400ms ease;
}

.theme-frame:not([data-theme-frame="dark"]),
.entry-frame:not([data-entry-frame="type"]) {
  position: absolute;
  inset: 0;
}

.theme-frame:not(.is-active),
.entry-frame:not(.is-active) {
  opacity: 0;
}

/* Floating pocket cards rise into place, staggered by --d. */
@keyframes stage-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.stage-card {
  animation: stage-in 600ms ease both;
  animation-delay: var(--d, 0ms);
}

.stage-bar {
  transition: width 900ms ease 500ms;
}

/* Swipeable pocket cards layered over the exported empty phone frame.
   Everything inside is sized in cqw (percent of the phone's own width), so
   the whole mockup scales as one piece. Ported from the case study. */
.pocket-phone {
  container-type: inline-size;
  position: relative;
  width: var(--phone-width);
}

.pocket-phone-frame {
  display: block;
  width: 100%;
  user-select: none;
  pointer-events: none;
}

/* Measured off budgetally-pocket-frame.webp: the screen glass spans
   4.67%–95.33% across and the cards sit in a 16.85%–94.65% band down.
   Vertical padding gives the cards' shadow room inside the scroll box —
   a horizontal scroller clips vertically too — so top and height are
   shifted out by that same 3.45cqw at each end. */
.pocket-carousel-viewport {
  position: absolute;
  z-index: 1;
  top: 15.17%;
  left: 4.67%;
  width: 90.67%;
  height: 81.17%;
  padding: 3.45cqw 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-x pan-y;
}

.pocket-carousel-viewport::-webkit-scrollbar {
  display: none;
}

.pocket-carousel-viewport:focus-visible {
  outline: 3px solid #5e5ce6;
  outline-offset: 4px;
  border-radius: 4.6cqw;
}

.pocket-carousel-viewport.is-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grabbing;
}

/* During the post-drag settle, keep snapping off so CSS scroll-snap and the
   JS smooth scrollTo don't fight; snapping is re-armed once it finishes. */
.pocket-carousel-viewport.is-settling {
  scroll-snap-type: none;
}

.pocket-carousel-track {
  box-sizing: border-box;
  display: flex;
  gap: 2.5%;
  width: 100%;
  height: 100%;
}

/* Runway so the first and last cards can still scroll to centre. */
.pocket-carousel-spacer {
  flex: 0 0 3%;
}

.pocket-summary-card {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 92%;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 5.29cqw;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  border-radius: 9.2cqw;
  background: #fff;
  color: #000;
  box-shadow: 0 1.15cqw 2.3cqw rgb(0 0 0 / 10%);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

.pocket-summary-top {
  display: flex;
  flex-direction: column;
}

.pocket-summary-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.45cqw;
  margin-bottom: 5.4cqw;
}

.pocket-summary-heading h3 {
  font-size: 4.6cqw;
  font-weight: 600;
  line-height: 1.25;
}

.pocket-member-count {
  display: flex;
  align-items: center;
  gap: 0.92cqw;
  padding: 0.92cqw 1.84cqw;
  border-radius: 999px;
  background: #ebedf2;
  font-size: 2.99cqw;
  font-weight: 500;
  line-height: 1.15;
}

.pocket-member-count ion-icon {
  width: 3.56cqw;
  height: 3.56cqw;
}

.pocket-balance {
  padding-bottom: 2.76cqw;
  border-bottom: 1px solid #e3e3e3;
}

.pocket-balance p {
  color: #687486;
  font-size: 3.56cqw;
  line-height: 1.2;
  letter-spacing: 0.06cqw;
}

.pocket-balance strong {
  display: flex;
  align-items: baseline;
  margin-top: 0.46cqw;
  font-size: 7.82cqw;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.11cqw;
}

.pocket-balance strong span {
  font-size: 5.52cqw;
}

.pocket-progress {
  height: 1.61cqw;
  margin-top: 2.99cqw;
  overflow: hidden;
  border-radius: 999px;
  background: #e3e3e3;
}

.pocket-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: #098436;
}

.pocket-remaining {
  margin-top: 2.53cqw;
  color: #687486;
  font-size: 3.56cqw;
  line-height: 1.2;
}

.pocket-metrics {
  display: flex;
  justify-content: space-between;
  gap: 3.45cqw;
  padding-top: 2.76cqw;
  margin-bottom: 5.4cqw;
}

.pocket-metrics>div:last-child {
  text-align: right;
}

.pocket-metrics p {
  font-size: 3.22cqw;
  font-weight: 500;
  line-height: 1.2;
}

.pocket-metrics strong {
  display: flex;
  align-items: center;
  color: #098436;
  font-size: 4.6cqw;
  font-weight: 600;
  line-height: 1.15;
}

.pocket-metrics>div:last-child strong {
  justify-content: flex-end;
}

.pocket-metrics strong ion-icon {
  width: 4.83cqw;
  height: 4.83cqw;
}

.pocket-metrics span {
  display: block;
  margin-top: 0.46cqw;
  color: #687486;
  font-size: 2.88cqw;
  font-weight: 500;
  line-height: 1.2;
}

.pocket-categories-label {
  margin-bottom: 2.64cqw;
  color: #687486;
  font-size: 2.76cqw;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
}

.pocket-category-list {
  display: flex;
  flex-direction: column;
  gap: 2.07cqw;
}

.pocket-category-row {
  display: flex;
  align-items: center;
  gap: 2.53cqw;
  min-width: 0;
}

/* Suffixed rather than named after Tailwind's bg-* classes, so the CDN
   build can't win the cascade and repaint these tiles. */
.pocket-category-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 7.36cqw;
  height: 7.36cqw;
  border-radius: 1.84cqw;
  color: #fff;
}

.pocket-category-icon ion-icon {
  width: 4.6cqw;
  height: 4.6cqw;
}

.pocket-category-icon--red {
  background: #d83f3b;
}

.pocket-category-icon--orange {
  background: #fb8c00;
}

.pocket-category-icon--lime {
  background: #7cb342;
}

.pocket-category-icon--blue {
  background: #4568db;
}

.pocket-category-icon--violet {
  background: #7c4fe3;
}

.pocket-category-name {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.pocket-category-name strong,
.pocket-category-amount {
  font-size: 3.22cqw;
  font-weight: 500;
  line-height: 1.15;
}

.pocket-category-name small {
  color: #687486;
  font-size: 2.88cqw;
  font-weight: 500;
  line-height: 1.15;
}

.pocket-category-amount {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

.pocket-add-expense {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.92cqw;
  width: 100%;
  min-height: 12.19cqw;
  border-radius: 999px;
  background: #5e5ce6;
  color: #fff;
  font-size: 3.79cqw;
  font-weight: 400;
  line-height: 1.3;
}

.pocket-add-expense ion-icon {
  width: 5.4cqw;
  height: 5.4cqw;
}

/* Controls are site chrome, so they take the site's surface and accent
   rather than the app's. */
.pocket-carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: #202634;
  color: #fff;
  font-size: 1.25rem;
  transition: background-color 150ms ease, opacity 150ms ease;
}

.pocket-carousel-arrow:hover:not(:disabled) {
  background: #2c3446;
}

.pocket-carousel-arrow:focus-visible,
.pocket-carousel-dot:focus-visible {
  outline: 3px solid #c398ee;
  outline-offset: 3px;
}

.pocket-carousel-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pocket-carousel-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgb(16 24 36 / 20%);
  transition: width 200ms ease, background-color 200ms ease;
}

.pocket-carousel-dot.is-active {
  width: 1.5rem;
  background: #7d24d7;
}

@media (prefers-reduced-motion: reduce) {

  .theme-frame,
  .entry-frame,
  .stage-card,
  .stage-bar,
  .pocket-carousel-arrow,
  .pocket-carousel-dot {
    animation: none;
    transition: none;
  }

  .pocket-carousel-viewport {
    scroll-behavior: auto;
  }
}