/* Final component contract shared by the home page and all landing pages. */
:root {
  --ref-section: clamp(36px, 3.2vw, 52px);
  --ref-heading-gap: clamp(20px, 2vw, 28px);
  --ref-panel-pad: clamp(24px, 3vw, 38px);
  --ref-panel-border: rgb(246 201 77 / 22%);
}

/* ========================================================================== 
   Stable release contract
   One spacing, heading and card system for the home page and every subpage.
   This block intentionally comes last and resolves legacy page overrides.
   ========================================================================== */
:root {
  --release-width: 1180px;
  --release-gutter: clamp(14px, 2vw, 24px);
  --release-gap: clamp(16px, 2vw, 24px);
  --release-pad: clamp(20px, 2.4vw, 32px);
  --release-radius: 24px;
  --release-panel: linear-gradient(145deg, rgb(29 27 22 / 97%), rgb(22 21 18 / 98%));
  --release-border: rgb(246 194 57 / 28%);
  --release-note: rgb(39 36 29 / 96%);
}

html { scroll-padding-top: 82px; }
body { overflow-x: clip; }

body .header,
body .header--internal {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: min(var(--release-width), calc(100% - 2 * var(--release-gutter))) !important;
  min-height: 64px !important;
  margin: 0 auto !important;
  padding: 10px 16px !important;
  border: 1px solid var(--release-border) !important;
  border-top: 0 !important;
  border-radius: 0 0 18px 18px !important;
  background: rgb(20 18 13 / 94%) !important;
  backdrop-filter: blur(18px) !important;
}

body .logo,
body .header .logo,
body .header--internal .logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  text-transform: lowercase !important;
}

body .logo__mark,
body .header .logo__mark,
body .header--internal .logo__mark {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  background: url("favicon.svg") center / contain no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
}

main#main-content,
.landing-main {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--release-gap) !important;
  padding-bottom: var(--release-gap) !important;
}

#main-content > .hero,
.landing-main > .landing-hero {
  width: min(var(--release-width), calc(100% - 2 * var(--release-gutter))) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 22px 0 0 !important;
}

#main-content > .section:not(.hero),
.landing-main > section:not(.landing-hero):not(.landing-value):not(.closing) {
  width: min(var(--release-width), calc(100% - 2 * var(--release-gutter))) !important;
  margin: 0 auto !important;
  padding: var(--release-pad) !important;
  border: 1px solid var(--release-border) !important;
  border-radius: var(--release-radius) !important;
  background: var(--release-panel) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%), 0 18px 45px rgb(0 0 0 / 12%) !important;
}

.landing-main > .landing-value,
.landing-main > .closing {
  width: min(var(--release-width), calc(100% - 2 * var(--release-gutter))) !important;
  margin: 0 auto !important;
}

h1,
.hero h1,
.landing-hero h1 { font-size: 44px !important; line-height: 1.04 !important; letter-spacing: -.035em !important; }
h2,
.section h2,
.landing-main h2 { font-size: 36px !important; line-height: 1.08 !important; letter-spacing: -.03em !important; }

.label,
.section .label,
.landing-main .label {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  min-height: 30px !important;
  margin: 0 0 14px !important;
  padding: 6px 12px !important;
  border: 1px solid rgb(255 232 164 / 62%) !important;
  border-radius: 999px !important;
  background: #ffd45a !important;
  color: #18140c !important;
  box-shadow: 0 8px 22px rgb(225 166 12 / 20%) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.section-heading,
.section-heading--split,
.studio__heading,
.design-lab__intro,
.landing-proof__heading,
.landing-demo__heading,
.landing-context__heading,
.landing-uses__heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(230px, .52fr) !important;
  grid-template-rows: auto auto !important;
  align-items: end !important;
  gap: 8px 28px !important;
  width: 100% !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
}

