/*! Synth2Software — (c) 2026 KitRealm. All rights reserved. */
body.pg{min-height: 100vh;display: flex;flex-direction: column}.pg-hdr{position: relative;z-index: 5;padding: 16px 0;border-bottom: 1px solid hsl(220 9% 26% / .55);background: #0e0f1199;backdrop-filter: blur(12px) saturate(140%);-webkit-backdrop-filter: blur(12px) saturate(140%)}.pg-hdr .nav{gap: 18px}.pg-hdr .pg-back{color: var(--dim);font-size: 14.5px;font-weight: 500;display: inline-flex;align-items: center;gap: 7px;transition: color .3s var(--ease)}.pg-hdr .pg-back:hover{color: var(--tx)}.pg-hdr .pg-back:before{content: "\2190"}.pg-secure{font: 600 11px/1 var(--mono);letter-spacing: .13em;text-transform: uppercase;color: var(--cyan-dim);display: inline-flex;align-items: center;gap: 8px;padding: 8px 12px;border: 1px solid var(--cyan-line);border-radius: 8px;background: #54cede12;white-space: nowrap}.pg-secure svg{width: 13px;height: 13px;fill: none;stroke: currentColor;stroke-width: 2}.pg-main{flex: 1;padding: clamp(34px,5vw,62px) 0 clamp(48px,7vw,84px)}.pg-foot{border-top: 1px solid hsl(220 9% 26% / .5);background: #0e0f1199;padding: 22px 0;font-size: 13px;color: var(--dimmer)}.pg-foot-in{display: flex;justify-content: space-between;align-items: center;gap: 14px;flex-wrap: wrap}.pg-foot nav{display: flex;gap: 18px;flex-wrap: wrap}.pg-foot a{color: var(--dimmer);transition: color .3s var(--ease)}.pg-foot a:hover{color: var(--cyan)}.pg-head{margin-bottom: clamp(22px,3vw,32px)}.pg-head h1{font-size: clamp(28px,4.4vw,42px);margin: 14px 0 10px}.pg-head .lede{font-size: clamp(15.5px,1.5vw,17px)}[hidden]{display: none !important}.pg-note{display: flex;gap: 12px;align-items: flex-start;padding: 14px 16px;border-radius: 11px;border: 1px solid var(--line);background: #0e0f1199;font-size: 14.5px;color: var(--dim);margin-bottom: 18px}.pg-note b{color: var(--tx)}.pg-note.bad{border-color: hsl(0 62% 52% / .5);background: hsl(0 62% 40% / .1);color: hsl(0 70% 78%)}.pg-note.ok{border-color: hsl(140 60% 45% / .45);background: hsl(140 60% 40% / .09);color: hsl(140 55% 78%)}.pg-note.warn{border-color: hsl(38 92% 52% / .45);background: hsl(38 92% 46% / .09);color: hsl(38 85% 78%)}.pg-note a{text-decoration: underline;text-underline-offset: 2px}.f-set{display: grid;gap: 14px}.f-lb{display: block;font: 700 10.5px/1 var(--mono);letter-spacing: .16em;text-transform: uppercase;color: var(--cyan-dim);margin-bottom: 9px}.f-in{width: 100%;padding: 13px 14px;border-radius: 10px;background: var(--screen);border: 1px solid var(--line);color: var(--tx);font: 400 15.5px/1.3 var(--sans);box-shadow: inset 0 1px 3px hsl(220 40% 2% / .6);transition: border-color .25s var(--ease),box-shadow .25s var(--ease)}.f-in::placeholder{color: var(--dimmer)}.f-in:hover{border-color: var(--line-2)}.f-in:focus{outline: 0;border-color: var(--cyan-line);box-shadow: inset 0 1px 3px hsl(220 40% 2% / .6),0 0 0 3px hsl(187 68% 60% / .14)}.f-in:-webkit-autofill{-webkit-text-fill-color: var(--tx);-webkit-box-shadow: inset 0 0 0 40px var(--screen)}.f-hint{margin-top: 8px;font-size: 13px;color: var(--dimmer)}.f-hint a{text-decoration: underline;text-underline-offset: 2px}.f-who{display: flex;align-items: center;gap: 11px;padding: 13px 14px;border-radius: 10px;background: var(--screen);border: 1px solid var(--line);font: 500 15px/1 var(--mono);color: var(--tx);overflow: hidden}.f-who .dot{flex: 0 0 8px;width: 8px;height: 8px;border-radius: 50%;background: var(--ok);box-shadow: 0 0 8px hsl(140 60% 55% / .6)}.f-who span{overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.f-who a{margin-left: auto;font: 500 12px/1 var(--mono);color: var(--dim);white-space: nowrap}.f-who a:hover{color: var(--cyan)}.au-grid{display: grid;grid-template-columns: 1fr .82fr;gap: clamp(18px,3vw,34px);align-items: start;max-width: 1000px;margin-inline: auto}.au-card{padding: clamp(26px,3.4vw,38px) clamp(24px,3vw,34px)}.au-card h1{font-size: clamp(25px,3vw,31px);margin-bottom: 8px}.au-card > p.sub{color: var(--dim);font-size: 15px;margin-bottom: 22px}.au-card form{margin-top: 4px}.au-card .btn{width: 100%;justify-content: center;margin-top: 6px}.au-alt{margin-top: 20px;padding-top: 18px;border-top: 1px solid hsl(220 9% 26% / .6);font-size: 14.5px;color: var(--dim);display: flex;justify-content: space-between;gap: 12px;flex-wrap: wrap}.f-lb-row{display: flex;justify-content: space-between;align-items: baseline;gap: 12px}.f-lb-row a{font: 500 12px/1 var(--mono);color: var(--dim);text-transform: none;letter-spacing: 0}.f-lb-row a:hover{color: var(--cyan)}.au-side{padding: clamp(24px,3vw,30px) clamp(22px,2.6vw,28px)}.au-side h4{font: 700 11px/1 var(--mono);letter-spacing: .18em;text-transform: uppercase;color: var(--cyan);margin: 0 0 16px}.au-side ul{margin: 0;padding: 0;list-style: none;display: grid;gap: 12px}.au-side li{display: flex;gap: 10px;font-size: 14.5px;color: var(--tx);line-height: 1.5}.au-side li svg{flex: 0 0 17px;width: 17px;height: 17px;margin-top: 4px;stroke: var(--cyan);fill: none;stroke-width: 2.2;stroke-linecap: round;stroke-linejoin: round}.au-side li b{font-weight: 600}.au-side .au-quote{margin-top: 20px;padding-top: 18px;border-top: 1px solid hsl(220 9% 26% / .6);font: 500 13px/1.6 var(--mono);color: var(--dimmer)}.co-grid{display: grid;grid-template-columns: 1.1fr .9fr;gap: clamp(18px,2.6vw,26px);align-items: start}.co-pay{padding: clamp(24px,3vw,32px) clamp(22px,2.8vw,30px)}.co-step{display: flex;align-items: center;gap: 11px;font: 700 11px/1 var(--mono);letter-spacing: .17em;text-transform: uppercase;color: var(--cyan);margin: 0 0 16px}.co-step i{font-style: normal;width: 22px;height: 22px;flex: 0 0 22px;border-radius: 50%;display: grid;place-items: center;background: #54cede1c;border: 1px solid var(--cyan-line);font-size: 10.5px}.co-step:not(:first-child){margin-top: 30px}.co-opts{display: grid;gap: 10px}.co-opt{display: grid;grid-template-columns: auto 1fr;gap: 4px 13px;padding: 15px 16px;border-radius: 12px;background: var(--metal);border: 1px solid var(--line);box-shadow: var(--bevel);cursor: pointer;transition: border-color .3s var(--ease),box-shadow .3s var(--ease)}.co-opt:hover{border-color: var(--line-2)}.co-opt input{grid-row: 1 / 3;align-self: center;width: 18px;height: 18px;accent-color: hsl(187 68% 60%);cursor: pointer}.co-opt b{font-size: 15px;font-weight: 600}.co-opt span{font-size: 13.5px;color: var(--dim)}.co-opt:has(input:checked){border-color: var(--cyan-line);box-shadow: var(--bevel),0 0 0 1px var(--cyan-line),0 0 24px -8px var(--cyan-glow)}.co-opt:has(input:disabled){cursor: not-allowed;opacity: .55}.co-opt:has(input:disabled):hover{border-color: var(--line)}.co-opt input:focus-visible{outline: 2px solid var(--cyan);outline-offset: 3px}.co-marks{grid-column: 2;display: flex;gap: 7px;flex-wrap: wrap;margin-top: 6px}.co-marks i{font: 600 9.5px/1 var(--mono);letter-spacing: .1em;text-transform: uppercase;font-style: normal;color: var(--dimmer);padding: 5px 8px;border: 1px solid var(--line);border-radius: 5px;background: #0e0f1180}.co-go{width: 100%;justify-content: center;margin-top: 24px}.co-go[disabled]{opacity: .7;cursor: progress}.co-fine{margin-top: 14px;font-size: 12.5px;color: var(--dimmer);line-height: 1.6}.co-fine a{color: var(--dim);text-decoration: underline;text-underline-offset: 2px}.co-fine a:hover{color: var(--cyan)}.co-sum{position: sticky;top: 22px;padding: clamp(22px,2.8vw,28px)}.co-sum-h{font: 700 11px/1 var(--mono);letter-spacing: .18em;text-transform: uppercase;color: var(--cyan);margin: 0 0 18px}.co-item{display: flex;justify-content: space-between;align-items: flex-start;gap: 14px;padding-bottom: 16px;border-bottom: 1px solid hsl(220 9% 26% / .6)}.co-item b{display: block;font-size: 16px;letter-spacing: -.015em}.co-item p{color: var(--dimmer);font-size: 13.5px;margin-top: 5px}.co-amt{text-align: right;white-space: nowrap}.co-amt b{font: 700 30px/1 var(--sans);letter-spacing: -.035em}.co-amt i{font-style: normal;display: block;margin-top: 5px;font: 500 12px/1 var(--mono);color: var(--dimmer)}.co-amt s{color: var(--dimmer);font-size: 14px;margin-right: 7px;font-weight: 400}.co-inc{margin: 16px 0 0;padding: 0;list-style: none;display: grid;gap: 9px}.co-inc li{display: flex;gap: 9px;font-size: 14px;color: var(--dim)}.co-inc li svg{flex: 0 0 15px;width: 15px;height: 15px;margin-top: 4px;stroke: var(--cyan);fill: none;stroke-width: 2.4;stroke-linecap: round;stroke-linejoin: round}.co-line{display: flex;justify-content: space-between;gap: 12px;font-size: 14.5px;color: var(--dim);margin-top: 14px}.co-line b{color: var(--tx);font-weight: 600;font-family: var(--mono);font-size: 14px}.co-line.save b{color: var(--ok)}.co-tot{display: flex;justify-content: space-between;align-items: baseline;gap: 12px;margin-top: 16px;padding-top: 16px;border-top: 1px solid var(--cyan-line)}.co-tot span{font: 700 11px/1 var(--mono);letter-spacing: .14em;text-transform: uppercase;color: var(--cyan-dim)}.co-tot b{font: 700 24px/1 var(--sans);letter-spacing: -.03em;color: var(--cyan);text-shadow: 0 0 22px var(--cyan-glow)}.co-renew{margin-top: 14px;font-size: 13px;color: var(--dimmer);line-height: 1.6}.co-badge{display: inline-flex;align-items: center;gap: 7px;margin-bottom: 16px;padding: 6px 11px;border-radius: 6px;font: 700 10px/1 var(--mono);letter-spacing: .15em;text-transform: uppercase;color: #081a21;background: linear-gradient(180deg,var(--cyan-hi),var(--cyan));box-shadow: 0 4px 14px -4px var(--cyan-glow)}.rc{max-width: 640px;margin-inline: auto;text-align: center}.rc-ico{width: 62px;height: 62px;margin: 0 auto 22px;border-radius: 50%;display: grid;place-items: center;background: #54cede1c;border: 1px solid var(--cyan-line);box-shadow: 0 0 34px -8px var(--cyan-glow)}.rc-ico svg{width: 28px;height: 28px;fill: none;stroke: var(--cyan);stroke-width: 2.4;stroke-linecap: round;stroke-linejoin: round}.rc h1{font-size: clamp(27px,3.6vw,36px);margin-bottom: 12px}.rc > p{color: var(--dim);font-size: 16px}.rc-key{margin-top: 26px;padding: 22px;border-radius: 12px;background: var(--screen);border: 1px solid var(--cyan-line);box-shadow: inset 0 1px 3px hsl(220 40% 2% / .6)}.rc-key .f-lb{margin-bottom: 11px}.rc-key > b{display: block;font: 700 clamp(17px,2.4vw,22px)/1.4 var(--mono);letter-spacing: .08em;color: var(--cyan);word-break: break-all}.rc-key .f-hint{margin-top: 12px}.rc-cta{display: flex;gap: 12px;justify-content: center;flex-wrap: wrap;margin-top: 28px}@media (max-width: 900px){.co-grid,.au-grid{grid-template-columns: 1fr}.co-sum{position: static;order: -1}.au-side{order: 2}}@media (max-width: 560px){.pg-hdr .pg-back span{display: none}.co-amt b{font-size: 25px}.au-alt{flex-direction: column;gap: 8px}.pg-foot-in{flex-direction: column;align-items: flex-start}}.co-or{display: flex;align-items: center;gap: 12px;margin: 18px 0 14px;color: var(--dimmer);font: 600 11px/1 var(--mono);letter-spacing: .16em;text-transform: uppercase}.co-or:before,.co-or:after{content: "";flex: 1;height: 1px;background: hsl(220 9% 26% / .7)}#ppButtons{min-height: 48px}

/* ── shop ─────────────────────────────────────────────────────────────────
   One layout for every product, wearing the site's own tokens: the same
   --panel/--line surfaces, --cyan accent, mono eyebrows and Inter as the rest
   of the site. Square covers because that is what sound-kit art is. */
.shop-head{margin:0 0 26px}
.shop-head h1{font-size:clamp(30px,4vw,44px);margin:0 0 8px}
.shop-head .lede{color:var(--dim);max-width:60ch}

.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
  gap:clamp(16px,2.2vw,26px);margin:0 0 42px}
