/* Feature card demos: small looping scenes of the real app UI (js/feature-demos.js) */

.fd-stage {
  --fd-bg: #000;
  --fd-card: #1C1C1E;
  --fd-card-2: #2C2C2E;
  --fd-sep: #38383A;
  --fd-text: #F5F5F7;
  --fd-text-2: #8E8E93;
  --fd-blue: #0A84FF;
  --fd-green: #30D158;
  --fd-orange: #FF9F0A;
  --fd-purple: #AA6BE1;
  --fd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  height: 216px;
  margin: 0 0 24px;
  padding: 18px;
  border-radius: 18px;
  background: var(--fd-bg);
  color: var(--fd-text);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
}

.fd-stage p { margin: 0; }
.fd-stage ul { list-style: none; margin: 0; padding: 0; }
.fd-stage svg { display: block; flex: none; }

/* Card title sits above the scene */
.feature-card .feature-title { margin-bottom: 20px; }

/* Long, unbreakable demo text must not widen the grid column */
.features-grid > .feature-card { min-width: 0; }

/* Shared reveal: hidden until the scene reaches its step */
.fd-in {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--fd-ease), transform 0.45s var(--fd-ease);
}

/* Shared caption pill (the app's spoken-line captions) */
.fd-caption {
  position: absolute;
  left: 50%;
  bottom: 16px;
  max-width: calc(100% - 32px);
  width: max-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-weight: 600;
  text-align: center;
  transform: translate(-50%, 8px);
  opacity: 0;
  transition: opacity 0.4s var(--fd-ease), transform 0.4s var(--fd-ease);
}

.fd-caption.fd-user {
  background: var(--fd-card-2);
  color: var(--fd-text);
  font-weight: 500;
}

.fd-type:empty::before { content: '\200b'; }

/* ---------- 1. Voice-first ---------- */
.fd-voice { display: flex; flex-direction: column; align-items: center; padding-top: 22px; }

.fd-ring {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0E2A16;
  border: 7px solid rgba(48, 209, 88, 0.28);
  color: var(--fd-green);
  transition: background 0.45s ease, border-color 0.45s ease, color 0.45s ease;
}

.fd-ring > * { grid-area: 1 / 1; transition: opacity 0.3s ease, transform 0.3s ease; }

.fd-ring::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: fd-ripple 2.2s ease-out infinite;
}

@keyframes fd-ripple {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.45); opacity: 0; }
}