.section-heading > .label,
.studio__heading > .label,
.design-lab__intro > .label,
.landing-proof__heading > .label,
.landing-demo__heading > .label,
.landing-context__heading > .label,
.landing-uses__heading > .label {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.section-heading > h2,
.studio__heading > h2,
.design-lab__intro > h2,
.landing-proof__heading > h2,
.landing-demo__heading > h2,
.landing-context__heading > h2,
.landing-uses__heading > h2 {
  grid-column: 1 !important;
  grid-row: 2 !important;
  margin: 0 !important;
}

.section-heading > p:not(.label),
.studio__heading > p:not(.label),
.design-lab__intro > p:not(.label),
.landing-proof__heading > p:not(.label),
.landing-demo__heading > p:not(.label),
.landing-context__heading > p:not(.label),
.landing-uses__heading > p:not(.label),
.landing-proof__note,
.landing-note {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: end !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  border: 1px solid var(--release-border) !important;
  border-radius: 16px !important;
  background: var(--release-note) !important;
  color: #d7d0c3 !important;
  line-height: 1.55 !important;
}

.landing-main > section.landing-steps {
  background: linear-gradient(145deg, #ffd65b, #f1bc37) !important;
  color: #17130b !important;
  border-color: rgb(255 235 172 / 78%) !important;
}

.landing-steps > .label {
  margin-bottom: 14px !important;
  background: #1c1810 !important;
  color: #ffe27f !important;
  border-color: #1c1810 !important;
  box-shadow: none !important;
}

.landing-steps > h2 { margin: 0 0 22px !important; color: #17130b !important; }
.landing-steps > ol,
.steps,
.step-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}

.landing-steps li,
.steps li,
.step-list li {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 94px !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 1px solid rgb(23 19 11 / 20%) !important;
  border-radius: 18px !important;
  background: rgb(255 246 214 / 30%) !important;
  color: #17130b !important;
}

.landing-proof__grid,
.landing-demo__grid,
.landing-context__grid,
.landing-uses__grid {
  align-items: stretch !important;
  gap: 14px !important;
}

.landing-proof__card,
.landing-demo__card,
.landing-context__card,
.landing-uses__card {
  min-height: 0 !important;
  padding: 18px !important;
  border: 1px solid var(--release-border) !important;
  border-radius: 18px !important;
  background: rgb(30 28 23 / 92%) !important;
}

.landing-proof__media,
.landing-demo__media,
.landing-context__media,
.landing-uses__media {
  width: 100% !important;
  margin-top: 18px !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.landing-proof__media img,
.landing-demo__media img,
.landing-context__media img,
.landing-uses__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.faq,
.landing-faq {
  display: block !important;
  width: min(var(--release-width), calc(100% - 2 * var(--release-gutter))) !important;
}

.faq > .section-heading,
.landing-faq > .section-heading,
.landing-faq > .label {
  margin-bottom: 14px !important;
}

.faq__list,
.landing-faq__list,
.landing-faq > div:last-child {
  width: 100% !important;
  max-width: none !important;
  margin: 22px 0 0 !important;
}

.faq details,
.landing-faq details {
  margin: 0 0 10px !important;
  border: 1px solid var(--release-border) !important;
  border-radius: 14px !important;
  background: rgb(35 32 26 / 94%) !important;
}

.motion-demo-card__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-height: 44px !important;
  padding: 6px 16px 6px 7px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
.motion-demo-card__button .motion-demo-card__label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 0 4px !important;
  border-radius: 0 999px 999px 0 !important;
  text-align: center !important;
}

.design-suite__post img,
.design-suite__post picture,
.design-lab__post img { object-fit: contain !important; object-position: center !important; }

.button,
button,
a[class*="button"] {
  border-radius: 14px !important;
}

@media (max-width: 760px) {
  :root {
    --release-gutter: 14px;
    --release-gap: 14px;
    --release-pad: 18px;
    --release-radius: 20px;
  }

  html { scroll-padding-top: 72px; }
  body .header,
  body .header--internal {
    min-height: 58px !important;
    padding: 8px 10px !important;
    border-radius: 0 0 14px 14px !important;
  }
  body .logo,
  body .header .logo,
  body .header--internal .logo { font-size: 14px !important; gap: 7px !important; }
  body .logo__mark,
  body .header .logo__mark,
  body .header--internal .logo__mark { width: 30px !important; height: 30px !important; flex-basis: 30px !important; }

  #main-content > .hero,
  .landing-main > .landing-hero { padding-top: 14px !important; }
  h1,
  .hero h1,
  .landing-hero h1 { font-size: 30px !important; line-height: 1.08 !important; }
  h2,
  .section h2,
  .landing-main h2 { font-size: 26px !important; line-height: 1.12 !important; }

  .section-heading,
  .section-heading--split,
  .studio__heading,
  .design-lab__intro,
  .landing-proof__heading,
  .landing-demo__heading,
  .landing-context__heading,
  .landing-uses__heading {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
  }
  .section-heading > .label,
  .section-heading > h2,
  .section-heading > p:not(.label),
  .studio__heading > *,
  .design-lab__intro > *,
  .landing-proof__heading > *,
  .landing-demo__heading > *,
  .landing-context__heading > *,
  .landing-uses__heading > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .section-heading > p:not(.label),
  .studio__heading > p:not(.label),
  .design-lab__intro > p:not(.label),
  .landing-proof__heading > p:not(.label),
  .landing-demo__heading > p:not(.label),
  .landing-context__heading > p:not(.label),
  .landing-uses__heading > p:not(.label) { margin-top: 6px !important; padding: 14px !important; }

  .landing-steps > ol,
  .steps,
  .step-list { grid-template-columns: 1fr !important; gap: 10px !important; }
  .landing-steps li,
  .steps li,
  .step-list li { min-height: 0 !important; padding: 15px !important; }

  .landing-proof__grid,
  .landing-demo__grid,
  .landing-context__grid,
  .landing-uses__grid { grid-template-columns: 1fr !important; }

  .landing-proof__card,
  .landing-demo__card,
  .landing-context__card,
  .landing-uses__card { padding: 16px !important; }

  .landing-hero__content,
  .landing-hero__visual { min-width: 0 !important; }
  .landing-hero__visual { margin-top: 4px !important; }
  .hero__actions,
  .landing-hero__actions { gap: 10px !important; margin-bottom: 2px !important; }
}

/* Keep text notes inside their section shells at the narrowest viewport. */
.section-heading > p,
.studio__heading > p,
.design-lab__intro > p,
.landing-proof__heading > p,
.landing-demo__heading > p,
.landing-context__heading > p,
.landing-uses__heading > p,
.landing-proof__note,
.landing-note {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.header,
.header--internal {
  position: sticky !important;
  z-index: 1000 !important;
  top: 0 !important;
  height: 68px !important;
  min-height: 68px !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  backdrop-filter: blur(18px);
}

.logo {
  height: 46px !important;
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.logo__mark {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  background: url("favicon.svg") center / 36px 36px no-repeat !important;
}

.hero {
  padding-top: 24px !important;
  padding-bottom: 28px !important;
  gap: 22px !important;
}

.hero__copy > .label { margin: 0 0 18px !important; }

.hero h1,
.landing-hero h1 {
  margin: 0 !important;
  font-size: 44px !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em !important;
  text-wrap: balance;
}

.hero__description { margin-top: 18px !important; }

.hero__actions {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  gap: 14px !important;
}

.hero__facts { margin-top: 20px !important; }
.hero__visual { margin-top: 0 !important; }

.section {
  padding-top: var(--ref-section) !important;
  padding-bottom: var(--ref-section) !important;
}

main > .section + .section { padding-top: var(--ref-section) !important; }

main > .section,
main > .ticker {
  box-sizing: border-box;
}

.ticker {
  margin-top: 10px !important;
  margin-bottom: 18px !important;
}

/* Home-page sections share one visible grid instead of floating in empty space. */
.features,
.studio,
.examples,
.use-cases,
.principles,
.faq {
  width: min(var(--max-width), calc(100% - 48px)) !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  padding: var(--ref-panel-pad) !important;
  border: 1px solid var(--ref-panel-border) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 100% 0, rgb(246 201 77 / 7%), transparent 32%),
    rgb(25 23 18 / 72%) !important;
}

.story,
.comparison,
.object-edit,
.merge,
.motion,
.design-lab,
.closing {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

.section-heading {
  margin-bottom: var(--ref-heading-gap) !important;
  row-gap: 12px !important;
  max-width: none !important;
  margin-inline: 0 !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.section-heading--split {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .62fr) !important;
  grid-template-areas: "label note" "title note" !important;
  align-items: end !important;
  gap: 10px clamp(24px, 3vw, 44px) !important;
}

.section-heading--split > .label { grid-area: label; }
.section-heading--split > h2 { grid-area: title; }
.section-heading--split > p:last-child {
  grid-area: note;
  max-width: 430px !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  border: 1px solid rgb(246 201 77 / 16%) !important;
  border-radius: 16px !important;
  background: rgb(246 201 77 / 5%) !important;
}

.studio__heading,
.design-lab__intro {
  max-width: none !important;
  margin: 0 0 var(--ref-heading-gap) !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.studio__heading p:last-child,
.design-lab__intro p:last-child {
  max-width: 680px !important;
  margin-top: 12px !important;
}

.section-heading > .label,
.studio__heading > .label,
.design-lab__intro > .label,
.object-edit__copy > .label,
.motion__copy > .label,
.principles > .label,
.faq .section-heading > .label {
  position: static !important;
  width: fit-content !important;
  margin: 0 0 16px !important;
  align-self: flex-start !important;
  justify-self: start !important;
}

.section-heading h2,
.studio__heading h2,
.design-lab__intro h2,
.object-edit__copy h2,
.motion__copy h2,
.principles h2,
.faq h2,
.landing-page h2 {
  margin: 0 !important;
  font-size: 36px !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}

.use-cases .section-heading {
  width: min(100%, 760px) !important;
  margin-inline: 0 !important;
}

.features .feature-grid,
.studio .studio__workspace,
.examples .gallery,
.use-cases .use-case-list,
.principles ul,
.faq .faq__list {
  margin-top: 0 !important;
}

.features .feature-grid,
.examples .gallery,
.use-cases .use-case-list {
  padding-top: 0 !important;
}

.principles {
  text-align: left !important;
}

.principles > .label {
  margin-bottom: 14px !important;
}

.principles ul {
  margin-top: var(--ref-heading-gap) !important;
}

.faq {
  display: grid !important;
  grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr) !important;
  align-items: start !important;
  gap: clamp(28px, 4vw, 56px) !important;
}

.faq .section-heading {
  margin: 0 !important;
  align-self: start !important;
}

.faq .section-heading > .label {
  align-self: flex-start !important;
}

.faq__list details {
  background: rgb(246 201 77 / 4%) !important;
}

.use-case-list .use-case {
  min-height: 178px !important;
  padding: 28px 92px 28px 28px !important;
  display: flex !important;
  position: relative !important;
  align-items: flex-start !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0 !important;
}

.use-case > span {
  position: static !important;
  width: auto !important;
  margin: 0 0 20px !important;
  display: block !important;
  align-self: auto !important;
  color: #c7bfae !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.use-case > h3 {
  margin: 0 0 10px !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
}

.use-case > p {
  margin: 0 !important;
  color: #b9b3a8 !important;
  font-size: 15px !important;
  line-height: 1.48 !important;
}

.use-case__icon {
  position: absolute !important;
  top: 26px !important;
  right: 26px !important;
  width: 52px !important;
  height: 52px !important;
  padding: 14px !important;
}

/* Landing pages: a predictable two-column hero and one section-heading pattern. */
.landing-main > section { scroll-margin-top: 82px; }

.landing-hero {
  width: min(var(--max-width), calc(100% - 48px)) !important;
  min-height: auto !important;
  padding: 58px 0 64px !important;
  display: grid !important;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: clamp(36px, 5vw, 64px) !important;
  text-align: left !important;
}

.landing-hero > div:first-child {
  width: 100% !important;
  align-items: flex-start !important;
}

.landing-hero > div:first-child > .label { margin: 0 0 18px !important; }

.landing-hero__lead {
  max-width: 560px !important;
  margin: 22px 0 0 !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
}

.landing-hero .hero__actions {
  margin-top: 26px !important;
  justify-content: flex-start !important;
}

.landing-hero__visual {
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 !important;
  justify-self: end !important;
}

.landing-hero__visual img {
  width: 100% !important;
  height: auto !important;
  max-height: 470px !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.landing-value { margin-top: 0 !important; }

.landing-proof,
.landing-steps,
.landing-demo,
.landing-uses,
.landing-context,
.landing-faq {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.landing-proof,
.landing-demo,
.landing-uses,
.landing-context {
  padding-top: var(--ref-section) !important;
  padding-bottom: var(--ref-section) !important;
}

.landing-steps,
.landing-faq {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.landing-steps,
.landing-demo,
.landing-uses,
.landing-context,
.landing-faq {
  padding: clamp(34px, 4vw, 52px) !important;
}

.landing-proof__heading,
.landing-demo__heading,
.landing-uses__heading,
.landing-context__heading {
  margin-bottom: var(--ref-heading-gap) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .62fr) !important;
  grid-template-areas: "label note" "title note" !important;
  align-items: start !important;
  gap: 14px clamp(28px, 4vw, 52px) !important;
  text-align: left !important;
}

.landing-proof__heading > .label,
.landing-demo__heading > .label,
.landing-uses__heading > .label,
.landing-context__heading > .label {
  grid-area: label;
  position: static !important;
  margin: 0 !important;
  justify-self: start !important;
}

.landing-proof__heading > h2,
.landing-demo__heading > h2,
.landing-uses__heading > h2,
.landing-context__heading > h2 { grid-area: title; }

.landing-proof__heading > p:last-child,
.landing-demo__heading > p:last-child,
.landing-uses__heading > p:last-child {
  grid-area: note;
  max-width: 430px !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  align-self: end !important;
  border: 1px solid rgb(255 205 81 / 22%) !important;
  border-radius: 16px !important;
  background: #2a251b !important;
  color: #d1c8b8 !important;
}

.landing-steps > .label,
.landing-faq > .label {
  position: static !important;
  width: fit-content !important;
  margin: 0 0 18px !important;
}

.landing-steps > h2,
.landing-faq > h2 { margin: 0 !important; }

.landing-steps ol { margin-top: 30px !important; }

.landing-proof__grid { gap: 16px !important; }

.landing-proof__card,
[class*="landing-page--"] .landing-proof__card:nth-child(n) {
  min-height: 0 !important;
  padding: 22px !important;
}

.landing-proof__card h3 { margin: 0 0 10px !important; }

.landing-proof__media,
[class*="landing-page--"] .landing-proof__card:nth-child(n) .landing-proof__media {
  width: 100% !important;
  margin: 20px 0 0 !important;
  aspect-ratio: 16 / 10 !important;
}

.landing-proof__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.landing-demo__workspace {
  margin-top: 0 !important;
  align-items: stretch !important;
}

.landing-demo__prompt p {
  padding: 22px !important;
  font-size: 17px !important;
  line-height: 1.42 !important;
}

.landing-faq {
  width: min(var(--max-width), calc(100% - 48px)) !important;
}

.motion-demo-card__button {
  min-height: 44px !important;
  padding: 7px 16px 7px 9px !important;
  border-radius: 999px !important;
  border-color: #ffd158 !important;
  background: linear-gradient(135deg, #ffd65a, #ffad38) !important;
  color: #17130b !important;
}

.motion-demo-card__button > span[aria-hidden="true"] {
  background: #17130b !important;
  color: #ffd158 !important;
}

@media (max-width: 900px) {
  :root {
    --ref-section: 38px;
    --ref-panel-pad: 24px;
  }

  .section-heading--split {
    grid-template-columns: 1fr !important;
    grid-template-areas: "label" "title" "note" !important;
  }

  .section-heading--split > p:last-child {
    max-width: 680px !important;
  }

  .faq {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .landing-hero {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    text-align: center !important;
  }

  .landing-hero > div:first-child { align-items: center !important; }
  .landing-hero .hero__actions { justify-content: center !important; }
  .landing-hero__visual { justify-self: center !important; }

  .landing-proof__heading,
  .landing-demo__heading,
  .landing-uses__heading,
  .landing-context__heading {
    grid-template-columns: 1fr !important;
    grid-template-areas: "label" "title" "note" !important;
  }

  .landing-proof__heading > p:last-child,
  .landing-demo__heading > p:last-child,
  .landing-uses__heading > p:last-child {
    max-width: 680px !important;
    align-self: start !important;
  }
}

@media (max-width: 620px) {
  :root {
    --ref-section: 30px;
    --ref-heading-gap: 20px;
    --ref-panel-pad: 18px;
  }

  .header,
  .header--internal {
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 8px 14px !important;
  }

  .header .logo,
  .header--internal .logo {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 15px !important;
  }

  .header .logo__mark,
  .header--internal .logo__mark {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
    background-size: 34px 34px !important;
  }

  .hero {
    padding-top: 20px !important;
    padding-bottom: 24px !important;
    gap: 18px !important;
  }

  .hero h1,
  .landing-hero h1 {
    font-size: 30px !important;
    line-height: 1.08 !important;
  }

  .hero__description,
  .landing-hero__lead {
    margin-top: 18px !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  .hero__actions {
    margin-top: 18px !important;
    gap: 12px !important;
  }

  .hero__facts {
    margin-top: 20px !important;
    gap: 10px !important;
  }

  .section-heading h2,
  .studio__heading h2,
  .design-lab__intro h2,
  .object-edit__copy h2,
  .motion__copy h2,
  .principles h2,
  .faq h2,
  .landing-page h2 {
    font-size: 26px !important;
    line-height: 1.12 !important;
  }

  .use-case-list .use-case {
    min-height: 156px !important;
    padding: 22px 76px 22px 22px !important;
  }

  .features,
  .studio,
  .examples,
  .use-cases,
  .principles,
  .faq {
    width: min(100% - 28px, var(--max-width)) !important;
    margin-bottom: 12px !important;
    padding: var(--ref-panel-pad) !important;
    border-radius: 22px !important;
  }

  .story,
  .comparison,
  .object-edit,
  .merge,
  .motion,
  .design-lab,
  .closing {
    margin-bottom: 12px !important;
  }

  .ticker {
    width: min(100% - 28px, var(--max-width)) !important;
    margin-top: 6px !important;
    margin-bottom: 12px !important;
  }

  .section-heading--split > p:last-child {
    padding: 14px !important;
  }

  .use-case > span { margin-bottom: 15px !important; }
  .use-case > h3 { font-size: 22px !important; }
  .use-case__icon {
    top: 20px !important;
    right: 20px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 12px !important;
  }

  .landing-hero {
    width: min(100% - 28px, var(--max-width)) !important;
    padding: 34px 0 48px !important;
    gap: 28px !important;
  }

  .landing-hero__visual { max-width: 520px !important; }
  .landing-hero__visual img { max-height: 360px !important; }

  .landing-proof,
  .landing-steps,
  .landing-demo,
  .landing-uses,
  .landing-context,
  .landing-faq {
    width: min(100% - 28px, var(--max-width)) !important;
  }

  .landing-steps,
  .landing-demo,
  .landing-uses,
  .landing-context,
  .landing-faq {
    padding: 26px 18px !important;
  }

  .landing-proof__heading,
  .landing-demo__heading,
  .landing-uses__heading,
  .landing-context__heading {
    gap: 12px !important;
  }

  .landing-proof__heading > p:last-child,
  .landing-demo__heading > p:last-child,
  .landing-uses__heading > p:last-child {
    padding: 16px !important;
  }

  .landing-steps > .label,
  .landing-faq > .label,
  .landing-proof__heading > .label,
  .landing-demo__heading > .label,
  .landing-uses__heading > .label,
  .landing-context__heading > .label {
    margin-bottom: 14px !important;
  }

  .landing-proof__grid { grid-template-columns: 1fr !important; }
  .landing-proof__card { padding: 18px !important; }
  .landing-proof__media { margin-top: 16px !important; }
}

/* Final visual contract — shared by the home page and every internal route. */
:root {
  --ui-gutter: clamp(14px, 2.2vw, 24px);
  --ui-section-gap: clamp(18px, 2.2vw, 28px);
  --ui-section-pad: clamp(22px, 3vw, 36px);
  --ui-radius: 26px;
  --ui-border: rgb(255 204 73 / 24%);
  --ui-panel: linear-gradient(145deg, rgb(31 29 23 / 96%), rgb(20 19 16 / 98%));
  --ui-note: rgb(255 255 255 / 4%);
}

html { scroll-padding-top: 82px !important; }

body .header,
body .header--internal {
  width: min(var(--max-width), calc(100% - (2 * var(--ui-gutter)))) !important;
  margin-inline: auto !important;
  border-bottom: 1px solid var(--ui-border) !important;
}

body .logo__mark {
  border-radius: 10px !important;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 18%), 0 8px 22px rgb(244 183 13 / 18%) !important;
}

#main-content,
.landing-main {
  gap: var(--ui-section-gap) !important;
  overflow: clip !important;
}

/* Do not leave a second invisible header-sized gap above a hero. */
#main-content > .hero,
.landing-main > .landing-hero {
  margin-top: 0 !important;
  padding-top: clamp(18px, 2.2vw, 28px) !important;
  padding-bottom: 8px !important;
  position: relative !important;
  isolation: isolate !important;
}

.landing-hero {
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr) !important;
  gap: clamp(30px, 4vw, 54px) !important;
  align-items: center !important;
}

.landing-hero > div:first-child {
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
}

.landing-hero__visual {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
}

.landing-hero__visual img {
  width: 100% !important;
  max-height: 520px !important;
  object-fit: cover !important;
}

/* One shell and one rhythm for all content sections. */
#main-content > .section:not(.hero),
.landing-main > section:not(.landing-hero):not(.closing) {
  width: min(var(--max-width), calc(100% - (2 * var(--ui-gutter)))) !important;
  margin: 0 auto !important;
  padding: var(--ui-section-pad) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-panel) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%), 0 16px 48px rgb(0 0 0 / 12%) !important;
}

.landing-main > .landing-value {
  width: min(var(--max-width), calc(100% - (2 * var(--ui-gutter)))) !important;
  margin: 0 auto !important;
}

/* Every section intro follows the same alignment contract. */
.section-heading--split,
.design-lab__intro,
.landing-proof__heading,
.landing-demo__heading,
.landing-uses__heading,
.landing-context__heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) !important;
  grid-template-areas: "label note" "title note" !important;
  align-items: end !important;
  column-gap: clamp(24px, 4vw, 64px) !important;
  row-gap: 12px !important;
  min-height: 0 !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
  position: relative !important;
  transform: none !important;
}

.section-heading--split > .label,
.design-lab__intro > .label,
.landing-proof__heading > .label,
.landing-demo__heading > .label,
.landing-uses__heading > .label,
.landing-context__heading > .label { grid-area: label !important; }

.section-heading--split > h2,
.design-lab__intro > h2,
.landing-proof__heading > h2,
.landing-demo__heading > h2,
.landing-uses__heading > h2,
.landing-context__heading > h2 {
  grid-area: title !important;
  margin: 0 !important;
}

.section-heading--split > p:last-child,
.design-lab__intro > p:last-child,
.landing-proof__heading > p:last-child,
.landing-demo__heading > p:last-child,
.landing-uses__heading > p:last-child {
  grid-area: note !important;
  align-self: end !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 15px 17px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 15px !important;
  background: var(--ui-note) !important;
  color: #c8c1b6 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  opacity: 1 !important;
  position: static !important;
  transform: none !important;
}

/* Labels sit in the same top-left position and never merge into headings. */
.label,
.landing-steps > .label,
.landing-faq > .label {
  width: fit-content !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 14px !important;
  padding: 6px 12px !important;
  border: 1px solid rgb(255 214 103 / 56%) !important;
  border-radius: 999px !important;
  background: #17140d !important;
  color: #ffd45b !important;
  box-shadow: 0 8px 20px rgb(0 0 0 / 14%) !important;
  line-height: 1 !important;
}

.landing-steps > h2,
.landing-faq > h2 {
  margin: 0 0 24px !important;
}

.landing-steps > ol {
  margin: 0 !important;
  padding: 0 !important;
  gap: 14px !important;
}

.landing-steps > ol > li {
  min-height: 92px !important;
  padding: 20px 22px !important;
  border: 1px solid rgb(23 21 15 / 18%) !important;
  border-radius: 18px !important;
  background: rgb(255 255 255 / 18%) !important;
  color: #17150f !important;
}

.landing-faq { padding-top: var(--ui-section-pad) !important; }
.landing-faq > .label { margin-bottom: 16px !important; }
.landing-faq details { border-color: var(--ui-border) !important; }

/* Keep proof cards compact and aligned instead of leaving dead vertical space. */
.landing-proof__grid { align-items: stretch !important; gap: 14px !important; }
.landing-proof__card { min-height: 0 !important; padding: 18px !important; }
.landing-proof__card > p { min-height: 48px !important; }
.landing-proof__media { margin-top: 16px !important; }

/* Motion controls: equal pills, centered text, rounded at both ends. */
.motion-demo-card__button {
  width: auto !important;
  max-width: calc(100% - 18px) !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 5px 14px 5px 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ffd65a, #ffad38) !important;
}

.motion-demo-card__button > span[aria-hidden="true"] {
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
}

.motion-demo-card__button .motion-demo-card__label {
  min-width: 0 !important;
  padding: 0 4px !important;
  text-align: center !important;
  line-height: 1.15 !important;
  border-radius: 999px !important;
}

/* The 4:5 post must show the complete product, not crop the bottle. */
.design-suite__post img {
  object-fit: contain !important;
  object-position: center !important;
  background: #15120d !important;
}

.design-suite__post::after { opacity: .52 !important; }
.design-suite__post strong { z-index: 3 !important; }

@media (max-width: 900px) {
  .landing-hero {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .landing-hero > div:first-child {
    width: min(680px, 100%) !important;
    margin-inline: auto !important;
  }

  .section-heading--split,
  .design-lab__intro,
  .landing-proof__heading,
  .landing-demo__heading,
  .landing-uses__heading,
  .landing-context__heading {
    grid-template-columns: 1fr !important;
    grid-template-areas: "label" "title" "note" !important;
    row-gap: 12px !important;
  }

  .section-heading--split > p:last-child,
  .design-lab__intro > p:last-child,
  .landing-proof__heading > p:last-child,
  .landing-demo__heading > p:last-child,
  .landing-uses__heading > p:last-child {
    margin-top: 4px !important;
  }
}

@media (max-width: 620px) {
  :root {
    --ui-gutter: 14px;
    --ui-section-gap: 14px;
    --ui-section-pad: 18px;
    --ui-radius: 22px;
  }

  #main-content > .hero,
  .landing-main > .landing-hero {
    padding-top: 14px !important;
  }

  .landing-hero__visual img { max-height: 390px !important; }

  .section-heading--split,
  .design-lab__intro,
  .landing-proof__heading,
  .landing-demo__heading,
  .landing-uses__heading,
  .landing-context__heading {
    margin-bottom: 18px !important;
  }

  .section-heading--split > p:last-child,
  .design-lab__intro > p:last-child,
  .landing-proof__heading > p:last-child,
  .landing-demo__heading > p:last-child,
  .landing-uses__heading > p:last-child {
    padding: 13px 14px !important;
    font-size: 14px !important;
  }

  .landing-steps > h2,
  .landing-faq > h2 { margin-bottom: 18px !important; }

  .landing-steps > ol > li {
    min-height: 0 !important;
    padding: 16px !important;
  }

  .landing-proof__card > p { min-height: 0 !important; }
}

/* Layout recovery: one container, one rhythm and one visible section boundary. */
:root {
  --layout-gutter: 24px;
  --layout-gap: 20px;
  --layout-pad: clamp(24px, 2.5vw, 34px);
  --layout-radius: 26px;
  --layout-surface: linear-gradient(145deg, rgb(31 29 23 / 94%), rgb(21 20 17 / 96%));
}

#main-content,
.landing-main {
  display: flex !important;
  overflow: clip !important;
  flex-direction: column !important;
  gap: var(--layout-gap) !important;
  padding-bottom: var(--layout-gap) !important;
}

#main-content > *,
.landing-main > * {
  box-sizing: border-box !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#main-content > .section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#main-content > .hero {
  width: min(var(--max-width), calc(100% - (2 * var(--layout-gutter)))) !important;
  min-height: auto !important;
  margin-inline: auto !important;
  padding: 24px 0 18px !important;
}

#main-content > .ticker {
  width: min(var(--max-width), calc(100% - (2 * var(--layout-gutter)))) !important;
  margin-inline: auto !important;
}

#main-content > .section:not(.hero) {
  width: min(var(--max-width), calc(100% - (2 * var(--layout-gutter)))) !important;
  margin-inline: auto !important;
  padding: var(--layout-pad) !important;
  border: 1px solid var(--ref-panel-border) !important;
  border-radius: var(--layout-radius) !important;
  background: var(--layout-surface) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%), 0 18px 54px rgb(0 0 0 / 12%) !important;
}

#main-content > .section:not(.hero) > :first-child {
  margin-top: 0 !important;
}

