/* Round 34 feature showcase (web/showcase.js), moved into the homepage hero in round 35 so the
   page has ONE phone: it sits in the hero's right column (below the copy and waitlist on a phone),
   with the feature tabs and one-line copy under it. The base styles ARE the end frame: keyframes
   only run under .sc-motion .is-run, so no JS or reduced motion = still frames.
   Uses the site.css tokens (body.home). No images of real devices.
   Round 41: light phone on the light page, a soft warm bezel instead of heavy black. */
.showcase { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "tabs" "copy"; gap: 20px 12px; min-width: 0; width: 100%; max-width: 380px; margin: 0 auto; }
.sc-stage { grid-area: stage; margin: 0; display: grid; justify-items: center; }
.sc-stage figcaption { margin: 20px 8px 0; text-align: center; color: var(--mute); font-size: 0.75rem; line-height: 1rem; }

/* The phone: drawn in CSS, fixed size so switching tabs never moves the page */
.sc-phone {
  position: relative; width: min(100%, 300px); height: 548px; overflow: hidden; contain: layout paint;
  border-radius: 44px; background: #fbfaf7;
  box-shadow: 0 0 0 8px #ffffff, 0 0 0 9px #e3dcd0, 0 30px 70px rgba(60, 45, 20, 0.16), 0 6px 16px rgba(60, 45, 20, 0.08);
  font-size: 0.8125rem; line-height: 1.125rem;
}
.sc-status { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 26px; font-size: 0.75rem; font-weight: 600; color: var(--soft); }
.sc-island { width: 84px; height: 22px; border-radius: 999px; background: #1d1b18; }
.sc-panel { position: absolute; inset: 44px 0 52px; padding: 4px 14px 0; display: flex; flex-direction: column; gap: 10px; outline: none; }
.sc-panel[hidden] { display: none; }
.sc-panel:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 12px; }
.sc-panel p, .sc-panel ul { margin: 0; }
.sc-panel ul { list-style: none; padding: 0; }
.sc-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; margin: 0; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid var(--s3); background: #ffffff; font-size: 0.75rem; font-weight: 600; color: var(--mute); }
.sc-nav span { padding: 6px 10px; border-radius: 10px; }
.showcase:not([data-active]) .sc-nav span:first-child,
[data-active="which"] .sc-nav span:nth-child(1), [data-active="near"] .sc-nav span:nth-child(1),
[data-active="add"] .sc-nav span:nth-child(2), [data-active="bill"] .sc-nav span:nth-child(3) { background: var(--accent-soft); color: var(--accent); }
.sc-nav .is-on { background: none; color: var(--mute); }
[data-active="remind"] .sc-nav { display: none; }

