.studio-price-card {
  margin-top: 25px;
  max-width: 490px;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid #27221e;
  border-radius: 14px;
  background: #1b1816;
  color: #fff8e9;
  box-shadow: 5px 5px 0 #b4251c;
  scroll-margin-top: 90px;
}
.studio-price-card .studio-price-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; color: #f9ae9e;
  font: 700 12px/1.25 'Barlow', sans-serif;
  letter-spacing: .09em; text-transform: uppercase;
}
.studio-price-top h2 { color: inherit; font: inherit; margin: 0; letter-spacing: inherit; }
.studio-price-top span { color: #e9dbce; font-size: 10px; }
.studio-price-card .studio-price {
  display: flex; align-items: baseline; gap: 8px; margin: 9px 0 14px; color: inherit;
  font: 700 15px/1 'Barlow', sans-serif;
}
.studio-price strong { font: 800 clamp(44px, 5.8vw, 70px)/.94 'Barlow Condensed', sans-serif; }
.studio-price-card .studio-buy {
  min-height: 52px; width: 100%; background: #c5261d; color: #fff; text-decoration: none;
  box-shadow: 0 5px 20px #c5261d33;
}
.studio-price-card .studio-buy:hover { background: #a91d16; }
.studio-price-card .studio-buy-note, .studio-price-card .studio-requirements {
  margin: 12px 0 0; color: #eee0d1; font: 500 14px/1.4 'Barlow', sans-serif;
}
.studio-price-card .studio-requirements { border-top: 1px solid #ffffff32; padding-top: 12px; }
.studio-price-card--final { margin-top: 0; width: 100%; }


.studio-price s { color: #edb8a9; font: 800 clamp(26px, 4vw, 42px)/1 'Barlow Condensed', sans-serif; margin-left: 6px; text-decoration-thickness: .075em; }
.studio-feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px; list-style: none; margin: 0; padding: 0; }
.studio-feature-list li { padding: 7px 9px; border: 1px solid #d9bdb4; border-radius: 8px; background: #fff8ee; color: #211918; font-size: clamp(13px, 1.6vw, 16px); line-height: 1.25; }
.studio-feature-list li span { color: #a52018; font-weight: 800; }
.hero-sub .studio-feature-list strong { color: #211918; font-weight: 800; }
.studio-included {
  margin-top: 14px;
  padding: 12px 15px 14px;
  border: 1px solid #d9bdb4;
  border-left: 4px solid #a52018;
  border-radius: 10px;
  background: #fff2e9;
}
.hero-sub .studio-included-label {
  margin: 0 0 4px;
  color: #a52018;
  font: 800 12px/1.3 'Barlow', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero-sub .studio-included-title {
  margin: 0;
  color: #a52018;
  font: 800 clamp(21px, 2.5vw, 27px)/1.05 'Barlow Condensed', sans-serif;
}
.studio-included-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: #211918;
  font: 600 14px/1.3 'Barlow', sans-serif;
}
.studio-included-list li { display: flex; align-items: center; gap: 7px; }
.studio-included-list li::before {
  content: '';
  flex: 0 0 6px;
  height: 10px;
  border: solid #a52018;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

/* Masterclass invitation. The black ticket sits beside the red purchase action. */
.class-join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 17px;
  border: 1px solid #141414;
  border-radius: 7px;
  background: #141414;
  color: #fff8e9;
  cursor: pointer;
  font: 700 16px/1.2 'Barlow', sans-serif;
  text-align: center;
}
.class-join:hover:not(:disabled) { background: #302824; }
.class-join:disabled { opacity: .7; cursor: progress; }
.class-join:focus-visible { outline: 2px solid #b97c19; outline-offset: 3px; }
.class-sparkle { color: #ffd37e; font-size: 1.18em; line-height: 1; }
.class-invite {
  width: min(100%, 490px);
  padding: 13px 16px;
  border: 1px solid #d6bd92;
  border-left: 3px solid #b97c19;
  border-radius: 9px;
  background: #fff8ee;
  color: #211918;
}
.class-invite--hero { margin-top: 15px; }
.class-invite--final { margin-top: 14px; }
.class-invite p { margin: 0 0 9px; color: #211918; font: 500 15px/1.4 'Barlow', sans-serif; }
.class-invite strong { font-weight: 750; }
.masterclass-invite .class-join { margin-top: 12px; }

#masterclass-dialog.class-dialog {
  width: min(510px, calc(100% - 28px));
  padding: 0;
  border: 1px solid #5b4532;
  border-radius: 18px;
  background: #fff8ee;
  box-shadow: 0 24px 70px #130c0a70;
}
#masterclass-dialog.class-dialog::backdrop { background: #17100dbf; }
.class-dialog-head { position: relative; padding: 27px 32px 23px; background: #1b1715; }
#masterclass-dialog .popup-close { color: #fff8ee; border-radius: 7px; }
#masterclass-dialog .popup-close:focus-visible { outline-color: #ffd37e; }
#masterclass-dialog .class-dialog-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #ffd37e;
  font: 750 12px/1.2 'Barlow', sans-serif;
  letter-spacing: .13em;
}
#masterclass-dialog .class-modal-title {
  margin: 10px 0;
  color: #fff8ee;
  font: 800 clamp(40px, 8vw, 62px)/.94 'Barlow Condensed', sans-serif;
  letter-spacing: -.005em;
}
#masterclass-dialog #popup-description { margin: 0; color: #e9d9c9; font-size: 16px; line-height: 1.4; }
.class-dialog-body { padding: 22px 32px 27px; }
.class-field {
  display: grid;
  gap: 5px;
  margin-bottom: 11px;
  color: #211918;
  font: 700 15px/1.2 'Barlow', sans-serif;
}
.class-field input {
  width: 100%;
  min-height: 44px;
  padding: 8px 11px;
  border: 1px solid #aa9686;
  border-radius: 7px;
  background: #fffdf8;
  color: #211918;
  font: 500 16px/1.3 'Barlow', sans-serif;
}
#masterclass-form .class-join { width: 100%; margin-top: 4px; }
#masterclass-dialog .class-form-note { margin: 9px 0 0; color: #544338; font-size: 13px; line-height: 1.35; }
#masterclass-dialog .class-form-error { margin: 8px 0 0; color: #9b1c13; font-size: 15px; }
#masterclass-confirmation h3 { color: #211918; font: 750 28px/1.1 'Barlow', sans-serif; }
#masterclass-confirmation p { color: #544338; line-height: 1.45; }
@media (max-width: 480px) {
  .class-dialog-head { padding: 22px 20px 17px; }
  .class-dialog-body { padding: 16px 20px 20px; }
  #masterclass-dialog .class-modal-title { font-size: clamp(36px, 10vw, 48px); }
}

.studio-refund {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid #73463d;
  border-radius: 8px;
  background: #35231e;
  color: #fff3e6;
}
.studio-price-card .studio-refund p {
  margin: 0;
  color: inherit;
  font: 700 14px/1.4 'Barlow', sans-serif;
}
.studio-refund a {
  color: #ffb7a6;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.studio-refund small {
  display: block;
  margin-top: 2px;
  color: #efd4c7;
  font: 500 12px/1.4 'Barlow', sans-serif;
}

.studio-showcase {
  padding-block: clamp(52px, 7vw, 100px);
  background: #1b1715;
  color: #fff3e6;
}
.studio-showcase [hidden] { display: none; }
.studio-demo-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(26px, 6vw, 90px);
}
.studio-showcase .studio-showcase-kicker {
  margin: 0 0 10px;
  color: #ffae9e;
  font: 800 13px/1.25 'Barlow', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.studio-showcase h2 {
  margin: 0;
  color: #fff3e6;
  font: 800 clamp(42px, 6vw, 83px)/.9 'Barlow Condensed', sans-serif;
  letter-spacing: -.025em;
}
.studio-showcase h2 em { color: #ffae9e; }
.studio-showcase p { color: #ead7ca; }
.studio-demo-copy > p:not(.studio-showcase-kicker), .studio-styles-heading p:not(.studio-showcase-kicker) {
  max-width: 46ch;
  margin: 16px 0 0;
  font: 500 clamp(16px, 1.8vw, 20px)/1.45 'Barlow', sans-serif;
}
.studio-demo-copy a {
  display: inline-block;
  margin-top: 18px;
  color: #ffae9e;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.studio-command {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #433a37;
  border-radius: 18px;
  background: #1b1918;
}
.studio-command figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 49px;
  padding: 8px 16px;
  border-bottom: 1px solid #37302d;
  background: #211e1d;
  color: #ead7ca;
  font: 600 14px/1.3 'Barlow', sans-serif;
}
.studio-chat-app, .studio-chat-dots { display: inline-flex; align-items: center; gap: 5px; }
.studio-chat-app { gap: 12px; }
.studio-chat-dots i { width: 7px; height: 7px; border-radius: 50%; background: #6c5b53; }
.studio-chat-badge {
  padding: 4px 8px;
  border: 1px solid #83584e;
  border-radius: 20px;
  color: #ffae9e;
  font: 800 10px/1.3 'Barlow', sans-serif;
  letter-spacing: .12em;
}
.studio-chat {
  display: grid;
  gap: 15px;
  padding: clamp(12px, 2.4vw, 24px);
  font: 500 15px/1.38 'Barlow', sans-serif;
}
.studio-chat-turn { min-width: 0; }
.studio-chat-user { justify-self: end; max-width: 100%; }
.studio-chat-bubble {
  padding: 8px 12px;
  border: 1px solid #52413b;
  border-radius: 12px 12px 3px 12px;
  background: #332825;
  color: #fff3e6;
}
.studio-chat-slash code { color: #ffb9ab; font: 700 13px/1.25 ui-monospace, monospace; }
.studio-chat-typing span { display: block; }
.studio-chat-name {
  display: block;
  margin-bottom: 4px;
  color: #ffae9e;
  font: 800 10px/1.3 'Barlow', sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.studio-chat p { margin: 0; }
.studio-chat-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.studio-chat-options li {
  padding: 4px 8px;
  border: 1px solid #56453f;
  border-radius: 14px;
  color: #ead7ca;
  font-size: 12px;
}
.studio-chat-options .studio-chat-choice {
  border-color: #b57161;
  background: #4a2b25;
  color: #ffc1b3;
}
.studio-chat-result {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 10px 12px 10px 14px;
  border: 1px solid #815044;
  border-radius: 10px;
  background: #382622;
}
.studio-chat-result strong { color: #ffc1b3; }
.studio-showcase video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.studio-chat-attachment {
  width: clamp(118px, 28vw, 152px);
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #815044;
  border-radius: 8px;
  background: #1b1715;
}
.studio-command.is-running .studio-chat-attachment {
  animation: studio-clip-pop .36s cubic-bezier(.2,.8,.35,1.18) 5.35s both;
}
@keyframes studio-clip-pop {
  from { opacity: 0; transform: translateY(10px) scale(.91); }
  to { opacity: 1; transform: none; }
}
.studio-chat-motion {
  display: block;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ead7ca;
  font: 600 13px 'Barlow', sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.studio-style-controls button {
  min-height: 44px;
  padding: 5px 11px;
  border: 1px solid #9b7164;
  border-radius: 8px;
  background: #342520;
  color: #fff3e6;
  font: 700 14px/1.15 'Barlow', sans-serif;
  cursor: pointer;
}
.studio-style-controls button:hover { background: #51342c; }
.studio-showcase :is(a,button,[tabindex]):focus-visible {
  outline: 2px solid #ffae9e;
  outline-offset: 3px;
}
.studio-command.is-running .studio-chat-turn { animation: studio-chat-in .3s ease-out var(--delay, 0s) both; }
.studio-command.is-running .studio-chat-turn:nth-child(2) { --delay: 1.45s; }
.studio-command.is-running .studio-chat-turn:nth-child(3) { --delay: 2.75s; }
.studio-command.is-running .studio-chat-turn:nth-child(4) { --delay: 5.2s; }
.studio-command.is-running .studio-chat-slash code {
  display: inline-block;
  animation: studio-chat-type 1s steps(20, end) .1s both;
}
.studio-command.is-running .studio-chat-typing span {
  animation: studio-chat-type 1.3s steps(29, end) 2.9s both;
}
.studio-command.is-running .studio-chat-choice {
  animation: studio-chat-select .15s ease-out 4.3s both;
}
@keyframes studio-chat-select {
  from { border-color: #56453f; background: transparent; color: #ead7ca; }
  to { border-color: #b57161; background: #4a2b25; color: #ffc1b3; }
}
@keyframes studio-chat-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes studio-chat-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.studio-styles {
  margin-top: clamp(45px, 7vw, 95px);
  padding-top: 28px;
  border-top: 1px solid #6c493f;
  scroll-margin-top: 84px;
}
.studio-styles-heading { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.studio-styles-heading h2 { font-size: clamp(38px, 5vw, 70px); }
.studio-style-controls { display: flex; gap: 6px; }
.studio-style-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(164px, 26%, 290px);
  gap: 12px;
  overflow-x: auto;
  padding: 4px 4px 12px;
  margin: 20px 0 0;
  scroll-snap-type: x mandatory;
  scrollbar-color: #936458 #342520;
  list-style: none;
}
.studio-style-track li {
  overflow: hidden;
  border: 1px solid #6c493f;
  border-radius: 11px;
  background: #2b211d;
  scroll-snap-align: start;
}
.studio-style-track .is-current { border-color: #ffae9e; }
.studio-style-track li > a {
  display: block;
  height: 100%;
  color: #fff3e6;
  text-decoration: none;
}
.studio-style-track li > a:focus-visible { outline-offset: -3px; }
.studio-style-caption { display: grid; gap: 3px; padding: 10px 12px; }
.studio-style-caption small { color: #ffae9e; font-size: 13px; }
.studio-style-more { margin: 10px 0 0; font-size: 14px; }
.studio-style-more a { color: #ffae9e; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .studio-demo-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .studio-command.is-running :is(.studio-chat-turn,.studio-chat-slash code,.studio-chat-typing span,.studio-chat-choice,.studio-chat-attachment) { animation: none; }
}