#main-content > .section:not(.hero) > :last-child {
  margin-bottom: 0 !important;
}

.features,
.studio,
.examples,
.story,
.comparison,
.object-edit,
.merge,
.motion,
.design-lab,
.use-cases,
.principles,
.faq,
.closing {
  margin-block: 0 !important;
}

.features .feature-grid,
.examples .gallery,
.use-cases .use-case-list,
.principles ul,
.faq .faq__list,
.motion__cards,
.design-lab__formats {
  gap: 14px !important;
}

.section-heading,
.studio__heading,
.design-lab__intro {
  margin-bottom: 24px !important;
}

.faq {
  grid-template-columns: minmax(220px, .5fr) minmax(0, 1.5fr) !important;
  gap: 24px !important;
}

.faq__list {
  width: 100% !important;
  margin: 0 !important;
}

/* Every internal page uses the same section shell and vertical rhythm. */
.landing-main > .landing-hero,
.landing-main > .landing-value,
.landing-main > section {
  width: min(var(--max-width), calc(100% - (2 * var(--layout-gutter)))) !important;
  margin-inline: auto !important;
}

.landing-main > .landing-hero {
  min-height: auto !important;
  padding: 28px 0 8px !important;
}

.landing-main > .landing-value {
  width: min(980px, calc(100% - (2 * var(--layout-gutter)))) !important;
}

