/* ==========================================================================
   Creators pages (/creators/, /creators/premiere-pro/, /creators/davinci-resolve/)
   Generated by tools/render-creators.mjs. The design is the kit's; this file
   only adds what the kit has no component for. Logical properties throughout,
   so Hebrew and Arabic need nothing extra.
   ========================================================================== */
.creators-page .cr-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hero ------------------------------------------------------------------ */
.cr-hero {
  padding-block: var(--kol-space-7) var(--kol-space-6);
}

.cr-hero-grid {
  display: grid;
  gap: var(--kol-space-6) var(--kol-space-7);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .cr-hero-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
}

.cr-hero-copy {
  display: grid;
  gap: var(--kol-space-4);
  justify-items: start;
  min-inline-size: 0;
}

.cr-hero-copy h1 {
  font-size: var(--kol-text-3xl);
  max-inline-size: 22ch;
}

.cr-hero-copy .kol-lead {
  max-inline-size: 52ch;
  margin: 0;
}

.cr-crumbs a {
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
}

.cr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kol-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cr-chips li {
  padding: var(--kol-space-1) var(--kol-space-3);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-pill);
  background: var(--kol-surface);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

.cr-hero-figure {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--kol-space-4);
  margin: 0;
}

.cr-hero-figure img {
  inline-size: calc(50% - var(--kol-space-2));
  block-size: auto;
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-sunk);
  box-shadow: var(--kol-shadow);
}

@media (max-width: 639px) {
  /* One panel at phone width, larger, instead of two thumbnails. */
  .cr-hero-figure img:nth-child(2) {
    display: none;
  }

  .cr-hero-figure img {
    inline-size: min(100%, 320px);
  }
}

.cr-hero-figure img:only-child,
.cr-hero-single img {
  inline-size: min(100%, 360px);
}

.cr-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kol-space-2);
  margin-block-start: var(--kol-space-5);
}

.cr-jump a {
  padding: var(--kol-space-1) var(--kol-space-3);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-pill);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  text-decoration: none;
}

.cr-jump a:hover {
  border-color: var(--kol-line-strong);
  color: var(--kol-ink);
}

/* Cards and lists ------------------------------------------------------- */
.cr-host {
  gap: var(--kol-space-4);
}

.cr-host h3,
.cr-feature h3 {
  font-size: var(--kol-text-lg);
}

.cr-glyph {
  inline-size: 28px;
  block-size: 28px;
  color: var(--kol-ink);
}

.cr-points {
  display: grid;
  gap: var(--kol-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

.cr-points li {
  position: relative;
  padding-inline-start: var(--kol-space-5);
}

.cr-points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.5em;
  inline-size: 10px;
  block-size: 6px;
  border-inline-start: 2px solid var(--kol-accent);
  border-block-end: 2px solid var(--kol-accent);
  transform: rotate(-45deg) translateY(-3px);
}

[dir="rtl"] .cr-points li::before {
  transform: rotate(45deg) translateY(-3px);
}

.cr-points-large {
  font-size: var(--kol-text-md);
}

.cr-more {
  color: var(--kol-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cr-subhead {
  margin-block: var(--kol-space-6) var(--kol-space-4);
  font-size: var(--kol-text-lg);
}

.cr-note,
.cr-meta,
.cr-unit {
  margin: var(--kol-space-4) 0 0;
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  max-inline-size: 70ch;
}

.cr-meta {
  margin: 0;
}

.cr-meta a,
.cr-note a {
  color: inherit;
  text-underline-offset: 3px;
}

.cr-plain {
  display: grid;
  gap: var(--kol-space-2);
  margin: var(--kol-space-4) 0 0;
  padding-inline-start: var(--kol-space-5);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-base);
  max-inline-size: 70ch;
}

.cr-audio {
  display: grid;
  gap: var(--kol-space-6);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--kol-space-6);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-lg);
  background: var(--kol-surface);
}

@media (min-width: 768px) {
  .cr-audio {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

.cr-audio h2 {
  margin-block-end: var(--kol-space-3);
}

/* Downloads ------------------------------------------------------------- */
.cr-dl-list {
  display: grid;
  gap: var(--kol-space-4);
}

.cr-dl-row {
  display: grid;
  gap: var(--kol-space-3);
  padding: var(--kol-space-5);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
}

.cr-dl-row h3 {
  font-size: var(--kol-text-base);
}

.cr-dl-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kol-space-3) var(--kol-space-4);
}

.cr-dl-item {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kol-space-2);
}

.cr-dl-alt {
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  text-underline-offset: 3px;
}

