/*
 * Nanobanana layout contract.
 * This file is intentionally loaded last: it replaces accumulated page-level
 * exceptions with one responsive grid, one spacing scale and one type scale.
 */

:root {
  --nb-header-height: 72px;
  --nb-container: 1180px;
  --nb-gutter: clamp(20px, 4vw, 48px);
  --nb-space-1: 8px;
  --nb-space-2: 12px;
  --nb-space-3: 16px;
  --nb-space-4: 24px;
  --nb-space-5: 32px;
  --nb-space-6: 48px;
  --nb-space-7: 64px;
  --nb-panel: #1d1b15;
  --nb-panel-raised: #242117;
  --nb-line: rgba(255, 205, 67, 0.28);
  --nb-muted: #bcb5a6;
  --nb-accent: #ffd04f;
}

html {
  scroll-padding-top: calc(var(--nb-header-height) + var(--nb-space-3));
}

body {
  padding-top: calc(var(--nb-header-height) + var(--nb-space-3)) !important;
  overflow-x: clip;
}

body .header,
body .header--internal {
  position: fixed !important;
  z-index: 1000 !important;
  top: 0 !important;
  left: 50% !important;
  width: min(var(--nb-container), calc(100% - 2 * var(--nb-gutter))) !important;
  min-height: var(--nb-header-height) !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  transform: translateX(-50%) !important;
  border: 1px solid var(--nb-line) !important;
  border-top: 0 !important;
  border-radius: 0 0 18px 18px !important;
  background: rgba(20, 19, 15, 0.96) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(14px);
}

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

body .logo__mark {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
}

body .button,
body button.button,
body .arrow-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 0 20px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-decoration: none !important;
}

body .button--compact {
  min-height: 46px !important;
}

body .button:hover,
body .arrow-link:hover {
  transform: translateY(-2px);
}

body .button:focus-visible,
body .arrow-link:focus-visible,
body button:focus-visible,
body a:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
}

body main,
body .landing-main {
  width: 100% !important;
  min-width: 0 !important;
}

body main > section,
body main > ul,
body .landing-main > section,
body .landing-main > ul {
  width: min(var(--nb-container), calc(100% - 2 * var(--nb-gutter))) !important;
  max-width: var(--nb-container) !important;
  margin-inline: auto !important;
}

body .section,
body .landing-main > section,
body .landing-main > ul {
  margin-top: 0 !important;
  margin-bottom: var(--nb-space-6) !important;
}

body h1,
body .hero h1,
body .landing-hero h1 {
  max-width: 15ch !important;
  margin: 0 !important;
  font-size: 44px !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
  text-wrap: balance;
}

body h2,
body .section-heading h2,
body .landing-main h2 {
  font-size: 36px !important;
  line-height: 1.06 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance;
}

body .label {
  display: inline-flex !important;
  align-items: center !important;
  width: max-content !important;
  min-height: 30px !important;
  margin: 0 0 var(--nb-space-3) !important;
  padding: 6px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 999px !important;
  color: #17150f !important;
  background: var(--nb-accent) !important;
  box-shadow: 0 8px 22px rgba(255, 208, 79, 0.16) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.035em !important;
}

/* The requested asymmetric screen: 70% visual focus / 30% information rail. */
body .hero,
body .landing-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 7fr) minmax(300px, 3fr) !important;
  grid-template-areas: "focus rail" !important;
  gap: var(--nb-space-4) !important;
  align-items: stretch !important;
  min-height: min(650px, calc(100svh - var(--nb-header-height) - 56px)) !important;
  margin-top: 0 !important;
  margin-bottom: var(--nb-space-6) !important;
  padding: 0 !important;
}

body .hero__visual,
body .landing-hero__visual {
  grid-area: focus !important;
  position: relative !important;
  min-width: 0 !important;
  min-height: 520px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--nb-line) !important;
  border-radius: 28px !important;
  background: #161510 !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28) !important;
}

body .hero__visual img,
body .landing-hero__visual img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 520px !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

body .hero__copy,
body .landing-hero > div:first-child {
  grid-area: rail !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: clamp(24px, 3vw, 38px) !important;
  overflow: hidden !important;
  border: 1px solid var(--nb-line) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 208, 79, 0.13), transparent 34%),
    linear-gradient(145deg, var(--nb-panel-raised), var(--nb-panel)) !important;
}