.landing-main > section:not(.landing-hero):not(.closing) {
  padding: var(--layout-pad) !important;
  border: 1px solid var(--ref-panel-border) !important;
  border-radius: var(--layout-radius) !important;
  background: var(--layout-surface) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%), 0 18px 54px rgb(0 0 0 / 12%) !important;
}

.landing-main > section.landing-steps:not(.landing-hero):not(.closing) {
  background: linear-gradient(145deg, #f8cf56, #f2bc34) !important;
  border-color: rgb(255 226 139 / 70%) !important;
  color: #17150f !important;
}

.landing-main > section.landing-uses:not(.landing-hero):not(.closing) {
  background: #f2eee5 !important;
  border-color: rgb(24 21 16 / 16%) !important;
  color: #17150f !important;
}

.landing-main > .closing {
  width: min(var(--max-width), calc(100% - (2 * var(--layout-gutter)))) !important;
  margin-inline: auto !important;
  padding: var(--layout-pad) !important;
  border: 1px solid var(--ref-panel-border) !important;
  border-radius: var(--layout-radius) !important;
}

.landing-proof,
.landing-steps,
.landing-demo,
.landing-uses,
.landing-context,
.landing-faq {
  margin-block: 0 !important;
}

.landing-proof__heading,
.landing-demo__heading,
.landing-uses__heading,
.landing-context__heading {
  margin: 0 0 24px !important;
}

.landing-proof__grid {
  align-items: stretch !important;
}

.landing-proof__card,
[class*="landing-page--"] .landing-proof__card:nth-child(n) {
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.landing-proof__card > p {
  margin: 0 !important;
  opacity: 1 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  transform: none !important;
}

.landing-proof__media,
[class*="landing-page--"] .landing-proof__card:nth-child(n) .landing-proof__media {
  aspect-ratio: 4 / 3 !important;
  margin-top: auto !important;
}

.landing-steps > .label,
.landing-faq > .label,
.landing-proof__heading > .label,
.landing-demo__heading > .label,
.landing-uses__heading > .label,
.landing-context__heading > .label {
  margin: 0 0 12px !important;
}

.landing-steps > ol {
  margin-top: 24px !important;
}

.motion-demo-card__visual {
  margin-top: 18px !important;
}

.motion-demo-card__button {
  padding: 5px 14px 5px 6px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ffd65a, #ffad38) !important;
}

.motion-demo-card__button .motion-demo-card__label {
  padding: 0 2px 0 0 !important;
  border-radius: 0 999px 999px 0 !important;
  background: transparent !important;
  color: #17130b !important;
}

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

@media (max-width: 620px) {
  :root {
    --layout-gutter: 14px;
    --layout-gap: 14px;
    --layout-pad: 18px;
    --layout-radius: 22px;
  }

  #main-content > .hero {
    padding: 18px 0 8px !important;
  }

  #main-content > .section:not(.hero),
  .landing-main > section:not(.landing-hero) {
    padding: var(--layout-pad) !important;
  }

  .landing-main > .landing-hero {
    padding: 20px 0 4px !important;
    gap: 20px !important;
  }

  .landing-main > .landing-value {
    width: min(100% - (2 * var(--layout-gutter)), var(--max-width)) !important;
  }

  .section-heading,
  .studio__heading,
  .design-lab__intro,
  .landing-proof__heading,
  .landing-demo__heading,
  .landing-uses__heading,
  .landing-context__heading {
    margin-bottom: 18px !important;
  }

  .landing-proof__media,
  [class*="landing-page--"] .landing-proof__card:nth-child(n) .landing-proof__media {
    aspect-ratio: 4 / 3 !important;
  }

  /* The sticky header must fit even on a 360 px viewport without clipping. */
  body .header,
  body .header--internal {
    padding-inline: 10px !important;
    gap: 7px !important;
  }

  body .header .logo,
  body .header--internal .logo {
    gap: 6px !important;
    font-size: 14px !important;
  }

  body .header .logo__mark,
  body .header--internal .logo__mark {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
  }

  body .header__actions--essential {
    gap: 5px !important;
  }

  body .header .header__actions--essential .button,
  body .header--internal .header__actions--essential .button {
    min-height: 38px !important;
    padding: 7px 8px !important;
    font-size: 12px !important;
    line-height: 1.05 !important;
  }
}

/* ========================================================================== 
   Stable release contract
   One spacing, heading and card system for the home page and every subpage.
   This block intentionally comes last and resolves legacy page overrides.
   ========================================================================== */
:root {
  --release-width: 1180px;
  --release-gutter: clamp(14px, 2vw, 24px);
  --release-gap: clamp(16px, 2vw, 24px);
  --release-pad: clamp(20px, 2.4vw, 32px);
  --release-radius: 24px;
  --release-panel: linear-gradient(145deg, rgb(29 27 22 / 97%), rgb(22 21 18 / 98%));
  --release-border: rgb(246 194 57 / 28%);
  --release-note: rgb(39 36 29 / 96%);
}

html { scroll-padding-top: 82px; }
body { overflow-x: clip; }

body .header,
body .header--internal {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: min(var(--release-width), calc(100% - 2 * var(--release-gutter))) !important;
  min-height: 64px !important;
  margin: 0 auto !important;
  padding: 10px 16px !important;
  border: 1px solid var(--release-border) !important;
  border-top: 0 !important;
  border-radius: 0 0 18px 18px !important;
  background: rgb(20 18 13 / 94%) !important;
  backdrop-filter: blur(18px) !important;
}

body .logo,
body .header .logo,
body .header--internal .logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  text-transform: lowercase !important;
}

