/* Accordion Player: the page is the instrument seen from the front — lacquer body, pearl buttons, chrome, bellows. */


:root {
  --lacquer: #080707;
  --pearl: #efe8dc;
  --pearl-2: #e3dacb;
  --pearl-3: #cfc4b2;
  --pearl-ink: #1c1715;
  --pearl-muted: #5b514a;
  --chrome: #c9ccd0;
  --text: #ece5d9;
  --muted: #a79d92;
  --faint: #91877c;
  --red: #b63a22;
  --red-deep: #85261a;
  --red-ink: #b23a22;
  --amber: #f2a33a;
  --green: #2fc08d;
  --display: 'Piazzolla', 'Iowan Old Style', Georgia, serif;
  --text-face: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1240px;
  --header-h: 76px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: #3a3533 var(--lacquer);
}

body {
  margin: 0;
  color: var(--text);
  background: var(--lacquer);
  font: 400 17px/1.62 var(--text-face);
  font-feature-settings: 'kern', 'liga';
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  caret-color: var(--red);
}

/* lacquer sheen: one soft reflection across the body, like light on celluloid */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 36%, rgba(255, 245, 230, 0.06) 43%, rgba(255, 245, 230, 0.015) 47%, transparent 54%),
    radial-gradient(1200px 520px at 80% -10%, rgba(255, 240, 220, 0.05), transparent 70%);
  z-index: 0;
}

body > * {
  position: relative;
  z-index: 1;
}

::selection {
  background: var(--pearl);
  color: var(--pearl-ink);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--lacquer);
}

::-webkit-scrollbar-thumb {
  border: 3px solid var(--lacquer);
  border-radius: 10px;
  background: #3a3533;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--pearl);
  text-decoration-color: rgba(239, 232, 220, 0.35);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-color: var(--red);
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.45em;
  word-spacing: 0.05em;
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: 'opsz' 30;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

p,
li {
  text-wrap: pretty;
}

.wrap {
  width: min(var(--wrap), 100% - 40px);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 10px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--pearl);
  color: var(--pearl-ink);
}

.skip-link:focus {
  left: 14px;
}

/* ---------- the header: a lacquered case edge with a chrome trim ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background:
    linear-gradient(112deg, transparent 0 28%, rgba(255, 245, 230, 0.05) 38%, transparent 50%),
    linear-gradient(180deg, #1c1a19, #0c0b0b 60%, #070606);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 14px 30px rgba(0, 0, 0, 0.55);
}

/* the chrome trim along the lower edge, like the strips on an accordion's case */
.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(180deg, #ffffff 0%, #d3d7db 30%, #8d9298 68%, #2a2c2f 100%);
  box-shadow: 0 1px 0 #000;
}

.site-nav {
  padding: 5px;
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 100%;
}

/* the maker's nameplate on the case */
.nameplate {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding: 7px 24px 7px 22px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 9px 50%, #3a3d41 0 2.2px, #d9dce0 2.6px 3.4px, transparent 3.8px),
    radial-gradient(circle at calc(100% - 9px) 50%, #3a3d41 0 2.2px, #d9dce0 2.6px 3.4px, transparent 3.8px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0 1px, rgba(0, 0, 0, 0.05) 1px 2px),
    linear-gradient(180deg, #c9ccd0, #a7abb0 60%, #9a9ea4);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  color: #1a1a1b;
  text-decoration: none;
  white-space: nowrap;
}

.nameplate:hover {
  color: #000;
}

.nameplate img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.nameplate span {
  font: 700 19px/1 var(--display);
  font-style: italic;
  letter-spacing: 0.01em;
  color: #26282b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 -1px 0 rgba(0, 0, 0, 0.35);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.site-nav a:not(.btn) {
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--text);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  text-shadow: 0 1px 2px #000;
}

.site-nav a:not(.btn):hover {
  background: rgba(0, 0, 0, 0.55);
}

.site-nav a.is-active {
  background: rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 0 0 1px rgba(239, 232, 220, 0.28);
}

.nav-cta {
  margin-left: 10px;
}

.nav-trigger,
.nav-toggle {
  display: none;
}

@media (max-width: 1020px) {
  .nav-toggle {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-left: auto;
    border-radius: 50%;
    cursor: pointer;
    background: radial-gradient(circle at 35% 30%, #4a4646, #141212 62%);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }

  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--pearl);
    position: relative;
    transition: transform 0.25s var(--ease), background 0.2s;
  }

  .nav-toggle span::before,
  .nav-toggle span::after {
    content: '';
    position: absolute;
    left: 0;
  }

  .nav-toggle span::before {
    top: -6px;
  }

  .nav-toggle span::after {
    top: 6px;
  }

  .nav-trigger:checked + .nav-toggle span {
    background: transparent;
  }

  .nav-trigger:checked + .nav-toggle span::before {
    transform: translateY(6px) rotate(45deg);
  }

  .nav-trigger:checked + .nav-toggle span::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  .site-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 20px 24px;
    border-radius: 0;
    box-shadow: none;
    background: #0b0a0a;
    border-bottom: 1px solid rgba(201, 204, 208, 0.22);
  }

  .nav-trigger:checked ~ .site-nav {
    display: flex;
  }

  .site-nav a:not(.btn) {
    padding: 13px 14px;
    font-size: 18px;
  }

  .nav-cta {
    margin: 12px 0 0;
  }
}

@media (max-width: 420px) {
  .nameplate span {
    font-size: 16px;
  }
}

/* ---------- buttons: register red and pearl, convex like the instrument's own ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font: 600 16px/1 var(--text-face);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.12s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s;
}

.btn:active {
  transform: translateY(1px);
}

.btn-red {
  color: #fff6ef;
  background: radial-gradient(120% 140% at 30% 20%, #c84a30 0%, var(--red) 42%, var(--red-deep) 100%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), 0 2px 3px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

.btn-red:hover {
  color: #fff;
  filter: brightness(1.06);
}

.btn-pearl {
  color: var(--pearl-ink);
  background: radial-gradient(120% 160% at 30% 15%, #fffaf2 0%, var(--pearl) 40%, var(--pearl-3) 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.6), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}

.btn-pearl:hover {
  color: #000;
  filter: brightness(1.04);
}

.btn-ebony {
  color: var(--pearl);
  background: radial-gradient(120% 160% at 30% 15%, #4a4545 0%, #1b1918 45%, #0b0a0a 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(239, 232, 220, 0.12);
}

.btn-ebony:hover {
  color: #fff;
}

.btn-small {
  min-height: 42px;
  padding: 0 18px;
  font-size: 15px;
}

.btn-block {
  width: 100%;
}

.btn[aria-disabled='true'] {
  opacity: 0.55;
  pointer-events: none;
}

.btn small {
  color: inherit;
  opacity: 0.7;
  font-weight: 500;
  font-size: 13px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
}

/* ---------- pearl and ebony keyboard buttons ---------- */

