.marketing-page {
  --marketing-section-space: 56px;
  --marketing-content-gap: 28px;
  --marketing-hero-min-height: 720px;
  --marketing-anchor-offset: 112px;
  background: #0b0e0c;
}

.marketing-page .site-shell {
  overflow: visible;
  background: #0b0e0c;
}

.marketing-container {
  width: min(1200px, calc(100% - 64px));
  margin-inline: auto;
}

.marketing-hero {
  position: relative;
  display: flex;
  min-height: min(var(--marketing-hero-min-height), 100svh);
  align-items: center;
  overflow: hidden;
  background: #19221d;
}

.marketing-hero-photo,
.marketing-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.marketing-hero-photo {
  object-fit: cover;
  object-position: center;
  filter: saturate(.8) brightness(.75);
}

.marketing-hero-shade {
  background: linear-gradient(90deg, rgba(7,12,9,.98) 0%, rgba(7,12,9,.88) 35%, rgba(8,14,10,.35) 75%, rgba(8,14,10,.16)),
    linear-gradient(0deg, #0b0e0c 0%, transparent 24%, transparent 82%, rgba(7,12,9,.48));
}

.marketing-hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: var(--marketing-hero-min-height);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  padding-top: 112px;
  padding-bottom: 48px;
}

.marketing-hero-copy {
  min-width: 0;
  overflow-wrap: anywhere;
  max-width: 610px;
}

.marketing-eyebrow,
.marketing-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #b9dfb0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.marketing-eyebrow-line {
  display: block;
  width: 24px;
  height: 1px;
  background: #b9dfb0;
}

.marketing-hero-copy h1 {
  max-width: 690px;
  margin-top: 28px;
  color: #f6f9f5;
  font-size: clamp(48px, 5.4vw, 78px);
  font-weight: 700;
  letter-spacing: -.065em;
  line-height: 1.04;
  text-wrap: balance;
}

.marketing-hero-copy > p {
  max-width: 540px;
  margin-top: 26px;
  color: #d3dcd2;
  font-size: 19px;
  line-height: 1.55;
  text-wrap: pretty;
}

