:root {
  color-scheme: light;
  --color-bg: #f3f7f1;
  --color-surface: #ffffff;
  --color-surface-soft: #f8faf6;
  --color-border: rgba(38, 110, 81, 0.14);
  --color-text: #101828;
  --color-muted: #667085;
  --color-primary: #ff6a00;
  --color-primary-hover: #e85f00;
  --color-premium: #2b8a62;
  --color-premium-hover: #21704f;
  --shadow-soft: 0 16px 38px rgba(36, 73, 58, 0.08);
  --shadow-card: 0 24px 60px rgba(36, 73, 58, 0.12);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --ink: #152033;
  --muted: #5e6a7c;
  --line: #dbe3ee;
  --panel: #f5f8fb;
  --paper: #ffffff;
  --accent: #e07a22;
  --accent-dark: #ba5f18;
  --blue: #2357a5;
  --blue-dark: #17396d;
  --shadow: 0 20px 60px rgba(21, 32, 51, 0.12);
  --font-display: "Sora", "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  min-height: 76px;
  padding: 14px clamp(20px, 5vw, 72px);
  border-bottom: 1px solid rgba(219, 227, 238, 0.9);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
}

.brand img {
  display: block;
  width: 154px;
  height: auto;
}

.top-nav,
.header-actions,
.hero-actions,
.site-footer nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.top-nav {
  justify-content: center;
  color: var(--muted);
  font-weight: 800;
  font-size: 14px;
}

.top-nav a:hover,
.site-footer a:hover {
  color: var(--blue);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-weight: 900;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 12px 28px rgba(224, 122, 34, 0.24);
}

.button-primary:hover {
  background: var(--accent-dark);
}

.button-ghost {
  border-color: var(--line);
  background: #fff;
  color: var(--blue-dark);
}

.button-ghost:hover {
  border-color: rgba(35, 87, 165, 0.42);
  box-shadow: 0 10px 24px rgba(21, 32, 51, 0.08);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  min-height: calc(100vh - 76px);
  padding: clamp(48px, 7vw, 92px) clamp(20px, 6vw, 92px) clamp(42px, 6vw, 78px);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(110deg, #ffffff 0%, #ffffff 48%, rgba(238, 244, 249, 0.92) 48%, rgba(238, 244, 249, 0.92) 100%);
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  font-family: "Space Grotesk", "Manrope", Arial, sans-serif;
  letter-spacing: 0;
}

h1 {
  max-width: 790px;
  margin: 0;
  font-size: clamp(44px, 6vw, 82px);
  line-height: 0.98;
}

h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.06;
}

h3 {
  margin: 0 0 10px;
  font-size: 21px;
}

.hero-lead {
  max-width: 680px;
  margin: 24px 0;
  color: var(--muted);
  font-size: 19px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 680px;
  margin: 32px 0 0;
}

.hero-stats div {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.hero-stats dt {
  font-size: 24px;
  font-weight: 900;
  color: var(--blue);
}

.hero-stats dd {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.hero-media {
  display: grid;
  place-items: center;
  min-height: 520px;
  padding: clamp(20px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.hero-media img {
  width: min(100%, 560px);
  max-height: 460px;
  object-fit: contain;
}

.section {
  padding: clamp(54px, 7vw, 96px) clamp(20px, 6vw, 92px);
  border-bottom: 1px solid var(--line);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: end;
  margin-bottom: 34px;
}

.feature-grid,
.module-grid,
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.module-grid--single {
  grid-template-columns: minmax(280px, 520px);
  justify-content: center;
}

.feature-grid article,
.steps article {
  min-height: 220px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.feature-grid--compact article {
  min-height: 180px;
}

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

.modules {
  background: var(--panel);
}

.module-card {
  display: grid;
  gap: 18px;
  align-content: space-between;
  min-height: 320px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(21, 32, 51, 0.06);
}

.module-card:hover {
  border-color: rgba(35, 87, 165, 0.34);
  box-shadow: 0 18px 38px rgba(21, 32, 51, 0.1);
}

.module-card img {
  width: 100%;
  height: 220px;
  object-fit: contain;
}

.module-card span {
  font-size: 22px;
  font-weight: 900;
}

.module-card small {
  display: block;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.module-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.module-actions .button {
  min-height: 42px;
  padding: 0 14px;
  text-align: center;
  white-space: normal;
}

.account-band {
  background: #fff;
}

.steps span {
  display: inline-flex;
  margin-bottom: 22px;
  color: var(--accent-dark);
  font-weight: 900;
}

.final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(46px, 6vw, 82px) clamp(20px, 6vw, 92px);
  background: var(--blue-dark);
  color: #fff;
}

.final-cta .eyebrow {
  color: #ffd9ba;
}

.final-cta h2 {
  max-width: 760px;
}

.final-cta .button-ghost {
  border-color: rgba(255, 255, 255, 0.38);
  background: transparent;
  color: #fff;
}

.hero-actions--multi {
  justify-content: flex-end;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 28px clamp(20px, 6vw, 92px);
  color: var(--muted);
  font-weight: 800;
}

@media (max-width: 980px) {
  .site-header,
  .hero,
  .section-heading,
  .feature-grid,
  .module-grid,
  .steps {
    grid-template-columns: 1fr;
  }

  .top-nav {
    justify-content: flex-start;
  }

  .hero {
    min-height: auto;
    background: #fff;
  }

  .hero-media {
    min-height: 360px;
  }

  .final-cta,
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-actions--multi {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .site-header {
    position: static;
    gap: 16px;
  }

  .brand img {
    width: 132px;
  }

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

  .button {
    width: 100%;
  }

  .header-actions,
  .hero-actions,
  .module-actions {
    width: 100%;
    grid-template-columns: 1fr;
  }
}

.home-page {
  background: #f7f8fb;
}

.home-page .home-hero {
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(0, 0.86fr) minmax(360px, 1.14fr);
  min-height: 640px;
  background: #eef3f8;
}

.home-page .home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("./grafiki/pro.png");
  background-size: cover;
  background-position: center right;
  opacity: 0.08;
}

.home-page .home-hero > * {
  position: relative;
  z-index: 1;
}

.home-page .hero-copy {
  max-width: 760px;
}

.home-page .hero-lead {
  color: #3f4a5d;
}

.home-page .home-hero-visual {
  position: relative;
  min-height: 520px;
}

.home-page .home-hero-main-img {
  position: absolute;
  right: 2%;
  top: 4%;
  width: min(78%, 680px);
  max-height: 400px;
  object-fit: contain;
  border: 1px solid rgba(35, 87, 165, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 28px 70px rgba(21, 32, 51, 0.18);
}

.home-page .home-hero-product {
  position: absolute;
  object-fit: contain;
  border: 1px solid rgba(219, 227, 238, 0.92);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 42px rgba(21, 32, 51, 0.14);
}

.home-page .home-hero-product--kitchen {
  left: 50%;
  bottom: 0;
  width: min(56%, 360px);
  height: 220px;
  padding: 22px;
  transform: translateX(-50%);
}

.home-page .home-hero-product--wardrobe {
  right: 5%;
  bottom: 3%;
  width: min(31%, 220px);
  height: 230px;
  padding: 18px;
}

.home-page .home-hero-product--dresser {
  right: 32%;
  bottom: 0;
  width: min(34%, 250px);
  height: 190px;
  padding: 18px;
}

.home-page .home-modules {
  background: #fff;
}

.home-page .module-card {
  min-height: 420px;
  background: #fff;
}

.home-page .module-card--featured {
  border-color: rgba(224, 122, 34, 0.34);
  box-shadow: 0 20px 46px rgba(224, 122, 34, 0.12);
}

.home-page .module-card img {
  height: 250px;
}

.home-plans {
  background: #fff;
}

.home-pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 420px));
  justify-content: center;
  gap: 16px;
}

.home-page .account-plan-card {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 16px;
  border: 1px solid rgba(66, 59, 50, 0.16);
  border-radius: 24px;
  background: #f4f5f7;
  box-shadow: 0 10px 20px rgba(21, 16, 12, 0.06);
}

.home-page .account-plan-card header {
  display: grid;
  gap: 6px;
}

.home-page .account-plan-media {
  width: 58px;
  height: 58px;
  margin-bottom: 4px;
  padding: 6px;
  border: 1px solid rgba(44, 36, 30, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  object-fit: contain;
}

.home-page .account-plan-media--pro {
  width: 72px;
}

.home-page .account-plan-card h3 {
  margin: 0;
  font-family: "Space Grotesk", "Manrope", Arial, sans-serif;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 0.95;
  letter-spacing: 0;
}

.home-page .account-plan-price-line {
  display: grid;
  gap: 2px;
  margin: 0;
}

.home-page .account-plan-card strong {
  color: #4b433d;
  font-family: "Space Grotesk", "Manrope", Arial, sans-serif;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1;
  letter-spacing: 0;
}

.home-page .account-plan-price-line span,
.home-plan-note {
  color: var(--muted);
  font-weight: 800;
}

.home-page .account-plan-price-line span {
  font-size: 15px;
}

.home-plan-note {
  margin: 0;
}

.home-page .account-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.home-page .account-status-badge--success {
  color: #155f54;
  border: 1px solid rgba(15, 139, 125, 0.3);
  background: rgba(15, 139, 125, 0.14);
}

.home-page .account-status-badge--info {
  color: #1f3f8f;
  border: 1px solid rgba(47, 102, 243, 0.28);
  background: rgba(47, 102, 243, 0.1);
}

.home-page .account-plan-section {
  display: grid;
  gap: 6px;
}

.home-page .account-plan-section h4 {
  margin: 0;
  color: #5f5951;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-page .account-plan-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  color: #4b433d;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
}

.home-page .account-plan-list li {
  position: relative;
  padding-left: 24px;
  line-height: 1.35;
}

.home-page .account-plan-list--pros li::before,
.home-page .account-plan-list--cons li::before {
  position: absolute;
  left: 0;
  top: 0.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
  content: "";
}

.home-page .account-plan-list--pros li::before {
  content: "+";
  color: #155f54;
  border: 1px solid rgba(15, 139, 125, 0.3);
  background: rgba(15, 139, 125, 0.16);
}

.home-page .account-plan-list--cons li::before {
  content: "-";
  color: #7f4d00;
  border: 1px solid rgba(154, 90, 0, 0.25);
  background: rgba(255, 196, 115, 0.26);
}

.home-page .account-plan-card--pro {
  border-color: #2f66f3;
  background: #f8fbff;
  box-shadow: 0 12px 24px rgba(47, 102, 243, 0.14);
}

.home-page .account-plan-card--pro strong {
  color: #1f3f8f;
}

.home-page .account-link-button,
.home-page .primary-button,
.home-page .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: "Space Grotesk", "Manrope", Arial, sans-serif;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.home-page .account-link-button {
  margin-top: auto;
}

.home-page .primary-button {
  color: #fff;
  background: linear-gradient(160deg, #20b5a6, #119787);
  box-shadow: 0 10px 18px rgba(15, 139, 125, 0.18);
}

.home-page .ghost-button {
  color: var(--blue-dark);
  border-color: var(--line);
  background: #fff;
}

.plan-compare-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(320px, 1.14fr);
  gap: 18px;
}

.plan-compare-card {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 430px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(21, 32, 51, 0.07);
}

.plan-compare-card--pro {
  border-color: rgba(224, 122, 34, 0.42);
  background: linear-gradient(180deg, #fffaf5 0%, #ffffff 54%);
  box-shadow: 0 22px 54px rgba(224, 122, 34, 0.12);
}

.plan-compare-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.plan-compare-head span {
  color: var(--accent-dark);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.plan-compare-head strong {
  color: var(--ink);
  font-family: "Space Grotesk", "Manrope", Arial, sans-serif;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1;
  text-align: right;
}

.plan-compare-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.plan-compare-card ul,
.production-grid {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-compare-card ul {
  display: grid;
  gap: 11px;
}

.plan-compare-card li {
  position: relative;
  padding-left: 26px;
  color: #3f4a5d;
  font-weight: 800;
}

.plan-compare-card li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 2px;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #eaf7f4;
  color: #0f8b7d;
  font-size: 13px;
  line-height: 1;
}

.home-production {
  background: #f1f5f9;
}

.production-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.production-grid article {
  min-height: 210px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.production-grid p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.compact-cta {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  margin-top: 24px;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid rgba(35, 87, 165, 0.16);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.compact-cta img {
  display: block;
  width: 100%;
  max-height: 310px;
  object-fit: contain;
}

.compact-cta h2 {
  max-width: 780px;
  font-size: clamp(30px, 4vw, 48px);
}

.home-showcase {
  background: #f1f5f9;
}

.home-showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 24px;
  align-items: center;
}

.home-showcase-media {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.home-showcase-media img {
  display: block;
  width: 100%;
  max-height: 440px;
  object-fit: contain;
}

.home-feature-list {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.home-feature-list ul {
  display: grid;
  gap: 12px;
  margin: 16px 0 22px;
  padding: 0;
  list-style: none;
}

.home-feature-list li {
  position: relative;
  padding-left: 26px;
  color: var(--muted);
  font-weight: 800;
}

.home-feature-list li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #eaf7f4;
  color: #0f8b7d;
  font-size: 13px;
  line-height: 1;
}

.compact-module-page {
  background: #f5f8fb;
}

.compact-module {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 0.72fr);
  grid-template-areas:
    "copy media"
    "info info";
  gap: 22px;
  padding: clamp(30px, 5vw, 58px) clamp(20px, 6vw, 92px);
  border-bottom: 1px solid var(--line);
}

.compact-copy,
.compact-media,
.compact-info article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(21, 32, 51, 0.08);
}

.compact-copy {
  grid-area: copy;
  align-content: center;
  padding: clamp(24px, 4vw, 42px);
}

.compact-copy h1 {
  font-size: clamp(36px, 5vw, 64px);
}

.compact-copy .hero-lead {
  max-width: 620px;
}

.compact-media {
  grid-area: media;
  display: grid;
  place-items: center;
  min-height: 360px;
  padding: clamp(18px, 3vw, 34px);
}

.compact-media img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
}

.compact-info {
  grid-area: info;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.compact-info article {
  padding: 24px;
}

.compact-info h2 {
  font-size: clamp(24px, 3vw, 34px);
}

.compact-info ul,
.compact-info ol {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding-left: 20px;
  color: var(--muted);
  font-weight: 800;
}

@media (max-width: 980px) {
  .home-page .home-hero,
  .home-showcase-grid,
  .home-pricing-grid,
  .plan-compare-grid,
  .production-grid,
  .compact-cta {
    grid-template-columns: 1fr;
  }

  .home-page .home-hero {
    min-height: auto;
  }

  .home-page .home-hero-visual {
    min-height: 460px;
  }

  .compact-module {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "media"
      "info";
  }

  .compact-info {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .home-page .home-hero-visual {
    min-height: 420px;
  }

  .home-page .home-hero-main-img {
    width: 96%;
    right: 2%;
  }

  .home-page .home-hero-product--kitchen {
    left: 50%;
    width: 68%;
  }

  .plan-compare-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .plan-compare-head strong {
    text-align: left;
  }

  .home-page .home-hero-product--wardrobe {
    right: 0;
    width: 42%;
  }

  .home-page .home-hero-product--dresser {
    right: 24%;
    width: 48%;
  }
}

/* New SaaS landing */
.saas-landing {
  --ink: #1d2433;
  --muted: #5d6878;
  --line: #e3e9f1;
  --paper: #ffffff;
  --panel: #f6f7f9;
  --accent: #f58a1f;
  --accent-dark: #d96b00;
  --navy: #0e2338;
  --navy-2: #162d45;
  --soft-blue: #edf6ff;
  background: var(--panel);
}

.saas-landing .landing-header {
  min-height: 72px;
  border-bottom: 1px solid rgba(29, 36, 51, 0.08);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 34px rgba(29, 36, 51, 0.05);
}

.saas-landing .brand img {
  width: 150px;
}

.saas-landing .top-nav {
  gap: clamp(14px, 2.5vw, 34px);
  color: #26364c;
  font-size: 14px;
}

.saas-landing .button {
  min-height: 48px;
  border-radius: 10px;
  padding: 0 22px;
}

.saas-landing .button-primary {
  background: var(--accent);
  box-shadow: 0 14px 30px rgba(245, 138, 31, 0.26);
}

.saas-landing .button-primary:hover {
  background: var(--accent-dark);
}

.saas-landing .button-ghost {
  color: var(--ink);
  border-color: rgba(29, 36, 51, 0.12);
  box-shadow: 0 12px 28px rgba(29, 36, 51, 0.06);
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(420px, 1.18fr);
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
  padding: clamp(54px, 7vw, 90px) clamp(24px, 6vw, 92px) 44px;
  background:
    radial-gradient(circle at 78% 24%, rgba(126, 187, 255, 0.22), transparent 34%),
    linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
}

.landing-hero-copy {
  display: grid;
  gap: 22px;
}

.saas-landing .eyebrow {
  display: inline-flex;
  width: max-content;
  margin: 0;
  padding: 8px 14px;
  border-radius: 9px;
  color: #0f3c69;
  background: #dcefff;
  letter-spacing: 0.04em;
}

.landing-hero h1 {
  max-width: 700px;
  font-size: clamp(46px, 5.7vw, 78px);
  line-height: 1.02;
}

.landing-hero h1 {
  color: var(--ink);
}

.landing-hero h1 span {
  display: block;
  color: var(--accent-dark);
}

.landing-hero .hero-lead {
  max-width: 610px;
  margin: 0;
  color: #39465a;
  font-size: 20px;
  line-height: 1.65;
}

.trust-bar {
  display: grid;
  grid-template-columns: repeat(6, minmax(80px, 1fr));
  gap: 10px;
  margin: 4px 0 0;
  padding: 16px;
  border: 1px solid rgba(29, 36, 51, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 45px rgba(29, 36, 51, 0.08);
  list-style: none;
}

.trust-bar li {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 74px;
  color: #243249;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.trust-bar li::before {
  content: "";
  width: 26px;
  height: 26px;
  border: 2px solid #26364c;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(245, 138, 31, 0.08), rgba(255, 255, 255, 0.7));
}

.hero-proof-bar {
  display: flex;
  gap: clamp(16px, 3vw, 34px);
  flex-wrap: wrap;
  margin-top: 20px;
  color: #415066;
  font-size: 13px;
  font-weight: 900;
}

.hero-proof-bar span {
  position: relative;
  padding-left: 22px;
}

.hero-proof-bar span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(29, 36, 51, 0.45);
  border-radius: 50%;
}

.landing-hero-product {
  position: relative;
  min-height: 520px;
}

.product-window {
  overflow: hidden;
  border: 1px solid rgba(29, 36, 51, 0.13);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(29, 36, 51, 0.16);
}

.product-window--large {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}

.product-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(29, 36, 51, 0.08);
  background: linear-gradient(180deg, #fff, #f8fafc);
}

.product-window-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d8e0ea;
}

.product-window-bar strong {
  margin-left: 8px;
  color: #26364c;
  font-size: 12px;
  font-weight: 900;
}

.product-window img {
  width: 100%;
  height: 100%;
  padding: 18px;
  object-fit: contain;
}

.floating-metric {
  position: absolute;
  display: grid;
  gap: 2px;
  min-width: 128px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: #fff;
  background: #10263c;
  box-shadow: 0 22px 44px rgba(16, 38, 60, 0.24);
}

.floating-metric span {
  color: #b7c4d5;
  font-size: 12px;
  font-weight: 900;
}

.floating-metric strong {
  color: #ffd05c;
  font-size: 24px;
  line-height: 1;
}

.floating-metric--top {
  top: 20px;
  right: 22px;
}

.floating-metric--bottom {
  right: 42px;
  bottom: 24px;
}

.landing-section {
  padding: clamp(54px, 7vw, 84px) clamp(24px, 6vw, 92px);
  border-bottom: 1px solid rgba(29, 36, 51, 0.08);
  background: #fff;
}

.landing-section-head {
  display: grid;
  gap: 12px;
  max-width: 860px;
  margin-bottom: 34px;
}

.landing-section-head--center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.landing-section-head--center .eyebrow {
  margin-right: auto;
  margin-left: auto;
}

.landing-section-head h2 {
  font-size: clamp(32px, 4vw, 48px);
}

.landing-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  font-weight: 800;
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.workflow-card,
.audience-grid article,
.screen-card,
.pricing-card,
.faq-grid article,
.testimonials-grid article {
  border: 1px solid rgba(29, 36, 51, 0.09);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(29, 36, 51, 0.08);
}

.workflow-card {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 20px;
}

.workflow-card img {
  width: 100%;
  height: 210px;
  object-fit: contain;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafc, #eef4f8);
}

.workflow-card span {
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: 13px;
  font-weight: 900;
}

.workflow-card h3,
.audience-grid h3,
.screen-card h3,
.pricing-card h3,
.faq-grid h3,
.testimonials-grid h3 {
  margin: 0;
  color: var(--ink);
}

.workflow-card p,
.audience-grid p,
.screen-card p,
.pricing-card p,
.faq-grid p,
.testimonials-grid p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.audience-section {
  background: #fbfcfe;
}

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

.audience-grid article {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 20px;
  min-height: 132px;
  padding: 28px;
}

.audience-grid article span {
  grid-row: span 2;
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 2px solid #2c3a4f;
  border-radius: 16px;
  color: #2c3a4f;
  font-weight: 900;
}

.pro-features {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 34px;
  color: #fff;
  background:
    radial-gradient(circle at 72% 12%, rgba(67, 105, 145, 0.28), transparent 30%),
    linear-gradient(135deg, #091b2d 0%, #122c45 100%);
}

.pro-features .landing-section-head {
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr;
  align-items: center;
  margin-bottom: 0;
}

.pro-features h2,
.pro-features h3 {
  color: #fff;
}

.pro-features .landing-section-head p {
  color: #c5d3e2;
}

.pro-pill {
  display: inline-grid;
  place-items: center;
  width: 98px;
  height: 54px;
  margin: 0;
  border: 2px solid #ffd05c;
  border-radius: 14px;
  color: #ffd05c;
  font-size: 26px;
  font-weight: 900;
}

.feature-tile-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.feature-tile-grid article {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-height: 120px;
  padding: 12px;
  text-align: center;
}

.feature-tile-grid article span {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.feature-tile-grid p {
  color: #c5d3e2;
  font-size: 13px;
}

.pro-offer-card {
  align-self: start;
  display: grid;
  gap: 12px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
}

.pro-offer-card span {
  color: #ffd05c;
  font-size: 18px;
  font-weight: 900;
}

.pro-offer-card h3 {
  font-size: 40px;
}

.pro-offer-card p,
.pro-offer-card small {
  color: #d8e3ef;
  font-weight: 800;
}

.pro-offer-card ul,
.pricing-card ul {
  display: grid;
  gap: 10px;
  margin: 8px 0;
  padding: 0;
  list-style: none;
}

.pro-offer-card li,
.pricing-card li {
  position: relative;
  padding-left: 24px;
  font-weight: 800;
}

.pro-offer-card li::before,
.pricing-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.screens-section {
  background:
    radial-gradient(circle at 20% 0%, rgba(245, 138, 31, 0.1), transparent 26%),
    #f6f7f9;
}

.screens-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.screen-card {
  overflow: hidden;
  display: grid;
}

.screen-card--wide {
  grid-column: span 2;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  align-items: center;
}

.screen-card img {
  width: 100%;
  height: 330px;
  padding: 20px;
  object-fit: contain;
  background: linear-gradient(135deg, #f7fbff, #edf2f7);
}

.screen-card div {
  display: grid;
  gap: 10px;
  padding: 28px;
}

.pricing-section {
  background: #fff;
}

.pricing-grid-simple {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 440px));
  justify-content: center;
  gap: 24px;
}

.pricing-card {
  display: grid;
  gap: 18px;
  padding: 32px;
}

.pricing-card--pro {
  border-color: rgba(245, 138, 31, 0.4);
  background: linear-gradient(180deg, #fffaf5, #fff);
  box-shadow: 0 28px 70px rgba(245, 138, 31, 0.14);
}

.plan-label {
  width: max-content;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--accent-dark);
  background: #fff0df;
  font-size: 12px;
  font-weight: 900;
}

.pricing-card h3 {
  font-size: clamp(34px, 4vw, 48px);
}

.pricing-card h3 small {
  color: var(--muted);
  font-size: 18px;
}

.testimonials-section,
.faq-section {
  background: #fff;
}

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

.testimonials-grid article {
  display: grid;
  gap: 12px;
  padding: 28px;
}

.testimonials-grid span {
  color: #ffb020;
  font-weight: 900;
}

.testimonials-grid strong {
  color: var(--ink);
}

.testimonials-grid small {
  color: var(--muted);
  font-weight: 900;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
}

.faq-grid article {
  position: relative;
  padding: 18px 54px 18px 20px;
  box-shadow: 0 12px 30px rgba(29, 36, 51, 0.05);
}

.faq-grid article::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 24px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #233148;
  border-bottom: 2px solid #233148;
  transform: rotate(45deg);
}

.faq-grid h3 {
  font-size: 15px;
}

.faq-grid p {
  margin-top: 8px;
  font-size: 14px;
}

.landing-final {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(52px, 7vw, 86px) clamp(24px, 6vw, 92px);
  color: #fff;
  background: var(--navy);
}

.landing-final .eyebrow {
  color: #ffd05c;
  background: rgba(255, 208, 92, 0.12);
}

.landing-final h2 {
  max-width: 860px;
}

.landing-final .button-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 1120px) {
  .landing-hero,
  .pro-features,
  .screen-card--wide {
    grid-template-columns: 1fr;
  }

  .trust-bar,
  .workflow-grid,
  .feature-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-hero-product {
    min-height: 460px;
  }
}

@media (max-width: 820px) {
  .landing-header {
    grid-template-columns: 1fr;
  }

  .audience-grid,
  .screens-grid,
  .pricing-grid-simple,
  .testimonials-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .screen-card--wide {
    grid-column: auto;
  }

  .landing-final {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .trust-bar,
  .workflow-grid,
  .feature-tile-grid {
    grid-template-columns: 1fr;
  }

  .landing-hero {
    padding-top: 34px;
  }

  .landing-hero-product {
    min-height: 360px;
  }

  .floating-metric {
    display: none;
  }
}

/* Landing V2: compact professional product layout */
.landing-v2 {
  background: #f6f7f9;
}

.landing-v2 .landing-header {
  padding-right: clamp(24px, 4vw, 56px);
  padding-left: clamp(24px, 4vw, 56px);
}

.landing-v2 main > *,
.landing-v2 .site-footer {
  --content: min(1200px, calc(100vw - 48px));
}

.landing-v2 .landing-hero,
.landing-v2 .landing-section,
.landing-v2 .trust-strip,
.landing-v2 .landing-final {
  padding-right: max(24px, calc((100vw - 1200px) / 2));
  padding-left: max(24px, calc((100vw - 1200px) / 2));
}

.landing-v2 .landing-hero {
  grid-template-columns: minmax(320px, 0.78fr) minmax(520px, 1.22fr);
  min-height: 610px;
  gap: clamp(34px, 5vw, 70px);
  padding-top: clamp(46px, 5vw, 72px);
  padding-bottom: 38px;
  background:
    radial-gradient(circle at 82% 18%, rgba(75, 151, 237, 0.18), transparent 34%),
    radial-gradient(circle at 8% 18%, rgba(245, 138, 31, 0.08), transparent 25%),
    #f6f7f9;
}

.landing-v2 .landing-hero-copy {
  gap: 20px;
}

.landing-v2 .eyebrow {
  min-height: 0;
  padding: 7px 13px;
  border-radius: 8px;
  color: #174266;
  background: #dcebff;
  font-size: 12px;
}

.landing-v2 .landing-hero h1 {
  max-width: 620px;
  font-size: clamp(42px, 5vw, 66px);
  line-height: 1.03;
}

.landing-v2 .landing-hero .hero-lead {
  max-width: 560px;
  font-size: 18px;
  line-height: 1.55;
}

.landing-v2 .hero-actions {
  gap: 14px;
}

.landing-v2 .button {
  min-height: 46px;
  border-radius: 9px;
  padding: 0 22px;
  font-size: 14px;
}

.landing-v2 .landing-hero-product {
  min-height: 490px;
  transform: translateY(4px);
}

.landing-v2 .app-mockup {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(29, 36, 51, 0.1);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(29, 36, 51, 0.14);
}

.landing-v2 .app-mockup--hero {
  grid-template-columns: 118px minmax(0, 1fr) 190px;
  min-height: 470px;
}

.mock-sidebar,
.mock-main,
.mock-sidepanel {
  min-width: 0;
}

.mock-sidebar {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 20px 14px;
  border-right: 1px solid #edf1f5;
  background: #fbfcfd;
}

.mock-sidebar strong {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 12px;
}

.mock-sidebar span {
  padding: 10px 8px;
  border: 1px solid #eef2f6;
  border-radius: 10px;
  color: #657184;
  background: #fff;
  font-size: 11px;
  font-weight: 900;
}

.mock-sidebar .is-active {
  color: var(--accent-dark);
  border-color: rgba(245, 138, 31, 0.26);
  background: #fff4e8;
}

.mock-main {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 16px;
  padding: 26px;
}

.mock-topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.mock-topbar strong {
  color: var(--ink);
  font-size: 20px;
}

.mock-topbar small {
  color: var(--muted);
  font-weight: 900;
}

.mock-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mock-form-grid label {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid #e7edf4;
  border-radius: 10px;
  color: #6a7484;
  font-size: 11px;
  font-weight: 900;
}

.mock-form-grid b {
  color: var(--ink);
  font-size: 14px;
}

.cut-board {
  position: relative;
  min-height: 275px;
  border: 2px solid #856647;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(95, 62, 24, 0.12), rgba(255, 255, 255, 0.08)),
    repeating-linear-gradient(90deg, #b78e5c 0 22px, #cda775 22px 42px, #a97f50 42px 58px);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22);
}

.cut-board .piece,
.cut-board--large .piece {
  position: absolute;
  display: grid;
  place-items: center;
  border: 2px solid #217b67;
  border-radius: 5px;
  color: #145844;
  background: repeating-linear-gradient(0deg, rgba(97, 198, 158, 0.92) 0 8px, rgba(126, 215, 178, 0.92) 8px 16px);
  font-size: 10px;
  font-weight: 900;
}

.cut-board .p1 { left: 4%; top: 8%; width: 31%; height: 38%; }
.cut-board .p2 { left: 37%; top: 8%; width: 31%; height: 38%; }
.cut-board .p3 { left: 4%; top: 50%; width: 42%; height: 20%; }
.cut-board .p4 { left: 49%; top: 50%; width: 45%; height: 20%; }
.cut-board .p5 { left: 4%; top: 74%; width: 58%; height: 18%; }
.cut-board .p6 { left: 70%; top: 8%; width: 24%; height: 38%; }

.mock-sidepanel {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 24px 18px;
  border-left: 1px solid #edf1f5;
  background: #fbfcfd;
}

.mock-pro {
  width: max-content;
  padding: 5px 10px;
  border-radius: 999px;
  color: #9a5a00;
  background: #fff2d7;
  font-size: 12px;
  font-weight: 900;
}

.mock-sidepanel h3 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
}

.mock-sidepanel dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.mock-sidepanel dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #e8edf3;
}

.mock-sidepanel dt,
.mock-sidepanel dd {
  margin: 0;
  font-size: 12px;
  font-weight: 900;
}

.mock-sidepanel dt {
  color: #6b7585;
}

.mock-sidepanel dd {
  color: var(--ink);
}

.mock-sidepanel button {
  min-height: 38px;
  border: 1px solid #dfe7ef;
  border-radius: 9px;
  color: #1d2433;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.trust-strip {
  padding-top: 0;
  padding-bottom: 42px;
  background: #f6f7f9;
}

.trust-strip-inner {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(29, 36, 51, 0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(29, 36, 51, 0.08);
}

.trust-strip-inner span {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 64px;
  color: #233148;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.trust-strip-inner span::before {
  content: "";
  width: 26px;
  height: 26px;
  border: 2px solid #27364d;
  border-radius: 8px;
}

.proof-row {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 3vw, 34px);
  flex-wrap: wrap;
  margin-top: 28px;
  color: #4d586a;
  font-size: 13px;
  font-weight: 900;
}

.proof-row span {
  position: relative;
  padding-left: 22px;
}

.proof-row span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 10px;
  height: 10px;
  border: 2px solid #8a96a7;
  border-radius: 50%;
}

.landing-v2 .landing-section {
  padding-top: clamp(56px, 7vw, 92px);
  padding-bottom: clamp(56px, 7vw, 92px);
}

.landing-v2 .landing-section-head {
  max-width: 760px;
  margin-bottom: 32px;
}

.landing-v2 .landing-section-head h2 {
  font-size: clamp(30px, 3.6vw, 44px);
}

.landing-v2 .landing-section-head p {
  font-size: 16px;
}

.landing-v2 .workflow-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.landing-v2 .workflow-card {
  min-height: 330px;
  gap: 12px;
  padding: 20px;
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(29, 36, 51, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.landing-v2 .workflow-card:hover,
.landing-v2 .product-row:hover,
.landing-v2 .pricing-card:hover,
.landing-v2 .testimonials-grid article:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 138, 31, 0.26);
  box-shadow: 0 22px 54px rgba(29, 36, 51, 0.11);
}

.landing-v2 .workflow-card span {
  width: 26px;
  height: 26px;
  font-size: 12px;
}

.landing-v2 .workflow-card h3 {
  font-size: 19px;
}

.landing-v2 .workflow-card p {
  font-size: 14px;
}

.mini-screen {
  display: grid;
  place-items: center;
  height: 178px;
  overflow: hidden;
  border-radius: 14px;
  background: #f5f7fa;
}

.mini-screen img {
  width: 100%;
  height: 100%;
  padding: 12px;
  object-fit: contain;
}

.mini-screen--cut {
  padding: 14px;
}

.cut-board--mini {
  width: 100%;
  min-height: 138px;
}

.cut-board--mini i {
  position: absolute;
  border: 2px solid #237762;
  border-radius: 5px;
  background: repeating-linear-gradient(0deg, rgba(99, 199, 160, 0.95) 0 7px, rgba(131, 219, 180, 0.95) 7px 14px);
}

.cut-board--mini i:nth-child(1) { left: 8%; top: 12%; width: 36%; height: 34%; }
.cut-board--mini i:nth-child(2) { left: 48%; top: 12%; width: 36%; height: 34%; }
.cut-board--mini i:nth-child(3) { left: 8%; top: 52%; width: 50%; height: 18%; }
.cut-board--mini i:nth-child(4) { left: 62%; top: 52%; width: 22%; height: 34%; }
.cut-board--mini i:nth-child(5) { left: 8%; top: 75%; width: 50%; height: 13%; }

.mini-screen--report {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-content: start;
  padding: 18px;
}

.mini-screen--report b,
.report-export b {
  display: grid;
  place-items: center;
  min-height: 42px;
  border-radius: 10px;
  color: #0f7a52;
  background: #e9faf1;
  font-size: 12px;
}

.mini-screen--report table {
  grid-column: 1 / -1;
  width: 100%;
  color: #647082;
  font-size: 11px;
}

.product-screens {
  background: #f6f7f9;
}

.product-row {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  align-items: center;
  gap: clamp(26px, 4vw, 58px);
  margin-top: 26px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(29, 36, 51, 0.08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(29, 36, 51, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-row--reverse .product-shot {
  order: 2;
}

.product-shot {
  display: grid;
  place-items: center;
  min-height: 330px;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 12%, rgba(245, 138, 31, 0.1), transparent 26%),
    linear-gradient(135deg, #f8fbff, #edf2f7);
}

.product-shot img {
  width: 100%;
  max-height: 315px;
  padding: 24px;
  object-fit: contain;
}

.product-copy {
  display: grid;
  gap: 13px;
}

.product-copy span {
  width: max-content;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--accent-dark);
  background: #fff0df;
  font-size: 12px;
  font-weight: 900;
}

.product-copy h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.08;
}

.product-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.65;
}

.product-shot--mock,
.product-shot--report {
  padding: 24px;
}

.cut-board--large {
  width: min(100%, 680px);
  min-height: 300px;
}

.report-export {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  gap: 14px;
  justify-content: center;
  margin-bottom: 20px;
}

.report-table {
  width: min(100%, 680px);
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(29, 36, 51, 0.08);
}

.report-table th,
.report-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #edf1f5;
  color: #536073;
  font-size: 13px;
  text-align: left;
}

.report-table th {
  color: var(--ink);
  background: #f8fafc;
  font-weight: 900;
}

.landing-v2 .audience-section {
  background: #fff;
}

.landing-v2 .audience-grid {
  gap: 26px;
}

.landing-v2 .audience-grid article {
  min-height: 132px;
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(29, 36, 51, 0.06);
}

.landing-v2 .pro-features {
  grid-template-columns: 1fr;
  gap: 30px;
  color: #fff;
  background:
    radial-gradient(circle at 72% 18%, rgba(66, 105, 145, 0.22), transparent 32%),
    linear-gradient(135deg, #102338 0%, #162c43 100%);
}

.landing-v2 .pro-features .landing-section-head {
  grid-template-columns: auto 1fr;
  max-width: 1120px;
}

.landing-v2 .pro-pill {
  width: auto;
  height: auto;
  padding: 7px 15px;
  border-width: 1px;
  border-color: #f6bf4f;
  border-radius: 10px;
  font-size: 19px;
}

.landing-v2 .feature-tile-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.landing-v2 .feature-tile-grid article {
  min-height: 132px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.landing-v2 .feature-tile-grid article:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.07);
}

.landing-v2 .pricing-grid-simple {
  grid-template-columns: repeat(2, minmax(280px, 430px));
}

.landing-v2 .pricing-card {
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(29, 36, 51, 0.07);
}

.landing-v2 .testimonials-grid article,
.landing-v2 .faq-grid article {
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(29, 36, 51, 0.06);
}

.landing-v2 .faq-grid {
  max-width: 1120px;
  margin: 0 auto;
}

.landing-v2 .landing-final {
  padding-top: clamp(46px, 6vw, 72px);
  padding-bottom: clamp(46px, 6vw, 72px);
  background: #0f2237;
}

.reveal-on-scroll {
  animation: tecadFadeUp 0.7s ease both;
  animation-timeline: view();
  animation-range: entry 0% cover 24%;
}

@keyframes tecadFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    animation: none;
  }

  .landing-v2 .workflow-card,
  .product-row,
  .landing-v2 .pricing-card,
  .landing-v2 .testimonials-grid article {
    transition: none;
  }
}

@media (max-width: 1120px) {
  .landing-v2 .landing-hero,
  .product-row,
  .product-row--reverse,
  .landing-v2 .app-mockup--hero {
    grid-template-columns: 1fr;
  }

  .product-row--reverse .product-shot {
    order: 0;
  }

  .landing-v2 .landing-hero-product {
    min-height: auto;
  }

  .landing-v2 .app-mockup--hero {
    min-height: auto;
  }

  .mock-sidepanel {
    border-left: 0;
    border-top: 1px solid #edf1f5;
  }

  .trust-strip-inner,
  .landing-v2 .workflow-grid,
  .landing-v2 .feature-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .landing-v2 .landing-header {
    grid-template-columns: 1fr;
  }

  .landing-v2 .top-nav {
    justify-content: flex-start;
  }

  .landing-v2 .mock-form-grid,
  .landing-v2 .audience-grid,
  .landing-v2 .pricing-grid-simple,
  .landing-v2 .testimonials-grid,
  .landing-v2 .faq-grid {
    grid-template-columns: 1fr;
  }

  .trust-strip-inner,
  .landing-v2 .workflow-grid,
  .landing-v2 .feature-tile-grid {
    grid-template-columns: 1fr;
  }

  .product-shot {
    min-height: 260px;
  }

  .report-table th,
  .report-table td {
    padding: 10px 8px;
    font-size: 11px;
  }
}

@media (max-width: 560px) {
  .landing-v2 .landing-hero,
  .landing-v2 .landing-section,
  .landing-v2 .trust-strip,
  .landing-v2 .landing-final {
    padding-right: 18px;
    padding-left: 18px;
  }

  .landing-v2 .landing-hero h1 {
    font-size: clamp(36px, 13vw, 48px);
  }

  .mock-main {
    padding: 18px;
  }

  .cut-board {
    min-height: 220px;
  }
}

/* Real landing screenshots with graceful fallbacks */
.landing-v2 {
  overflow-x: hidden;
}

.landing-v2 .landing-hero,
.landing-v2 .trust-strip,
.landing-v2 .landing-section,
.landing-v2 .landing-final,
.landing-v2 .site-footer {
  width: min(1240px, calc(100% - 48px));
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}

.landing-v2 .landing-hero {
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  align-items: center;
  min-height: 0;
}

.landing-v2 .landing-hero-copy,
.landing-v2 .landing-hero-product {
  min-width: 0;
}

.landing-v2 .landing-hero-product {
  min-height: 0;
}

.landing-v2 .screenshot-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(238, 244, 250, 0.92)),
    radial-gradient(circle at 18% 18%, rgba(245, 138, 31, 0.12), transparent 30%),
    #f8fafc;
  box-shadow: 0 18px 48px rgba(29, 36, 51, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.landing-v2 .screenshot-frame:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(245, 138, 31, 0.28);
  box-shadow: 0 24px 58px rgba(29, 36, 51, 0.12);
}