.prod-card{display:flex;flex-direction:column;min-width:0}
/* The tile is square because a grid of mixed-height cards looks broken. The
   ARTWORK is whatever shape the owner uploaded, and `cover` reconciled the two
   by cropping — a 16:9 screenshot lost its left and right thirds, which is
   exactly the part a buyer is trying to look at. Same fix as the single-product
   cover further down: the picture fits whole inside the square and the leftover
   strip is left transparent, so the page shows through instead of a grey bar.

   `scale-down` rather than plain `contain`, because of the quality half of it.
   The two are identical whenever the image is larger than the tile (both shrink
   to fit) — they differ only when it is SMALLER, where `contain` stretches it up
   into a soft blur and `scale-down` leaves it at its own pixel size. Nothing is
   resampled anywhere else: uploads are stored byte-for-byte, so this rule is the
   only place a product image is ever scaled at all.

   No `overflow:hidden` and no hover zoom any more. Both existed to serve the
   crop: clipping is pointless once the image cannot exceed its box, and scaling
   a contained image up by 4% would slice the edges back off on hover — undoing
   the whole point every time the pointer moved. The shadow follows suit and
   becomes `filter:drop-shadow`, which tracks the rendered pixels; `box-shadow`
   traces the element box, which for a letterboxed shot is mostly empty air and
   would draw a rectangle around nothing.

   The image is positioned ABSOLUTELY, and that is load-bearing, not tidiness.
   `height:100%` on an in-flow child of an `aspect-ratio` box is circular — the
   parent's height depends on the child's, so the percentage gives up, resolves
   to auto, and the picture falls back to its own proportions. `overflow:hidden`
   used to paper over it; take that away and a 600×1000 shot stretched its tile
   to 277×461 and the grid went ragged. `inset:0` on an out-of-flow box resolves
   against the padding box instead, which the ratio has already made square, so
   there is no loop to break. */
