/* The product page (ProductScreen.js): the plugin at work first, as wide as the screen with the words
   over it (ProductHero). */

.productHero {
  color: var(--ink);
  padding: 0 0 clamp(4rem, 8vw, 6.5rem);
}

.productHeroText {
  display: flex;
  flex-direction: column;
}

.productBuyOnce {
  margin: 0;
  font: var(--md-sys-typescale-body-small);
  color: var(--ink-2);
}

/* The way back is the quiet pill with a leading arrow (.textPill.backLink, base.css). */

.backLink {
  margin-bottom: 1.75rem;
}

/* The name, the tagline under it in the same face, then the actions: set as the home page's plugin
   panel sets them (HomeScreen.css, .homePluginTitle / .homePluginTagline / .homePluginActions), so the
   two read as one design; change both together. The band sizes the name and the tagline up (below). */
.productTitle {
  margin: 0 0 1rem;
  font: var(--md-sys-typescale-display-medium);
  white-space: nowrap; /* a wide screen keeps the name on one line, past the words' column if it must */
}

.productLead {
  margin-top: clamp(0.75rem, 1.5vh, 1.25rem);
  font: var(--md-sys-typescale-title-large);
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.productActions {
  display: flex;
  gap: 0.5rem 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: clamp(1rem, 2vh, 1.75rem);
}

/* The price's notes close the row on a line of their own (a phone draws them over the buttons: the
   max-width: 56.25rem block below). */
.productPriceNotes {
  flex-basis: 100%;
}

/* The price leads the row, with its sale dressing when there is one (Prices.js, PriceBlock): the
   struck regular price before it, the badge after it and, side by side, a rule between the block
   and the buttons (stacked on a phone, the price takes a line of its own: the max-width: 56.25rem
   block below). */
.productActions .priceBlock {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  margin-right: 0.5rem;
  padding-right: 1.25rem;
  border-right: 0.0625rem solid var(--line);
  font-size: 1.625rem; /* the size the struck price (0.6em) and the price take from; the home panel's too */
}

/* No price yet: the block keeps its place unseen, no rule standing alone, and the empty price holds a
   line's height, so the answer moves neither the buttons nor the tags under them (Lighthouse's CLS).
   The display outranks base.css's rule, which takes an empty block out of the page. */
.productActions .priceBlock:has(.price:empty) {
  display: inline-flex;
  visibility: hidden;
}

.productActions .price:empty::before {
  content: "\a0";
}

/* Nothing after the price (a coming-soon plugin's "Coming soon"): no rule standing alone either. */
.productActions .priceBlock:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}

.productActions .price {
  font-family: var(--display);
  font-size: 1em;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* Among the price's notes, while the sale is on: when it ends and how it is applied, and for EU/UK
   readers the lowest price of the 30 days before it. Both take the alignment of the rest of the
   words. */
.productSale {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.75rem;
}

.productSaleLine {
  font: var(--md-sys-typescale-body-medium);
  color: var(--ink-2);
}

.productSalePrior {
  font: var(--md-sys-typescale-body-small);
  color: var(--ink-2);
}

/* The systems on one row of tags and the formats on the next, each wrapping within itself. */

.productFormats {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.productFormatsRow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* The band (ProductHero) is as tall as a 16:10 picture up to the screen, so a tall window crops only its
   sides, and dark in both schemes, so every token inside it resolves dark. */
.productBand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(34rem, min(100svh, 62.5vw)); /* convention-allow viewport-unit: a 16:10 picture at the screen's width, at most the screen */
  margin-top: -4.25rem; /* the height of the nav row (css/base.css, .navInner) */
  /* The room under the words, over which the band fades out into the page rather than ending on a
     line, its ground and the picture with its scrim alike (the mask below), so the words never stand
     on the fading part. */
  --product-band-foot: clamp(4.5rem, 8vw, 8rem);
  padding: 6rem 0 var(--product-band-foot);
  color-scheme: dark;
  background: linear-gradient(to bottom, var(--bg) calc(100% - var(--product-band-foot)), transparent);
  color: var(--ink);
}

/* A band with no picture yet glows in the plugin's color instead. */
.productBand:not(:has(.productBandMedia)) {
  background:
    radial-gradient(60% 50% at 70% 42%, rgba(var(--product-accent), 0.24), transparent),
    linear-gradient(to bottom, var(--bg) calc(100% - var(--product-band-foot)), transparent);
}

.productBandMedia {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* As wide as the band on every screen: the short screen's rule that narrows a framed clip to the
   screen's height (Showcase.css) holds for no band. */
.productBandMedia .liveShowcase {
  position: absolute;
  inset: 0;
  width: auto;
  margin: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: none;
}

/* A still drifts slowly, as a camera holds on a picture, so the band never stands dead, growing up
   from its foot so the faded foot stays inside the band; off screen it stops (.paused). Its top
   darkens fully under the nav, since the picture is a whole window, title bar and all. */
.productBandMedia.still {
  --product-band-top: 100%;
}

.productBandStill {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 100%;
  animation: productBandDrift 32s ease-in-out infinite alternate;
}

.productBand.paused .productBandStill {
  animation-play-state: paused;
}

@keyframes productBandDrift {
  from {
    transform: scale(1.04);
  }

  to {
    transform: scale(1.1) translateX(-1.5%);
  }
}

/* The picture and its scrim fade with the band's ground, the clip's pause left whole. */
.productBandMedia video,
.productBandStill,
.productBandMedia::after {
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--product-band-foot)), transparent);
}