.landing-v2 .screenshot-frame img {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: #fff;
  object-fit: cover;
}

.landing-v2 .screenshot-frame figcaption {
  z-index: 1;
  display: none;
  place-items: center;
  width: calc(100% - 42px);
  min-height: 140px;
  padding: 24px;
  border: 1px dashed rgba(29, 36, 51, 0.18);
  border-radius: 18px;
  color: #526174;
  background: rgba(255, 255, 255, 0.58);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 900;
  text-align: center;
}

.landing-v2 .screenshot-frame img[hidden] + figcaption {
  display: grid;
}

.landing-v2 .hero-product-screen {
  min-height: 0;
  aspect-ratio: 16 / 10;
  border-radius: 26px;
}

.landing-v2 .hero-product-screen img {
  object-fit: contain;
}

.landing-v2 .mini-screen {
  padding: 0;
  background: transparent;
  height: auto;
  aspect-ratio: 4 / 3;
}

.landing-v2 .mini-screen .screenshot-frame {
  min-height: 0;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  box-shadow: none;
}

.landing-v2 .mini-screen .screenshot-frame figcaption {
  width: calc(100% - 28px);
  min-height: 96px;
  padding: 16px;
  border-radius: 12px;
  font-size: 14px;
}

.landing-v2 .product-shot {
  padding: 0;
  min-height: 0;
  aspect-ratio: 16 / 10;
}

.landing-v2 .product-shot .screenshot-frame {
  min-height: 0;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  box-shadow: none;
}

.landing-v2 .product-shot .screenshot-frame img {
  object-fit: contain;
}

.landing-v2 .reports-screen img,
.landing-v2 .cutting-screen img {
  object-fit: contain;
}

@media (max-width: 820px) {
  .landing-v2 .landing-hero,
  .landing-v2 .trust-strip,
  .landing-v2 .landing-section,
  .landing-v2 .landing-final,
  .landing-v2 .site-footer {
    width: min(100% - 36px, 1240px);
  }

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

  .landing-v2 .hero-product-screen {
    aspect-ratio: 4 / 3;
  }

  .landing-v2 .product-shot .screenshot-frame {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 980px) {
  .landing-v2 .landing-hero {
    grid-template-columns: 1fr;
  }
}

.seo-page {
  background:
    linear-gradient(180deg, #ffffff 0%, #f6f9fc 44%, #ffffff 100%);
}

.seo-landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(52px, 7vw, 92px) clamp(20px, 6vw, 92px);
  border-bottom: 1px solid var(--line);
}

.seo-landing-hero h1 {
  max-width: 880px;
  font-size: clamp(42px, 5.6vw, 76px);
}

.seo-hero-shot {
  margin: 0;
  padding: clamp(12px, 2vw, 22px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.seo-hero-shot img,
.compact-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.seo-content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding: clamp(42px, 6vw, 84px) clamp(20px, 6vw, 92px);
}

.seo-content-grid article,
.faq-grid--compact article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(21, 32, 51, 0.07);
}

.seo-content-grid article {
  padding: clamp(22px, 3vw, 34px);
}

.seo-content-grid h2 {
  margin-bottom: 14px;
  font-size: clamp(26px, 3vw, 36px);
}

.seo-content-grid p,
.seo-content-grid li,
.landing-final p {
  color: var(--muted);
}

.seo-content-grid a,
.landing-final p a,
.compact-info a,
.use-case-grid a {
  color: var(--blue-dark);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.seo-content-grid ul {
  margin: 0;
  padding-left: 20px;
}

.seo-content-grid li + li {
  margin-top: 10px;
}

.faq-grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.faq-grid--compact article {
  box-shadow: none;
}

.use-case-grid article {
  min-height: 210px;
}

@media (max-width: 980px) {
  .seo-landing-hero,
  .seo-content-grid {
    grid-template-columns: 1fr;
  }

  .faq-grid--compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .seo-landing-hero,
  .seo-content-grid {
    padding-inline: 18px;
  }

  .seo-landing-hero h1 {
    font-size: clamp(34px, 12vw, 48px);
  }
}

/* SEO stage 2 conversion landings */
.conversion-page {
  color: #172033;
  background: #f7f9fc;
}

.conversion-page img {
  max-width: 100%;
}

.conversion-header {
  background: rgba(255, 255, 255, 0.96);
}

.conversion-main {
  overflow: hidden;
}

.conversion-hero,
.conversion-section,
.conversion-cta-strip,
.conversion-final,
.conversion-footer {
  width: min(1240px, calc(100% - 48px));
  margin-right: auto;
  margin-left: auto;
}

.conversion-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
  align-items: center;
  gap: clamp(28px, 5vw, 68px);
  padding: clamp(50px, 7vw, 92px) 0 clamp(36px, 5vw, 62px);
}

.conversion-hero h1 {
  max-width: 850px;
  font-size: clamp(40px, 5.4vw, 74px);
  line-height: 0.98;
}

.conversion-hero .hero-lead {
  max-width: 720px;
  color: #435066;
  font-size: clamp(17px, 1.55vw, 20px);
}

.conversion-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0;
}

.conversion-benefits span {
  position: relative;
  min-height: 52px;
  padding: 12px 14px 12px 36px;
  border: 1px solid #dfe7f0;
  border-radius: 8px;
  color: #273247;
  background: #fff;
  font-size: 14px;
  font-weight: 900;
}

.conversion-benefits span::before,
.conversion-list li::before,
.conversion-related-card::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 18px;
  width: 10px;
  height: 10px;
  border: 2px solid #0f8b7d;
  border-radius: 50%;
}

.conversion-hero-media {
  margin: 0;
}

.conversion-screen-frame {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dfe7f0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 72px rgba(23, 32, 51, 0.14);
}

.conversion-hero-media .conversion-screen-frame {
  aspect-ratio: 16 / 10;
  padding: clamp(10px, 1.5vw, 18px);
}

.conversion-screen-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7px;
}

.conversion-cta-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-bottom: clamp(34px, 5vw, 60px);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(224, 122, 34, 0.22);
  border-radius: 10px;
  background: #fff7ef;
  box-shadow: 0 18px 46px rgba(224, 122, 34, 0.1);
}

.conversion-cta-strip h2,
.conversion-final h2 {
  max-width: 860px;
  font-size: clamp(27px, 3.4vw, 44px);
}

.conversion-cta-strip p,
.conversion-final p {
  margin: 10px 0 0;
  color: #526174;
  font-weight: 800;
}

.conversion-section {
  padding: clamp(54px, 7vw, 92px) 0;
  border-top: 1px solid #e1e8f1;
}

.conversion-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: end;
  margin-bottom: 30px;
}

.conversion-section-head p {
  margin: 0;
  color: #526174;
  font-size: 17px;
  font-weight: 800;
}

.conversion-card-grid,
.conversion-output-grid,
.conversion-proof-grid,
.conversion-related-grid,
.conversion-faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.conversion-card,
.conversion-output,
.conversion-proof,
.conversion-related-card,
.conversion-faq-grid details {
  border: 1px solid #dfe7f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(23, 32, 51, 0.07);
}

.conversion-card,
.conversion-output,
.conversion-proof,
.conversion-related-card {
  padding: clamp(20px, 3vw, 28px);
}

.conversion-card p,
.conversion-output p,
.conversion-proof p,
.conversion-related-card p,
.conversion-longform p,
.conversion-faq-grid p {
  color: #526174;
}

.conversion-card p,
.conversion-output p,
.conversion-proof p,
.conversion-related-card p {
  margin: 0;
  font-weight: 800;
}

.conversion-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  counter-reset: steps;
}

.conversion-step {
  position: relative;
  min-height: 230px;
  padding: 22px;
  border: 1px solid #dfe7f0;
  border-radius: 8px;
  background: #fff;
}

.conversion-step::before {
  counter-increment: steps;
  content: counter(steps);
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 20px;
  border-radius: 8px;
  color: #fff;
  background: #2357a5;
  font-weight: 900;
}

.conversion-step p {
  margin: 0;
  color: #526174;
  font-weight: 800;
}

.conversion-screens {
  display: grid;
  gap: 22px;
}

.conversion-screen-row {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  align-items: center;
  gap: clamp(22px, 4vw, 54px);
  padding: clamp(18px, 3vw, 32px);
  border: 1px solid #dfe7f0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(23, 32, 51, 0.07);
}

.conversion-screen-row:nth-child(even) .conversion-screen-copy {
  order: 2;
}

.conversion-screen-row .conversion-screen-frame {
  aspect-ratio: 3 / 2;
  padding: 12px;
  box-shadow: none;
}

.conversion-screen-copy span {
  display: inline-flex;
  width: max-content;
  margin-bottom: 10px;
  padding: 6px 11px;
  border-radius: 999px;
  color: #9a5a00;
  background: #fff0df;
  font-size: 12px;
  font-weight: 900;
}

.conversion-screen-copy p {
  color: #526174;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.65;
}

.conversion-longform {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(320px, 1.02fr);
  gap: 22px;
  align-items: start;
}

.conversion-longform article {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid #dfe7f0;
  border-radius: 8px;
  background: #fff;
}

.conversion-longform h3 {
  font-size: clamp(22px, 2.3vw, 30px);
}

.conversion-list {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.conversion-list li {
  position: relative;
  padding-left: 34px;
  color: #465368;
  font-weight: 800;
}

.conversion-list li::before {
  top: 7px;
  left: 8px;
}

.conversion-mid-cta,
.conversion-final {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 10px;
  background: #11263d;
  color: #fff;
}

.conversion-mid-cta p,
.conversion-final p {
  color: #d9e2ed;
}

.conversion-mid-cta .eyebrow,
.conversion-final .eyebrow {
  color: #ffd4ad;
}

.conversion-mid-cta .button-ghost,
.conversion-final .button-ghost {
  border-color: rgba(255, 255, 255, 0.36);
  color: #fff;
  background: transparent;
}

.conversion-proof {
  min-height: 170px;
}

.conversion-proof strong {
  display: block;
  margin-bottom: 8px;
  color: #2357a5;
  font-family: "Space Grotesk", "Manrope", Arial, sans-serif;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
}

.conversion-related-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding-left: 42px;
}

.conversion-related-card::before {
  left: 20px;
  top: 30px;
}

.conversion-related-card strong {
  color: #172033;
}

.conversion-related-card:hover {
  border-color: rgba(35, 87, 165, 0.35);
  box-shadow: 0 20px 50px rgba(23, 32, 51, 0.11);
}

.conversion-faq-grid details {
  overflow: hidden;
}