.fd-dots, .fd-bars { display: flex; gap: 4px; align-items: center; opacity: 0; }
.fd-dots i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: fd-dot 1s ease-in-out infinite; }
.fd-dots i:nth-child(2) { animation-delay: 0.15s; }
.fd-dots i:nth-child(3) { animation-delay: 0.3s; }
.fd-bars i { width: 3px; height: 8px; border-radius: 2px; background: #fff; animation: fd-bar 0.9s ease-in-out infinite; }
.fd-bars i:nth-child(2) { animation-delay: 0.1s; }
.fd-bars i:nth-child(3) { animation-delay: 0.2s; }
.fd-bars i:nth-child(4) { animation-delay: 0.3s; }
.fd-bars i:nth-child(5) { animation-delay: 0.4s; }

@keyframes fd-dot { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes fd-bar { 0%, 100% { height: 6px; } 50% { height: 22px; } }

.fd-stage .fd-ring-label { position: relative; height: 20px; margin-top: 12px; width: 100%; text-align: center; font-weight: 600; }
.fd-ring-label span { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; }

.fd-voice[data-step="0"] .l0, .fd-voice[data-step="1"] .l1,
.fd-voice[data-step="2"] .l2, .fd-voice[data-step="3"] .l3, .fd-voice[data-step="4"] .l3 { opacity: 1; }
.fd-voice .l0 { color: var(--fd-green); }
.fd-voice .l1 { color: var(--fd-purple); }
.fd-voice .l2 { color: var(--fd-orange); }
.fd-voice .l3 { color: var(--fd-blue); }

.fd-mic { opacity: 0; transform: scale(0.8); }
.fd-voice[data-step="1"] .fd-ring { background: #24172F; border-color: rgba(170, 107, 225, 0.4); color: var(--fd-purple); }
.fd-voice[data-step="1"] .fd-ear { opacity: 0; transform: scale(0.8); }
.fd-voice[data-step="1"] .fd-mic { opacity: 1; transform: none; }
.fd-voice[data-step="2"] .fd-ring { background: #3A2406; border-color: rgba(255, 159, 10, 0.3); color: var(--fd-orange); }
.fd-voice[data-step="3"] .fd-ring, .fd-voice[data-step="4"] .fd-ring { background: #062447; border-color: rgba(10, 132, 255, 0.35); color: var(--fd-blue); }
.fd-voice[data-step="2"] .fd-ear, .fd-voice[data-step="3"] .fd-ear, .fd-voice[data-step="4"] .fd-ear { opacity: 0; transform: scale(0.8); }
.fd-voice[data-step="2"] .fd-dots { opacity: 1; }
.fd-voice[data-step="3"] .fd-bars, .fd-voice[data-step="4"] .fd-bars { opacity: 1; }

.fd-voice[data-step="1"] .fd-user,
.fd-voice[data-step="3"] .fd-chef, .fd-voice[data-step="4"] .fd-chef { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 2. Adapts to your skill ---------- */
/* "Intermediate" outgrows a third of narrow cards: slimmer gutter, smaller label until there is room */
.fd-skill { padding-inline: 12px; container-type: inline-size; }

.fd-seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 3px;
  border-radius: 10px;
  background: var(--fd-card);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
}

@container (min-width: 281px) {
  .fd-seg { font-size: 12px; letter-spacing: 0; }
}

@container (max-width: 219px) {
  .fd-seg { font-size: 10px; }
}

.fd-seg span { position: relative; z-index: 1; padding: 7px 0; color: var(--fd-text-2); transition: color 0.35s ease; }

.fd-seg-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 3);
  border-radius: 8px;
  background: var(--fd-card-2);
  box-shadow: inset 0 0 0 1.5px var(--fd-blue);
  transition: transform 0.5s var(--fd-ease);
}

.fd-skill[data-step="1"] .fd-seg-thumb { transform: translateX(100%); }
.fd-skill[data-step="2"] .fd-seg-thumb { transform: translateX(200%); }
.fd-skill[data-step="0"] .fd-seg span:nth-child(1),
.fd-skill[data-step="1"] .fd-seg span:nth-child(2),
.fd-skill[data-step="2"] .fd-seg span:nth-child(3) { color: var(--fd-text); }

.fd-instruction {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--fd-card);
}

.fd-chef-tag { display: block; margin-bottom: 4px; color: var(--fd-blue); font-size: 11px; font-weight: 600; }

.fd-lines { display: grid; }
.fd-lines p {
  grid-area: 1 / 1;
  font-size: 14px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--fd-ease), transform 0.4s var(--fd-ease);
}

.fd-skill[data-step="0"] .fd-lines p:nth-child(1),
.fd-skill[data-step="1"] .fd-lines p:nth-child(2),
.fd-skill[data-step="2"] .fd-lines p:nth-child(3) { opacity: 1; transform: none; }

.fd-stage .fd-note { margin-top: 16px; color: var(--fd-text-2); font-size: 11px; text-align: center; }

/* ---------- 3. Sensory cues ---------- */
.fd-step-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--fd-card);
}

.fd-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: none;
  background: #EDE4CC;
}