body .hero__description,
body .landing-hero__lead {
  max-width: 36ch !important;
  margin: var(--nb-space-4) 0 0 !important;
  color: var(--nb-muted) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

body .hero__actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  gap: var(--nb-space-2) !important;
  margin: var(--nb-space-4) 0 0 !important;
}

body .hero__actions > * {
  width: 100% !important;
}

body .hero__facts {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  gap: var(--nb-space-2) !important;
  margin: var(--nb-space-4) 0 0 !important;
  padding: 0 !important;
}

body .hero__facts li {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 54px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--nb-line) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.025) !important;
}

body .hero__facts svg {
  width: 22px !important;
  height: 22px !important;
}

body .hero__quick-action {
  right: 18px !important;
  bottom: 18px !important;
  border-radius: 14px !important;
}

body .landing-value {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--nb-space-3) !important;
  margin-bottom: var(--nb-space-6) !important;
  padding: 0 !important;
}

body .landing-value li {
  min-height: 64px !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid var(--nb-line) !important;
  border-radius: 16px !important;
  background: var(--nb-panel) !important;
}

body .section-heading,
body .landing-proof__heading,
body .landing-section__heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.45fr) !important;
  gap: var(--nb-space-4) !important;
  align-items: end !important;
  margin: 0 0 var(--nb-space-4) !important;
  padding: 0 !important;
}

body .section-heading > .label,
body .landing-proof__heading > .label,
body .landing-section__heading > .label {
  grid-column: 1 / -1 !important;
  margin-bottom: 0 !important;
}

body .section-heading > p:last-child,
body .landing-proof__heading > p:last-child,
body .landing-section__heading > p:last-child {
  align-self: center !important;
  max-width: 42ch !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  border: 1px solid var(--nb-line) !important;
  border-radius: 16px !important;
  color: var(--nb-muted) !important;
  background: var(--nb-panel) !important;
}

body .faq,
body .landing-faq {
  padding: clamp(24px, 4vw, 44px) !important;
  border: 1px solid var(--nb-line) !important;
  border-radius: 28px !important;
  background: linear-gradient(145deg, #191813, #211e16) !important;
}

body .faq__list,
body .landing-faq details {
  width: 100% !important;
  max-width: none !important;
}

body .faq__list details,
body .landing-faq details {
  margin: 0 0 var(--nb-space-2) !important;
  border: 1px solid var(--nb-line) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.025) !important;
}

body .faq__list summary,
body .landing-faq summary {
  min-height: 58px !important;
  padding: 16px 18px !important;
}

body .footer {
  width: min(var(--nb-container), calc(100% - 2 * var(--nb-gutter))) !important;
  margin: var(--nb-space-6) auto 0 !important;
}

/* Micro-interactions ----------------------------------------------------- */
:root {
  --nb-motion-fast: 160ms;
  --nb-motion-card: 260ms;
  --nb-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body .button,
body button,
body .arrow-link,
body .upload-button {
  transform-origin: center;
  transition:
    transform var(--nb-motion-fast) var(--nb-motion-ease),
    color var(--nb-motion-fast) ease,
    background-color var(--nb-motion-fast) ease,
    border-color var(--nb-motion-fast) ease,
    box-shadow var(--nb-motion-fast) ease !important;
}

body .button:active,
body button:active,
body .arrow-link:active,
body .upload-button:active {
  transform: translateY(0) scale(0.95) !important;
}

@keyframes nb-active-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 207, 74, 0.34);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(255, 207, 74, 0);
  }
}

body .filter-button.is-active,
body .filter-button[aria-pressed="true"],
body .motion__modes button[aria-pressed="true"],
body [role="tab"][aria-selected="true"],
body [aria-current="page"] {
  animation: nb-active-pulse 2.2s ease-in-out infinite;
}

@media (hover: hover) and (pointer: fine) {
  body :is(
    .feature-card,
    .gallery-card,
    .use-case,
    .design-output
  ) {
    position: relative;
    z-index: 0;
    transform-origin: center;
    transition:
      transform var(--nb-motion-card) var(--nb-motion-ease),
      border-color var(--nb-motion-fast) ease,
      box-shadow var(--nb-motion-card) ease !important;
    will-change: transform;
  }

  body :is(
    .feature-card,
    .gallery-card,
    .use-case,
    .design-output
  ):hover {
    z-index: 3;
    transform: scale(1.05) !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28) !important;
  }
}

