/* One purchase moment: price, one button, then the terms as fine print.
   The page already asks three times above this and need not ask twice
   more on the way out. */
.offer-shell { width: min(100%, 48rem); margin-inline: auto; text-align: center; }

.term-list li::before { content: "✓"; color: var(--signal); }

.license-details {
  width: min(100%, 38rem);
  margin-inline: auto;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(247, 247, 243, .16);
  border-radius: var(--radius);
  color: var(--inverse-soft);
}

.license-details summary {
  margin-block: -.4rem;
}

.license-details p { max-width: 46rem; }

@media (max-width: 35rem) {
  .mode-list > div,
  .fit-list div,
  .maker { grid-template-columns: minmax(0, 1fr); }
  .mode-ms { margin-block: .25rem; }
  .button-row .button { width: 100%; }
  .comparison-controls { width: 100%; }
  .comparison-caption { max-width: none; }
  .transport-play { width: 3.25rem; min-width: 3.25rem; }
  .term-list { grid-template-columns: minmax(0, 1fr); }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero-actions .button { width: 100%; }
  .hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-facts div { padding: var(--space-3) var(--space-1); }
  .hero-facts dt { font-size: .68rem; line-height: 1.15; }
  .hero-facts dd { font-size: .72rem; line-height: 1.25; }
  .mix-map { grid-template-columns: minmax(0, 1fr) 2.25rem; }
  .lane {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: .25rem;
    margin-block: .15rem;
    padding: .5rem .7rem;
  }
  .lane-name { grid-column: 1 / -1; }
  .lane-tag::before { display: none; }
  .chip { padding: .35rem .65rem; font-size: .75rem; }
}

/* buy page only -- the homepage's offer section, standing alone */
.offer { position: relative; isolation: isolate;
  padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--flow-black); color: #f7f7f3; }

/* The hero's shader, on the hero's own class so both aurora scripts bind
   to it untouched. Same two opt-outs the hero declares. */
.hero-aurora { position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; pointer-events: none; }

@media print { .hero-aurora { display: none; } }

.offer-shell { position: relative; z-index: 1;
  width: min(100%, 48rem); margin-inline: auto; text-align: center; }

/* The plugin, on the same painted field the hero puts it on: no card, so
   the render sits straight on the section's field and the aurora shows
   through around it. */
.buy-visual {
  position: relative;
  overflow: visible;
  width: min(100%, 44rem);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}

.buy-visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) / 2);
  box-shadow: 0 2.5rem 5.5rem rgba(0,0,0,.5), 0 .25rem 1rem rgba(0,0,0,.32);
}

.offer h1 { margin: 0 0 var(--space-3); font-size: clamp(3.4rem, 7vw, 5.5rem);
  line-height: 1; letter-spacing: -.02em; }

/* The image pushed the button down the page, so it gets its own air above
   rather than the section's default gap. */
.buy-cta { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* The plugin's own dial green, on a dark field: voiced_green in
   crates/pl_chrome/src/theme/tokens.rs, dark palette. NOT --signal
   (#a7d8b3), which is the lighter site token every other page uses -- the
   ticks were asked for in the plugin's green specifically. If the two
   should be one value, --signal is the one to move. */
.term-list li::before { content: "\2713"; color: #86d99a; }

/* The shared block above carries an OLDER generation of these same rules
   -- green ticks, a fenced box here -- from before index.html moved on.
   These overrides are index.html's current version, so the padding and
   border have to be named to be undone: a box outline around the fine
   print is the fenced-box pattern the site does not use. */
.license-details {
  width: min(100%, 32rem);
  margin: var(--space-2) auto 0;
  padding: 0;
  border: 0;
  color: var(--inverse-soft);
  font-size: .88rem;
  text-align: center;
}

/* The page is one section, so it carries the viewport rather than letting
   paper show under a short offer. */
body { background: var(--flow-black); }

main { display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - 20rem); }

@media (max-width: 640px) {
  .term-list { grid-template-columns: minmax(0, 1fr); }
}