/* Hero caption under the demo (prototypes/loop-hero-caption-2026-10-14, option 4d, Theo 2026-10-14) and the
   one-at-a-time notification tray. */
/* One notification at a time (Theo, 2026-10-14). Every notification in the tray shares one grid cell, so a new
   one lands exactly where the old one was. Arriving keeps the site's own notification entrance (the Use Cases
   tray's slide in from the right, 500ms); leaving is transitions.dev's toast close (22): fade, 16px drop,
   0.97 scale and a 2px blur over 250ms on the smooth-out curve. */
.hero-ntf { display: grid; align-items: end; }
.hero-ntf .ntf { grid-area: 1 / 1; }
.hero-ntf .ntf.is-out {
  opacity: 0; transform: translateY(16px) scale(0.97); filter: blur(2px);
  transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1), transform 250ms cubic-bezier(0.22, 1, 0.36, 1), filter 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) { .hero-ntf .ntf, .hero-ntf .ntf.is-out { transition: none !important; } }

/* The caption now lives inside the demo's own wrap, so it shares the demo box's left and right edges. */
#heroTl { --gap: 14px; margin-top: var(--gap); padding: 0; text-align: left; }
#heroTl .bar { margin: 0; max-width: none; }
@media (max-width: 620px) { #heroTl { --gap: 12px; } }

/* 4b: the caption in one soft container exactly the demo box's width, no outline. Inside: five chips (step and
   whose step it is) with a pill sliding to the current one (transitions.dev tabs sliding: 250ms, smooth-out),
   the step's progress as a thin line inside the pill, and the line under the chips. */
#heroTl { margin-top: 20px; padding: 0; text-align: left; }
#heroTl .cap4b { border-radius: 18px; background: var(--quiet); padding: 6px; }
#heroTl .bar.tl-chips { position: relative; margin: 0; max-width: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
#heroTl .bar.tl-chips span { height: auto; border-radius: 0; background: none; overflow: visible; }
/* The site's own bar rules colour every span in .bar, and its dark-mode ones outrank the line above, so the
   chips' backgrounds are set at a higher weight here. */
#heroTl#heroTl .bar.tl-chips span { background: none; }
#heroTl#heroTl .bar.tl-chips .pill { background: var(--card); }
#heroTl#heroTl .bar.tl-chips .prog { background: rgba(75, 123, 227, .14); }
:root[data-theme="dark"] #heroTl#heroTl .bar.tl-chips .pill { background: rgba(255, 255, 255, .09); }
:root[data-theme="dark"] #heroTl#heroTl .bar.tl-chips .prog { background: rgba(134, 169, 242, .18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #heroTl#heroTl .bar.tl-chips .pill { background: rgba(255, 255, 255, .09); }
  :root:not([data-theme="light"]) #heroTl#heroTl .bar.tl-chips .prog { background: rgba(134, 169, 242, .18); } }
#heroTl .bar.tl-chips .pill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 13px; background: var(--card);
  box-shadow: 0 1px 2px rgba(17, 22, 32, .06), 0 6px 18px -10px rgba(17, 22, 32, .22);
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1), width 250ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
#heroTl .bar.tl-chips .tl-chip { position: relative; z-index: 1; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
#heroTl .tl-chip b { font-size: 13px; line-height: 1.25; font-weight: 500; color: var(--ink2); transition: color 250ms ease-in-out; }
#heroTl .tl-chip small { font-size: 12px; line-height: 1.25; font-weight: 400; color: var(--ink3); }
#heroTl .tl-chip.on b { color: var(--ink1); }
#heroTl .bar.tl-chips .prog { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 999px;
  background: rgba(75, 123, 227, .14); opacity: 0; transition: opacity 250ms ease-in-out; }
#heroTl .tl-chip.on .prog { opacity: 1; }
#heroTl .bar.tl-chips i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); }
#heroTl .cap4b .big { margin: 0; padding: 14px 16px 12px; min-height: 0; text-align: center; white-space: nowrap;
  font-size: clamp(15px, 1.2vw, 17px); line-height: 1.4; font-weight: 400; letter-spacing: -0.005em; color: var(--ink-strong); }
:root[data-theme="dark"] #heroTl .bar.tl-chips .pill { background: rgba(255, 255, 255, .09); box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #heroTl .bar.tl-chips .pill { background: rgba(255, 255, 255, .09); box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .6); } }
@media (max-width: 620px) {
  #heroTl { margin-top: 14px; }
  #heroTl .cap4b { border-radius: 15px; padding: 4px; }
  #heroTl .bar.tl-chips { gap: 2px; }
  #heroTl .bar.tl-chips .tl-chip { height: 46px; }
  #heroTl .bar.tl-chips .pill { border-radius: 11px; }
  #heroTl .tl-chip b { font-size: 12px; } #heroTl .tl-chip small { font-size: 11px; }
  #heroTl .bar.tl-chips .prog { left: 10px; right: 10px; bottom: 5px; }
  #heroTl .cap4b .big { padding: 12px 10px 10px; font-size: 15px; white-space: normal; text-wrap: balance; min-height: calc(2em * 1.4 + 22px); }
}

/* 4d (Theo, 2026-10-14): a lighter grey behind the steps only; the line sits below with no background. */
#heroTl .cap4b { background: none; padding: 0; border-radius: 0; }
#heroTl#heroTl .bar.tl-chips { background: color-mix(in srgb, var(--quiet) 50%, transparent); padding: 6px; border-radius: 18px; }
#heroTl .cap4b .big { padding: 0; margin-top: 22px; }
@media (max-width: 620px) { #heroTl .cap4b .big { padding: 0; margin-top: 16px; min-height: calc(2em * 1.4); } }
@media (prefers-reduced-motion: reduce) { #heroTl .bar.tl-chips .pill, #heroTl .tl-chip b, #heroTl .bar.tl-chips .prog { transition: none; } }

/* Step names only, no You / Sam under them, so the bar is shorter (Theo, 2026-10-14). */
#heroTl .bar.tl-chips .tl-chip { height: 32px; }
#heroTl#heroTl .bar.tl-chips { padding: 4px; border-radius: 14px; }
#heroTl .bar.tl-chips .pill { border-radius: 10px; }
#heroTl .tl-chip b { font-size: 12px; }
#heroTl .bar.tl-chips .prog { bottom: 4px; }
@media (max-width: 620px) { #heroTl .bar.tl-chips .tl-chip { height: 32px; } }

/* Six steps: Loop comes before Drop (prototypes/loop-hero-appwindow-2026-10-14, round 2). At 320 each chip is about 45px wide,
   so the progress line keeps a smaller inset there. */
@media (max-width: 380px) { #heroTl .bar.tl-chips .prog { left: 8px; right: 8px; } }

/* Every notification is one shape, like a macOS banner: the tray's full width (356px, the Mac's banner width) and
   one height, whatever it says; the words sit centred in it (Theo, 2026-10-15). */
.hero-ntf .ntf { width: 100%; height: 66px; box-sizing: border-box; align-content: center; }
.hero-ntf .ntf span { white-space: nowrap; }
@media (max-width: 620px) { .hero-ntf .ntf { height: 52px; } }
.hero-ntf { grid-template-columns: 100%; }   /* one full-width track, so every banner is the tray's width */