/* Transition only on the way in, so the loop restart snaps back to raw/empty */
.fd-sensory.s1 .fd-swatch { background: #C9862C; transition: background 5s linear; }
.fd-step-meta { color: var(--fd-text-2); font-size: 11px; }
.fd-step-text { font-size: 14px; font-weight: 600; }

.fd-progress { height: 4px; margin: 10px 2px 12px; border-radius: 2px; background: var(--fd-card-2); overflow: hidden; }
.fd-progress i { display: block; width: 0; height: 100%; background: var(--fd-blue); }
.fd-sensory.s1 .fd-progress i { width: 100%; transition: width 5s linear; }

.fd-cues { display: grid; gap: 6px; }
.fd-cues li { display: flex; align-items: center; gap: 10px; }
.fd-cues svg { color: var(--fd-orange); }
.fd-cues b { font-weight: 600; }
.fd-cues span { color: var(--fd-text-2); }
.fd-sensory.s1 .c1, .fd-sensory.s2 .c2, .fd-sensory.s3 .c3 { opacity: 1; transform: none; }

/* ---------- 4. Shopping list ---------- */
.fd-list-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--fd-card);
}

.fd-list-head img { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; }
.fd-list-head div { flex: 1; min-width: 0; }
.fd-list-head b { display: block; font-size: 14px; }
.fd-left { color: var(--fd-text-2); font-size: 11px; }
.fd-bar { display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: var(--fd-card-2); overflow: hidden; }
.fd-bar i { display: block; width: 0; height: 100%; background: var(--fd-green); transition: width 0.5s var(--fd-ease); }
.fd-shop.s4 .fd-bar i { width: 20%; }
.fd-shop.s5 .fd-bar i { width: 40%; }

.fd-cart {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--fd-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.3s ease;
}

.fd-shop[data-step="1"] .fd-cart { transform: scale(0.9); }
.fd-shop.s2 .fd-cart { background: var(--fd-card-2); color: var(--fd-green); }
.fd-cart .on, .fd-shop.s2 .fd-cart .off { display: none; }
.fd-shop.s2 .fd-cart .on { display: inline; }

.fd-items { margin-top: 8px; padding: 0 4px; }
.fd-items li { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.fd-items span { flex: 1; transition: color 0.3s ease; }
.fd-items em { font-style: normal; color: var(--fd-text-2); font-size: 12px; }

.fd-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--fd-text-2);
  display: grid;
  place-items: center;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.fd-check svg { opacity: 0; transform: scale(0.5); transition: opacity 0.25s ease, transform 0.25s var(--fd-ease); }

.fd-shop.s2 .r1, .fd-shop.s2 .r2, .fd-shop.s3 .r3, .fd-shop.s3 .r4 { opacity: 1; transform: none; }
.fd-shop .r2 { transition-delay: 0.12s; }
.fd-shop .r4 { transition-delay: 0.12s; }
.fd-shop.s4 .r1 .fd-check, .fd-shop.s5 .r2 .fd-check { background: var(--fd-green); border-color: var(--fd-green); }
.fd-shop.s4 .r1 .fd-check svg, .fd-shop.s5 .r2 .fd-check svg { opacity: 1; transform: none; }
.fd-shop.s4 .r1 span, .fd-shop.s5 .r2 span { color: var(--fd-text-2); text-decoration: line-through; }

/* ---------- 5. Timers ---------- */
.fd-timers .fd-caption { top: 16px; bottom: auto; opacity: 1; transform: translateX(-50%); font-size: 12px; }

.fd-timer {
  position: absolute;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--fd-card);
}

.fd-timer.t1 { top: 74px; }
.fd-timer.t2 { top: 152px; padding: 7px 14px; }