body .logo__mark,
body .header .logo__mark,
body .header--internal .logo__mark {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  background: url("favicon.svg") center / contain no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
}

main#main-content,
.landing-main {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--release-gap) !important;
  padding-bottom: var(--release-gap) !important;
}

#main-content > .hero,
.landing-main > .landing-hero {
  width: min(var(--release-width), calc(100% - 2 * var(--release-gutter))) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 22px 0 0 !important;
}

#main-content > .section:not(.hero),
.landing-main > section:not(.landing-hero):not(.landing-value):not(.closing) {
  width: min(var(--release-width), calc(100% - 2 * var(--release-gutter))) !important;
  margin: 0 auto !important;
  padding: var(--release-pad) !important;
  border: 1px solid var(--release-border) !important;
  border-radius: var(--release-radius) !important;
  background: var(--release-panel) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%), 0 18px 45px rgb(0 0 0 / 12%) !important;
}

.landing-main > .landing-value,
.landing-main > .closing {
  width: min(var(--release-width), calc(100% - 2 * var(--release-gutter))) !important;
  margin: 0 auto !important;
}

h1,
.hero h1,
.landing-hero h1 { font-size: 44px !important; line-height: 1.04 !important; letter-spacing: -.035em !important; }
h2,
.section h2,
.landing-main h2 { font-size: 36px !important; line-height: 1.08 !important; letter-spacing: -.03em !important; }

