body.content-studio-page {
  background: #ececea;
}

.content-studio-page .sp-page {
  min-height: calc(100vh - 24px);
}

.content-hero {
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 56px;
  align-items: end;
  padding: 72px 0 62px;
  border-bottom: 1px solid var(--sp-line);
}

.content-hero h1 {
  max-width: 820px;
  margin: 16px 0 0;
  color: #111;
  font: 600 clamp(56px, 6.8vw, 94px)/.86 var(--sp-display);
  letter-spacing: 0;
  text-transform: uppercase;
}

.content-hero-side {
  padding: 26px;
  border-radius: 8px;
  background: #111;
  color: #fff;
}

.content-hero-side p {
  margin: 0 0 24px;
  color: #c5c5c8;
  font-size: 13px;
  line-height: 1.75;
}

.content-hero-side .sp-button {
  border-color: #fff;
  background: #fff;
  color: #111;
}

.content-section {
  padding: 70px 0;
  border-top: 1px solid var(--sp-line);
}

.content-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 440px);
  gap: 44px;
  align-items: end;
  margin-bottom: 34px;
}

.content-heading p:last-child {
  margin: 0;
  color: #5a5a5e;
  font-size: 13px;
  line-height: 1.72;
}

.content-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.content-card {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  background: #fff;
  color: #111;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .035);
}

.content-card-index {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--sp-violet-soft);
  color: #111;
  font: 700 10px var(--sp-mono);
}

.content-card h3 {
  margin: auto 0 10px;
  color: #111;
  font: 600 21px/1 var(--sp-display);
  letter-spacing: 0;
  text-transform: uppercase;
}

.content-card p {
  margin: 0;
  color: #5b5b5f;
  font-size: 12px;
  line-height: 1.65;
}

/* About */
.about-manifesto {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 14px;
}

.about-manifesto > div {
  min-height: 330px;
  padding: 34px;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  background: #fff;
}

.about-manifesto > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--sp-violet-soft);
}

.about-manifesto strong {
  color: #111;
  font: 600 60px/.9 var(--sp-display);
}

.about-manifesto h2 {
  max-width: 520px;
  margin: 0 0 22px;
  font: 600 42px/.95 var(--sp-display);
  text-transform: uppercase;
}

.about-manifesto p {
  color: #535357;
  font-size: 13px;
  line-height: 1.8;
}

.about-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.about-trust div {
  min-height: 145px;
  padding: 24px;
  border-right: 1px solid var(--sp-line);
}

