/* Format illustrations are schematic, never a preview of a user's document. */
.hero { display: grid; gap: 18px; margin: 18px 18px 24px; padding: 24px 22px 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); overflow: hidden; }
.hero-copy { min-width: 0; }
.hero-tag { display: inline-flex; margin-bottom: 17px; padding: 0; border: 0; border-radius: 0; color: var(--muted); background: transparent; font-size: 11px; font-weight: 600; }
.hero h1 { margin: 0; font-size: 35px; line-height: 1.1; letter-spacing: -.045em; font-weight: 750; }
.hero-title-secondary { color: var(--muted); }
.hero-copy > p { max-width: 330px; margin: 15px 0 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.hero-action { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; max-width: 100%; padding: 12px 16px; border: 0; border-radius: 11px; background: var(--action); color: var(--on-action); font-weight: 650; font-size: 12px; cursor: pointer; }
.hero-action svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
.hero-action:hover svg { transform: translateX(3px); }
.format-scene { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr); align-items: center; gap: 4px; min-width: 0; margin: 0; padding: 24px 6px 14px; border-radius: 16px; background: var(--scene); }
.scene-document { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 13px; }
.paper-sheet { --file-color: #d43e38; position: relative; width: 104px; height: 140px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: 0 8px 16px #15264e0b; }
.paper-sheet[data-format="DOCX"], .flow-document[data-format="DOCX"], .flow-document[data-format="DOC"], .flow-document[data-format="WORD"] { --file-color: #3068db; }
.flow-document[data-format="XLSX"], .flow-document[data-format="XLS"], .flow-document[data-format="EXCEL"] { --file-color: #178250; }
.flow-document[data-format="PPTX"], .flow-document[data-format="PPT"] { --file-color: #c3542a; }
.flow-document[data-format="JPG"], .flow-document[data-format="PNG"], .flow-document[data-format="IMAGE"], .flow-document[data-format="ZIP"] { --file-color: #926b1c; }
.flow-document .paper-sheet { --file-color: inherit; }
.scene-pdf .paper-sheet { transform: rotate(-7deg); }
.scene-word .paper-sheet { transform: rotate(7deg); }
.paper-fold { position: absolute; right: -1px; top: -1px; width: 25px; height: 25px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 0 9px 0 7px; background: var(--scene); clip-path: polygon(0 0,100% 100%,0 100%); }
.paper-format { position: absolute; top: 20px; left: -9px; display: grid; place-items: center; min-width: 49px; max-width: 95%; height: 25px; padding: 0 8px; border-radius: 5px; background: var(--file-color); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.paper-content { display: grid; gap: 6px; position: absolute; inset: 59px 13px 13px; align-content: start; overflow: hidden; }
.paper-content i { display: block; height: 4px; border-radius: 2px; background: var(--paper-line); }
.paper-content .paper-headline { width: 60%; height: 6px; background: var(--file-color); opacity: .6; }
.paper-content .short { width: 65%; }
.paper-table { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin: 2px 0; }
.paper-table b { height: 8px; background: var(--paper-line); border-radius: 1px; }
.paper-selection { position: relative; display: grid; gap: 5px; margin: 0 -3px; padding: 4px 3px; border: 1px solid #759df4; border-radius: 2px; background: var(--brand-soft); }
.paper-selection i { background: #7b9fdc; }
.paper-caret { position: absolute; right: 6px; bottom: 3px; height: 10px; width: 1px; background: var(--brand); }
.paper-edit { position: absolute; right: -13px; bottom: -8px; display: grid; place-items: center; width: 33px; height: 33px; border: 3px solid var(--scene); border-radius: 10px; color: #fff; background: #3068db; }
.paper-edit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.scene-connector { display: grid; place-items: center; align-self: center; margin-top: -34px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--brand); }
.scene-connector svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.scene-caption { color: var(--muted); font-size: 11px; font-weight: 600; }
.format-scene figcaption { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: 10px; color: var(--muted); font-size: 10px; }
.example-label { opacity: .9; }
.format-scene figcaption > span + span { color: var(--brand); }
.catalog-heading { display: flex; flex-direction: column; gap: 14px; margin: 28px 18px 0; }
.catalog-heading h2 { margin: 0; color: var(--ink); font-size: 20px; font-weight: 750; letter-spacing: -.025em; }
.catalog-heading .search { width: 100%; margin: 0; }
.conversion-flow { margin: 0 0 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.flow-files { display: grid; grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr); gap: 5px; padding: 19px 14px 17px; }
.flow-document { --file-color: #d43e38; display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.flow-label { margin-bottom: 17px; color: var(--muted); font-size: 11px; font-weight: 550; }
.flow-document .paper-sheet { width: 98px; height: 128px; margin-bottom: 14px; }
.flow-document .paper-fold { background: var(--surface); }
.flow-document .paper-content { inset: 56px 12px 12px; }
.flow-filename { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: 100%; min-width: 0; overflow: hidden; overflow-wrap: anywhere; color: var(--ink); font-size: 12px; font-weight: 650; line-height: 1.5; }
.flow-meta { display: block; max-width: 100%; margin-top: 4px; overflow-wrap: anywhere; color: var(--muted); font-size: 10px; line-height: 1.5; }
.flow-connector { position: relative; display: flex; align-items: center; justify-content: center; align-self: start; height: 128px; margin-top: 34px; }
.flow-path { position: absolute; inset: 50% -10px auto; height: 1px; background: var(--line); }
.flow-arrow { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; color: var(--brand); background: var(--surface); }
.flow-arrow svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.flow-target .paper-sheet { border-style: dashed; box-shadow: none; }
.flow-target .paper-content { opacity: .45; }
.flow-check { display: none; position: absolute; bottom: -9px; right: -8px; place-items: center; width: 29px; height: 29px; border: 3px solid var(--surface); border-radius: 50%; background: var(--success-bg); color: var(--success); }
.flow-check svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flow-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--canvas); }
.flow-bottom p { margin: 0; flex: 1 1 160px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.flow-download { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 9px 12px; border: 0; border-radius: 9px; background: var(--action); color: var(--on-action); font-size: 12px; font-weight: 650; cursor: pointer; }
.flow-download svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-state="processing"] .flow-arrow { color: var(--on-action); border-color: var(--action); background: var(--action); }
[data-state="processing"] .flow-arrow::after { content: ""; position: absolute; inset: -5px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin 1s linear infinite; }
[data-state="processing"] .flow-target .paper-content { animation: processing-paper 1.7s ease-in-out infinite; }
[data-state="success"] .flow-target .paper-sheet { border-style: solid; border-color: var(--brand); }
[data-state="success"] .flow-target .paper-content { opacity: 1; }
[data-state="success"] .flow-check { display: grid; }
[data-state="success"] .flow-bottom p { color: var(--success); }
[data-state="error"] .flow-bottom { background: var(--danger-bg); }
[data-state="error"] .flow-bottom p { color: var(--danger); }
/* Editing needs the real page, not a second large diagram above it. */
.conversion-flow:is([data-tool="sign-pdf"],[data-tool="edit-pdf"]) .flow-files { padding:12px 14px; grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr); gap:8px; }
.conversion-flow:is([data-tool="sign-pdf"],[data-tool="edit-pdf"]) .flow-document .paper-sheet { display:none; }
.conversion-flow:is([data-tool="sign-pdf"],[data-tool="edit-pdf"]) .flow-label { margin-bottom:6px; }
.conversion-flow:is([data-tool="sign-pdf"],[data-tool="edit-pdf"]) .flow-connector { height:40px; margin-top:14px; }
.conversion-flow:is([data-tool="sign-pdf"],[data-tool="edit-pdf"]) .flow-arrow { width:26px; height:26px; }
@keyframes processing-paper { 0%,100% { opacity: .25; } 50% { opacity: .7; } }
/* The full-page extension and website share the same spacious layout. */
@media(min-width:720px) {
  .tab-mode .shell { width:min(1240px,100%); max-width:1240px; }
  .tab-mode .topbar { padding:22px 30px; gap:12px; background:var(--canvas); }
  .tab-mode .brand-mark { width:38px; height:42px; border-radius:12px; }
  .tab-mode .brand-copy strong { font-size:21px; }
  .tab-mode .brand-copy span { display:block; font-size:11px; }
  .tab-mode .header-actions { gap:9px; }
  .tab-mode .header-actions .account-toggle { min-height:38px; padding:8px 16px; font-size:12px; }
  .tab-mode .language-select { width:120px; font-size:12px; }
  .tab-mode .account-toolbar { padding:12px 30px 0; }
  .tab-mode .account-toolbar button { font-size:12px; }
  .tab-mode .hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; align-items:center; margin:24px 30px 30px; padding:36px; border-radius:24px; }
  .tab-mode .hero h1 { font-size:clamp(36px,4.5vw,56px); line-height:1.08; max-width:510px; }
  .tab-mode .hero-copy > p { margin:20px 0 25px; font-size:15px; max-width:365px; line-height:1.7; }
  .tab-mode .hero-tag { font-size:12px; margin-bottom:22px; }
  .tab-mode .hero-action { min-height:48px; padding:12px 19px; font-size:13px; }
  .tab-mode .format-scene { min-height:310px; grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr); padding:30px 14px 20px; gap:5px; border-radius:18px; }
  .tab-mode .format-scene .paper-sheet { width:130px; height:175px; }
  .tab-mode .format-scene .paper-format { top:25px; height:30px; min-width:61px; font-size:13px; }
  .tab-mode .format-scene .paper-content { inset:73px 17px 15px; gap:8px; }
  .tab-mode .format-scene .paper-content i { height:5px; }
  .tab-mode .format-scene .paper-content .paper-headline { height:7px; }
  .tab-mode .format-scene .paper-table b { height:11px; }
  .tab-mode .format-scene .paper-selection { gap:7px; padding:6px 3px; }
  .tab-mode .scene-caption { font-size:12px; }
  .tab-mode .format-scene figcaption { margin-top:18px; font-size:11px; }
  .tab-mode .guest-welcome { display:flex; align-items:center; gap:24px; max-width:none; width:auto; margin:0 30px 25px; padding:15px 20px; }
  .tab-mode .guest-welcome > div { flex:1; }
  .tab-mode .guest-welcome h2 { font-size:13px; margin-bottom:3px; }
  .tab-mode .guest-welcome p { margin:0; font-size:12px; }
  .tab-mode .guest-welcome .guest-action { width:auto; flex:0 0 auto; }
  .tab-mode .catalog-heading { flex-direction:row; align-items:center; justify-content:space-between; gap:24px; margin:32px 30px 0; }
  .tab-mode .catalog-heading h2 { font-size:25px; }
  .tab-mode .catalog-heading .search { width:290px; margin:0; }
  .tab-mode .filters { padding:18px 30px; gap:7px; }
  .tab-mode .filter { font-size:12px; padding:7px 13px; }
  .tab-mode .tools { grid-template-columns:repeat(3,minmax(0,1fr)); padding:0 30px 40px; gap:14px; }
  .tab-mode .tool-card { min-height:112px; flex-direction:row; align-items:center; gap:15px; padding:22px 24px 22px 20px; border-radius:15px; }
  .tab-mode .tool-copy { margin-top:0; }
  .tab-mode .tool-copy strong { font-size:14px; }
  .tab-mode .tool-copy > span { font-size:12px; }
  .tab-mode .tool-icon { width:42px; height:46px; border-radius:10px; }
  .tab-mode .tool-chevron { right:10px; top:calc(50% - 10px); font-size:18px; }
  .tab-mode .workspace { width:min(880px,100%); margin:0 auto; padding:24px 30px 40px; }
  .tab-mode .workspace-heading { margin:24px 0; }
  .tab-mode .workspace-heading h2 { font-size:34px; }
  .tab-mode .workspace-heading > div:last-child > p:last-child { font-size:14px; }
  .tab-mode .conversion-flow { border-radius:20px; margin-bottom:20px; }
  .tab-mode .flow-files { grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr); gap:10px; padding:26px 30px 22px; }
  .tab-mode .flow-document .paper-sheet { width:140px; height:170px; margin-bottom:18px; }
  .tab-mode .flow-label { margin-bottom:20px; font-size:12px; }
  .tab-mode .flow-document .paper-format { height:29px; font-size:13px; top:23px; }
  .tab-mode .flow-document .paper-content { inset:67px 17px 15px; gap:8px; }
  .tab-mode .flow-document .paper-content i { height:5px; }
  .tab-mode .flow-document .paper-table b { height:10px; }
  .tab-mode .flow-connector { height:170px; margin-top:39px; }
  .tab-mode .flow-arrow { width:44px; height:44px; }
  .tab-mode .flow-arrow svg { width:23px; height:23px; }
  .tab-mode .flow-filename { font-size:14px; }
  .tab-mode .flow-meta { font-size:12px; }
  .tab-mode .flow-bottom { padding:16px 22px; }
  .tab-mode .flow-bottom p { font-size:13px; }
  .tab-mode .flow-download { font-size:13px; min-height:40px; }
  .tab-mode .dropzone { min-height:135px; }
  .tab-mode .dropzone strong { font-size:15px; }
  .tab-mode .disclosure { font-size:11px; }
  .tab-mode footer { padding:22px 30px; font-size:12px; background:transparent; }
}
@media(min-width:1080px) {
  .tab-mode .hero { padding:42px; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }
  .tab-mode .format-scene { grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr); padding-inline:28px; }
  .tab-mode .format-scene .paper-sheet { width:151px; height:200px; }
  .tab-mode .format-scene .paper-content { inset:79px 20px 15px; gap:9px; }
  .tab-mode .scene-connector { width:44px; height:44px; }
  .tab-mode .tool-copy strong { font-size:15px; }
}
@media (prefers-reduced-motion: reduce) { [data-state="processing"] .flow-arrow::after, [data-state="processing"] .flow-target .paper-content { animation: none; } }
/* A popup opens on tools, not a whole landing page to scroll past. */
@media(max-width:719px) {
  .hero { grid-template-columns:minmax(0,1fr) minmax(0,.9fr); align-items:center; gap:13px; padding:20px 16px; }
  .hero h1 { font-size:25px; line-height:1.16; letter-spacing:-.04em; }
  .hero-title-secondary { font-size:22px; }
  .hero-tag { font-size:10px; margin-bottom:10px; line-height:1.5; }
  .hero-copy > p { display:none; }
  .hero-action { min-height:37px; margin-top:16px; padding:9px 10px; gap:6px; font-size:10px; line-height:1.5; border-radius:9px; }
  .hero-action svg { width:14px; height:14px; }
  .format-scene { grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); gap:2px; padding:20px 5px 12px; border-radius:11px; }
  .format-scene .paper-sheet { width:clamp(56px,14vw,92px); height:auto; aspect-ratio:3/4; border-radius:6px; }
  .format-scene .paper-format { min-width:0; height:18px; padding:0 4px; top:14px; left:-5px; font-size:9px; border-radius:3px; }
  .format-scene .paper-fold { width:17px; height:17px; }
  .format-scene .paper-content { inset:41px 7px 6px; gap:3px; }
  .format-scene .paper-content i { height:2px; }
  .format-scene .paper-content .paper-headline { height:3px; }
  .format-scene .paper-table { gap:1px; margin:0; }
  .format-scene .paper-table b { height:4px; }
  .format-scene .paper-selection { padding:2px 3px; gap:3px; }
  .format-scene .paper-caret { height:7px; }
  .format-scene .paper-edit { width:23px; height:23px; right:-8px; bottom:-6px; border-width:2px; border-radius:7px; }
  .format-scene .paper-edit svg { width:15px; height:15px; }
  .scene-document { gap:10px; }
  .scene-caption { font-size:9px; }
  .scene-connector { width:20px; height:20px; margin-top:-22px; }
  .scene-connector svg { width:13px; height:13px; }
  .format-scene figcaption { margin-top:9px; font-size:9px; text-align:center; }
  .format-scene figcaption > span + span { display:none; }
  .catalog-heading { margin-top:24px; }
}
@media (max-width: 360px) { .hero { padding:16px 12px; margin-inline:14px; gap:8px; } .hero h1 { font-size:22px; } .hero-title-secondary { font-size:19px; } .format-scene { grid-template-columns:minmax(0,1fr) 17px minmax(0,1fr); padding-inline:2px; } .format-scene .paper-sheet { width:48px; } .scene-connector { width:17px; height:17px; } .flow-files { padding-inline:9px; grid-template-columns:minmax(0,1fr) 25px minmax(0,1fr); gap:2px; } .flow-document .paper-sheet { width:88px; } }