.fd-timer-label { display: flex; align-items: center; gap: 6px; color: var(--fd-text-2); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.fd-timer-label small { display: block; margin-top: 2px; color: var(--fd-text); font-size: 13px; letter-spacing: 0; text-transform: none; }

.fd-digits {
  margin-left: auto;
  color: var(--fd-blue);
  font-size: 34px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.fd-timer.t2 .fd-digits { font-size: 22px; }

.fd-tag {
  position: absolute;
  top: -9px;
  right: 12px;
  padding: 2px 7px;
  border-radius: 4px;
  background: #fff;
  color: #000;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(3deg) scale(0.6);
  opacity: 0;
  transition: opacity 0.3s ease 0.35s, transform 0.4s var(--fd-ease) 0.35s;
}

.fd-timers.s1 .t1, .fd-timers.s2 .t2 { opacity: 1; transform: none; }
.fd-timers.s1 .fd-tag { opacity: 1; transform: rotate(3deg) scale(1); }

/* ---------- 6. Import any recipe ---------- */
.fd-source {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--fd-card);
  color: var(--fd-text-2);
  transition: opacity 0.3s ease;
}

/* All source icons are stacked; data-src on the stage picks the visible one */
.fd-src-icon { position: relative; flex: none; width: 20px; height: 20px; }
.fd-src-icon > * { position: absolute; inset: 0; width: 20px; height: 20px; opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.4s var(--fd-ease); }
.fd-src-icon img { border-radius: 5px; }
.fd-src-icon .i-allrecipes, .fd-src-icon .i-pinterest { border-radius: 50%; }
.fd-src-icon .i-photo { color: var(--fd-blue); }
.fd-import[data-src="allrecipes"] .i-allrecipes,
.fd-import[data-src="instagram"] .i-instagram,
.fd-import[data-src="pinterest"] .i-pinterest,
.fd-import[data-src="youtube"] .i-youtube,
.fd-import[data-src="photo"] .i-photo { opacity: 1; transform: none; }

.fd-source .fd-src-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fd-text); }
.fd-share { padding: 4px 9px; border-radius: 999px; background: var(--fd-blue); color: #fff; font-size: 11px; font-weight: 600; transition: transform 0.15s ease; }
.fd-import[data-step="1"] .fd-share { transform: scale(0.88); }

.fd-notif {
  position: absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 16px;
  background: rgba(58, 58, 60, 0.96);
  transform: translateY(-120%);
  opacity: 0;
  transition: transform 0.55s var(--fd-ease), opacity 0.3s ease;
  z-index: 2;
}

.fd-notif img { width: 28px; height: 28px; border-radius: 7px; }
.fd-notif div { flex: 1; min-width: 0; }
.fd-notif b { display: block; font-size: 12px; }
.fd-notif span { display: block; color: #C7C7CC; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-notif em { align-self: flex-start; color: #C7C7CC; font-size: 10px; font-style: normal; }
.fd-import.s2 .fd-notif { transform: none; opacity: 1; }
.fd-import.s4 .fd-notif { transform: translateY(-120%); opacity: 0; }

.fd-recipe {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  padding: 8px;
  border-radius: 14px;
  background: var(--fd-card);
  transform: translateY(14px) scale(0.97);
}

.fd-recipe img { width: 104px; height: 104px; border-radius: 10px; object-fit: cover; }
.fd-recipe b { display: block; margin-top: 4px; font-size: 15px; line-height: 1.25; }
.fd-recipe span { display: block; margin-top: 4px; color: var(--fd-text-2); font-size: 12px; }
.fd-recipe .fd-badge { display: inline-block; margin-top: 8px; padding: 2px 7px; border-radius: 5px; background: rgba(255, 159, 10, 0.18); color: var(--fd-orange); font-size: 11px; font-weight: 600; }
.fd-import.s3 .fd-recipe { opacity: 1; transform: none; }

/* ---------- 7. Cookbooks ---------- */
.fd-shelf-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fd-shelf-head b { flex: 1; font-size: 15px; }
.fd-plus { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--fd-card-2); color: var(--fd-blue); font-size: 17px; line-height: 1; }
.fd-link { color: var(--fd-blue); font-size: 12px; }

.fd-shelf { display: flex; gap: 10px; }
.fd-shelf li { flex: none; width: 76px; }
.fd-shelf img { display: block; width: 76px; height: 95px; border-radius: 3px 7px 7px 3px; object-fit: cover; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18); }
.fd-shelf b { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-shelf span { display: block; color: var(--fd-text-2); font-size: 11px; }

.fd-count .on, .fd-books.s4 .fd-count .off { display: none; }
.fd-books.s4 .fd-count .on { display: block; color: var(--fd-blue); }
.fd-books.s4 .fd-book-date img { animation: fd-pop 0.6s var(--fd-ease); }

@keyframes fd-pop { 40% { transform: scale(1.08); } }

/* Dim the shelf while the sheet is up */
.fd-books::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.fd-books.s1::after { opacity: 1; }

.fd-sheet {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  z-index: 2;
  padding: 12px 14px 10px;
  border-radius: 16px 16px 0 0;
  background: var(--fd-card);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.14);
  transform: translateY(105%);
  transition: transform 0.5s var(--fd-ease);
}

