/* Homepage: the tool picker hero, tool showcases, tool prices and the developer band.
   Tokens, buttons and dark bands come from base.css; header and footer from chrome.css. */
.wrap {
  max-width: calc(var(--max) + 2 * var(--pad));
  margin: 0 auto;
  padding-inline: var(--pad);
}

/* ------------------------------------------------------------------ hero */
.hero {
  overflow: hidden;
  padding-block: calc(var(--header-h) + clamp(12px, 2vw, 24px)) clamp(56px, 7vw, 96px);
  text-align: center;
}

/* The turntable: every card sits in a slot that turns around one pivot far below the row, like a
   wheel seen from its rim. js/home.js sets each slot's --offset (0 is the chosen card); turning the
   wheel is a change of offsets, so the cards rotate together and the chosen one comes to the top. */
.fan {
  --fan-w: 304px;
  --fan-h: 214px;
  --fan-r: 1040px;
  --fan-step: 19deg;
  position: relative;
  height: calc(var(--fan-h) * 1.24 + 28px);
  touch-action: pan-y;
}
.fan-track {
  position: absolute;
  top: 18px;
  left: 50%;
  width: var(--fan-w);
  height: var(--fan-h);
  margin-left: calc(var(--fan-w) / -2);
}
.fan-slot {
  --offset: 0;
  position: absolute;
  inset: 0;
  transform-origin: 50% calc(100% + var(--fan-r));
  transform: rotate(calc(var(--offset) * var(--fan-step)));
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.fan-slot[data-jump] {
  transition: none;
}
.fan-card {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 7px 7px 10px;
  border: 1px solid rgba(24, 24, 26, 0.08);
  border-radius: 18px;
  background: var(--surface);
  box-shadow:
    0 1px 2px rgba(24, 24, 26, 0.05),
    0 18px 40px -22px rgba(24, 24, 26, 0.35);
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transform: scale(0.84);
  transition:
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.6s ease,
    box-shadow 0.4s ease,
    color 0.3s ease;
}
.fan-slot[data-pos='0'] {
  z-index: 3;
}
.fan-slot[data-pos='0'] .fan-card {
  opacity: 1;
  transform: scale(1.16);
  color: var(--fg);
  box-shadow:
    0 1px 2px rgba(24, 24, 26, 0.06),
    0 28px 60px -26px rgba(24, 24, 26, 0.5);
}
.fan-slot[data-pos='1'] {
  z-index: 2;
}
.fan-slot[data-pos='1'] .fan-card {
  opacity: 0.86;
  transform: scale(0.94);
}
.fan-slot[data-pos='2'] {
  z-index: 1;
}
.fan-slot[data-pos='2'] .fan-card {
  opacity: 0.42;
  transform: scale(0.86);
}
.fan-slot[data-pos='hidden'] .fan-card {
  pointer-events: none;
}
.fan-slot:not([data-pos='0']) .fan-card:hover {
  opacity: 1;
}
.fan-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.fan-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: var(--night);
}
.fan-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fan-art {
  display: grid;
  place-items: center;
  height: 100%;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(224, 138, 98, 0.32), transparent 60%), var(--night);
}
.fan-art svg {
  width: 80%;
  height: 44%;
  fill: var(--night-fg);
}
.fan-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(18, 18, 20, 0.62);
  color: #fff;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.fan-label {
  font-weight: 500;
}
@media (max-width: 900px) {
  .fan {
    --fan-w: 248px;
    --fan-h: 178px;
    --fan-r: 820px;
    --fan-step: 21deg;
  }
}
@media (max-width: 560px) {
  .fan {
    --fan-w: 200px;
    --fan-h: 148px;
    --fan-r: 540px;
    --fan-step: 23deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fan-slot,
  .fan-card {
    transition: none;
  }
}
/* Pause and play for the wheel's own turning (js/home.js), in the room under the chosen card, so the
   heading below keeps its place. It shows only where the wheel turns by itself. */
.fan-toggle {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -30px auto 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}
.fan-toggle:hover {
  border-color: rgba(24, 24, 26, 0.32);
  color: var(--fg);
}
.fan-toggle__play,
.fan-toggle[data-stopped] .fan-toggle__pause {
  display: none;
}
.fan-toggle[data-stopped] .fan-toggle__play {
  display: inline;
}
/* While the toolbox holds the visitor's file or link the wheel stays still and the toggle is put away
   (js/home.js); it keeps its room, so the heading and the toolbox do not move. */
.fan-toggle[data-held] {
  visibility: hidden;
}
/* The phone wheel leaves 30px under its chosen card: the toggle takes 8px more, below the wheel. */
@media (max-width: 560px) {
  .fan-toggle {
    margin-top: -22px;
  }
}

.hero-center {
  max-width: 62rem;
}
.hero h1 {
  margin: clamp(8px, 2vw, 20px) 0 16px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.5rem, 1.6rem + 2.8vw, 4rem);
  line-height: 1;
  letter-spacing: -0.042em;
  text-wrap: balance;
}
.lede {
  max-width: 34em;
  margin: 0 auto;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  color: var(--muted);
  text-wrap: balance;
}

