.marketing-hero {
  background:#fff; padding:44px 0 40px
}

.hero-grid {
  display:grid; grid-template-columns:1fr 1.08fr; gap:42px; align-items:end
}

/* Both columns are flush at the bottom. Once the result panel opens the left
   column grows, so pin the photo to the top instead of dragging it down. */
.hero-grid:has(.transcript-result:not([hidden])) {
  align-items:start
}

.hero-copy h1 {
  font-size:clamp(31px, 2.92vw, 42px); margin:14px 0 15px
}

.hero-copy h1 em {
  font-style:normal; color:var(--teal)
}

.hero-copy>p {
  font-size:17px; line-height:1.5; color:#708396; margin-bottom:22px; max-width:580px
}

/* Hero photo: the artboard's 601×599 crop. Its lower-right corner carries the
   sample transcript card, so the frame keeps that exact ratio and the card uses
   matching percentages (see components/transcript.css). */
.photo-frame {
  position:relative; display:flex; flex-direction:column
}

.photo-media {
  position:relative; aspect-ratio:601 / 599; overflow:hidden; border-radius:14px; background:#eef2f3
}

.photo-media img {
  position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0
}

.scenarios-strip {
  background:#fff; padding:58px 0 62px
}

.scenarios-grid {
  display:grid; grid-template-columns:minmax(300px,1.56fr) repeat(3,minmax(0,1fr)); gap:22px; align-items:start
}

.scenarios-intro {
  padding:11px 13px 0 0
}

.scenarios-intro h2 {
  font-size:clamp(27px,2.65vw,38px); max-width:410px; line-height:1.09;
  letter-spacing:-.045em; margin:14px 0 15px
}

.scenarios-intro p {
  color:#788b9b; font-size:15px; line-height:1.62; max-width:386px; margin:0
}

.scenario-card h3 {
  font-size:16px; letter-spacing:-.025em; margin:12px 0 4px
}

.scenario-card p {
  font-size:13px; color:#708597; margin:0; line-height:1.52
}

.scenario-card p strong {
  color:#657d90; font-weight:500
}

.scenario-image {
  border-radius:11px; overflow:hidden; background:#e6eef0; aspect-ratio:250/140
}

.scenario-image img {
  width:100%; height:100%; object-fit:cover; transition:transform .3s var(--ease)
}

.scenario-card:hover .scenario-image img {
  transform:scale(1.03)
}

.section {
  padding:84px 0
}

.section-header {
  text-align:center; max-width:800px; margin:0 auto 39px
}

.section-header .eyebrow {
  justify-content:center
}

.section-header h2 {
  margin:13px 0 10px
}

.section-header p {
  color:#718595
}

.process {
  background:#fff; padding:70px 0 74px
}

.step-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px
}

.step {
  position:relative; padding:22px 24px 24px; border:1px solid var(--line); border-radius:12px; min-height:164px
}

.step-count {
  position:absolute; right:23px; top:23px; color:#a9bcc9; font-size:13px
}

.step-icon,.feature-icon {
  width:40px; height:40px; border-radius:10px; background:#e8f7f2; color:var(--teal); display:grid; place-items:center; font-size:20px
}

.step h3 {
  font-size:16px; margin:18px 0 5px
}

.step p {
  font-size:13px; color:#778b99; margin:0
}

.features {
  background:#f3f6f7
}

.bento {
  display:grid; grid-template-columns:1.4fr 1fr; gap:14px
}

.feature {
  background:white; border:1px solid #e3e9ec; border-radius:12px; padding:20px 22px; overflow:hidden
}

.feature-head {
  display:flex; align-items:center; gap:13px; margin-bottom:15px
}

.feature-head h3 {
  font-size:15px; letter-spacing:-.02em; margin:0 0 3px
}

.feature-head p {
  font-size:12px; color:#82939f; margin:0
}

.right-features {
  display:grid; gap:14px
}

.feature-speakers {
  display:flex; flex-direction:column
}

.feature-speakers .transcript-snippet {
  margin-top:auto
}

.wave {
  height:42px; display:flex; align-items:center; gap:2px; overflow:hidden
}

.wave i {
  height:25px; width:3px; background:#8fcac2; border-radius:3px; flex-shrink:0
}

.wave i:nth-child(3n) {
  height:35px; background:var(--teal)
}

.wave i:nth-child(4n) {
  height:13px
}

.wave i:nth-child(n+26) {
  background:#c9d7df
}

.wavebox {
  display:flex; align-items:center; gap:13px
}

.search-demo {
  border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:13px; color:#607789; display:flex; align-items:center; gap:8px; background:#fbfdfd
}

.search-demo .cs-icon {
  width:15px; height:15px; color:#93a5b1
}

.search-result {
  margin:10px 0 0
}

.wave-copy {
  flex:1; min-width:0
}

.wave-copy .tiny {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap
}