/* The ground the words read on: the picture darkens toward its foot and its left, where they stand,
   and along its top, under the nav. */
.productBandMedia::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--bg) 88%, transparent), transparent 55%),
    linear-gradient(to right, color-mix(in srgb, var(--bg) 72%, transparent), transparent 62%),
    linear-gradient(to bottom, color-mix(in srgb, var(--bg) var(--product-band-top, 64%), transparent), transparent 9rem);
}

/* The pause stands at the column's right edge, level with the foot of the words, a layer over the
   words' box, which spans the column and would take its clicks. */
.productBand .liveShowcasePause {
  z-index: 2;
  right: max(1.5rem, calc((100% - var(--max)) / 2));
  bottom: var(--product-band-foot);
}

.productBandWords {
  position: relative;
  z-index: 1;
}

.productBandWords .productHeroText {
  max-width: 40rem;
}

/* The name as a film's title, the largest words on the page, each line held off the picture by a
   shadow of the ground. */
.productBandWords .productTitle {
  font: var(--md-sys-typescale-display-large);
  text-shadow: 0 0.25rem 2.5rem color-mix(in srgb, var(--bg) 60%, transparent);
}

.productBandWords .productLead {
  max-width: 28rem;
  margin-bottom: 0.75rem;
  font-size: clamp(1.25rem, 1.6vw, 1.375rem);
  text-wrap: balance;
  text-shadow: 0 0.125rem 1rem color-mix(in srgb, var(--bg) 70%, transparent);
}

/* The statement closes the hero: large, centered, a long way under the band. */

.productDescription {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 34ch;
  text-align: center;
  font: var(--md-sys-typescale-headline-medium);
}

/* Features opens with the hook — the kicker over the headline whose last word carries the accent,
   like the plugin list — centered, at a size that belongs inside a page rather than
   at the top of one. */

.productFeaturesHook {
  text-align: center;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.productFeaturesHook .heroKicker {
  font: var(--md-sys-typescale-label-large);
  letter-spacing: 0.2em;
}

.productFeaturesHook .heroTitle {
  font: var(--md-sys-typescale-display-small);
  margin: 0.5rem 0 0;
}

.productFeatures {
  padding: clamp(1.5rem, 3.5vw, 3rem) 0;
}

/* One reason a row, centered under the hook with a hairline between: a few words in the display
   face and one short line under them, so the section reads at a glance. */
.featureList {
  list-style: none;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0;
}

.feature {
  padding: 1.25rem 0;
  text-align: center;
}

.feature + .feature {
  border-top: 0.0625rem solid var(--line);
}

.feature h3 {
  font: var(--md-sys-typescale-headline-medium);
}

.feature p {
  color: var(--ink-2);
  font: var(--md-sys-typescale-body-large);
  margin-top: 0.25rem;
  text-wrap: balance;
}

.productFacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

/* How a license works, under the facts: its line in the reading ink, the promise after it in the
   quiet one (meta.licensing). */
.productLicensing {
  max-width: 40rem;
  margin: 1.5rem auto 0;
  text-align: center;
  color: var(--ink-2);
  font: var(--md-sys-typescale-body-medium);
  text-wrap: balance;
}

.productLicensing strong {
  color: var(--ink);
}

/* Performance, once a machine has been measured (fillPerformance in ProductScreen.js): the hook as
   Features sets it, one line on what the figures are, a bar chart of the machines that picks one, and
   that machine as one panel of glass: its name over its facts and the plugin's figures on it, every
   setting folded away, when it was measured and the way to how we measure. */

.productPerformance {
  padding: clamp(1.5rem, 3.5vw, 3rem) 0;
  scroll-margin-top: 4.25rem;
}

.productPerformanceHook {
  text-align: center;
}

.productPerformanceHook .heroKicker {
  font: var(--md-sys-typescale-label-large);
  letter-spacing: 0.2em;
}

.productPerformanceHook .heroTitle {
  font: var(--md-sys-typescale-display-small);
  margin: 0.5rem 0 0;
}

.productPerformanceLine {
  margin: 0.75rem auto clamp(1.25rem, 2.5vw, 2rem);
  max-width: 40rem;
  text-align: center;
  color: var(--ink-2);
  font: var(--md-sys-typescale-body-medium);
}

/* The machines as a bar chart that picks one, each bar a full-width row: the machine's name and its
   range over the settings above a track, filled to its share against the busiest machine's. At rest
   the fill is the ink's quiet tint, chosen the row takes the tonal container and its fill its ink,
   so the chosen machine stands out by lightness, not hue alone. Held, a row squares off from its
   corner-lg toward md. Rows are over 3rem tall, so the row is its own hit area. */
.performancePicker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 40rem;
  margin: 0 auto 1.25rem;
}