.prod-card-shot{display:block;aspect-ratio:1;border-radius:12px;
  position:relative;
  transition:transform .5s var(--ease)}
.prod-card-shot img{position:absolute;inset:0;
  width:100%;height:100%;object-fit:scale-down;display:block;
  background:transparent;border-radius:12px;
  filter:drop-shadow(0 18px 40px hsl(220 40% 2% / .78));
  transition:filter .5s var(--ease)}
.prod-card:hover .prod-card-shot{transform:translateY(-4px)}
.prod-card:hover .prod-card-shot img{
  filter:drop-shadow(0 26px 52px hsl(220 40% 2% / .9))}
/* The placeholder has no pixels to cast a shadow, so it keeps the surface the
   tile used to carry — otherwise an unillustrated product is bare text. */
.prod-card-shot .prod-noshot{background:var(--panel);border-radius:12px;
  box-shadow:0 20px 50px -26px #030407e6}
.prod-card-body{padding:13px 2px 0}
.prod-card-body h3{margin:0 0 4px;font-size:15.5px;letter-spacing:-.01em}
.prod-card-body h3 a{color:var(--tx)}
.prod-card-body h3 a:hover{color:var(--cyan)}
.prod-card-body p{margin:0 0 9px;color:var(--dim);font-size:13.5px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod-noshot{position:absolute;inset:0;display:grid;place-items:center;
  color:var(--dimmer);font:600 11px/1 var(--mono);letter-spacing:.13em;
  text-transform:uppercase}

.prod-price{display:flex;align-items:baseline;gap:9px;margin:0 0 11px}
.prod-price b{font-size:20px;font-weight:700;letter-spacing:-.02em}
.prod-price s{color:var(--dimmer);font-size:14px}
.prod-price span{color:var(--dim);font:600 11px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase}
.prod-acts{display:flex;gap:8px;flex-wrap:wrap}
.prod-acts .inline{margin:0;display:contents}
/* pages.css stretches .btn to full width for the checkout column; in a product
   card the two actions sit side by side instead. */
.prod-acts .btn{width:auto;margin-top:0;flex:1 1 auto;justify-content:center}

/* single product: copy left, cover right */
.prod-main{display:grid;grid-template-columns:1fr minmax(0,46%);gap:clamp(24px,4vw,56px);
  align-items:start;margin:0 0 54px}
.prod-main .prod-shot{order:2}
.prod-main .prod-buy{order:1;padding-top:6px}
/* `contain`, not `cover`. Product shots are whatever shape the owner uploaded —
   a 3:2 app screenshot in a square box was being cropped to its middle third,
   so the left and right of the interface simply were not there. Containing it
   letterboxes instead: the whole picture is visible and the leftover space is
   transparent, so the page shows through rather than a grey bar.

   The shadow moves to `filter: drop-shadow` for the same reason. `box-shadow`
   follows the element box, which is now mostly empty — it would draw a shadow
   around an invisible square. drop-shadow follows the rendered pixels, so a
   letterboxed image is shadowed at the edges of the IMAGE.

   `scale-down` is `contain` that refuses to enlarge, matching the shop card. It
   changes nothing for the 1280px shots in the library — both shrink them to fit
   — and stops a small upload being blown up to half the page and going soft. */
.prod-shot img{width:100%;aspect-ratio:1;object-fit:scale-down;background:transparent;
  border-radius:14px;cursor:zoom-in;
  filter:drop-shadow(0 24px 44px hsl(220 40% 2% / .72))}
.prod-shot .prod-noshot{position:relative;aspect-ratio:1;border-radius:14px;
  background:var(--panel);display:grid;place-items:center}
.prod-buy h1{font-size:clamp(27px,3.6vw,42px);margin:9px 0 12px}
.prod-buy .lede{color:var(--dim);font-size:16px;line-height:1.7;margin:0 0 22px;
  white-space:pre-line}
.prod-buy .prod-price{margin:0 0 18px}
.prod-buy .prod-price b{font-size:31px}
.prod-buy .prod-acts .btn{flex:0 1 190px}
.prod-note{color:var(--dimmer);font-size:13px;margin:15px 0 0}
/* Three across at any count. `repeat(3,1fr)` wrapped, so a fourth shot dropped
   onto a row of its own and sat next to two holes — and an eighth would have
   done it again. Auto-flowing in COLUMNS keeps one row however many there are
   and lets it scroll sideways, each track a third of the visible width minus
   its share of the two gaps.

   The padding is load-bearing. `overflow-x:auto` forces the other axis to
   `auto` too, which would clip the thumbnail's drop-shadow and the 3px it
   lifts on hover.

   No scroll-snapping. It reads well on a swipe and fights a dragged handle:
   `proximity` grabs the nearest thumbnail when you let go, so a drag you aimed
   ends somewhere you did not. The rail below is precise instead. */
.prod-gal{display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 20px) / 3);gap:10px;margin-top:12px;
  overflow-x:auto;overscroll-behavior-x:contain;padding:6px 0 14px;
  scrollbar-width:thin;scrollbar-color:var(--line-2) hsl(220 8% 15% / .55)}