/* the tool, usable right in the hero */
.toolbox {
  max-width: 780px;
  margin: 28px auto 0;
  padding: 8px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow:
    0 1px 1px rgba(24, 24, 26, 0.03),
    0 4px 10px -4px rgba(24, 24, 26, 0.06),
    0 28px 56px -30px rgba(24, 24, 26, 0.32);
}
.toolbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px 12px;
}
.toolbox-tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}
.toolbox-tool .tool-icon {
  width: 20px;
  height: 20px;
  color: var(--accent);
}
.toolbox-tool strong {
  font-weight: 600;
}
.toolbox-more {
  padding-block: 9px;
  margin-block: -9px;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}
.toolbox-more:hover {
  color: var(--fg);
}
.drop-field {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-top: 8px;
  min-height: 176px;
  align-content: center;
  padding: 18px 20px 16px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 11px;
  background: var(--tint);
  color: var(--muted);
  text-align: center;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.drop-field:hover {
  border-color: var(--faint);
}
.drop-field.is-over {
  border-color: var(--accent);
  background: var(--surface);
}
.drop-empty {
  display: grid;
  justify-items: center;
  gap: 4px;
}
/* A target 8px taller above and below the text without moving the line; the larger area is a
   pseudo-element, so the focus ring hugs the text and clears the hint line under it. */
.drop-browse {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.drop-browse::after {
  content: '';
  position: absolute;
  inset: -8px 0;
}
.drop-browse:hover {
  color: var(--accent-ink);
}
.drop-chosen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 12px;
  margin: 2px 0 0;
}
.drop-chosen__name {
  max-width: 100%;
  font-weight: 500;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.drop-chosen__facts {
  font-size: 14px;
  color: var(--faint);
}
.drop-chosen .drop-browse {
  font-size: 14px;
  color: var(--muted);
}
.drop-status {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}
.drop-status.is-error {
  color: var(--danger);
}
.drop-field svg {
  color: var(--fg);
}
.drop-title {
  margin-top: 4px;
  font-weight: 500;
  color: var(--fg);
}
.drop-or {
  margin-left: 4px;
  font-weight: 400;
  color: var(--faint);
}
.drop-field input[type='url'] {
  width: min(100%, 440px);
  height: 42px;
  margin-top: 10px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 14.5px;
}
.drop-field input[type='url']:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.toolbox-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 4px 2px 8px;
}
.option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  font-size: 14px;
  color: var(--faint);
}
.option > span {
  white-space: nowrap;
}
.option select {
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 14px;
}
.option[hidden] {
  display: none;
}
/* The price keeps two lines of space, so the box keeps its height as the wheel turns; from 561 to
   900px every price fits on one line and keeps one (responsive rules below). */
.toolbox-price {
  flex: 1;
  min-height: calc(2 * 1.55em);
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
}
.hero-note {
  margin-top: 18px;
  text-wrap: balance;
  font-size: 13.5px;
  color: var(--faint);
}