.fd-books.s1 .fd-sheet { transform: none; }
.fd-books.s4::after { opacity: 0; }
.fd-books.s4 .fd-sheet { transform: translateY(105%); }

.fd-sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.fd-sheet-head > span:first-child { flex: 1; }
.fd-sheet-head b { display: block; font-size: 13px; }
.fd-sheet-head small { display: block; color: var(--fd-text-2); font-size: 11px; }
.fd-done { padding: 5px 12px; border-radius: 999px; background: var(--fd-blue); color: #fff; font-size: 12px; font-weight: 600; transition: transform 0.15s ease; }
.fd-books[data-step="3"] .fd-done { transform: scale(0.88); }

.fd-ticks li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.fd-ticks li + li { border-top: 1px solid var(--fd-card-2); }
.fd-ticks img { width: 24px; height: 30px; border-radius: 2px 4px 4px 2px; object-fit: cover; }
.fd-ticks span { flex: 1; font-size: 13px; }

.fd-tick {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--fd-text-2);
  display: grid;
  place-items: center;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.fd-tick svg { opacity: 0; transform: scale(0.5); transition: opacity 0.25s ease, transform 0.25s var(--fd-ease); }
.fd-tick.on, .fd-books.s2 .fd-tick-date .fd-tick { background: var(--fd-blue); border-color: var(--fd-blue); }
.fd-tick.on svg, .fd-books.s2 .fd-tick-date .fd-tick svg { opacity: 1; transform: none; }

.fd-stage .fd-sheet-note { margin-top: 2px; color: var(--fd-text-2); font-size: 11px; text-align: center; }

/* ---------- 8. Share with friends ---------- */
/* Steps: 1 text bubble, 2 link bubble, 3 tap, 4 receive card, 5 Add pressed, 6 saved toast */
.fd-chat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.fd-chat-head b { font-size: 13px; }
.fd-avatar { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#A5A5AA, #8E8E93); color: #fff; font-size: 11px; font-weight: 700; }

.fd-stage .fd-bubble { width: max-content; max-width: 75%; padding: 6px 12px; border-radius: 16px; background: var(--fd-card-2); font-size: 13px; }

.fd-preview {
  width: 62%;
  max-width: 228px;
  margin-top: 4px;
  border-radius: 16px;
  background: var(--fd-card-2);
  overflow: hidden;
  transition: opacity 0.45s var(--fd-ease), transform 0.2s ease;
}

.fd-preview img { display: block; width: 100%; height: 78px; object-fit: cover; }
.fd-preview div { padding: 6px 10px 7px; }
.fd-preview b { display: block; font-size: 12px; }
.fd-preview span { color: var(--fd-text-2); font-size: 11px; }

.fd-send.s1 .fd-bubble, .fd-send.s2 .fd-preview { opacity: 1; transform: none; }
.fd-send[data-step="3"] .fd-preview { transform: scale(0.96); }

.fd-send::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.fd-send.s4::after { opacity: 1; }
.fd-send.s6::after { opacity: 0; }

.fd-receive {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  z-index: 2;
  padding: 12px 14px 14px;
  border-radius: 16px 16px 0 0;
  background: var(--fd-card);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.14);
  transform: translateY(105%);
  transition: transform 0.5s var(--fd-ease);
}

.fd-send.s4 .fd-receive { transform: none; }
.fd-send.s6 .fd-receive { transform: translateY(105%); }

.fd-stage .fd-from { display: flex; align-items: center; gap: 6px; color: var(--fd-text-2); font-size: 12px; }
.fd-receive-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 12px; }
.fd-receive-row img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; }
.fd-receive-row b { display: block; font-size: 14px; }
.fd-receive-row span { color: var(--fd-text-2); font-size: 11px; }