/* Past four machines the rest wait under one outlined button, which says what it does next, so no
   marker is drawn; open, their bars follow the first four at the same spacing. */
.performanceMore summary {
  list-style: none;
  cursor: pointer;
}

.performanceMore summary::-webkit-details-marker {
  display: none;
}

.performanceMore {
  margin-top: 0.5rem;
  text-align: center;
}

.performanceMore[open] .performanceMoreShow,
.performanceMore:not([open]) .performanceMoreHide {
  display: none;
}

.performanceMoreBars {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  text-align: start;
}

.performanceBar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 1rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: var(--md-sys-shape-corner-lg);
  background: none;
  color: var(--ink-2);
  font: var(--md-sys-typescale-label-large);
  text-align: start;
  cursor: pointer;
}

.performanceBarValue {
  font-feature-settings: var(--figures);
}

.performanceBarTrack {
  grid-column: 1 / -1;
  height: 0.75rem;
  border-radius: var(--md-sys-shape-corner-full);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

/* Never shorter than its own round ends, so the lightest machine still shows a bar. */
.performanceBarFill {
  display: block;
  width: max(0.75rem, calc(var(--performance-bar-length) * 100%));
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--ink) 24%, transparent);
}

@media (hover: hover) {
  .performanceBar:hover {
    background: var(--md-state-ink-hover);
    color: var(--ink);
  }
}

.performanceBar:is(:active, .held) {
  border-radius: var(--md-comp-pressed-morph);
  background: var(--md-state-ink-pressed);
}

.performanceBar[aria-pressed="true"] {
  background: var(--tonal);
  color: var(--tonal-ink);
}

.performanceBar[aria-pressed="true"] .performanceBarFill {
  background: var(--tonal-ink);
}

@media (hover: hover) {
  .performanceBar[aria-pressed="true"]:hover {
    background: color-mix(in srgb, var(--tonal-ink) calc(var(--md-sys-state-hover-opacity) * 100%), var(--tonal));
  }
}

.performanceBar[aria-pressed="true"]:is(:active, .held) {
  background: color-mix(in srgb, var(--tonal-ink) calc(var(--md-sys-state-pressed-opacity) * 100%), var(--tonal));
}

/* The machine's name over its two columns, the machine's facts and what the plugin takes on it; the
   disclosure, the footer and the way to how we measure run under both. */
.performanceMachine {
  display: grid;
  padding: 1.75rem 2rem;
  border-radius: var(--md-sys-shape-corner-xl);
}

.performanceMachine h3 {
  font: var(--md-sys-typescale-title-large);
}

.performanceColumns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 3rem;
  margin-top: 1.25rem;
}