/* before / after comparison */
.compare {
  --pos: 50%;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
  user-select: none;
}
.compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.compare-after {
  clip-path: inset(0 0 0 var(--pos));
}
.compare-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  pointer-events: none;
}
.compare-knob {
  position: absolute;
  top: 50%;
  left: var(--pos);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: #fff;
  color: var(--fg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.compare input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.compare:has(input:focus-visible) .compare-knob {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.chip {
  position: absolute;
  top: 12px;
  padding: 5px 8px;
  border-radius: 4px;
  background: rgba(10, 10, 10, 0.6);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}
.chip--left {
  left: 12px;
}
.chip--right {
  right: 12px;
}

/* ------------------------------------------------------------------ sections */
.section {
  padding-block: var(--section-space);
  border-top: 1px solid var(--line);
}
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.section h2,
.night h2,
.closing h2 {
  margin: 12px 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2rem, 1.35rem + 1.9vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.section-note {
  max-width: 34em;
  color: var(--muted);
}

/* No hairline above tinted and dark bands, nor under the inset canvas, where it would run past the
   canvas's rounded corners. */
.section--tint,
.band-dark,
.canvas-hero + .section {
  border-top: 0;
}
.section--tint {
  background: var(--tint);
}
.night::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(70% 45% at 50% 0%, rgba(255, 236, 214, 0.06), transparent 75%);
}

.center-head {
  max-width: 46rem;
  margin: 0 auto clamp(32px, 4vw, 48px);
  text-align: center;
}
.center-head .section-note {
  margin: 16px auto 0;
  text-wrap: balance;
}

/* showcase */

/* gallery */

.gallery-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
}
.gallery-foot a {
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--fg);
}
.gallery-foot a:hover {
  color: var(--accent-ink);
}

/* vocal stems */

/* pricing */
/* The inline padding keeps the focus ring of the tool links clear of the scroll clip. */
.table-scroll {
  overflow-x: auto;
  padding-inline: 6px;
  margin-inline: -6px;
}
.price-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.price-table th,
.price-table td {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  text-align: right;
  font-weight: 400;
}
.price-table thead th {
  padding-top: 0;
  border-top: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
/* Resolutions read as written (720p, 2K); only the "Tool" head is uppercase. */
.price-table thead th:not(:first-child) {
  text-transform: none;
}
.price-table th:first-child {
  text-align: left;
}
.price-table tbody th {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: -0.01em;
}
/* A target at least 40px tall (phones set a tighter line height) without making the row taller;
   the larger area is a pseudo-element, so the focus ring still hugs the name. */
.price-table tbody th a {
  position: relative;
  display: inline-block;
}
.price-table tbody th a::after {
  content: '';
  position: absolute;
  inset: -11px 0;
}
/* The variant ("caption file", "translate") on its own line under the tool name; a long one wraps
   into even lines rather than leaving one word alone. */
.price-table__variant {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-wrap-style: balance;
}
.price-table tbody tr:last-child > * {
  border-bottom: 1px solid var(--line);
}
.price-table td {
  font-size: 16px;
}
/* A price that does not depend on resolution is one cell across the four columns (so it is not read
   as the 720p price). The price ends where the 720p prices end, and what it covers follows it. */
.price-table .flat {
  color: var(--muted);
  text-align: left;
}
.price-table .flat > [data-price] {
  display: inline-block;
  min-width: 25%;
  text-align: right;
}
.fine-print {
  display: grid;
  gap: 6px;
  max-width: 35em;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--faint);
}

/* api */
.night {
  padding-block: var(--section-space);
  background: var(--night);
  color: var(--night-fg);
}
.night .eyebrow {
  color: var(--night-muted);
}
.api-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.api-copy {
  margin-top: 20px;
  max-width: 30em;
  color: var(--night-muted);
}
.api-links {
  display: grid;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.api-links a {
  border-bottom: 1px solid var(--night-line);
  padding-bottom: 2px;
}
.api-links a:hover {
  border-color: var(--night-fg);
}
.code {
  overflow: hidden;
  background: var(--night-2);
  border: 1px solid var(--night-line);
  border-radius: 10px;
}
.code-bar {
  display: flex;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--night-line);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--night-muted);
}
.code pre {
  margin: 0;
  padding: 20px 18px 22px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--night-fg);
}
/* The card clips what lies outside it, and a sample's long lines scroll under its edge, so a focused
   sample rings the whole card. Without :has() the ring stays inside the sample's own edge, round the
   card's lower corners. */