@media (max-width: 1023px) {
  :root {
    --nb-container: 920px;
    --nb-space-6: 40px;
  }

  body .hero,
  body .landing-hero {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "rail"
      "focus" !important;
    min-height: 0 !important;
  }

  body .hero__copy,
  body .landing-hero > div:first-child {
    min-height: 0 !important;
  }

  body .hero__visual,
  body .landing-hero__visual,
  body .hero__visual img,
  body .landing-hero__visual img {
    min-height: 440px !important;
  }

  body .hero__facts,
  body .hero__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body .hero__facts li:last-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 767px) {
  :root {
    --nb-header-height: 68px;
    --nb-gutter: 16px;
    --nb-space-4: 20px;
    --nb-space-5: 28px;
    --nb-space-6: 32px;
  }

  body {
    padding-top: calc(var(--nb-header-height) + 12px) !important;
  }

  body .header,
  body .header--internal {
    width: 100% !important;
    min-height: var(--nb-header-height) !important;
    padding: 9px 14px !important;
    border-inline: 0 !important;
    border-radius: 0 0 16px 16px !important;
  }

  body .logo {
    gap: 8px !important;
    font-size: 16px !important;
  }

  body .logo__mark {
    flex-basis: 36px !important;
    width: 36px !important;
    height: 36px !important;
  }

  body .header .button--ghost {
    display: none !important;
  }

  body .header .button--compact {
    min-height: 42px !important;
    padding-inline: 14px !important;
    font-size: 13px !important;
  }

  body h1,
  body .hero h1,
  body .landing-hero h1 {
    max-width: none !important;
    font-size: 30px !important;
    line-height: 1.04 !important;
    letter-spacing: -0.035em !important;
  }

  body h2,
  body .section-heading h2,
  body .landing-main h2 {
    font-size: 26px !important;
    line-height: 1.08 !important;
  }

  body .hero,
  body .landing-hero {
    gap: var(--nb-space-3) !important;
    margin-bottom: var(--nb-space-5) !important;
  }

  body .hero__copy,
  body .landing-hero > div:first-child {
    padding: 24px 20px !important;
    border-radius: 22px !important;
  }

  body .hero__description,
  body .landing-hero__lead {
    margin-top: var(--nb-space-3) !important;
    font-size: 15px !important;
  }

  body .hero__actions,
  body .hero__facts,
  body .landing-value,
  body .section-heading,
  body .landing-proof__heading,
  body .landing-section__heading {
    grid-template-columns: 1fr !important;
  }

  body .hero__facts li:last-child {
    grid-column: auto !important;
  }

  body .hero__visual,
  body .landing-hero__visual,
  body .hero__visual img,
  body .landing-hero__visual img {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 22px !important;
  }

  body .section-heading > p:last-child,
  body .landing-proof__heading > p:last-child,
  body .landing-section__heading > p:last-child {
    max-width: none !important;
  }

  body .faq,
  body .landing-faq {
    padding: 22px 18px !important;
    border-radius: 22px !important;
  }
}

@media (max-width: 389px) {
  body .logo span:last-child {
    font-size: 15px !important;
  }

  body .header .button--compact {
    padding-inline: 11px !important;
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ================================================================
   Layout stability contract
   This final layer is deliberately small and authoritative. It keeps
   every page on the same spacing scale and prevents page-level styles
   from reintroducing oversized gaps or overlapping content.
   ================================================================ */
:root {
  --studio-header-height: 64px;
  --studio-container: 1120px;
  --studio-gutter: clamp(16px, 3vw, 32px);
  --studio-section-gap: 32px;
  --studio-shell-padding: clamp(22px, 3vw, 32px);
  --studio-radius: 26px;
  --studio-card-radius: 20px;
  --studio-border: rgba(255, 205, 68, 0.23);
  --studio-panel: rgba(26, 26, 22, 0.92);
}

html {
  scroll-padding-top: calc(var(--studio-header-height) + 16px);
}

body {
  padding-top: calc(var(--studio-header-height) + 10px) !important;
  overflow-x: clip;
}

body .header {
  min-height: var(--studio-header-height) !important;
  height: var(--studio-header-height) !important;
  padding-block: 7px !important;
}

body .header__inner {
  min-height: 48px !important;
}

body .logo {
  gap: 10px !important;
  line-height: 1 !important;
}

body .logo img,
body .logo__mark {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
}

body .logo span:last-child {
  font-size: 17px !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
}

body h1,
body .hero h1,
body .landing-hero h1 {
  font-size: 44px !important;
  line-height: 1.03 !important;
  text-wrap: balance;
}

body h2,
body .section-heading h2,
body .landing-section__heading h2,
body .landing-proof__heading h2 {
  font-size: 36px !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}

body main,
body .landing-main {
  display: block !important;
}

body main > section,
body .landing-main > section,
body main > .section,
body .landing-main > .section {
  width: min(calc(100% - (var(--studio-gutter) * 2)), var(--studio-container)) !important;
  max-width: var(--studio-container) !important;
  margin: 0 auto var(--studio-section-gap) !important;
  min-height: 0 !important;
}

body .hero,
body .landing-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr) !important;
  grid-template-areas: "visual copy" !important;
  align-items: stretch !important;
  gap: 18px !important;
  padding: 0 !important;
}