.prod-gal::-webkit-scrollbar{height:9px}
.prod-gal::-webkit-scrollbar-track{background:hsl(220 8% 15% / .55);
  border-radius:99px}
.prod-gal::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;
  border:2px solid transparent;background-clip:padding-box;
  transition:background .25s var(--ease)}
.prod-gal::-webkit-scrollbar-thumb:hover{background:var(--cyan-dim);
  background-clip:padding-box}

/* ── the gallery rail ─────────────────────────────────────────────────────
   The browser's own scrollbar is a poor handle for this. On macOS it is an
   overlay that fades out until you are already scrolling — so the affordance
   is invisible exactly when it is needed — and Firefox honours `scrollbar-
   width`/`-color` but none of the ::-webkit- styling, so it never matched the
   page anyway. This is a real bar, always visible, same on every platform.

   shop.js builds it and only THEN sets `.has-rail`, which is what hides the
   native scrollbar. Order matters: if the script is absent or throws, the
   class never lands and the gallery keeps the browser's bar rather than
   ending up with no way to scroll at all. The rules above are the fallback,
   not dead code. */
.prod-gal.has-rail{scrollbar-width:none}
.prod-gal.has-rail::-webkit-scrollbar{display:none}
.prod-rail{position:relative;height:10px;margin-top:2px;border-radius:99px;
  background:hsl(220 8% 15% / .55);cursor:pointer;touch-action:none}
.prod-rail[hidden]{display:none}
.prod-rail-thumb{position:absolute;top:0;left:0;height:100%;min-width:36px;
  border-radius:99px;background:var(--line-2);cursor:grab;touch-action:none;
  transition:background .25s var(--ease)}
.prod-rail-thumb:hover{background:var(--cyan-dim)}
.prod-rail-thumb:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* The class, not `:active` — a pointer dragged off the thumb keeps the capture
   and keeps scrolling, so it has to keep looking grabbed too. */
.prod-rail.dragging .prod-rail-thumb{background:var(--cyan);cursor:grabbing}
/* Same reasoning as the cover. A thumbnail that crops is worse than one that
   letterboxes: it hides the very part of the screenshot the buyer clicked to
   look at.

   The faint panel that used to sit behind these is gone, and so is the 4px
   padding. It was there to keep the row reading as tiles rather than three
   floating pictures, but it defeated the point: `contain` leaves transparent
   space so the page shows through, and a translucent grey fill is not the page
   showing through — it is a visible box the shot rattles around inside, worse
   on a wide screenshot where the fill is most of the tile. The letterboxing is
   properly transparent now, and a drop-shadow gives the row its definition
   instead, following the picture's own edges the way the cover already does. */
.prod-gal img{width:100%;aspect-ratio:1;object-fit:scale-down;
  background:transparent;border-radius:8px;cursor:zoom-in;
  filter:drop-shadow(0 10px 22px hsl(220 40% 2% / .62));
  transition:transform .35s var(--ease),filter .3s var(--ease)}
.prod-gal img:hover{transform:translateY(-3px);
  filter:drop-shadow(0 16px 32px hsl(220 40% 2% / .8))}
.prod-more{font-size:19px;margin:0 0 20px;padding-top:30px;
  border-top:1px solid var(--line)}

/* ── the product lightbox ─────────────────────────────────────────────────
   The overlay, image, close button and caption reuse `.lb*` from site.css so
   the shop and the marketing page enlarge a picture the same way. Only what
   the homepage does not have is defined here: the arrows.

   `object-fit:contain` on the big image too, so opening a wide screenshot
   shows all of it rather than a centre crop at a different aspect ratio to
   the thumbnail that was clicked. */
/* `.lb` in site.css sets `display:grid`, and an author rule beats the UA's
   `[hidden]{display:none}` — so the overlay stayed in the layout when the
   attribute was set. It was invisible (visibility:hidden) rather than broken,
   but an invisible full-viewport layer is not something to leave to luck. */
.lb[hidden]{display:none}

.lb .lb-nav{position:absolute;top:50%;translate:0 -50%;width:52px;height:52px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:hsl(220 14% 7% / .62);border:1px solid hsl(0 0% 100% / .13);
  color:var(--tx);backdrop-filter:blur(8px);
  transition:background .25s var(--ease),scale .25s var(--ease),
    border-color .25s var(--ease)}
/* `scale` alone — NOT `transform:translateY(-50%) scale(1.08)`, which is what
   this said and why the arrows jumped 26px (half their height) the moment the
   pointer touched them. `translate` and `transform` are two separate properties
   and BOTH apply, in that order: the centering above was still in effect, so
   re-stating it here moved the button up a second time. The individual property
   is the one doing the centering, so hover has no business restating it. */