.code pre:focus-visible {
  border-radius: 0 0 9px 9px;
  outline-offset: -2px;
}
.code:has(> pre:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.code:has(> pre:focus-visible) > pre {
  outline: none;
}
.code .s {
  color: var(--night-accent);
}
.code .c {
  color: var(--night-faint);
}

.families {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 16px clamp(32px, 5vw, 72px);
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 28px;
  border-top: 1px solid var(--night-line);
}
.families-title {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -0.02em;
}
.families dl {
  display: grid;
  gap: 10px;
  margin: 0;
}
.families dl > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
}
.families dt {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--night-muted);
}
.families dd {
  margin: 0;
  color: var(--night-fg);
}
.families-link {
  grid-column: 2;
  justify-self: start;
  margin-top: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--night-line);
}
.families-link:hover {
  border-color: var(--night-fg);
}

/* faq */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 5vw, 72px);
}
.faq {
  border-bottom: 1px solid var(--line);
}
.faq details {
  border-top: 1px solid var(--line);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  font-weight: 400;
  color: var(--faint);
}
.faq details[open] summary::after {
  content: '−';
}
.faq details p {
  max-width: 36em;
  margin: 0;
  padding-bottom: 20px;
  color: var(--muted);
}

/* closing */
.closing {
  padding-block: clamp(80px, 11vw, 148px) clamp(64px, 8vw, 104px);
}
.closing-inner {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
}
.closing h2 {
  max-width: 14em;
  margin: 0;
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem);
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 960px) {
  .section-head,
  .api-grid,
  .families,
  .faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .families-link {
    grid-column: auto;
  }
}
/* Tablets and phones: the price takes its own line above the setting and Start. A tool without a
   setting keeps the setting's space, and the drop text keeps two lines on phones, so the toolbox
   stays the same height as the wheel turns. From 561 to 900px every price fits on one line (the
   longest from about 530px), so the price keeps no second line there, which would only leave a gap
   above the setting it belongs to. */
@media (max-width: 900px) {
  .toolbox-foot {
    flex-wrap: wrap;
  }
  .toolbox-price {
    flex-basis: 100%;
    order: -1;
  }
  .toolbox-foot .btn {
    margin-left: auto;
  }
  .toolbox .option[hidden] {
    display: flex !important;
    visibility: hidden;
  }
}
@media (min-width: 561px) and (max-width: 900px) {
  .toolbox-price {
    min-height: 0;
  }
}
/* Phones: the setting's name sits above its menu, which takes the full width, so a long choice
   ("None, just remove the subtitles") shows whole. */
