/* Profiles (/profiles): Miosbot, Miosbot Code and Miosbot Auto, with real captures from the Mac app. */
.bots-plans-note { margin-top: 14px; font-size: 15px; color: var(--m-ink-2); max-width: 64ch; }
.bots-lineup { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 36px 0 0; padding: 0; list-style: none; }
.bots-lineup a { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; height: 100%; padding: 14px 16px; border: 1px solid var(--m-line); border-radius: 16px; background: var(--m-surface); color: var(--m-ink); }
.bots-lineup a:hover { text-decoration: none; border-color: var(--m-ink-2); }
.bots-lineup strong { display: block; font: 500 21px/1.1 var(--m-display); }
.bots-lineup small { display: block; margin-top: 3px; color: var(--m-ink-2); font-size: 14px; line-height: 1.35; }

.bot-avatar { display: block; flex: none; width: 52px; height: 52px; overflow: hidden; border-radius: 14px; }
.bot-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bot-avatar--miobot { background: #fffefa; box-shadow: inset 0 0 0 1px var(--m-line); }
.bot-avatar--miobot img { object-fit: contain; padding: 6%; }
.bot-avatar--shellbot { background: #000; }
.bot-avatar--digibot { background: #000b23; }
.bot-avatar--wizardbot { background: #090e1a; }
.bot-avatar--xl { width: 112px; height: 112px; border-radius: 26px; }

.bots-stage { margin: 0; padding: clamp(12px, 2.4vw, 28px); border-radius: 24px; background: var(--m-stage); }
.bots-stage img { width: 100%; height: auto; filter: drop-shadow(0 18px 34px rgba(15, 25, 50, .24)); }
.bots-switch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
.bots-switch-copy { display: grid; gap: 16px; }
.bots-switch-copy h2, .bots-universe-intro h2 { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -.02em; }
.bots-switch-copy p:not(.m-kicker) { color: var(--m-ink-2); max-width: 58ch; }
.bots-stage--switcher { width: 100%; max-width: 520px; justify-self: end; padding: clamp(18px, 3vw, 36px); }

.bot-profile { display: grid; grid-template-columns: minmax(260px, .36fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); padding: clamp(48px, 6vw, 88px) 0; border-top: 1px solid var(--m-line); }
.bot-profile:first-child { padding-top: 0; border-top: 0; }
.bot-profile:last-child { padding-bottom: 0; }
.bot-profile-head { align-self: start; position: sticky; top: 96px; display: grid; gap: 10px; justify-items: start; }
.bot-profile-head h2 { margin-top: 14px; font-size: clamp(40px, 4vw, 52px); line-height: 1; letter-spacing: -.02em; }
.bot-profile-head .bot-role { font-weight: 600; }
.bot-profile-head > p:not(.bot-role) { color: var(--m-ink-2); }
.bot-facts { width: 100%; margin: 12px 0 0; }
.bot-facts div { padding: 12px 0; border-top: 1px solid var(--m-line); }
.bot-facts div:last-child { border-bottom: 1px solid var(--m-line); }
.bot-facts dt { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--m-ink-2); }
.bot-facts dd { margin: 3px 0 0; font-size: 15px; }
.bot-shots { display: grid; gap: clamp(28px, 4vw, 48px); min-width: 0; }
.bot-shot { margin: 0; min-width: 0; }
.bot-shot figcaption { margin-top: 14px; font-size: 15px; color: var(--m-ink-2); }
.bot-shot figcaption strong { color: var(--m-ink); font-weight: 600; }

.bots-universe-intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr); gap: 18px clamp(20px, 5vw, 72px); align-items: end; margin-bottom: 36px; }
.bots-universe-intro .m-kicker { grid-column: 1 / -1; }
.bots-universe-intro > p:last-child { color: var(--m-ink-2); max-width: 62ch; }

.bots-close-inner { display: grid; gap: 18px; justify-items: start; padding: clamp(40px, 7vw, 88px); border-radius: 28px; background: var(--m-stage); }
.bots-close-inner h2 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1; letter-spacing: -.025em; max-width: 16ch; }
.bots-close-inner p { color: var(--m-ink-2); max-width: 64ch; }
.bots-close-inner .m-actions { margin-top: 6px; }

@media (max-width: 900px) {
  .bots-lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bots-switch-grid, .bot-profile, .bots-universe-intro { grid-template-columns: 1fr; }
  .bots-stage--switcher { justify-self: start; }
  .bots-universe-intro .m-kicker { grid-column: auto; }
  .bot-profile-head { position: static; }
}
@media (max-width: 520px) {
  .bots-lineup { grid-template-columns: 1fr; }
  .bot-avatar--xl { width: 88px; height: 88px; border-radius: 22px; }
}
.bots-lineup--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .bots-lineup--three { grid-template-columns: 1fr; } }