.marketing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.marketing-button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.marketing-button:hover { transform: translateY(-2px); }
.marketing-button-primary { background: #dcf2d6; color: #102017; }
.marketing-button-primary:hover { background: #f0ffeb; }
.marketing-button-ghost { border-color: rgba(255,255,255,.32); background: rgba(0,0,0,.12); color: #f7fcf5; }
.marketing-button-ghost:hover { border-color: rgba(255,255,255,.64); }

.marketing-hero-visual {
  position: relative;
  display: grid;
  min-height: 540px;
  place-items: center;
}

.marketing-demo-window {
  position: relative;
  width: min(100%, 540px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 22px;
  background: #171d1a;
  box-shadow: 0 38px 100px rgba(0,0,0,.62), 0 0 80px rgba(143,207,126,.15);
  transform: none;
}

.marketing-demo-bar {
  display: flex;
  height: 38px;
  align-items: center;
  justify-content: space-between;
  padding-inline: 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: #a9bdac;
  font-size: 9px;
  letter-spacing: .12em;
}

.marketing-demo-bar > span { color: #89948a; letter-spacing: .06em; }

.marketing-demo-cover {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: center;
}

.marketing-demo-chip {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: inline-flex;
  max-width: calc(100% - 40px);
  align-items: center;
  gap: 9px;
  padding: 8px 15px 8px 8px;
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 12px;
  background: rgba(17,24,19,.9);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  color: white;
  font-size: 13px;
  backdrop-filter: blur(12px);
}

.marketing-demo-chip img { width: 29px; height: 29px; object-fit: contain; }

.marketing-reel-phone {
  position: relative;
  width: min(290px, 65%);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 7px solid #171d19;
  border-radius: 30px;
  background: #222;
  box-shadow: 0 40px 90px rgba(0,0,0,.64), 0 0 0 1px rgba(255,255,255,.28), 0 0 90px rgba(169,218,154,.16);
  transform: none;
}

.marketing-reel-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.marketing-reel-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,9,6,.38), transparent 26%, transparent 58%, rgba(4,9,6,.8));
  pointer-events: none;
}

.marketing-reel-overline,
.marketing-reel-caption,
.marketing-reel-progress {
  position: absolute;
  z-index: 1;
  left: 16px;
}

.marketing-reel-overline { top: 18px; color: #e4f6db; font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.marketing-reel-caption { right: 12px; bottom: 37px; color: #fff; font-size: 26px; letter-spacing: -.05em; line-height: 1.12; overflow-wrap: anywhere; text-shadow: 0 2px 14px #0009; }
.marketing-reel-caption.is-long { font-size: 21px; line-height: 1.08; }
.marketing-reel-progress { right: 16px; bottom: 19px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #c4eeb8 63%, #ffffff7a 63%); }
.marketing-reel-badge { position: absolute; top: 24px; right: -5px; padding: 10px 14px; border: 1px solid #ffffff2c; border-radius: 20px; background: #242d27e8; color: #e7f0e3; font-size: 12px; transform: rotate(-2deg); }

.marketing-hero-index {
  position: absolute;
  right: max(32px, calc((100vw - 1200px) / 2));
  bottom: 34px;
  left: max(32px, calc((100vw - 1200px) / 2));
  display: flex;
  align-items: center;
  gap: 20px;
  color: #c3d5c0;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .12em;
}



.marketing-story,
.marketing-next {
  padding-block: var(--marketing-section-space);
}

.marketing-story { scroll-margin-top: var(--marketing-anchor-offset); }

.marketing-section-heading {
  max-width: 700px;
  margin-bottom: var(--marketing-content-gap);
}

.marketing-section-heading h2,
.marketing-next h2,
.marketing-end-cta h2 {
  margin-top: 12px;
  color: #f4f8f3;
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: -.052em;
  line-height: 1.08;
}

.marketing-section-heading p {
  max-width: 620px;
  margin-top: 12px;
  color: #aebbb0;
  font-size: 17px;
  line-height: 1.55;
}

.marketing-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.marketing-story-card { min-width: 0; overflow: hidden; border: 1px solid #ffffff17; border-radius: 20px; background: #151b17; }
.marketing-story-media { display: grid; height: 320px; place-items: center; overflow: hidden; background: #263129; }
.marketing-story-media img,
.marketing-story-media video { width: 100%; height: 100%; object-fit: cover; }
.marketing-story-card-result .marketing-story-media { background: #151c18; }
.marketing-story-card-result .marketing-story-media video { max-width: 230px; object-fit: cover; }
.marketing-story-reel { position: relative; width: min(230px,100%); height: 100%; overflow: hidden; box-shadow: 0 0 35px #0007; }
.marketing-story-reel > img,.marketing-story-reel > video { width: 100%; height: 100%; object-fit: cover; }
.marketing-story-reel::after { position: absolute; inset: 35% 0 0; background: linear-gradient(transparent,#071109b8); content: ''; pointer-events: none; }
.marketing-story-reel-brand,.marketing-story-reel-title,.marketing-story-reel-line { position: absolute; z-index: 1; left: 12px; pointer-events: none; }
.marketing-story-reel-brand { top: 12px; color: #e4f3df; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.marketing-story-reel-title { right: 12px; bottom: 29px; color: white; font-size: 20px; line-height: 1.1; text-shadow: 0 2px 12px #0009; }
.marketing-story-reel-line { right: 12px; bottom: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg,#c7eebf 65%,#ffffff66 65%); }
.marketing-story-meta { display: grid; gap: 7px; min-height: 84px; padding: 17px 19px; }
.marketing-story-meta span { color: #9fc994; font-size: 11px; font-weight: 720; letter-spacing: .1em; text-transform: uppercase; }
.marketing-story-meta strong { overflow: hidden; color: #f2f6f0; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.marketing-process { padding-block: var(--marketing-section-space); background: #151c17; }

.marketing-section-heading-split { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 30px; }
.marketing-text-link { padding-bottom: 6px; color: #c6e6be; font-size: 14px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.marketing-text-link:hover { color: #fff; }

.marketing-next { padding-top: min(40px, var(--marketing-section-space)); }
.marketing-next-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: var(--marketing-content-gap); }
.marketing-next-card { position: relative; display: flex; height: 265px; align-items: end; overflow: hidden; padding: 21px; border: 1px solid #ffffff24; border-radius: 18px; text-decoration: none; }
.marketing-next-card::after { position: absolute; inset: 35% 0 0; background: linear-gradient(transparent,#071009e6); content: ''; }
.marketing-next-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.marketing-next-card:hover img { transform: scale(1.05); }
.marketing-next-card strong,
.marketing-next-card span { position: relative; z-index: 1; color: #fff; font-size: 21px; line-height: 1.2; }
.marketing-next-card span { margin-left: auto; font-size: 19px; }

.marketing-end-cta { padding: var(--marketing-section-space) 0; background: radial-gradient(circle at 50% 110%,#56865b76,transparent 48%),#1c2820; text-align: center; }
.marketing-end-cta img { width: 45px; height: 45px; }
.marketing-end-cta h2 { max-width: 700px; margin: 16px auto 24px; }
.marketing-footer { display: flex; min-height: 100px; align-items: center; justify-content: space-between; gap: 20px; }
.marketing-footer > div { display: flex; flex-wrap: wrap; gap: 24px; }
.marketing-footer > div a { color: #a9b6aa; font-size: 13px; text-decoration: none; }
.marketing-footer > div a:hover { color: #fff; }

@media (max-width: 900px) {
  .marketing-page { --marketing-section-space: 44px; --marketing-content-gap: 24px; --marketing-anchor-offset: 104px; }
  .marketing-hero-layout { grid-template-columns: 1fr; gap: 18px; padding-top: 112px; }
  .marketing-hero-copy { max-width: 750px; }
  .marketing-hero-visual { min-height: 420px; }
  .marketing-demo-cover { height: 280px; }
  .marketing-reel-phone { width: 225px; }
  .marketing-story-grid { gap: 10px; }
  .marketing-story-media { height: 250px; }
}

@media (max-width: 640px) {
  .marketing-container { width: min(100% - 32px, 480px); }
  .marketing-page { --marketing-section-space: 32px; --marketing-anchor-offset: 88px; }
  .marketing-hero { min-height: auto; }
  .marketing-hero-layout { min-height: auto; padding-top: 104px; padding-bottom: 48px; }
  .marketing-hero-copy h1 { margin-top: 19px; font-size: clamp(39px,11vw,56px); }
  .marketing-hero-copy > p { margin-top: 16px; font-size: 16px; }
  .marketing-hero-actions { gap: 9px; margin-top: 25px; }
  .marketing-button { min-height: 48px; gap: 10px; padding-inline: 16px; font-size: 12px; }
  .marketing-hero-visual { min-height: 390px; }
  .marketing-demo-window { transform: none; }
  .marketing-demo-cover { height: 240px; }
  .marketing-reel-badge { top: 5px; right: 0; }
  .marketing-hero-index { right: 16px; bottom: 23px; left: 16px; }
  .marketing-story-grid,.marketing-next-grid { grid-template-columns: 1fr; }
  .marketing-story-media { height: 245px; }
  .marketing-story-card-result .marketing-story-media video { max-width: 220px; }
  .marketing-section-heading-split { align-items: flex-start; flex-direction: column; }
  .marketing-next-card { height: 210px; }
  .marketing-footer { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 24px; }
}

/* Preserve the real export frame: captions must never be cropped by the page. */
.marketing-reel-phone.is-landscape { width: min(100%, 490px); aspect-ratio: 16 / 9; border-radius: 20px; }
.marketing-reel-phone video { object-fit: contain; object-position: center; }
.marketing-story-media video { object-fit: contain; background: #0d120f; }
.marketing-story-card-result .marketing-story-media video { max-width: 100%; object-fit: contain; }
.marketing-tutorial-link { position: relative; display: grid; width: 100%; height: 100%; place-items: center; text-decoration: none; }
.marketing-tutorial-art { position: relative; display: grid; width: 100%; height: 100%; padding: 26px; place-items: center; background: radial-gradient(ellipse at center, #44664b 0%, #1a2b20 70%); }
.marketing-tutorial-art img { height: auto; max-height: 100%; object-fit: contain; border: 1px solid #a8c1ac42; border-radius: 8px; box-shadow: 0 12px 25px #0007; }
.marketing-tutorial-play { position: absolute; z-index: 1; display: grid; width: 58px; height: 58px; padding-left: 4px; border: 1px solid #e4ffdc55; border-radius: 50%; place-items: center; background: #d8eed3ee; color: #19311d; box-shadow: 0 8px 25px #0005; transition: transform .15s; }
.marketing-tutorial-link:hover .marketing-tutorial-play { transform: scale(1.08); }

.marketing-flow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 36px; margin: 0; padding: 0; list-style: none; }
.marketing-flow-node { position: relative; min-width: 0; }
.marketing-flow-number { display: inline-block; margin-bottom: 14px; color: #9db7a1; font-size: 11px; font-weight: 650; letter-spacing: .15em; }
.marketing-flow-node > strong { display: block; margin-top: 20px; color: #eff5ed; font-size: 19px; line-height: 1.3; overflow-wrap: anywhere; }
.marketing-flow-node > p { margin-top: 9px; color: #a6b5a7; font-size: 13px; line-height: 1.65; }
.marketing-flow-drawing { position: relative; display: grid; height: 168px; place-items: center; overflow: hidden; border: 1px solid #b6cbb528; border-radius: 15px; background: radial-gradient(ellipse at top,#4e685335,#1b2620 75%); box-shadow: 0 8px 24px #0002; }
.marketing-flow-source img,.marketing-flow-finish img { position: absolute; inset: 12px; width: auto; height: calc(100% - 24px); max-width: calc(100% - 24px); margin: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 5px 18px #0005; }
.marketing-flow-play,.marketing-flow-check { position: absolute; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #daecd6e8; color: #23452e; font-size: 12px; }
.marketing-flow-check { right: 10px; bottom: 10px; }
.marketing-flow-connector { position: absolute; top: 105px; right: -29px; color: #80a889; font-size: 22px; }
.marketing-flow-screen { position: relative; display: grid; width: 82%; min-height: 103px; align-content: center; gap: 8px; padding: 16px 12px; border: 1px solid #aac4af35; border-radius: 8px; background: #122017; box-shadow: 0 10px 20px #0003; }
.marketing-flow-timeline { position: relative; display: grid; gap: 8px; }
.marketing-flow-timeline::after { position: absolute; top: -10px; bottom: -10px; left: 45%; width: 1px; background: #e9f8e2; content: ''; box-shadow: 0 0 8px #ceffb67a; }
.marketing-flow-timeline > div { display: flex; gap: 5px; }
.marketing-flow-timeline i { display: block; flex: 1; height: 17px; border-radius: 3px; background: #77967d; }
.marketing-flow-timeline > div:nth-child(2) i { background: #b5d9aa; }
.marketing-flow-timeline > div:nth-child(3) i { background: #41634b; }
.marketing-flow-timeline i:nth-child(2) { flex: 1.6; }
.marketing-flow-wave { display: flex; height: 64px; align-items: center; justify-content: center; gap: clamp(1px,.22vw,3px); min-width: 0; }
.marketing-flow-wave i { flex: 1; max-width: 4px; border-radius: 3px; background: #b5d6ae; opacity: .9; }
.marketing-flow-vocal-extraction .marketing-flow-wave { height: 32px; transform: scaleY(.45); }
.marketing-flow-vocal-extraction .marketing-flow-wave:nth-child(2) { opacity: .35; }
.marketing-flow-caption { display: grid; gap: 10px; padding: 10px 0; }
.marketing-flow-caption > div { display: flex; justify-content: center; gap: 5px; }
.marketing-flow-caption i { display: block; flex: 1; min-width: 0; max-width: 22px; height: 9px; border-radius: 3px; background: #b9dbb1; }
.marketing-flow-caption i:nth-child(2) { flex: 1.5; max-width: 33px; background: #edf8e9; }
.marketing-flow-caption > div:nth-child(2) i { height: 6px; background: #75987b; }
.marketing-flow-caption.is-censored i:nth-child(2) { background: #42604b; box-shadow: inset 0 0 0 1px #8aaa8666; }
.marketing-flow-language { text-align: center; color: #a5c19d; font-size: 13px; }
.marketing-flow-accents { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 28px; }
@media(max-width:900px) { .marketing-flow { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; } .marketing-flow-node:nth-child(2) .marketing-flow-connector { display: none; } }
@media(max-width:640px) { .marketing-flow { grid-template-columns: 1fr; gap: 42px; } .marketing-flow-node { display: grid; grid-template-columns: 110px minmax(0,1fr); column-gap: 18px; } .marketing-flow-number { grid-column: 2; margin: 0 0 5px; } .marketing-flow-drawing { grid-column: 1; grid-row: 1 / 4; height: 128px; } .marketing-flow-node > strong,.marketing-flow-node > p { grid-column: 2; margin-top: 0; } .marketing-flow-node > p { margin-top: 7px; font-size: 12px; } .marketing-flow-connector,.marketing-flow-node:nth-child(2) .marketing-flow-connector { display: block; top: auto; right: auto; bottom: -31px; left: 48px; transform: rotate(90deg); } .marketing-flow-screen { width: 91%; padding: 12px 7px; } .marketing-flow-accents { gap: 4px; font-size: 20px; } }

.marketing-hero-copy > p { white-space: pre-line; font-size: 17px; line-height: 1.6; }
.marketing-flow-capture-view { position: relative; height: 65px; overflow: hidden; border: 1px solid #789a8060; border-radius: 5px; background: #36503e; }
.marketing-flow-capture-view.is-person::before { position: absolute; top: 11px; left: calc(50% - 10px); width: 20px; height: 20px; border-radius: 50%; background: #bad5ae; content: ''; }
.marketing-flow-capture-view.is-person::after { position: absolute; bottom: -13px; left: calc(50% - 23px); width: 46px; height: 40px; border-radius: 50% 50% 0 0; background: #8aaa82; content: ''; }
.marketing-flow-capture-view.is-screen::before { position: absolute; top: 8px; left: 8px; right: 8px; height: 5px; border-radius: 2px; background: #afcfa3; box-shadow: 0 13px 0 #7a9a72, 0 26px 0 #56744e; content: ''; }
.marketing-flow-record-dot { position: absolute; right: 10px; top: 10px; color: #c6dcb4; font-size: 9px; }

/* Two portrait examples and one landscape tutorial, with identical media/card heights. */
.marketing-story-grid { --demo-height: min(360px, calc((100vw - 96px) / 2.90277778)); display: flex; justify-content: center; align-items: stretch; gap: 16px; }
.marketing-story-card { flex: 0 0 auto; }
.marketing-story-card-source,.marketing-story-card-result { width: calc(var(--demo-height) * 9 / 16); }
.marketing-story-card-tutorial { width: calc(var(--demo-height) * 16 / 9); }
.marketing-story-card-feature { width: calc(var(--demo-height) * 16 / 9); }
.marketing-story-card-feature .marketing-flow-drawing { width: 82%; }
.marketing-story-card-feature .marketing-story-meta strong { font-size: 14px; font-weight: 400; color: #aebbb0; }
.marketing-story-grid .marketing-story-media { height: var(--demo-height); }
.marketing-story-media > video { width: 100%; height: 100%; object-fit: contain; }
.marketing-story-grid .marketing-story-meta { min-height: 92px; padding: 16px; }
.marketing-story-card-source .marketing-story-meta strong,.marketing-story-card-result .marketing-story-meta strong { font-size: 13px; }
.marketing-tutorial-art { padding: 0; }
.marketing-tutorial-art img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; }
@media(max-width:900px) { .marketing-story-grid { --demo-height: min(320px, calc((100vw - 64px) * 9 / 16)); flex-direction: column; align-items: center; gap: 24px; } }

@media(max-width:640px) {
  .marketing-story-grid { --demo-height: min(360px, calc((100vw - 48px) * 8 / 9)); display: grid; width: min(100%, 422px); grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-inline: auto; }
  .marketing-story-card-source,.marketing-story-card-result { width: 100%; }
  .marketing-story-card-tutorial,.marketing-story-card-feature { grid-column: 1 / -1; width: 100%; }
  .marketing-story-card-tutorial .marketing-story-media { background: #192a20; }
  .marketing-tutorial-art { background: radial-gradient(ellipse at center,#3d5c45,#192a20 75%); }
  .marketing-story-grid .marketing-story-meta { padding-inline: 12px; }
}

.marketing-story-grid .marketing-story-meta strong { display: block; overflow: visible; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }

.marketing-preview-pending { position: relative; }
.marketing-preview-status { position: absolute; left: 12px; right: 12px; bottom: 18px; padding: 10px; border-radius: 9px; background: #14261de8; color: #d0e3c8; font-size: 12px; text-align: center; }
.marketing-preview-placeholder { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(ellipse at center,#2b4332,#142018); color: #bad1b0; font-size: 13px; line-height: 1.6; text-align: center; }

.marketing-reel-sound { position: absolute; z-index: 3; right: 12px; bottom: 12px; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #d2ebc745; border-radius: 50%; background: #13241cdb; color: #e3f4db; cursor: pointer; backdrop-filter: blur(8px); }
.marketing-reel-sound svg { width: 22px; height: 22px; }
.marketing-reel-sound:hover,.marketing-reel-sound:focus-visible { background: #37543c; outline: 2px solid #b8dba7; outline-offset: 2px; }

/* Feature overviews share the page shell without presenting illustrative art as an export. */
.marketing-feature-preview { width: min(100%, 490px); }
.marketing-feature-preview .marketing-demo-cover { height: 260px; object-fit: contain; background: #122017; }
.marketing-feature-preview .marketing-demo-bar { height: auto; min-height: 44px; flex-wrap: wrap; gap: 8px; padding-block: 12px; font-size: 11px; }
.marketing-feature-caption { padding: 22px 24px 0; color: #eff5ed; font-size: 25px; line-height: 1.3; letter-spacing: -.04em; }
.marketing-feature-preview-list { display: grid; gap: 12px; margin: 0; padding: 22px 24px 24px; list-style: none; counter-reset: feature; }
.marketing-feature-preview-list li { display: flex; align-items: center; gap: 12px; color: #c8d8c7; font-size: 13px; line-height: 1.5; counter-increment: feature; }
.marketing-feature-preview-list li::before { display: grid; flex: 0 0 26px; height: 26px; place-items: center; border: 1px solid #b6cbb535; border-radius: 50%; color: #b9dfb0; font-size: 10px; content: '0' counter(feature); }
.marketing-story-grid.has-feature-highlights { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.marketing-story-card-highlight .marketing-flow-drawing { width: 82%; }
.marketing-story-card-highlight .marketing-story-meta span { color: #e2efdd; font-size: 17px; letter-spacing: 0; text-transform: none; }
.marketing-story-card-highlight .marketing-story-meta strong { color: #aebbb0; font-size: 14px; font-weight: 400; }
@media (max-width: 640px) {
  .marketing-feature-preview .marketing-demo-cover { height: 210px; }
  .marketing-feature-caption { font-size: 22px; }
  .marketing-story-grid.has-feature-highlights { grid-template-columns: 1fr; }
  .marketing-story-card-highlight .marketing-story-media { height: 220px; }
}