.performanceColumnTitle {
  margin-bottom: 0.75rem;
  color: var(--ink-2);
  font: var(--md-sys-typescale-label-large);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Each fact a label and its value side by side, the labels in one column, a note under its value. */
.performanceFacts {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.performanceFact {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  column-gap: 1rem;
}

.performanceFact dt {
  font: var(--md-sys-typescale-title-small);
}

.performanceFact dd {
  grid-column: 2;
  margin: 0;
  font: var(--md-sys-typescale-body-large);
  font-feature-settings: var(--figures);
}

.performanceFact dd.performanceFactNote {
  color: var(--ink-2);
  font: var(--md-sys-typescale-body-small);
}

.performanceAge {
  white-space: nowrap;
}

/* Every setting behind one outlined button, which says what it does next in place of a chevron
   (owner, 2026-10-15), so no marker is drawn. */
.performanceAll {
  margin-top: 1.25rem;
}

.performanceAll summary {
  list-style: none;
  cursor: pointer;
}

.performanceAll summary::-webkit-details-marker {
  display: none;
}

.performanceAll[open] .performanceAllShow,
.performanceAll:not([open]) .performanceAllHide {
  display: none;
}

/* A table wider than the narrowest phone scrolls inside its panel, never the page. */
.performanceScroll {
  margin-top: 0.75rem;
  overflow-x: auto;
}

.performanceTable {
  width: 100%;
  border-collapse: collapse;
  font: var(--md-sys-typescale-body-large);
  font-feature-settings: var(--figures);
}

.performanceTable th,
.performanceTable td {
  padding: 0.75rem 0.5rem;
  border-bottom: 0.0625rem solid var(--line);
  text-align: end;
  white-space: nowrap;
}

.performanceTable th:first-child {
  padding-inline-start: 0;
  text-align: start;
}

.performanceTable thead th {
  color: var(--ink-2);
  font: var(--md-sys-typescale-label-large);
}

.performanceTable tbody th {
  font: var(--md-sys-typescale-title-small);
}

.performanceDrawn {
  margin-inline-start: 0.25rem;
  color: var(--ink-2);
  font: var(--md-sys-typescale-label-small);
}

.performanceFooter {
  margin-top: 1.25rem;
  color: var(--ink-2);
  font: var(--md-sys-typescale-body-small);
}

.performanceCommit {
  font-family: var(--mono);
}

/* The way to the page that says how we measure, under the line that says when. */
.performanceHow {
  justify-self: start;
  margin-top: 1rem;
}

/* Forced colors flatten the chosen row's tonal fill and every bar's: the row takes the system's
   selection colors and each fill the text's. */
@media (forced-colors: active) {
  .performanceBar[aria-pressed="true"] {
    background: SelectedItem;
    color: SelectedItemText;
    forced-color-adjust: none;
  }

  .performanceBarFill {
    background: CanvasText;
    forced-color-adjust: none;
  }

  .performanceBar[aria-pressed="true"] .performanceBarFill {
    background: SelectedItemText;
  }
}

/* The invitation after the features: one panel of glass as wide as the row of feature panels above
   it, the hook centered in it at a size that belongs inside a panel, and one wide button. */

.productTry {
  padding: clamp(0.5rem, 2vw, 1.5rem) 0;
}

.productTryPanel {
  position: relative; /* the stickers on its corners (Decor.css) */
  margin: 0; /* the full width of the column, edge to edge with the feature panels above it */
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 5vw, 3rem) clamp(2rem, 4vw, 2.75rem);
  border-radius: var(--md-sys-shape-corner-xl);
  text-align: center;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(var(--product-accent), 0.12) 0%, transparent 70%),
    var(--glass);
}

/* The wash restates the background, so it also takes over .glass's fallback for a browser without
   blur (css/base.css), which lays the wash over the stronger glass. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .productTryPanel {
    background:
      radial-gradient(70% 90% at 50% 0%, rgba(var(--product-accent), 0.12) 0%, transparent 70%),
      var(--glass-strong);
  }
}

/* The one line under the headline: what the trial is, said plainly. */
.productTryLine {
  margin: 0.75rem auto 0;
  max-width: 40rem;
  color: var(--ink-2);
  font: var(--md-sys-typescale-body-medium);
}

.productTryPanel .heroKicker {
  font: var(--md-sys-typescale-label-large);
  letter-spacing: 0.2em;
}

.productTryPanel .heroTitle {
  font: var(--md-sys-typescale-headline-large);
  margin: 0.5rem 0 0;
}

/* M3 Expressive's medium button (.button.medium), one wide invitation. */
.productTryButton {
  min-width: min(22rem, 100%);
  margin-top: 1.5rem;
}

/* How it works: the longer video, loaded on click (Walkthrough.js). */

.productDemo {
  color: var(--ink);
  padding: clamp(1.5rem, 3.5vw, 3rem) 0 clamp(1rem, 2vw, 1.5rem); /* the FAQ brings its own air on top */
}