.lb .lb-nav:hover{background:hsl(220 14% 7% / .92);border-color:var(--cyan-line);
  color:var(--cyan);scale:1.08}
.lb .lb-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb .lb-nav.prev{left:max(18px,3vw)}
.lb .lb-nav.next{right:max(18px,3vw)}
/* One image means no arrows — a control that cannot do anything is worse than
   no control, because it reads as broken. */
.lb.single .lb-nav{display:none}
.lb .lb-count{position:absolute;top:26px;left:50%;translate:-50% 0;
  font:600 12px/1 var(--mono);letter-spacing:.14em;color:var(--dim)}
.lb.single .lb-count{display:none}
@media (max-width:620px){
  .lb .lb-nav{width:44px;height:44px}
  .lb .lb-nav.prev{left:10px}
  .lb .lb-nav.next{right:10px}
}

/* ── builder: a product block with no product ─────────────────────────────
   Only ever seen in the editor, on a page that is not a shop page. It has to
   look like a note and not like a broken layout. */
.pb-shopnote{color:var(--dimmer);font:600 11px/1.5 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;padding:14px 16px;margin:0;
  border:1px dashed var(--line);border-radius:10px;background:#0e0f1166}

/* ── the audio block ──────────────────────────────────────────────────────
   A real <audio> element does the playing; audio.js hides its default bar and
   shows this instead. With the script absent the browser's own controls are
   still there and still work, which is why `.s2a-ui` starts hidden and the
   <audio> starts visible — the enhancement reveals itself rather than the
   fallback having to be removed.

   The visualiser is a canvas, not 60 animated divs: one paint per frame
   instead of 60 style recalcs, and it degrades to a flat bar when the browser
   refuses an AudioContext (Safari before a user gesture, and any page where
   the file is cross-origin without CORS — an analyser cannot read those
   samples, so there is nothing to draw). */
.s2-audio{display:block;border-radius:14px;background:var(--metal);
  border:1px solid var(--line);box-shadow:var(--bevel);padding:14px 16px;
  position:relative;overflow:hidden}
.s2-audio audio{width:100%;display:block}
.s2-audio.on audio{display:none}
.s2a-viz{display:none;width:100%;height:56px;border-radius:8px}
.s2-audio.on .s2a-viz{display:block}
.s2a-ui{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:12px;margin-top:10px}
.s2a-ui[hidden]{display:none}
.s2a-play{width:44px;height:44px;flex:0 0 44px;border-radius:50%;border:0;
  cursor:pointer;display:grid;place-items:center;color:#081a21;
  background:linear-gradient(180deg,var(--cyan-hi),var(--cyan));
  box-shadow:0 6px 18px -6px var(--cyan-glow);
  transition:scale .25s var(--ease)}
.s2a-play:hover{scale:1.06}
.s2a-play:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.s2a-play svg{width:22px;height:22px;fill:currentColor}
.s2a-i-pause{display:none}
.s2-audio.playing .s2a-i-play{display:none}
.s2-audio.playing .s2a-i-pause{display:inline}
.s2a-meta{grid-column:2;min-width:0;line-height:1.3}
.s2a-meta b{display:block;font-size:14.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s2a-meta span{font:500 12px/1 var(--mono);color:var(--dimmer)}
/* The range input is the control; the fill is only paint. `pointer-events:none`
   on the fill keeps every native affordance — drag, click-to-seek, arrow keys,
   screen readers — instead of reimplementing them on a div. */
.s2a-seek{grid-column:1 / -1;position:relative;height:6px;border-radius:99px;
  background:hsl(220 8% 15% / .8)}
.s2a-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--cyan-dim),var(--cyan));
  pointer-events:none}
.s2a-range{position:absolute;inset:-8px 0;width:100%;height:22px;margin:0;
  opacity:0;cursor:pointer}
.s2a-seek:has(.s2a-range:focus-visible){outline:2px solid var(--cyan);
  outline-offset:4px}
.s2a-time{grid-column:3;grid-row:1;font:500 12px/1 var(--mono);
  color:var(--dim);white-space:nowrap}
@media (max-width:560px){.s2a-meta b{font-size:13.5px}}

/* cart */
.cart-row{display:grid;grid-template-columns:74px 1fr auto auto;gap:16px;
  align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}
.cart-row img{width:74px;height:74px;object-fit:cover;border-radius:9px}
.cart-row h3{margin:0 0 3px;font-size:15px}
.cart-row h3 a{color:var(--tx)}
.cart-row .hint{margin:0;font-size:12.5px;color:var(--dim)}
.cart-row b{font-size:16px}
.cart-row .btn{width:auto;margin:0}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;
  padding:20px 0 6px;font-size:20px}
.cart-total b{font-size:26px;letter-spacing:-.02em}
.cart-empty{color:var(--dim);padding:34px 0}

@media(max-width:840px){
  .prod-main{grid-template-columns:1fr}
  .prod-main .prod-shot{order:1}
  .prod-main .prod-buy{order:2}
  .cart-row{grid-template-columns:56px 1fr auto;row-gap:8px}
  .cart-row img{width:56px;height:56px}
}
.cart-noshot{width:74px;height:74px;border-radius:9px;background:var(--panel);
  display:block;border:1px solid var(--line)}
@media(max-width:840px){.cart-noshot{width:56px;height:56px}}

/* Basket link in the shop header. An icon rather than the word "Cart": at this
   size the glyph reads faster than the label, and the count is what the eye is
   actually looking for. The accessible name still says "Basket, N items". */
.cart-link{position:relative;display:inline-flex;align-items:center;gap:10px;
  justify-content:center;min-width:40px;height:40px;padding:0 11px;
  border-radius:10px;border:1px solid var(--line);background:#0e0f1180;
  color:var(--dim);
  transition:color .3s var(--ease),border-color .3s var(--ease),
    background .3s var(--ease),transform .3s var(--ease)}
.cart-link svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cart-glyph{position:relative;display:inline-flex}
/* The running total, which is what people actually scan for. Named `cart-amt`,
   NOT `cart-total`: that class already belongs to the cart page's own total
   block, and reusing it silently restyled it. Tabular figures so the header
   does not jitter as the amount changes. */
.cart-amt{font:700 13.5px/1 var(--mono);letter-spacing:-.01em;color:var(--tx);
  font-variant-numeric:tabular-nums}