.key {
  --size: 54px;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  color: var(--pearl-ink);
  font: 600 calc(var(--size) * 0.24) / 1 var(--text-face);
  background: radial-gradient(circle at 36% 30%, #fffbf4 0%, var(--pearl) 34%, var(--pearl-3) 78%, #a99e8d 100%);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 -3px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.08s ease-out, box-shadow 0.12s ease-out;
}

.key:not(.ebony)::after {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(from 210deg, rgba(255, 190, 200, 0.18), rgba(190, 230, 255, 0.2), rgba(210, 255, 220, 0.16), rgba(255, 230, 190, 0.18), rgba(255, 190, 200, 0.18));
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.key.ebony {
  color: var(--pearl-2);
  background: radial-gradient(circle at 36% 30%, #5a5555 0%, #232120 40%, #0c0b0b 100%);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.12);
}

.key[data-finger]::before {
  content: attr(data-finger);
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 12px/1 var(--text-face);
  color: #111;
  background: var(--finger, var(--amber));
  box-shadow: 0 0 0 2px #070606;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.12s, transform 0.12s;
}

.key.is-down[data-finger]::before {
  opacity: 1;
  transform: none;
}

.key.is-down {
  transform: translateY(2px) scale(0.97);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.8), 0 0 0 3px var(--finger, var(--amber)), inset 0 2px 4px rgba(0, 0, 0, 0.35);
}

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

.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: grid;
  grid-template-rows: 1fr auto;
}

.hero-body > * {
  min-width: 0;
}

.hero-body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  padding-block: clamp(28px, 5vh, 72px) clamp(24px, 3.5vh, 44px);
}

.hero h1 {
  font-size: clamp(38px, 4.8vw, 68px);
  hyphens: manual;
  font-weight: 800;
  font-variation-settings: 'opsz' 30;
  line-height: 0.92;
  letter-spacing: -0.025em;
  word-spacing: 0.08em;
  color: var(--pearl);
  margin-bottom: 28px;
}

.hero h1 em {
  font-style: italic;
  font-weight: 500;
}

.hero .lead {
  max-width: 34em;
  margin: 0 0 34px;
}

.hero-note {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.lead {
  color: #cfc6ba;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.55;
}

/* the treble buttons, staggered like a chromatic keyboard */
.keyfield {
  --size: clamp(36px, 3.4vw, 54px);
  --gap: calc(var(--size) * 0.22);
  position: relative;
  display: grid;
  gap: var(--gap);
  justify-content: center;
  padding: calc(var(--size) * 0.7);
  border-radius: 28px;
  background:
    linear-gradient(112deg, transparent 0 30%, rgba(255, 245, 230, 0.06) 40%, transparent 52%),
    linear-gradient(180deg, #151313, #070606);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px rgba(201, 204, 208, 0.16);
}

.keyfield-row {
  display: flex;
  gap: var(--gap);
}

.keyfield-row {
  margin-left: calc((var(--size) + var(--gap)) * var(--shift, 0));
}

.keyfield .key {
  --size: inherit;
  width: var(--size);
  height: var(--size);
  font-size: calc(var(--size) * 0.24);
}

.keyfield-caption {
  margin: 14px 0 0;
  color: var(--faint);
  font-size: 14px;
  text-align: center;
}

/* ---------- bellows: closed it is a band, open it holds the live player ---------- */

.bellows {
  position: relative;
  border-block: 1px solid #000;
  background: #0b0a0a;
}

.bellows-pleats {
  position: relative;
  height: var(--pleat-h, clamp(84px, 11vh, 120px));
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.6)),
    repeating-linear-gradient(90deg, #0b0a0a 0, #2f2b29 15px, #4d4845 18px, #181615 21px, #0b0a0a 40px);
  transition: height 0.9s var(--ease);
}

/* the chrome strips along both edges of the bellows */
.bellows-pleats::before,
.bellows-pleats::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 7px;
  background: linear-gradient(180deg, #ffffff 0%, #d3d7db 30%, #8d9298 68%, #2a2c2f 100%);
}

.bellows-pleats::before {
  top: 0;
  border-bottom: 1px solid #000;
}

.bellows-pleats::after {
  bottom: 0;
  border-top: 1px solid #000;
}

.bellows-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  padding-block: 14px;
}

.bellows-bar p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.bellows-stage {
  position: absolute;
  inset: 18px 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s 0.35s ease-out, visibility 0s 0.9s;
}

.bellows.is-open .bellows-pleats {
  height: var(--open-h, min(92vh, 1000px));
}

.bellows.is-open .bellows-stage {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s 0.45s ease-out, visibility 0s;
}

.bellows-stage iframe {
  width: min(var(--wrap), 100% - 32px);
  height: 100%;
  border: 0;
  border-radius: 18px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(201, 204, 208, 0.28), 0 0 0 9px #050404, 0 30px 80px rgba(0, 0, 0, 0.8);
}

