/* Shared first screen for image, document, GIF and scenario tools.
   Natural flow is intentional: long copy, zoom and mobile may scroll.
   Loaded editor dimensions and controls remain component-owned. */
.compact-tool-page .tool-first-screen {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - 72px);
  padding-block: clamp(24px, 4svh, 56px) 32px;
}
.compact-tool-page main:has(> nav[aria-label="Breadcrumb"]) .tool-first-screen {
  min-height: calc(100svh - 96px);
}
.compact-tool-page .tool-first-screen > * { flex-shrink: 0; }
.compact-tool-page .tool-first-screen > :is(#home, #editor) { width: 100%; }
@media(max-width:767px) {
  .compact-tool-page .tool-first-screen {
    min-height: 0;
    padding-block: 0 24px;
  }
  .compact-tool-page main:has(> nav[aria-label="Breadcrumb"]) .tool-first-screen { min-height: 0; }
}
body.compact-tool-page #home {
  padding-block: 16px 8px !important;
  margin-block: 0 !important;
}
.compact-tool-page #home h1 {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.15;
  letter-spacing: -1px;
  margin: 0;
}
body.compact-tool-page #home h1 + :is(.home-hero-tagline, .rt-hero-subtitle) {
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.3;
  margin: 8px auto 0;
  max-width: 1000px;
}
.compact-tool-page .site-header .site-header-inner { min-height: 72px; padding-block: 12px; }
.compact-tool-page #home .rt-auto-benefits { margin: 10px 0 0; gap: 8px 12px; }
.compact-tool-page #home .rt-auto-benefits li { padding: 4px 10px; font-size: 12px; }
.compact-tool-page #home > .text-center > p:not(.home-hero-tagline, .rt-hero-subtitle),
.compact-tool-page #home.word-hero > p:not(.word-eyebrow, .rt-hero-subtitle) {
  font-size: 16px;
  line-height: 1.5;
  max-width: 880px;
  margin: 10px auto 0;
}
.compact-tool-page main > nav[aria-label="Breadcrumb"] {
  padding-block: 8px 0;
  font-size: 12px;
}
.compact-tool-page #home #editor { margin-top: 22px; }
body.compact-tool-page #editor.word-editor {
  padding-block: 10px 12px !important;
  margin-block: 0 !important;
}
.compact-tool-page #editor #upload-view {
  background: #fff;
  border: 1px solid #d4e2da;
  border-radius: 22px;
  padding: 8px 20px 14px;
  box-shadow: 0 12px 28px -20px #03181330;
}
body.compact-tool-page #editor .wm-upload {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: center;
  box-sizing: border-box;
  min-height: 178px;
  padding: 20px 12px;
  gap: 12px;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
}
.compact-tool-page #editor .wm-upload > :is(strong, .wm-upload-cta) { grid-column: 1 / -1; justify-self: center; }
body.compact-tool-page #editor #upload-zone { box-shadow: none; }
.compact-tool-page #editor .wm-upload strong { font-size: 23px; line-height: 1.35; }
.compact-tool-page #editor .wm-upload > span { font-size: 15px; line-height: 1.5; }
.compact-tool-page #editor .wm-formats { gap: 6px; }
.compact-tool-page #editor .wm-formats b { font-size: 12px; padding: 3px 8px; }
.compact-tool-page #editor .wm-upload .wm-upload-cta { font-size: 19px; padding: 12px 28px; }
.compact-tool-page #editor .editor-upload-meta {
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid #e7ece9;
  gap: 8px 16px;
  font-size: 12px;
  line-height: 1.5;
}
.compact-tool-page #editor .editor-upload-meta + .wm-legal {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.5;
}
.compact-tool-page #home .tool-footer { margin-top: 14px; padding: 0; }
.compact-tool-page #home :is(.tool-samples, .scenario-sample),
.compact-tool-page .word-sample-links {
  margin: 12px auto 0;
  padding: 0;
  border: 0;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.compact-tool-page #home :is(.tool-samples, .scenario-sample) > span,
.compact-tool-page .word-sample-links > span { font-size: 11px; }
.compact-tool-page #home :is(.tool-samples, .scenario-sample) button,
.compact-tool-page .word-sample-links button {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 13px;
  line-height: 1.5;
}
body.compact-tool-page #tool-payment-assurance {
  padding-block: 12px 20px !important;
  margin-block: 0 !important;
}
.compact-tool-page #tool-payment-assurance .pricing-customer-proof {
  flex-direction: row;
  margin: 0 auto;
}
.compact-tool-page #tool-payment-assurance .payment-proof-avatar { width: 38px; height: 38px; border-width: 2px; }
.compact-tool-page #tool-payment-assurance .payment-proof-avatar + .payment-proof-avatar { margin-left: -12px; }
.compact-tool-page #tool-payment-assurance .pricing-customer-proof p {
  margin: 0 0 0 -4px;
  padding: 10px 18px;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
}
.compact-tool-page #tool-payment-assurance .pricing-assurance-items { margin-top: 10px; gap: 10px 24px; font-size: 14px; }
.compact-tool-page #tool-payment-assurance .pricing-assurance-items svg { width: 19px; height: 19px; }
/* GIF has its own editor; compact only its empty upload state. */
html[data-editor-mode=gif] .compact-tool-page #editor:has(#upload-zone:not([hidden])) {
  background: #fff;
  border: 1px solid #d4e2da;
  border-radius: 22px;
  padding: 8px 20px 14px;
}
html[data-editor-mode=gif] .compact-tool-page #editor:has(#upload-zone:not([hidden])) .dropzone {
  height: 190px;
  min-height: 190px;
  border: 0;
  box-shadow: none;
}
html[data-editor-mode=gif] .compact-tool-page #editor #upload-zone { padding: 16px; }
html[data-editor-mode=gif] .compact-tool-page #editor .upload-icon { margin-bottom: 12px; }
html[data-editor-mode=gif] .compact-tool-page #editor .upload-zone strong { font-size: 23px; }
@media(min-width:768px) and (max-width:1023px) {
  body.compact-tool-page #editor .wm-upload { display: flex; }
}
@media(max-width:767px) {
  body.compact-tool-page #home { padding-block: 20px 12px !important; }
  .compact-tool-page #home h1 { font-size: 30px; letter-spacing: -.6px; }
  .compact-tool-page #home > .text-center > p:not(.home-hero-tagline, .rt-hero-subtitle),
  .compact-tool-page #home.word-hero > p:not(.word-eyebrow, .rt-hero-subtitle) { font-size: 15px; }
  .compact-tool-page #home #editor { margin-top: 20px; }
  .compact-tool-page #editor #upload-view { padding: 8px 12px 14px; }
  body.compact-tool-page #editor .wm-upload { display: flex; min-height: 240px; padding: 16px 4px; }
  .compact-tool-page #editor .wm-upload strong { font-size: 20px; max-width: 280px; }
  .compact-tool-page #editor .wm-upload > span { font-size: 13px; }
  .compact-tool-page #editor .editor-upload-meta { gap: 8px 12px; }
  .compact-tool-page #tool-payment-assurance .pricing-customer-proof { flex-direction: column; gap: 8px; }
  .compact-tool-page #tool-payment-assurance .pricing-customer-proof p { margin: 0; padding: 10px 14px; font-size: 13px; }
  .compact-tool-page #tool-payment-assurance .pricing-assurance-items { flex-direction: row; gap: 10px 16px; font-size: 12px; }
}
/* Use one entry height for GIF and still-image tools; leave loaded views alone. */
body.compact-tool-page #editor { --tool-upload-height: 180px; }
body.compact-tool-page #editor .wm-upload { min-height: var(--tool-upload-height); }
html[data-editor-mode=gif] body.compact-tool-page #editor:has(#upload-zone:not([hidden])) .dropzone {
  height: var(--tool-upload-height);
  min-height: var(--tool-upload-height);
}
@media(max-width:767px) {
  body.compact-tool-page #editor { --tool-upload-height: 280px; }
}
html[data-editor-mode=gif] .gif-upload-footer { font-family: Arial, Helvetica, sans-serif; }
@media(max-width:767px) {
  html[data-editor-mode=gif] body.compact-tool-page #editor:has(#upload-zone:not([hidden])) { padding: 8px 12px 14px; }
}