body .hero__copy,
body .landing-hero__copy {
  grid-area: copy !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 26px !important;
  border: 1px solid var(--studio-border) !important;
  border-radius: var(--studio-radius) !important;
  background: linear-gradient(145deg, rgba(32, 31, 25, .98), rgba(20, 21, 18, .98)) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 16px !important;
}

body .hero__visual,
body .landing-hero__visual {
  grid-area: visual !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 !important;
  border-radius: var(--studio-radius) !important;
  overflow: hidden !important;
}

body .hero__visual img,
body .landing-hero__visual img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
}

body .hero__description,
body .landing-hero__description {
  margin: 0 !important;
  max-width: 42rem !important;
}

body .hero__actions,
body .landing-hero__actions {
  gap: 10px !important;
  margin: 2px 0 0 !important;
}

body .button,
body button,
body [role="button"] {
  min-height: 46px !important;
  border-radius: 14px !important;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease !important;
}

body .button:hover,
body button:hover,
body [role="button"]:hover {
  transform: translateY(-2px) scale(1.02);
}

body .button:active,
body button:active,
body [role="button"]:active {
  transform: scale(.95) !important;
}

body .button:focus-visible,
body button:focus-visible,
body a:focus-visible,
body summary:focus-visible {
  outline: 3px solid #fff2a6 !important;
  outline-offset: 3px !important;
}

body .feature-card:hover,
body .landing-card:hover,
body .use-card:hover,
body .scenario-card:hover {
  transform: translateY(-4px) scale(1.025) !important;
}

body .section-heading,
body .landing-section__heading,
body .landing-proof__heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr) !important;
  align-items: end !important;
  gap: 24px !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  min-height: 0 !important;
}

body .section-label,
body .eyebrow,
body .landing-label {
  position: static !important;
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 12px !important;
  padding: 8px 13px !important;
  border: 1px solid rgba(255, 220, 112, .45) !important;
  border-radius: 999px !important;
  background: #f4c842 !important;
  color: #17140c !important;
  box-shadow: none !important;
  line-height: 1 !important;
  opacity: 1 !important;
}

body .features,
body .studio,
body .faq,
body .closing,
body .landing-value,
body .landing-proof,
body .landing-steps,
body .landing-demo,
body .landing-uses,
body .landing-context,
body .landing-faq,
body .landing-section {
  min-height: 0 !important;
  padding: var(--studio-shell-padding) !important;
  border: 1px solid var(--studio-border) !important;
  border-radius: var(--studio-radius) !important;
  background: linear-gradient(145deg, rgba(23, 24, 21, .96), rgba(19, 19, 16, .96)) !important;
  overflow: hidden !important;
}

body .landing-steps,
body .steps,
body .how-it-works {
  background: linear-gradient(135deg, #f6ce55, #ffd769) !important;
  color: #17140e !important;
}

body .landing-steps *,
body .steps *,
body .how-it-works * {
  color: inherit;
}

body .landing-steps .section-label,
body .steps .section-label,
body .how-it-works .section-label {
  background: #17140e !important;
  color: #ffd65a !important;
  border-color: #17140e !important;
}

body .landing-steps__grid,
body .steps__grid,
body .landing-uses__grid,
body .landing-context__grid,
body .features__grid,
body .principles__grid {
  align-items: stretch !important;
  gap: 14px !important;
}

body .landing-steps__item,
body .steps__item,
body .landing-uses__item,
body .landing-context__item,
body .feature-card,
body .principle-card {
  min-height: 0 !important;
  height: auto !important;
  padding: 20px !important;
  border-radius: var(--studio-card-radius) !important;
}

body .landing-proof__grid,
body .landing-demo__grid,
body .proof-grid,
body .demo-grid {
  gap: 14px !important;
  align-items: stretch !important;
}

body .landing-proof__card,
body .landing-demo__card,
body .proof-card,
body .demo-card {
  min-height: 0 !important;
  height: auto !important;
  border-radius: var(--studio-card-radius) !important;
  overflow: hidden !important;
}

body .landing-proof__card img,
body .landing-demo__card img,
body .proof-card img,
body .demo-card img,
body .feature-card img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: center !important;
}

