/* ==========================================================================
   The per-DAW pages (/fl-studio/ and the eight to come), written by
   scripts/build-daw-pages.mjs. Loaded after styles.css, which carries everything these pages
   share with the rest of the site: the header, the centred hero, the at-a-glance boxes, the
   feature rows, the keycap and the key map's rows, the numbered steps, the menu drawing, the
   Download step and the footer. What is here is only what those pages add.

   The page class is .dawpage, never .daw: styles.css has a .daw (a row of the key map), and a
   body with it becomes a bordered flex row. Bump DAW_CSS_V in the script when this file changes.
   ========================================================================== */

/* ------------------------------------------------------------------ hero --- */

/* The reading sizes the home page set on 2026-10-06, for a page that is the same funnel. */
.dawpage .hero__sub {
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  max-width: 46ch;
}
.dawpage .hero__note {
  font-size: 1.0625rem;
  line-height: 1.6;
}
.dawpage .btn--lg {
  font-size: var(--t-body);
}
.dawpage .hero {
  padding-bottom: 0;
}
/* The home page's headline size, and no measure: "Plugindex for FL Studio" is one line on a
   desktop and two on a phone, so the picture starts where the home page's film does. The
   longest of the nine, "Plugindex for Bitwig Studio", is one line from about 1100px. */
.dawpage .hero--center h1 {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem);
  max-width: none;
}

/* The picture under the hero, where the home page has its film: the corner of the app's own
   window with the mark lit (assets/window-lit.webp, the social card's crop of the film's arrive
   shot, with nothing in it but Plugindex's interface). It is cut by its source at the right and
   the bottom and by this file at the top, so all three dissolve into the page, the way the
   film's edges do. Drawn at 672px it is the picture's own pixels on a 2x screen. */