.conversion-faq-grid summary {
  cursor: pointer;
  padding: 20px 22px;
  color: #172033;
  font-weight: 900;
}

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

.conversion-faq-grid summary::after {
  content: "+";
  float: right;
  color: #2357a5;
  font-weight: 900;
}

.conversion-faq-grid details[open] summary::after {
  content: "-";
}

.conversion-faq-grid p {
  margin: 0;
  padding: 0 22px 22px;
  font-weight: 800;
}

.conversion-footer {
  display: grid;
  grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.25fr) minmax(220px, 0.72fr);
  gap: 28px;
  padding: 38px 0 46px;
  color: #526174;
  font-weight: 800;
}

.conversion-footer h2,
.conversion-footer h3 {
  color: #172033;
}

.conversion-footer h2 {
  margin: 0 0 8px;
  font-size: 28px;
}

.conversion-footer h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

.conversion-footer nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.conversion-footer a {
  color: #2357a5;
  font-weight: 900;
}

.conversion-main--compact .conversion-hero--compact {
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.18fr);
  gap: clamp(22px, 4vw, 52px);
  padding: clamp(34px, 5vw, 58px) 0 clamp(26px, 4vw, 42px);
}

.conversion-main--compact .conversion-hero h1 {
  max-width: 700px;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.02;
}

.conversion-main--compact .conversion-hero .hero-lead {
  max-width: 620px;
  margin: 18px 0;
  font-size: clamp(16px, 1.35vw, 18px);
}

.conversion-benefits--compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 18px 0 22px;
}

.conversion-benefits--compact span {
  min-height: 44px;
  padding: 10px 12px 10px 32px;
  font-size: 13px;
}

.conversion-benefits--compact span::before {
  top: 15px;
  width: 8px;
  height: 8px;
}

.conversion-section--tight {
  padding: clamp(32px, 5vw, 56px) 0;
}

.conversion-section--kitchen-demo {
  padding-top: clamp(18px, 3vw, 30px);
}

.conversion-section-head--compact {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin-bottom: 22px;
}

.conversion-section-head--compact h2 {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
}

.conversion-section-head--compact p {
  font-size: 15px;
}

.conversion-feature-grid,
.conversion-process-strip,
.conversion-module-grid,
.conversion-topic-grid {
  display: grid;
  gap: 16px;
}

.conversion-feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}

.conversion-feature-card,
.conversion-process-strip article,
.conversion-module-grid a,
.conversion-topic-card {
  border: 1px solid #dfe7f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(23, 32, 51, 0.07);
}

.conversion-feature-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.conversion-feature-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 7px;
  background: #f5f8fb;
}

.conversion-feature-card strong,
.conversion-module-grid strong,
.conversion-topic-card strong {
  color: #172033;
}

.conversion-feature-card strong,
.conversion-process-strip strong,
.conversion-module-grid strong {
  font-size: 18px;
}

.conversion-feature-card p,
.conversion-process-strip p,
.conversion-module-grid p,
.conversion-topic-card p {
  margin: 0;
  color: #526174;
  font-size: 14px;
  font-weight: 800;
}

.conversion-cta-strip--compact {
  margin-bottom: 0;
}

.landing-kitchen-demo {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(380px, 1.16fr);
  align-items: center;
  gap: clamp(22px, 4vw, 44px);
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(35, 87, 165, 0.12);
  border-radius: 16px;
  background:
    radial-gradient(460px 220px at 100% 0%, rgba(35, 87, 165, 0.08), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.96));
  box-shadow: 0 22px 58px rgba(23, 32, 51, 0.08);
}

.landing-kitchen-demo__copy {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.landing-kitchen-demo__copy h2 {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.04;
}

.landing-kitchen-demo__copy p:not(.eyebrow) {
  margin: 12px 0 0;
  max-width: 58ch;
  color: #526174;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  font-weight: 800;
}

.landing-kitchen-demo__list {
  margin-top: 0;
}

.landing-kitchen-demo__media {
  margin: 0;
  min-width: 0;
}

.landing-kitchen-demo__frame {
  padding: 12px;
  border: 1px solid #dfe7f0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 48px rgba(23, 32, 51, 0.08);
}

.landing-kitchen-demo__viewport {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  min-height: 320px;
  border-radius: 12px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.9), rgba(244, 247, 251, 0.95)),
    linear-gradient(180deg, #fbfcfe, #eef3f8);
}

.landing-kitchen-demo__motion {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  animation: landing-kitchen-demo-float 14s ease-in-out infinite alternate;
  transform-origin: center center;
}

.landing-kitchen-demo__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(1.02) contrast(1.01);
}

.landing-kitchen-demo__status,
.landing-kitchen-demo__chips span {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(23, 32, 51, 0.12);
  backdrop-filter: blur(12px);
}

.landing-kitchen-demo__status {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #202b3d;
  font-size: 12px;
  font-weight: 900;
}

.landing-kitchen-demo__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #18a957;
  box-shadow: 0 0 0 4px rgba(24, 169, 87, 0.14);
}

.landing-kitchen-demo__chips {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.landing-kitchen-demo__chips span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #202b3d;
  font-size: 11px;
  font-weight: 900;
}

.landing-ai-render {
  position: relative;
  min-height: clamp(620px, 78vw, 980px);
  overflow: hidden;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid rgba(249, 115, 22, 0.18);
  border-radius: 28px;
  background: #f5efe6;
  box-shadow: 0 28px 78px rgba(23, 32, 51, 0.12);
  isolation: isolate;
}

.landing-ai-render__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transform: scale(1.01);
}

.landing-ai-render__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255, 252, 247, 0.98) 0%, rgba(255, 252, 247, 0.9) 31%, rgba(255, 252, 247, 0.36) 57%, rgba(255, 252, 247, 0.1) 100%),
    linear-gradient(180deg, rgba(255, 252, 247, 0.82) 0%, rgba(255, 252, 247, 0.1) 43%, rgba(255, 252, 247, 0.25) 100%);
}

.landing-ai-render__content {
  display: grid;
  min-height: inherit;
  align-content: space-between;
  gap: clamp(32px, 8vw, 420px);
}

.landing-ai-render__copy {
  display: grid;
  gap: 18px;
  max-width: 490px;
}

.landing-ai-render__copy h2 {
  margin: 0;
  color: #101828;
  font-size: clamp(36px, 5.4vw, 66px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.landing-ai-render__copy h2 span {
  color: #2f835f;
}

.landing-ai-render__copy p:not(.eyebrow) {
  margin: 0;
  color: #182232;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.58;
}

.landing-ai-render__badge {
  justify-self: start;
  margin: 0;
  padding: 9px 14px;
  border-radius: 999px;
  color: #4f2dbf;
  background: #ded2ff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.landing-ai-render__benefits {
  display: grid;
  gap: 14px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.landing-ai-render__benefits li {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 48px;
  padding-left: 64px;
  color: #101828;
}

.landing-ai-render__benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .22), transparent),
    #2f9468;
  box-shadow: 0 12px 24px rgba(47, 148, 104, .24);
}

.landing-ai-render__benefits li::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 17px;
  width: 12px;
  height: 8px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.landing-ai-render__benefits strong {
  font-size: 15px;
}

.landing-ai-render__benefits span {
  color: #344054;
  font-size: 14px;
}

.landing-ai-render__bar {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) repeat(4, minmax(105px, .7fr)) auto;
  gap: 18px;
  align-items: center;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #173b2d, #2b5b46);
  box-shadow: 0 26px 58px rgba(17, 46, 35, .22);
}

.landing-ai-render__bar strong {
  font-size: clamp(17px, 1.8vw, 22px);
}

.landing-ai-render__bar span {
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.landing-ai-render__bar .button {
  white-space: nowrap;
  background: #41a875;
  border-color: #41a875;
}

.conversion-cta-strip--compact h2,
.conversion-final--compact h2 {
  font-size: clamp(24px, 3vw, 36px);
}

.conversion-process-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.conversion-process-strip article {
  min-height: 130px;
  padding: 18px;
}

.conversion-process-strip span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  border-radius: 8px;
  color: #fff;
  background: #2357a5;
  font-weight: 900;
}

.conversion-process-strip strong {
  display: block;
  margin-bottom: 6px;
}

.conversion-module-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.conversion-module-grid a {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 18px;
}

.conversion-module-grid img {
  justify-self: center;
  width: 112px;
  height: 112px;
  object-fit: contain;
}

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

.conversion-topic-card {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 18px 18px 18px 40px;
}

.conversion-topic-card::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 18px;
  width: 8px;
  height: 8px;
  border: 2px solid #0f8b7d;
  border-radius: 50%;
}

.conversion-faq-grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.conversion-final--compact {
  padding: clamp(24px, 4vw, 34px);
}

@media (max-width: 1080px) {
  .conversion-hero,
  .conversion-section-head,
  .conversion-longform,
  .conversion-screen-row,
  .conversion-cta-strip,
  .conversion-mid-cta,
  .conversion-final,
  .conversion-footer {
    grid-template-columns: 1fr;
  }

  .conversion-screen-row:nth-child(even) .conversion-screen-copy {
    order: 0;
  }

  .conversion-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .conversion-main--compact .conversion-hero--compact,
  .conversion-feature-grid,
  .conversion-benefits--compact,
  .conversion-process-strip,
  .landing-ai-render,
  .landing-kitchen-demo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .conversion-module-grid,
  .conversion-topic-grid,
  .conversion-faq-grid--compact {
    grid-template-columns: 1fr;
  }

  .landing-ai-render__bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .landing-ai-render__bar strong,
  .landing-ai-render__bar .button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .conversion-hero,
  .conversion-section,
  .conversion-cta-strip,
  .conversion-final,
  .conversion-footer {
    width: min(100% - 36px, 1240px);
  }

  .conversion-card-grid,
  .conversion-output-grid,
  .conversion-proof-grid,
  .conversion-related-grid,
  .conversion-faq-grid,
  .conversion-benefits,
  .conversion-timeline {
    grid-template-columns: 1fr;
  }

  .conversion-hero {
    padding-top: 36px;
  }

  .conversion-hero h1 {
    font-size: clamp(36px, 11vw, 48px);
  }

  .conversion-hero-media .conversion-screen-frame,
  .conversion-screen-row .conversion-screen-frame {
    aspect-ratio: 4 / 3;
  }

  .conversion-footer nav {
    grid-template-columns: 1fr;
  }

  .conversion-main--compact .conversion-hero--compact,
  .conversion-feature-grid,
  .conversion-benefits--compact,
  .conversion-process-strip,
  .landing-ai-render,
  .landing-ai-render__comparison,
  .landing-kitchen-demo {
    grid-template-columns: 1fr;
  }

  .conversion-main--compact .conversion-hero h1 {
    font-size: clamp(32px, 10vw, 44px);
  }

  .conversion-module-grid img {
    width: 96px;
    height: 96px;
  }

  .landing-kitchen-demo {
    gap: 20px;
  }

  .landing-kitchen-demo__copy h2 {
    max-width: none;
  }

  .landing-kitchen-demo__viewport {
    min-height: 260px;
    aspect-ratio: 4 / 3;
  }

  .landing-kitchen-demo__chips {
    justify-content: flex-start;
  }

  .landing-ai-render {
    min-height: 760px;
  }

  .landing-ai-render__shade {
    background:
      linear-gradient(180deg, rgba(255, 252, 247, .98) 0%, rgba(255, 252, 247, .9) 34%, rgba(255, 252, 247, .2) 100%),
      linear-gradient(90deg, rgba(255, 252, 247, .96), rgba(255, 252, 247, .26));
  }

  .landing-ai-render__bar {
    grid-template-columns: 1fr 1fr;
  }

  .landing-ai-render__bar strong,
  .landing-ai-render__bar .button {
    grid-column: 1 / -1;
  }

  .landing-ai-render__comparison img,
  .landing-ai-render__comparison figure:nth-child(2) img {
    min-height: 230px;
  }
}

@media (max-width: 560px) {
  .conversion-hero,
  .conversion-section,
  .conversion-cta-strip,
  .conversion-final,
  .conversion-footer {
    width: min(100% - 28px, 1240px);
  }

  .conversion-cta-strip,
  .conversion-mid-cta,
  .conversion-final {
    padding: 22px;
  }

  .landing-kitchen-demo {
    padding: 18px;
    border-radius: 14px;
  }

  .landing-kitchen-demo__frame {
    padding: 10px;
  }

  .landing-kitchen-demo__status {
    top: 10px;
    left: 10px;
    min-height: 32px;
    padding: 7px 10px;
    font-size: 11px;
  }

  .landing-kitchen-demo__chips {
    right: 10px;
    bottom: 10px;
    left: 10px;
    gap: 6px;
  }

  .landing-kitchen-demo__chips span {
    min-height: 28px;
    padding: 6px 9px;
    font-size: 10px;
  }
}

/* SEO stage 3 blog and guide articles */
.blog-page {
  color: #172033;
  background: #f7f9fc;
}

.blog-main {
  overflow: clip;
}

.blog-hero,
.blog-index-intro,
.blog-section,
.article-layout,
.article-cta,
.blog-footer {
  width: min(1240px, calc(100% - 48px));
  margin-right: auto;
  margin-left: auto;
}

.blog-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
  align-items: center;
  gap: clamp(28px, 5vw, 68px);
  padding: clamp(46px, 7vw, 88px) 0 clamp(34px, 5vw, 58px);
}

.blog-hero h1 {
  max-width: 900px;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 0.98;
}

@media (min-width: 1081px) {
  .blog-hero h1 {
    min-height: 2.94em;
  }
}

.blog-hero .hero-lead {
  max-width: 720px;
  color: #435066;
  font-size: clamp(17px, 1.55vw, 20px);
}

.blog-hero-media {
  margin: 0;
}

.blog-screen-frame {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dfe7f0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 72px rgba(23, 32, 51, 0.14);
}

.blog-hero-media .blog-screen-frame {
  aspect-ratio: 16 / 10;
  padding: clamp(10px, 1.5vw, 18px);
}

.blog-screen-frame img,
.article-card img {
  display: block;
  width: 100%;
  height: auto;
}

.blog-screen-frame img {
  border-radius: 7px;
  height: 100%;
  object-fit: contain;
}

.blog-index-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.6fr);
  gap: 24px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(35, 87, 165, 0.14);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(23, 32, 51, 0.08);
}

.blog-index-intro p,
.blog-section p,
.article-body p,
.article-body li,
.article-toc a,
.article-card p,
.article-faq p,
.article-related-card p,
.blog-footer p {
  color: #526174;
}

.blog-section {
  padding: clamp(52px, 7vw, 88px) 0;
  border-top: 1px solid #e1e8f1;
}

.blog-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: end;
  margin-bottom: 30px;
}

.blog-section-head p {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
}

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

.article-card,
.article-toc,
.article-body .article-callout,
.article-body .article-info,
.article-body .article-checklist,
.article-related-card,
.article-faq details {
  border: 1px solid #dfe7f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(23, 32, 51, 0.07);
}

.article-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.article-card img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.article-card-body {
  display: grid;
  gap: 12px;
  padding: clamp(20px, 3vw, 28px);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #9a5a00;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-card h2,
.article-card h3 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.08;
}

.article-card p {
  margin: 0;
  font-weight: 800;
}

.article-card .button {
  width: max-content;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.27fr) minmax(0, 0.73fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  padding: 0 0 clamp(52px, 7vw, 88px);
}

.article-toc {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 14px;
  padding: 18px;
}

.article-toc strong {
  color: #172033;
}

.article-toc nav {
  display: grid;
  gap: 10px;
}

.article-toc a {
  font-weight: 900;
}

.article-toc a:hover,
.article-body a,
.blog-footer a {
  color: #2357a5;
}

.article-body {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  min-width: 0;
}

.article-body section {
  scroll-margin-top: 110px;
}

.article-body h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
}

.article-body h3 {
  margin: 24px 0 10px;
  font-size: clamp(22px, 2.2vw, 29px);
}

.article-body p,
.article-body li {
  font-size: 17px;
  line-height: 1.75;
}

.article-body p {
  margin: 0 0 16px;
}

.article-body ul,
.article-body ol {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding-left: 22px;
}

.article-body a {
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.article-body figure {
  margin: 0;
}

.article-body .article-callout,
.article-body .article-info,
.article-body .article-checklist {
  padding: clamp(20px, 3vw, 30px);
}

.article-body .article-callout {
  border-color: rgba(224, 122, 34, 0.22);
  background: #fff7ef;
}

.article-body .article-info {
  background: #f8fbff;
}

.article-checklist ul {
  margin-bottom: 0;
}

.article-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  counter-reset: article-steps;
}

.article-step {
  min-height: 210px;
  padding: 20px;
  border: 1px solid #dfe7f0;
  border-radius: 8px;
  background: #fff;
}

.article-step::before {
  counter-increment: article-steps;
  content: counter(article-steps);
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  border-radius: 8px;
  color: #fff;
  background: #2357a5;
  font-weight: 900;
}

.article-step h3 {
  margin-top: 0;
}

.article-media-grid,
.article-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.article-media-grid .blog-screen-frame {
  aspect-ratio: 16 / 10;
  padding: 12px;
}

.article-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-bottom: clamp(36px, 5vw, 60px);
  padding: clamp(26px, 4vw, 44px);
  border-radius: 10px;
  color: #fff;
  background: #11263d;
}

.article-cta p {
  margin: 10px 0 0;
  color: #d9e2ed;
  font-weight: 800;
}

.article-cta .eyebrow {
  color: #ffd4ad;
}

.article-cta .button-ghost {
  border-color: rgba(255, 255, 255, 0.36);
  color: #fff;
  background: transparent;
}

.article-faq {
  display: grid;
  gap: 12px;
}

.article-faq details {
  overflow: hidden;
}

.article-faq summary {
  cursor: pointer;
  padding: 20px 22px;
  color: #172033;
  font-weight: 900;
}

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

.article-faq summary::after {
  content: "+";
  float: right;
  color: #2357a5;
  font-weight: 900;
}

.article-faq details[open] summary::after {
  content: "-";
}

.article-faq p {
  margin: 0;
  padding: 0 22px 22px;
  font-weight: 800;
}

.article-related-card {
  display: grid;
  gap: 8px;
  padding: clamp(20px, 3vw, 26px);
}

.article-related-card strong {
  color: #172033;
  font-size: 20px;
}

.article-related-card p {
  margin: 0;
  font-weight: 800;
}

.blog-footer {
  display: grid;
  grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.25fr) minmax(220px, 0.72fr);
  gap: 28px;
  padding: 38px 0 46px;
  color: #526174;
  font-weight: 800;
}

.blog-footer h2,
.blog-footer h3 {
  color: #172033;
}

.blog-footer h2 {
  margin: 0 0 8px;
  font-size: 28px;
}

.blog-footer h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

.blog-footer nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

@media (max-width: 1080px) {
  .blog-hero,
  .blog-index-intro,
  .blog-section-head,
  .article-layout,
  .article-cta,
  .blog-footer {
    grid-template-columns: 1fr;
  }

  .article-toc {
    position: static;
  }

  .article-steps,
  .article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .blog-hero,
  .blog-index-intro,
  .blog-section,
  .article-layout,
  .article-cta,
  .blog-footer {
    width: min(100% - 36px, 1240px);
  }

  .blog-hero {
    grid-template-columns: 1fr;
    padding-top: 36px;
  }

  .blog-hero h1 {
    font-size: clamp(36px, 11vw, 48px);
  }

  .article-steps,
  .article-grid,
  .article-media-grid,
  .article-related-grid,
  .blog-footer nav {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .blog-hero,
  .blog-index-intro,
  .blog-section,
  .article-layout,
  .article-cta,
  .blog-footer {
    width: min(100% - 28px, 1240px);
  }

  .blog-index-intro,
  .article-cta {
    padding: 22px;
  }

  .article-card .button {
    width: 100%;
  }
}

.conversion-trial-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.85fr) auto;
  gap: 22px;
  align-items: center;
  padding: 26px;
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 16px;
  background:
    radial-gradient(600px 180px at 100% 0%, rgba(249, 115, 22, 0.14), transparent 62%),
    linear-gradient(135deg, rgba(255, 247, 237, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
}

.conversion-trial-strip h2 {
  margin: 0;
  max-width: 680px;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.conversion-trial-strip p:not(.eyebrow) {
  margin: 10px 0 0;
  max-width: 650px;
  color: #475569;
  line-height: 1.55;
}

.conversion-trial-strip ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
  color: #1f2937;
  font-weight: 800;
  font-size: 14px;
}

.conversion-trial-strip li {
  position: relative;
  padding-left: 18px;
}

.conversion-trial-strip li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #f97316;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12);
}

.conversion-trial-strip .button {
  white-space: nowrap;
}

@media (max-width: 980px) {
  .conversion-trial-strip {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .conversion-trial-strip .button {
    width: fit-content;
  }
}

@media (max-width: 560px) {
  .conversion-trial-strip {
    padding: 20px;
  }

  .conversion-trial-strip .button {
    width: 100%;
  }
}

/* 2026-06 unified landing buttons: matches the app CTA system. */
:root {
  --tecad-button-radius: 8px;
  --tecad-button-height: 44px;
  --tecad-button-pad-x: 20px;
  --tecad-button-pad-x-mobile: 16px;
  --tecad-button-primary: #2f835f;
  --tecad-button-primary-hover: #287553;
  --tecad-button-primary-active: #1f6044;
  --tecad-button-outline-hover: #eef7f2;
  --tecad-button-outline-active: #dff0e7;
}

.button,
.home-page .primary-button,
.home-page .ghost-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tecad-button-height);
  padding: 0 var(--tecad-button-pad-x);
  border-radius: var(--tecad-button-radius);
  border: 1px solid var(--tecad-button-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2px;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.button-primary,
.home-page .primary-button {
  color: #ffffff;
  background: var(--tecad-button-primary);
  border-color: var(--tecad-button-primary);
  box-shadow: 0 10px 22px rgba(47, 131, 95, 0.18);
}

.button-primary:hover,
.home-page .primary-button:hover {
  color: #ffffff;
  background: var(--tecad-button-primary-hover);
  border-color: var(--tecad-button-primary-hover);
  transform: translateY(-1px);
}

.button-primary:active,
.home-page .primary-button:active {
  background: var(--tecad-button-primary-active);
  border-color: var(--tecad-button-primary-active);
  transform: translateY(0);
}

.button-ghost,
.home-page .ghost-button {
  color: var(--tecad-button-primary);
  background: #ffffff;
  border-color: var(--tecad-button-primary);
  box-shadow: none;
}

.button-ghost:hover,
.home-page .ghost-button:hover {
  color: var(--tecad-button-primary-hover);
  background: var(--tecad-button-outline-hover);
  border-color: var(--tecad-button-primary-hover);
  transform: translateY(-1px);
}

.button-ghost:active,
.home-page .ghost-button:active {
  background: var(--tecad-button-outline-active);
  border-color: var(--tecad-button-primary-active);
  transform: translateY(0);
}

.button:focus-visible,
.home-page .primary-button:focus-visible,
.home-page .ghost-button:focus-visible {
  outline: 3px solid rgba(47, 131, 95, 0.24);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .button,
  .home-page .primary-button,
  .home-page .ghost-button {
    padding-right: var(--tecad-button-pad-x-mobile);
    padding-left: var(--tecad-button-pad-x-mobile);
    font-size: 14px;
  }
}
/* Interactive single-cabinet preview on the home page. */
.landing-cabinet-demo {
  min-width: 0;
}

.landing-cabinet-demo__viewport {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid #dfe7f0;
  border-radius: 8px;
  background: #f4f3ef;
  box-shadow: 0 24px 72px rgba(23, 32, 51, 0.14);
}

.landing-cabinet-demo__viewport canvas,
.landing-cabinet-demo__fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.landing-cabinet-demo__viewport canvas {
  z-index: 2;
  cursor: grab;
}

.landing-cabinet-demo__viewport.is-interacting canvas {
  cursor: grabbing;
}

.landing-cabinet-demo__fallback {
  z-index: 1;
  padding: clamp(26px, 5vw, 52px);
  object-fit: contain;
  background: #f4f3ef;
  transition: opacity 180ms ease;
}

.landing-cabinet-demo__viewport.is-ready .landing-cabinet-demo__fallback {
  opacity: 0;
  pointer-events: none;
}

.landing-cabinet-demo__loader {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: #344054;
  background: rgba(244, 243, 239, 0.94);
  font-size: 13px;
  text-align: center;
}

.landing-cabinet-demo__loader[hidden] {
  display: none;
}

.landing-cabinet-demo__loader span {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(224, 122, 34, 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: landing-cabinet-loader 700ms linear infinite;
}

.landing-cabinet-demo__hint {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 6px;
  color: #344054;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 24px rgba(23, 32, 51, 0.1);
  backdrop-filter: blur(10px);
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.landing-cabinet-demo__viewport.is-ready .landing-cabinet-demo__hint {
  opacity: 1;
  transform: translateY(0);
}

.landing-cabinet-demo__rotate-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: 14px;
}

.landing-cabinet-demo__materials {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  pointer-events: none;
}

.landing-cabinet-demo__materials span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  color: #344054;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 7px 20px rgba(23, 32, 51, 0.08);
  backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 800;
}

.landing-cabinet-demo__materials i {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1px solid rgba(23, 32, 51, 0.12);
  border-radius: 4px;
  background: #f1f0ec;
}

.landing-cabinet-demo__materials .is-body {
  background: #795843;
}

.landing-cabinet-demo__materials .is-front {
  background: #f3f2ef;
}

.landing-cabinet-demo__materials .is-module {
  position: relative;
  background: #dce9e6;
}

.landing-cabinet-demo__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 2px 0;
}

.landing-cabinet-demo__caption > div {
  display: grid;
  gap: 3px;
}

.landing-cabinet-demo__caption .eyebrow {
  margin: 0;
  font-size: 10px;
}

.landing-cabinet-demo__caption strong {
  color: #202b3d;
  font-size: 15px;
  line-height: 1.25;
}