@media (max-width: 720px) {
  .drop-title,
  .drop-or {
    min-height: calc(2 * 1.55em);
  }
  .option {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .toolbox-foot .btn {
    flex: 1 1 100%;
  }
}
/* Narrow phones: longer tool names wrap beside "How it works", so the name keeps two lines for
   every tool and the box keeps its height. The audio tools' file hint keeps its two lines by leaving
   out the 2 GB limit (js/home.js). */
@media (max-width: 360px) {
  .toolbox-tool {
    min-height: calc(2 * 1.55em);
  }
  .drop-or__limit {
    display: none;
  }
}
@media (max-width: 560px) {
  .chip {
    top: 8px;
    font-size: 10px;
  }
  .chip--left {
    left: 8px;
  }
  .chip--right {
    right: 8px;
  }
  .price-table {
    min-width: 0;
  }
  /* 6px between columns keeps the four resolution columns inside a 320px screen. */
  .price-table th,
  .price-table td {
    padding: 12px 0 12px 6px;
    font-size: 14px;
  }
  .price-table th:first-child {
    padding-left: 0;
  }
  .price-table thead th {
    font-size: 10.5px;
    letter-spacing: 0.04em;
  }
  .price-table tbody th {
    font-size: 15px;
    line-height: 1.25;
  }
  /* The tighter lines bring the variant's letters up to the tool name: 2px more keeps them clear of
     the name's focus ring, as on larger screens. */
  .price-table__variant {
    margin-top: 4px;
  }
  /* The flat cell keeps one 6px left padding for four columns: (width + 6px) / 4 - 6px ends the
     price on the 720p column's edge. */
  .price-table .flat > [data-price] {
    min-width: calc(25% - 4.5px);
  }
  .closing-inner {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ------------------------------------------------------------------ tool overview (generated) */

.toolkit-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 1.25rem;
}
.toolkit-filter button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: 500 14.5px var(--font);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.toolkit-filter button:hover {
  border-color: rgba(24, 24, 26, 0.32);
  color: var(--fg);
}
.toolkit-filter button[aria-pressed='true'] {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
}
.tool-card[data-filtered] {
  display: none;
}
.toolkit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 16px;
}
.tool-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  transition:
    transform 0.25s ease,
    border-color 0.2s ease;
}
.tool-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}
.tool-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--night);
}
.tool-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.tool-card:hover .tool-card__media img {
  transform: scale(1.03);
}
.tool-card__art {
  display: grid;
  place-items: center;
  height: 100%;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(224, 138, 98, 0.3), transparent 60%), var(--night);
  color: var(--night-fg);
}
.tool-card__art svg {
  width: 80%;
  height: 42%;
  fill: var(--night-fg);
}
/* Name, text and price: the text row takes the spare height, so the prices in a row line up. */
.tool-card__body {
  display: grid;
  flex: 1;
  grid-template-rows: auto 1fr auto;
  gap: 0.4rem;
  align-content: stretch;
  padding: 0.95rem 1.05rem 1rem;
}
.tool-card__name {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.tool-card__name .tool-icon {
  width: 20px;
  height: 20px;
  color: var(--muted);
}
.tool-card h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.tool-card__text {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.45;
  text-wrap-style: pretty;
}
.tool-card__price {
  margin-top: 0.35rem;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 12px;
}
.tool-card:hover h3 {
  color: var(--accent-ink);
}

/* ------------------------------------------------------------------ feature showcases */

/* Captions: a caption file as an editor shows it, original and translation. */

/* Reframe: the source with the crop window; the chips resize the window, the real result sits beside it. */
.reframe-demo {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--night);
}
.reframe-demo > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Centred where the real 9:16 crop of this frame sits (--crop, measured on the output); the shadow dims the rest. */
.reframe-window {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--crop, 50%);
  width: calc(100% * var(--ratio) * 9 / 16);
  border: 2px solid #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 9999px rgba(10, 10, 12, 0.58);
  transform: translateX(-50%);
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ratio-chips {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(18, 18, 20, 0.62);
  backdrop-filter: blur(8px);
}
/* A 30px chip with a 40px target: the pseudo-element reaches 5px above and below it. */
.ratio-chips button {
  position: relative;
  min-width: 44px;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font: 500 12px var(--mono);
  cursor: pointer;
}
.ratio-chips button::after {
  content: '';
  position: absolute;
  inset: -5px 0;
}
.ratio-chips button[aria-pressed='true'] {
  background: #fff;
  color: var(--fg);
}
.reframe-result {
  position: absolute;
  left: 12px;
  bottom: 12px;
  height: 58%;
  width: auto;
  border: 2px solid #fff;
  border-radius: 8px;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
}

/* Voice cleanup: the same recording before and after, measured. */
.wave-panel {
  display: grid;
  gap: 1rem;
  align-content: center;
  aspect-ratio: 16 / 9;
  padding: 1.25rem 1.4rem;
  background:
    radial-gradient(110% 90% at 50% 120%, rgba(224, 138, 98, 0.18), transparent 60%), var(--night);
  color: var(--night-fg);
}
.wave-toggle {
  display: flex;
  gap: 4px;
  justify-self: start;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.wave-toggle button {
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--night-muted);
  font: 500 13px var(--font);
  cursor: pointer;
}
.wave-toggle button[aria-pressed='true'] {
  background: var(--night-fg);
  color: var(--night);
}
.wave-svg {
  width: 100%;
  height: clamp(70px, 9vw, 110px);
}
.wave-noisy {
  fill: var(--night-accent);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.wave-clean {
  fill: var(--night-fg);
  transition: opacity 0.35s ease;
}
.wave-panel[data-state='before'] .wave-noisy {
  opacity: 1;
}
.wave-panel[data-state='before'] .wave-clean {
  opacity: 0;
}
.wave-caption {
  margin: 0;
  color: var(--night-muted);
  font-family: var(--mono);
  font-size: 12px;
}
.price-table .flat span[data-price] {
  color: var(--fg);
}
.price-table .flat > span:not([data-price]) {
  margin-left: 0.5rem;
  color: var(--faint);
  font-size: 13px;
}
.price-table tbody th a:hover {
  color: var(--accent-ink);
}
.hero-note a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
}
@media (max-width: 560px) {
  .reframe-result {
    height: 50%;
  }
}
/* The chips sit over the frame's top-left corner, left of the crop window. In a frame narrower than
   660px the square window (at this frame's --crop) reaches them, so they move under the frame. */
