/* PopAgent's site stylesheet.
 *
 * Carried over from the accepted page (see reference/swift-site-export/), not
 * rewritten: every colour, glow and shadow is a custom property, the dark
 * palette is declared once and applied by both the media query and the
 * data-scheme attribute, and the mascot's landing is a CSS scroll-driven
 * animation. The page ships no JavaScript, and this file is the reason it does
 * not need any.
 */

:root {
  --bg: #fbfcff;
  --wash-one: rgba(158, 128, 238, 0.2);
  --wash-two: rgba(234, 104, 185, 0.13);
  --ink: #2a2638;
  --ink-soft: #5f5876;
  --ink-faint: #8b84a1;
  --ink-ghost: #b3adc4;
  --surface: rgba(255, 255, 255, 0.86);
  --surface-solid: #ffffff;
  --hairline: rgba(110, 80, 190, 0.12);
  --bar: rgba(158, 128, 238, 0.06);
  --shadow-card: 0 18px 44px -26px rgba(90, 60, 170, 0.4);
  --shadow-window: 0 34px 80px -34px rgba(90, 60, 170, 0.4);
  --shadow-button: 0 18px 38px -14px rgba(158, 128, 238, 0.7);
  --glow-opacity: 0;
  --headline-fill: var(--ink);
  --bar-bg: rgba(251, 252, 255, 0.72);
  --bar-button-bg: rgba(110, 80, 190, 0.08);
  --bar-button-ink: var(--ink);
  --shadow-featured: 0 26px 60px -28px rgba(90, 60, 170, 0.55);
}
/* The reader's setting decides; `data-scheme` only overrides it when a
   page is being inspected deliberately. The attribute sits on `body`,
   which is where the document can carry one, so the tokens are
   redeclared there rather than on `:root`. */
