.platform-marketing {
  --marketing-ink: #17383a;
  --marketing-muted: #4d6663;
  --marketing-line: #d6e3dc;
  --marketing-accent: #a6cc26;
  background: #fff;
  color: var(--marketing-ink);
}

.platform-marketing .shell { width: min(1240px, calc(100% - 48px)); }
.platform-marketing p { color: var(--marketing-muted); }
.platform-marketing a:focus-visible,
.platform-marketing button:focus-visible,
.platform-marketing summary:focus-visible,
.platform-marketing input:focus-visible {
  outline: 3px solid #0d7477;
  outline-offset: 3px;
}
.platform-marketing .platform-header { background: #fff; }
.platform-marketing .platform-links { gap: 24px; }
.platform-marketing .platform-links > a:not(.btn) { font-size: 14px; }
.platform-marketing .platform-links > a:not(.btn):hover { color: #0a7475; }
.platform-marketing .saas-kicker { color: #a94938; font-size: 12px; font-weight: 800; }
.platform-marketing .saas-text-link { min-height: 44px; text-underline-offset: 5px; }
.platform-marketing .saas-primary-button { min-height: 48px; }

.platform-marketing .saas-hero {
  min-height: clamp(520px, 70svh, 630px);
  background-position: center;
}
.platform-marketing .saas-hero::before {
  background: linear-gradient(90deg, rgba(243, 250, 249, .9), rgba(243, 250, 249, .58) 47%, rgba(243, 250, 249, .04) 76%);
}
.platform-marketing .saas-hero-content { padding-block: 64px; }
.platform-marketing .saas-hero h1 {
  max-width: 710px;
  margin: 18px 0 22px;
  font-size: clamp(46px, 5.2vw, 68px);
  line-height: 1.06;
}
.platform-marketing .saas-hero p { max-width: 570px; font-size: 20px; line-height: 1.55; color: #244b4d; }
.platform-marketing .saas-hero-note { margin-top: 40px; color: #315457; }

.platform-marketing .saas-section-inner { padding-block: 82px; }
.platform-marketing .saas-section-heading h2,
.platform-marketing .saas-workflow h2,
.platform-marketing .saas-operations h2,
.platform-marketing .saas-final-cta h2,
.platform-marketing .marketing-audiences h2,
.platform-marketing .marketing-costs h2,
.platform-marketing .marketing-home-preview h2 {
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.15;
}
.platform-marketing .saas-section-lead { max-width: 720px; }
.platform-marketing .saas-feature-grid { gap: 36px; margin-block: 44px 24px; }
.platform-marketing .saas-feature-grid > div { border-color: #b9d2c4; }
.platform-marketing .saas-feature-grid h3 { font-size: 21px; margin-top: 18px; }
.platform-marketing .saas-feature-grid p { line-height: 1.65; }
.platform-marketing .saas-workflow { background: #eaf4ef; }
.platform-marketing .saas-step-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.platform-marketing .saas-step-list > div { display: block; border-top: 1px solid #aac7b7; padding-top: 20px; }
.platform-marketing .saas-step-list > div > span { margin-bottom: 22px; }
.platform-marketing .saas-step-list h3 { font-size: 19px; }
.platform-marketing .saas-step-list p { font-size: 15px; line-height: 1.65; }

.marketing-home-preview { padding: 58px 0 72px; background: #f5faf7; }
.marketing-home-preview-grid { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(32px, 5vw, 82px); align-items: start; }
.marketing-home-preview-grid > * { min-width: 0; }
.marketing-preview-copy { padding-top: 14px; }
.marketing-preview-copy h2 { max-width: 520px; margin: 12px 0 18px; }
.marketing-preview-copy p { max-width: 490px; margin-bottom: 22px; font-size: 18px; line-height: 1.6; }
.marketing-preview {
  position: relative;
  overflow: hidden;
  border: 1px solid #cbdcd4;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 20px 48px rgba(12, 55, 53, .1);
}
.marketing-preview-chrome { display: flex; align-items: center; gap: 5px; height: 31px; padding: 0 14px; background: #ecf1ef; border-bottom: 1px solid #d6e2db; }
.marketing-preview-chrome > span { width: 6px; height: 6px; border-radius: 50%; background: #a6bcb2; }
.marketing-preview-chrome small { display: block; margin-inline: auto; padding-right: 24px; color: #667d72; font-size: 10px; }
.marketing-demo-tag { position: absolute; top: 40px; right: 12px; z-index: 2; padding: 4px 7px; border: 1px solid #a8d0ba; border-radius: 3px; background: #eaf7ec; color: #245847; font-size: 10px; font-weight: 800; }
.marketing-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 66px; padding: 16px 24px; border-bottom: 1px solid #e0e9e4; }
.marketing-preview-bar strong { font-size: 18px; color: #173e41; }
.marketing-preview-bar > span { padding-right: 126px; color: #526a64; font-size: 11px; white-space: nowrap; }
.marketing-preview-body { padding: 16px; background: #f9fbf9; }
.marketing-preview-hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); min-height: 215px; overflow: hidden; background: #e4f2ec; }
.marketing-preview-hero > div { align-self: center; padding: 26px; min-width: 0; }
.marketing-preview-hero h3 { margin: 10px 0 8px; font-size: clamp(21px, 2vw, 29px); line-height: 1.2; }
.marketing-preview-hero p { margin: 0; font-size: 14px; }
.marketing-preview-hero img { display: block; width: 100%; height: 100%; min-height: 215px; object-fit: cover; object-position: 35% center; }
.marketing-preview-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 78px; margin-top: 12px; padding: 15px 18px; border: 1px solid #d3e1d8; background: #fff; }
.marketing-preview-plan div { display: grid; gap: 4px; }
.marketing-preview-plan span, .marketing-preview-disabled { font-size: 12px; color: #526c64; }
.marketing-preview-plan > strong { flex: none; font-size: 19px; font-variant-numeric: tabular-nums; }
.marketing-preview-disabled { display: block; margin: 11px 2px 3px; }

.marketing-audiences { background: #fff; }
.marketing-audiences h2 { max-width: 690px; margin: 12px 0 30px; }
.marketing-audience-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.marketing-audience-photos a { display: block; min-width: 0; color: var(--marketing-ink); text-decoration: none; }
.marketing-audience-photos img { display: block; width: 100%; aspect-ratio: 1.9; height: auto; object-fit: cover; border-radius: 4px; }
.marketing-audience-photos a > span { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 58px; border-bottom: 1px solid var(--marketing-line); font-size: 17px; font-weight: 800; }
.marketing-audience-photos a:hover > span, .marketing-audience-links a:hover { color: #0d7477; }
.marketing-audience-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 8px; }
.marketing-audience-links a { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 58px; padding: 0; border-top: 0; border-bottom: 1px solid var(--marketing-line); font-size: 17px; }
.marketing-audience-links span, .marketing-audience-photos a > span span { font-size: 19px; }
.marketing-costs { background: #ecf4df; }
.marketing-costs .saas-section-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 60px; align-items: center; }
.marketing-costs p { max-width: 560px; font-size: 18px; line-height: 1.6; }
.platform-marketing .saas-operations .saas-section-inner { padding-bottom: 44px; }
.platform-marketing .saas-operations p { color: #d8e9e6; }
.saas-operations-image { padding-bottom: 76px; }
.saas-operations-image img { display: block; width: 100%; height: 330px; object-fit: cover; object-position: center 46%; border-radius: 4px; }
.platform-marketing .saas-questions .saas-section-inner { gap: 76px; }
.platform-marketing .saas-question-list summary { font-size: 17px; }
.platform-marketing .saas-question-list p { color: #4d6663; }
.platform-marketing .saas-final-cta { background: #dced78; }

.marketing-page-head { padding: 42px 0 58px; background: #f3f8f5; border-bottom: 1px solid var(--marketing-line); }
.marketing-breadcrumb { display: flex; align-items: center; gap: 10px; min-height: 28px; color: #5d7870; font-size: 13px; font-weight: 700; }
.marketing-breadcrumb a { color: #0d676b; text-decoration: underline; text-underline-offset: 3px; }
.marketing-page-intro { max-width: 930px; padding-top: 28px; }
.marketing-page-head h1 { max-width: 900px; margin: 0 0 18px; font-size: clamp(38px, 4vw, 56px); line-height: 1.12; text-wrap: balance; }
.marketing-lead { max-width: 750px; margin: 0; font-size: 19px; line-height: 1.55; }
.marketing-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 26px; }
.marketing-page-photo { margin-top: 28px; margin-bottom: 0; }
.marketing-page-photo img { display: block; width: 100%; height: clamp(260px, 27vw, 390px); object-fit: cover; object-position: center 45%; border-radius: 4px; }
.marketing-demo-band { padding: 40px 0 10px; background: #fff; }
.marketing-demo-band .marketing-preview { max-width: 940px; margin: auto; }
.marketing-demo-band .marketing-preview-hero { min-height: 300px; }
.marketing-demo-band .marketing-preview-hero img { min-height: 300px; }
.marketing-demo-band .marketing-preview-hero h3 { font-size: 33px; }
.marketing-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); gap: clamp(48px, 7vw, 110px); padding-top: 74px; padding-bottom: 94px; }
.marketing-article { max-width: 720px; }
.marketing-article section + section { margin-top: 44px; padding-top: 38px; border-top: 1px solid var(--marketing-line); }
.marketing-article h2 { margin: 0 0 12px; font-size: clamp(23px, 2.3vw, 30px); line-height: 1.25; }
.marketing-article p { margin: 0; color: #405b57; font-size: 17px; line-height: 1.75; }
.marketing-related { align-self: start; position: sticky; top: 102px; }
.marketing-related h2 { margin: 0 0 14px; font-size: 17px; }
.marketing-related nav { display: grid; border-top: 1px solid var(--marketing-line); }
.marketing-related a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 51px; padding: 10px 0; border-bottom: 1px solid var(--marketing-line); color: #0d676b; font-weight: 750; text-decoration: none; }
.marketing-related a:hover { text-decoration: underline; text-underline-offset: 4px; }
.marketing-bottom { padding: 58px 0; background: #173e41; }
.marketing-bottom .shell { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.marketing-bottom h2 { margin: 8px 0; font-size: 32px; }
.marketing-bottom p { margin: 0; color: #d9e8e2; }
.marketing-bottom .btn { flex: none; background: #dced78; border-color: #dced78; color: #173e41; }
.marketing-bottom .btn:hover { background: #f0f8bf; border-color: #f0f8bf; }
.marketing-footer-inner { gap: 28px; }
.marketing-footer-inner nav { display: flex; gap: 10px 24px; flex-wrap: wrap; justify-content: flex-end; }
.marketing-footer-inner nav a { font-size: 14px; }
.marketing-band { padding: 62px 0; background: #f7faf8; }
.marketing-calculator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, .8fr); gap: 48px; }
.marketing-calculator-fields input { min-height: 48px; }

@media (max-width: 1100px) {
  .platform-marketing .platform-links { gap: 14px; }
  .marketing-preview-bar > span { padding-right: 0; }
  .marketing-demo-tag { top: 36px; }
  .platform-marketing .saas-step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .platform-marketing .platform-links.open { gap: 2px; }
  .marketing-home-preview-grid { grid-template-columns: 1fr; }
  .marketing-preview-copy { max-width: 700px; }
  .marketing-preview { max-width: 720px; }
  .marketing-costs .saas-section-inner { gap: 24px; }
  .marketing-calculator-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .platform-marketing .shell { width: min(100% - 28px, 1240px); }
  .platform-marketing .saas-hero { min-height: clamp(510px, 72svh, 600px); background-position: 62% center; }
  .platform-marketing .saas-hero::before { background: rgba(243, 250, 249, .76); }
  .platform-marketing .saas-hero-content { padding-block: 46px; }
  .platform-marketing .saas-hero h1 { max-width: 510px; font-size: clamp(40px, 8vw, 52px); }
  .platform-marketing .saas-hero p { max-width: 510px; font-size: 18px; }
  .platform-marketing .saas-hero-note { margin-top: 28px; }
  .platform-marketing .saas-section-inner { padding-block: 58px; }
  .platform-marketing .saas-feature-grid { grid-template-columns: 1fr; gap: 24px; }
  .marketing-home-preview { padding: 58px 0; }
  .marketing-audience-photos { gap: 12px; }
  .marketing-audience-photos a > span, .marketing-audience-links a { font-size: 15px; }
  .marketing-costs .saas-section-inner, .platform-marketing .saas-operations .saas-section-inner, .platform-marketing .saas-questions .saas-section-inner { grid-template-columns: 1fr; gap: 20px; }
  .saas-operations-image { padding-bottom: 58px; }
  .saas-operations-image img { height: 240px; }
  .marketing-page-head { padding: 30px 0 48px; }
  .marketing-page-intro { padding-top: 20px; }
  .marketing-page-head h1 { font-size: clamp(35px, 7vw, 46px); }
  .marketing-lead { font-size: 18px; }
  .marketing-page-photo { margin-top: 18px; }
  .marketing-page-photo img { height: 260px; }
  .marketing-content { grid-template-columns: 1fr; gap: 50px; padding-top: 58px; padding-bottom: 68px; }
  .marketing-related { position: static; }
  .marketing-bottom .shell { align-items: flex-start; flex-direction: column; }
  .marketing-footer-inner { flex-direction: column; align-items: flex-start; }
  .marketing-footer-inner nav { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .platform-marketing .saas-hero h1 { font-size: 40px; }
  .platform-marketing .saas-hero-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .platform-marketing .saas-hero-actions .btn { width: 100%; }
  .platform-marketing .saas-step-list, .marketing-audience-photos, .marketing-audience-links, .marketing-calculator-fields { grid-template-columns: 1fr; }
  .marketing-audience-photos { gap: 22px; }
  .marketing-preview-bar > span { display: none; }
  .marketing-preview-hero { grid-template-columns: 1fr; }
  .marketing-preview-hero > div { padding: 22px; }
  .marketing-preview-hero img { height: 135px; min-height: 135px; object-position: center 42%; }
  .marketing-demo-band .marketing-preview-hero img { min-height: 135px; }
  .marketing-demo-band .marketing-preview-hero h3 { font-size: 27px; }
  .marketing-preview-plan { align-items: flex-start; }
  .marketing-page-head h1 { font-size: 35px; }
  .marketing-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .marketing-actions .btn { width: 100%; }
  .marketing-page-photo img { height: 215px; }
  .marketing-bottom .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .platform-marketing * { scroll-behavior: auto; }
}