.dawstill {
  margin: clamp(-2.5rem, -3vw, -1rem) auto 0;
  width: min(100%, 42rem);
  pointer-events: none;
}
.dawstill img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(to right, #000 46%, rgb(0 0 0 / 0.72) 62%, rgb(0 0 0 / 0.3) 76%, transparent 90%),
    linear-gradient(to bottom, transparent 2%, #000 24%, #000 58%, rgb(0 0 0 / 0.5) 80%, transparent 97%);
  mask-image:
    linear-gradient(to right, #000 46%, rgb(0 0 0 / 0.72) 62%, rgb(0 0 0 / 0.3) 76%, transparent 90%),
    linear-gradient(to bottom, transparent 2%, #000 24%, #000 58%, rgb(0 0 0 / 0.5) 80%, transparent 97%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* --------------------------------------------------------- section heads --- */

/* A heading has the shell's width here; its lede keeps a measure. */
.dawpage .section__head--wide {
  max-width: none;
}
.dawpage .section__lede {
  font-size: var(--t-body);
  line-height: 1.55;
  max-width: 62ch;
}

/* ------------------------------------------------------ the DAW's own way --- */

/* The at-a-glance boxes, three across, and one line after them. */
.ownway__grid {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 52rem) {
  .ownway__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}
.ownway__after {
  margin-top: 1.5rem;
  max-width: 62ch;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
}

/* ------------------------------------------------- what Plugindex adds --- */

/* The feature rows, in halves instead of 7/5, since a drawing is narrower than a clip. */
@media (min-width: 860px) {
  .dawpage .feature,
  .dawpage .feature--flip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.dawpage .feature__body p {
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  max-width: 44ch;
}
.dawpage .feature__body .feature__more {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 600;
}
.feature__more a {
  color: var(--accent);
  text-decoration: none;
}
.feature__more a::after {
  content: " \2192";
}
.feature__more a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* styles.css gives every <p> in a feature the words' margin, tone and measure. A drawing's own
   lines take theirs from the rules below. */
.dawpage .feature figure p {
  margin-top: 0;
  max-width: none;
}

/* A feature with no picture yet (a page whose clip is not shot): its title takes the left half
   and its words the right, so the row is full without one. */
@media (min-width: 860px) {
  .dawpage .feature--words {
    align-items: start;
  }
  .dawpage .feature--words .feature__body {
    display: contents;
  }
  .dawpage .feature--words .feature__body p {
    margin-top: 0.3rem;
  }
}

/* The app's category list, drawn: a panel, a mono legend, rows. The open row is carried by its
   fill and weight, and the type names sit in the compatibility chart's quiet tags. */
.cats {
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--surface);
  border-radius: var(--r-panel);
}
.dawpage .cats .cats__legend {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  font-variation-settings: "wdth" 85;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cats ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cats .cats__list {
  margin-top: 0.6rem;
  display: grid;
  gap: 0.15rem;
}
.cats__row {
  display: block;
  padding: 0.42rem 0.75rem;
  border-radius: 6px;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--ink-muted);
}
.cats__row.is-open {
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 680;
  font-variation-settings: "wdth" 106;
}
.cats .cats__sub {
  margin: 0.15rem 0 0.3rem 1.1rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--line);
  display: grid;
  gap: 0.1rem;
}
.cats__row.is-picked {
  color: var(--accent);
  font-weight: 680;
}
.cats .cats__types {
  margin: 0.1rem 0 0.35rem 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.cats__types li {
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.9375rem;
  color: var(--ink);
}

/* One load, drawn from the keys it takes: open, find, load, and where it lands. A key is the
   numbered steps' small keycap; the field and the landing row are the panel's own surfaces. */
.act {
  padding: 1.35rem 1.25rem 1.25rem;
  background: var(--surface);
  border-radius: var(--r-panel);
}
.act__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Four across where there is room, and a row that wraps where there is not: a longer key name
   or track name ("Lead Vox" for "Insert 6") put a four-column grid past the panel's edge. */
@media (min-width: 30rem) {
  .act__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
  }
}
.act__beat {
  display: grid;
  gap: 0.55rem;
  justify-items: start;
}
.act__keys {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  min-height: 2.5rem;
}
.cap {
  display: inline-grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.6rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom-width: 3px;
  border-radius: 6px;
  font-family: var(--mono);
  font-variation-settings: "wdth" 90;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
}
.cap.is-lit {
  background: var(--accent);
  border-color: var(--accent-dim);
  color: var(--accent-ink);
}
.act__field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 0.85rem;
  min-width: 6.5rem;
  background: var(--bg-deep);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 1.0625rem;
  color: var(--ink);
}
.act__field img {
  width: 16px;
  height: 16px;
  border-radius: 18.3%;
}
.act__caret {
  width: 2px;
  height: 1.15rem;
  margin-left: -0.3rem;
  background: var(--accent);
}
.act__lands {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 2.5rem;
  padding: 0 0.8rem;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--r-control);
  font-size: 1.0625rem;
  font-weight: 680;
  font-variation-settings: "wdth" 106;
  white-space: nowrap;
}
.act__legend {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  font-variation-settings: "wdth" 85;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dawpage .act .act__rule {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-soft);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* The key map's diagram from the first home page (.keycap, .daws, .daw in styles.css), set
   beside a feature's words instead of across a section. */
.samekey {
  display: grid;
  gap: 1.25rem;
  align-items: center;
}
@media (min-width: 30rem) {
  .samekey {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.5rem;
  }
}
.samekey .keycap {
  justify-self: start;
  min-width: 7rem;
  padding: 1.5rem 1.1rem;
}
.samekey .daw {
  padding: 0.8rem 1rem;
}
.samekey .daw__name {
  min-width: 7.25rem;
}
/* That diagram left the home page before the 2026-10-06 legibility pass, so three things in it
   sit under that pass's floors: an 11px label on the key, 11px states, and the accent on
   --surface-2 (4.2:1). Here the small words are 12px mono legends, and the row in front keeps
   the panel's --surface under the accent (5.0:1), with its edge and a lit lamp. */
.samekey .keycap small,
.samekey .daw__device,
.samekey .daw__state {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  font-variation-settings: "wdth" 85;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.samekey .keycap small {
  opacity: 1;
}
.samekey .daw.is-active {
  background: var(--surface);
}
.samekey .daw__state {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.dawpage .samekey .samekey__fine {
  grid-column: 1 / -1;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* ----------------------------------------------------------------- setup --- */

/* The help page's numbered rows, 7/5 with what stands beside them: the setup video once it is
   shot, and until then the help page's drawing of the app's menu. */
.dawsetup__grid {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  font-size: var(--t-body);
  line-height: 1.6;
}
@media (min-width: 860px) {
  .dawsetup__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}
.dawsetup__more {
  margin-top: 1.25rem;
  font-size: 1rem;
  font-weight: 600;
}
.dawsetup__more a {
  color: var(--accent);
  text-decoration: none;
}
.dawsetup__more a::after {
  content: " \2192";
}
.dawsetup__more a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------- download --- */

.dawpage .buy__step .price__fine {
  font-size: var(--t-fine);
  color: var(--ink-muted);
}

/* The other DAWs' pages, as the hero's old host pills: filled, each one a link. Only pages that
   exist are listed, so the strip is not drawn until there is a second one. */
.otherdaws {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.otherdaws__legend {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  font-variation-settings: "wdth" 85;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.otherdaws .hero__hosts {
  margin-top: 0.75rem;
  font-size: var(--t-fine);
}