.landing-cabinet-demo__caption .button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Hero benefits stay readable inside the narrower copy column. */
.conversion-main--compact .conversion-benefits--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 520px;
}

.conversion-main--compact .conversion-benefits--compact span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 50px;
  padding: 10px 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.conversion-main--compact .conversion-benefits--compact span::before {
  position: static;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  margin: 0;
}

@keyframes landing-cabinet-loader {
  to { transform: rotate(360deg); }
}

@keyframes landing-kitchen-demo-float {
  0% {
    transform: scale(1) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.045) translate3d(-1.2%, -1.6%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-cabinet-demo__loader span {
    animation: none;
  }
}

@media (max-width: 1080px) {
  .landing-cabinet-demo__viewport {
    min-height: 440px;
  }
}

@media (max-width: 700px) {
  .landing-cabinet-demo__viewport {
    min-height: 330px;
    aspect-ratio: 4 / 3;
  }

  .landing-cabinet-demo__viewport.is-static .landing-cabinet-demo__hint {
    display: none;
  }

  .landing-cabinet-demo__materials {
    right: 10px;
    bottom: 10px;
    left: 10px;
  }

  .landing-cabinet-demo__materials span {
    min-height: 28px;
    padding: 5px 7px;
    font-size: 9px;
  }

  .landing-cabinet-demo__caption {
    align-items: stretch;
    flex-direction: column;
    padding-top: 14px;
  }

  .landing-cabinet-demo__caption .button {
    width: 100%;
  }

  .conversion-main--compact .conversion-benefits--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .conversion-main--compact .conversion-benefits--compact span {
    min-height: 52px;
    padding: 9px 10px;
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .conversion-main--compact .conversion-benefits--compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .landing-ai-render {
    min-height: 720px;
    padding: 22px;
    border-radius: 18px;
  }

  .landing-ai-render__copy {
    max-width: none;
  }

  .landing-ai-render__benefits li {
    padding-left: 54px;
  }

  .landing-ai-render__bar {
    grid-template-columns: 1fr;
  }
}

/* 2026-07 homepage unified design system: matches the "Nowosc AI" section. */
:root {
  --landing-bg: #f7f4ee;
  --landing-card-bg: rgba(255, 255, 255, 0.92);
  --landing-border: rgba(226, 232, 240, 0.86);
  --landing-shadow: 0 28px 78px rgba(23, 32, 51, 0.1);
  --landing-radius: 28px;
  --landing-green: #2f835f;
  --landing-orange: #2f835f;
  --landing-muted: #667085;
}

.conversion-page {
  color: #101828;
  background:
    radial-gradient(circle at 12% 0%, rgba(47, 131, 95, 0.11), transparent 34%),
    radial-gradient(circle at 88% 7%, rgba(47, 131, 95, 0.08), transparent 31%),
    linear-gradient(180deg, #fffdf9 0%, var(--landing-bg) 50%, #eef4f1 100%);
}

.conversion-page .site-header.conversion-header {
  position: sticky;
  top: 14px;
  z-index: 20;
  width: min(1240px, calc(100% - 48px));
  margin: 16px auto 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 20px 54px rgba(23, 32, 51, 0.08);
  backdrop-filter: blur(18px);
}

.conversion-page .brand {
  display: inline-grid;
  place-items: center;
  min-height: 48px;
  padding: 7px 12px;
  border: 1px solid var(--landing-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(23, 32, 51, 0.05);
}

.conversion-page .top-nav a {
  border-radius: 999px;
  color: #475467;
  font-weight: 800;
}

.conversion-page .top-nav a:hover {
  color: var(--landing-green);
  background: rgba(47, 131, 95, 0.08);
}

.conversion-page .button {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 12px;
  font-weight: 800;
  box-shadow: none;
}

.conversion-page .button-primary {
  color: #fff;
  border-color: var(--landing-orange);
  background: linear-gradient(135deg, #41a875, var(--landing-orange));
  box-shadow: 0 16px 34px rgba(47, 131, 95, 0.2);
}

.conversion-page .button-primary:hover {
  border-color: #287553;
  background: linear-gradient(135deg, #4ab983, #287553);
  box-shadow: 0 20px 42px rgba(47, 131, 95, 0.24);
}

.conversion-page .button-ghost {
  color: var(--landing-orange);
  border-color: rgba(47, 131, 95, 0.42);
  background: rgba(255, 255, 255, 0.82);
}

.conversion-page .button-ghost:hover {
  color: #287553;
  border-color: rgba(47, 131, 95, 0.62);
  background: rgba(238, 247, 242, 0.96);
}

.conversion-page .conversion-section--ai-render .button-primary,
.conversion-page .landing-ai-render__bar .button,
.conversion-page .conversion-trial-strip .button-primary {
  border-color: #41a875;
  background: linear-gradient(135deg, #41a875, var(--landing-green));
  box-shadow: 0 18px 38px rgba(47, 131, 95, 0.22);
}

.conversion-page .conversion-section--ai-render .button-primary:hover,
.conversion-page .landing-ai-render__bar .button:hover,
.conversion-page .conversion-trial-strip .button-primary:hover {
  border-color: #2f835f;
  background: linear-gradient(135deg, #4ab983, #287553);
}

.conversion-page .conversion-hero {
  margin-top: clamp(20px, 3vw, 36px);
  padding: clamp(34px, 5vw, 58px);
  border: 1px solid var(--landing-border);
  border-radius: calc(var(--landing-radius) + 4px);
  background:
    radial-gradient(520px 300px at 95% 10%, rgba(47, 131, 95, 0.12), transparent 64%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 244, 0.9));
  box-shadow: var(--landing-shadow);
}

.conversion-page .conversion-hero h1,
.conversion-page .conversion-section-head h2,
.conversion-page .landing-kitchen-demo__copy h2,
.conversion-page .conversion-cta-strip h2,
.conversion-page .conversion-trial-strip h2,
.conversion-page .conversion-final h2 {
  color: #101828;
  letter-spacing: -0.045em;
}

.conversion-page .hero-lead,
.conversion-page .conversion-section-head p,
.conversion-page .landing-kitchen-demo__copy p:not(.eyebrow),
.conversion-page .conversion-feature-card p,
.conversion-page .conversion-process-strip p,
.conversion-page .conversion-module-grid p,
.conversion-page .conversion-topic-card p,
.conversion-page .conversion-faq-grid p,
.conversion-page .conversion-cta-strip p,
.conversion-page .conversion-trial-strip p:not(.eyebrow),
.conversion-page .conversion-footer p {
  color: var(--landing-muted);
}

.conversion-page .eyebrow {
  color: var(--landing-green);
  letter-spacing: 0.08em;
}

.conversion-page .conversion-benefits span,
.conversion-page .landing-kitchen-demo,
.conversion-page .conversion-cta-strip,
.conversion-page .conversion-trial-strip,
.conversion-page .conversion-feature-card,
.conversion-page .conversion-process-strip article,
.conversion-page .conversion-module-grid a,
.conversion-page .conversion-topic-card,
.conversion-page .conversion-faq-grid details,
.conversion-page .conversion-final,
.conversion-page .conversion-footer,
.conversion-page .landing-cabinet-demo__viewport,
.conversion-page .landing-kitchen-demo__frame {
  border: 1px solid var(--landing-border);
  border-radius: var(--landing-radius);
  background: var(--landing-card-bg);
  box-shadow: var(--landing-shadow);
}

.conversion-page .conversion-benefits span {
  min-height: 56px;
  background: rgba(255, 255, 255, 0.78);
}

.conversion-page .conversion-benefits span::before,
.conversion-page .conversion-list li::before,
.conversion-page .conversion-topic-card::before {
  border-color: var(--landing-green);
  background: rgba(47, 131, 95, 0.08);
}

.conversion-page .landing-cabinet-demo__viewport {
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.95), rgba(243, 238, 230, 0.95) 62%),
    #f4f0e8;
}

.conversion-page .landing-cabinet-demo__caption {
  padding-top: 18px;
}

.conversion-page .landing-cabinet-demo__hint,
.conversion-page .landing-cabinet-demo__materials span,
.conversion-page .landing-kitchen-demo__status,
.conversion-page .landing-kitchen-demo__chips span {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
}

.conversion-page .landing-kitchen-demo {
  background:
    radial-gradient(560px 260px at 100% 0%, rgba(47, 131, 95, 0.12), transparent 62%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(255, 250, 244, 0.9));
}

.conversion-page .landing-kitchen-demo__frame {
  padding: 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 18px 46px rgba(23, 32, 51, 0.08);
}

.conversion-page .landing-kitchen-demo__viewport {
  border-radius: 20px;
}

.conversion-page .landing-ai-render {
  border-color: rgba(47, 131, 95, 0.18);
  border-radius: calc(var(--landing-radius) + 2px);
  box-shadow: 0 32px 86px rgba(23, 32, 51, 0.13);
}

.conversion-page .conversion-section {
  border-top: 1px solid rgba(226, 232, 240, 0.7);
}

.conversion-page .conversion-section--ai-render {
  border-top: 0;
}

.conversion-page .conversion-feature-card,
.conversion-page .conversion-process-strip article,
.conversion-page .conversion-module-grid a,
.conversion-page .conversion-topic-card,
.conversion-page .conversion-faq-grid details {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.conversion-page .conversion-feature-card:hover,
.conversion-page .conversion-process-strip article:hover,
.conversion-page .conversion-module-grid a:hover,
.conversion-page .conversion-topic-card:hover,
.conversion-page .conversion-faq-grid details:hover {
  border-color: rgba(47, 131, 95, 0.28);
  box-shadow: 0 30px 70px rgba(23, 32, 51, 0.12);
  transform: translateY(-3px);
}

.conversion-page .conversion-feature-card {
  padding: 18px;
}

.conversion-page .conversion-feature-card img,
.conversion-page .conversion-module-grid img {
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.95), rgba(243, 238, 230, 0.78)),
    #f4f0e8;
}

.conversion-page .conversion-process-strip article,
.conversion-page .conversion-module-grid a,
.conversion-page .conversion-topic-card {
  padding: 22px;
}

.conversion-page .conversion-process-strip span {
  border-radius: 50%;
  background: linear-gradient(135deg, #41a875, var(--landing-green));
  box-shadow: 0 12px 24px rgba(47, 131, 95, 0.18);
}

.conversion-page .conversion-cta-strip {
  background:
    radial-gradient(520px 180px at 100% 0%, rgba(47, 131, 95, 0.14), transparent 64%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(238, 247, 242, 0.92));
}

.conversion-page .conversion-trial-strip {
  border-color: rgba(47, 131, 95, 0.18);
  background:
    radial-gradient(620px 210px at 100% 0%, rgba(47, 131, 95, 0.16), transparent 64%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(238, 247, 242, 0.92));
}

.conversion-page .conversion-trial-strip li::before {
  background: var(--landing-green);
  box-shadow: 0 0 0 4px rgba(47, 131, 95, 0.12);
}

.conversion-page .conversion-faq-grid details {
  overflow: clip;
}

.conversion-page .conversion-faq-grid summary {
  padding: 22px 24px;
}

.conversion-page .conversion-faq-grid summary::after {
  color: var(--landing-green);
}

.conversion-page .conversion-final {
  color: #fff;
  background:
    radial-gradient(520px 200px at 100% 0%, rgba(65, 168, 117, 0.35), transparent 70%),
    linear-gradient(135deg, #173b2d, #2b5b46);
}

.conversion-page .conversion-final h2,
.conversion-page .conversion-final .eyebrow {
  color: #fff;
}

.conversion-page .conversion-final p {
  color: rgba(255, 255, 255, 0.78);
}

.conversion-page .conversion-final .button-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.08);
}

.conversion-page .conversion-final .button-ghost:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.16);
}

.conversion-page .conversion-footer {
  margin-bottom: 28px;
  padding: clamp(28px, 4vw, 42px);
  background:
    radial-gradient(460px 180px at 100% 0%, rgba(47, 131, 95, 0.1), transparent 66%),
    rgba(255, 255, 255, 0.88);
}

.conversion-page .conversion-footer a {
  color: var(--landing-green);
}

@media (max-width: 1080px) {
  .conversion-page .site-header.conversion-header {
    position: relative;
    top: 0;
    grid-template-columns: 1fr;
    gap: 12px;
  }

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

@media (max-width: 820px) {
  .conversion-page .site-header.conversion-header,
  .conversion-page .conversion-hero,
  .conversion-page .conversion-section,
  .conversion-page .conversion-cta-strip,
  .conversion-page .conversion-final,
  .conversion-page .conversion-footer {
    width: min(100% - 32px, 1240px);
  }

  .conversion-page .conversion-hero,
  .conversion-page .landing-kitchen-demo,
  .conversion-page .conversion-cta-strip,
  .conversion-page .conversion-trial-strip,
  .conversion-page .conversion-final,
  .conversion-page .conversion-footer {
    border-radius: 22px;
  }

  .conversion-page .button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .conversion-page .site-header.conversion-header,
  .conversion-page .conversion-hero,
  .conversion-page .conversion-section,
  .conversion-page .conversion-cta-strip,
  .conversion-page .conversion-final,
  .conversion-page .conversion-footer {
    width: min(100% - 24px, 1240px);
  }

  .conversion-page .conversion-hero,
  .conversion-page .landing-kitchen-demo,
  .conversion-page .conversion-cta-strip,
  .conversion-page .conversion-trial-strip,
  .conversion-page .conversion-final,
  .conversion-page .conversion-footer {
    padding: 20px;
  }

  .conversion-page .conversion-hero h1 {
    font-size: clamp(32px, 11vw, 44px);
  }

  .conversion-page .button {
    min-height: 46px;
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* 2026-07 public landing green unification: home + informational pages. */
:is(.conversion-page, .blog-page) {
  color: #101828;
  background:
    radial-gradient(circle at 12% 0%, rgba(47, 131, 95, 0.12), transparent 34%),
    radial-gradient(circle at 88% 7%, rgba(47, 131, 95, 0.08), transparent 31%),
    linear-gradient(180deg, #fffdf9 0%, var(--landing-bg) 50%, #eef4f1 100%);
}

:is(.conversion-page, .blog-page) .site-header.conversion-header {
  position: sticky;
  top: 14px;
  z-index: 20;
  width: min(1240px, calc(100% - 48px));
  margin: 16px auto 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 20px 54px rgba(23, 32, 51, 0.08);
  backdrop-filter: blur(18px);
}

:is(.conversion-page, .blog-page) .brand {
  display: inline-grid;
  place-items: center;
  min-height: 48px;
  padding: 7px 12px;
  border: 1px solid var(--landing-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(23, 32, 51, 0.05);
}

:is(.conversion-page, .blog-page) .top-nav a {
  border-radius: 999px;
  color: #475467;
  font-weight: 800;
}

:is(.conversion-page, .blog-page) .top-nav a:hover {
  color: var(--landing-green);
  background: rgba(47, 131, 95, 0.08);
}

:is(.conversion-page, .blog-page) .button {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 12px;
  font-weight: 800;
}

:is(.conversion-page, .blog-page) .button-primary,
:is(.conversion-page, .blog-page) .landing-ai-render__bar .button {
  color: #fff;
  border-color: #41a875;
  background: linear-gradient(135deg, #41a875, var(--landing-green));
  box-shadow: 0 18px 38px rgba(47, 131, 95, 0.22);
}

:is(.conversion-page, .blog-page) .button-primary:hover,
:is(.conversion-page, .blog-page) .landing-ai-render__bar .button:hover {
  color: #fff;
  border-color: #2f835f;
  background: linear-gradient(135deg, #4ab983, #287553);
  box-shadow: 0 22px 46px rgba(47, 131, 95, 0.26);
}

:is(.conversion-page, .blog-page) .button-ghost {
  color: var(--landing-green);
  border-color: rgba(47, 131, 95, 0.42);
  background: rgba(255, 255, 255, 0.84);
}

:is(.conversion-page, .blog-page) .button-ghost:hover {
  color: #287553;
  border-color: rgba(47, 131, 95, 0.62);
  background: rgba(238, 247, 242, 0.96);
}

:is(.conversion-page, .blog-page) .eyebrow,
:is(.conversion-page, .blog-page) .article-meta,
:is(.conversion-page, .blog-page) .article-meta a {
  color: var(--landing-green);
}

.conversion-page .conversion-cta-strip,
.conversion-page .conversion-trial-strip,
.blog-page .blog-index-intro,
.blog-page .article-cta {
  border-color: rgba(47, 131, 95, 0.18);
  background:
    radial-gradient(620px 210px at 100% 0%, rgba(47, 131, 95, 0.16), transparent 64%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(238, 247, 242, 0.92));
}

.blog-page .blog-hero {
  margin-top: clamp(20px, 3vw, 36px);
  padding: clamp(34px, 5vw, 58px);
  border: 1px solid var(--landing-border);
  border-radius: calc(var(--landing-radius) + 4px);
  background:
    radial-gradient(520px 300px at 95% 10%, rgba(47, 131, 95, 0.12), transparent 64%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 244, 0.9));
  box-shadow: var(--landing-shadow);
}

.blog-page .blog-index-intro,
.blog-page .article-card,
.blog-page .article-toc,
.blog-page .article-body .article-callout,
.blog-page .article-body .article-info,
.blog-page .article-body .article-checklist,
.blog-page .article-step,
.blog-page .article-related-card,
.blog-page .article-faq details,
.blog-page .conversion-related-card,
.blog-page .blog-footer,
.blog-page .blog-screen-frame {
  border: 1px solid var(--landing-border);
  border-radius: var(--landing-radius);
  background: var(--landing-card-bg);
  box-shadow: var(--landing-shadow);
}

.blog-page .article-card,
.blog-page .article-related-card,
.blog-page .conversion-related-card,
.blog-page .article-faq details {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-page .article-card:hover,
.blog-page .article-related-card:hover,
.blog-page .conversion-related-card:hover,
.blog-page .article-faq details:hover {
  border-color: rgba(47, 131, 95, 0.28);
  box-shadow: 0 30px 70px rgba(23, 32, 51, 0.12);
  transform: translateY(-3px);
}

.blog-page .blog-screen-frame {
  padding: clamp(10px, 1.5vw, 18px);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.95), rgba(243, 238, 230, 0.95) 62%),
    #f4f0e8;
}

.blog-page .article-card img {
  border-radius: 0;
}

.blog-page .article-body .article-callout,
.blog-page .article-body .article-info {
  background:
    radial-gradient(520px 170px at 100% 0%, rgba(47, 131, 95, 0.1), transparent 68%),
    rgba(255, 255, 255, 0.92);
}

.blog-page .article-step::before {
  border-radius: 50%;
  background: linear-gradient(135deg, #41a875, var(--landing-green));
  box-shadow: 0 12px 24px rgba(47, 131, 95, 0.18);
}

.blog-page .article-faq summary::after,
.blog-page .article-toc a:hover,
.blog-page .article-body a,
.blog-page .blog-footer a {
  color: var(--landing-green);
}

.blog-page .article-cta {
  color: #101828;
  box-shadow: var(--landing-shadow);
}

.blog-page .article-cta h2 {
  color: #101828;
}

.blog-page .article-cta p {
  color: var(--landing-muted);
}

.blog-page .article-cta .eyebrow {
  color: var(--landing-green);
}

.blog-page .article-cta .button-ghost {
  color: var(--landing-green);
  border-color: rgba(47, 131, 95, 0.42);
  background: rgba(255, 255, 255, 0.84);
}

.blog-page .blog-footer {
  margin-bottom: 28px;
  padding: clamp(28px, 4vw, 42px);
  background:
    radial-gradient(460px 180px at 100% 0%, rgba(47, 131, 95, 0.1), transparent 66%),
    rgba(255, 255, 255, 0.88);
}

.conversion-page .conversion-cta-strip {
  background:
    radial-gradient(520px 180px at 100% 0%, rgba(47, 131, 95, 0.14), transparent 64%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(238, 247, 242, 0.92));
}

@media (max-width: 1080px) {
  :is(.conversion-page, .blog-page) .site-header.conversion-header,
  .blog-page .blog-hero {
    position: relative;
    top: 0;
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 820px) {
  :is(.conversion-page, .blog-page) .site-header.conversion-header,
  .blog-page .blog-hero,
  .blog-page .blog-index-intro,
  .blog-page .blog-section,
  .blog-page .article-layout,
  .blog-page .article-cta,
  .blog-page .blog-footer {
    width: min(100% - 32px, 1240px);
  }

  :is(.conversion-page, .blog-page) .button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  :is(.conversion-page, .blog-page) .site-header.conversion-header,
  .blog-page .blog-hero,
  .blog-page .blog-index-intro,
  .blog-page .blog-section,
  .blog-page .article-layout,
  .blog-page .article-cta,
  .blog-page .blog-footer {
    width: min(100% - 24px, 1240px);
  }

  .blog-page .blog-hero,
  .blog-page .blog-index-intro,
  .blog-page .article-cta,
  .blog-page .blog-footer {
    padding: 20px;
    border-radius: 22px;
  }
}

/* 2026-07 informational pages typography tuning: softer hero titles. */
.conversion-page .conversion-hero,
.blog-page .blog-hero {
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.94fr);
  gap: clamp(28px, 4.4vw, 58px);
}

.conversion-page .conversion-hero h1,
.conversion-page .conversion-main--compact .conversion-hero h1,
.blog-page .blog-hero h1 {
  max-width: 720px;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.conversion-page .conversion-hero .hero-lead,
.conversion-page .conversion-main--compact .conversion-hero .hero-lead,
.blog-page .blog-hero .hero-lead {
  max-width: 680px;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.66;
}

.conversion-page .conversion-section-head--compact h2,
.blog-page .blog-section-head h2,
.blog-page .article-body h2 {
  font-size: clamp(24px, 2.7vw, 36px);
  line-height: 1.12;
}

@media (max-width: 820px) {
  .conversion-page .conversion-hero,
  .blog-page .blog-hero {
    grid-template-columns: 1fr;
  }

  .conversion-page .conversion-hero h1,
  .conversion-page .conversion-main--compact .conversion-hero h1,
  .blog-page .blog-hero h1 {
    font-size: clamp(30px, 8.4vw, 42px);
    line-height: 1.08;
  }
}

/* 2026-07 landing UX pass: mniej tekstu, wiecej produktu. */
:is(.conversion-page, .blog-page) .conversion-hero,
.blog-page .blog-hero {
  grid-template-columns: minmax(0, 0.82fr) minmax(440px, 1.18fr);
  gap: clamp(28px, 4.2vw, 60px);
  padding-block: clamp(32px, 4.6vw, 54px);
}

.conversion-page .conversion-hero h1,
.conversion-page .conversion-main--compact .conversion-hero h1,
.blog-page .blog-hero h1 {
  max-width: 660px;
  font-size: clamp(42px, 4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.044em;
  text-wrap: balance;
}

.conversion-page .conversion-hero .hero-lead,
.conversion-page .conversion-main--compact .conversion-hero .hero-lead,
.blog-page .blog-hero .hero-lead {
  max-width: 600px;
  margin-top: clamp(18px, 2.2vw, 28px);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.72;
}

.conversion-page .conversion-section,
.blog-page .blog-section {
  padding-block: clamp(38px, 5vw, 64px);
}

.conversion-page .conversion-section-head,
.conversion-page .conversion-section-head--compact,
.blog-page .blog-section-head {
  margin-bottom: clamp(22px, 3vw, 34px);
}

.conversion-page .conversion-section-head h2,
.conversion-page .conversion-section-head--compact h2,
.blog-page .blog-section-head h2,
.blog-page .article-body h2 {
  max-width: 760px;
  font-size: clamp(34px, 3vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.conversion-page .conversion-card h3,
.conversion-page .conversion-step h3,
.conversion-page .conversion-screen-copy h3,
.conversion-page .conversion-related-card h3,
.conversion-page .conversion-faq h3,
.blog-page .article-card h2,
.blog-page .article-body h3 {
  font-size: clamp(24px, 2vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.conversion-page .conversion-card p,
.conversion-page .conversion-step p,
.conversion-page .conversion-screen-copy p,
.conversion-page .conversion-related-card p,
.conversion-page .conversion-faq p,
.blog-page .article-card p,
.blog-page .article-body p,
.blog-page .article-body li {
  max-width: 66ch;
  line-height: 1.72;
}

.conversion-page .conversion-card-grid,
.conversion-page .conversion-timeline,
.conversion-page .conversion-process-strip,
.conversion-page .conversion-related-grid,
.blog-page .article-grid {
  gap: clamp(16px, 2.2vw, 26px);
}

.conversion-page .conversion-card,
.conversion-page .conversion-step,
.conversion-page .conversion-related-card,
.conversion-page .conversion-faq,
.blog-page .article-card {
  padding: clamp(20px, 2.4vw, 28px);
}

.conversion-page .conversion-visual-card,
.conversion-page .conversion-screen-frame,
.blog-page .blog-hero-visual,
.blog-page .article-hero-card {
  border-radius: clamp(26px, 3vw, 36px);
  box-shadow: 0 26px 90px rgba(15, 23, 42, 0.12);
}

.conversion-page .conversion-visual-card img,
.conversion-page .conversion-screen-frame img,
.blog-page .blog-hero-visual img,
.blog-page .article-hero-card img {
  width: 100%;
  height: auto;
}

.conversion-page .conversion-screen-row {
  grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1.42fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  margin-block: clamp(30px, 4.2vw, 52px);
}

.conversion-page .conversion-screen-copy {
  max-width: 520px;
}

.conversion-page .conversion-cta,
.blog-page .article-cta {
  margin-block: clamp(42px, 5.4vw, 70px);
  padding: clamp(28px, 4vw, 46px);
}

.conversion-page .conversion-section--tight {
  padding-block: clamp(30px, 3.8vw, 48px);
}

.conversion-page .conversion-section--ai-render {
  margin-block: clamp(34px, 4.8vw, 58px);
}

@media (max-width: 1180px) {
  :is(.conversion-page, .blog-page) .conversion-hero,
  .blog-page .blog-hero {
    grid-template-columns: 1fr;
  }

  .conversion-page .conversion-hero h1,
  .conversion-page .conversion-main--compact .conversion-hero h1,
  .blog-page .blog-hero h1 {
    max-width: 760px;
  }

  .conversion-page .conversion-visual-card,
  .blog-page .blog-hero-visual {
    max-width: 920px;
  }
}

@media (max-width: 820px) {
  :is(.conversion-page, .blog-page) .conversion-hero,
  .blog-page .blog-hero {
    padding-block: 28px;
  }

  .conversion-page .conversion-hero h1,
  .conversion-page .conversion-main--compact .conversion-hero h1,
  .blog-page .blog-hero h1 {
    font-size: clamp(36px, 9vw, 42px);
    line-height: 1.08;
  }

  .conversion-page .conversion-section-head h2,
  .conversion-page .conversion-section-head--compact h2,
  .blog-page .blog-section-head h2,
  .blog-page .article-body h2 {
    font-size: clamp(28px, 7vw, 32px);
    line-height: 1.16;
  }

  .conversion-page .conversion-card h3,
  .conversion-page .conversion-step h3,
  .conversion-page .conversion-screen-copy h3,
  .conversion-page .conversion-related-card h3,
  .conversion-page .conversion-faq h3,
  .blog-page .article-card h2,
  .blog-page .article-body h3 {
    font-size: clamp(22px, 5.6vw, 26px);
  }

  .conversion-page .conversion-screen-row {
    grid-template-columns: 1fr;
    margin-block: 30px;
  }

  .conversion-page .conversion-section,
  .blog-page .blog-section {
    padding-block: clamp(34px, 9vw, 54px);
  }

  .conversion-page .conversion-section--tight {
    padding-block: clamp(28px, 7vw, 42px);
  }
}

/* 2026-07 premium SaaS landing pass: produkt przed tekstem. */
.conversion-page .conversion-main,
.blog-page main {
  row-gap: clamp(18px, 2.4vw, 34px);
}

:is(.conversion-page, .blog-page) .conversion-hero,
.blog-page .blog-hero {
  width: min(100% - 48px, 1320px);
  grid-template-columns: minmax(360px, 0.78fr) minmax(520px, 1.22fr);
  align-items: center;
}

.conversion-page .conversion-hero h1,
.conversion-page .conversion-main--compact .conversion-hero h1,
.blog-page .blog-hero h1 {
  max-width: 620px;
  font-size: clamp(52px, 4.25vw, 60px);
  line-height: 1.03;
}

.conversion-page .conversion-hero .hero-lead,
.conversion-page .conversion-main--compact .conversion-hero .hero-lead,
.blog-page .blog-hero .hero-lead {
  max-width: 560px;
}

.conversion-page .conversion-hero-media,
.conversion-page .conversion-visual-card,
.blog-page .blog-hero-media {
  transform: translateZ(0);
}

.conversion-page .conversion-hero-media .conversion-screen-frame,
.conversion-page .conversion-screen-frame,
.blog-page .blog-screen-frame {
  border-radius: 24px;
  box-shadow: 0 28px 86px rgba(15, 23, 42, 0.12);
}

.conversion-page .conversion-section,
.blog-page .blog-section {
  width: min(100% - 48px, 1320px);
}

.conversion-page .conversion-section-head,
.conversion-page .conversion-section-head--compact,
.blog-page .blog-section-head {
  grid-template-columns: minmax(0, 0.78fr) minmax(320px, 0.72fr);
  align-items: end;
}

.conversion-page .conversion-section-head p,
.conversion-page .conversion-section-head--compact p,
.blog-page .blog-section-head p {
  max-width: 520px;
}

.conversion-page .conversion-feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

.conversion-page .conversion-feature-card {
  border-radius: 22px;
  padding: clamp(14px, 1.6vw, 18px);
}

.conversion-page .conversion-feature-card img {
  aspect-ratio: 1.32;
  object-fit: cover;
  object-position: top center;
}

.conversion-page .conversion-screens {
  display: grid;
  gap: clamp(28px, 4vw, 58px);
}

.conversion-page .conversion-screen-row {
  grid-template-columns: minmax(230px, 0.36fr) minmax(0, 1.64fr);
  gap: clamp(28px, 4.5vw, 64px);
  margin-block: 0;
}

.conversion-page .conversion-screen-row:nth-child(even) {
  grid-template-columns: minmax(0, 1.64fr) minmax(230px, 0.36fr);
}

.conversion-page .conversion-screen-row:nth-child(even) .conversion-screen-copy {
  order: 2;
}

.conversion-page .conversion-screen-row:nth-child(even) .conversion-screen-frame {
  order: 1;
}

.conversion-page .conversion-screen-copy {
  max-width: 360px;
}

.conversion-page .conversion-screen-frame img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

.conversion-page .conversion-card,
.conversion-page .conversion-step,
.conversion-page .conversion-related-card,
.conversion-page .conversion-faq-grid details,
.conversion-page .conversion-module-grid a,
.conversion-page .conversion-topic-card,
.blog-page .article-card {
  border-radius: 20px;
}

.conversion-page .conversion-card-grid,
.conversion-page .conversion-related-grid,
.conversion-page .conversion-topic-grid,
.conversion-page .conversion-faq-grid {
  gap: clamp(18px, 2vw, 26px);
}

.conversion-page .conversion-premium-summary {
  display: grid;
  grid-template-columns: minmax(280px, 0.76fr) minmax(0, 1.24fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid rgba(47, 131, 95, 0.16);
  border-radius: 28px;
  background:
    radial-gradient(600px 260px at 100% 0%, rgba(47, 131, 95, 0.13), transparent 68%),
    rgba(255, 255, 255, 0.86);
  box-shadow: 0 28px 84px rgba(15, 23, 42, 0.09);
}

.conversion-page .conversion-premium-summary h2 {
  max-width: 560px;
  font-size: clamp(34px, 3vw, 40px);
  line-height: 1.12;
}

.conversion-page .conversion-premium-summary__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.conversion-page .conversion-premium-summary__cards article {
  min-height: 170px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(47, 131, 95, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.07);
}

.conversion-page .conversion-premium-summary__cards h3 {
  font-size: clamp(22px, 1.8vw, 26px);
}

.conversion-page .conversion-premium-summary__cards p {
  color: var(--landing-muted);
}

.conversion-page .hero-actions--multi {
  grid-template-columns: max-content;
}

.conversion-page .hero-actions--multi .button:only-child,
.conversion-page .hero-actions--multi .button-primary {
  min-width: 190px;
}

.conversion-page .conversion-cta-strip,
.conversion-page .conversion-trial-strip,
.conversion-page .conversion-final,
.conversion-page .conversion-mid-cta,
.blog-page .article-cta {
  border-radius: 24px;
}

.conversion-page .conversion-cta-strip--compact,
.conversion-page .conversion-trial-strip {
  grid-template-columns: minmax(0, 1fr) auto;
}

.conversion-page .conversion-cta-strip--compact .hero-actions,
.conversion-page .conversion-final--compact .hero-actions {
  justify-content: end;
}

.conversion-page .conversion-proof-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blog-page .article-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blog-page .article-card img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 1180px) {
  :is(.conversion-page, .blog-page) .conversion-hero,
  .blog-page .blog-hero,
  .conversion-page .conversion-premium-summary {
    grid-template-columns: 1fr;
  }

  .conversion-page .conversion-feature-grid,
  .blog-page .article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .conversion-page .conversion-screen-row,
  .conversion-page .conversion-screen-row:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .conversion-page .conversion-screen-row:nth-child(even) .conversion-screen-copy,
  .conversion-page .conversion-screen-row:nth-child(even) .conversion-screen-frame {
    order: initial;
  }

  .conversion-page .conversion-screen-copy {
    max-width: 680px;
  }
}

@media (max-width: 820px) {
  :is(.conversion-page, .blog-page) .conversion-hero,
  .blog-page .blog-hero,
  .conversion-page .conversion-section,
  .blog-page .blog-section {
    width: min(100% - 28px, 1320px);
  }

  .conversion-page .conversion-hero h1,
  .conversion-page .conversion-main--compact .conversion-hero h1,
  .blog-page .blog-hero h1 {
    font-size: clamp(36px, 9vw, 42px);
  }

  .conversion-page .conversion-section-head,
  .conversion-page .conversion-section-head--compact,
  .blog-page .blog-section-head,
  .conversion-page .conversion-cta-strip--compact,
  .conversion-page .conversion-trial-strip,
  .conversion-page .conversion-final,
  .conversion-page .conversion-mid-cta {
    grid-template-columns: 1fr;
  }

  .conversion-page .conversion-feature-grid,
  .conversion-page .conversion-premium-summary__cards,
  .conversion-page .conversion-proof-grid,
  .blog-page .article-grid {
    grid-template-columns: 1fr;
  }

  .conversion-page .conversion-screen-frame img {
    aspect-ratio: 4 / 3;
  }

  .conversion-page .hero-actions,
  .conversion-page .hero-actions--multi {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .conversion-page .hero-actions .button,
  .conversion-page .hero-actions--multi .button {
    width: 100%;
  }
}

/* Homepage 2026-07: short sales flow with real product screenshots. */
.conversion-page .conversion-main--home-short {
  gap: clamp(30px, 4.6vw, 58px);
}

.conversion-page .conversion-main--home-short .conversion-section,
.conversion-page .conversion-main--home-short .conversion-final {
  width: min(100% - 48px, 1180px);
}

.conversion-page .conversion-main--home-short .conversion-section--tight {
  padding-block: clamp(32px, 4.4vw, 54px);
}

.conversion-page .home-product-hero {
  grid-template-columns: minmax(320px, 0.88fr) minmax(420px, 1.12fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}

.conversion-page .home-product-hero__copy {
  display: grid;
  gap: 18px;
}

.conversion-page .home-product-hero__visual {
  position: relative;
  border: 1px solid rgba(38, 110, 81, 0.13);
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(238, 246, 241, 0.86));
  box-shadow: 0 28px 70px rgba(36, 73, 58, 0.14);
}

.conversion-page .home-product-hero__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

.conversion-page .home-product-hero__caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 16px;
  color: #f8fbf8;
  background: rgba(16, 64, 48, 0.82);
  box-shadow: 0 18px 45px rgba(12, 50, 38, 0.24);
  backdrop-filter: blur(12px);
}

.conversion-page .home-product-hero__visual.landing-cabinet-demo {
  border: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.conversion-page .home-product-hero__visual .landing-cabinet-demo__viewport {
  min-height: clamp(390px, 42vw, 540px);
  border-color: rgba(38, 110, 81, 0.14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 22% 10%, rgba(89, 179, 126, 0.16), transparent 34%),
    linear-gradient(145deg, #f8f6ef 0%, #eef6f1 100%);
  box-shadow: 0 28px 70px rgba(36, 73, 58, 0.14);
}

.conversion-page .home-product-hero__visual .landing-cabinet-demo__hint,
.conversion-page .home-product-hero__visual .landing-cabinet-demo__materials span {
  border-color: rgba(255, 255, 255, 0.78);
  border-radius: 14px;
  color: #173b2d;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 28px rgba(36, 73, 58, 0.12);
}

.conversion-page .home-product-hero__visual .landing-cabinet-demo__rotate-icon,
.conversion-page .home-product-hero__visual .landing-cabinet-demo__loader span {
  background: linear-gradient(135deg, #2b8a62, #56b883);
  border-top-color: #2b8a62;
}

.conversion-page .home-product-hero__visual .landing-cabinet-demo__caption {
  padding-top: 18px;
}

.conversion-page .home-product-hero__visual .landing-cabinet-demo__caption strong {
  color: #101828;
}

.conversion-page .home-product-hero__caption span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.conversion-page .home-product-hero__caption strong {
  font-size: 14px;
}

.conversion-page .landing-ai-render--home-short {
  min-height: clamp(430px, 58vw, 620px);
}

.conversion-page .landing-ai-render--home-short .landing-ai-render__photo {
  object-position: center center;
}

.conversion-page .home-process-timeline {
  overflow: visible;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(86, 184, 131, 0.11), transparent 28rem),
    rgba(255, 255, 255, 0.9) !important;
}

.conversion-page .home-process-timeline__head {
  max-width: 780px;
  margin: 0 auto clamp(24px, 3.4vw, 36px);
}

.conversion-page .home-process-timeline__head .eyebrow {
  color: #14724f;
  font-size: clamp(10px, 0.72vw, 12px);
  letter-spacing: 0.11em;
}

.conversion-page .home-process-timeline__head h2 {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.conversion-page .home-process-timeline__head p:not(.eyebrow) {
  max-width: 560px;
  margin: 14px auto 0;
  color: #667085;
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 700;
}

.conversion-page .home-process-timeline__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 20px);
  align-items: stretch;
  text-align: left;
  max-width: 940px;
  margin: 0 auto;
}

.conversion-page .home-process-timeline__track::before {
  content: none;
}

.conversion-page .home-process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  padding: clamp(16px, 1.15vw, 20px) clamp(9px, 0.9vw, 12px) clamp(9px, 0.9vw, 12px);
  border: 1px solid rgba(38, 110, 81, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 34px rgba(36, 73, 58, 0.07);
}

.conversion-page .home-process-step::after {
  content: none;
}

.conversion-page .home-process-step:last-child::after {
  content: none;
}

.conversion-page .home-process-step__number {
  position: absolute;
  top: -15px;
  left: 14px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  background: linear-gradient(135deg, #2f996e, #145d43);
  box-shadow: 0 10px 22px rgba(20, 93, 67, 0.24);
}

.conversion-page .home-process-step__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 2px 0 12px;
  border: 1px solid rgba(38, 110, 81, 0.16);
  border-radius: 12px;
  color: #227a58;
  background: linear-gradient(180deg, #ffffff, #f7fbf8);
  box-shadow: 0 8px 18px rgba(36, 73, 58, 0.07);
}

.conversion-page .home-process-step__icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.conversion-page .home-process-step h2 {
  margin: 0 0 6px;
  font-size: clamp(12px, 0.92vw, 14px);
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.conversion-page .home-process-step p {
  margin: 0 0 10px;
  color: #667085;
  font-size: clamp(9.5px, 0.62vw, 11px);
  font-weight: 700;
  line-height: 1.34;
}

.conversion-page .home-process-step img {
  width: 100%;
  height: clamp(86px, 9vw, 128px);
  object-fit: contain;
  object-position: center;
  margin-top: auto;
  padding: 5px;
  border: 1px solid rgba(38, 110, 81, 0.1);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fbf7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  cursor: zoom-in;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

.conversion-page .home-process-step img:hover,
.conversion-page .home-process-step img:focus-visible {
  border-color: rgba(43, 138, 98, 0.38);
  box-shadow: 0 12px 26px rgba(36, 73, 58, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  filter: saturate(1.05) contrast(1.03);
  outline: none;
  transform: translateY(-2px);
}

.landing-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 56px);
  background: rgba(10, 22, 18, 0.68);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  backdrop-filter: blur(10px);
}

.landing-image-lightbox.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.landing-image-lightbox img {
  display: block;
  max-width: min(980px, 92vw);
  max-height: 82vh;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.35);
}

.landing-image-lightbox button {
  position: fixed;
  top: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 32px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  color: #fff;
  background: rgba(15, 36, 28, 0.72);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.conversion-page .home-process-timeline__summary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  margin: clamp(20px, 3vw, 32px) auto 0;
  padding: 12px 18px;
  border: 1px solid rgba(38, 110, 81, 0.12);
  border-radius: 16px;
  text-align: left;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 42px rgba(36, 73, 58, 0.08);
}

.conversion-page .home-process-timeline__summary > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  background: linear-gradient(135deg, #2f996e, #145d43);
}

.conversion-page .home-process-timeline__summary strong {
  display: block;
  margin-bottom: 2px;
  color: #101828;
  font-size: 14px;
  font-weight: 900;
}

.conversion-page .home-process-timeline__summary p {
  margin: 0;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.conversion-page .home-process-timeline__actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.conversion-page .home-module-grid,
.conversion-page .home-outcome-grid,
.conversion-page .home-audience-grid {
  display: grid;
  gap: 18px;
}

.conversion-page .home-module-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.conversion-page .home-outcome-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.conversion-page .home-audience-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.conversion-page .home-product-card,
.conversion-page .home-outcome-card,
.conversion-page .home-audience-grid article {
  border: 1px solid rgba(38, 110, 81, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 44px rgba(36, 73, 58, 0.08);
}

.conversion-page .home-product-card,
.conversion-page .home-outcome-card {
  overflow: hidden;
}

.conversion-page .home-product-card img,
.conversion-page .home-outcome-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  background: #f4f7f5;
}

.conversion-page .home-product-card div,
.conversion-page .home-outcome-card {
  padding: 16px;
}

.conversion-page .home-product-card h3,
.conversion-page .home-outcome-card h3,
.conversion-page .home-audience-grid h3 {
  margin: 0 0 6px;
  color: #101828;
  font-size: 17px;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.conversion-page .home-product-card h3,
.conversion-page .home-outcome-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.conversion-page .home-product-card h3::before,
.conversion-page .home-outcome-card h3::before {
  content: "";
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 45%),
    linear-gradient(135deg, #2b8a62, #56b883);
  box-shadow: 0 10px 22px rgba(43, 138, 98, 0.22);
}

.conversion-page .home-product-card:nth-child(1) h3::before { content: "□"; }
.conversion-page .home-product-card:nth-child(2) h3::before { content: "◇"; }
.conversion-page .home-product-card:nth-child(3) h3::before { content: "▦"; }
.conversion-page .home-product-card:nth-child(4) h3::before { content: "✓"; }
.conversion-page .home-outcome-card:nth-child(1) h3::before { content: "≡"; }
.conversion-page .home-outcome-card:nth-child(2) h3::before { content: "▦"; }
.conversion-page .home-outcome-card:nth-child(3) h3::before { content: "✓"; }
.conversion-page .home-outcome-card:nth-child(4) h3::before { content: "✦"; }
.conversion-page .home-outcome-card:nth-child(5) h3::before { content: "↓"; }

.conversion-page .home-product-card h3::before,
.conversion-page .home-outcome-card h3::before {
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-family: Manrope, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 900;
}

.conversion-page .home-product-card p,
.conversion-page .home-outcome-card p,
.conversion-page .home-audience-grid p {
  margin: 0;
  color: var(--landing-muted);
  font-size: 14px;
  line-height: 1.52;
}

.conversion-page .home-audience-grid article {
  padding: 24px;
}

.conversion-page .home-audience-grid span {
  display: inline-grid;
  width: 34px;
  height: 34px;
  margin-bottom: 22px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #2b8a62, #56b883);
  font-size: 13px;
  font-weight: 800;
}

.conversion-page .home-final-cta {
  background:
    radial-gradient(circle at 15% 0%, rgba(94, 190, 133, 0.22), transparent 34%),
    linear-gradient(135deg, #173b2d 0%, #25543f 100%);
  color: #fff;
}

.conversion-page .home-final-cta p,
.conversion-page .home-final-cta .eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

.conversion-page .home-final-cta .button-ghost {
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 1120px) {
  .conversion-page .home-product-hero,
  .conversion-page .home-module-grid,
  .conversion-page .home-outcome-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .conversion-page .home-process-timeline__track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .conversion-page .home-process-timeline__track::before,
  .conversion-page .home-process-step::after {
    display: none;
  }

  .conversion-page .home-product-hero__copy {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .conversion-page .conversion-main--home-short .conversion-section,
  .conversion-page .conversion-main--home-short .conversion-final {
    width: min(100% - 28px, 1180px);
  }

  .conversion-page .home-product-hero,
  .conversion-page .home-module-grid,
  .conversion-page .home-outcome-grid,
  .conversion-page .home-audience-grid {
    grid-template-columns: 1fr;
  }

  .conversion-page .home-process-timeline__head h2 {
    font-size: clamp(30px, 8vw, 38px);
  }

  .conversion-page .home-process-timeline__track {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .conversion-page .home-process-timeline__track::before,
  .conversion-page .home-process-step::after {
    display: none;
  }

  .conversion-page .home-process-step {
    padding: 24px 18px 18px;
  }

  .conversion-page .home-process-step__number {
    left: 18px;
    width: 44px;
    height: 44px;
  }

  .conversion-page .home-process-step img {
    height: clamp(150px, 42vw, 220px);
  }

  .conversion-page .home-process-timeline__summary {
    align-items: flex-start;
    width: 100%;
    padding: 16px;
  }

  .conversion-page .home-product-hero__visual img,
  .conversion-page .home-product-card img,
  .conversion-page .home-outcome-card img {
    aspect-ratio: 4 / 3;
  }

  .conversion-page .home-product-hero__caption {
    position: static;
    margin: 12px;
    color: #173b2d;
    background: rgba(255, 255, 255, 0.88);
  }

  .conversion-page .home-product-hero__caption span {
    color: rgba(23, 59, 45, 0.64);
  }
}

/* 2026-07 premium portal consolidation */
.conversion-page {
  --landing-bg: var(--color-bg);
  --landing-card-bg: rgba(255, 255, 255, 0.88);
  --landing-border: var(--color-border);
  --landing-shadow: var(--shadow-card);
  --landing-radius: var(--radius-xl);
  --landing-green: var(--color-premium);
  --landing-orange: var(--color-primary);
  --landing-muted: var(--color-muted);
  color: var(--color-text);
  background:
    radial-gradient(circle at 12% -8%, rgba(86, 184, 131, 0.18), transparent 34rem),
    radial-gradient(circle at 92% 8%, rgba(255, 244, 220, 0.82), transparent 34rem),
    linear-gradient(180deg, #fbfcf8 0%, var(--color-bg) 58%, #f8faf6 100%);
}

.conversion-page .site-header,
.conversion-page .conversion-section,
.conversion-page .conversion-hero,
.conversion-page .conversion-final,
.conversion-page .conversion-footer,
.conversion-page .conversion-card,
.conversion-page .conversion-screen-row,
.conversion-page .conversion-related-card,
.conversion-page .conversion-screen-frame {
  border-color: var(--landing-border);
  border-radius: var(--landing-radius);
  box-shadow: var(--shadow-soft);
}

.conversion-page .site-header {
  margin: 14px auto 0;
  width: min(100% - 32px, 1320px);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
}

.conversion-page .top-nav a,
.conversion-page .site-footer a,
.conversion-page .conversion-footer a {
  color: #34443d;
}

.conversion-page .top-nav a:hover,
.conversion-page .site-footer a:hover,
.conversion-page .conversion-footer a:hover {
  color: var(--color-premium);
}

.conversion-page .button {
  min-height: 46px;
  border-radius: var(--radius-md);
  padding: 0 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.conversion-page .button-primary {
  background: linear-gradient(135deg, var(--color-primary), #ff8a2a);
  box-shadow: 0 16px 32px rgba(255, 106, 0, 0.22);
}

.conversion-page .button-primary:hover {
  background: linear-gradient(135deg, var(--color-primary-hover), #ff7819);
}

.conversion-page .button-ghost {
  border-color: rgba(38, 110, 81, 0.18);
  color: #24493a;
  background: rgba(255, 255, 255, 0.72);
}

.conversion-page .button-ghost:hover {
  border-color: rgba(43, 138, 98, 0.36);
  color: var(--color-premium);
}

.conversion-page h1,
.conversion-page h2,
.conversion-page h3 {
  color: var(--color-text);
  letter-spacing: -0.045em;
}

.conversion-page h1 {
  font-size: clamp(42px, 5vw, 60px);
  line-height: 1.02;
}

.conversion-page h2 {
  font-size: clamp(30px, 3.5vw, 42px);
  line-height: 1.08;
}

.conversion-page .eyebrow,
.conversion-page .landing-ai-render__badge {
  color: #14724f;
}

.conversion-page .conversion-section,
.conversion-page .conversion-hero,
.conversion-page .conversion-final {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
}

.conversion-page .conversion-screen-frame img,
.conversion-page .home-product-card img,
.conversion-page .home-outcome-card img {
  filter: saturate(1.02) contrast(1.01);
}

.conversion-page .landing-ai-render__bar {
  background: linear-gradient(135deg, #173b2d, #25543f);
}

@media (max-width: 760px) {
  .conversion-page .site-header {
    width: min(100% - 20px, 1320px);
    border-radius: 18px;
  }

  .conversion-page h1 {
    font-size: clamp(36px, 11vw, 42px);
  }

  .conversion-page h2 {
    font-size: clamp(28px, 8vw, 32px);
  }
}

/* 2026-07 landing rhythm alignment */
.conversion-page {
  --portal-shell-width: 1120px;
  --portal-section-gap: clamp(12px, 1.8vw, 20px);
  --portal-section-pad-x: clamp(22px, 3.4vw, 42px);
  --portal-section-pad-y: clamp(22px, 3vw, 34px);
  --portal-card-gap: clamp(12px, 1.6vw, 18px);
}

.conversion-page .site-header,
.conversion-page .conversion-hero,
.conversion-page .conversion-section,
.conversion-page .conversion-final,
.conversion-page .conversion-footer,
.conversion-page .conversion-main--home-short .conversion-section,
.conversion-page .conversion-main--home-short .conversion-final {
  width: min(var(--portal-shell-width), calc(100% - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.conversion-page .conversion-main,
.conversion-page .conversion-main--compact,
.conversion-page .conversion-main--home-short {
  display: grid;
  gap: var(--portal-section-gap) !important;
  padding-block: clamp(16px, 2.5vw, 30px) !important;
}

.conversion-page .conversion-hero,
.conversion-page .conversion-section,
.conversion-page .conversion-final {
  padding: var(--portal-section-pad-y) var(--portal-section-pad-x) !important;
  border: 1px solid var(--landing-border) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.84) !important;
}

.conversion-page .conversion-section--tight {
  padding: var(--portal-section-pad-y) var(--portal-section-pad-x) !important;
}

.conversion-page .conversion-section--ai-render {
  padding: clamp(12px, 1.6vw, 18px) !important;
}

.conversion-page .conversion-section-head,
.conversion-page .conversion-section-head--compact {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.7fr) !important;
  gap: clamp(18px, 3vw, 34px) !important;
  align-items: end !important;
  margin: 0 0 clamp(18px, 2.8vw, 30px) !important;
}

.conversion-page .conversion-section-head h2,
.conversion-page .conversion-section-head--compact h2 {
  max-width: 12.5em;
}

.conversion-page .conversion-section-head p,
.conversion-page .conversion-section-head--compact p,
.conversion-page .conversion-hero .hero-lead {
  max-width: 44em;
}

.conversion-page .conversion-card-grid,
.conversion-page .conversion-related-grid,
.conversion-page .conversion-faq-grid,
.conversion-page .home-module-grid,
.conversion-page .home-outcome-grid,
.conversion-page .home-audience-grid,
.conversion-page .conversion-premium-summary__cards {
  gap: var(--portal-card-gap) !important;
}

.conversion-page .conversion-card,
.conversion-page .conversion-related-card,
.conversion-page .conversion-faq-grid details,
.conversion-page .home-product-card,
.conversion-page .home-outcome-card,
.conversion-page .home-audience-grid article {
  padding: clamp(18px, 2.3vw, 24px) !important;
  border-radius: 18px !important;
}

.conversion-page .home-product-card img,
.conversion-page .home-outcome-card img {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 16px !important;
  background: #f8fbf7 !important;
}

.conversion-page .conversion-hero,
.conversion-page .home-product-hero {
  grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1fr) !important;
  gap: clamp(26px, 4vw, 54px) !important;
  align-items: center !important;
}

.conversion-page .conversion-hero-media,
.conversion-page .conversion-hero-media .conversion-screen-frame {
  width: 100% !important;
}

.conversion-page .conversion-hero-media .conversion-screen-frame img {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.conversion-page .conversion-screens {
  display: grid;
  gap: var(--portal-section-gap);
}

.conversion-page .conversion-screen-row,
.conversion-page .conversion-screen-row:nth-child(even) {
  display: grid !important;
  grid-template-columns: minmax(220px, 0.38fr) minmax(0, 1fr) !important;
  gap: clamp(20px, 3vw, 40px) !important;
  align-items: center !important;
  margin: 0 !important;
  padding: clamp(20px, 3vw, 34px) !important;
  background: rgba(255, 255, 255, 0.72) !important;
}

.conversion-page .conversion-screen-row:nth-child(even) .conversion-screen-copy,
.conversion-page .conversion-screen-row:nth-child(even) .conversion-screen-frame {
  order: initial !important;
}

.conversion-page .conversion-screen-copy {
  max-width: none !important;
  padding: 0 !important;
}

.conversion-page .conversion-screen-copy span {
  color: #14724f !important;
  background: #eaf6ee !important;
}

.conversion-page .conversion-screen-frame {
  overflow: hidden;
  background: #fbfdfb !important;
}

.conversion-page .conversion-screen-row .conversion-screen-frame img {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.conversion-page .conversion-mid-cta,
.conversion-page .conversion-premium-summary {
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.conversion-page .conversion-final--compact {
  color: var(--color-text) !important;
  background:
    radial-gradient(circle at 86% 18%, rgba(86, 184, 131, 0.13), transparent 18rem),
    rgba(255, 255, 255, 0.9) !important;
}

.conversion-page .conversion-final--compact h2,
.conversion-page .conversion-final--compact p {
  color: inherit !important;
}

.conversion-page .conversion-final--compact .button-primary {
  color: #fff !important;
}

.conversion-page .home-final-cta {
  color: #fff !important;
  background: linear-gradient(135deg, #10273a, #123a31) !important;
}

.conversion-page .home-final-cta h2,
.conversion-page .home-final-cta p {
  color: #fff !important;
}

.conversion-page .landing-ai-render__bar {
  display: grid !important;
  grid-template-columns: minmax(220px, 1.15fr) minmax(180px, .85fr) auto !important;
  gap: clamp(18px, 3vw, 34px) !important;
  align-items: center !important;
  padding: clamp(22px, 3vw, 34px) clamp(24px, 4vw, 42px) !important;
  border-radius: 22px !important;
  color: #fff !important;
}

.conversion-page .landing-ai-render__bar strong {
  max-width: 12em;
  font-size: clamp(20px, 2.1vw, 28px) !important;
  line-height: 1.18 !important;
}

.conversion-page .landing-ai-render__bar span {
  color: rgba(255, 255, 255, 0.86) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.conversion-page .landing-ai-render__bar .button {
  justify-self: end;
  color: #fff !important;
  white-space: nowrap;
  background: linear-gradient(135deg, #56b883, #2b8a62) !important;
  box-shadow: 0 18px 36px rgba(18, 61, 45, 0.28) !important;
}

.conversion-page .conversion-footer {
  padding: clamp(28px, 4vw, 42px) !important;
  margin-top: 0 !important;
}

.conversion-page .render-ai-before-after-frame {
  padding: clamp(10px, 1.4vw, 16px) !important;
}

.conversion-page .render-ai-before-after {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 12px);
  width: 100%;
  min-height: 100%;
  border-radius: 16px;
  background: #f5efe6;
}

.conversion-page .render-ai-before-after__panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(38, 110, 81, 0.12);
  border-radius: 14px;
  background: #fff;
}

.conversion-page .render-ai-before-after__panel span {
  display: block;
  padding: 8px 10px;
  color: #152033;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  background: rgba(255, 249, 241, 0.92);
}

.conversion-page .render-ai-before-after__panel img,
.conversion-page .conversion-screen-row .conversion-screen-frame .render-ai-before-after__panel img,
.conversion-page .conversion-hero-media .conversion-screen-frame .render-ai-before-after__panel img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
}

@media (max-width: 980px) {
  .conversion-page .conversion-hero,
  .conversion-page .home-product-hero,
  .conversion-page .conversion-section-head,
  .conversion-page .conversion-section-head--compact,
  .conversion-page .conversion-screen-row,
  .conversion-page .conversion-screen-row:nth-child(even) {
    grid-template-columns: 1fr !important;
  }

  .conversion-page .conversion-section-head h2,
  .conversion-page .conversion-section-head--compact h2 {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .conversion-page {
    --portal-section-gap: 12px;
    --portal-section-pad-x: 18px;
    --portal-section-pad-y: 22px;
  }

  .conversion-page .site-header,
  .conversion-page .conversion-hero,
  .conversion-page .conversion-section,
  .conversion-page .conversion-final,
  .conversion-page .conversion-footer,
  .conversion-page .conversion-main--home-short .conversion-section,
  .conversion-page .conversion-main--home-short .conversion-final {
    width: min(100% - 22px, var(--portal-shell-width)) !important;
  }

  .conversion-page .conversion-section--ai-render {
    padding: 12px !important;
  }

  .conversion-page .landing-ai-render__bar {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .conversion-page .landing-ai-render__bar .button {
    justify-self: stretch;
  }

  .conversion-page .conversion-screen-row,
  .conversion-page .conversion-screen-row:nth-child(even) {
    padding: 16px !important;
  }

  .conversion-page .render-ai-before-after {
    grid-template-columns: 1fr;
  }
}

/* 2026-07 home lower-section polish */
.conversion-page .conversion-main--home-short #dla-kogo {
  padding: clamp(30px, 4vw, 46px) !important;
  background:
    radial-gradient(circle at 92% 4%, rgba(86, 184, 131, 0.09), transparent 18rem),
    rgba(255, 255, 255, 0.9) !important;
}

.conversion-page .conversion-main--home-short #dla-kogo .conversion-section-head--compact {
  gap: clamp(18px, 3vw, 42px) !important;
  align-items: end !important;
  margin-bottom: clamp(22px, 3vw, 32px) !important;
}

.conversion-page .conversion-main--home-short #dla-kogo .eyebrow {
  color: #14724f !important;
  font-size: 11px !important;
  letter-spacing: 0.11em !important;
}

.conversion-page .conversion-main--home-short #dla-kogo h2 {
  max-width: 560px !important;
  font-size: clamp(30px, 3.1vw, 42px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
}

.conversion-page .conversion-main--home-short #dla-kogo .conversion-section-head--compact > p {
  max-width: 420px !important;
  color: #667085 !important;
  font-size: clamp(13px, 1vw, 15px) !important;
  font-weight: 750 !important;
  line-height: 1.48 !important;
}

.conversion-page .home-audience-grid {
  gap: clamp(14px, 1.8vw, 22px) !important;
}

.conversion-page .home-audience-grid article {
  min-height: 150px;
  padding: clamp(18px, 2.2vw, 26px) !important;
  border-color: rgba(38, 110, 81, 0.1) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(86, 184, 131, 0.08), transparent 12rem),
    rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 14px 34px rgba(36, 73, 58, 0.06) !important;
}

.conversion-page .home-audience-grid span {
  width: 34px !important;
  height: 34px !important;
  margin-bottom: 18px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #2f996e, #145d43) !important;
  box-shadow: 0 10px 22px rgba(20, 93, 67, 0.18) !important;
}

.conversion-page .home-audience-grid h3 {
  margin-bottom: 8px !important;
  font-size: clamp(15px, 1.1vw, 17px) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.025em !important;
}

.conversion-page .home-audience-grid p {
  color: #667085 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.5 !important;
}

.conversion-page .conversion-footer--home {
  display: grid !important;
  grid-template-columns: minmax(220px, 0.95fr) minmax(300px, 1.35fr) minmax(220px, 0.75fr) !important;
  gap: clamp(26px, 4vw, 58px) !important;
  align-items: start !important;
  padding: clamp(30px, 4vw, 46px) clamp(34px, 5vw, 54px) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(86, 184, 131, 0.1), transparent 18rem),
    radial-gradient(circle at 100% 100%, rgba(255, 244, 220, 0.48), transparent 18rem),
    rgba(255, 255, 255, 0.9) !important;
}

.conversion-page .conversion-footer--home h2 {
  margin: 0 0 14px !important;
  color: #101828 !important;
  font-size: clamp(28px, 2.6vw, 38px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.05em !important;
}

.conversion-page .conversion-footer--home h3 {
  margin: 0 0 14px !important;
  color: #101828 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}

.conversion-page .conversion-footer--home p {
  max-width: 320px;
  margin: 0 !important;
  color: #667085 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

.conversion-page .conversion-footer__contact {
  display: inline-flex !important;
  margin-top: 18px;
  color: #145d43 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.conversion-page .conversion-footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px);
}

.conversion-page .conversion-footer--home nav {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 9px !important;
}

.conversion-page .conversion-footer--home nav a {
  display: inline-flex;
  width: fit-content;
  color: #34443d !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
}

.conversion-page .conversion-footer--home nav a:hover,
.conversion-page .conversion-footer__contact:hover {
  color: #2f996e !important;
}

.conversion-page .conversion-footer__start {
  display: grid;
  gap: 18px;
  justify-items: start;
  padding: 18px;
  border: 1px solid rgba(38, 110, 81, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
}

.conversion-page .conversion-footer__start .button {
  min-height: 44px !important;
  padding-inline: 18px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  border-radius: 12px !important;
}

@media (max-width: 980px) {
  .conversion-page .conversion-footer--home {
    grid-template-columns: 1fr !important;
  }

  .conversion-page .conversion-footer__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .conversion-page .conversion-main--home-short #dla-kogo {
    padding: 22px !important;
  }

  .conversion-page .conversion-main--home-short #dla-kogo .conversion-section-head--compact {
    align-items: start !important;
  }

  .conversion-page .conversion-footer--home {
    padding: 24px !important;
  }

  .conversion-page .conversion-footer__links {
    grid-template-columns: 1fr;
  }
}

/* 2026-07 landing SaaS header polish */
:is(.conversion-page, .blog-page) .site-header.conversion-header {
  position: sticky !important;
  top: 14px !important;
  z-index: 120 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(14px, 2vw, 24px) !important;
  width: min(calc(100% - 36px), var(--portal-shell-width, 1360px)) !important;
  min-height: 82px !important;
  margin: 14px auto 26px !important;
  padding: 12px 14px 12px 16px !important;
  border: 1px solid rgba(21, 93, 67, 0.12) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 20px 54px rgba(16, 24, 40, 0.08) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 178px !important;
  color: #101828 !important;
  font-family: "Space Grotesk", "Manrope", Arial, sans-serif !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .brand::after {
  content: "MebloPilot";
  white-space: nowrap;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .brand img {
  width: 46px !important;
  height: 46px !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px rgba(20, 93, 67, 0.1) !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  color: #27364a !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a {
  --tecad-nav-icon: none;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 46px !important;
  padding: 0 13px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: #1f2937 !important;
  background: transparent !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  opacity: 0.95;
  -webkit-mask: var(--tecad-nav-icon) center / contain no-repeat;
  mask: var(--tecad-nav-icon) center / contain no-repeat;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a[href="/"],
:is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a[href="/index.html"] {
  --tecad-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E");
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a[href*="generator-mebli"] {
  --tecad-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 8 4.5v9L12 20 4 15.5v-9z'/%3E%3Cpath d='M12 11 4.5 6.8'/%3E%3Cpath d='m12 11 7.5-4.2'/%3E%3Cpath d='M12 11v9'/%3E%3C/svg%3E");
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a[href*="render-ai"] {
  --tecad-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 14 8l5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3Cpath d='M19 14l1 2 2 1-2 1-1 2-1-2-2-1 2-1z'/%3E%3C/svg%3E");
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a[href*="rozkroj"] {
  --tecad-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='7' r='3'/%3E%3Ccircle cx='6' cy='17' r='3'/%3E%3Cpath d='M8.5 8.5 20 20'/%3E%3Cpath d='M8.5 15.5 20 4'/%3E%3C/svg%3E");
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a[href*="wycena"] {
  --tecad-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M8 7h8'/%3E%3Cpath d='M8 11h2M12 11h2M16 11h0'/%3E%3Cpath d='M8 15h2M12 15h2M16 15h0'/%3E%3C/svg%3E");
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a[href*="samouczki"] {
  --tecad-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5z'/%3E%3Cpath d='M9 8h6'/%3E%3Cpath d='M9 12h5'/%3E%3C/svg%3E");
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a[href*="blog"] {
  --tecad-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5z'/%3E%3C/svg%3E");
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a:hover {
  color: #14724f !important;
  background: rgba(47, 153, 110, 0.08) !important;
  border-color: rgba(47, 153, 110, 0.12) !important;
  transform: translateY(-1px);
}

html:has(link[rel="canonical"][href="https://meblopilot.pl/"]) .site-header.conversion-header .top-nav a[href="/"],
html:has(link[rel="canonical"][href$="/generator-mebli-skrzyniowych.html"]) .site-header.conversion-header .top-nav a[href*="generator-mebli"],
html:has(link[rel="canonical"][href$="/render-ai.html"]) .site-header.conversion-header .top-nav a[href*="render-ai"],
html:has(link[rel="canonical"][href$="/rozkroj-plyt-online.html"]) .site-header.conversion-header .top-nav a[href*="rozkroj"],
html:has(link[rel="canonical"][href$="/wycena-mebli-online.html"]) .site-header.conversion-header .top-nav a[href*="wycena"],
html:has(link[rel="canonical"][href$="/samouczki.html"]) .site-header.conversion-header .top-nav a[href*="samouczki"],
html:has(link[rel="canonical"][href$="/blog.html"]) .site-header.conversion-header .top-nav a[href*="blog"],
html:has(link[rel="canonical"][href*="program-do-projektowania-mebli"]) .site-header.conversion-header .top-nav a[href*="blog"],
html:has(link[rel="canonical"][href*="lista-formatek"]) .site-header.conversion-header .top-nav a[href*="blog"],
html:has(link[rel="canonical"][href*="projektowanie-kuchni"]) .site-header.conversion-header .top-nav a[href*="blog"],
html:has(link[rel="canonical"][href*="jak-"]) .site-header.conversion-header .top-nav a[href*="blog"] {
  color: #0f6f4b !important;
  background: linear-gradient(135deg, rgba(47, 153, 110, 0.14), rgba(226, 246, 237, 0.88)) !important;
  border-color: rgba(47, 153, 110, 0.15) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68) !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .header-actions::before {
  content: "3 dni PRO + 3 kredyty AI";
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid rgba(47, 153, 110, 0.22);
  border-radius: 15px;
  color: #0f6f4b;
  background: linear-gradient(135deg, rgba(226, 246, 237, 0.92), rgba(255, 255, 255, 0.9));
  box-shadow: 0 12px 28px rgba(47, 153, 110, 0.08);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .button {
  min-height: 48px !important;
  padding: 0 18px !important;
  border-radius: 15px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .button-ghost {
  color: #1f2937 !important;
  background: rgba(255, 255, 255, 0.74) !important;
  border-color: rgba(16, 24, 40, 0.1) !important;
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.04) !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .button-ghost::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .button-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, #ff7a18, #ff5f00) !important;
  border-color: rgba(255, 106, 0, 0.5) !important;
  box-shadow: 0 16px 34px rgba(255, 106, 0, 0.24) !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .button-primary::after {
  content: "→";
  margin-left: 8px;
  font-size: 18px;
  line-height: 1;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .button-primary:hover {
  background: linear-gradient(135deg, #ff8a2b, #e85f00) !important;
  box-shadow: 0 20px 40px rgba(255, 106, 0, 0.28) !important;
}

@media (max-width: 1180px) {
  :is(.conversion-page, .blog-page) .site-header.conversion-header {
    grid-template-columns: auto 1fr !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav {
    order: 3;
    grid-column: 1 / -1;
    justify-content: flex-start !important;
    overflow-x: auto;
    padding: 2px 0 4px;
    scrollbar-width: none;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 760px) {
  :is(.conversion-page, .blog-page) .site-header.conversion-header {
    top: 8px !important;
    width: min(100% - 20px, var(--portal-shell-width, 1360px)) !important;
    min-height: 0 !important;
    margin: 8px auto 16px !important;
    padding: 10px !important;
    border-radius: 20px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .brand {
    min-width: 0 !important;
    font-size: 17px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .brand img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .header-actions {
    gap: 6px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .header-actions::before {
    display: none;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .button {
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .button-ghost::before {
    display: none;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a {
    min-height: 38px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a::before {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }
}

@media (max-width: 520px) {
  :is(.conversion-page, .blog-page) .site-header.conversion-header {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .header-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: 0.8fr 1.2fr;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .button {
    width: 100%;
  }
}

/* 2026-07 landing header full-width bar refinement */
:is(.conversion-page, .blog-page) .site-header.conversion-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 80px !important;
  margin: 0 0 clamp(22px, 3vw, 38px) !important;
  padding-block: 12px !important;
  padding-inline: max(24px, calc((100vw - 1440px) / 2 + 24px)) !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(12px, 1.45vw, 22px) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(15, 70, 45, 0.08) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 8px 28px rgba(16, 24, 40, 0.055) !important;
  backdrop-filter: blur(16px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .brand {
  min-width: 156px !important;
  gap: 9px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .brand img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav {
  flex-wrap: nowrap !important;
  justify-content: center !important;
  gap: 4px !important;
  overflow: visible !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 11px !important;
  gap: 7px !important;
  color: #162033 !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a::before {
  width: 16px !important;
  height: 16px !important;
  flex-basis: 16px !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .header-actions {
  flex-wrap: nowrap !important;
  gap: 8px !important;
  min-width: max-content !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .header-actions::before {
  content: "🎁  3 dni PRO + 3 kredyty AI";
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .button {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 15px !important;
  border-radius: 14px !important;
  font-size: 13.5px !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .button-primary {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 22px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header + main,
:is(.conversion-page, .blog-page) .site-header.conversion-header + .conversion-main {
  scroll-margin-top: 96px;
}

@media (min-width: 1181px) {
  :is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav {
    order: initial !important;
    grid-column: auto !important;
  }
}

@media (max-width: 1320px) {
  :is(.conversion-page, .blog-page) .site-header.conversion-header {
    padding-inline: 18px !important;
    gap: 10px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .brand {
    min-width: 132px !important;
    font-size: 16px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a {
    padding: 0 9px !important;
    font-size: 13px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .header-actions::before {
    max-width: 152px;
    white-space: normal;
    text-align: left;
    line-height: 1.08;
  }
}

@media (max-width: 1180px) {
  :is(.conversion-page, .blog-page) .site-header.conversion-header {
    grid-template-columns: auto 1fr !important;
    min-height: 74px !important;
    padding-block: 10px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav {
    order: 3 !important;
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
    scrollbar-width: none;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav::-webkit-scrollbar {
    display: none;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .header-actions {
    justify-self: end;
  }
}

@media (max-width: 760px) {
  :is(.conversion-page, .blog-page) .site-header.conversion-header {
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 10px 12px !important;
    border-radius: 0 !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav {
    display: none !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .brand {
    min-width: 0 !important;
    font-size: 16px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .brand img {
    width: 38px !important;
    height: 38px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .button-ghost {
    display: none !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .button-primary {
    width: auto !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    font-size: 12.5px !important;
  }
}

@media (max-width: 420px) {
  :is(.conversion-page, .blog-page) .site-header.conversion-header .brand::after {
    content: "MebloPilot";
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .button-primary {
    padding-inline: 12px !important;
  }
}

/* 2026-07 landing header overlap bugfix */
:is(.conversion-page, .blog-page) .site-header.conversion-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(28px, 2.25vw, 36px) !important;
  min-width: 0 !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .brand {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  margin: 0 !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .brand img {
  max-width: 48px !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav {
  flex: 0 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

:is(.conversion-page, .blog-page) .site-header.conversion-header .header-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  min-width: max-content !important;
  margin: 0 0 0 auto !important;
}

@media (min-width: 1520px) {
  :is(.conversion-page, .blog-page) .site-header.conversion-header {
    padding-inline: max(28px, calc((100vw - 1520px) / 2 + 28px)) !important;
  }
}

@media (max-width: 1440px) {
  :is(.conversion-page, .blog-page) .site-header.conversion-header {
    gap: 28px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav {
    gap: 6px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a {
    padding-inline: 8px !important;
    font-size: 12.8px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .header-actions {
    gap: 10px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .header-actions::before {
    max-width: 138px !important;
    padding-inline: 12px !important;
  }
}

@media (max-width: 1368px) {
  :is(.conversion-page, .blog-page) .site-header.conversion-header {
    padding-inline: 16px !important;
    gap: 24px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .brand {
    font-size: 15.5px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .brand img {
    width: 40px !important;
    height: 40px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a {
    min-height: 38px !important;
    height: 38px !important;
    padding-inline: 7px !important;
    gap: 5px !important;
    font-size: 12px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav a::before {
    width: 15px !important;
    height: 15px !important;
    flex-basis: 15px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .button {
    padding-inline: 12px !important;
    font-size: 12.5px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .button-primary {
    padding-inline: 16px !important;
  }
}

@media (max-width: 1240px) {
  :is(.conversion-page, .blog-page) .site-header.conversion-header {
    min-height: 72px !important;
    gap: 16px !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .top-nav {
    display: none !important;
  }

  :is(.conversion-page, .blog-page) .site-header.conversion-header .header-actions {
    margin-left: auto !important;
  }
}

/* 2026-07 home first section SaaS hero redesign */
.conversion-page .conversion-main--home-short .home-process-hero {
  position: relative;
  width: min(100% - 36px, 1440px) !important;
  margin-top: 0 !important;
  padding: clamp(34px, 4.5vw, 64px) !important;
  overflow: hidden;
  border-radius: 32px !important;
  border: 1px solid rgba(21, 93, 67, 0.1) !important;
  background:
    radial-gradient(circle at 3% 9%, rgba(47, 153, 110, 0.12), transparent 19rem),
    radial-gradient(circle at 80% 8%, rgba(255, 244, 220, 0.75), transparent 20rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(249, 252, 248, 0.92)) !important;
  box-shadow: 0 28px 78px rgba(36, 73, 58, 0.11) !important;
}

.conversion-page .home-process-hero__main {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.35fr);
  gap: clamp(34px, 4.5vw, 72px);
  align-items: center;
}

.conversion-page .home-process-hero__copy {
  position: relative;
  z-index: 2;
}

.conversion-page .home-process-hero__copy .eyebrow {
  margin-bottom: 18px !important;
  color: #14724f !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
}

.conversion-page .home-process-hero__copy h1 {
  max-width: 680px;
  margin: 0 !important;
  color: #101828 !important;
  font-size: clamp(50px, 5.2vw, 72px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.06em !important;
  font-weight: 900 !important;
}

.conversion-page .home-process-hero__copy > p:not(.eyebrow) {
  max-width: 590px;
  margin: 24px 0 0 !important;
  color: #5e6a7c !important;
  font-size: clamp(18px, 1.45vw, 22px) !important;
  line-height: 1.55 !important;
  font-weight: 650 !important;
}

.conversion-page .home-process-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.conversion-page .button-premium {
  min-height: 58px !important;
  padding: 0 28px !important;
  border-radius: 18px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #14875b, #076c49) !important;
  border-color: rgba(7, 108, 73, 0.18) !important;
  box-shadow: 0 18px 40px rgba(20, 135, 91, 0.28) !important;
}

.conversion-page .button-premium:hover {
  background: linear-gradient(135deg, #1a9666, #075f41) !important;
  box-shadow: 0 22px 46px rgba(20, 135, 91, 0.32) !important;
}

.conversion-page .home-process-hero__actions .button-ghost {
  min-height: 58px !important;
  padding: 0 26px !important;
  border-radius: 18px !important;
  color: #213047 !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(16, 24, 40, 0.1) !important;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.06) !important;
}

.conversion-page .home-process-hero__visual {
  position: relative;
  min-height: clamp(420px, 35vw, 560px);
}

.conversion-page .home-process-hero__device {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  min-height: clamp(360px, 31vw, 500px);
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(21, 93, 67, 0.12);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 247, 0.84)),
    #ffffff;
  box-shadow: 0 24px 70px rgba(16, 24, 40, 0.14);
}

.conversion-page .home-process-hero__device::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 36px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 2;
}

.conversion-page .home-process-hero__screen {
  width: 100%;
  height: 100%;
  min-height: clamp(330px, 29vw, 470px);
  object-fit: cover;
  display: block;
  border-radius: 18px;
}

.conversion-page .home-process-hero__screen--app {
  object-position: center;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  filter: saturate(0.95) contrast(1.02);
}

.conversion-page .home-process-hero__screen--render {
  object-position: center;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.conversion-page .home-process-hero__float {
  position: absolute;
  right: clamp(16px, 3vw, 52px);
  bottom: clamp(14px, 3vw, 38px);
  z-index: 4;
  display: grid;
  gap: 10px;
  min-width: min(280px, 62%);
  padding: 18px 20px;
  border: 1px solid rgba(21, 93, 67, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.13);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.conversion-page .home-process-hero__float span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #213047;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.15;
}

.conversion-page .home-process-hero__float span::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 999px;
  color: #0d7b52;
  background: #eaf7f0;
  font-size: 12px;
  font-weight: 900;
}

.conversion-page .home-process-hero .home-process-timeline__head {
  margin: clamp(42px, 5vw, 72px) 0 24px !important;
  text-align: left !important;
}

.conversion-page .home-process-hero .home-process-timeline__head .eyebrow {
  margin-bottom: 8px !important;
  color: #14724f !important;
}

.conversion-page .home-process-hero .home-process-timeline__head h2 {
  max-width: 760px !important;
  margin: 0 !important;
  color: #101828 !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.045em !important;
}

.conversion-page .home-process-hero .home-process-timeline__track {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
  padding: 0 !important;
}

.conversion-page .home-process-hero .home-process-timeline__track::before,
.conversion-page .home-process-hero .home-process-step::after {
  display: none !important;
}

.conversion-page .home-process-hero .home-process-step {
  min-width: 0 !important;
  min-height: 230px !important;
  padding: 28px 22px 24px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(21, 93, 67, 0.1) !important;
  box-shadow: 0 16px 42px rgba(36, 73, 58, 0.08) !important;
}

.conversion-page .home-process-hero .home-process-step__number {
  position: static !important;
  width: 34px !important;
  height: 34px !important;
  margin: -8px 0 18px !important;
  font-size: 14px !important;
  background: linear-gradient(135deg, #2f996e, #0e6b49) !important;
  box-shadow: 0 12px 24px rgba(20, 93, 67, 0.2) !important;
}

.conversion-page .home-process-hero .home-process-step__icon {
  width: 58px !important;
  height: 58px !important;
  margin: 0 0 22px !important;
  color: #0d7b52 !important;
  background: #eaf7f0 !important;
  border-color: rgba(47, 153, 110, 0.16) !important;
}

.conversion-page .home-process-hero .home-process-step h2 {
  margin: 0 0 12px !important;
  color: #101828 !important;
  font-size: clamp(17px, 1.2vw, 21px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
}

.conversion-page .home-process-hero .home-process-step p {
  margin: 0 !important;
  color: #667085 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 650 !important;
}

.conversion-page .home-process-hero .home-process-step img,
.conversion-page .home-process-hero .home-process-timeline__summary,
.conversion-page .home-process-hero .home-process-timeline__actions {
  display: none !important;
}

@media (max-width: 1280px) {
  .conversion-page .home-process-hero .home-process-timeline__track {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .conversion-page .conversion-main--home-short .home-process-hero {
    padding: 28px !important;
  }

  .conversion-page .home-process-hero__main {
    grid-template-columns: 1fr;
  }

  .conversion-page .home-process-hero__visual {
    min-height: 0;
  }

  .conversion-page .home-process-hero__device {
    min-height: 360px;
  }
}

@media (max-width: 760px) {
  .conversion-page .conversion-main--home-short .home-process-hero {
    width: min(100% - 22px, 1440px) !important;
    padding: 22px !important;
    border-radius: 24px !important;
  }

  .conversion-page .home-process-hero__copy h1 {
    font-size: clamp(36px, 10vw, 44px) !important;
  }

  .conversion-page .home-process-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .conversion-page .home-process-hero__device {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .conversion-page .home-process-hero__screen {
    min-height: 220px;
    border-radius: 16px !important;
  }

  .conversion-page .home-process-hero__screen--render {
    display: none;
  }

  .conversion-page .home-process-hero__float {
    position: static;
    min-width: 0;
    margin-top: 14px;
  }

  .conversion-page .home-process-hero .home-process-timeline__track {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .conversion-page .home-process-hero .home-process-step {
    min-height: 0 !important;
    padding: 22px 18px !important;
  }
}

@media (max-width: 520px) {
  .conversion-page .home-process-hero .home-process-timeline__track {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-07 home first section premium polish */
.conversion-page .conversion-main--home-short .home-process-hero {
  width: min(calc(100% - 48px), 1440px) !important;
  max-width: 1440px !important;
  padding: clamp(56px, 5vw, 78px) !important;
  border-radius: 32px !important;
}

.conversion-page .home-process-hero__main {
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr) !important;
  gap: clamp(42px, 4.4vw, 72px) !important;
  align-items: center !important;
}

.conversion-page .home-process-hero__copy {
  max-width: 560px !important;
}

.conversion-page .home-process-hero__copy h1 {
  max-width: 760px !important;
  font-size: clamp(56px, 4.35vw, 64px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.056em !important;
}

.conversion-page .home-process-hero__copy > p:not(.eyebrow) {
  max-width: 560px !important;
  font-size: clamp(18px, 1.35vw, 20px) !important;
  line-height: 1.5 !important;
}

.conversion-page .home-process-hero__actions {
  margin-top: 34px !important;
  gap: 14px !important;
}

.conversion-page .home-process-hero__actions .button {
  min-height: 52px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
}

.conversion-page .home-process-hero__visual {
  min-height: clamp(430px, 34vw, 540px) !important;
}

.conversion-page .home-process-hero__device {
  width: 100% !important;
  min-height: clamp(420px, 32vw, 520px) !important;
  padding: clamp(12px, 1.3vw, 18px) !important;
  border-radius: 28px !important;
  grid-template-columns: 0.92fr 1.08fr !important;
  box-shadow: 0 30px 76px rgba(22, 46, 38, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

.conversion-page .home-process-hero__screen {
  min-height: clamp(360px, 29vw, 470px) !important;
  border-radius: 22px !important;
}

.conversion-page .home-process-hero__float {
  left: auto !important;
  right: clamp(16px, 2.3vw, 34px) !important;
  bottom: clamp(18px, 2vw, 30px) !important;
  width: min(310px, 48%) !important;
  min-width: 240px !important;
  padding: 14px !important;
  gap: 8px !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 52px rgba(12, 35, 28, 0.14) !important;
}

.conversion-page .home-process-hero__float span {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.conversion-page .home-process-hero .home-process-timeline__head {
  display: grid !important;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr) !important;
  align-items: end !important;
  gap: 28px !important;
  margin: clamp(50px, 5vw, 64px) 0 24px !important;
  padding-top: 0 !important;
  text-align: left !important;
}

.conversion-page .home-process-hero .home-process-timeline__head .eyebrow {
  grid-column: 1 / -1 !important;
  margin-bottom: -14px !important;
}

.conversion-page .home-process-hero .home-process-timeline__head h2 {
  max-width: 560px !important;
  font-size: clamp(30px, 2.8vw, 36px) !important;
  line-height: 1.08 !important;
}

.conversion-page .home-process-hero .home-process-timeline__head::after {
  content: "Projekt, wizualizacja, formatki, rozkroj, kosztorys i oferta - wszystko w jednym spokojnym przeplywie pracy.";
  max-width: 520px;
  color: #68758a;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 700;
}

.conversion-page .home-process-hero .home-process-timeline__track {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(18px, 1.8vw, 24px) !important;
  max-width: none !important;
  width: 100% !important;
}

.conversion-page .home-process-hero .home-process-step {
  min-height: 164px !important;
  padding: 24px 24px 22px !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 44px rgba(38, 62, 52, 0.08) !important;
}

.conversion-page .home-process-hero .home-process-step__number {
  width: 34px !important;
  height: 34px !important;
  font-size: 14px !important;
  box-shadow: 0 12px 28px rgba(20, 126, 87, 0.22) !important;
}

.conversion-page .home-process-hero .home-process-step__icon {
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 18px !important;
  border-radius: 15px !important;
}

.conversion-page .home-process-hero .home-process-step h2 {
  font-size: clamp(16px, 1.25vw, 18px) !important;
  line-height: 1.18 !important;
  margin-bottom: 10px !important;
}

.conversion-page .home-process-hero .home-process-step p {
  font-size: 13.5px !important;
  line-height: 1.45 !important;
}

@media (min-width: 1600px) {
  .conversion-page .conversion-main--home-short .home-process-hero {
    max-width: 1480px !important;
  }
}

@media (max-width: 1180px) {
  .conversion-page .home-process-hero__main {
    grid-template-columns: 1fr !important;
  }

  .conversion-page .home-process-hero__copy {
    max-width: 760px !important;
  }

  .conversion-page .home-process-hero .home-process-timeline__track {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .conversion-page .conversion-main--home-short .home-process-hero {
    width: min(100% - 22px, 1440px) !important;
    padding: 26px !important;
    border-radius: 24px !important;
  }

  .conversion-page .home-process-hero__copy h1 {
    font-size: clamp(38px, 12vw, 48px) !important;
  }

  .conversion-page .home-process-hero__device {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .conversion-page .home-process-hero__screen {
    min-height: 260px !important;
  }

  .conversion-page .home-process-hero__screen--render {
    display: none !important;
  }

  .conversion-page .home-process-hero__float {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 14px !important;
  }

  .conversion-page .home-process-hero .home-process-timeline__head {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 42px !important;
  }

  .conversion-page .home-process-hero .home-process-timeline__head .eyebrow {
    margin-bottom: 0 !important;
  }

  .conversion-page .home-process-hero .home-process-timeline__track {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-07 home first section product mockup */
.conversion-page .home-process-hero__visual {
  isolation: isolate !important;
  min-height: clamp(500px, 36vw, 610px) !important;
  overflow: visible !important;
}

.conversion-page .home-process-hero__device {
  position: relative !important;
  display: block !important;
  width: min(100%, 850px) !important;
  min-height: clamp(500px, 35vw, 590px) !important;
  margin-left: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 78% 10%, rgba(47, 131, 95, 0.16), transparent 34%),
    radial-gradient(circle at 16% 76%, rgba(255, 106, 0, 0.10), transparent 26%) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.conversion-page .home-process-hero__device::before {
  content: "";
  position: absolute;
  left: 3.6%;
  top: 7.5%;
  z-index: 5;
  width: min(72%, 610px);
  height: 38px;
  border-radius: 22px 22px 0 0;
  background:
    radial-gradient(circle at 22px 50%, #ff6f47 0 5px, transparent 6px),
    radial-gradient(circle at 42px 50%, #f5c04a 0 5px, transparent 6px),
    radial-gradient(circle at 62px 50%, #2f835f 0 5px, transparent 6px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 245, 0.92));
  border: 1px solid rgba(13, 35, 29, 0.12);
  border-bottom: 0;
  pointer-events: none;
}

.conversion-page .home-process-hero__device::after {
  content: "";
  position: absolute;
  left: 1.5%;
  bottom: 6.5%;
  z-index: 1;
  width: min(78%, 690px);
  height: 26px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(180deg, #dce4e0, #aebbb6 54%, #7d8a86);
  box-shadow: 0 22px 42px rgba(18, 35, 30, 0.18);
}

.conversion-page .home-process-hero__screen {
  display: block !important;
  min-height: 0 !important;
  border-radius: 22px !important;
  object-fit: cover !important;
}

.conversion-page .home-process-hero__screen--app {
  position: absolute !important;
  left: 0 !important;
  top: 7.5% !important;
  z-index: 3 !important;
  width: min(78%, 690px) !important;
  height: clamp(360px, 28vw, 470px) !important;
  padding-top: 28px !important;
  border: 10px solid #10201d !important;
  border-top-width: 42px !important;
  background: #fff !important;
  box-shadow:
    0 34px 84px rgba(15, 34, 29, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.74) inset !important;
}

.conversion-page .home-process-hero__screen--render {
  position: absolute !important;
  right: -1.5% !important;
  top: 0 !important;
  z-index: 2 !important;
  width: min(48%, 430px) !important;
  height: clamp(310px, 25vw, 430px) !important;
  border: 10px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow:
    0 28px 72px rgba(21, 42, 35, 0.20),
    0 0 0 1px rgba(47, 131, 95, 0.13) !important;
  transform: translateY(42px) rotate(1.2deg) !important;
}

.conversion-page .home-process-hero__float {
  z-index: 7 !important;
  right: clamp(4px, 1vw, 18px) !important;
  bottom: clamp(44px, 5vw, 82px) !important;
  width: min(285px, 40%) !important;
  min-width: 235px !important;
  padding: 16px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border-radius: 22px !important;
  box-shadow: 0 28px 70px rgba(14, 35, 29, 0.18) !important;
}

.conversion-page .home-process-hero__float span {
  font-size: 12.5px !important;
}

.conversion-page .home-process-hero__float span::before {
  width: 17px !important;
  height: 17px !important;
  content: "✓" !important;
  display: inline-grid !important;
  place-items: center !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #2f9a70, #0f7c53) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

@media (max-width: 1180px) {
  .conversion-page .home-process-hero__device {
    margin-inline: auto !important;
  }
}

@media (max-width: 760px) {
  .conversion-page .home-process-hero__visual {
    min-height: 0 !important;
  }

  .conversion-page .home-process-hero__device {
    min-height: 0 !important;
    padding-bottom: 20px !important;
  }

  .conversion-page .home-process-hero__device::before,
  .conversion-page .home-process-hero__device::after {
    display: none !important;
  }

  .conversion-page .home-process-hero__screen--app {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 11 !important;
    padding-top: 0 !important;
    border: 8px solid #10201d !important;
    border-radius: 20px !important;
  }

  .conversion-page .home-process-hero__screen--render {
    display: block !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: 88% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin: -28px auto 0 !important;
    transform: none !important;
  }
}

/* 2026-07 home first section static marketing asset */
.conversion-page .home-process-hero__visual {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.conversion-page .home-process-hero__device,
.conversion-page .home-process-hero__float {
  display: none !important;
}

.conversion-page .home-process-hero__product-preview {
  display: block;
  width: min(100%, 760px);
  max-width: 760px;
  height: auto;
  border-radius: 28px;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(18, 44, 36, 0.16);
  transform: translateX(10px);
}

.conversion-page .home-process-hero__brand-overlay {
  position: absolute;
  z-index: 3;
  top: 5.4%;
  left: 5.2%;
  width: 14.6%;
  padding: 2px 5px;
  background: #fff;
}

.conversion-page .home-process-hero__brand-overlay img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1180px) {
  .conversion-page .home-process-hero__visual {
    justify-content: center !important;
  }

  .conversion-page .home-process-hero__product-preview {
    transform: none;
  }
}

@media (max-width: 760px) {
  .conversion-page .home-process-hero__product-preview {
    width: 100%;
    border-radius: 22px;
    box-shadow: 0 20px 48px rgba(18, 44, 36, 0.14);
  }
}

/* 2026-07 home hero final composition: large asset + one-row process cards */
.conversion-page .conversion-main--home-short .home-process-hero {
  width: min(calc(100% - 48px), 1480px) !important;
  max-width: 1480px !important;
  padding: clamp(52px, 4.4vw, 72px) clamp(46px, 4vw, 70px) !important;
}

.conversion-page .home-process-hero__main {
  grid-template-columns: minmax(0, 0.41fr) minmax(0, 0.59fr) !important;
  gap: clamp(34px, 3.8vw, 64px) !important;
}

.conversion-page .home-process-hero__visual {
  min-height: 0 !important;
  justify-content: flex-end !important;
  align-items: center !important;
  overflow: visible !important;
}

.conversion-page .home-process-hero__product-preview {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  box-shadow: 0 22px 58px rgba(18, 44, 36, 0.1) !important;
  transform: translateX(14px) !important;
}

.conversion-page .home-process-hero .home-process-timeline__head {
  margin-top: clamp(42px, 4vw, 56px) !important;
  margin-bottom: 20px !important;
}

.conversion-page .home-process-hero .home-process-timeline__track {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1vw, 14px) !important;
}

.conversion-page .home-process-hero .home-process-step {
  min-height: 148px !important;
  padding: 18px 16px 17px !important;
  border-radius: 18px !important;
}

.conversion-page .home-process-hero .home-process-step__number {
  width: 28px !important;
  height: 28px !important;
  font-size: 13px !important;
}

.conversion-page .home-process-hero .home-process-step__icon {
  width: 42px !important;
  height: 42px !important;
  margin: 6px 0 14px !important;
}

.conversion-page .home-process-hero .home-process-step h2 {
  font-size: 15px !important;
  line-height: 1.18 !important;
}

.conversion-page .home-process-hero .home-process-step p {
  font-size: 12.5px !important;
  line-height: 1.4 !important;
}

@media (min-width: 1500px) {
  .conversion-page .home-process-hero__product-preview {
    width: min(100%, 800px) !important;
    max-width: 800px !important;
  }
}

@media (max-width: 1366px) {
  .conversion-page .conversion-main--home-short .home-process-hero {
    width: min(calc(100% - 36px), 1420px) !important;
    padding: 48px 40px !important;
  }

  .conversion-page .home-process-hero__main {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr) !important;
    gap: 30px !important;
  }

  .conversion-page .home-process-hero__product-preview {
    width: min(100%, 710px) !important;
    max-width: 710px !important;
    transform: translateX(8px) !important;
  }

  .conversion-page .home-process-hero .home-process-timeline__track {
    gap: 9px !important;
  }

  .conversion-page .home-process-hero .home-process-step {
    padding: 16px 13px !important;
  }
}

@media (max-width: 1180px) {
  .conversion-page .home-process-hero__main {
    grid-template-columns: 1fr !important;
  }

  .conversion-page .home-process-hero__visual {
    justify-content: center !important;
  }

  .conversion-page .home-process-hero__product-preview {
    transform: none !important;
  }

  .conversion-page .home-process-hero .home-process-timeline__track {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

@media (max-width: 760px) {
  .conversion-page .conversion-main--home-short .home-process-hero {
    width: min(calc(100% - 22px), 1480px) !important;
    padding: 26px 20px !important;
  }

  .conversion-page .home-process-hero__product-preview {
    border-radius: 8px !important;
  }

  .conversion-page .home-process-hero .home-process-timeline__track {
    grid-template-columns: 1fr !important;
  }
}
/* 2026-07 hero asset no crop/no rounded corners */
.conversion-page .home-process-hero__product-preview {
  width: min(100%, 790px) !important;
  max-width: 790px !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 46px rgba(18, 44, 36, 0.08) !important;
  background: transparent !important;
}

@media (min-width: 1500px) {
  .conversion-page .home-process-hero__product-preview {
    width: min(100%, 830px) !important;
    max-width: 830px !important;
  }
}

@media (max-width: 760px) {
  .conversion-page .home-process-hero__product-preview {
    border-radius: 0 !important;
  }
}

/* 2026-07 typography polish: Sora display + Inter UI */
:is(.conversion-page, .blog-page) {
  font-family: var(--font-body) !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  text-rendering: optimizeLegibility;
}

:is(.conversion-page, .blog-page) :where(
  p,
  a,
  li,
  span,
  small,
  button,
  input,
  select,
  textarea,
  summary,
  figcaption,
  label,
  .button,
  .top-nav a,
  .header-actions,
  .eyebrow,
  .hero-lead,
  .conversion-card p,
  .conversion-step p,
  .conversion-feature-card p,
  .conversion-related-card p,
  .conversion-faq p,
  .conversion-footer p,
  .conversion-footer a,
  .home-process-step h2,
  .home-process-step p
) {
  font-family: var(--font-body) !important;
}

:is(.conversion-page, .blog-page) .top-nav a,
:is(.conversion-page, .blog-page) .button,
:is(.conversion-page, .blog-page) button {
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

:is(.conversion-page, .blog-page) .eyebrow {
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
}

.conversion-page .home-process-hero__copy h1,
.conversion-page .home-process-hero .home-process-timeline__head h2,
.conversion-page .conversion-hero h1,
.conversion-page .conversion-section-head h2,
.conversion-page .conversion-section-head--compact h2,
.conversion-page .landing-kitchen-demo__copy h2,
.conversion-page .conversion-cta-strip h2,
.conversion-page .conversion-trial-strip h2,
.conversion-page .conversion-final h2,
.conversion-page .conversion-footer--home h2,
.conversion-page .conversion-footer--home h3,
.blog-page .article-hero h1,
.blog-page .article-content h2,
.blog-page .article-content h3 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.06 !important;
}

.conversion-page .home-process-hero__copy h1 {
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.02 !important;
}

.conversion-page .home-process-hero__copy > p:not(.eyebrow),
.conversion-page .conversion-section-head p,
.conversion-page .conversion-section-head--compact p,
.conversion-page .conversion-hero .hero-lead {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

.conversion-page .home-process-hero .home-process-step h2 {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

.conversion-page .home-process-hero .home-process-step p {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  line-height: 1.48 !important;
  color: #667085 !important;
}

.conversion-page .home-process-hero .home-process-step__number,
.conversion-page .landing-ai-render__badge,
.conversion-page .landing-ai-render__benefits strong {
  font-family: var(--font-body) !important;
}

@media (max-width: 760px) {
  .conversion-page .home-process-hero__copy h1,
  .conversion-page .conversion-hero h1,
  .conversion-page .conversion-section-head h2,
  .conversion-page .conversion-section-head--compact h2 {
    letter-spacing: -0.032em !important;
    line-height: 1.08 !important;
  }
}

/* 2026-07 home grid polish: one landing width and calmer vertical rhythm */
:root {
  --landing-container-max: 1320px;
  --landing-container-width: calc(100% - 48px);
  --landing-section-gap: clamp(30px, 3.4vw, 46px);
}

.conversion-page .conversion-main--home-short {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding-inline: 0 !important;
  gap: var(--landing-section-gap) !important;
  row-gap: var(--landing-section-gap) !important;
}

.conversion-page .conversion-main--home-short > .home-section,
.conversion-page .conversion-footer--home {
  width: var(--landing-container-width) !important;
  max-width: var(--landing-container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.conversion-page .conversion-main--home-short > .home-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.conversion-page .conversion-main--home-short .home-process-hero {
  padding: clamp(48px, 5.2vw, 68px) clamp(38px, 5vw, 64px) !important;
}

.conversion-page .home-process-hero__main {
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr) !important;
  gap: clamp(32px, 4vw, 54px) !important;
}

.conversion-page .home-process-hero__visual {
  justify-content: flex-end !important;
}

.conversion-page .home-process-hero__product-preview {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  transform: none !important;
}

.conversion-page .home-process-hero .home-process-timeline__head {
  margin-top: clamp(42px, 4vw, 54px) !important;
  margin-bottom: 18px !important;
}

.conversion-page .home-process-hero .home-process-timeline__track {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1vw, 14px) !important;
}

.conversion-page .home-process-hero .home-process-step {
  min-height: 142px !important;
}

.conversion-page .landing-ai-render--home-short {
  width: 100% !important;
}

.conversion-page .landing-ai-render__bar {
  gap: clamp(22px, 3vw, 42px) !important;
  padding-inline: clamp(22px, 3vw, 34px) !important;
}

.conversion-page .home-product-hero {
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr) !important;
  gap: clamp(34px, 4.6vw, 60px) !important;
}

.conversion-page #dla-kogo .conversion-section-head--compact {
  gap: clamp(18px, 3vw, 44px) !important;
}

.conversion-page #dla-kogo .conversion-section-head--compact h2 {
  max-width: 620px !important;
}

.conversion-page .home-audience-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2vw, 24px) !important;
}

.conversion-page .conversion-footer--home {
  padding: clamp(34px, 4vw, 48px) clamp(32px, 4vw, 56px) !important;
}

@media (min-width: 1500px) {
  .conversion-page .home-process-hero__product-preview {
    width: min(100%, 800px) !important;
    max-width: 800px !important;
  }
}

@media (max-width: 1366px) {
  :root {
    --landing-container-width: calc(100% - 36px);
  }

  .conversion-page .conversion-main--home-short .home-process-hero {
    padding: 46px 38px !important;
  }

  .conversion-page .home-process-hero .home-process-timeline__track {
    gap: 9px !important;
  }

  .conversion-page .home-process-hero .home-process-step {
    padding: 16px 13px !important;
  }
}

@media (max-width: 1180px) {
  :root {
    --landing-container-width: calc(100% - 32px);
  }

  .conversion-page .home-process-hero__main,
  .conversion-page .home-product-hero {
    grid-template-columns: 1fr !important;
  }

  .conversion-page .home-process-hero__visual {
    justify-content: center !important;
  }

  .conversion-page .home-process-hero .home-process-timeline__track {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

@media (max-width: 760px) {
  :root {
    --landing-container-width: calc(100% - 24px);
    --landing-section-gap: 24px;
  }

  .conversion-page .conversion-main--home-short .home-process-hero {
    padding: 28px 20px !important;
  }

  .conversion-page .home-process-hero .home-process-timeline__track,
  .conversion-page .home-audience-grid {
    grid-template-columns: 1fr !important;
  }

  .conversion-page .conversion-footer--home {
    padding: 28px 22px !important;
  }
}

/* 2026-07 home typography correction: match the calm rhythm of the NOWOSC AI block */
.conversion-page {
  --landing-font-display: var(--font-body);
  --landing-font-body: var(--font-body);
  --landing-text: #101828;
  --landing-muted-text: #344054;
  --landing-soft-text: #667085;
}

.conversion-page :where(
  .home-process-hero__copy h1,
  .home-process-timeline__head h2,
  .home-product-hero h2,
  .conversion-section-head h2,
  .conversion-section-head--compact h2,
  .conversion-footer--home h2
):not(.landing-ai-render h2) {
  font-family: var(--landing-font-display) !important;
  color: var(--landing-text) !important;
  font-weight: 750 !important;
  letter-spacing: -0.034em !important;
  line-height: 1.07 !important;
}

.conversion-page .home-process-hero__copy h1 {
  font-size: clamp(42px, 4.8vw, 64px) !important;
  font-weight: 780 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.06 !important;
}

.conversion-page :where(
  .home-process-timeline__head h2,
  .home-product-hero h2,
  .conversion-section-head h2,
  .conversion-section-head--compact h2
):not(.landing-ai-render h2) {
  font-size: clamp(30px, 3.2vw, 42px) !important;
  font-weight: 740 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.12 !important;
}

.conversion-page .conversion-footer--home h2 {
  font-size: clamp(28px, 3vw, 36px) !important;
  font-weight: 740 !important;
}

.conversion-page .conversion-footer--home h3 {
  font-family: var(--landing-font-body) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.25 !important;
}

.conversion-page :where(
  .home-process-hero__copy > p:not(.eyebrow),
  .conversion-section-head p,
  .conversion-section-head--compact p,
  .conversion-hero .hero-lead,
  .home-product-hero .hero-lead,
  .conversion-footer--home p
):not(.landing-ai-render p) {
  font-family: var(--landing-font-body) !important;
  color: var(--landing-muted-text) !important;
  font-weight: 500 !important;
  line-height: 1.58 !important;
}

.conversion-page .home-process-hero__copy > p:not(.eyebrow) {
  max-width: 620px;
  color: #182232 !important;
  font-size: clamp(16px, 1.25vw, 19px) !important;
}

.conversion-page .home-process-hero .home-process-step h2,
.conversion-page .home-audience-grid h3,
.conversion-page .conversion-faq-grid summary {
  font-family: var(--landing-font-body) !important;
  color: var(--landing-text) !important;
  font-weight: 650 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.22 !important;
}

.conversion-page .home-process-hero .home-process-step h2 {
  font-size: clamp(15px, 1vw, 17px) !important;
}

.conversion-page :where(
  .home-process-hero .home-process-step p,
  .home-audience-grid p,
  .conversion-faq-grid p,
  .conversion-footer--home a
) {
  font-family: var(--landing-font-body) !important;
  color: var(--landing-soft-text) !important;
  font-weight: 450 !important;
  line-height: 1.58 !important;
}

.conversion-page .conversion-faq-grid summary {
  padding: 19px 22px !important;
  font-size: 15px !important;
}

.conversion-page .conversion-faq-grid p {
  padding: 0 22px 22px !important;
  font-size: 14px !important;
}

.conversion-page .conversion-faq-grid p a {
  color: #0f7f53 !important;
  font-weight: 650 !important;
  text-decoration: none;
}

.conversion-page .conversion-faq-grid p a:hover {
  text-decoration: underline;
}

.conversion-page :where(.top-nav a, .button, button) {
  font-family: var(--landing-font-body) !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
}

.conversion-page .button,
.conversion-page button {
  font-weight: 700 !important;
}

.conversion-page .eyebrow:not(.landing-ai-render__badge) {
  font-family: var(--landing-font-body) !important;
  font-weight: 760 !important;
  letter-spacing: 0.105em !important;
}

/* Keep the NOWOSC AI typography visually unchanged; it is the reference block. */
.conversion-page .landing-ai-render__copy h2 {
  font-size: clamp(36px, 5.4vw, 66px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
}

.conversion-page .landing-ai-render__copy p:not(.eyebrow) {
  color: #182232 !important;
  font-size: clamp(16px, 1.35vw, 19px) !important;
  line-height: 1.58 !important;
}

.conversion-page .landing-ai-render__badge {
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
}

.conversion-page .landing-ai-render__benefits strong {
  font-size: 15px !important;
  font-weight: 700 !important;
}

.conversion-page .landing-ai-render__benefits span {
  color: #344054 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.conversion-page .landing-ai-render__bar strong {
  font-size: clamp(17px, 1.8vw, 22px) !important;
  font-weight: 700 !important;
}

.conversion-page .landing-ai-render__bar span {
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.conversion-page .landing-ai-render__bar .button {
  font-weight: 700 !important;
}

@media (max-width: 760px) {
  .conversion-page .home-process-hero__copy h1 {
    font-size: clamp(36px, 10vw, 44px) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.08 !important;
  }

  .conversion-page :where(
    .home-process-timeline__head h2,
    .home-product-hero h2,
    .conversion-section-head h2,
    .conversion-section-head--compact h2
  ):not(.landing-ai-render h2) {
    font-size: clamp(28px, 8vw, 34px) !important;
    line-height: 1.12 !important;
  }
}

/* 2026-07 portal-wide landing typography: same calm system as the home page */
:root {
  --font-display: "Sora", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --landing-heading-weight: 740;
  --landing-ui-weight: 640;
}

body,
.conversion-page,
.landing-page,
.site-header,
.site-footer,
button,
input,
select,
textarea {
  font-family: var(--font-body) !important;
  font-weight: 450;
  letter-spacing: -0.01em;
}

.conversion-page :where(h1, h2, h3, .home-process-hero__copy h1, .home-process-timeline__head h2, .home-product-hero h2, .conversion-section-head h2, .conversion-section-head--compact h2, .conversion-footer--home h2, .feature-card h3, .module-card h3, .topic-card h3, .faq-item summary):not(.landing-ai-render h2) {
  font-family: var(--font-display) !important;
  font-weight: var(--landing-heading-weight) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.12 !important;
}

.conversion-page .home-process-hero__copy h1 {
  font-weight: 760 !important;
  letter-spacing: -0.034em !important;
}

.conversion-page :where(p, .home-process-hero__copy p, .home-product-hero p, .conversion-section-head p, .conversion-footer--home p, .feature-card p, .module-card p, .topic-card p, .faq-item p, .site-footer p):not(.landing-ai-render p) {
  font-family: var(--font-body) !important;
  font-weight: 450 !important;
  line-height: 1.58 !important;
  letter-spacing: -0.006em !important;
}

.conversion-page :where(.top-nav a, .button, .landing-button, .faq-item summary) {
  font-family: var(--font-body) !important;
  font-weight: 680 !important;
  letter-spacing: -0.012em !important;
}

.conversion-page :where(.eyebrow, .section-eyebrow, .home-process-eyebrow):not(.landing-ai-render__badge) {
  font-family: var(--font-body) !important;
  font-weight: 760 !important;
  letter-spacing: 0.105em !important;
}

/* The finished NOWOSC AI block remains the visual reference. */
.conversion-page .landing-ai-render__copy h2 {
  font-size: clamp(36px, 5.4vw, 66px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
}

.conversion-page .landing-ai-render__copy p:not(.eyebrow) {
  font-weight: 450 !important;
}
/* 2026-08 logo refresh: compact mark + text brand for landing headers. */
:is(.site-header, .landing-header, .conversion-header) .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  color: #111827 !important;
  font-family: var(--font-heading, "Sora", "Inter", Arial, sans-serif) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
}

:is(.site-header, .landing-header, .conversion-header) .brand::after {
  content: "MebloPilot";
  white-space: nowrap;
}

:is(.site-header, .landing-header, .conversion-header) .brand img {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

@media (max-width: 640px) {
  :is(.site-header, .landing-header, .conversion-header) .brand {
    gap: 8px !important;
    font-size: 15px !important;
  }

  :is(.site-header, .landing-header, .conversion-header) .brand img {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
  }
}

/* 2026-08 logo polish: use the high resolution square mark crisply in landing headers. */
:is(.site-header, .landing-header, .conversion-header) .brand img {
  width: 46px !important;
  height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
  border-radius: 14px !important;
  object-fit: contain !important;
  image-rendering: auto !important;
  transform: translateZ(0);
}

/* Content UX cleanup: compact summary card for long educational articles. */
.blog-page .article-quick-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  width: min(100%, 1180px);
  margin: 18px auto 0;
  padding: 22px 24px;
  border: 1px solid rgba(15, 127, 83, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 12%, rgba(62, 171, 122, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(236, 253, 245, 0.92), rgba(255, 255, 255, 0.98));
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.blog-page .article-quick-summary h2 {
  margin: 0 0 10px;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.12;
}

.blog-page .article-quick-summary ul {
  margin: 0;
  padding-left: 19px;
  color: var(--landing-muted, #667085);
  font-size: 15px;
  line-height: 1.62;
}

.blog-page .article-quick-summary .hero-actions {
  justify-content: flex-end;
}

.blog-page .article-quick-summary .button {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .blog-page .article-quick-summary {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .blog-page .article-quick-summary .hero-actions {
    justify-content: stretch;
  }

  .blog-page .article-quick-summary .button {
    width: 100%;
    justify-content: center;
  }
}

/* 2026-08 tutorials hub */
.tutorials-page .tutorials-hero .conversion-hero-copy {
  max-width: 620px;
}

.tutorials-page .tutorial-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.tutorials-page .tutorials-build-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px 22px;
  border: 1px solid rgba(47, 153, 110, 0.18);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(226, 246, 237, 0.86), rgba(255, 255, 255, 0.94));
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.05);
}

.tutorials-page .tutorials-build-notice__badge {
  display: inline-flex;
  min-width: 96px;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  border-radius: 999px;
  color: #0f6f4b;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 0 0 1px rgba(47, 153, 110, 0.18);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tutorials-page .tutorials-build-notice h2 {
  margin: 0 0 6px;
  color: #101828;
  font-family: var(--font-heading, "Sora", "Inter", Arial, sans-serif);
  font-size: clamp(1.28rem, 1.1rem + 0.72vw, 1.85rem);
  line-height: 1.18;
  letter-spacing: -0.035em;
}

.tutorials-page .tutorials-build-notice p {
  max-width: 820px;
  margin: 0;
  color: #667085;
  font-size: 15px;
  line-height: 1.58;
}

.tutorials-page .tutorial-card {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(21, 93, 67, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 48px rgba(16, 24, 40, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.tutorials-page .tutorial-card:hover {
  border-color: rgba(47, 153, 110, 0.22);
  box-shadow: 0 26px 64px rgba(16, 24, 40, 0.1);
  transform: translateY(-2px);
}

.tutorials-page .tutorial-card__step {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #2f996e, #0f6f4b);
  box-shadow: 0 12px 28px rgba(47, 153, 110, 0.2);
  font-size: 13px;
  font-weight: 900;
}

.tutorials-page .tutorial-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid rgba(21, 93, 67, 0.08);
  border-radius: 16px;
  background: #f8faf9;
}

.tutorials-page .tutorial-card h3 {
  margin: 2px 0 0;
  color: #101828;
  font-family: var(--font-heading, "Sora", "Inter", Arial, sans-serif);
  font-size: clamp(1rem, 0.94rem + 0.22vw, 1.14rem);
  line-height: 1.22;
  letter-spacing: -0.025em;
}

.tutorials-page .tutorial-card p {
  margin: 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.5;
}

.tutorials-page .tutorial-card__status {
  display: inline-flex;
  width: fit-content;
  margin-top: auto;
  padding: 7px 10px;
  border: 1px solid rgba(47, 153, 110, 0.18);
  border-radius: 999px;
  color: #0f6f4b;
  background: rgba(226, 246, 237, 0.7);
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 1120px) {
  .tutorials-page .tutorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .tutorials-page .tutorials-build-notice {
    grid-template-columns: 1fr;
    padding: 18px;
    border-radius: 18px;
  }

  .tutorials-page .tutorials-build-notice__badge {
    width: fit-content;
  }

  .tutorials-page .tutorial-card {
    padding: 14px;
    border-radius: 18px;
  }
}

/* 2026-08 tutorials video hub */
.tutorials-page .tutorial-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 28px;
  align-items: stretch;
}

.tutorials-page .tutorial-video-shell {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  border: 1px solid rgba(21, 93, 67, 0.14);
  border-radius: 26px;
  background:
    radial-gradient(circle at 18% 12%, rgba(62, 171, 122, 0.16), transparent 34%),
    linear-gradient(135deg, #ecfdf5, #ffffff);
  box-shadow: 0 28px 72px rgba(16, 24, 40, 0.12);
}

.tutorials-page .tutorial-video-shell iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.tutorials-page .tutorial-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px;
  border: 1px solid rgba(21, 93, 67, 0.12);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 22px 56px rgba(16, 24, 40, 0.07);
}

.tutorials-page .tutorial-feature-copy h2 {
  margin: 8px 0 12px;
  color: #101828;
  font-family: var(--font-heading, "Sora", "Inter", Arial, sans-serif);
  font-size: clamp(2rem, 1.42rem + 1.8vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.tutorials-page .tutorial-feature-copy p {
  margin: 0;
  color: #667085;
  font-size: 16px;
  line-height: 1.62;
}

.tutorials-page .tutorial-feature-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 24px;
  padding: 0;
  list-style: none;
  color: #344054;
  font-size: 15px;
  line-height: 1.5;
}

.tutorials-page .tutorial-feature-list li {
  position: relative;
  padding-left: 26px;
}

.tutorials-page .tutorial-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #2f996e;
  box-shadow: inset 0 0 0 4px #dff7ec;
}

.tutorials-page .tutorials-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(260px, 0.45fr);
  gap: 28px;
  align-items: end;
  margin-bottom: 24px;
}

.tutorials-page .tutorials-section-head h2 {
  margin: 0;
  color: #101828;
  font-family: var(--font-heading, "Sora", "Inter", Arial, sans-serif);
  font-size: clamp(2rem, 1.42rem + 1.9vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.tutorials-page .tutorials-section-head p {
  margin: 0;
  color: #667085;
  font-size: 15px;
  line-height: 1.62;
}

.tutorials-page .tutorial-card--published {
  border-color: rgba(47, 153, 110, 0.28);
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.72), rgba(255, 255, 255, 0.94));
}

.tutorials-page .tutorial-card__status--ready {
  color: #fff;
  background: linear-gradient(135deg, #2f996e, #0f6f4b);
  border-color: transparent;
}

.tutorials-page .tutorial-card__link {
  display: inline-flex;
  width: fit-content;
  margin-top: auto;
  padding: 8px 12px;
  border: 1px solid rgba(47, 153, 110, 0.24);
  border-radius: 999px;
  color: #0f6f4b;
  background: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.tutorials-page .tutorial-card__link:hover {
  background: rgba(226, 246, 237, 0.9);
}

@media (max-width: 980px) {
  .tutorials-page .tutorial-feature,
  .tutorials-page .tutorials-section-head {
    grid-template-columns: 1fr;
  }

  .tutorials-page .tutorial-video-shell {
    min-height: auto;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 640px) {
  .tutorials-page .tutorial-feature {
    gap: 18px;
  }

  .tutorials-page .tutorial-feature-copy {
    padding: 20px;
    border-radius: 20px;
  }

  .tutorials-page .tutorial-feature-copy h2,
  .tutorials-page .tutorials-section-head h2 {
    font-size: clamp(1.72rem, 8vw, 2.35rem);
  }
}

/* 2026-08 focused first tutorial landing */
.tutorials-focus-main {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.tutorial-focus-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: clamp(24px, 3.6vw, 48px);
  align-items: center;
  margin: clamp(26px, 4vw, 52px) 0 28px;
  padding: clamp(30px, 4.6vw, 52px);
  border: 1px solid rgba(21, 93, 67, 0.12);
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 16%, rgba(47, 153, 110, 0.13), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 251, 247, 0.92));
  box-shadow: 0 28px 76px rgba(16, 24, 40, 0.08);
}

.tutorial-focus-hero__copy h1 {
  max-width: 720px;
  margin: 0;
  color: #101828;
  font-family: var(--font-heading, "Sora", "Inter", Arial, sans-serif);
  font-size: clamp(2.45rem, 1.95rem + 1.75vw, 3.7rem);
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.tutorial-focus-hero__copy h1 span {
  display: block;
}

.tutorial-focus-hero__copy .hero-lead {
  max-width: 610px;
  margin: 20px 0 0;
  color: #667085;
  font-size: clamp(1rem, 0.96rem + 0.28vw, 1.22rem);
  line-height: 1.58;
}

.tutorial-focus-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0;
}

.tutorial-focus-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid rgba(47, 153, 110, 0.16);
  border-radius: 999px;
  color: #0f6f4b;
  background: rgba(236, 253, 245, 0.58);
  font-size: 12px;
  font-weight: 750;
}

.tutorial-focus-hero__media {
  margin: 0;
}

.tutorial-focus-hero__video {
  align-self: center;
}

.tutorials-focus-main .hero-actions .button {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 14px;
  box-shadow: none;
}

.tutorials-focus-main .hero-actions .button-primary {
  box-shadow: 0 14px 28px rgba(255, 106, 0, 0.16);
}

.tutorials-focus-main .hero-actions .button-ghost {
  border-color: rgba(21, 93, 67, 0.18);
  background: #fff;
  color: #155d43;
}

.tutorials-focus-main .hero-actions .button-ghost:hover {
  border-color: rgba(21, 93, 67, 0.32);
  background: #f4fbf7;
}

.tutorial-focus-preview {
  display: grid;
  gap: 14px;
}

.tutorial-focus-preview__screen {
  position: relative;
  min-height: 318px;
  overflow: hidden;
  border: 1px solid rgba(21, 93, 67, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 72% 22%, rgba(47, 153, 110, 0.12), transparent 30%),
    linear-gradient(135deg, #ffffff, #eff8f3);
  box-shadow: 0 22px 52px rgba(16, 24, 40, 0.095);
}

.tutorial-focus-preview__bar {
  position: absolute;
  inset: 18px 18px auto;
  display: flex;
  gap: 6px;
  height: 34px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgba(21, 93, 67, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.tutorial-focus-preview__bar span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(47, 153, 110, 0.36);
}

.tutorial-focus-preview__sidebar {
  position: absolute;
  inset: 68px auto 24px 18px;
  width: 62px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(21, 93, 67, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.tutorial-focus-preview__sidebar span {
  height: 34px;
  border-radius: 12px;
  background: rgba(226, 246, 237, 0.8);
}

.tutorial-focus-preview__scene {
  position: absolute;
  inset: 68px 22px 24px 96px;
  overflow: hidden;
  border: 1px solid rgba(21, 93, 67, 0.1);
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0 58%, rgba(221, 231, 226, 0.58) 58%),
    linear-gradient(180deg, #fff 0 68%, #f1eee7 68%);
}

.tutorial-focus-preview__wall,
.tutorial-focus-preview__cabinet,
.tutorial-focus-preview__counter,
.tutorial-focus-preview__report {
  position: absolute;
  display: block;
  border-radius: 10px;
}

.tutorial-focus-preview__wall {
  inset: 20px 20px auto;
  height: 70px;
  background: rgba(21, 93, 67, 0.1);
}

.tutorial-focus-preview__cabinet {
  border: 1px solid rgba(21, 93, 67, 0.12);
  background: #fff;
  box-shadow: 0 10px 22px rgba(16, 24, 40, 0.065);
}

.tutorial-focus-preview__cabinet::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(21, 93, 67, 0.14);
  border-radius: 8px;
}

.tutorial-focus-preview__cabinet--left {
  left: 32px;
  bottom: 38px;
  width: 92px;
  height: 86px;
  background: linear-gradient(135deg, #e1c49c, #b58a56);
}

.tutorial-focus-preview__counter {
  left: 118px;
  right: 74px;
  bottom: 112px;
  height: 13px;
  background: linear-gradient(90deg, #d4b383, #a77943);
}

.tutorial-focus-preview__cabinet--base {
  left: 134px;
  right: 100px;
  bottom: 38px;
  height: 74px;
}

.tutorial-focus-preview__cabinet--tall {
  right: 30px;
  bottom: 38px;
  width: 64px;
  height: 148px;
}

.tutorial-focus-preview__report {
  right: 118px;
  top: 28px;
  width: 96px;
  height: 78px;
  border: 1px solid rgba(21, 93, 67, 0.1);
  background:
    linear-gradient(#dbe9e2 0 0) 16px 18px / 64px 6px no-repeat,
    linear-gradient(#dbe9e2 0 0) 16px 34px / 54px 6px no-repeat,
    linear-gradient(#dbe9e2 0 0) 16px 50px / 68px 6px no-repeat,
    rgba(255, 255, 255, 0.86);
  box-shadow: 0 16px 30px rgba(16, 24, 40, 0.08);
}

.tutorial-focus-preview figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.tutorial-focus-preview figcaption span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(21, 93, 67, 0.12);
  border-radius: 999px;
  color: #155d43;
  background: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 750;
}

.tutorial-simple-section {
  margin: 24px 0;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid rgba(21, 93, 67, 0.1);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.055);
}

.tutorial-featured-video {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(360px, 1.18fr);
  align-items: center;
  gap: clamp(24px, 4vw, 44px);
  background:
    radial-gradient(circle at 10% 12%, rgba(47, 153, 110, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 250, 0.95));
}

.tutorial-featured-video__copy {
  max-width: 500px;
}

.tutorial-featured-video__copy h2 {
  margin: 0;
  color: #101828;
  font-family: var(--font-heading, "Sora", "Inter", Arial, sans-serif);
  font-size: clamp(1.65rem, 1.28rem + 1.2vw, 2.45rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.tutorial-featured-video__copy p {
  margin: 16px 0 22px;
  color: #667085;
  font-size: 15px;
  line-height: 1.62;
}

.tutorial-featured-video__media {
  margin: 0;
}

.tutorial-video-card {
  display: grid;
  gap: 24px;
}

.tutorial-video-poster,
.tutorial-video-card iframe,
.tutorial-focus-hero__video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: #101828;
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.16);
}

.tutorial-video-poster {
  position: relative;
  padding: 0;
  cursor: pointer;
}

.tutorial-video-poster--hero,
.tutorial-focus-hero__video iframe {
  border-radius: 26px;
  box-shadow: 0 26px 70px rgba(16, 24, 40, 0.18);
}

.tutorial-video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 220ms ease, filter 220ms ease;
}

.tutorial-video-poster:hover img {
  filter: brightness(0.86);
  transform: scale(1.015);
}

.tutorial-video-play {
  position: absolute;
  inset: 50% auto auto 50%;
  display: inline-flex;
  width: clamp(68px, 8vw, 92px);
  height: clamp(68px, 8vw, 92px);
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #2f996e, #0f6f4b);
  box-shadow: 0 20px 48px rgba(15, 111, 75, 0.32);
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  transform: translate(-50%, -50%);
}

.tutorial-video-copy {
  max-width: 820px;
}

.tutorial-video-copy h2,
.tutorial-section-heading h2,
.tutorial-final-cta h2 {
  margin: 0;
  color: #101828;
  font-family: var(--font-heading, "Sora", "Inter", Arial, sans-serif);
  font-size: clamp(1.75rem, 1.35rem + 1.45vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.tutorial-video-copy p,
.tutorial-section-heading p,
.tutorial-final-cta p {
  max-width: 760px;
  color: #667085;
  font-size: 15px;
  line-height: 1.62;
}

.tutorial-section-heading {
  margin-bottom: 22px;
}

.tutorial-section-heading--split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.6fr);
  gap: 24px;
  align-items: end;
}

.tutorial-learn-grid,
.tutorial-upcoming-grid {
  display: grid;
  gap: 18px;
}

.tutorial-learn-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tutorial-learn-grid article,
.tutorial-upcoming-grid article {
  border: 1px solid rgba(21, 93, 67, 0.1);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff, rgba(248, 252, 250, 0.94));
  box-shadow: 0 14px 36px rgba(16, 24, 40, 0.045);
}

.tutorial-learn-grid article {
  display: flex;
  min-height: 160px;
  flex-direction: column;
  padding: 24px;
}

.tutorial-learn-grid span {
  display: inline-flex;
  width: fit-content;
  min-width: 36px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  padding: 0 10px;
  border-radius: 999px;
  color: #0f6f4b;
  background: rgba(47, 153, 110, 0.1);
  font-size: 13px;
  font-weight: 850;
}

.tutorial-learn-grid h3,
.tutorial-upcoming-grid h3 {
  margin: 0 0 8px;
  color: #101828;
  font-family: var(--font-heading, "Sora", "Inter", Arial, sans-serif);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.tutorial-learn-grid p,
.tutorial-upcoming-grid p {
  margin: 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.5;
}

.tutorial-upcoming-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tutorial-upcoming-grid article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 16px;
  align-items: center;
  min-height: 124px;
  padding: 22px;
}

.tutorial-upcoming-grid h3,
.tutorial-upcoming-grid p {
  grid-column: 1;
}

.tutorial-upcoming-grid span {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border: 1px solid rgba(47, 153, 110, 0.18);
  border-radius: 999px;
  color: #0f6f4b;
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.tutorial-final-cta {
  border-color: rgba(21, 93, 67, 0.12);
  background:
    radial-gradient(circle at 88% 18%, rgba(47, 153, 110, 0.13), transparent 34%),
    linear-gradient(135deg, #ffffff, #f4fbf7);
}

@media (max-width: 1040px) {
  .tutorial-focus-hero,
  .tutorial-featured-video,
  .tutorial-section-heading--split {
    grid-template-columns: 1fr;
  }

  .tutorial-learn-grid,
  .tutorial-upcoming-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .tutorials-focus-main {
    width: min(100% - 24px, 1180px);
  }

  .tutorial-focus-hero {
    padding: 24px;
    border-radius: 24px;
  }

  .tutorial-focus-hero__copy h1 {
    font-size: clamp(2.1rem, 10vw, 3rem);
  }

  .tutorial-simple-section {
    padding: 18px;
    border-radius: 22px;
  }

  .tutorial-featured-video__copy {
    max-width: none;
  }

  .tutorial-video-poster,
  .tutorial-video-card iframe,
  .tutorial-focus-hero__video iframe {
    border-radius: 18px;
  }

  .tutorial-learn-grid,
  .tutorial-upcoming-grid {
    grid-template-columns: 1fr;
  }

  .tutorial-upcoming-grid article {
    grid-template-columns: 1fr;
  }

  .tutorial-upcoming-grid span {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}