.cart-link:hover{color:var(--cyan);border-color:var(--cyan-line);
  background:#54cede12;transform:translateY(-1px)}
.cart-link.has-items{color:var(--cyan);border-color:var(--cyan-line)}
.cart-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;
  padding:0 5px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--cyan-hi),var(--cyan));color:#081a21;
  font:700 10.5px/1 var(--mono);letter-spacing:0;
  box-shadow:0 2px 8px -2px var(--cyan-glow)}


/* ── cart preview drawer ────────────────────────────────────────────────────
   Shown by the server when the URL carries ?added=, so there is no JS and no
   client-side cart state to fall out of step. */
/* A toggle, not a one-shot animation: it opens and closes without the page
   navigating, so it has to be able to slide BACK out. */
.cart-drawer{position:fixed;top:0;right:0;bottom:0;z-index:120;
  width:min(370px,92vw);padding:26px 24px;overflow:auto;
  background:hsl(220 10% 9% / .97);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-left:1px solid var(--line);box-shadow:-30px 0 70px -30px #030407e6;
  transform:translateX(100%);transition:transform .3s var(--ease)}
.cart-drawer.on{transform:none}
.cart-drawer[hidden]{display:none}
/* Click-anywhere-else to close. Also stops the page behind it being clicked
   while the drawer is the thing you are looking at. */
.cart-scrim{position:fixed;inset:0;z-index:119;background:#06070980;
  opacity:0;transition:opacity .3s var(--ease)}
.cart-scrim.on{opacity:1}
.cart-scrim[hidden]{display:none}
.cart-empty-panel{margin:26px 0 0;color:var(--dim);font-size:14.5px}
.cart-drawer-x{position:absolute;top:14px;right:16px;width:30px;height:30px;
  display:grid;place-items:center;border-radius:8px;color:var(--dim);
  font-size:24px;line-height:1;text-decoration:none;
  transition:color .3s var(--ease),background .3s var(--ease)}
.cart-drawer-x:hover{color:var(--tx);background:#ffffff0f}
.cart-drawer-items{margin:14px 0 0;display:grid;gap:14px}
.cart-drawer-row{display:flex;gap:12px;align-items:center}
.cart-drawer-row img,.cart-drawer-row .cart-noshot{width:52px;height:52px;
  flex:0 0 52px;object-fit:cover;border-radius:8px}
.cart-drawer-row .cart-noshot{background:var(--panel)}
.cart-drawer-meta{flex:1;min-width:0}
.cart-drawer-row b{display:block;font-size:14.5px;font-weight:600;
  letter-spacing:-.01em}
/* Remove. Quiet until you go looking for it — this sits next to a price and
   must not read as the primary action. */
.cart-drawer-rm{flex:0 0 auto;width:26px;height:26px;padding:0;border:0;
  border-radius:7px;background:none;color:var(--dimmer);font-size:19px;
  line-height:1;cursor:pointer;
  transition:color .25s var(--ease),background .25s var(--ease)}
.cart-drawer-rm:hover{color:hsl(0 70% 72%);background:hsl(0 62% 50% / .14)}
.cart-drawer-row span{display:block;margin-top:3px;color:var(--dim);
  font:500 12.5px/1 var(--mono)}
/* The one you just added, so a cart of six does not hide the new arrival. */
.cart-drawer-row.just-added b{color:var(--cyan)}
.cart-drawer-tot{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--cyan-line)}
.cart-drawer-tot span{font:700 11px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan-dim)}
.cart-drawer-tot b{font:700 24px/1 var(--sans);letter-spacing:-.03em;
  color:var(--cyan);text-shadow:0 0 22px var(--cyan-glow)}
.cart-drawer-saved{margin:9px 0 0;font:600 12.5px/1 var(--mono);color:var(--ok)}
.cart-drawer-note{margin:9px 0 0;font-size:12.5px;color:var(--dimmer);
  line-height:1.5}