/* register switches: the instrument's own tabs, here choosing what plays */
.registers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.register {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 16px 0 8px;
  border: 0;
  border-radius: 12px;
  color: var(--pearl-ink);
  font: 600 14px/1.1 var(--text-face);
  background: linear-gradient(180deg, #fbf6ee, var(--pearl-2));
  box-shadow: 0 3px 0 #8e8577, 0 4px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 #fff;
  cursor: pointer;
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
}

.register svg {
  width: 26px;
  height: 26px;
  flex: none;
}

.register[aria-pressed='true'],
.register[aria-selected='true'] {
  transform: translateY(3px);
  box-shadow: 0 0 0 #8e8577, 0 0 0 2px #050505, 0 0 0 4px var(--chrome), inset 0 2px 3px rgba(0, 0, 0, 0.22);
}

.register:hover {
  filter: brightness(1.03);
}

/* ---------- sections ---------- */

.section {
  padding-block: clamp(56px, 7vw, 104px);
}

.section-tight {
  padding-block: clamp(48px, 6vw, 80px);
}

.section-head {
  max-width: 820px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section h2,
.display-2,
.page-head h1 {
  hyphens: manual;
}

.section h2,
.display-2 {
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--pearl);
}

.section h3 {
  font-size: clamp(20px, 1.9vw, 25px);
  color: var(--pearl);
}


/* ---------- screenshot in its case window ---------- */

.case {
  margin: 0;
  padding: 10px;
  border-radius: 22px;
  background: linear-gradient(180deg, #1c1a19, #050404);
  box-shadow: 0 0 0 1px rgba(201, 204, 208, 0.22), 0 40px 90px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.case img {
  display: block;
  width: 100%;
  border-radius: 13px;
}

.case figcaption {
  padding: 12px 6px 2px;
  color: var(--faint);
  font-size: 14px;
}

.case.paper {
  background: linear-gradient(180deg, #f6f1e8, #ddd3c3);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
}

/* ---------- the two halves of the instrument: player and editor ---------- */

.halves {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
  align-items: stretch;
}

.half {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(28px, 4vw, 52px);
  border-radius: 26px;
  background:
    linear-gradient(112deg, transparent 0 34%, rgba(255, 245, 230, 0.045) 42%, transparent 54%),
    linear-gradient(180deg, #161413, #0a0909);
  box-shadow: 0 0 0 1px rgba(201, 204, 208, 0.2), 0 30px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.half-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.half-head img {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.half-head h3 {
  margin: 0;
  font-size: clamp(22px, 2.1vw, 28px);
}

.half-head p {
  margin: 4px 0 0;
  color: var(--muted);
}

.half .case {
  margin-top: auto;
}

.half-bellows {
  margin: 34px 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent 25%, transparent 75%, rgba(0, 0, 0, 0.7)),
    repeating-linear-gradient(180deg, #0b0a0a 0, #2f2b29 15px, #4d4845 18px, #181615 21px, #0b0a0a 40px);
  border-inline: 1px solid #000;
}

@media (max-width: 900px) {
  .halves {
    grid-template-columns: 1fr;
  }

  .half-bellows {
    height: 40px;
    margin: 0 30px;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 25%, transparent 75%, rgba(0, 0, 0, 0.7)),
      repeating-linear-gradient(90deg, #0b0a0a 0, #2f2b29 15px, #4d4845 18px, #181615 21px, #0b0a0a 40px);
    border-inline: 0;
    border-block: 1px solid #000;
  }
}

/* ---------- lists with button bullets ---------- */

.ticks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  position: relative;
  margin: 10px 0;
  padding-left: 32px;
  color: var(--text);
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fffbf4, var(--pearl) 40%, var(--pearl-3));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.ticks li.pro::before {
  background: radial-gradient(circle at 36% 30%, #d9735c, var(--red) 45%, var(--red-deep));
}

.ticks li.no {
  color: var(--faint);
}

.ticks li.no::before {
  background: radial-gradient(circle at 36% 30%, #4a4545, #161414 60%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(239, 232, 220, 0.12);
}

/* ---------- split rows ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.split + .split {
  margin-top: clamp(64px, 8vw, 112px);
}

.split.flip > :first-child {
  order: 2;
}

.split p {
  color: #cfc6ba;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }

  .split.flip > :first-child {
    order: 0;
  }
}

/* ---------- practice switches: register tabs that swap the picture ---------- */

.switchboard {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.switchboard .registers {
  flex-direction: column;
  gap: 12px;
}

.switchboard .register {
  width: 100%;
  min-height: 56px;
  font-size: 16px;
  text-align: left;
}

.switch-panel {
  display: none;
}

.switch-panel.is-shown {
  display: block;
}

.switch-panel h3 {
  margin-top: 26px;
}

.switch-panel p {
  max-width: 38em;
  color: #cfc6ba;
}

@media (max-width: 900px) {
  .switchboard {
    grid-template-columns: 1fr;
  }

  .switchboard .registers {
    flex-direction: row;
  }

  .switchboard .register {
    width: auto;
    min-height: 46px;
    font-size: 15px;
  }
}

/* ---------- steps: a real sequence, numbered on pearl buttons ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps .key {
  --size: 58px;
  margin-bottom: 20px;
  font: 700 24px/1 var(--display);
}

.steps h3 {
  font-size: 24px;
}

.steps p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 860px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* ---------- pricing plates ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  border-radius: 22px;
  background: linear-gradient(180deg, #161413, #0a0909);
  box-shadow: 0 0 0 1px rgba(201, 204, 208, 0.18), 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.plan.featured {
  box-shadow: 0 0 0 2px var(--red), 0 30px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.plan-flag {
  position: absolute;
  top: -14px;
  left: 26px;
  padding: 6px 14px;
  border-radius: 999px;
  color: #fff6ef;
  font-size: 13px;
  font-weight: 600;
  background: radial-gradient(120% 140% at 30% 20%, #c84a30, var(--red) 45%, var(--red-deep));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.plan-name {
  margin: 0;
  font: 700 26px/1.1 var(--display);
  color: var(--pearl);
}

.plan-for {
  margin: 6px 0 22px;
  color: var(--muted);
  font-size: 15px;
}

.plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 6px;
}

.plan-price strong {
  font: 800 clamp(32px, 2.8vw, 40px)/1 var(--display);
  color: var(--pearl);
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}

.plan-price span {
  color: var(--muted);
}

.plan-note {
  margin: 0 0 22px;
  color: var(--faint);
  font-size: 14px;
}

.plan .ticks {
  margin-bottom: 26px;
  font-size: 15px;
}

.plan .btn {
  margin-top: auto;
}

.price-note {
  max-width: 72ch;
  margin: 28px 0 0;
  color: var(--faint);
  font-size: 14px;
}

/* ---------- comparison table: a pearl button means included ---------- */

.table-wrap {
  overflow-x: auto;
  border-radius: 22px;
  background: linear-gradient(180deg, #131110, #0a0909);
  box-shadow: 0 0 0 1px rgba(201, 204, 208, 0.18);
}

.compare {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.compare th,
.compare td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(239, 232, 220, 0.07);
  text-align: center;
  vertical-align: middle;
}

.compare th:first-child,
.compare td:first-child {
  text-align: left;
}

.compare thead th {
  position: sticky;
  top: 0;
  background: #1b1918;
  font: 700 17px/1.2 var(--display);
  color: var(--pearl);
}

.compare thead th small {
  display: block;
  margin-top: 4px;
  font: 500 13px/1.3 var(--text-face);
  color: var(--muted);
}

.compare .group td {
  padding-top: 26px;
  color: var(--pearl);
  font: 700 18px/1.2 var(--display);
  font-style: italic;
  border-bottom-color: rgba(201, 204, 208, 0.2);
}

.compare .col-hl {
  background: color-mix(in srgb, var(--red) 9%, transparent);
}

span.yes,
span.no {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  vertical-align: middle;
  font-size: 0;
}

span.yes {
  background: radial-gradient(circle at 36% 30%, #fffbf4, var(--pearl) 40%, var(--pearl-3));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

span.no {
  background: radial-gradient(circle at 36% 30%, #3e3a3a, #141212 60%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(239, 232, 220, 0.12);
}

/* ---------- downloads ---------- */

.platforms {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 3px solid transparent;
  border-image: linear-gradient(180deg, #e9ebee, #8b8f95) 1;
}

.platform {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(0, 1.3fr) minmax(260px, 1fr);
  gap: 18px 40px;
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid rgba(201, 204, 208, 0.16);
}

.platform h3 {
  margin: 0;
  font-size: clamp(21px, 2vw, 26px);
  color: var(--pearl);
}

.platform p {
  margin: 0;
  color: #cfc6ba;
}

.platform .files {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.platform .files .btn {
  justify-content: space-between;
}

.platform.is-mine h3::after {
  content: attr(data-mine-label);
  display: inline-block;
  margin-left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  vertical-align: middle;
  color: #fff6ef;
  font: 600 12px/1.3 var(--text-face);
  background: var(--red);
}

@media (max-width: 900px) {
  .platform {
    grid-template-columns: 1fr;
  }
}

/* ---------- questions ---------- */

.faq {
  max-width: 880px;
}

.faq details {
  border-bottom: 1px solid rgba(201, 204, 208, 0.16);
}

.faq summary {
  position: relative;
  padding: 22px 52px 22px 0;
  font: 700 21px/1.3 var(--display);
  color: var(--pearl);
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fffbf4, var(--pearl) 40%, var(--pearl-3));
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.8);
  transition: transform 0.2s var(--ease);
}

.faq details[open] summary::after {
  background: radial-gradient(circle at 36% 30%, #d9735c, var(--red) 45%, var(--red-deep));
  transform: translateY(1px);
}

.faq details > :not(summary) {
  margin: 0 0 24px;
  color: #cfc6ba;
}

/* ---------- closing band ---------- */

.closing {
  text-align: center;
}

.closing h2 {
  margin-inline: auto;
  max-width: 14ch;
}

.closing p {
  max-width: 36em;
  margin: 0 auto 32px;
  color: #cfc6ba;
  font-size: 19px;
}

.closing .actions {
  justify-content: center;
}

/* ---------- page heads (inner pages) ---------- */

.page-head {
  padding-block: clamp(56px, 9vw, 120px) clamp(36px, 5vw, 64px);
}

.page-head h1 {
  max-width: 15ch;
  font-size: clamp(34px, 4.6vw, 62px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--pearl);
}

.page-head .lead {
  max-width: 40em;
  margin: 0 0 30px;
}

/* ---------- callouts, keys, badges ---------- */

.callout {
  position: relative;
  margin: 26px 0;
  padding: 18px 22px 18px 56px;
  border-radius: 16px;
  background: rgba(239, 232, 220, 0.06);
  box-shadow: inset 0 0 0 1px rgba(239, 232, 220, 0.14);
}

.callout::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 21px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fffbf4, var(--pearl) 40%, var(--pearl-3));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.callout.warn::before {
  background: radial-gradient(circle at 36% 30%, #ffd59a, var(--amber) 45%, #b06e14);
}

.callout.pro::before {
  background: radial-gradient(circle at 36% 30%, #d9735c, var(--red) 45%, var(--red-deep));
}

.callout.tip::before {
  background: radial-gradient(circle at 36% 30%, #b9f0d8, var(--green) 45%, #157553);
}

.callout p {
  max-width: 72ch;
  margin: 0;
}

.callout p + p {
  margin-top: 8px;
}

kbd {
  display: inline-block;
  min-width: 26px;
  padding: 1px 8px;
  border-radius: 7px;
  color: var(--pearl-ink);
  font: 600 13px/1.7 var(--text-face);
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(180deg, #fbf6ee, var(--pearl-2));
  box-shadow: 0 2px 0 #8e8577, 0 2px 3px rgba(0, 0, 0, 0.4);
}

.badge-pro {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 9px;
  border-radius: 999px;
  vertical-align: 0.15em;
  color: #fff6ef;
  font: 600 12px/1.6 var(--text-face);
  background: var(--red);
}

code {
  padding: 1px 6px;
  border-radius: 6px;
  font: 0.9em/1.4 ui-monospace, 'SF Mono', Menlo, monospace;
  background: rgba(239, 232, 220, 0.09);
}

/* ---------- reading: pearl-celluloid panels for docs and long pages ---------- */

.reading {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 220px;
  gap: 40px;
  align-items: start;
  padding-block: 44px 110px;
}

.reading.plain {
  grid-template-columns: minmax(0, 860px);
  justify-content: center;
}

.docs-nav,
.docs-toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  max-height: calc(100vh - var(--header-h) - 48px);
  overflow-y: auto;
  font-size: 15px;
  scrollbar-width: thin;
}

.docs-nav p,
.docs-toc p {
  margin: 0 0 12px;
  padding: 0 12px;
  font: 700 17px/1.2 var(--display);
  font-style: italic;
  color: var(--pearl);
}

.docs-nav a,
.docs-toc a {
  display: block;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--muted);
  line-height: 1.35;
  text-decoration: none;
}

.docs-nav a:hover,
.docs-toc a:hover {
  color: var(--text);
  background: rgba(239, 232, 220, 0.06);
}

.docs-nav a.is-active {
  color: var(--pearl-ink);
  font-weight: 600;
  background: linear-gradient(180deg, #fbf6ee, var(--pearl-2));
  box-shadow: 0 2px 0 #8e8577;
}

.docs-toc a {
  padding: 5px 12px;
  font-size: 14px;
}

.docs-toc a.sub {
  padding-left: 24px;
  font-size: 13px;
}

.docs-toc a.is-current {
  color: var(--pearl);
}

.docs-toc:not(.has-items) {
  visibility: hidden;
}

/* the pearl panel itself: dark ink on mother-of-pearl, the most readable surface on the site */
.prose {
  min-width: 0;
  padding: clamp(28px, 4.5vw, 64px);
  border-radius: 26px;
  color: var(--pearl-ink);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.5) 0%, transparent 30%, rgba(214, 205, 230, 0.18) 55%, transparent 75%, rgba(255, 240, 225, 0.4) 100%),
    var(--pearl);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 40px 90px rgba(0, 0, 0, 0.6), inset 0 1px 0 #fff;
  font-size: 17.5px;
  line-height: 1.68;
}

.prose ::selection {
  background: var(--pearl-ink);
  color: var(--pearl);
}

.prose h1 {
  margin-bottom: 0.3em;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--pearl-ink);
}

.prose h2 {
  margin: 2em 0 0.55em;
  font-size: clamp(22px, 2vw, 26px);
  color: var(--pearl-ink);
}

.prose h3 {
  margin: 1.7em 0 0.5em;
  font-size: 21px;
  color: var(--pearl-ink);
}

.prose h4 {
  margin: 1.4em 0 0.4em;
  font: 700 17px/1.3 var(--text-face);
}

.prose p,
.prose ul,
.prose ol {
  max-width: 68ch;
  margin: 0 0 1em;
}

.prose .lead {
  color: var(--pearl-muted);
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose li {
  margin: 0.35em 0;
}

.prose li::marker {
  color: var(--red-ink);
}

.prose a {
  color: var(--red-ink);
  text-decoration-color: rgba(178, 58, 34, 0.4);
}

.prose a:hover {
  text-decoration-color: var(--red-ink);
}

.prose strong {
  color: #000;
}

.prose code {
  background: rgba(28, 23, 21, 0.08);
}

.prose table {
  display: block;
  width: 100%;
  margin: 1.2em 0 1.7em;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
}

.prose th,
.prose td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(28, 23, 21, 0.14);
  text-align: left;
  vertical-align: top;
}

.prose th {
  font-weight: 700;
  border-bottom: 2px solid rgba(28, 23, 21, 0.5);
}

.prose .case {
  margin: 1.6em 0;
}

.prose .callout {
  padding-block: 16px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-block: 1px solid rgba(28, 23, 21, 0.16);
}

.prose .callout::before {
  top: 19px;
}

.prose kbd {
  box-shadow: 0 2px 0 #a59a89, 0 0 0 1px rgba(28, 23, 21, 0.18);
}

.prose .faq summary {
  color: var(--pearl-ink);
}

.prose .faq details {
  border-bottom-color: rgba(28, 23, 21, 0.14);
}

.prose .faq details > :not(summary) {
  color: #3b332e;
}

.prose .index {
  margin: 1.4em 0 2em;
  padding: 0;
  list-style: none;
  border-top: 2px solid rgba(28, 23, 21, 0.5);
}

.prose .index li {
  margin: 0;
  border-bottom: 1px solid rgba(28, 23, 21, 0.14);
}

.prose .index a {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
  gap: 6px 28px;
  padding: 18px 4px;
  color: var(--pearl-ink);
  text-decoration: none;
}

.prose .index a strong {
  font: 700 22px/1.2 var(--display);
}

.prose .index a span {
  color: var(--pearl-muted);
}

.prose .index a:hover strong {
  color: var(--red-ink);
}

@media (max-width: 640px) {
  .prose .index a {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) {
  .reading {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .docs-toc {
    display: none;
  }
}

@media (max-width: 820px) {
  .reading {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 24px;
  }

  .docs-nav {
    position: static;
    max-height: none;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 8px;
  }

  .docs-nav p {
    display: none;
  }

  .docs-nav a {
    flex: none;
    box-shadow: inset 0 0 0 1px rgba(239, 232, 220, 0.18);
  }

  .prose {
    padding: 26px 20px;
    border-radius: 20px;
    font-size: 17px;
  }
}

/* ---------- contact form, on the pearl panel ---------- */

.contact-form {
  display: grid;
  gap: 16px;
  max-width: 620px;
  margin-top: 1.5em;
}

.contact-form label {
  display: grid;
  gap: 6px;
  font-weight: 600;
  font-size: 15px;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 13px 15px;
  border: 0;
  border-radius: 12px;
  color: var(--pearl-ink);
  font: inherit;
  background: #fffdf9;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(28, 23, 21, 0.16);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--red-ink);
  outline-offset: 1px;
}

.contact-form textarea {
  min-height: 170px;
}

.contact-form .btn {
  justify-self: start;
}

/* ---------- 404 ---------- */

.not-found {
  padding-block: clamp(80px, 14vw, 180px);
}

.not-found h1 {
  font-size: clamp(36px, 4.6vw, 62px);
  font-weight: 800;
  color: var(--pearl);
}

.not-found .lead {
  max-width: 32em;
  margin-bottom: 32px;
}

/* ---------- footer: the bass side of the case ---------- */

.site-footer {
  margin-top: clamp(40px, 6vw, 80px);
  color: var(--muted);
  font-size: 15px;
  background:
    linear-gradient(180deg, #ffffff 0, #d3d7db 2px, #8d9298 4px, #2a2c2f 6px, transparent 6px),
    linear-gradient(180deg, #0e0d0d, #070606);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 40px;
  padding-block: 64px 44px;
}

.footer-brand p {
  max-width: 340px;
  margin: 18px 0 0;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-col h4 {
  margin: 0 0 8px;
  font: 700 18px/1.2 var(--display);
  font-style: italic;
  color: var(--pearl);
}

.footer-col a {
  color: var(--muted);
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--pearl);
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-block: 22px 32px;
  border-top: 1px solid rgba(201, 204, 208, 0.14);
  color: var(--faint);
  font-size: 14px;
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

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

@media (max-width: 980px) {
  .hero {
    min-height: auto;
  }

  .hero-body {
    grid-template-columns: 1fr;
  }

  .keyfield {
    --size: clamp(22px, 6.4vw, 54px);
    justify-self: center;
  }
}

@media (max-width: 560px) {
  .bellows {
    --open-h: 86vh;
  }

  .bellows-stage iframe {
    width: calc(100% - 16px);
    border-radius: 12px;
  }
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .bellows-pleats,
  .bellows-stage,
  .key,
  .btn,
  .register {
    transition: none;
  }
}

/* ---------- groups of facts under a chrome rule ---------- */

.groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 48px;
  margin-top: 36px;
}

.group {
  padding-top: 22px;
  border-top: 3px solid transparent;
  border-image: linear-gradient(180deg, #e9ebee, #8b8f95) 1;
}

.group h3 {
  font-size: 24px;
}

.group p {
  color: #cfc6ba;
}

.group .ticks li {
  margin: 8px 0;
}

@media (max-width: 980px) {
  .groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .groups {
    grid-template-columns: 1fr;
  }
}

/* ---------- a chrome rail between sections ---------- */

.rail {
  height: 6px;
  margin: 0;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffffff 0%, #d3d7db 30%, #8d9298 68%, #2a2c2f 100%);
  box-shadow: 0 1px 0 #000, 0 3px 8px rgba(0, 0, 0, 0.6);
}

/* chrome corner guards on the instrument's cases */
.keyfield::after,
.half::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, #e7eaed 0 22px, transparent 22px) top left / 34px 34px no-repeat,
    linear-gradient(225deg, #e7eaed 0 22px, transparent 22px) top right / 34px 34px no-repeat,
    linear-gradient(45deg, #8d9298 0 22px, transparent 22px) bottom left / 34px 34px no-repeat,
    linear-gradient(315deg, #8d9298 0 22px, transparent 22px) bottom right / 34px 34px no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8));
  clip-path: inset(0 round 26px);
}

.half {
  position: relative;
}

/* ---------- phones: tables become stacked rows, labelled from their header ---------- */

@media (max-width: 600px) {
  .compare {
    min-width: 0;
  }

  .table-wrap {
    overflow: visible;
  }

  .compare thead {
    display: none;
  }

  .compare tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 14px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(239, 232, 220, 0.08);
  }

  .compare td {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    text-align: left;
    font-size: 14px;
  }

  .compare td:first-child {
    grid-column: 1 / -1;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--pearl);
  }

  .compare td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    order: 2;
    color: var(--muted);
  }

  .compare td.is-text {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .compare td.is-text::before {
    order: 0;
    font-size: 13px;
  }

  .compare .group {
    display: block;
    padding: 22px 16px 6px;
  }

  .compare .group td {
    padding: 0;
  }

  .compare .col-hl {
    background: none;
  }

  .prose table.stacked {
    display: block;
    overflow: visible;
  }

  .prose table.stacked thead {
    display: none;
  }

  .prose table.stacked tr {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid rgba(28, 23, 21, 0.14);
  }

  .prose table.stacked td {
    display: block;
    padding: 2px 0;
    border: 0;
  }

  .prose table.stacked td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--pearl-muted);
    font-size: 13px;
  }
}

.ico {
  vertical-align: -0.2em;
}

.muted {
  color: var(--muted);
}

.prose .muted {
  color: var(--pearl-muted);
}

/* Personal cabinet and the pages of the web apps (plugins multiuser, subscriptions, accordion_apps) */
.mu-account-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin: 0 0 1.4rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--pearl-3);
}

.prose .mu-account .mu-account-nav a,
.prose .mu-account .mu-account-nav button,
.prose .mu-account .mu-account-inline-form button {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--pearl-3);
  border-radius: 999px;
  background: linear-gradient(180deg, #fffaf2, var(--pearl-2));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), inset 0 1px 0 #fff;
  color: var(--pearl-ink);
  font: 600 14px/1.2 var(--text-face);
  text-decoration: none;
  cursor: pointer;
}

.prose .mu-account .mu-account-nav a:hover,
.prose .mu-account .mu-account-nav button:hover,
.prose .mu-account .mu-account-inline-form button:hover {
  border-color: var(--red-ink);
  color: var(--red-deep);
  filter: none;
}

.mu-account-inline-form {
  display: inline;
  margin: 0;
}

.mu-account-message {
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  background: var(--pearl-2);
}

.mu-account-table {
  width: 100%;
  border-collapse: collapse;
}

.mu-account-table td {
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--pearl-3);
  vertical-align: middle;
}

/* ---------- shop products as plates (shortcode [products]) ---------- */

.plans .sales-products {
  display: contents;
}

.sales-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.sales-product {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  border-radius: 22px;
  background: linear-gradient(180deg, #161413, #0a0909);
  box-shadow: 0 0 0 1px rgba(201, 204, 208, 0.18), 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.sales-product-name {
  margin: 0;
  font: 700 26px/1.1 var(--display);
  color: var(--pearl);
}

.sales-product-text {
  margin: 6px 0 22px;
  color: var(--muted);
  font-size: 15px;
}

.sales-product-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 22px;
}

.sales-product-price strong {
  font: 800 clamp(32px, 2.8vw, 40px)/1 var(--display);
  color: var(--pearl);
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}

.sales-product-price span {
  color: var(--muted);
}

.sales-product-link {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 999px;
  text-align: center;
  font-weight: 600;
  color: #1a1612;
  background: linear-gradient(180deg, #f4efe7, #c9c2b6);
  text-decoration: none;
}

/* ---------- product variants (plugin sales_variants) ---------- */

.sales-variants {
  display: grid;
  gap: 10px;
  max-width: 420px;
  margin: 18px 0;
}

.sales-variant {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  cursor: pointer;
  background: linear-gradient(180deg, #161413, #0a0909);
  box-shadow: 0 0 0 1px rgba(201, 204, 208, 0.18);
}

.sales-variant:has(input:checked) {
  box-shadow: 0 0 0 2px var(--red);
}

.sales-variant-title {
  font-weight: 600;
  color: var(--pearl);
}

.sales-variant-price {
  font: 700 20px/1 var(--display);
  color: var(--pearl);
  white-space: nowrap;
}

.sales-variant-price small {
  font: 400 14px/1 var(--body, inherit);
  color: var(--muted);
}

.sales-variant-buy {
  padding: 14px 18px;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  color: #fff6ef;
  background: radial-gradient(120% 140% at 30% 20%, #c84a30, var(--red) 45%, var(--red-deep));
}

/* ---------- a highlighted note about the zoom ---------- */

.zoom-callout {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 28px;
  border-radius: 22px;
  background: linear-gradient(180deg, #1a1816, #0d0c0b);
  box-shadow: 0 0 0 1px rgba(201, 204, 208, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.zoom-callout svg {
  flex: none;
  width: 56px;
  height: 56px;
  color: var(--pearl);
}

.zoom-callout h3 {
  margin: 0 0 6px;
  font-size: clamp(20px, 1.9vw, 25px);
  color: var(--pearl);
}

.zoom-callout p {
  margin: 0;
  color: #cfc6ba;
}

@media (max-width: 600px) {
  .zoom-callout {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
}

/* ---------- the library of pieces ---------- */

.library-search {
  display: flex;
  gap: 10px;
  margin: 0 0 22px;
}

.library-search input {
  flex: 1;
  min-width: 0;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin: 0 0 22px;
}

.library-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--pearl-ink);
  background: linear-gradient(180deg, #fffaf0, #e8dfcf);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 8px 18px rgba(0, 0, 0, 0.18);
}

.library-card:hover {
  box-shadow: 0 0 0 2px var(--red), 0 8px 18px rgba(0, 0, 0, 0.22);
}

.library-card strong {
  font: 700 19px/1.2 var(--display);
}

.library-card span {
  color: var(--pearl-muted);
  font-size: 15px;
}

.library-card small {
  color: var(--pearl-muted);
  font-size: 13px;
}

.library-pages a,
.library-pages strong {
  display: inline-block;
  min-width: 2em;
  padding: 2px 6px;
  text-align: center;
}

/* ---------- forms: fields sunk into the pearl panel, buttons convex like the instrument's own ---------- */

.prose form p {
  margin: 0 0 16px;
}

.prose label {
  display: grid;
  gap: 6px;
  color: var(--pearl-ink);
  font-weight: 600;
  font-size: 15px;
}

.prose label br {
  display: none;
}

.prose :is(input:not([type]), input[type='text'], input[type='email'], input[type='password'], input[type='tel'], input[type='url'], input[type='search'], input[type='number'], input[type='date'], textarea, select),
.contact-form :is(input, textarea, select) {
  width: 100%;
  max-width: 480px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: #fffdf9;
  color: var(--pearl-ink);
  font: 400 16px/1.4 var(--text-face);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(28, 23, 21, 0.18);
  transition: box-shadow 0.15s;
}

.prose textarea,
.contact-form textarea {
  max-width: 640px;
  min-height: 150px;
  padding: 14px 16px;
  line-height: 1.55;
  resize: vertical;
}

.prose select {
  appearance: none;
  padding-right: 40px;
  background: #fffdf9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235b514a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 14px 9px no-repeat;
}

.prose :is(input, textarea, select):focus,
.contact-form :is(input, textarea, select):focus {
  outline: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 2px var(--red), 0 0 0 5px rgba(182, 58, 34, 0.18);
}

.prose ::placeholder,
.contact-form ::placeholder {
  color: var(--pearl-muted);
  opacity: 0.65;
}

.prose :is(input, textarea, select):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.prose input[type='checkbox'],
.prose input[type='radio'] {
  width: 19px;
  height: 19px;
  margin: 0 8px 0 0;
  accent-color: var(--red);
  vertical-align: -4px;
}

.prose label:has(> input[type='checkbox']),
.prose label:has(> input[type='radio']) {
  display: block;
  font-weight: 500;
  line-height: 1.45;
}

.prose input[type='file'] {
  width: 100%;
  max-width: 480px;
  padding: 8px;
  border-radius: 12px;
  background: #fffdf9;
  color: var(--pearl-muted);
  font: 400 15px/1.3 var(--text-face);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(28, 23, 21, 0.18);
}

.prose input[type='file']::file-selector-button {
  margin-right: 12px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #4a4545, #151312);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: var(--pearl);
  font: 600 14px/1 var(--text-face);
  cursor: pointer;
}

.prose :is(button, input[type='submit'], .button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: radial-gradient(120% 140% at 30% 20%, #c84a30 0%, var(--red) 42%, var(--red-deep) 100%);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.22);
  color: #fff6ef;
  font: 600 16px/1 var(--text-face);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s var(--ease), filter 0.2s;
}

.prose :is(button, input[type='submit'], .button):hover {
  color: #fff;
  filter: brightness(1.07);
}

.prose :is(button, input[type='submit'], .button):active {
  transform: translateY(1px);
}

.prose :is(button, input[type='submit']):focus-visible,
.prose .button:focus-visible {
  outline: 2px solid var(--pearl-ink);
  outline-offset: 3px;
}

.prose :is(button, input[type='submit']):disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

.prose .error,
.prose .mu-account-error {
  padding: 10px 14px;
  border-radius: 10px;
  background: #f6d9d3;
  color: #6f1d12;
}

.contact-form .contact-form-field {
  display: grid;
  gap: 6px;
}

.library-search {
  align-items: stretch;
}

.library-search input {
  max-width: none;
}

@media (max-width: 600px) {
  .prose :is(input:not([type]), input[type='text'], input[type='email'], input[type='password'], input[type='tel'], input[type='url'], input[type='search'], input[type='number'], input[type='date'], textarea, select, input[type='file']) {
    max-width: none;
  }
}

/* ---------- site search ---------- */

.site-search {
  margin: 0 0 24px;
}

.prose .site-search input[type='search'] {
  max-width: none;
  padding: 15px 18px;
  font-size: 18px;
}

.search-result p {
  max-width: none;
  margin: 0 0 12px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffaf0, #eee5d5);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  color: var(--pearl-muted);
  font-size: 15px;
}

.search-result p a {
  font: 700 19px/1.3 var(--display);
}

.search-result img {
  float: left;
  width: 64px;
  height: 64px;
  margin: 0 14px 0 0;
  border-radius: 10px;
  object-fit: cover;
}

/* fields whose label sits above them in its own element (the shop's checkout) */
.prose form > div {
  margin-bottom: 14px;
}

.prose form > div > label + :is(input, select, textarea) {
  margin-top: 6px;
}

/* ---------- a shop product: text on the left, the purchase card on the right ---------- */

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.product-body h2 {
  margin: 1.6em 0 0.5em;
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--pearl);
}

.product-body > h2:first-child {
  margin-top: 0;
}

.product-body .lead {
  margin: 0 0 1.4em;
}

.product-body .groups {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 1em;
}

.product-body .faq {
  max-width: none;
}

.product-body .actions {
  margin-top: 2em;
}

.product-body a:not(.btn) {
  color: var(--pearl);
}

.product-buy {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  padding: 26px;
  border-radius: 22px;
  background: linear-gradient(180deg, #161413, #0a0909);
  box-shadow: 0 0 0 1px rgba(201, 204, 208, 0.22), 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.product-buy .price {
  display: grid;
  gap: 14px;
}

.product-buy .price .icon-price {
  display: none;
}

.product-buy .price > span {
  font: 800 clamp(34px, 3vw, 44px)/1 var(--display);
  color: var(--pearl);
}

.product-buy .price .price-period {
  margin-left: 8px;
  font: 500 17px/1 var(--text-face);
  color: var(--muted);
}

.product-buy .price > button,
.product-buy .sales-variant-buy {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  color: #fff6ef;
  font: 600 17px/1 var(--text-face);
  cursor: pointer;
  background: radial-gradient(120% 140% at 30% 20%, #c84a30 0%, var(--red) 42%, var(--red-deep) 100%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

.product-buy .sales-variants {
  max-width: none;
  margin: 0;
}

.product-buy-note {
  margin: 16px 0 0;
  color: var(--faint);
  font-size: 14px;
}

@media (max-width: 900px) {
  .product-layout {
    grid-template-columns: 1fr;
  }

  .product-buy {
    position: static;
    order: -1;
  }
}

/* the cabinet page you are on */
.prose .mu-account .mu-account-nav a.is-active {
  border-color: var(--red-deep);
  background: radial-gradient(120% 140% at 30% 20%, #c84a30 0%, var(--red) 45%, var(--red-deep) 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff6ef;
}

.prose .mu-account .mu-account-nav a.is-active:hover {
  color: #fff;
}

/* button-bullet lists on the pearl panels: dark text and ebony bullets */
.prose .ticks li {
  color: var(--pearl-ink);
}

.prose .ticks li::before {
  background: radial-gradient(circle at 36% 30%, #4a4545, #151312 62%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.prose .lead {
  color: var(--pearl-muted);
}

/* ---------- close-ups of parts of the apps ---------- */

.shot-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  align-items: start;
}

.shot-pair .case img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 50%;
}

.shot-stack {
  display: grid;
  gap: 18px;
}

.zoom-hands {
  margin: clamp(32px, 5vw, 64px) 0;
}

.zoom-hands h3 {
  font-size: clamp(22px, 2.2vw, 30px);
  color: var(--pearl);
}

.zoom-hands > p {
  max-width: 62ch;
  margin: 0 0 22px;
  color: #cfc6ba;
}

.zoom-hands .shot-pair {
  grid-template-columns: repeat(2, minmax(0, 340px));
  justify-content: start;
}

@media (max-width: 600px) {
  .zoom-hands .shot-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.spacer{height:28px}

.sales-product-points {
  margin: 0 0 22px;
  font-size: 15px;
}

.product-body .card-points {
  display: none;
}

/* ---------- product and plan cards: the same parts line up across all cards of a row ---------- */

@supports (grid-template-rows: subgrid) {
  .plans,
  .sales-products {
    row-gap: 0;
    column-gap: 18px;
  }

  .plans > .plan,
  .plans .sales-product,
  .sales-products > .sales-product {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 0;
    margin-bottom: 18px;
  }

  /* the plan's six parts: name, who for, price, note, list, button */
  .plan > .btn {
    align-self: end;
    margin-top: 0;
  }

  /* the product's parts go to the same rows: name, text, price, list, link */
  .sales-product > .sales-product-name {
    grid-row: 1;
  }

  .sales-product > .sales-product-text {
    grid-row: 2;
  }

  .sales-product > .sales-product-price {
    grid-row: 3;
    align-self: start;
  }

  .sales-product > .sales-product-points {
    grid-row: 5;
  }

  .sales-product > .sales-product-link {
    grid-row: 6;
    margin-top: 0;
    align-self: end;
  }

  .plan > .plan-price,
  .plan > .plan-note {
    align-self: start;
  }
}

.product-body .card-text {
  display: none;
}

/* ---------- language switch ---------- */

.lang-switch {
  display: inline-flex;
  gap: 2px;
  margin-left: 6px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

.lang-switch a,
.lang-switch span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 34px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--muted);
  font: 600 13px/1 var(--text-face);
  text-align: center;
  text-decoration: none;
}

.lang-switch a:hover {
  color: var(--pearl);
}

.lang-switch .is-current {
  color: var(--pearl-ink);
  background: radial-gradient(120% 160% at 30% 15%, #fffaf2 0%, var(--pearl) 40%, var(--pearl-3) 100%);
}

.cookie-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(14, 12, 12, 0.96);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  color: var(--text, #eee);
  font-size: 14px;
  line-height: 1.45;
}

.cookie-bar[hidden] {
  display: none;
}

.cookie-bar p {
  flex: 1;
  margin: 0;
}

.cookie-bar a {
  color: inherit;
  text-decoration: underline;
}

.cookie-bar .btn {
  flex: none;
}

@media (max-width: 560px) {
  .cookie-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
}