.label,
.section .label,
.landing-main .label {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  min-height: 30px !important;
  margin: 0 0 14px !important;
  padding: 6px 12px !important;
  border: 1px solid rgb(255 232 164 / 62%) !important;
  border-radius: 999px !important;
  background: #ffd45a !important;
  color: #18140c !important;
  box-shadow: 0 8px 22px rgb(225 166 12 / 20%) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.section-heading,
.section-heading--split,
.studio__heading,
.design-lab__intro,
.landing-proof__heading,
.landing-demo__heading,
.landing-context__heading,
.landing-uses__heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(230px, .52fr) !important;
  grid-template-rows: auto auto !important;
  align-items: end !important;
  gap: 8px 28px !important;
  width: 100% !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
}

.section-heading > .label,
.studio__heading > .label,
.design-lab__intro > .label,
.landing-proof__heading > .label,
.landing-demo__heading > .label,
.landing-context__heading > .label,
.landing-uses__heading > .label {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.section-heading > h2,
.studio__heading > h2,
.design-lab__intro > h2,
.landing-proof__heading > h2,
.landing-demo__heading > h2,
.landing-context__heading > h2,
.landing-uses__heading > h2 {
  grid-column: 1 !important;
  grid-row: 2 !important;
  margin: 0 !important;
}

.section-heading > p:not(.label),
.studio__heading > p:not(.label),
.design-lab__intro > p:not(.label),
.landing-proof__heading > p:not(.label),
.landing-demo__heading > p:not(.label),
.landing-context__heading > p:not(.label),
.landing-uses__heading > p:not(.label),
.landing-proof__note,
.landing-note {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: end !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  border: 1px solid var(--release-border) !important;
  border-radius: 16px !important;
  background: var(--release-note) !important;
  color: #d7d0c3 !important;
  line-height: 1.55 !important;
}

.landing-main > section.landing-steps {
  background: linear-gradient(145deg, #ffd65b, #f1bc37) !important;
  color: #17130b !important;
  border-color: rgb(255 235 172 / 78%) !important;
}

.landing-steps > .label {
  margin-bottom: 14px !important;
  background: #1c1810 !important;
  color: #ffe27f !important;
  border-color: #1c1810 !important;
  box-shadow: none !important;
}

.landing-steps > h2 { margin: 0 0 22px !important; color: #17130b !important; }
.landing-steps > ol,
.steps,
.step-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}

.landing-steps li,
.steps li,
.step-list li {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 94px !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 1px solid rgb(23 19 11 / 20%) !important;
  border-radius: 18px !important;
  background: rgb(255 246 214 / 30%) !important;
  color: #17130b !important;
}

.landing-proof__grid,
.landing-demo__grid,
.landing-context__grid,
.landing-uses__grid {
  align-items: stretch !important;
  gap: 14px !important;
}

.landing-proof__card,
.landing-demo__card,
.landing-context__card,
.landing-uses__card {
  min-height: 0 !important;
  padding: 18px !important;
  border: 1px solid var(--release-border) !important;
  border-radius: 18px !important;
  background: rgb(30 28 23 / 92%) !important;
}

.landing-proof__media,
.landing-demo__media,
.landing-context__media,
.landing-uses__media {
  width: 100% !important;
  margin-top: 18px !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.landing-proof__media img,
.landing-demo__media img,
.landing-context__media img,
.landing-uses__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.faq,
.landing-faq {
  display: block !important;
  width: min(var(--release-width), calc(100% - 2 * var(--release-gutter))) !important;
}

.faq > .section-heading,
.landing-faq > .section-heading,
.landing-faq > .label {
  margin-bottom: 14px !important;
}

.faq__list,
.landing-faq__list,
.landing-faq > div:last-child {
  width: 100% !important;
  max-width: none !important;
  margin: 22px 0 0 !important;
}

.faq details,
.landing-faq details {
  margin: 0 0 10px !important;
  border: 1px solid var(--release-border) !important;
  border-radius: 14px !important;
  background: rgb(35 32 26 / 94%) !important;
}

.motion-demo-card__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-height: 44px !important;
  padding: 6px 16px 6px 7px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
.motion-demo-card__button .motion-demo-card__label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 0 4px !important;
  border-radius: 0 999px 999px 0 !important;
  text-align: center !important;
}

.design-suite__post img,
.design-suite__post picture,
.design-lab__post img { object-fit: contain !important; object-position: center !important; }

.button,
button,
a[class*="button"] {
  border-radius: 14px !important;
}

@media (max-width: 760px) {
  :root {
    --release-gutter: 14px;
    --release-gap: 14px;
    --release-pad: 18px;
    --release-radius: 20px;
  }

  html { scroll-padding-top: 72px; }
  body .header,
  body .header--internal {
    min-height: 58px !important;
    padding: 8px 10px !important;
    border-radius: 0 0 14px 14px !important;
  }
  body .logo,
  body .header .logo,
  body .header--internal .logo { font-size: 14px !important; gap: 7px !important; }
  body .logo__mark,
  body .header .logo__mark,
  body .header--internal .logo__mark { width: 30px !important; height: 30px !important; flex-basis: 30px !important; }

  #main-content > .hero,
  .landing-main > .landing-hero { padding-top: 14px !important; }
  h1,
  .hero h1,
  .landing-hero h1 { font-size: 30px !important; line-height: 1.08 !important; }
  h2,
  .section h2,
  .landing-main h2 { font-size: 26px !important; line-height: 1.12 !important; }

  .section-heading,
  .section-heading--split,
  .studio__heading,
  .design-lab__intro,
  .landing-proof__heading,
  .landing-demo__heading,
  .landing-context__heading,
  .landing-uses__heading {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
  }
  .section-heading > .label,
  .section-heading > h2,
  .section-heading > p:not(.label),
  .studio__heading > *,
  .design-lab__intro > *,
  .landing-proof__heading > *,
  .landing-demo__heading > *,
  .landing-context__heading > *,
  .landing-uses__heading > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .section-heading > p:not(.label),
  .studio__heading > p:not(.label),
  .design-lab__intro > p:not(.label),
  .landing-proof__heading > p:not(.label),
  .landing-demo__heading > p:not(.label),
  .landing-context__heading > p:not(.label),
  .landing-uses__heading > p:not(.label) { margin-top: 6px !important; padding: 14px !important; }

  .landing-steps > ol,
  .steps,
  .step-list { grid-template-columns: 1fr !important; gap: 10px !important; }
  .landing-steps li,
  .steps li,
  .step-list li { min-height: 0 !important; padding: 15px !important; }

  .landing-proof__grid,
  .landing-demo__grid,
  .landing-context__grid,
  .landing-uses__grid { grid-template-columns: 1fr !important; }

  .landing-proof__card,
  .landing-demo__card,
  .landing-context__card,
  .landing-uses__card { padding: 16px !important; }

  .landing-hero__content,
  .landing-hero__visual { min-width: 0 !important; }
  .landing-hero__visual { margin-top: 4px !important; }
  .hero__actions,
  .landing-hero__actions { gap: 10px !important; margin-bottom: 2px !important; }
}