.about-trust div:last-child { border-right: 0; }
.about-trust strong { display: block; margin-top: 35px; font: 600 34px var(--sp-display); }
.about-trust span { color: #626266; font-size: 11px; }

/* Contact */
.contact-topic-grid .content-card {
  background: #fff;
}

.contact-topic-grid .content-card:nth-child(n) {
  color: #111;
}

.contact-topic-grid .content-card:nth-child(n) p,
.contact-topic-grid .content-card:nth-child(n) h3 {
  color: inherit;
}

/* Resource indexes */
.resource-shell .content-hero-side {
  min-height: 224px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.resource-hero-number {
  color: var(--sp-acid);
  font: 600 48px/.9 var(--sp-display);
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.resource-card {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid #d8d8d4;
  border-radius: 8px;
  background: #fff;
  color: #111 !important;
  text-decoration: none;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .035);
}

/* Resource cards are hydrated after the global reveal observer has started. */
.content-studio-page .resource-grid .resource-card {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none;
  background: #fff !important;
}

.resource-card:hover {
  transform: translateY(-3px);
  border-color: #111;
  box-shadow: 0 15px 30px rgba(0, 0, 0, .08);
}

.resource-kicker { color: #652b83 !important; font: 700 10px var(--sp-mono); text-transform: uppercase; }
.resource-card h2 { margin: auto 0 12px; color: #111 !important; font: 600 24px/1 var(--sp-display); letter-spacing: 0; text-transform: uppercase; }
.resource-card p { margin: 0 0 20px; color: #55555a !important; font-size: 12px; line-height: 1.65; }
.resource-meta { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(17, 17, 17, .13); color: #111 !important; font: 700 10px var(--sp-display); }
.resource-state { grid-column: 1 / -1; min-height: 190px; display: grid; place-items: center; border: 1px dashed #aaa; border-radius: 8px; background: #fff; color: #555 !important; }

.compare-workspace { grid-column: 1 / -1; width: 100%; min-width: 0; }
.compare-picker { margin-bottom: 22px; padding: 24px; border: 1px solid var(--sp-line); border-radius: 8px; background: #fff; }
.compare-picker-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 18px; }
.compare-picker-head h2 { margin: 0; font: 600 25px var(--sp-display); text-transform: uppercase; }
.compare-picker-head p { max-width: 470px; margin: 0; color: #5c5c60; font-size: 12px; line-height: 1.6; }
.compare-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.compare-option { min-height: 66px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 12px; border: 1px solid #d6d6d1; border-radius: 7px; background: #f6f6f4; cursor: pointer; }
.compare-option:has(input:checked) { border-color: #111; background: var(--sp-violet-soft); }
.compare-option input { width: 17px; height: 17px; accent-color: #111; }
.compare-option strong { display: block; color: #111; font-size: 12px; }
.compare-option small { display: block; margin-top: 3px; color: #67676b; font-size: 10px; }
.compare-status { min-height: 18px; margin: 12px 0 0; color: #6d2b8e; font-size: 11px; }
.compare-table { grid-column: 1 / -1; width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; border: 1px solid #111; border-radius: 8px; background: #fff; }
.compare-table table { width: 100%; min-width: 720px; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 18px; border-right: 1px solid var(--sp-line); border-bottom: 1px solid var(--sp-line); color: #111 !important; text-align: left; vertical-align: top; }
.compare-table th { width: 155px; background: #111; color: #fff !important; font: 700 10px var(--sp-display); text-transform: uppercase; }
.compare-table td { min-width: 190px; font-size: 12px; line-height: 1.6; }
.compare-table a { color: #111 !important; font: 600 18px var(--sp-display); text-decoration: none; text-transform: uppercase; }
.compare-mobile-list { display: none; }
.compare-mobile-card { padding: 20px; border: 1px solid var(--sp-line); border-radius: 8px; background: #fff; }
.compare-mobile-card-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--sp-line); }
.compare-mobile-card-head span,.compare-mobile-card dt { color: #747478; font: 700 9px var(--sp-display); text-transform: uppercase; }
.compare-mobile-card-head h3 { margin: 4px 0 0; color: #111; font: 600 23px/1 var(--sp-display); text-transform: uppercase; }
.compare-mobile-card-head strong { flex: 0 0 auto; color: #111; font: 600 18px var(--sp-display); }
.compare-mobile-card dl { margin: 0 0 18px; }
.compare-mobile-card dl div { display: grid; grid-template-columns: 82px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--sp-line); }
.compare-mobile-card dt,.compare-mobile-card dd { margin: 0; }
.compare-mobile-card dd { color: #454549; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.compare-mobile-card .sp-button { width: 100%; min-height: 44px; justify-content: center; }
.compare-empty { min-height: 170px; display: grid; place-items: center; color: #666; }
.compare-launch { grid-column: 1 / -1; width: min(760px, 100%); margin: 0 auto; padding: 34px; border: 1px solid var(--sp-line); border-radius: 8px; background: #fff; text-align: center; }
.compare-launch h2 { margin: 10px 0 14px; color: #111; font: 600 38px/.96 var(--sp-display); text-transform: uppercase; }
.compare-launch > p:not(.sp-kicker) { max-width: 560px; margin: 0 auto 22px; color: #5d5d61; font-size: 13px; line-height: 1.7; }
.compare-build-button { margin: 0 auto; }
.compare-type-menu { width: min(560px, 100%); margin: 16px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.compare-type-menu[hidden] { display: none; }
.compare-type-menu a { min-height: 112px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; border: 1px solid #d4d4cf; border-radius: 7px; background: #f4f4f1; color: #111; text-decoration: none; }
.compare-type-menu a:hover { border-color: #111; background: var(--sp-violet-soft); }
.compare-type-menu span { font: 600 24px var(--sp-display); text-transform: uppercase; }
.compare-type-menu small { color: #666; font-size: 11px; line-height: 1.5; }
.compare-result-head { margin-bottom: 14px; display: flex; justify-content: space-between; gap: 20px; align-items: end; }
.compare-result-head h2 { margin: 0; color: #111; font: 600 30px var(--sp-display); text-transform: uppercase; }
.compare-scroll-note { display: none; margin-bottom: 8px; color: #68686c; font-size: 11px; }
.compare-empty-action { grid-column: 1 / -1; min-height: 220px; display: grid; place-items: center; align-content: center; gap: 18px; border: 1px dashed #aaa; border-radius: 8px; background: #fff; color: #555; }

/* Blog and article */
.blog-layout { width: 100%; margin: 0; padding: 0; }
.featured-post { min-height: 370px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; margin: 0 0 28px; border: 1px solid #111; border-radius: 8px; background: #fff; color: #111; text-decoration: none; }
.featured-thumb { position: relative; min-height: 370px; display: grid; place-items: center; background: url('/images/studio-marketplace-panorama.png') center/cover no-repeat; color: #111; }
.featured-thumb > svg { display: none; }
.featured-label { position: absolute; left: 18px; top: 18px; padding: 7px 10px; border-radius: 5px; background: var(--sp-violet); color: #111; font: 700 10px var(--sp-display); }
.featured-body { display: flex; flex-direction: column; justify-content: center; padding: 38px; }
.post-cat { margin-bottom: 15px; color: #672b84; font: 700 10px var(--sp-mono); text-transform: uppercase; }
.featured-body h2 { margin: 0 0 16px; color: #111; font: 600 38px/.96 var(--sp-display); letter-spacing: 0; text-transform: uppercase; }
.featured-body p { margin: 0 0 22px; color: #57575b; font-size: 13px; line-height: 1.7; }
.post-meta { display: flex; flex-wrap: wrap; gap: 14px; color: #6a6a6e; font-size: 10px; }
.featured-read { margin-top: 22px; color: #111; font: 700 11px var(--sp-display); }
.cats-bar { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 22px; }
.cat-pill { min-height: 38px; padding: 0 14px; border: 1px solid #cececa; border-radius: 7px; background: #fff; color: #38383b; font: 700 10px var(--sp-display); cursor: pointer; }
.cat-pill.active, .cat-pill:hover { border-color: #111; background: #111; color: #fff; }
.resource-panel { margin: 0 0 28px; padding: 24px; border: 1px solid var(--sp-line); border-radius: 8px; background: var(--sp-violet-soft); }
.resource-head { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 16px; }
.resource-head h2 { margin: 0; color: #111; font: 600 25px var(--sp-display); text-transform: uppercase; }
.resource-head p { margin: 0; color: #5d5d61; font-size: 11px; }
.cluster-grid, .posts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cluster-card, .post-card { overflow: hidden; border: 1px solid #d9d9d5; border-radius: 8px; background: #fff; color: #111; text-decoration: none; }
.cluster-card { min-height: 180px; padding: 20px; }
.cluster-card h3 { margin: 0 0 10px; color: #111; font: 600 19px var(--sp-display); text-transform: uppercase; }
.cluster-card p, .post-body p { color: #5d5d61; font-size: 12px; line-height: 1.65; }
.cluster-card span { display: block; margin-top: 20px; color: #63287f; font: 700 10px var(--sp-display); }
.post-card:hover, .cluster-card:hover { transform: translateY(-3px); border-color: #111; }
.post-thumb { height: 160px; display: grid; place-items: center; background: #e5e5e1; color: #111; }
.post-body { padding: 20px; }
.post-body h3 { margin: 0 0 10px; color: #111; font: 600 22px/1 var(--sp-display); text-transform: uppercase; }
.post-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sp-line); }
.read-more { color: #111; font: 700 10px var(--sp-display); }
.blog-load-state { min-height: 190px; display: grid; place-items: center; color: #616165; }
.skeleton { border-radius: 6px; background: linear-gradient(90deg, #e5e5e1 25%, #f4f4f1 50%, #e5e5e1 75%); background-size: 300% 100%; animation: content-skeleton 1.3s linear infinite; }
@keyframes content-skeleton { to { background-position: -300% 0; } }

.post-hero { padding: 72px 0 60px; border-bottom: 1px solid var(--sp-line); background: transparent; }
.post-hero-inner { width: min(940px, calc(100% - 72px)); margin: 0 auto; }
.post-back { display: inline-flex; margin-bottom: 30px; color: #55555a; font: 700 11px var(--sp-display); text-decoration: none; }
.post-back:hover { color: #111; }
.post-hero-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 30px; border-radius: 7px; background: var(--sp-violet-soft); }
.post-hero h1 { max-width: 900px; margin: 20px 0; color: #111; font: 600 clamp(48px, 6vw, 78px)/.9 var(--sp-display); letter-spacing: 0; text-transform: uppercase; }
.post-hero p { max-width: 720px; color: #57575b !important; font-size: 14px !important; line-height: 1.75 !important; }
.post-hero-meta { display: flex; flex-wrap: wrap; gap: 14px; color: #68686c; font-size: 10px; }
.post-hero-meta .cat { color: #672b84; }
.post-layout { width: min(940px, calc(100% - 72px)); max-width: none; margin: 0 auto; padding: 56px 0 76px !important; }
.post-content { color: #3f3f43; font-size: 15px; line-height: 1.85; }
.post-content h2 { margin: 42px 0 14px; color: #111; font: 600 34px var(--sp-display); text-transform: uppercase; }
.post-content h3 { margin: 32px 0 12px; color: #111; font: 600 24px var(--sp-display); }
.post-content p { margin: 0 0 20px; }
.post-content a { color: #5d2678; }
.post-content code { padding: 2px 7px; border-radius: 4px; background: #ececea; color: #111; }
.post-content blockquote { margin: 26px 0; padding: 20px 24px; border-left: 4px solid var(--sp-violet); background: #fff; color: #4f4f53; }
.post-toc { margin-bottom: 30px; padding: 22px; border: 1px solid var(--sp-line); border-radius: 8px; background: #fff; }
.post-toc h2 { margin: 0 0 12px; font-size: 21px; }
.post-toc a { display: block; padding: 6px 0; color: #555; font-size: 12px; text-decoration: none; }
.post-divider { margin: 42px 0; border: 0; border-top: 1px solid var(--sp-line); }
.post-cta { padding: 30px; border: 1px solid #111; border-radius: 8px; background: #111; color: #fff; text-align: left; }
.post-cta h3 { margin: 0 0 10px; color: #fff; font: 600 30px var(--sp-display); text-transform: uppercase; }
.post-cta p { color: #c4c4c7; font-size: 12px; }
.loading-post { min-height: 300px; display: grid; place-items: center; color: #666; }

/* Affiliate */
.affiliate-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.affiliate-metric { min-height: 165px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; border: 1px solid var(--sp-line); border-radius: 8px; background: #fff; }
.affiliate-metric:nth-child(2) { background: var(--sp-violet-soft); }
.affiliate-metric strong { font: 600 42px var(--sp-display); }
.affiliate-metric span { color: #5e5e62; font-size: 11px; }
.affiliate-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.affiliate-apply { display: grid; grid-template-columns: .78fr 1.22fr; overflow: hidden; border: 1px solid #111; border-radius: 8px; background: #fff; }
.affiliate-apply-copy { padding: 38px; background: #111; color: #fff; }
.affiliate-apply-copy h2 { margin: 20px 0; color: #fff; font: 600 46px/.95 var(--sp-display); text-transform: uppercase; }
.affiliate-apply-copy p { color: #c6c6c8; font-size: 12px; line-height: 1.7; }
.affiliate-form { padding: 38px; }
.affiliate-form .form-group { margin-bottom: 16px; }
.affiliate-form .form-label { display: block; margin-bottom: 7px; color: #4f4f53; font: 700 10px var(--sp-display); text-transform: uppercase; }
.affiliate-form .form-input, .affiliate-form .form-textarea { width: 100%; border: 1px solid #cececa; border-radius: 7px; background: #f7f7f5; color: #111; }
.affiliate-success { display: none; margin-bottom: 18px; padding: 14px; border: 1px solid #a8c75d; border-radius: 7px; background: #f0ffd0; color: #254c00; font-size: 12px; }
.affiliate-faq { display: grid; grid-template-columns: .7fr 1.3fr; gap: 54px; }
.affiliate-faq .faq-list { border: 0; }

@media (max-width: 1020px) {
  .content-hero, .content-heading, .about-manifesto, .affiliate-apply, .affiliate-faq { grid-template-columns: 1fr; }
  .content-card-grid, .resource-grid, .cluster-grid, .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-trust { grid-template-columns: repeat(2, 1fr); }
  .about-trust div:nth-child(2) { border-right: 0; }
  .about-trust div:nth-child(-n + 2) { border-bottom: 1px solid var(--sp-line); }
  .compare-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .content-hero { width: calc(100% - 32px); min-height: 0; gap: 30px; padding: 44px 0; }
  .content-hero h1 { font-size: 48px; }
  .content-section { padding: 50px 0; }
  .content-heading { gap: 18px; }
  .content-card-grid, .resource-grid, .cluster-grid, .posts-grid, .affiliate-metrics, .affiliate-steps { grid-template-columns: 1fr; }
  .about-trust { grid-template-columns: 1fr; }
  .about-trust div { border-right: 0; border-bottom: 1px solid var(--sp-line); }
  .about-trust div:last-child { border-bottom: 0; }
  .compare-picker { padding: 18px; }
  .compare-picker-head { align-items: flex-start; flex-direction: column; }
  .compare-options { grid-template-columns: 1fr; }
  .compare-table { display: block; width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .compare-table table { min-width: 760px; }
  .compare-table td { scroll-snap-align: start; }
  .compare-mobile-list { display: none; }
  .compare-launch { padding: 24px 18px; }
  .compare-launch h2 { font-size: 31px; }
  .compare-type-menu { grid-template-columns: 1fr; }
  .compare-result-head { align-items: stretch; flex-direction: column; }
  .compare-result-head .sp-button { width: 100%; justify-content: center; }
  .compare-scroll-note { display: block; }
  .featured-post { grid-template-columns: 1fr; }
  .featured-thumb { min-height: 220px; }
  .featured-body { padding: 24px; }
  .featured-body h2 { font-size: 30px; }
  .post-hero-inner, .post-layout { width: calc(100% - 32px); }
  .post-hero { padding: 48px 0 40px; }
  .post-hero h1 { font-size: 45px; }
  .affiliate-apply-copy, .affiliate-form { padding: 26px; }
}