.cart-drawer-acts{display:flex;gap:9px;margin-top:20px}
.cart-drawer-acts .inline{display:contents}
.cart-drawer-acts .btn{flex:1;justify-content:center;width:auto;margin-top:0}
@media (max-width:560px){
  .cart-drawer{width:100%;top:auto;height:auto;max-height:82vh;
    border-left:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0;
    transform:translateY(100%)}
  .cart-drawer.on{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .cart-drawer,.cart-scrim{transition:none}
}

/* ── Shop: the Products / Expansions tabs and the expansion grid ─────────
   Square art on purpose: the Shop shows a tile, the Library shows a wide
   banner, and an expansion carries BOTH inside its .s2sexp so each surface
   gets the shape it was designed for rather than a crop of the other. */
.shop-seg{display:inline-flex;gap:2px;margin:0 0 22px;padding:3px;border-radius:10px;
 background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.shop-seg .seg-btn{display:inline-block;padding:8px 18px;border-radius:7px;
 font-size:13px;font-weight:600;color:var(--dim,#8b95a6);text-decoration:none;
 border:0;background:none;cursor:pointer}
.shop-seg .seg-btn.active{color:#fff;background:rgba(255,255,255,.09)}
.shop-seg .seg-btn:hover{color:#fff}

.exp-shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1000px){.exp-shop-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.exp-shop-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.exp-shop-grid{grid-template-columns:1fr}}
.exp-card{display:block;text-decoration:none;color:inherit}
.exp-card-art{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
 background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
 border:1px solid rgba(255,255,255,.09);display:grid;place-items:center}
.exp-card-art img{width:100%;height:100%;object-fit:cover;display:block}
.exp-card-noart{font-size:40px;font-weight:800;color:rgba(255,255,255,.18)}
.exp-card:hover .exp-card-art{border-color:rgba(255,255,255,.22)}
.exp-card-name{margin-top:10px;font-size:14px;font-weight:650}
.exp-card-sub{font-size:12px;color:var(--dim,#8b95a6);margin-top:2px}
.exp-card-price{font-size:13px;font-weight:700;margin-top:4px}

/* one expansion's page — the desktop app's Buy button opens this */
.exp-page{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:34px;
 align-items:start;margin-top:8px}
@media (max-width:720px){.exp-page{grid-template-columns:1fr;gap:22px}}
.exp-page-art{aspect-ratio:1/1;border-radius:16px;overflow:hidden;display:grid;
 place-items:center;border:1px solid rgba(255,255,255,.09);
 background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.exp-page-art img{width:100%;height:100%;object-fit:cover;display:block}
.exp-page-body h1{font-size:clamp(26px,3.4vw,38px);margin:6px 0 10px}
.exp-page-blurb{margin:10px 0 0;line-height:1.65}
.exp-page-buy{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:22px 0 14px}
.exp-page-price{font-size:24px;font-weight:800}

/* ══ /download ═════════════════════════════════════════════════════════════
   Added 2026-08-17. Shaped like image-line.com/fl-studio/download: a single
   centred card carrying one primary button, and every other thing on the page
   ranked visibly below it. The measure is narrow on purpose — a wide column of
   options is what the old "buy or try?" homepage section already was, and it is
   why the free build was hard to find at all. */
.dl-page{max-width:760px;margin-inline:auto;padding-block:clamp(28px,5vw,54px)}
.dl-card{text-align:center;padding:clamp(30px,5vw,48px) clamp(22px,4vw,44px)}
.dl-mark{width:62px;height:62px;margin:0 auto 20px;border-radius:16px;display:grid;
  place-items:center;background:#54cede1c;border:1px solid var(--cyan-line);
  color:var(--cyan);box-shadow:0 0 30px -10px var(--cyan-glow)}
.dl-mark svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.dl-card h1{font-size:clamp(28px,4.4vw,40px);margin-bottom:14px}
.dl-lede{color:var(--dim);font-size:16.5px;max-width:46ch;margin-inline:auto}
.dl-go{margin:0}
.dl-btn{width:100%;justify-content:center;margin-top:28px}
.dl-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.dl-second{width:100%;justify-content:center;margin-top:10px}
/* The "why an account" line sits UNDER the button, never above it. Above, it
   reads as a condition to be accepted before you may proceed; below, it reads
   as an explanation of what just happened. Same words, different page. */
.dl-why{margin-top:18px;font-size:13.5px;line-height:1.6;color:var(--dimmer);
  max-width:52ch;margin-inline:auto}
.dl-meta{margin-top:20px;font:500 12.5px/1.6 var(--mono);color:var(--dimmer)}
.dl-tabs{display:flex;margin:26px -1px -1px;border-top:1px solid var(--line)}
.dl-tabs a{flex:1;padding:16px 10px;font-size:14.5px;font-weight:600;color:var(--dim);
  border-right:1px solid var(--line);transition:color .3s var(--ease),background .3s var(--ease)}
.dl-tabs a:last-child{border-right:0}
.dl-tabs a:hover{color:var(--tx);background:#54cede0d}
.dl-tabs a.on{color:var(--cyan);background:#54cede14}

/* ── the licence key block ──
   Deliberately the second-loudest thing on the page. It is what the account was
   made for, and an installer that asks for a key the customer has never seen is
   the most expensive support email this product can generate. */
.dl-key{margin-top:18px;text-align:center}
.dl-key h2{font-size:clamp(21px,2.8vw,26px);margin:14px 0 10px}
.dl-key .sub{color:var(--dim);font-size:15px;max-width:52ch;margin-inline:auto}
.dl-key-row{display:flex;gap:10px;align-items:stretch;justify-content:center;
  margin:22px auto 0;max-width:520px}
.dl-key-val{flex:1;display:grid;place-items:center;padding:14px 16px;border-radius:11px;
  background:var(--screen);border:1px solid var(--cyan-line);
  font:700 clamp(15px,2.4vw,19px)/1 var(--mono);letter-spacing:.08em;color:var(--cyan);
  user-select:all;overflow-wrap:anywhere}
.dl-key-link{margin-top:14px}
.dl-owned{margin-top:18px}
.dl-owned h2{font-size:22px;margin:12px 0 16px}
.dl-owned-t{width:100%;border-collapse:collapse}
.dl-owned-t td{padding:13px 0;border-top:1px solid var(--line);vertical-align:middle;font-size:15px}
.dl-owned-t tr:first-child td{border-top:0}
.dl-owned-p{font:500 12.5px/1.6 var(--mono);color:var(--dimmer)}
.dl-owned-t form{margin:0}

.dl-req{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.dl-req h4{font:700 11.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan-dim);margin-bottom:12px}
.dl-req p{color:var(--dimmer);font-size:14px;line-height:1.65}
@media (max-width: 620px){
  .dl-req{grid-template-columns:1fr}
  .dl-key-row{flex-direction:column}
  .dl-tabs{flex-direction:column}
  .dl-tabs a{border-right:0;border-bottom:1px solid var(--line)}
}

/* ══ /pricing ══════════════════════════════════════════════════════════════
   Added 2026-08-17, replacing the homepage's three-tier grid.

   The grid's problem was arithmetic: three cards, three Buy buttons, three
   equally loud calls to action, so the page asked the visitor to compare before
   it let them do anything. image-line.com/fl-studio/pricing collapses that into
   a radio list with ONE button underneath — the choice happens inside the list,
   and the page keeps exactly one primary action however it is left. */
.pr-page{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  gap:clamp(18px,3vw,30px);align-items:start;
  padding-block:clamp(26px,4vw,46px)}
.pr-buy{padding:clamp(26px,4vw,42px) clamp(20px,3vw,38px);border-radius:16px;
  background:var(--metal);border:1px solid var(--line);box-shadow:var(--bevel)}
.pr-mark{width:56px;height:56px;margin-bottom:18px;border-radius:15px;display:grid;
  place-items:center;background:#54cede1c;border:1px solid var(--cyan-line);
  color:var(--cyan);box-shadow:0 0 28px -10px var(--cyan-glow)}
.pr-mark svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.pr-buy h1{font-size:clamp(28px,4vw,40px);margin-bottom:12px}
.pr-lede{color:var(--dim);font-size:16px;max-width:54ch}
.pr-sale{margin-top:18px}
.pr-h{font-size:19px;margin:30px 0 14px}
.pr-list{display:grid;gap:9px;margin:0}

/* One row = one edition. The grid is name | price on the top line, with the
   detail spanning both columns underneath and only opening for the row that is
   actually selected. */
.pr-row{position:relative;display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:4px 14px;padding:16px 18px;border-radius:12px;
  background:#0e0f1199;border:1px solid var(--line);cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.pr-row:hover{border-color:var(--line-2)}
.pr-row input{position:absolute;opacity:0;pointer-events:none}
.pr-name{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:16px;font-weight:600;color:var(--tx)}
/* The radio is drawn rather than styled — a native one cannot be made to match
   the rest of this interface across browsers. */
.pr-name:before{content:"";width:17px;height:17px;flex:0 0 17px;border-radius:50%;
  border:1.5px solid var(--line-2);transition:border-color .25s var(--ease),
  box-shadow .25s var(--ease),background .25s var(--ease)}
.pr-row.on{border-color:var(--cyan-line);background:#54cede0f;
  box-shadow:0 0 0 1px var(--cyan-line),0 18px 44px -28px var(--cyan-glow)}
.pr-row.on .pr-name:before{border-color:var(--cyan);background:var(--cyan);
  box-shadow:inset 0 0 0 3.5px hsl(219 16% 5%)}
.pr-amt{font:700 21px/1 var(--sans);letter-spacing:-.02em;color:var(--tx);white-space:nowrap}
.pr-amt i{font-style:normal;font:500 12.5px/1 var(--mono);color:var(--dimmer);margin-left:3px}
.pr-amt s{color:var(--dimmer);font-weight:500;font-size:15px;margin-right:5px}
.pr-tag{font:700 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  font-style:normal;padding:5px 8px;border-radius:5px;color:#081a21;
  background:linear-gradient(180deg,var(--cyan-hi),var(--cyan))}
.pr-tag.own{background:none;color:var(--ok);border:1px solid hsl(140 60% 55% / .45)}
/* Closed by default; the selected row opens. grid-template-rows 0fr -> 1fr is
   what animates a height the browser has not measured yet. */
.pr-body{grid-column:1 / -1;display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .32s var(--ease),opacity .32s var(--ease);opacity:0}
.pr-body>*{overflow:hidden;min-height:0}
.pr-row.on .pr-body,.pr-row-free .pr-body{grid-template-rows:1fr;opacity:1}
.pr-blurb{display:block;padding-top:10px;color:var(--dim);font-size:14.5px;line-height:1.6;
  max-width:60ch}
.pr-row.owned{opacity:.62;cursor:default}
.pr-row.owned:hover{border-color:var(--line)}
.pr-row-free{cursor:default;grid-template-columns:1fr auto}
.pr-row-free .pr-name:before{display:none}
.pr-inline{grid-column:1 / -1;justify-self:start;margin-top:12px;padding:9px 15px;font-size:14px}
.pr-cta{width:100%;justify-content:center;margin-top:8px}
.pr-compare{width:100%;justify-content:center;margin-top:10px}
.pr-buy .pay-note{margin-top:22px}

.pr-side{display:grid;gap:14px;position:sticky;top:20px}
.pr-quote p{color:var(--dim);font-size:14.5px;line-height:1.65}
.pr-quote p+p{margin-top:12px}
.pr-inc{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.pr-inc li{display:flex;gap:10px;font-size:14.5px;color:var(--tx);line-height:1.5}
.pr-inc svg{flex:0 0 17px;width:17px;height:17px;margin-top:3px;stroke:var(--cyan);
  fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.pr-compare-t{grid-column:1 / -1;margin-top:8px}
.pr-compare-t h2{font-size:clamp(22px,3vw,28px);margin:12px 0 20px}
/* The table is the one thing here that legitimately cannot shrink — it grows a
   column per edition. It scrolls in its own box so the PAGE never does. */
.pr-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pr-compare-t table{width:100%;border-collapse:collapse;min-width:520px}
.pr-compare-t th,.pr-compare-t td{padding:13px 14px;text-align:left;font-size:14.5px;
  border-top:1px solid var(--line)}
.pr-compare-t thead th{border-top:0;font:700 11px/1.4 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan-dim);vertical-align:bottom}
.pr-compare-t tbody td:first-child{color:var(--dim)}
.pr-compare-t tbody td{color:var(--tx)}
.pr-foot{margin-top:18px;color:var(--dimmer);font-size:14px}

@media (max-width: 960px){
  .pr-page{grid-template-columns:1fr}
  .pr-side{position:static}
}
@media (max-width: 520px){
  .pr-row{grid-template-columns:1fr}
  .pr-amt{justify-self:start}
}

/* ── comparison table: allowance cells ──────────────────────────────────────
   Figure and unit, styled like the price row above them ("$10 / month") so the
   whole first column of the table reads in one voice. "15 a day" as flat body
   text looked like prose dropped into a grid of one-word cells. */
.pr-num{font-weight:700;font-size:15.5px}
.pr-unit{font-style:normal;font:500 11.5px/1 var(--mono);color:var(--dimmer);
  margin-left:5px;letter-spacing:.02em;white-space:nowrap}
/* The row labels are the table's spine — "MIDI sampler runs" breaking over two
   lines dragged its whole row taller and cost more height than the width it
   saved. The table already scrolls inside .pr-scroll if that makes it wide. */
.pr-compare-t tbody td:first-child{white-space:nowrap;padding-right:22px}

/* ── /download: the call to action ─────────────────────────────────────────
   The two buttons were `width: 100%` inside a 760px card, which made them
   1½-inch slabs of flat colour with the label marooned in the middle. Full
   width is right for a NARROW card — image-line's is about 480px — and wrong
   the moment the card is wider than the button wants to be. So the buttons get
   their own measure and the card keeps its own. */
.dl-cta{max-width:430px;margin:28px auto 0;display:grid;gap:10px}
.dl-btn,.dl-second{width:100%;justify-content:center;margin-top:0}
.dl-btn{padding:15px 24px;font-size:16px;gap:11px}
/* Icon before the label, not after. After, it reads as a decoration hung off
   the end of a sentence; before, it is the button's verb. */
.dl-btn svg{width:18px;height:18px;flex:0 0 18px}
.dl-second{padding:13px 24px;font-size:15px}
.dl-why{margin-top:16px}

/* ── the platform picker ──
   Was: three tabs of full admin-length labels, so "macOS · Apple Silicon
   (M1–M4)" wrapped to two lines and left the row ragged and a head taller than
   it needed to be. The parenthetical moved into the line above, where somebody
   actually asking "which Mac do I have?" will read it. */
.dl-pick{margin-top:26px;font-size:13px;color:var(--dimmer);line-height:1.6}
.dl-pick span{display:block;color:var(--dimmer);opacity:.82}
.dl-tabs{margin:12px -1px -1px;border-top:1px solid var(--line)}
.dl-tabs a{padding:15px 8px;font-size:13.5px;white-space:nowrap;
  letter-spacing:-.005em}
.dl-tabs a.on{font-weight:700;box-shadow:inset 0 -2px 0 var(--cyan)}
.dl-meta{margin-top:22px;font-size:12px;opacity:.85}
@media (max-width: 520px){
  .dl-tabs a{white-space:normal}
}