/* Shared tool first-screen presentation. Copy and editor behavior remain page-owned. */
body.unified-tool-hero .tool-first-screen {
  background: radial-gradient(ellipse at 50% 20%, #286d53 0%, #19513f 62%, #144735 100%);
  color: #f4faf6;
  font-family: Arial, Helvetica, sans-serif;
  justify-content: flex-start;
  min-height: calc(100svh - 72px);
  padding-block: clamp(24px, 3svh, 36px) 24px;
}
/* Separate document hero/editor sections use the same container and rhythm. */
body.unified-tool-hero #home.word-hero { width: 100%; margin-inline: auto; text-align: center; }
body.unified-tool-hero #home.word-hero h1 { margin: 0; }
body.unified-tool-hero #editor.word-editor {
  width: 100%; max-width: 1200px; box-sizing: border-box;
  margin: 28px auto 0 !important; padding: 0 32px !important;
}
.unified-tool-hero #home .rt-auto-benefits { justify-content: center; margin-top: 16px; }
.unified-tool-hero #home .rt-auto-benefits li {
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 13px;
  background: #e8f5ef;
  border-color: #baded0;
  color: #005442;
}
.unified-tool-hero .word-sample-links {
  margin: 20px auto 0; padding: 0; border: 0; gap: 12px;
}
.unified-tool-hero .word-sample-links > span { color: #e2f1e8; text-transform: none; font-size: 15px; letter-spacing: 0; }
.unified-tool-hero .word-sample-links button {
  min-height: 44px; padding: 9px 25px; border: 1px solid #adccbb;
  border-radius: 999px; background: transparent; color: #f1faf5; font-size: 15px;
}
.unified-tool-hero .word-sample-links button:hover { background: #ffffff12; border-color: #e1f7e8; }
.unified-tool-hero .word-sample-links button:focus-visible { outline: 3px solid #9ce7b1; outline-offset: 4px; }
/* GIF retains its own input and animation editor. Only its empty view changes. */
html[data-editor-mode=gif] body.unified-tool-hero #editor:has(#upload-zone:not([hidden])) {
  padding: 20px 28px 16px; border-radius: 24px; background: white;
  border: 1px solid #d9e8df; box-shadow: 0 18px 48px #00190f26;
}
html[data-editor-mode=gif] body.unified-tool-hero #editor:has(#upload-zone:not([hidden])) .dropzone {
  height: auto; min-height: 0; max-height: none; aspect-ratio: auto;
  border: 0; box-shadow: none; background: white; overflow: visible;
}
html[data-editor-mode=gif] body.unified-tool-hero #editor #upload-zone {
  position: relative; inset: auto; width: 100%; height: auto;
  display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 0;
  border: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;
}
html[data-editor-mode=gif] .unified-tool-hero #editor #upload-zone[hidden] { display: none; }
html[data-editor-mode=gif] .unified-tool-hero #editor .upload-icon { display: none; }
html[data-editor-mode=gif] .unified-tool-hero #editor #upload-zone::before { order: 0; }
html[data-editor-mode=gif] .unified-tool-hero #editor #upload-zone strong { order: 1; }
html[data-editor-mode=gif] .unified-tool-hero #editor #upload-zone small {
  order: 2; font-size: 16px; line-height: 1.5; color: #718179;
}
html[data-editor-mode=gif] .unified-tool-hero #editor #upload-zone > span:not(.upload-icon) {
  order: 3; margin-top: 28px; min-height: 58px; min-width: 280px;
  box-sizing: border-box; padding: 16px 24px; border-radius: 12px;
  background: linear-gradient(110deg, #12ad49, #079e43); color: white;
  font-size: 20px; font-weight: 700;
}
html[data-editor-mode=gif] .unified-tool-hero #editor .gif-upload-footer { margin-top: 16px; }
@media(max-width:767px) {
  body.unified-tool-hero #editor.word-editor { margin-top: 24px !important; padding-inline: 16px !important; }
  .unified-tool-hero .word-sample-links { margin-top: 20px; gap: 10px; }
  .unified-tool-hero .word-sample-links > span { font-size: 14px; }
  .unified-tool-hero .word-sample-links button { padding: 9px 16px; font-size: 13px; }
  html[data-editor-mode=gif] body.unified-tool-hero #editor:has(#upload-zone:not([hidden])) { padding: 14px 14px 16px; border-radius: 20px; }
  html[data-editor-mode=gif] body.unified-tool-hero #editor #upload-zone { padding: 18px 10px 0; gap: 10px; }
  html[data-editor-mode=gif] .unified-tool-hero #editor #upload-zone small { font-size: 13px; }
  html[data-editor-mode=gif] .unified-tool-hero #editor #upload-zone > span:not(.upload-icon) { min-width: 0; max-width: 100%; min-height: 52px; padding: 14px 20px; font-size: 17px; }
}
.unified-tool-hero main :is(#home #editor, #home + #editor)::before { content: none; }
body.unified-tool-hero.compact-tool-page #home {
  max-width: 1200px;
  padding: 0 32px !important;
}
.unified-tool-hero #home h1 {
  font-family: "Roboto Slab", Georgia, serif;
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -1.8px;
  color: #f7fcf9;
  text-wrap: balance;
}
body.unified-tool-hero #home h1 + :is(.home-hero-tagline, .rt-hero-subtitle) {
  font-family: "Roboto Slab", Georgia, serif;
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 600;
  font-style: normal;
  line-height: 1.3;
  color: #9ce7b1;
  margin: 12px auto 0;
}
body.unified-tool-hero :is(#home > .text-center > p, #home.word-hero > p):not(.home-hero-tagline, .rt-hero-subtitle, .word-eyebrow) {
  font-family: "Roboto Slab", Georgia, serif;
  max-width: 880px;
  margin: 18px auto 0;
  font-size: 20px;
  line-height: 1.6;
  color: #dfede5;
  text-wrap: pretty;
}
body.unified-tool-hero #home #editor { margin-top: 28px; }
body.unified-tool-hero #editor #upload-view {
  border: 1px solid #d9e8df;
  border-radius: 24px;
  padding: 20px 28px 16px;
  background: #fff;
  box-shadow: 0 18px 48px #00190f26;
}
body.unified-tool-hero #editor :is(.wm-upload, .upload-zone) {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 8px;
  padding: 18px 18px 0;
  border-radius: 16px;
  background: #fff;
  isolation: isolate;
}
/* The same accessible upload button contains both the drop surface and CTA. */
.unified-tool-hero #editor :is(.wm-upload, .upload-zone)::after {
  content: '';
  position: absolute;
  inset: 0 0 86px;
  z-index: -1;
  border: 2px dashed #b4c7bd;
  border-radius: 16px;
  pointer-events: none;
  transition: border-color .2s, background .2s;
}
.unified-tool-hero #editor :is(.wm-upload, .upload-zone)::before {
  content: '';
  flex-shrink: 0;
  width: 62px;
  height: 54px;
  margin-bottom: 2px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 64' fill='none'%3E%3Crect x='6' y='4' width='52' height='46' rx='5' stroke='%2316a05a' stroke-width='4'/%3E%3Ccircle cx='20' cy='18' r='5' fill='%2316a05a'/%3E%3Cpath d='m12 43 13-16 10 10 9-12 10 18' fill='%2334bc71'/%3E%3Ccircle cx='57' cy='46' r='15' fill='%2316a05a' stroke='white' stroke-width='3'/%3E%3Cpath d='M57 38v16m-8-8h16' stroke='white' stroke-width='3'/%3E%3C/svg%3E");
}
body.unified-tool-hero .tool-first-screen > nav[aria-label="Breadcrumb"] {
  max-width: none; width: 100%; box-sizing: border-box;
  padding-inline: max(24px, calc((100% - 1232px) / 2));
  padding-block: 8px 0; margin: 0;
  background: transparent; color: #dfede5; font-size: 12px;
}
body.unified-tool-hero .tool-first-screen > nav[aria-label="Breadcrumb"] :is(a, .text-foreground) { color: #dfede5; }
body.unified-tool-hero .tool-first-screen:has(> nav[aria-label="Breadcrumb"]) { padding-top: 0; }
body.unified-tool-hero .tool-first-screen:has(> nav[aria-label="Breadcrumb"]) > #home {
  margin-top: clamp(24px, 3svh, 36px) !important;
}
body.unified-tool-hero #home .scenario-sample { margin-top: 20px; }
html[data-editor-mode=gif] .unified-tool-hero #editor > .card-soft { color: #22252a; }
body.unified-tool-hero #editor :is(.wm-upload, .upload-zone) strong {
  max-width: none;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: #163f30;
}
body.unified-tool-hero #editor :is(.wm-upload, .upload-zone) > span { font-size: 16px; color: #718179; line-height: 1.5; }
.unified-tool-hero #editor .wm-formats { gap: 8px; }
body.unified-tool-hero #editor .wm-formats b {
  padding: 4px 13px;
  background: #e5f7e9;
  color: #15904c;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