body .landing-demo__prompt,
body .demo-prompt,
body .command-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  padding: 22px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body .landing-demo__prompt p,
body .demo-prompt p,
body .command-card p {
  font-size: clamp(16px, 1.55vw, 21px) !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

body .landing-context__note,
body .landing-proof__note,
body .section-note {
  margin: 0 !important;
  padding: 16px 18px !important;
  border: 1px solid var(--studio-border) !important;
  border-radius: 16px !important;
  background: rgba(39, 37, 29, .9) !important;
  color: #ddd7c9 !important;
}

body .faq,
body .landing-faq {
  padding: 24px !important;
}

body details {
  margin: 0 !important;
  border: 1px solid var(--studio-border) !important;
  border-radius: 14px !important;
  background: rgba(38, 36, 29, .78) !important;
  overflow: hidden !important;
}

body details + details {
  margin-top: 8px !important;
}

body details summary {
  min-height: 50px !important;
  padding: 14px 16px !important;
}

body details > :not(summary) {
  padding-inline: 16px !important;
}

body .closing,
body .landing-closing {
  min-height: 0 !important;
  padding: 24px 28px !important;
}

body .footer,
body footer {
  width: min(calc(100% - (var(--studio-gutter) * 2)), var(--studio-container)) !important;
  margin: 0 auto 20px !important;
  padding: 28px !important;
  border-radius: var(--studio-radius) !important;
}

@media (max-width: 1023px) {
  :root {
    --studio-section-gap: 28px;
  }

  body .hero,
  body .landing-hero {
    grid-template-columns: 1fr !important;
    grid-template-areas: "copy" "visual" !important;
  }

  body .hero__visual,
  body .landing-hero__visual {
    aspect-ratio: 16 / 10 !important;
  }
}

@media (max-width: 767px) {
  :root {
    --studio-header-height: 64px;
    --studio-gutter: 14px;
    --studio-section-gap: 22px;
    --studio-shell-padding: 18px;
    --studio-radius: 22px;
    --studio-card-radius: 17px;
  }

  body {
    padding-top: calc(var(--studio-header-height) + 8px) !important;
  }

  body .header {
    border-radius: 0 0 14px 14px !important;
  }

  body .logo img,
  body .logo__mark {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

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

  body h2,
  body .section-heading h2,
  body .landing-section__heading h2,
  body .landing-proof__heading h2 {
    font-size: 26px !important;
    line-height: 1.1 !important;
  }

  body .hero,
  body .landing-hero {
    gap: 12px !important;
  }

  body .hero__copy,
  body .landing-hero__copy {
    padding: 20px 18px !important;
    gap: 13px !important;
  }

  body .hero__visual,
  body .landing-hero__visual {
    aspect-ratio: 4 / 3 !important;
  }

  body .section-heading,
  body .landing-section__heading,
  body .landing-proof__heading {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  body .section-label,
  body .eyebrow,
  body .landing-label {
    margin-bottom: 10px !important;
    padding: 7px 11px !important;
  }

  body .hero__actions,
  body .landing-hero__actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body .hero__actions .button,
  body .landing-hero__actions .button {
    width: 100% !important;
  }

  body .features,
  body .studio,
  body .faq,
  body .closing,
  body .landing-value,
  body .landing-proof,
  body .landing-steps,
  body .landing-demo,
  body .landing-uses,
  body .landing-context,
  body .landing-faq,
  body .landing-section {
    padding: var(--studio-shell-padding) !important;
  }

  body .landing-steps__grid,
  body .steps__grid,
  body .landing-uses__grid,
  body .landing-context__grid,
  body .features__grid,
  body .principles__grid,
  body .landing-proof__grid,
  body .landing-demo__grid,
  body .proof-grid,
  body .demo-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body .landing-steps__item,
  body .steps__item,
  body .landing-uses__item,
  body .landing-context__item,
  body .feature-card,
  body .principle-card {
    padding: 17px !important;
  }

  body .closing,
  body .landing-closing {
    padding: 20px 18px !important;
  }

  body .footer,
  body footer {
    padding: 22px 18px !important;
  }
}