/* Laid over an account's Ledger by the app: the way back to Settings (bottom left) and, on the demo Ledger, the strip on
   top that says the numbers are made up and what the next step is. */
.al-pill { position: fixed; left: 16px; bottom: 16px; z-index: 2147483000; display: inline-flex; align-items: center; gap: 8px;
  background: #0A0F1E; color: #EEF2FA; font: 600 13px "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  text-decoration: none; padding: 8px 14px 8px 8px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); max-width: calc(100vw - 32px); }
.al-pill img { width: 22px; height: 22px; flex: none; }
.al-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-pill:hover { background: #121A33; }

.al-demo { position: relative; z-index: 60; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; justify-content: center;
  padding: 9px 16px; background: #0A0F1E; color: #DCE3F2; font: 500 13.5px/1.4 "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; text-align: center; }
.al-demo .al-dot { width: 8px; height: 8px; border-radius: 50%; background: #FFB547; box-shadow: 0 0 0 4px rgba(255, 181, 71, .18); flex: none; }
.al-demo .al-t b { color: #fff; font-weight: 600; }
.al-demo .al-cta { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 13px;
  color: #1A1206; background: linear-gradient(180deg, #FFD27A, #FF9E5E); box-shadow: 0 2px 10px rgba(255, 158, 94, .35); white-space: nowrap; }
.al-demo .al-cta:hover { filter: brightness(1.05); }
.al-demo .al-more { color: #AFC0E6; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* the account menu (☰) at the right end of the bar */
.al-demo.al-has-menu { padding-right: 190px; z-index: 2147482000; }   /* its menu opens over the Ledger's sticky top bar */
.al-acct { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.al-menu-btn { display: inline-flex; align-items: center; gap: 9px; max-width: 170px; padding: 6px 12px 6px 9px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(196, 210, 255, .2); color: #EEF2FA; font: 600 13px "Instrument Sans", system-ui, sans-serif; }
.al-menu-btn:hover, .al-menu-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .13); }
.al-menu-btn:focus-visible { outline: 3px solid #FFD27A; outline-offset: 2px; }
.al-burger { display: inline-grid; gap: 3px; width: 15px; flex: none; }
.al-burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.al-org { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 270px; padding: 6px; border-radius: 14px; text-align: left; z-index: 2147483001;
  background: #121A33; border: 1px solid rgba(196, 210, 255, .18); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); animation: al-pop .16s ease-out; }
.al-menu-h { padding: 10px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(196, 210, 255, .12); }
.al-menu-h b { display: block; color: #fff; font: 700 14px "Bricolage Grotesque", "Instrument Sans", sans-serif; }
.al-menu-h small { color: #A7B2CC; font-size: 12px; }
.al-menu a, .al-menu button { display: block; width: 100%; padding: 9px 12px; border-radius: 9px; text-decoration: none; color: #DCE3F2; text-align: left;
  font: 500 14px "Instrument Sans", system-ui, sans-serif; background: none; border: 0; cursor: pointer; }
.al-menu a small { display: block; color: #8E9AB8; font-size: 12px; margin-top: 1px; }
.al-menu a:hover, .al-menu button:hover, .al-menu a:focus-visible, .al-menu button:focus-visible { background: rgba(255, 255, 255, .07); color: #fff; outline: none; }
.al-menu .al-out { margin-top: 4px; border-top: 1px solid rgba(196, 210, 255, .12); border-radius: 0 0 9px 9px; color: #FFB4A8; }
@keyframes al-pop { from { opacity: 0; transform: translateY(-4px); } }

/* Connect Amazon, once the trial runs */
.al-prompt { position: fixed; inset: 0; z-index: 2147483002; display: grid; place-items: center; padding: 18px; background: rgba(6, 9, 20, .62);
  backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s; }
.al-prompt.on { opacity: 1; }
.al-p-card { width: min(520px, 100%); padding: 28px 26px 22px; border-radius: 22px; color: #DCE3F2; text-align: left;
  background: radial-gradient(500px 220px at 50% 120%, rgba(255, 138, 92, .28), transparent 70%), #121A33; border: 1px solid rgba(196, 210, 255, .18);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5); font: 400 15px/1.5 "Instrument Sans", system-ui, sans-serif; transform: translateY(10px); transition: transform .3s; }
.al-prompt.on .al-p-card { transform: none; }
.al-p-eye { margin: 0 0 8px; font: 500 12px "Geist Mono", monospace; letter-spacing: .18em; text-transform: uppercase; color: #FFB86B; }
.al-p-card h2 { margin: 0 0 14px; color: #fff; font: 750 26px/1.12 "Bricolage Grotesque", "Instrument Sans", sans-serif; letter-spacing: -.03em; }
.al-p-card p { margin: 0 0 14px; }
.al-p-steps { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: s; }
.al-p-steps li { position: relative; padding: 10px 12px 10px 46px; border-radius: 12px; background: rgba(255, 255, 255, .05); counter-increment: s; }
.al-p-steps li::before { content: counter(s); position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font: 700 13px "Instrument Sans", sans-serif; color: #1A1206; background: linear-gradient(180deg, #FFD27A, #FF9E5E); }
.al-p-steps b { display: block; color: #fff; }
.al-p-steps span { color: #A7B2CC; font-size: 13.5px; }
.al-p-acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 4px 0 14px; }
.al-p-main { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  font: 700 15px "Instrument Sans", system-ui, sans-serif; color: #1A1206; background: linear-gradient(180deg, #FFD27A, #FF9E5E); box-shadow: 0 10px 26px rgba(255, 140, 90, .32); }
.al-p-skip { padding: 12px 14px; border: 0; background: none; color: #AFC0E6; font: 600 14px "Instrument Sans", system-ui, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.al-p-main:focus-visible, .al-p-skip:focus-visible { outline: 3px solid #FFD27A; outline-offset: 3px; }
.al-p-fine { margin: 0 !important; color: #8E9AB8; font-size: 12.5px; }

@media (max-width: 760px) {
  .al-demo { font-size: 12px; line-height: 1.35; padding: 7px 12px; gap: 5px 10px; }
  .al-demo.al-has-menu { padding-right: 60px; }
  .al-demo .al-dot { display: none; }
  .al-demo .al-t { flex: 1 1 100%; }
  .al-demo .al-cta { padding: 5px 12px; font-size: 12.5px; }
  .al-acct { top: 8px; transform: none; right: 8px; }
  .al-org { display: none; }
  .al-menu-btn { padding: 8px 9px; }
  .al-menu { width: min(280px, calc(100vw - 20px)); }
  .al-pill { left: 10px; bottom: 10px; }
  .al-p-card { padding: 22px 18px 18px; } .al-p-card h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .al-menu { animation: none; } .al-prompt, .al-p-card { transition: none; } }
@media print { .al-pill, .al-demo, .al-prompt { display: none; } }