/* SEED device, shared with the homepage hero (/_home/seed-phone.css, same rules): one real dashboard screenshot
   in an iPhone on phones and tablets, in a window on computers. Screens live in _kit/device/{phone,desk}/<app>.webp
   (copied from the homepage posters; regenerate both together when the dashboard changes). */


.seed-phone { --k: 0.72; position: relative; flex: none; width: calc(418px * var(--k)); height: calc(872px * var(--k)); }
.sp-device { position: absolute; top: 0; left: 0; width: 418px; height: 872px; padding: 14px; border-radius: 68px; background: var(--seed-color-ink); transform: scale(var(--k)); transform-origin: 0 0;
  box-shadow: 0 0 0 2px var(--seed-color-dark-line), 0 0 0 6px color-mix(in srgb, var(--seed-color-dark-line) 35%, var(--seed-color-ink)), 0 70px 120px -40px rgb(0 0 0 / .85), 0 0 140px -30px color-mix(in srgb, var(--seed-color-pale-mint) 30%, transparent); }
.sp-device::before, .sp-device::after { content: ""; position: absolute; width: 5px; border-radius: 3px; background: var(--seed-color-dark-line); }
.sp-device::before { right: -9px; top: 210px; height: 96px; }
.sp-device::after { left: -9px; top: 172px; height: 58px; box-shadow: 0 78px 0 var(--seed-color-dark-line); }
.sp-screen { position: relative; display: flex; flex-direction: column; width: 390px; height: 844px; border-radius: 54px; overflow: hidden; background: var(--seed-color-white); isolation: isolate; text-align: left; }
.sp-status { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; height: 47px; padding: 4px 30px 0 52px; color: var(--seed-color-ink); font: 600 17px/1 var(--seed-font-body); letter-spacing: -0.01em; }
.sp-island { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: var(--seed-color-ink); }
.sp-icons { display: flex; align-items: center; gap: 6px; }
.sp-icons svg { height: 12px; width: auto; fill: currentColor; }
.sp-icons svg:last-child { height: 13px; }
.sp-view { position: relative; flex: none; width: 390px; height: 776px; overflow: hidden; background: var(--seed-color-white); }
.sp-poster { position: absolute; inset: 0; width: 390px; height: 776px; border: 0; }
.sp-poster { z-index: 2; transition: opacity var(--seed-duration-base) var(--seed-ease), transform var(--seed-duration-base) var(--seed-ease); }
[data-seed-device].is-swapping .sp-poster { opacity: 0; transform: translateY(6px); transition-duration: var(--seed-duration-fast); }
.sp-homebar { flex: none; display: grid; place-items: center; height: 21px; }
.sp-homebar i { width: 134px; height: 5px; border-radius: 3px; background: var(--seed-color-ink); }


/* Computer: the same dashboard in a plain window, drawn at a native 1280 × 800 so it renders its desktop layout. */
.seed-desk { --k: 0.72; position: relative; flex: none; width: calc(1280px * var(--k)); height: calc(836px * var(--k)); }
.sd-window { position: absolute; top: 0; left: 0; width: 1280px; height: 836px; border-radius: 18px; overflow: hidden; background: var(--seed-color-white); transform: scale(var(--k)); transform-origin: 0 0; isolation: isolate; text-align: left;
  box-shadow: 0 0 0 1px var(--seed-color-dark-line), 0 0 0 7px color-mix(in srgb, var(--seed-color-dark-line) 30%, var(--seed-color-ink)), 0 80px 140px -50px rgb(0 0 0 / .85), 0 0 180px -40px color-mix(in srgb, var(--seed-color-pale-mint) 35%, transparent); }
.sd-bar { position: relative; display: flex; align-items: center; justify-content: center; height: 36px; background: var(--seed-color-paper); border-bottom: 1px solid var(--seed-color-light-line); }
.sd-dots { position: absolute; left: 18px; display: flex; gap: 8px; }
.sd-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--seed-color-light-line); }
.sd-title { font: 400 13px var(--seed-font-mono); color: var(--seed-color-muted); }
.sd-view, .sd-view .sp-poster { width: 1280px; height: 800px; }

/* One device at a time: the iPhone on phones and tablets, the window on computers. */
@media (max-width: 999px) { .seed-desk { display: none; } }
@media (min-width: 1000px) { .seed-phone { display: none; } }
@media (min-width: 1240px) { .seed-desk { --k: 0.9375; } }

/* App switcher under the device */
.sp-label { margin: 28px 0 8px; font: 400 0.75rem var(--seed-font-mono); color: var(--seed-muted); }
.sp-switch { display: flex; gap: 2px; max-width: 100%; padding: 6px 16px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
.sp-switch::-webkit-scrollbar { display: none; }
.sp-switch button { flex: none; display: grid; justify-items: center; gap: 6px; width: 62px; padding: 6px 0 4px; border: 0; border-radius: 14px; background: none; color: var(--seed-muted); font: 500 0.75rem/1.2 var(--seed-font-body); cursor: pointer; scroll-snap-align: center; transition: color var(--seed-duration-fast) var(--seed-ease); }
.sp-switch img.app-icon, .sp-home-tile { width: 44px; height: 44px; border-radius: 11px; transition: transform var(--seed-duration-fast) var(--seed-ease), box-shadow var(--seed-duration-fast) var(--seed-ease); }
.sp-home-tile { display: grid; place-items: center; background: linear-gradient(var(--seed-color-dark-raised), var(--seed-color-ink)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.sp-home-tile img { width: 22px; height: 22px; }
.sp-switch button:hover { color: var(--seed-ink); }
.sp-switch button:hover img.app-icon, .sp-switch button:hover .sp-home-tile { transform: translateY(-2px); }
.sp-switch button[aria-pressed="true"] { color: var(--seed-ink); }
.sp-switch button[aria-pressed="true"] img.app-icon, .sp-switch button[aria-pressed="true"] .sp-home-tile { box-shadow: 0 0 0 2px var(--seed-bg), 0 0 0 4px var(--seed-color-pale-mint); }
.sp-switch button:focus-visible { outline-offset: 0; }
.sp-caption { margin-top: 10px; font: 400 0.75rem var(--seed-font-mono); color: var(--seed-muted); }

@media (min-width: 1000px) { .seed-phone { --k: 0.8; } }
@media (max-width: 360px) { .seed-phone { --k: 0.64; } }

/* App page hero in the homepage template: centred copy and signup, then the device. One device per page. */
.hero.hero-stacked .hero-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; text-align: center; }
.hero-stacked .hero-copy { display: grid; justify-items: center; max-width: 820px; }
.hero-stacked .hero-app { justify-content: center; text-align: left; }
.hero-stacked .lead { max-width: 36em; margin-inline: auto; }
.hero-stacked .signup { width: 100%; margin-inline: auto; justify-content: center; }
.hero-stacked .signup-note, .hero-stacked .form-status { text-align: center; }
.hero-device { display: grid; justify-items: center; min-width: 0; width: 100%; margin-top: 56px; }
@media (min-width: 1000px) { .hero-device { margin-top: 72px; } }