body.unified-tool-hero #editor :is(.wm-upload, .upload-zone) .wm-upload-cta {
  justify-content: center;
  min-width: 280px;
  min-height: 58px;
  box-sizing: border-box;
  padding: 14px 32px;
  margin-top: 28px;
  border-radius: 12px;
  background: #006b57;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  box-shadow: 0 4px 10px #006b5720;
}
.unified-tool-hero #editor :is(.wm-upload, .upload-zone):is(:hover, .dragging)::after { border-color: #19a45c; background: #f5fcf7; }
.unified-tool-hero #editor :is(.wm-upload, .upload-zone):hover .wm-upload-cta { background: #005442; }
body.unified-tool-hero #editor .editor-upload-meta {
  border: 0;
  margin: 16px 0 0;
  padding: 0;
  gap: 12px 26px;
  color: #234b39;
  font-size: 13px;
  font-weight: 600;
}
.unified-tool-hero #editor .editor-upload-meta li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
}
.unified-tool-hero #editor .editor-upload-meta li::before {
  content: '✓';
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #d4f5dd;
  color: #15a150;
  font-size: 16px;
  transform: none;
}
body.unified-tool-hero #editor .editor-upload-meta + .wm-legal {
  margin: 14px auto 0;
  padding: 0;
  font-size: 11px;
  line-height: 1.6;
  color: #6c7c73;
}
body.unified-tool-hero #home .tool-footer { margin-top: 20px; }
body.unified-tool-hero #home :is(.tool-samples, .scenario-sample) { margin: 0 auto; gap: 12px; }
body.unified-tool-hero #home :is(.tool-samples, .scenario-sample) > span {
  color: #e2f1e8;
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
}
body.unified-tool-hero #home :is(.tool-samples, .scenario-sample) button {
  min-height: 44px;
  padding: 9px 25px;
  border: 1px solid #adccbb;
  border-radius: 999px;
  background: transparent;
  color: #f1faf5;
  font-size: 15px;
}
.unified-tool-hero #home :is(.tool-samples, .scenario-sample) button:hover { background: #ffffff12; border-color: #e1f7e8; }
.unified-tool-hero #home :is(.tool-samples, .scenario-sample) button:focus-visible { outline: 3px solid #9ce7b1; outline-offset: 4px; }
body.unified-tool-hero #tool-payment-assurance {
  max-width: 1136px;
  width: calc(100% - 64px);
  padding: 22px 0 0 !important;
}
.unified-tool-hero #tool-payment-assurance .pricing-customer-proof { gap: 16px; }
.unified-tool-hero #tool-payment-assurance .pricing-customer-proof p {
  background: none;
  color: #e0eee5;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
}
.unified-tool-hero #tool-payment-assurance .pricing-assurance-items {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #ffffff26;
  gap: 16px 36px;
  color: #e2ede6;
  font-size: 14px;
}
@media(max-width:767px) {
  body.unified-tool-hero .tool-first-screen { padding-block: 24px; }
  body.unified-tool-hero.compact-tool-page #home { padding-inline: 16px !important; }
  .unified-tool-hero #home h1 { font-size: clamp(30px, 7.8vw, 44px); letter-spacing: -.9px; }
  body.unified-tool-hero #home h1 + :is(.home-hero-tagline, .rt-hero-subtitle) { font-size: 21px; margin-top: 12px; }
  body.unified-tool-hero :is(#home > .text-center > p, #home.word-hero > p):not(.home-hero-tagline, .rt-hero-subtitle, .word-eyebrow) { font-size: 20px; line-height: 1.6; margin-top: 14px; }
  body.unified-tool-hero #home #editor { margin-top: 24px; }
  body.unified-tool-hero #editor #upload-view { padding: 14px 14px 16px; border-radius: 20px; }
  body.unified-tool-hero #editor :is(.wm-upload, .upload-zone) { padding: 18px 10px 0; gap: 10px; }
  .unified-tool-hero #editor :is(.wm-upload, .upload-zone)::before { width: 54px; height: 48px; }
  .unified-tool-hero #editor :is(.wm-upload, .upload-zone)::after { bottom: 78px; }
  body.unified-tool-hero #editor :is(.wm-upload, .upload-zone) strong { max-width: 320px; font-size: 18px; line-height: 1.4; }
  body.unified-tool-hero #editor :is(.wm-upload, .upload-zone) > span { font-size: 13px; }
  body.unified-tool-hero #editor .wm-formats { gap: 5px; font-size: 12px; }
  body.unified-tool-hero #editor .wm-formats b { padding: 3px 8px; font-size: 11px; }
  body.unified-tool-hero #editor :is(.wm-upload, .upload-zone) .wm-upload-cta { min-width: 0; width: min(100%, 280px); min-height: 52px; font-size: 19px; padding: 12px 20px; margin-top: 28px; }
  body.unified-tool-hero #editor .editor-upload-meta { display: grid; grid-template-columns: auto auto; justify-items: start; gap: 10px 16px; margin: 18px auto 0; width: fit-content; max-width: 100%; font-size: 12px; text-align: left; }
  .unified-tool-hero #editor .editor-upload-meta li:nth-child(n+3) { grid-column: 1 / -1; }
  .unified-tool-hero #editor .editor-upload-meta li { justify-content: flex-start; }
  body.unified-tool-hero #home :is(.tool-samples, .scenario-sample) { gap: 10px; }
  body.unified-tool-hero #home :is(.tool-samples, .scenario-sample) > span { flex-basis: 100%; font-size: 14px; }
  body.unified-tool-hero #home :is(.tool-samples, .scenario-sample) button { padding: 9px 16px; font-size: 13px; }
  body.unified-tool-hero #tool-payment-assurance { width: calc(100% - 40px); padding-top: 24px !important; }
  .unified-tool-hero #tool-payment-assurance .pricing-customer-proof { flex-direction: column; gap: 12px; }
  .unified-tool-hero #tool-payment-assurance .pricing-customer-proof p { font-size: 14px; line-height: 1.6; max-width: 340px; }
  .unified-tool-hero #tool-payment-assurance .pricing-assurance-items { gap: 14px 18px; margin-top: 20px; font-size: 12px; }
}
/* Keep the three sample actions visible; narrow layouts wrap without scrolling. */
body.unified-tool-hero .tool-first-screen :is(#home .tool-samples, #home .scenario-sample, .word-sample-links) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
  padding-block: 4px;
  gap: 12px;
}
body.unified-tool-hero .tool-first-screen :is(#home .tool-samples, #home .scenario-sample, .word-sample-links) > :is(span, button) {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: normal;
}
@media (max-width: 767px) {
  body.unified-tool-hero .tool-first-screen :is(#home .tool-samples, #home .scenario-sample, .word-sample-links) > span {
    flex-basis: 100%;
    text-align: center;
  }
}
body.unified-tool-hero .tool-first-screen :is(#home .tool-samples, #home .scenario-sample, .word-sample-links) button:hover {
  background: #ffffff12;
  color: #f1faf5;
  border-color: #e1f7e8;
}