/* Approved before/after hero. Static HTML and CSS; homepage only. */
.home-hero-copy h1 { font-size: clamp(36px, 3.5vw, 48px); }
.home-hero-copy h1 span { display: block; margin-top: 8px; }
.hero-comparison {
  --hero-border: #d9dcdf;
  --hero-review: #e9ebed;
  --hero-bound: #424a51;
  margin: 0;
  min-width: 0;
  padding: 23px 20px 18px;
  border: 1px solid #d6d8da;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px -34px #18202866;
}
.hero-comparison-shared { margin-bottom: 24px; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.5; }
.hero-comparison-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hero-comparison-column { min-width: 0; display: flex; flex-direction: column; }
.hero-comparison-title { margin-bottom: 18px; font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.hero-work-stack { min-height: 308px; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.hero-work-label { margin-bottom: 9px; font-size: 12px; line-height: 1.5; font-weight: 500; color: var(--ink); }
.hero-manual-work { flex: 0 0 auto; padding: 12px; background: var(--hero-review); border-radius: 5px; }
.hero-outputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.hero-output { display: block; position: relative; height: 29px; border: 1px solid var(--hero-border); border-radius: 3px; background: #fff; }
.hero-output::before, .hero-output::after { content: ''; position: absolute; left: 7px; height: 2px; background: var(--hero-border); }
.hero-output::before { right: 7px; top: 8px; }
.hero-output::after { right: 13px; top: 15px; }
.hero-automated-work { flex: 1; display: flex; flex-direction: column; padding: 12px; border-radius: 5px; }
.hero-unbounded-work { border: 1px dashed var(--hero-border); }
.hero-unknown-risk { margin-top: auto; padding-top: 11px; font-size: 12px; line-height: 1.45; }
.hero-bounded-work { border: 1.5px solid var(--hero-bound); }
.hero-bounded-work .hero-outputs { margin-bottom: 13px; }
.hero-risk-guarantee { margin-top: auto; padding-top: 11px; border-top: 1px solid var(--hero-border); font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.hero-risk-guarantee a { text-decoration: underline; text-decoration-color: #b2b8bd; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hero-risk-guarantee a:hover { text-decoration-color: currentColor; }
@media (max-width: 980px) and (min-width: 761px) {
  .home-hero-grid { grid-template-columns: 1fr 1.1fr; gap: 28px; }
  .home-hero-copy h1 { font-size: 40px; }
  .hero-comparison { padding-inline: 14px; }
  .hero-comparison-columns { gap: 12px; }
  .hero-manual-work, .hero-automated-work { padding: 10px; }
}
@media (max-width: 760px) {
  .home-hero-copy h1 { font-size: 40px; }
  .hero-comparison { width: 100%; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 430px) {
  .home-hero-copy h1 { font-size: 37px; }
  .hero-comparison { padding: 19px 11px 15px; }
  .hero-comparison-columns { gap: 10px; }
  .hero-comparison-title { min-height: 38px; margin-bottom: 10px; }
  .hero-manual-work, .hero-automated-work { padding: 9px 7px; }
  .hero-outputs { gap: 5px; }
  .hero-work-stack { min-height: 332px; }
}