@container (max-width: 660px) {
  .ratio-chips {
    position: static;
    width: fit-content;
    margin-top: 8px;
    background: var(--night);
  }
}

/* ------------------------------------------------------------------ shared sections (home, tool, use-case and pricing pages) */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1.35rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.step-n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 13px;
}
.steps p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.45;
}
.steps li h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.steps li p {
  max-width: 35em;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}
.points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.points li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.4rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.points h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.points p {
  max-width: 35em;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
/* A point's own link sits at the foot of the card, level with the links beside it. */
.points li > a {
  margin-top: auto;
  padding-top: 0.5rem;
  align-self: flex-start;
  font-weight: 500;
}
.points p a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
}
.points a:hover {
  color: var(--accent-ink);
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: 16px;
}
/* Homepage use cases: all five in one row, or a swipeable row with the next card peeking. The
   padding and negative margin keep the card shadow, the hover lift and the focus ring (5px out, 8px
   above a lifted card) inside the scroller; js/home.js scrolls a card reached with the keyboard to
   its snap position. */
@media (min-width: 960px) {
  .use-cases .case-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 959px) {
  .use-cases .case-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78%, 17rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 6px;
    padding: 8px 6px 28px;
    margin: -8px -6px -28px;
  }
  .use-cases .case-card {
    scroll-snap-align: start;
  }
}
.case-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  transition:
    transform 0.25s ease,
    border-color 0.2s ease;
}
.case-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}
.case-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tint);
}
.case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.case-card:hover .case-card__media img {
  transform: scale(1.04);
}
.case-card__body {
  display: grid;
  gap: 0.25rem;
  padding: 0.95rem 1.05rem 1.05rem;
}
.case-card__name {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
/* Short labels balance: `pretty` still leaves "Generate, then / finish" on two-line labels. */
.case-card__text {
  color: var(--muted);
  font-size: 14px;
  text-wrap: balance;
}

/* Tool groups on the homepage: a tab per group, a real result beside the group's tools. */
.group-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
}
.group-tabs button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: 500 14.5px var(--font);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.group-tabs button:hover {
  color: var(--fg);
}
.group-tabs button[aria-selected='true'] {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
}
.group-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
}
/* Positions the reframe demo's ratio chips over the frame; its width decides whether they fit there. */
.group-visual {
  position: relative;
  margin: 0;
  container-type: inline-size;
}
.group-visual > .compare,
.group-visual > .reframe-demo,
.group-visual > .wave-panel {
  border-radius: 18px;
  box-shadow:
    0 2px 4px rgba(24, 24, 26, 0.04),
    0 30px 60px -32px rgba(24, 24, 26, 0.42);
}
.group-visual > .reframe-demo,
.group-visual > .wave-panel {
  overflow: hidden;
}
.group-visual figcaption {
  margin-top: 0.7rem;
  color: var(--faint);
  font-size: 13px;
}
.group-tools {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.group-tools a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 4px 14px;
  align-items: start;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition:
    border-color 0.15s ease,
    transform 0.2s ease;
}
.group-tools a:hover {
  border-color: var(--line-strong);
  transform: translateX(2px);
}
.group-tools .tool-icon {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--accent);
}
.group-row__text strong {
  display: block;
  font-weight: 600;
}
.group-row__text span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  text-wrap-style: pretty;
}
.group-row__price {
  grid-column: 2;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 12px;
}

/* Price examples beside a link to the full price list. */
.price-teaser__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.price-teaser .section-note {
  margin: 16px 0 0;
}
.price-teaser .btn {
  margin-top: 1.5rem;
}
.examples {
  display: grid;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  list-style: none;
}
.examples li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding: 1.1rem 1.35rem;
}
.examples li + li {
  border-top: 1px solid var(--line);
}
.examples li > span {
  text-wrap: balance;
}
.examples strong {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
@media (max-width: 900px) {
  .group-panel,
  .price-teaser__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .points,
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
}