/* Shared app parts */
.sc-field { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; background: #ffffff; border: 1px solid var(--s4); color: var(--text); font-weight: 500; }
.sc-glass { width: 12px; height: 12px; border: 2px solid var(--mute); border-radius: 50%; flex: none; }
.sc-typed i { font-style: normal; }
.sc-mono { display: grid; place-items: center; flex: none; width: 34px; height: 24px; border-radius: 6px; font-size: 0.6875rem; font-weight: 700; color: #fff; background: #313131; }
.sc-mono[data-ink="amex"] { background: #016fd0; }
.sc-mono[data-ink="natwest"] { background: #5a287d; }
.sc-mono[data-ink="virgin"] { background: #c8102e; }
.sc-mono[data-ink="monzo"] { background: #14233c; }
.sc-sheet-title { font-size: 1.125rem; line-height: 1.5rem; font-weight: 700; padding-top: 4px; }
.sc-sheet-sub { margin-left: 6px; font-size: 0.8125rem; font-weight: 500; color: var(--mute); }
.sc-note, .sc-small { color: var(--mute); font-size: 0.75rem; line-height: 1rem; }

/* 1. Which card? */
.sc-shop { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: #ffffff; box-shadow: var(--shadow-sm); }
.sc-shop img { border-radius: 8px; }
.sc-shop div { display: grid; }
.sc-shop span { color: var(--mute); font-size: 0.75rem; }
.sc-amounts { display: flex; gap: 6px; }
.sc-amounts li { flex: 1; text-align: center; padding: 6px 0; border-radius: 999px; background: var(--s3); color: var(--soft); font-weight: 600; }
.sc-amounts .is-on { background: var(--accent); color: #ffffff; }
.sc-tap { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 1px solid #b9dcc8; font-weight: 500; }
.sc-tap span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 0.6875rem; }
.sc-tap b { color: var(--text); font-weight: 600; }
.sc-card { border-radius: 16px; padding: 12px 14px; color: #fff; background: linear-gradient(135deg, #6b3492 0%, #5a287d 55%, #3e1a57 100%); }
.sc-card-k { font-size: 0.75rem; opacity: 0.92; }
.sc-rate { font-size: 2.75rem; line-height: 1; font-weight: 600; letter-spacing: -0.05em; margin-top: 6px !important; }
.sc-rate small { font-size: 1.125rem; }
.sc-card-name, .sc-card-back { font-weight: 600; }
/* Round 43: loyalty stacking, as the real app shows it for Tesco (Clubcard's published 1 point per £1, worth 1p, counted separately). */
.sc-stack { display: grid; gap: 1px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, 0.35); font-size: 0.6875rem; line-height: 0.9375rem; }
.sc-stack-k { font-weight: 600; }
.sc-stack-v, .sc-stack-t { opacity: 0.85; }
.sc-why { color: var(--soft); font-size: 0.75rem; line-height: 1rem; }
.sc-why b { color: var(--text); }
.sc-runner { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #ffffff; box-shadow: var(--shadow-sm); font-weight: 600; }
.sc-runner em { margin-left: auto; font-style: normal; color: var(--mute); }

/* 2. Add your cards */
.sc-count { position: relative; display: inline-block; min-width: 1ch; margin-left: 4px; color: var(--mute); font-weight: 600; font-size: 0.875rem; }
.sc-was { position: absolute; left: 0; opacity: 0; }
.sc-wallet-wrap { position: relative; }
.sc-rows, .sc-results { border-radius: 14px; background: #ffffff; border: 1px solid var(--s3); overflow: hidden; box-shadow: var(--shadow-sm); }
.sc-rows li, .sc-results li { display: flex; align-items: center; gap: 10px; padding: 10px; border-top: 1px solid var(--s3); }
.sc-rows li:first-child, .sc-results li:first-child { border-top: 0; }
.sc-rows div, .sc-results div { display: grid; min-width: 0; flex: 1; }
.sc-rows strong, .sc-results strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-rows span:not(.sc-mono), .sc-results span:not(.sc-mono) { color: var(--mute); font-size: 0.75rem; }
.sc-rows em { font-style: normal; color: var(--accent); font-family: var(--mono); font-size: 0.75rem; }
.sc-new { box-shadow: inset 3px 0 0 var(--accent); }
.sc-results { position: absolute; inset: 0 0 auto; z-index: 1; visibility: hidden; opacity: 0; }
.sc-plus { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--s3); color: var(--text); font-size: 1rem; }
.sc-pick .sc-plus { background: var(--accent); color: var(--accent-ink); }

/* 3. Near me */
.sc-map { position: relative; height: 150px; border-radius: 14px; overflow: hidden; background-color: #e9efe6;
  background-image: linear-gradient(90deg, transparent 47%, #ffffff 47%, #ffffff 53%, transparent 53%), linear-gradient(0deg, transparent 58%, #ffffff 58%, #ffffff 63%, transparent 63%), linear-gradient(30deg, transparent 70%, #f7f4ee 70%, #f7f4ee 74%, transparent 74%); }
.sc-you { position: absolute; left: 50%; top: 60%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(20, 86, 65, 0.2); }
.sc-pin { position: absolute; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--text); }
.sc-pin.p1 { left: 38%; top: 36%; } .sc-pin.p2 { left: 64%; top: 44%; } .sc-pin.p3 { left: 28%; top: 74%; } .sc-pin.p4 { left: 78%; top: 20%; }
.sc-list-k { color: var(--mute); font-size: 0.75rem; font-weight: 500; }
.sc-near { display: grid; gap: 6px; }
.sc-near li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #ffffff; box-shadow: var(--shadow-sm); }
.sc-near img { border-radius: 8px; flex: none; }
.sc-near div { display: grid; flex: 1; min-width: 0; }
.sc-near div span { color: var(--mute); font-size: 0.75rem; }
.sc-near p { display: grid; text-align: right; }
.sc-near p b { color: var(--accent); font-weight: 600; }
.sc-near p span { color: var(--soft); font-size: 0.6875rem; line-height: 0.875rem; }

/* 4. Bill check */
.sc-form { display: grid; gap: 8px; }
.sc-in { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: #ffffff; border: 1px solid var(--s4); }
.sc-in span { color: var(--mute); font-size: 0.75rem; }
.sc-in b { font-weight: 600; font-size: 1rem; line-height: 1.375rem; min-height: 1.375rem; }
.sc-btn { justify-self: start; padding: 8px 16px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.sc-verdict { display: grid; gap: 6px; padding: 14px; border-radius: 14px; background: #ffffff; border: 1px solid var(--s4); color: var(--soft); box-shadow: var(--shadow-sm); }
.sc-big { color: var(--text); font-size: 1.25rem; line-height: 1.625rem; font-weight: 700; letter-spacing: -0.02em; }
.sc-big .num { color: var(--accent); }

/* 5. Reminders: lock screen */
.sc-lock { inset: 0; padding-top: 48px; align-items: stretch; background: radial-gradient(120% 70% at 50% 0%, #d7eedf 0%, #fbfaf7 70%); }
.sc-clock { text-align: center; font-size: 3.5rem; line-height: 1; font-weight: 600; letter-spacing: -0.04em; margin-top: 18px !important; }
.sc-day { text-align: center; color: var(--soft); margin-bottom: 14px !important; }
.sc-notif { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.94); box-shadow: var(--shadow-sm); }
.sc-notif img { border-radius: 7px; flex: none; }
.sc-notif div { display: grid; gap: 2px; min-width: 0; color: var(--soft); font-size: 0.75rem; line-height: 1rem; }
.sc-notif b { color: var(--text); font-size: 0.8125rem; }
.sc-notif-top { display: flex; justify-content: space-between; color: var(--mute); }
.sc-notif-top strong { color: var(--soft); font-weight: 600; }

/* Tabs: a sideways-scrolling row on a phone, wrapped and centred under the phone on a wide screen */
.sc-tabs { grid-area: tabs; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px; }
.sc-tabs::-webkit-scrollbar { display: none; }
.sc-tab {
  position: relative; flex: none; scroll-snap-align: center; min-height: 44px; padding: 10px 16px; border-radius: 999px; overflow: hidden;
  border: 1px solid var(--s4); background: var(--s1); color: var(--soft); font: inherit; font-size: 0.9375rem; line-height: 1.25rem; font-weight: 600; cursor: pointer;
  transition: background-color 300ms var(--curve), color 300ms var(--curve), border-color 300ms var(--curve);
}
.sc-tab:hover { color: var(--text); border-color: var(--mute); }
.sc-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.sc-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--mint); transform: scaleX(0); transform-origin: left; }
.sc-copy { grid-area: copy; display: grid; align-self: center; }
.sc-copy p { grid-area: 1 / 1; margin: 0; color: var(--soft); font-size: 1rem; line-height: 1.5rem; }
.sc-copy p[hidden] { display: block; visibility: hidden; }

@media (min-width: 900px) {
  .showcase { margin: 0 0 0 auto; }
  .sc-tabs { flex-wrap: wrap; justify-content: center; overflow: visible; margin: 0; padding: 0; }
}
@media (max-width: 359px) {
  .sc-phone { height: 548px; border-radius: 32px; }
  .sc-tab { padding: 8px 14px; }
  .sc-stage figcaption { font-size: 0.6875rem; }
}

/* Motion: only when JS is on and the user has not asked for less. Every keyframe starts from the
   "before" look and lands on the base (end-frame) style above. */
.sc-motion .sc-panel { animation: sc-fade 300ms var(--curve) both; }
.sc-motion .sc-tab[aria-selected="true"] .sc-bar { animation: sc-progress var(--sc-dwell, 6s) linear both; }
/* Round 36: after one full cycle, or once the user clicks or presses a key, the bar is gone and
   nothing advances again. */
.sc-motion.sc-done .sc-tab[aria-selected] .sc-bar { animation: none; visibility: hidden; }
.sc-motion.sc-hold .sc-bar, .sc-motion.sc-paused .sc-bar, .sc-motion.sc-paused .is-run, .sc-motion.sc-paused .is-run * { animation-play-state: paused !important; }
.sc-motion .is-run .sc-typed i { animation: sc-type 1ms steps(1, jump-start) both; }
.sc-motion .is-run .sc-typed i:nth-child(1) { animation-delay: 250ms; } .sc-motion .is-run .sc-typed i:nth-child(2) { animation-delay: 370ms; }
.sc-motion .is-run .sc-typed i:nth-child(3) { animation-delay: 490ms; } .sc-motion .is-run .sc-typed i:nth-child(4) { animation-delay: 610ms; }
.sc-motion .is-run .sc-typed i:nth-child(5) { animation-delay: 730ms; } .sc-motion .is-run .sc-typed i:nth-child(6) { animation-delay: 850ms; }
.sc-motion .is-run .sc-t2 i:nth-child(1) { animation-delay: 1100ms; } .sc-motion .is-run .sc-t2 i:nth-child(2) { animation-delay: 1200ms; }
.sc-motion .is-run .sc-t2 i:nth-child(3) { animation-delay: 1300ms; } .sc-motion .is-run .sc-t2 i:nth-child(4) { animation-delay: 1400ms; }
.sc-motion .is-run .sc-t2 i:nth-child(5) { animation-delay: 1450ms; } .sc-motion .is-run .sc-t2 i:nth-child(6) { animation-delay: 1500ms; }
.sc-motion .is-run .sc-t2 i:nth-child(7) { animation-delay: 1550ms; } .sc-motion .is-run .sc-t2 i:nth-child(8) { animation-delay: 1600ms; }
.sc-motion .is-run .sc-a1 { animation: sc-rise 450ms var(--curve) 1000ms both; }
.sc-motion .is-run .sc-a2 { animation: sc-rise 450ms var(--curve) 1300ms both; }
.sc-motion .is-run .sc-amounts .is-on { animation: sc-chip 300ms var(--curve) 1800ms both; }
.sc-motion .is-run .sc-a3 { animation: sc-rise 450ms var(--curve) 2200ms both; }
.sc-motion .is-run .sc-a4 { animation: sc-card 600ms var(--curve) 2300ms both; }
.sc-motion .is-run .sc-a5 { animation: sc-rise 450ms var(--curve) 2800ms both; }
.sc-motion .is-run .sc-a6 { animation: sc-rise 450ms var(--curve) 3100ms both; }
.sc-motion .is-run .sc-results { animation: sc-results 2300ms var(--curve) 1000ms both; }
.sc-motion .is-run .sc-pick .sc-plus { animation: sc-press 400ms var(--curve) 2000ms both; }
.sc-motion .is-run .sc-new { animation: sc-slot 500ms var(--curve) 3200ms both; }
.sc-motion .is-run .sc-was { animation: sc-was 1ms steps(1, jump-start) 3300ms both; }
.sc-motion .is-run .sc-now { animation: sc-type 1ms steps(1, jump-start) 3300ms both; }
.sc-motion .is-run .sc-a7 { animation: sc-rise 450ms var(--curve) 3700ms both; }
.sc-motion .is-run .sc-you { animation: sc-ping 1600ms ease-out 200ms 3 both; }
.sc-motion .is-run .sc-pin { animation: sc-drop 400ms var(--curve) both; }
.sc-motion .is-run .sc-pin.p1 { animation-delay: 700ms; } .sc-motion .is-run .sc-pin.p2 { animation-delay: 900ms; }
.sc-motion .is-run .sc-pin.p3 { animation-delay: 1100ms; } .sc-motion .is-run .sc-pin.p4 { animation-delay: 1300ms; }
.sc-motion .is-run .sc-n1 { animation: sc-rise 450ms var(--curve) 1100ms both; } .sc-motion .is-run .sc-n2 { animation: sc-rise 450ms var(--curve) 1350ms both; }
.sc-motion .is-run .sc-n3 { animation: sc-rise 450ms var(--curve) 1600ms both; } .sc-motion .is-run .sc-n4 { animation: sc-rise 450ms var(--curve) 1850ms both; }
.sc-motion .is-run .sc-a8 { animation: sc-press 400ms var(--curve) 2000ms both; }
.sc-motion .is-run .sc-a9 { animation: sc-card 600ms var(--curve) 2500ms both; }
.sc-motion .is-run .sc-b2 { animation: sc-drop-in 600ms var(--curve) 600ms both; }
.sc-motion .is-run .sc-b1 { animation: sc-drop-in 600ms var(--curve) 1900ms both; }
@keyframes sc-fade { from { opacity: 0; } }
@keyframes sc-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sc-type { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-was { from { opacity: 1; } to { opacity: 0; } }
@keyframes sc-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes sc-card { from { opacity: 0; transform: translateY(24px) scale(0.96); } }
@keyframes sc-chip { from { background: var(--s3); color: var(--soft); } }
@keyframes sc-press { 0% { transform: none; } 45% { transform: scale(0.86); box-shadow: 0 0 0 6px rgba(198, 235, 212, 0.3); } 100% { transform: none; } }
@keyframes sc-results { 0% { visibility: visible; opacity: 0; transform: translateY(6px); } 12%, 85% { visibility: visible; opacity: 1; transform: none; } 100% { visibility: hidden; opacity: 0; } }
@keyframes sc-slot { from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; } to { opacity: 1; max-height: 60px; } }
@keyframes sc-ping { 0% { box-shadow: 0 0 0 0 rgba(198, 235, 212, 0.6); } 100% { box-shadow: 0 0 0 22px rgba(198, 235, 212, 0); } }
@keyframes sc-drop { from { opacity: 0; transform: translateY(-14px) rotate(-45deg); } }
@keyframes sc-drop-in { from { opacity: 0; transform: translateY(-40px) scale(0.96); } }
@media (prefers-reduced-motion: reduce) {
  .showcase *, .showcase *::before, .showcase *::after { animation: none !important; transition: none !important; }
  .sc-bar { display: none; }
}