.mark {
  background:#e6ec99; padding:1px 2px; border-radius:2px; color:#46524a
}

.mini-options {
  display:flex; gap:11px; flex-wrap:wrap
}

.mini-options .btn {
  padding:9px 14px
}

.langs {
  display:flex; gap:8px; flex-wrap:wrap
}

.langs span {
  border:1px solid #e1e9ed; border-radius:25px; padding:6px 15px; background:#fafcfd; color:#697f8b; font-size:12px
}

.feature-note {
  padding:12px 18px; border:1px solid #e1e8ea; color:#84939e; border-radius:9px; margin-top:12px; font-size:12px
}

.usecases {
  background:#fff
}

.usecases .section-header {
  margin-bottom:35px
}

.case-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:23px
}

.case {
  border:1px solid var(--line); border-radius:13px; overflow:hidden; transition:transform .18s
}

.case:hover {
  transform:translateY(-3px)
}

.case img {
  width:100%; height:225px; object-fit:cover
}

.case-body {
  padding:21px 23px; position:relative; min-height:142px
}

.case-body .eyebrow {
  font-size:10px
}

.case-body .eyebrow:before {
  display:none
}

.case h3 {
  font-size:19px; margin:8px 25px 8px 0
}

.case p {
  color:#788d9d; font-size:13px; margin:0; max-width:440px
}

.case .arrow {
  position:absolute; right:21px; top:49px; background:#e8f6f2; color:var(--teal); border-radius:50%; width:32px; height:32px; display:grid; place-items:center
}

.faq {
  background:#f3f6f7
}

.faq-grid {
  display:grid; grid-template-columns:300px 1fr; gap:72px
}

.faq-grid h2 {
  margin:14px 0
}

.faq-grid aside p {
  color:#798c9b
}

.faq-list {
  display:block
}

.faq-item {
  border-top:1px solid #dbe3e7
}

.faq-item:last-child {
  border-bottom:1px solid #dbe3e7
}

.faq-q {
  width:100%; padding:17px 4px; background:transparent; border:0; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:22px; color:var(--ink); font-weight:800; font-size:14px; cursor:pointer; list-style:none
}

.faq-q::-webkit-details-marker {
  display:none
}

.faq-q span {
  position:relative; width:20px; height:20px; flex:none; display:grid; place-items:center; color:#8b9cac
}

.faq-q span:before {
  content:'+'; font-size:22px; line-height:1; font-weight:400
}

.faq-item[open] .faq-q span:before {
  content:'\2212'
}

.faq-a {
  display:none; color:#718696; font-size:13px; line-height:1.8; padding:0 55px 19px 4px
}

.faq-item[open] .faq-a {
  display:block
}

.dark-cta {
  background:#162e3e; color:white; text-align:center; padding:58px 24px
}

.dark-cta h2 {
  font-size:38px; margin:12px 0 10px
}

.dark-cta p {
  color:#abc0cb
}

.dark-cta .eyebrow {
  color:#8fd8cc; justify-content:center
}

.dark-cta .eyebrow:before {
  background:#8fd8cc
}

@media(max-width:1150px) {
  .hero-grid {
    gap:25px; align-items:start
  }
  /* Card drops under the photo, so crop above the artboard's baked-in card. */
  .photo-media {
    aspect-ratio:601 / 378
  }
  .scenarios-grid {
    grid-template-columns:1.2fr 1fr 1fr
  }
  .scenarios-intro {
    grid-column:1/-1; max-width:620px; margin-bottom:6px
  }
}

@media(max-width:780px) {
  .marketing-hero {
    padding:40px 0
  }
  .hero-grid,.bento,.case-grid,.step-grid,.faq-grid {
    grid-template-columns:1fr
  }
  .hero-grid {
    gap:26px; align-items:stretch
  }
  .faq-grid {
    gap:22px
  }
  .case-body .arrow {
    top:24px
  }
  .hero-copy h1 {
    font-size:28px
  }
  .hero-break {
    display:none
  }
  .hero-copy>p {
    font-size:16px
  }
  /* Crop above the artboard's baked-in card so the real card below is the only one. */
  .photo-media {
    aspect-ratio:601 / 378
  }
  .section {
    padding:63px 0
  }
  .process {
    padding:62px 0
  }
  .step-grid {
    gap:12px
  }
  .feature {
    padding:17px
  }
  .case img {
    height:230px
  }
  .faq-grid {
    gap:19px
  }
  .dark-cta h2 {
    font-size:31px
  }
  .scenarios-strip {
    padding:44px 0 48px
  }
  .scenarios-grid {
    grid-template-columns:1fr; gap:22px
  }
  .scenarios-intro {
    grid-column:1/-1
  }
  .scenarios-intro h2 {
    font-size:26px
  }
  .scenario-image {
    aspect-ratio:16/9
  }
}