/* ==========================================================
   The Sweep phone: the verdict card from the App Store shot,
   laid out at a fixed 290x600 design size and scaled to its
   slot via --phone-scale (set by JS). Always the app's own
   Almanac palette, independent of the site theme.
   ========================================================== */
.phone-slot {
  position: relative; justify-self: end;
  width: calc(290px * var(--phone-scale, 1));
  height: calc(600px * var(--phone-scale, 1));
}
.phone {
  width: 290px; height: 600px; position: absolute; top: 0; left: 0;
  transform: scale(var(--phone-scale, 1)) rotate(1.2deg);
  transform-origin: top left;
  background: #2C2A25; border-radius: 42px; padding: 10px;
  box-shadow: var(--shadow-lift);
}
.phone-notch {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 24px; border-radius: 999px; background: #0F0F12; z-index: 3;
}
.phone-screen {
  --sw-paper: #F6F3EC; --sw-card: #FDFBF6; --sw-ink: #2C2A25; --sw-sub: #6E6A60;
  --sw-line: #E4DFD3; --sw-clay: #BF5B3B; --sw-sage: #5F8464; --sw-amber: #C08A2D;
  --sw-rust: #A8402F;
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 33px; background: var(--sw-paper); color: var(--sw-ink);
  display: flex; flex-direction: column; padding: 50px 10px 10px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}
.phone-screen > * { flex: none; }
.phone-screen .serif { font-family: "Fraunces", "Iowan Old Style", "New York", ui-serif, Georgia, serif; }

.sw-top {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 2px 2px 8px;
}
.sw-top b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.sw-top b i { color: var(--sw-sage); font-style: normal; }
.sw-top span { font-size: 5.8px; letter-spacing: .16em; color: var(--sw-sub); white-space: nowrap; }

/* the verdict card */
.sw-card {
  background: var(--sw-card); border: 1px solid var(--sw-line); border-radius: 18px;
  padding: 13px 13px 12px; box-shadow: 0 1px 2px rgba(44,42,37,.05);
  display: flex; flex-direction: column; gap: 5px;
}
.sw-pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
  font-size: 7px; font-weight: 800; letter-spacing: .16em;
  padding: 4px 8px; border-radius: 999px;
  color: var(--sw-sage); background: color-mix(in srgb, var(--sw-sage) 13%, transparent);
}
.sw-pill i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--sw-sage); font-style: normal;
  animation: breathe 4s ease-in-out infinite;
}
.sw-headline { font-size: 21px; font-weight: 500; line-height: 1.12; letter-spacing: -.02em; margin-top: 3px; }
.sw-where { font-size: 8.4px; color: var(--sw-sub); }
.sw-where b { color: var(--sw-ink); font-weight: 600; }
.sw-sched {
  margin-top: 5px; padding-top: 7px; border-top: 1px dashed var(--sw-line);
  font-size: 7.6px; color: var(--sw-sub);
  display: flex; align-items: center; gap: 5px;
}
.sw-sched::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--sw-clay); }
.sw-note { font-size: 7.4px; font-style: italic; color: var(--sw-rust); }

/* reminders + coming up */
.sw-section { margin-top: 10px; }
.sw-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 3px 4px;
}
.sw-section-head span { font-size: 6.2px; font-weight: 700; letter-spacing: .15em; color: var(--sw-sub); }
.sw-section-head em { font-size: 6.4px; font-style: normal; color: var(--sw-clay); font-weight: 700; letter-spacing: .06em; }
.sw-rows { background: var(--sw-card); border: 1px solid var(--sw-line); border-radius: 13px; overflow: hidden; }
.sw-row { display: flex; align-items: center; gap: 7px; padding: 6.5px 10px; }
.sw-row + .sw-row { border-top: 1px solid var(--sw-line); }
.sw-row .sw-ic {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 7px; font-style: normal;
  color: var(--sw-card); background: var(--sw-sage);
}
.sw-row .sw-ic.soft { background: var(--sw-line); color: var(--sw-sub); }
.sw-row .sw-ic.next { background: var(--sw-clay); }
.sw-row .sw-txt { min-width: 0; line-height: 1.25; }
.sw-row .sw-txt b { display: block; font-size: 8.6px; font-weight: 600; }
.sw-row .sw-txt span { display: block; font-size: 6.8px; color: var(--sw-sub); }
.sw-row .sw-when { margin-left: auto; font-size: 8px; color: var(--sw-sub); white-space: nowrap; }

/* buttons */
.sw-actions { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 10px; }
.sw-btn {
  display: grid; place-items: center; height: 30px; border-radius: 11px;
  font-size: 9.4px; font-weight: 600;
}
.sw-btn.fill { background: var(--sw-clay); color: #FFF8F2; }
.sw-btn.ghost { border: 1px solid var(--sw-line); color: var(--sw-ink); background: var(--sw-card); }
.sw-btn.ghost i { font-style: italic; color: var(--sw-sub); font-weight: 400; margin-left: 3px; }

/* the "parked" confirmation banner that slides in */
.sw-notif {
  position: absolute; top: 9px; left: 9px; right: 9px; z-index: 4;
  display: flex; gap: 8px; align-items: center;
  background: color-mix(in srgb, var(--sw-card) 96%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--sw-line); border-radius: 13px; padding: 7px 9px;
  box-shadow: 0 14px 30px rgba(44,42,37,.22);
  transform: translateY(-76px); opacity: 0;
  transition: transform .6s cubic-bezier(.2,.9,.3,1.1), opacity .4s ease;
}
.sw-notif img { border-radius: 6px; width: 26px; height: 26px; }
.sw-notif b { display: block; font-size: 9.4px; color: var(--sw-ink); }
.sw-notif span { font-size: 7.6px; color: var(--sw-sub); }
.sw-notif em { margin-left: auto; font-size: 6.6px; font-style: normal; color: var(--sw-sub); align-self: flex-start; }
html.js .phone-slot.in .sw-notif, html:not(.js) .sw-notif { transform: none; opacity: 1; }
html.js .phone-slot.in .sw-notif { transition-delay: 1.1s, 1.1s; }

/* hero layout: text left, phone right; stacked and centered on small screens */
.hero-grid {
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
}
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hero-grid h1 { margin-left: auto; margin-right: auto; }
  .hero-grid .lede { margin: 0 auto; }
  .hero-grid .btn-row, .hero-grid .hero-note, .hero-grid .verdicts { justify-content: center; }
  .phone-slot { justify-self: center; }
}