.cr-reco {
  padding: 2px var(--kol-space-2);
  border-radius: var(--kol-radius-pill);
  background: var(--kol-accent-quiet);
  color: var(--kol-ink);
  font-size: var(--kol-text-xs);
  font-weight: 600;
}

/* A visitor's own system leads when the script knows it. */
.cr-dl-item.is-recommended {
  order: -1;
}

/* Pricing --------------------------------------------------------------- */
.cr-pricing th .cr-model-note {
  display: block;
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-xs);
  font-weight: 400;
}

.cr-pricing td.kol-num {
  font-size: var(--kol-text-base);
  color: var(--kol-ink);
}

/* Guides ---------------------------------------------------------------- */
.cr-tablist {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--kol-space-1);
  margin-block-end: var(--kol-space-4);
  padding: var(--kol-space-1);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-pill);
  background: var(--kol-sunk);
}

.cr-tablist[hidden] {
  display: none;
}

.cr-tablist button {
  min-block-size: 36px;
  padding: 0 var(--kol-space-4);
  border: 0;
  border-radius: var(--kol-radius-pill);
  background: transparent;
  color: var(--kol-ink-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.cr-tablist button[aria-selected="true"] {
  background: var(--kol-surface);
  color: var(--kol-ink);
  box-shadow: var(--kol-shadow);
}

.cr-tabs.is-ready .cr-os-title {
  display: none;
}

.cr-tabpanel[hidden] {
  display: none;
}

.cr-os-title {
  margin-block: var(--kol-space-5) var(--kol-space-3);
  font-size: var(--kol-text-md);
}

.cr-steps {
  display: grid;
  gap: var(--kol-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cr-step;
  max-inline-size: 70ch;
}

.cr-steps > li {
  counter-increment: cr-step;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--kol-space-3);
  align-items: start;
  color: var(--kol-ink-muted);
}

.cr-steps > li::before {
  content: counter(cr-step);
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border: 1px solid var(--kol-line-strong);
  border-radius: 50%;
  color: var(--kol-ink);
  font-size: var(--kol-text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cr-first {
  display: grid;
  gap: var(--kol-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cr-first;
}

@media (min-width: 900px) {
  .cr-first {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.cr-first > li {
  counter-increment: cr-first;
  display: flex;
  flex-direction: column;
  gap: var(--kol-space-2);
  padding-block-start: var(--kol-space-4);
  border-block-start: 2px solid var(--kol-line);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

.cr-first > li::before {
  content: counter(cr-first);
  color: var(--kol-ink-faint);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cr-first > li strong {
  color: var(--kol-ink);
  font-size: var(--kol-text-base);
}

.cr-code-label {
  margin: var(--kol-space-4) 0 var(--kol-space-2);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

.cr-code {
  margin: 0;
  padding: var(--kol-space-3) var(--kol-space-4);
  overflow-x: auto;
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-sm);
  background: var(--kol-sunk);
  color: var(--kol-ink);
  font: var(--kol-text-sm) / 1.5 var(--kol-font-mono);
  text-align: left;
  white-space: pre;
  max-inline-size: 100%;
}

/* Style gallery: real caption renders over a neutral frame --------------- */
.cr-styles {
  display: grid;
  gap: var(--kol-gap);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .cr-styles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cr-styles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cr-style {
  margin: 0;
  display: grid;
  gap: var(--kol-space-2);
}

.cr-style-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background:
    radial-gradient(120% 90% at 30% 20%, #5d6770 0%, rgba(93, 103, 112, 0) 60%),
    linear-gradient(160deg, #2f363c 0%, #171a1d 100%);
}

.cr-style-frame img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.cr-style figcaption {
  display: grid;
  gap: 2px;
  font-size: var(--kol-text-sm);
  color: var(--kol-ink-muted);
}

.cr-style figcaption strong {
  color: var(--kol-ink);
}

.cr-trademark {
  margin: var(--kol-space-6) 0 0;
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-xs);
  max-inline-size: 80ch;
}

.cr-callout {
  margin: var(--kol-space-5) 0 0;
  padding: var(--kol-space-4) var(--kol-space-5);
  border: 1px solid var(--kol-line);
  border-inline-start: 3px solid var(--kol-accent);
  border-radius: var(--kol-radius-sm);
  background: var(--kol-surface);
  color: var(--kol-ink);
  font-size: var(--kol-text-base);
  max-inline-size: 70ch;
}

.cr-editor-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kol-space-3) var(--kol-space-4);
  margin-block-start: var(--kol-space-5);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

.cr-unit {
  margin: 0 0 var(--kol-space-3);
}

/* Find it in 10 seconds -------------------------------------------------- */
.cr-find {
  background: var(--kol-sunk);
}

.cr-find-grid {
  display: grid;
  gap: var(--kol-gap);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .cr-find-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cr-find-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cr-find-1 {
    grid-template-columns: minmax(0, 520px);
  }
}

.cr-find-card {
  display: flex;
  flex-direction: column;
  gap: var(--kol-space-3);
  padding: var(--kol-space-5);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
  box-shadow: var(--kol-shadow);
}

.cr-find-card h3 {
  font-size: var(--kol-text-lg);
}

.cr-find-card p {
  margin: 0;
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

.cr-find-card .cr-more {
  margin-block-start: auto;
  font-size: var(--kol-text-sm);
}

/* The menu path as a cascade: each step opens the next, the last is the panel. */
.cr-path {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kol-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.cr-path li {
  position: relative;
}

.cr-path li:nth-child(2) {
  margin-inline-start: 22px;
}

.cr-path li:nth-child(3) {
  margin-inline-start: 44px;
}

.cr-path li + li::before {
  content: "";
  position: absolute;
  inset-inline-start: -14px;
  inset-block-start: -10px;
  inline-size: 10px;
  block-size: 24px;
  border-inline-start: 2px solid var(--kol-line-strong);
  border-block-end: 2px solid var(--kol-line-strong);
  border-end-start-radius: 6px;
}

.cr-menu {
  display: inline-flex;
  align-items: center;
  gap: var(--kol-space-2);
  padding: var(--kol-space-2) var(--kol-space-3);
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius-sm);
  background: var(--kol-paper);
  color: var(--kol-ink);
  font-size: var(--kol-text-sm);
  font-weight: 600;
  white-space: nowrap;
}

.cr-menu b {
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: var(--kol-ink);
  color: var(--kol-ink-invert);
  font-size: var(--kol-text-xs);
}

.cr-menu-end {
  border-color: var(--kol-accent);
  background: var(--kol-accent-quiet);
}

.cr-menu-end b {
  background: var(--kol-accent);
  color: var(--kol-accent-ink);
}

/* Downloads: one installer per system ----------------------------------- */
.cr-platforms {
  display: grid;
  gap: var(--kol-gap);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
  .cr-platforms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cr-platforms-hero {
  grid-template-columns: minmax(0, 1fr);
  inline-size: 100%;
}

@media (min-width: 560px) {
  .cr-platforms-hero {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
}

.cr-platform {
  display: flex;
  flex-direction: column;
  gap: var(--kol-space-3);
  padding: var(--kol-space-5);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
}

.cr-platform.is-recommended {
  border-color: var(--kol-accent);
  box-shadow: 0 0 0 1px var(--kol-accent);
  order: 0;
}

.cr-platform-head {
  display: flex;
  align-items: center;
  gap: var(--kol-space-3);
}

.cr-platform-head > div {
  display: grid;
  min-inline-size: 0;
}

.cr-platform-head strong {
  font-size: var(--kol-text-md);
}

.cr-platform-head span {
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
}

.cr-platform {
  position: relative;
}

.cr-platform > .cr-reco {
  position: absolute;
  inset-block-start: -11px;
  inset-inline-start: var(--kol-space-4);
  background: var(--kol-accent);
  color: var(--kol-accent-ink);
}

.cr-platform-note {
  margin: 0;
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

.cr-file {
  display: block;
  overflow-wrap: anywhere;
  color: var(--kol-ink-faint);
  font: var(--kol-text-xs) / 1.4 var(--kol-font-mono);
}

.cr-glyph-os {
  inline-size: 32px;
  block-size: 32px;
  flex: none;
}

.cr-glyph-sm {
  inline-size: 22px;
  block-size: 22px;
  flex: none;
}

.cr-other {
  margin-block-start: var(--kol-space-5);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
}

.cr-other > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kol-space-1) var(--kol-space-3);
  padding: var(--kol-space-4) var(--kol-space-5);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.cr-other > summary::-webkit-details-marker {
  display: none;
}

.cr-other > summary small {
  flex-basis: 100%;
  padding-inline-start: calc(22px + var(--kol-space-3));
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  font-weight: 400;
}

.cr-other[open] > summary {
  border-block-end: 1px solid var(--kol-line);
}

.cr-other .kol-table-wrap {
  border: 0;
  border-radius: 0 0 var(--kol-radius) var(--kol-radius);
}

.cr-other td a {
  color: var(--kol-ink);
  font: var(--kol-text-xs) / 1.5 var(--kol-font-mono);
  overflow-wrap: anywhere;
}

.cr-kind {
  display: block;
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-xs);
}

.cr-card .cr-glyph {
  margin-block-end: var(--kol-space-1);
}

.cr-tabpanel > .kol-btn {
  margin-block-start: var(--kol-space-4);
}