.fd-add { display: block; padding: 8px; border-radius: 999px; background: var(--fd-blue); color: #fff; font-size: 13px; font-weight: 600; text-align: center; transition: transform 0.15s ease; }
.fd-send[data-step="5"] .fd-add { transform: scale(0.95); }

/* Matches the app's import toast: a full-width bar with the photo, the line and Add to cookbook */
.fd-toast {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 5px;
  border-radius: 999px;
  background: rgba(229, 229, 234, 0.96);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--fd-ease) 0.25s, transform 0.4s var(--fd-ease) 0.25s;
}

.fd-toast img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.fd-toast b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 600; letter-spacing: -0.01em; }
.fd-toast-btn { flex: none; padding: 6px 9px; border-radius: 999px; background: var(--fd-blue); color: #fff; font-size: 10.5px; font-weight: 600; }
.fd-send.s6 .fd-toast { opacity: 1; transform: none; }
/* Once it's saved, the chat steps back so the toast doesn't sit on the link */
.fd-chat-head { transition: opacity 0.4s ease; }
.fd-stage .fd-bubble { transition: opacity 0.4s ease, transform 0.45s var(--fd-ease); }
.fd-stage .fd-preview { transition: opacity 0.4s ease, transform 0.2s ease; }
.fd-send.s6 .fd-chat-head, .fd-send.s6 .fd-bubble, .fd-send.s6 .fd-preview { opacity: 0.25; }

/* ---------- Light variant (used on the homepage: .features-grid.fd-light) ---------- */
.fd-light .fd-stage {
  --fd-bg: #F2F2F7;
  --fd-card: #FFFFFF;
  --fd-card-2: #E5E5EA;
  --fd-text: #000000;
  --fd-text-2: #6C6C70;
  --fd-blue: #007AFF;
  --fd-green: #34C759;
  --fd-orange: #FF9500;
  --fd-purple: #8444BD;
}

.fd-light .fd-ring { background: #E4F8EA; }
.fd-light .fd-voice[data-step="1"] .fd-ring { background: #F1E7FA; border-color: rgba(132, 68, 189, 0.3); }
.fd-light .fd-voice[data-step="2"] .fd-ring { background: #FFF1DC; }
.fd-light .fd-voice[data-step="3"] .fd-ring, .fd-light .fd-voice[data-step="4"] .fd-ring { background: #E3EFFF; }
.fd-light .fd-dots i, .fd-light .fd-bars i { background: currentColor; }
.fd-light .fd-caption { background: #1C1C1E; color: #fff; }
.fd-light .fd-caption.fd-user { background: var(--fd-card-2); color: var(--fd-text); }
.fd-light .fd-seg { background: var(--fd-card-2); }
.fd-light .fd-seg-thumb { background: #fff; }
.fd-light .fd-tag { background: #1C1C1E; color: #fff; }
.fd-light .fd-notif { background: rgba(255, 255, 255, 0.97); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
.fd-light .fd-notif span, .fd-light .fd-notif em { color: var(--fd-text-2); }

/* Reduced motion: scenes are set to their final frame by the script; drop all movement */
@media (prefers-reduced-motion: reduce) {
  .fd-stage *, .fd-stage *::before, .fd-stage *::after { animation: none !important; transition: none !important; }
}

@media (min-width: 1024px) {
  .fd-stage { margin: 0 -8px 24px; }
}