@media (max-width: 56.25rem) {
  /* The price takes a line of its own over its notes and the buttons, without its rule, which
     alone on a line would stand with nothing after it. A sale's price wraps inside its block on
     the narrowest phones. */
  .productActions .priceBlock {
    flex-basis: 100%;
    margin-right: 0;
    padding-right: 0;
    border-right: 0;
  }

  /* The price's notes under it, then the buttons sharing the full width, as M3 lays a compact
     screen's actions, the cart's alone taking all of it. */
  .productActions {
    row-gap: 0.25rem;
  }

  .productPriceNotes {
    margin-bottom: 1rem;
  }

  .productActions .button {
    order: 1;
    flex: 1 1 0;
  }

  /* On a phone a picture as tall as the screen would show a sliver of the interface, so it keeps its
     16:10 over the words, its edges melting into the band's ground. */
  .productBand {
    --product-band-foot: 3rem;
    min-height: 0;
    padding: 4.25rem 0 var(--product-band-foot); /* the nav row's height (css/base.css, .navInner) */
  }

  .productBandMedia {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 10;
  }

  .productBandMedia::after {
    background:
      linear-gradient(to top, var(--bg), transparent 35%),
      linear-gradient(to bottom, var(--bg), transparent 20%);
  }

  .productBand .liveShowcasePause {
    right: 0.75rem;
    bottom: 0.75rem;
  }

  .productBandWords {
    margin-top: 0.5rem;
  }

  .productBandWords .productTitle {
    font: var(--md-sys-typescale-display-medium);
  }

  .productTitle {
    white-space: normal;
  }

  /* Stacked under the picture, the words center as the page's sections under them do; the way back
     keeps the start edge, where a phone's back gesture is. */
  .productBandWords .productHeroText {
    margin-inline: auto;
    text-align: center;
  }

  .productBandWords .productLead {
    margin-inline: auto;
  }

  .productActions,
  .productActions .priceBlock,
  .productFormatsRow {
    justify-content: center;
  }

  .performanceMachine {
    padding: 1.25rem;
  }

  /* On a phone the plugin's column goes under the machine's. */
  .performanceColumns {
    grid-template-columns: minmax(0, 1fr);
  }

  .performanceFact {
    grid-template-columns: 6.5rem minmax(0, 1fr);
  }

  .performanceTable {
    font: var(--md-sys-typescale-body-medium);
  }

  /* A head or a cell may take two lines, so the table fits a phone's width without scrolling. */
  .performanceTable th,
  .performanceTable td {
    padding: 0.5rem 0.25rem;
    white-space: normal;
  }
}

/* A short screen, a phone on its side however wide, lays the words over the picture again a size
   down, the price beside the buttons, so the whole band ends on the first screen, above Safari's
   toolbar on a 375px screen (css.md "Values"). */
@media (max-height: 30rem) {
  .productBand {
    --product-band-foot: 1rem;
    min-height: max(18rem, 100svh); /* convention-allow viewport-unit: the first screen, which the band fills */
    padding-top: 4.75rem; /* the nav row's height (css/base.css, .navInner) and a little air */
  }

  .productBandMedia {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

  .productBandMedia::after {
    background:
      linear-gradient(to top, color-mix(in srgb, var(--bg) 88%, transparent), transparent 70%),
      linear-gradient(to right, color-mix(in srgb, var(--bg) 72%, transparent), transparent 62%),
      linear-gradient(to bottom, color-mix(in srgb, var(--bg) var(--product-band-top, 64%), transparent), transparent 6rem);
  }

  .productBand .liveShowcasePause {
    right: max(1.5rem, calc((100% - var(--max)) / 2));
    bottom: var(--product-band-foot);
  }

  .productBandWords {
    margin-top: 0;
  }

  .productBandWords .productTitle {
    margin-bottom: 0;
    font: var(--md-sys-typescale-headline-large);
  }

  .productBandWords .backLink {
    margin-bottom: 0.25rem;
  }

  .productBandWords .productLead {
    margin-bottom: 0;
  }

  .productBandWords .productActions {
    margin-top: 0.75rem;
  }

  /* Still without its rule, which a sale's wider price would leave standing at a line's end. */
  .productBandWords .priceBlock {
    flex-basis: auto;
  }

  /* The buttons keep their own width beside the price, the notes on the line under them, and
     wrapped rows of buttons stay apart (css.md "Structure"). */
  .productBandWords .productActions {
    row-gap: 0.5rem;
  }

  .productBandWords .productPriceNotes {
    margin-bottom: 0;
  }

  .productBandWords .productActions .button {
    order: 0;
    flex: none;
  }

  /* The systems and the formats share one wrapping row. */
  .productBandWords .productFormats {
    flex-flow: row wrap;
    margin-top: 1rem;
  }
}