/* Figma 6773:21167 / 6805:21802. Shared tokens, FAQ and testimonial live in landing.css. */
@media (hover: hover) and (pointer: fine) {
  .use-cases-page .use-nav:not(.is-hero-cta-covered) .use-nav-download:hover { background: white; border-color: white; color: var(--coffee-950); }
  .use-cases-page .use-nav.is-hero-cta-covered .use-nav-download:hover { background: #651d26; border-color: #651d26; }
}
.use-cases-body { margin: 0; background: var(--paper); font-family: var(--body); }
.use-cases-page { background: var(--paper); }
.use-cases-page .landing-footer { background: var(--paper-muted); margin-top: 0; padding-block: 200px 120px; }
.use-cases-page .landing-footer-copyright { margin-top: 80px; }
.use-cases-page *, .use-cases-page *::before, .use-cases-page *::after { box-sizing: border-box; }
.use-cases-page h1, .use-cases-page h2, .use-cases-page h3, .use-cases-page p, .use-cases-page blockquote { margin: 0; }
.use-cases-page h1, .use-cases-page h2, .use-cases-page h3 { text-wrap: balance; }
.use-keep-together { white-space: nowrap; }
.use-cases-page a { color: inherit; text-underline-offset: 4px; }
.use-cases-page a:focus-visible, .use-cases-page button:focus-visible { outline: 3px solid var(--merlot); outline-offset: 5px; }
.use-inner { width: min(1140px, calc(100% - 48px)); margin-inline: auto; }
.use-nav { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 60; min-height: 80px; padding: 16px max(24px, calc((100% - 1140px) / 2)); background: var(--paper); }
.use-nav::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: .5px; background: #C4BEB5; pointer-events: none; }
.use-nav img { display: block; object-fit: contain; }
.use-nav > a:first-child { flex-shrink: 0; }
.use-cases-page .download-button { display: inline-flex; align-items: center; justify-content: center; padding: 14px 20px; border-radius: 1000px; text-decoration: none; font-size: 17px; line-height: 22px; font-weight: 500; }
.use-cases-page .use-nav-download { height: 48px; border: 1.5px solid #c9c3bf; color: var(--coffee-900); background: transparent; }
.use-cases-page .section-cta { height: 64px; margin-top: 0; background: var(--merlot); color: white; width: fit-content; }
.use-cases-page .download-button-label-mobile { display: none; }
.use-hero { padding-block: 150px 200px; display: grid; grid-template-columns: minmax(0, 426px) minmax(0, 480px); justify-content: space-between; gap: 80px; }
.use-hero-copy { display: flex; flex-direction: column; align-items: start; gap: 40px; }
.use-hero h1, .use-features-heading h2 { font-family: var(--display); font-size: 80px; line-height: 1.2; font-weight: 500; letter-spacing: -2px; color: var(--coffee-900); }
.use-hero-copy p, .use-feature-copy p, .use-audiences p { font-size: 17px; line-height: 22px; letter-spacing: -.442px; color: var(--coffee-600); }
.use-audiences { display: flex; flex-direction: column; gap: 56px; }
.use-audiences h2 { display: flex; gap: 16px; align-items: center; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.41px; color: var(--coffee-900); }
.use-audiences h2 img { flex: 0 0 24px; }
.use-audiences p { margin: 12px 0 0 40px; }
.use-flourish { display: block; overflow: hidden; background: var(--paper); height: 345px; }
.use-flourish img { display: block; width: max(100%, 1930px); height: 345px; object-fit: cover; float: right; }
.use-features { padding-block: 200px; background: var(--paper-muted); }
.use-features-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 48px; margin-bottom: 200px; }
.use-features-heading .section-cta { margin-inline: 0; }
.homepage-features .use-features-heading { gap: 0; }
.homepage-features .use-features-heading h2 { margin-top: 20px; }
.homepage-features .use-features-heading .section-cta { margin-top: 48px; }
@media (min-width: 521px) and (max-width: 1023px) {
  .homepage-features .use-features-heading .section-cta { margin-top: 36px; }
}
.use-feature-list { display: flex; flex-direction: column; gap: 200px; }
.use-feature { display: grid; grid-template-columns: minmax(0, 692fr) minmax(0, 394fr); align-items: center; gap: 54px; }
.use-feature-copy { grid-column: 2; grid-row: 1; }
.use-feature picture { grid-column: 1; grid-row: 1; display: block; overflow: hidden; border-radius: 56px; }
.use-feature:nth-child(even) { grid-template-columns: minmax(0, 394fr) minmax(0, 692fr); }
.use-feature:nth-child(even) .use-feature-copy { grid-column: 1; }
.use-feature:nth-child(even) picture { grid-column: 2; }
.use-feature img { display: block; width: 100%; height: auto; aspect-ratio: 692 / 558; object-fit: cover; }
.use-feature h3 { font-family: var(--display); font-size: 44px; line-height: 1.2; font-weight: 500; letter-spacing: -1.5px; color: var(--coffee-900); margin-bottom: 32px; }
.use-cases-page .faq-answer a { color: var(--merlot); }
.use-cases-page .testimonial-quote { margin: 48px auto; }
.use-skip { position: fixed; top: -100px; left: 24px; z-index: 100; padding: 12px; background: white; color: #51121a; }
.use-skip:focus { top: 12px; }
@media (min-width: 1024px) {
  /* Match the homepage's stationary 48px nav and fading, padded pill. */
  .use-nav { top: 21px; width: min(1140px, calc(100% - 48px)); height: 48px; min-height: 48px; margin: 21px auto 11px; padding: 0; background: transparent; isolation: isolate; }
  .use-nav::after { display: none; }
  .use-nav::before { content: ""; position: absolute; inset: -9px -9px -9px -21px; z-index: -1; pointer-events: none; border: 1px solid #e3e1de; border-radius: 88px; background: white; box-shadow: 0 12px 22px rgba(0,0,0,.05); opacity: 0; transition: opacity 260ms ease; }
  .use-nav.is-hero-cta-covered::before { opacity: 1; }
  .use-cases-page .use-nav-download { transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease; }
  .use-cases-page .use-nav.is-hero-cta-covered .use-nav-download { background: var(--merlot); border-color: var(--merlot); color: white; }
  .use-nav.is-hero-cta-covered .download-button-icon { filter: brightness(0) invert(1); }
}
@media (max-width: 1023px) {
  .use-cases-page .landing-footer { padding-block: 150px 75px; }
  .use-nav { min-height: 72px; padding: 16px 24px; }
  .use-nav > a:first-child img { width: 100px; height: 25px; }
  .use-cases-page .use-nav-download { height: 40px; font-size: 15px; font-weight: 400; transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease; }
  .use-cases-page .use-nav.is-hero-cta-covered .use-nav-download { background: var(--coffee-900); border-color: var(--coffee-900); color: white; }
  .use-nav.is-hero-cta-covered .download-button-icon { filter: brightness(0) invert(1); }
  .use-cases-page .download-button-label-desktop { display: none; }
  .use-cases-page .download-button-label-mobile { display: inline; }
  .use-hero { padding-block: 150px 150px; grid-template-columns: 1fr; gap: 120px; }
  .use-hero-copy { gap: 32px; }
  .use-hero h1, .use-features-heading h2 { font-size: 48px; }
  .use-hero h1 { font-weight: 600; }
  .use-flourish, .use-flourish img { height: auto; width: 100%; aspect-ratio: 402 / 196; }
  .use-features { padding-block: 150px; }
  .use-features > .use-inner { width: calc(100% - 40px); }
  .use-features-heading { gap: 32px; margin-bottom: 161px; }
  .use-feature-list { gap: 161px; }
  .use-feature, .use-feature:nth-child(even) { display: flex; flex-direction: column; align-items: stretch; gap: 40px; }
  .use-feature h3 { font-size: 40px; letter-spacing: -1px; margin-bottom: 20px; }
  .use-feature picture { border-radius: 32px; }
  .use-feature img { aspect-ratio: 362 / 320; object-fit: cover; }
}
@media (max-width: 359px) {
  .use-nav { padding-inline: 16px; }
  .use-cases-page .use-nav-download { padding-inline: 12px; }
  .use-audiences h2 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .use-cases-page .use-nav-download, .use-nav::before { transition: none; }
}