/* Frames belong to the site; the screenshots remain unmodified app captures. */
.hero-software { min-width: 0; padding-block: 15px; }
.software-stage { position: relative; isolation: isolate; }
.software-shot { position: relative; margin: 0; min-width: 0; }
.software-image { display: block; overflow: hidden; background: #fff; border: 1px solid #a9ba9e; border-radius: 10px; box-shadow: 0 20px 45px #06261f30, 0 2px 4px #06261f20; }
.software-image img { display: block; width: 100%; height: auto; }
.screen-toolbar { min-height: 37px; padding: 9px 15px; display: flex; align-items: center; justify-content: space-between; gap: 15px; background: #f7faf3; border-bottom: 1px solid #d6decf; color: #405638; font-size: 9px; line-height: 1.4; }
.screen-toolbar > span:last-child { font-size: 15px; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { display: block; width: 6px; height: 6px; background: #bbc8b0; border-radius: 50%; }
.window-dots i:first-child { background: #9eaf91; }
.software-shot figcaption { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 17px; color: #36512c; font-size: 10px; line-height: 1.7; }
.stage-home { background: #164c39; border: 1px solid #0a3627; border-radius: 16px; padding: 25px 25px 23px; box-shadow: 0 16px 34px #163e291c; }
.stage-home::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background-image: radial-gradient(#dceaa838 1px, transparent 1px); background-size: 15px 15px; }
.software-kicker { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 27px; color: #deefbd; }
.software-kicker .eyebrow { font-size: 8px; letter-spacing: 1.3px; }
.software-kicker > span:last-child { font-size: 35px; color: #d9ef8c; line-height: 1; }
.stage-home .software-shot { transform: rotate(-2deg); }
.stage-home .software-shot::before { content: ''; position: absolute; inset: 7px -5px 36px 5px; border-radius: 10px; background: #9aba72; border: 1px solid #bad392; transform: rotate(4deg); z-index: -1; }
.stage-home .software-image { padding: 0 9px 9px; background: #f4f4f4; }
.stage-home .screen-toolbar { margin-inline: -9px; margin-bottom: 11px; }
.stage-home .software-image img { border-radius: 5px; }
.stage-home figcaption { color: #edf5df; font-size: 8px; }
.software-note { display: block; color: #d6e5c3; text-align: center; margin-top: 20px; font-size: 10px; line-height: 1.8; }
.product-real-overview { padding-block: 65px; }
.product-real-overview .section-heading > p { max-width: 420px; }
.stage-requests { background: #d8e5c5; border: 1px solid #adc493; border-radius: 14px; padding: 52px 48px 27px; }
.stage-requests::before { content: ''; position: absolute; top: 28px; right: 21px; width: 155px; height: 155px; border: 1px solid #91ae6f; border-radius: 50%; z-index: -1; }
.stage-requests .software-shot { transform: rotate(-1deg); }
.stage-margin-note { position: absolute; left: 48px; top: 18px; font-size: 7px; letter-spacing: 1.8px; color: #3d5c2c; font-weight: 600; }
.templates-showcase { background: #153e32; padding-block: 67px; border-block: 1px solid #062e23; color: white; overflow: hidden; }
.templates-showcase > .wrap { display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: 50px; }
.templates-showcase-copy .eyebrow { color: #d3e8b3; font-size: 8px; }
.templates-showcase h2 { font-size: 44px; }
.templates-showcase .serif-accent { color: #d9ef8c; }
.templates-showcase-copy p { color: #e4eedb; font-size: 14px; line-height: 1.85; max-width: 335px; margin: 22px 0; }
.screen-mode-note { color: #d1e2b6; font-size: 10px; padding-top: 16px; border-top: 1px solid #6b8461; display: inline-block; }
.stage-templates { padding: 18px 8px 18px 0; }
.stage-templates::before { content: ''; position: absolute; inset: 6px -12px 55px 18px; border-radius: 12px; background: #73924b; border: 1px solid #9bb66d; transform: rotate(-4deg); z-index: -1; }
.stage-templates .software-shot { transform: rotate(2deg); }
.stage-templates .software-image { border-color: #516b40; background: #111; box-shadow: 0 25px 40px #061c1b70; }
.stage-templates .screen-toolbar { background: #222a22; color: #e7eedb; border-color: #4a5841; }
.stage-templates .window-dots i { background: #7c9462; }
.stage-templates figcaption { color: #e2efcb; font-size: 9px; }
.editor-showcase { padding-block: 65px 35px; }
.editor-showcase .section-heading > p { max-width: 395px; }
.stage-editor { padding: 36px 38px 25px; border: 1px solid #91aa77; border-radius: 14px; background: #e1edcc; }
.stage-editor::before { content: ''; position: absolute; inset: 20px 23px 52px 23px; background: #bad196; border: 1px solid #9bb87a; border-radius: 9px; transform: rotate(1.5deg); z-index: -1; }
.stage-editor .software-shot { transform: rotate(-.6deg); }
.try-signing-section { display: grid; grid-template-columns: .9fr 1fr; align-items: center; gap: 85px; padding-block: 45px 65px; }
.try-signing-section > div > .eyebrow { color: #3b5f2e; }
.try-signing-section > div > p { font-size: 14px; color: #395635; line-height: 1.9; max-width: 350px; margin-top: 24px; }
.try-signing-section .hero-preview { width: 100%; }
@media (max-width: 1050px) {
  .stage-home { padding: 23px 20px; }
  .software-kicker .eyebrow { font-size: 7px; }
  .stage-home figcaption { flex-wrap: wrap; gap: 4px 12px; }
  .templates-showcase > .wrap { gap: 35px; grid-template-columns: .8fr 1.2fr; }
  .templates-showcase h2 { font-size: 37px; }
  .templates-showcase-copy p { font-size: 13px; }
  .stage-templates figcaption { font-size: 8px; }
  .try-signing-section { gap: 45px; }
}
@media (max-width: 850px) {
  .hero-software { width: min(560px, 100%); justify-self: center; }
  .stage-home { padding: 27px 30px; }
  .software-kicker .eyebrow { font-size: 9px; }
  .stage-home figcaption { font-size: 9px; }
  .stage-requests { padding: 45px 25px 22px; }
  .stage-margin-note { left: 25px; }
  .templates-showcase > .wrap { grid-template-columns: 1fr; gap: 25px; }
  .templates-showcase h2 { font-size: 42px; }
  .templates-showcase-copy p { max-width: 490px; }
  .stage-templates { max-width: 680px; width: 100%; justify-self: center; }
  .stage-templates figcaption { font-size: 10px; }
  .try-signing-section { grid-template-columns: 1fr; gap: 30px; }
  .try-signing-section .hero-preview { max-width: 510px; justify-self: center; }
  .try-signing-section > div > p { max-width: 450px; }
}
@media (max-width: 600px) {
  .hero-software { padding-block: 0; }
  .stage-home { padding: 23px 18px; }
  .software-kicker { margin-bottom: 22px; }
  .software-kicker .eyebrow { font-size: 7px; letter-spacing: 1px; }
  .software-kicker > span:last-child { font-size: 27px; }
  .stage-home .software-image { padding: 0 6px 6px; }
  .stage-home .screen-toolbar { margin-inline: -6px; margin-bottom: 7px; }
  .screen-toolbar { padding: 8px 10px; min-height: 30px; font-size: 8px; gap: 8px; }
  .window-dots { gap: 4px; }
  .window-dots i { width: 4px; height: 4px; }
  .software-shot figcaption { font-size: 8px; margin-top: 12px; gap: 8px; }
  .stage-home figcaption { font-size: 7px; gap: 4px; }
  .software-note { font-size: 9px; margin-top: 17px; }
  .product-real-overview { padding-block: 43px; }
  .stage-requests { padding: 36px 13px 15px; }
  .stage-margin-note { left: 16px; top: 13px; font-size: 6px; letter-spacing: 1px; }
  .stage-requests .software-shot { transform: rotate(-.5deg); }
  .stage-requests::before { width: 90px; height: 90px; right: 6px; }
  .templates-showcase { padding-block: 45px; }
  .templates-showcase h2 { font-size: 37px; }
  .stage-templates { padding-right: 3px; }
  .stage-templates::before { right: -5px; }
  .stage-templates .software-shot { transform: rotate(1deg); }
  .editor-showcase { padding-block: 43px 15px; }
  .stage-editor { padding: 20px 13px 15px; }
  .stage-editor::before { inset: 12px 9px 37px 9px; }
  .try-signing-section { padding-block: 25px 43px; }
  .try-signing-section > div > p { font-size: 13px; }
}