@media (prefers-color-scheme: dark) {
  body:not([data-scheme="light"]) { --bg: #08080c;
  --wash-one: rgba(158, 128, 238, 0.14);
  --wash-two: rgba(234, 104, 185, 0.08);
  --ink: #ededf2;
  --ink-soft: #a0a0b0;
  --ink-faint: #70707f;
  --ink-ghost: #50505d;
  --surface: rgba(255, 255, 255, 0.03);
  --surface-solid: #101017;
  --hairline: rgba(255, 255, 255, 0.08);
  --bar: rgba(255, 255, 255, 0.035);
  --shadow-card: none;
  --shadow-window: 0 50px 110px -40px rgba(0, 0, 0, 0.9);
  --shadow-button: 0 14px 40px -14px #9E80EE;
  --glow-opacity: 0.28;
  --bar-bg: rgba(8, 8, 12, 0.66);
  --bar-button-bg: rgba(255, 255, 255, 0.08);
  --bar-button-ink: var(--ink);
  --shadow-featured: 0 30px 70px -30px rgba(0, 0, 0, 0.95);
  /* Gentle: the sweep runs over the whole headline block, so a steep
     one dims the second line and reads as de-emphasis. */
  --headline-fill: linear-gradient(180deg, #ffffff 38%, #bfbfcd 128%); }
}
body[data-scheme="dark"] { --bg: #08080c;
  --wash-one: rgba(158, 128, 238, 0.14);
  --wash-two: rgba(234, 104, 185, 0.08);
  --ink: #ededf2;
  --ink-soft: #a0a0b0;
  --ink-faint: #70707f;
  --ink-ghost: #50505d;
  --surface: rgba(255, 255, 255, 0.03);
  --surface-solid: #101017;
  --hairline: rgba(255, 255, 255, 0.08);
  --bar: rgba(255, 255, 255, 0.035);
  --shadow-card: none;
  --shadow-window: 0 50px 110px -40px rgba(0, 0, 0, 0.9);
  --shadow-button: 0 14px 40px -14px #9E80EE;
  --glow-opacity: 0.28;
  --bar-bg: rgba(8, 8, 12, 0.66);
  --bar-button-bg: rgba(255, 255, 255, 0.08);
  --bar-button-ink: var(--ink);
  --shadow-featured: 0 30px 70px -30px rgba(0, 0, 0, 0.95);
  /* Gentle: the sweep runs over the whole headline block, so a steep
     one dims the second line and reads as de-emphasis. */
  --headline-fill: linear-gradient(180deg, #ffffff 38%, #bfbfcd 128%); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background:
    radial-gradient(900px 520px at 50% -140px, var(--wash-one), transparent 70%),
    radial-gradient(700px 440px at 88% 18%, var(--wash-two), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
.glow {
  position: absolute;
  top: -320px;
  left: 50%;
  width: 1050px;
  height: 660px;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #5AABF1 0%, #9E80EE 52%, #EA68B9 100%);
  filter: blur(160px);
  opacity: var(--glow-opacity);
  pointer-events: none;
}
/* Visible only to a keyboard, which is the one way past a sticky bar
   without tabbing through it. */
.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--surface-solid);
  color: var(--ink);
  border: 1px solid var(--hairline);
  text-decoration: none;
  z-index: 20;
}
.skip:focus { left: 16px; }
.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px max(24px, calc((100% - 1020px) / 2));
  background: var(--bar-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
/* Keeps the bar's layout at the small size while the image inside is
   laid out at the size it is drawn when enlarged. */
.mascot-slot {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 26px;
}
.bar-mascot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  /* Resting size: 26 of 120. Scaling down keeps the full resolution of
     the source; scaling up would show an enlarged 26px bitmap. */
  scale: 0.2167;
  /* Never a click target. While it is scaled up over the hero it
     covers that area, and the wordmark's link would swallow clicks
     meant for the page. The wordmark text stays clickable. */
  pointer-events: none;
}
.bar-links {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
}
.bar-links a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 8px;
}
.bar-links a:hover { color: var(--ink); }
.bar-button {
  background: var(--bar-button-bg);
  color: var(--bar-button-ink) !important;
  border: 1px solid var(--hairline);
  font-weight: 550;
  padding: 7px 15px !important;
  border-radius: 980px !important;
}
.hero {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: 76px 24px 44px;
  text-align: center;
}
.eyebrow {
  margin: 0;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow.centered { text-align: center; margin: 0; }
h1 {
  margin: 16px 0 0;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.032em;
  font-weight: 700;
  background: var(--headline-fill);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lede {
  margin: 20px auto 0;
  max-width: 580px;
  font-size: 19px;
  color: var(--ink-soft);
}
.button {
  display: inline-block;
  margin-top: 32px;
  padding: 15px 36px;
  border-radius: 980px;
  background: linear-gradient(135deg, #5AABF1 0%, #9E80EE 52%, #EA68B9 100%);
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-button);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.button:hover { transform: translateY(-2px); }
.note {
  margin: 14px 0 0;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--ink-faint);
}
.shot { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.window {
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-solid);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-window);
}
.window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 17px;
  background: var(--bar);
  border-bottom: 1px solid var(--hairline);
}
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dot-red { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green { background: #28c840; }
.window-title { margin-left: 6px; font-size: 13px; color: var(--ink-faint); }
.window-body { aspect-ratio: 16 / 10; display: grid; place-items: center; }
.window-caption { color: var(--ink-ghost); font-size: 14px; }
.features { max-width: 1020px; margin: 0 auto; padding: 104px 24px 0; }
.grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.card {
  padding: 28px 26px 30px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
}
.bullet {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: linear-gradient(135deg, #5AABF1 0%, #9E80EE 52%, #EA68B9 100%);
  margin-bottom: 18px;
}
.card h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.pricing {
  max-width: 1020px;
  margin: 0 auto;
  padding: 112px 24px 0;
  /* The bar is sticky, so an anchor must stop below it. */
  scroll-margin-top: 72px;
}
.pricing h2 {
  margin: 0;
  text-align: center;
  font-size: clamp(30px, 3.6vw, 44px);
  letter-spacing: -0.025em;
}
.section-lede {
  margin: 14px auto 0;
  max-width: 520px;
  text-align: center;
  color: var(--ink-soft);
}
.tiers {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 20px;
  align-items: start;
}
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 28px 28px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
}
/* The featured tier is the recommendation, so it is lifted rather than
   merely tinted. */
.tier.featured {
  border-color: transparent;
  background:
    linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box,
    linear-gradient(135deg, #5AABF1 0%, #9E80EE 52%, #EA68B9 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: var(--shadow-featured);
}
.badge {
  position: absolute;
  top: -11px;
  left: 28px;
  padding: 4px 11px;
  border-radius: 980px;
  background: linear-gradient(135deg, #5AABF1 0%, #9E80EE 52%, #EA68B9 100%);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tier h3 { margin: 0; font-size: 19px; letter-spacing: -0.01em; }
.devices {
  margin: 4px 0 0;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--ink-faint);
}
.amount {
  margin: 20px 0 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.now { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; }
.was { font-size: 18px; color: var(--ink-faint); text-decoration-thickness: 1.5px; }
.off {
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--bar-button-bg);
  border: 1px solid var(--hairline);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}
.tier-button {
  margin-top: 22px;
  width: 100%;
  padding: 12px 20px;
  border-radius: 980px;
  text-align: center;
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 600;
  background: var(--bar-button-bg);
  border: 1px solid var(--hairline);
  color: var(--ink);
  transition: transform 0.15s ease;
}
.tier.featured .tier-button {
  background: linear-gradient(135deg, #5AABF1 0%, #9E80EE 52%, #EA68B9 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: var(--shadow-button);
}
.tier-button:hover { transform: translateY(-1px); }
.renewal {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--ink-faint);
}
.renewal.first { margin-top: 2px; }
.volume {
  margin: 22px 0 0;
  text-align: center;
  font-size: 14.5px;
  color: var(--ink-faint);
}
.volume a {
  margin-left: 7px;
  color: var(--ink);
  text-underline-offset: 3px;
  text-decoration-color: var(--hairline);
}
.volume a:hover { text-decoration-color: currentColor; }
.included {
  margin-top: 36px;
  padding: 26px 28px;
  border-radius: 18px;
  border: 1px solid var(--hairline);
}
.included h3 {
  margin: 0 0 14px;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}
.included ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 28px;
}
.included li { position: relative; padding-left: 24px; font-size: 15px; }
.included li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(135deg, #5AABF1 0%, #9E80EE 52%, #EA68B9 100%);
}
/* Louder than renewal, on purpose: buy-once mistaken for a
   subscription costs the sale outright. */
.perpetual-note {
  margin-top: 36px;
  padding: 30px 32px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  text-align: center;
}
.perpetual-heading {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.perpetual-note p:last-child {
  margin: 0 auto;
  max-width: 580px;
  color: var(--ink-soft);
  font-size: 15px;
}
.notes {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.notes article {
  padding: 26px 28px;
  border-radius: 20px;
  border: 1px solid var(--hairline);
}
.notes h4 { margin: 0 0 10px; font-size: 16px; letter-spacing: -0.01em; }
.notes p { margin: 0 0 10px; color: var(--ink-soft); font-size: 14.5px; }
.notes p:last-child { margin: 0; }
.fineprint {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 28px;
  color: var(--ink-faint);
  font-size: 13.5px;
}
.faq {
  max-width: 820px;
  margin: 0 auto;
  /* The last block before the footer, so it carries the bottom room. */
  padding: 104px 24px 96px;
  scroll-margin-top: 72px;
}
.faq h2 {
  margin: 0 0 36px;
  text-align: center;
  font-size: clamp(30px, 3.6vw, 44px);
  letter-spacing: -0.025em;
}
.questions {
  border-top: 1px solid var(--hairline);
}
.questions details {
  border-bottom: 1px solid var(--hairline);
}
.questions summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 550;
  letter-spacing: -0.01em;
  list-style: none;
}
.questions summary::-webkit-details-marker { display: none; }
/* A drawn marker rather than the platform triangle, so it can rotate
   and match the rest of the page. */
.questions summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 1.8px solid var(--ink-faint);
  border-bottom: 1.8px solid var(--ink-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
}
.questions details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.questions summary:focus-visible {
  outline: 2px solid #9E80EE;
  outline-offset: 2px;
  border-radius: 6px;
}
.questions details p {
  margin: 0;
  padding: 0 4px 22px;
  max-width: 64ch;
  color: var(--ink-soft);
  font-size: 15.5px;
}
/* The mascot starts over the hero and settles into the bar as the
   reader scrolls. One element, not a cross-fade between two: the
   landing place is its own resting position, so the end state is
   exact at any width and nothing has to be computed to reach it.
   Only the starting offset is derived, and if that is a few pixels
   out on some viewport the mascot merely starts slightly off centre.

   Enhancement only. Without scroll timelines, or when the reader asks
   for less motion, the mascot simply sits in the bar and the hero has
   no gap reserved for it. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .bar-mascot {
      animation: mascot-lands linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 180px;
    }
    .hero { padding-top: 196px; }
  }
}
@keyframes mascot-lands {
  from {
    /* From the bar's left edge to the middle of the viewport, and
       down into the hero. 13px is half the mascot. */
    translate: calc(50vw - max(24px, calc((100vw - 1020px) / 2)) - 13px) 124px;
    scale: 1;
  }
  to {
    translate: 0 0;
    scale: 0.2167;
  }
}

.foot {
  border-top: 1px solid var(--hairline);
  padding: 26px max(24px, calc((100% - 1020px) / 2)) 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.foot p { margin: 0; color: var(--ink-faint); font-size: 13.5px; }
.social-links { display: flex; align-items: center; gap: 4px; }
.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: var(--ink-faint);
  transition: color 0.15s ease, background 0.15s ease;
}
.social svg { width: 17px; height: 17px; display: block; }
.social:hover { color: var(--ink); background: var(--bar-button-bg); }
.social:focus-visible {
  outline: 2px solid #9E80EE;
  outline-offset: 2px;
}
@media (max-width: 520px) {
  /* Stacked, so neither the notice nor the marks are cramped. */
  .foot { flex-direction: column; justify-content: center; text-align: center; }
}
@media (max-width: 520px) {
  /* The bar keeps the wordmark and the action; nothing else is in it
     yet, so there is nothing to collapse into a menu. */
  .bar { padding: 10px 16px; }
  .bar-links { gap: 2px; }
}