/* Homepage hero and working converter, composed as an open book. */
body.home-page {
  --book-page: #fffdfa;
  --book-page-border: #efe5db;
  overflow-x: clip;
}

body.home-page .hero {
  padding: clamp(68px, 7.5vw, 112px) 0 0;
  background: #fff;
}
body.home-page .hero-inner { display: block; text-align: center; }
body.home-page .hero-intro {
  display: block;
  min-height: 0;
  margin: 0;
}
body.home-page .hero-copy {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
}
body.home-page .hero-title {
  max-width: none;
  margin: 0;
  color: #171717;
  font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(56px, 5.8vw, 90px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.075em;
  text-wrap: balance;
}
body.home-page .hero-title span {
  color: inherit;
  text-decoration: none;
}
body.home-page .hero-lede {
  max-width: 635px;
  margin: 25px auto 0;
  color: #6f6f72;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
body.home-page .hero-jump,
.hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  margin: 0;
  padding: 0 21px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
body.home-page .hero-jump {
  border: 1px solid #d75b27;
  background: #e86931;
  box-shadow: none;
  color: #fff;
}
body.home-page .hero-jump:hover { background: #c74c1a; color: #fff; transform: translateY(-2px); }
.hero-secondary {
  border: 1px solid #ded9d4;
  background: #fff;
  color: #27231f;
}
.hero-secondary:hover { background: #f8f2eb; color: #27231f; transform: translateY(-2px); }
body.home-page .hero-jump:focus-visible,
.hero-secondary:focus-visible { outline: 3px solid #eea77a; outline-offset: 3px; }

body.home-page .converter-section {
  padding: 45px 0 108px;
  background: #fff;
}
.book-section-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body.home-page .tool-card {
  position: relative;
  isolation: isolate;
  display: block;
  width: min(100%, 1320px);
  max-width: none;
  aspect-ratio: 1386 / 942;
  min-height: 0;
  left: auto;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff url("/images/converter-reference.webp") center / 100% 100% no-repeat;
  box-shadow: none;
  text-align: left;
  scroll-margin-top: 94px;
}
body.home-page .tool-card::before { content: none; }
body.home-page .tool-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 5.77%;
  top: 7.43%;
  width: 36.94%;
  height: 83.23%;
  border: 0;
  border-radius: 28px;
  background: #fffefa;
  box-shadow: none;
}
body.home-page .tool-upload,
body.home-page .tool-results,
body.home-page .tool-foot,
body.home-page .reader-device {
  position: absolute;
  z-index: 1;
  min-width: 0;
}
body.home-page .tool-upload {
  left: 8.8%;
  top: 8.7%;
  width: 30.85%;
  padding: 0;
}
body.home-page .tool-results {
  left: 8.8%;
  top: 72%;
  width: 30.85%;
  margin: 0;
  padding: 0;
}
body.home-page .tool-foot {
  left: 8.8%;
  top: 82%;
  width: 30.85%;
  display: grid;
  grid-template-columns: 8px auto 8px;
  grid-template-rows: auto auto;
  justify-content: start;
  column-gap: 0;
  row-gap: 8px;
  margin: 0;
  padding: 21px 0 0;
  border-top: 1px solid #eee4da;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}
body.home-page .tool-foot > :nth-child(2) { grid-column: 2; }
body.home-page .tool-foot > :nth-child(3) { grid-column: 3; }
body.home-page .tool-foot > :nth-child(4) { grid-column: 1 / -1; }
body.home-page .reader-device {
  left: 51.52%;
  top: 4.14%;
  width: 45.3%;
  height: 91.6%;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.home-page .reader-device::before,
body.home-page .reader-device::after { content: none; }
body.home-page .reader-device .tool-settings {
  position: absolute;
  z-index: 1;
  left: 14.9%;
  top: 3.5%;
  width: 80.4%;
  height: 91%;
  box-sizing: border-box;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #ded5ca transparent;
  margin: 0;
  padding: 20px 24px 18px;
  border: 0;
  border-radius: 5px 20px 20px 5px;
  background: #fffefa;
  box-shadow: none;
}
body.home-page .tool-settings .options { margin: 0; border: 0; }
body.home-page .tool-settings .options summary {
  padding: 0 0 32px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
}
body.home-page .tool-settings .opt-grid { gap: 11px; }
body.home-page .tool-settings #modeField > .lbl { display: none; }
body.home-page .tool-settings .segmented { min-height: 0; }
body.home-page .tool-settings .seg { padding-block: 6px; }
body.home-page .tool-settings .sec { margin-top: 8px; padding-top: 14px; font-size: 10px; }
body.home-page .tool-settings .field input[type="text"],
body.home-page .tool-settings .field select {
  height: 36px;
  border-radius: 11px;
  font-size: 13px;
}
body.home-page .tool-settings .mode-hint { min-height: 0; margin-top: 9px; font-size: 11px; line-height: 1.4; }
body.home-page .tool-settings .cb-title { font-size: 13px; }
body.home-page .tool-settings .cb-note { font-size: 11px; line-height: 1.4; }
body.home-page .tool-settings #translationRow {
  margin-top: 31px;
  padding-top: 18px;
  border-top: 1px solid #eee4da;
}
body.home-page .tool-settings #scannedPagesHeading { margin-top: 38px; }
body.home-page .converter-side-heading { margin: 0 0 25px; }
body.home-page .converter-side-heading .c2e-eyebrow { color: #d54e1b; transform: translateY(-6px); }
body.home-page .converter-side-heading h3 {
  margin: 7px 0 5px;
  color: #2c241f;
  font-size: clamp(26px, 2.3vw, 33px);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.055em;
}
body.home-page .converter-side-heading p { max-width: 29ch; margin: 0; font-size: 15px; line-height: 1.45; }
body.home-page .dropzone {
  height: auto;
  min-height: 0;
  aspect-ratio: 428 / 238;
  gap: 7px;
  padding: 20px 16px;
  border-color: #e9ae87;
  border-radius: 15px;
  background: #fff8f2;
}
body.home-page .dz-icon { width: 34px; height: 34px; color: #e86931; }
body.home-page .dz-title { font-family: var(--font-body); font-size: 24px; font-weight: 700; letter-spacing: -.045em; }
body.home-page .dz-sub { font-size: 13px; }
body.home-page .dz-limit { font-size: 13px; line-height: 1.5; }
body.home-page .model-picker { margin-top: 20px; }
body.home-page .model-picker > .lbl { margin-bottom: 4px; }
body.home-page .model-option { min-height: 64px; }
body.home-page .model-hint { margin-top: 11px; font-size: 12px; line-height: 1.45; }
body.home-page .convert-btn { min-height: 48px; margin: 0; border-radius: 13px; font-size: 16px; }

/* Keep the stacked converter usable on phones and narrow tablet viewports. */
@media (max-width: 1100px) {
  body.home-page .tool-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: 0;
    width: min(100%, 670px);
    aspect-ratio: auto;
    min-height: 0;
    margin: 0 auto;
    padding: 27px;
    border: 2px solid #aa7852;
    border-radius: 43px;
    background:
      radial-gradient(ellipse at 10% 10%, rgb(255 232 202 / 30%), transparent 42%),
      linear-gradient(90deg, #b98458 0%, #c89768 45%, #a26f49 49%, #bba48b 51%, #a87952 100%);
    box-shadow: inset 0 0 0 4px rgb(255 220 178 / 19%), 0 20px 42px rgb(70 43 25 / 14%);
    transform: none;
    left: auto;
    overflow: hidden;
  }
  body.home-page .tool-card::after {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    grid-column: 1;
    grid-row: 1 / 4;
    min-width: 0;
    border: 1px solid var(--book-page-border);
    border-radius: 27px;
    background: var(--book-page);
    box-shadow: 0 2px 11px rgb(71 43 25 / 11%);
  }
  body.home-page .tool-upload,
  body.home-page .tool-results,
  body.home-page .tool-foot,
  body.home-page .reader-device { position: relative; z-index: 1; left: auto; top: auto; width: auto; height: auto; }
  body.home-page .tool-upload { grid-column: 1; grid-row: 1; padding: 30px 30px 0; }
  body.home-page .tool-results { grid-column: 1; grid-row: 2; align-self: end; margin: 0; padding: 24px 30px 0; }
  body.home-page .tool-foot {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    justify-content: flex-start;
    gap: 7px;
    margin: 23px 30px 0;
    padding: 17px 0 27px;
    border-top: 1px solid var(--border-hairline);
  }
  body.home-page .tool-foot > :nth-child(2),
  body.home-page .tool-foot > :nth-child(3),
  body.home-page .tool-foot > :nth-child(4) { grid-column: auto; }
  body.home-page .reader-device {
    grid-column: 1;
    grid-row: 4;
    align-self: stretch;
    display: flex;
    margin-top: 18px;
    padding: 12px 13px 12px 23px;
    border: 2px solid #98948d;
    border-radius: 8px 35px 35px 8px;
    background: linear-gradient(100deg, #ccc8bf 0%, #f3f1e9 8%, #e6e4dc 91%, #aaa69e 100%);
    box-shadow: inset 3px 0 3px rgb(255 255 255 / 75%), inset -3px 0 5px rgb(61 53 45 / 18%), 5px 4px 9px rgb(61 39 25 / 25%);
  }
  body.home-page .reader-device::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 12px;
    width: 4px;
    border-radius: 3px;
    background: linear-gradient(90deg, #969188, #f8f6f0 65%, #bdb8ae);
    box-shadow: 3px 0 3px rgb(47 40 33 / 9%);
  }
  body.home-page .reader-device::after {
    content: "";
    position: absolute;
    top: 39%;
    right: -15px;
    width: 13px;
    height: 59px;
    border: 1px solid #815a3c;
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: linear-gradient(90deg, #a87850, #865d3d);
    box-shadow: 2px 2px 4px rgb(62 37 22 / 24%);
  }
  body.home-page .reader-device .tool-settings {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    flex: 1;
    min-width: 0;
    align-self: stretch;
    overflow: visible;
    margin: 0;
    padding: 29px 32px 31px;
    border: 1px solid #d2ccc1;
    border-radius: 7px 23px 23px 7px;
    background: var(--book-page);
    box-shadow: inset 0 0 0 2px rgb(119 103 86 / 5%), 0 1px 4px rgb(47 40 33 / 17%);
  }
  body.home-page .converter-side-heading { margin-bottom: 22px; }
  body.home-page .converter-side-heading .c2e-eyebrow { transform: none; }
  body.home-page .converter-side-heading h3 { margin: 8px 0 6px; font-size: clamp(28px, 2.6vw, 35px); font-weight: 700; }
  body.home-page .dropzone { aspect-ratio: auto; min-height: 190px; }
  body.home-page .tool-settings .options summary { padding-bottom: 15px; }
  body.home-page .tool-settings .opt-grid { gap: 14px; }
  body.home-page .tool-settings .segmented { min-height: 3.2em; }
  body.home-page .tool-settings .seg { padding-block: 8px; }
  body.home-page .tool-settings .sec { margin-top: 8px; padding-top: 14px; }
  body.home-page .tool-settings .field input[type="text"],
  body.home-page .tool-settings .field select { height: var(--control-h-m); }
  body.home-page .tool-settings .mode-hint { margin-top: 6px; font-size: 12px; line-height: 1.45; }
  body.home-page .tool-settings #scannedPagesHeading { margin-top: 8px; }
  body.home-page .tool-settings #translationRow { margin-top: 7px; }
  body.home-page .model-picker > .lbl { margin-bottom: var(--space-2); }
  body.home-page .model-hint { margin-top: 8px; }
  body.home-page .tool-settings .cb-title { font-size: var(--text-body-s); }
  body.home-page .tool-settings .cb-note { font-size: var(--text-caption); line-height: 1.5; }
}
@media (max-width: 620px) {
  body.home-page .hero { padding-top: 47px; }
  body.home-page .hero-title { font-size: clamp(43px, 11vw, 60px); letter-spacing: -.065em; }
  body.home-page .hero-title br { display: none; }
  body.home-page .hero-lede { margin-top: 19px; font-size: 16px; }
  body.home-page .converter-section { padding: 35px 0 75px; }
  body.home-page .tool-card { padding: 15px; border-radius: 29px; }
  body.home-page .tool-card::after { border-radius: 20px; }
  body.home-page .tool-upload { padding: 25px 22px 0; }
  body.home-page .tool-results { padding: 28px 22px 0; }
  body.home-page .tool-foot { margin: 20px 22px 0; padding-bottom: 22px; }
  body.home-page .reader-device { padding: 10px 11px 10px 19px; border-radius: 7px 26px 26px 7px; }
  body.home-page .reader-device .tool-settings { padding: 25px 22px; border-radius: 5px 16px 16px 5px; }
  body.home-page .dropzone { min-height: 175px; }
}
@media (max-width: 390px) {
  body.home-page .hero-title { font-size: 42px; }
  body.home-page .hero-actions { flex-direction: column; align-items: stretch; }
}

/* Blue folio converter: place the generated silver reader artwork behind the
   live settings controls so the device and its screen stay aligned together. */
@media (min-width: 1101px) {
  body.home-page .tool-card {
    width: min(94vw, 1504px);
    aspect-ratio: 1410 / 944;
    border-radius: clamp(28px, 3vw, 44px);
    background-color: #7189af;
    background-image:
      repeating-linear-gradient(0deg, rgb(255 255 255 / 1.5%) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(90deg, rgb(31 49 77 / 4%) 0 1px, transparent 1px 4px),
      radial-gradient(ellipse at 48% 42%, rgb(159 183 219 / 35%), transparent 62%),
      linear-gradient(135deg, #8299bd 0%, #647fa8 53%, #536f99 100%);
    border: 1px solid rgb(222 235 255 / 24%);
    box-shadow: inset 0 0 0 2px rgb(234 241 252 / 24%),
      inset 0 0 0 9px rgb(28 51 82 / 11%),
      0 18px 40px rgb(40 58 82 / 14%);
  }
  body.home-page .folio-cover-details {
    position: absolute;
    z-index: 1;
    inset: 11px;
    border: 1px solid rgb(228 239 255 / 25%);
    border-radius: clamp(20px, 2.1vw, 32px);
    box-shadow: inset 0 0 0 1px rgb(24 43 70 / 13%), inset 0 1px 2px rgb(255 255 255 / 12%);
    pointer-events: none;
  }
  body.home-page .folio-cover-details::before {
    content: "";
    position: absolute;
    top: 2%;
    bottom: 2%;
    left: 43.25%;
    width: clamp(8px, .8vw, 12px);
    border-radius: 99px;
    background: linear-gradient(90deg, rgb(26 45 72 / 5%), rgb(24 42 68 / 23%) 23%, rgb(211 228 250 / 32%) 52%, rgb(28 47 75 / 23%) 78%, rgb(26 45 72 / 7%));
    box-shadow: 0 0 0 1px rgb(26 44 70 / 8%);
  }
  body.home-page .tool-card::after {
    left: 4.1%;
    top: 5%;
    width: 39%;
    height: 89%;
    border-radius: 31px;
    background: #fffefa;
    box-shadow: 0 4px 14px rgb(33 45 63 / 7%);
  }
  body.home-page .tool-upload {
    left: 7.35%;
    top: 6.15%;
    width: 32.5%;
  }
  body.home-page .tool-results {
    left: 7.35%;
    top: 73.5%;
    width: 32.5%;
  }
  body.home-page .tool-foot {
    left: 7.35%;
    top: 84.4%;
    width: 32.5%;
    padding-top: 17px;
    row-gap: 7px;
  }
  /* The reader is the card's only in-flow child, so a reader made taller by
     its settings stretches the folio with it instead of spilling out. */
  body.home-page .tool-card { min-height: auto; }
  body.home-page .reader-device {
    position: relative;
    left: auto;
    top: auto;
    width: 48.4%;
    height: auto;
    margin: .77% 0 .77% 50.4%;
  }
  body.home-page .reader-device .tool-settings {
    padding: 19px 26px 20px;
    border-radius: 4px 10px 10px 4px;
    background: #fffefa;
    box-shadow: none;
  }
}

@media (max-width: 1100px) {
  body.home-page .folio-cover-details { display: none; }
  body.home-page .tool-card {
    --text-strong: #302720;
    --text-body: #62564e;
    --text-muted: #817367;
    --text-faint: #a69687;
    --text-link: #d5521c;
    --text-link-hover: #b84214;
    --surface-card: #fffefa;
    --surface-raised: #fffefa;
    --surface-sunken: #f7eee4;
    --border-hairline: #eee4da;
    --border-default: #eddfd4;
    --border-strong: #e4cfc0;
    --border-focus: #d54e1b;
    --spine-500: #e86931;
    --spine-600: #d85825;
    padding: 16px;
    border: 0;
    border-radius: 31px;
    background-color: #7189af;
    background-image:
      repeating-linear-gradient(0deg, rgb(255 255 255 / 1.5%) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(90deg, rgb(31 49 77 / 4%) 0 1px, transparent 1px 4px),
      radial-gradient(ellipse at 48% 42%, rgb(159 183 219 / 35%), transparent 62%),
      linear-gradient(135deg, #8299bd 0%, #647fa8 53%, #536f99 100%);
    box-shadow: inset 0 0 0 2px rgb(234 241 252 / 24%),
      inset 0 0 0 8px rgb(28 51 82 / 11%),
      0 18px 40px rgb(40 58 82 / 14%);
  }
  body.home-page .tool-card::after {
    content: none;
  }
  body.home-page .tool-upload,
  body.home-page .tool-results,
  body.home-page .tool-foot {
    background: #fffefa;
  }
  :root body.home-page .tool-card .dropzone {
    border-color: #e9ae87;
    background: #fff8f2;
    color: #302720;
  }
  body.home-page .tool-upload {
    border-radius: 24px 24px 0 0;
  }
  body.home-page .tool-results { padding-bottom: 0; }
  body.home-page .tool-foot {
    margin: 0;
    padding-right: 30px;
    padding-left: 30px;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 4px 14px rgb(33 45 63 / 7%);
  }
  body.home-page .reader-device {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 500px);
    height: auto;
    justify-self: center;
    margin: 23px auto 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  body.home-page .reader-device::after { content: none; }
  body.home-page .reader-device .tool-settings {
    min-width: 0;
    padding: 18px clamp(14px, 4.8vw, 25px);
    border: 0;
    border-radius: 4px 10px 10px 4px;
    background: #fffefa;
    box-shadow: none;
  }
}

/* The reader grows to hold every setting rather than scrolling them. Its
   artwork is a border-image sliced above the side button and below the
   screen, so only the plain middle band stretches; the bezels are sized in the
   reader's own width and keep the artwork's proportions at any height. */
body.home-page .reader-device {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1079 / 1458;
}
body.home-page .reader-device::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  width: auto;
  box-sizing: border-box;
  border-style: solid;
  border-width: calc(100cqw * 480 / 1079) calc(100cqw * 41 / 1079) calc(100cqw * 108 / 1079) calc(100cqw * 171 / 1079);
  border-image: url("/images/how-it-works-silver-reader.webp") 480 41 108 171 fill stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
}
body.home-page .reader-device .tool-settings {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  flex: 1 0 auto;
  margin: 9.05% 7.2% 8.92% 15.8%;
  overflow: visible;
}

/* Keep the illustrated folio and reader intact after upload. Compact the
   uploader and use the open lower half of the page for the quote and progress. */
@media (min-width: 1101px) {
  body.home-page .tool-card:has(#fileCard:not(.hidden)) .tool-upload .converter-side-heading p,
  body.home-page .tool-card:has(#fileCard:not(.hidden)) .tool-upload .model-hint { display: none; }
  body.home-page .tool-card:has(#fileCard:not(.hidden)) #dropzone { display: none; }
  body.home-page .tool-card:has(#fileCard:not(.hidden)) .tool-results {
    top: 52%;
    z-index: 2;
  }
  body.home-page .tool-card:has(#fileCard:not(.hidden)) .tool-foot {
    top: calc(100% + 10px);
    z-index: 1;
  }
  body.home-page .tool-card:has(#fileCard:not(.hidden)) .tool-results:has(#status:not(.hidden)) #quote { display: none; }
  body.home-page .tool-card:has(#fileCard:not(.hidden)) .tool-results:has(#status:not(.hidden)) ~ .tool-foot { display: none; }
}

:root[data-theme="dark"] body.home-page {
  --book-page: #2c251f;
  --book-page-border: #594535;
}
:root[data-theme="dark"] body.home-page .hero,
:root[data-theme="dark"] body.home-page .converter-section { background: var(--paper-50); }
:root[data-theme="dark"] body.home-page .hero-title { color: var(--ink-900); }
:root[data-theme="dark"] body.home-page .hero-lede { color: var(--ink-500); }
:root[data-theme="dark"] body.home-page .hero-secondary { background: #312720; border-color: #6a5547; color: #f5e9db; }
:root[data-theme="dark"] body.home-page .tool-card { box-shadow: inset 0 0 0 4px rgb(255 220 178 / 10%), 0 20px 42px rgb(0 0 0 / 24%); }
:root[data-theme="dark"] body.home-page .reader-device { background: linear-gradient(100deg, #625d56, #a39e94 9%, #827d75 91%, #625d56); }
:root[data-theme="dark"] body.home-page .reader-device .tool-settings { border-color: #71675d; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 3%), 0 1px 4px rgb(0 0 0 / 25%); }
:root[data-theme="dark"] body.home-page .dropzone { background: #382b23; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.home-page {
    --book-page: #2c251f;
    --book-page-border: #594535;
  }
  :root:not([data-theme="light"]) body.home-page .hero,
  :root:not([data-theme="light"]) body.home-page .converter-section { background: var(--paper-50); }
  :root:not([data-theme="light"]) body.home-page .hero-title { color: var(--ink-900); }
  :root:not([data-theme="light"]) body.home-page .hero-lede { color: var(--ink-500); }
  :root:not([data-theme="light"]) body.home-page .hero-secondary { background: #312720; border-color: #6a5547; color: #f5e9db; }
  :root:not([data-theme="light"]) body.home-page .reader-device { background: linear-gradient(100deg, #625d56, #a39e94 9%, #827d75 91%, #625d56); }
  :root:not([data-theme="light"]) body.home-page .reader-device .tool-settings { border-color: #71675d; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 3%), 0 1px 4px rgb(0 0 0 / 25%); }
  :root:not([data-theme="light"]) body.home-page .dropzone { background: #382b23; }
}

/* Keep the folio and note layout comfortably inside the viewport. */
@media (min-width: 1101px) {
  body.home-page .tool-card { width: min(90vw, 1360px); }
  body.home-page .postit-grid {
    width: min(82vw, 1320px);
    gap: clamp(24px, 2.6vw, 44px);
  }
  body.home-page .tool-settings { padding: 16px 22px 14px; }
  body.home-page .tool-settings .options summary { padding-bottom: 24px; }
  body.home-page .tool-settings .opt-grid { gap: 8px; }
  body.home-page .tool-settings .field input[type="text"],
  body.home-page .tool-settings .field select { height: 34px; }
  body.home-page .tool-settings #scannedPagesHeading { margin-top: 29px; }
  body.home-page .tool-settings #translationRow { margin-top: 22px; padding-top: 14px; }
}
@media (max-width: 1100px) {
  body.home-page .postit-grid { width: min(74vw, 640px); }
}
@media (max-width: 620px) {
  body.home-page .postit-grid { width: calc(100vw - 56px); }
}

/* The supplied reference is a light folio, independent of the site's theme. */
@media (min-width: 1101px) {
  body.home-page .converter-section > .c2e-container {
    width: 100%;
    max-width: none;
    padding-inline: 0;
  }
  body.home-page .converter-section { background: #fff; }
  body.home-page .tool-card {
    --text-strong: #302720;
    --text-body: #62564e;
    --text-muted: #817367;
    --text-faint: #a69687;
    --text-link: #d5521c;
    --text-link-hover: #b84214;
    --surface-card: #fffefa;
    --surface-raised: #fffefa;
    --surface-sunken: #f7eee4;
    --border-hairline: #eee4da;
    --border-default: #eddfd4;
    --border-strong: #e4cfc0;
    --border-focus: #d54e1b;
    --spine-500: #e86931;
    --spine-600: #d85825;
  }
  :root[data-theme="dark"] body.home-page .tool-card { box-shadow: none; }
  :root[data-theme="dark"] body.home-page .tool-card::after { background: #fffefa; }
  :root[data-theme="dark"] body.home-page .reader-device { background: none; }
  :root[data-theme="dark"] body.home-page .reader-device .tool-settings {
    border: 0;
    background: #fffefa;
    box-shadow: none;
  }
  :root[data-theme="dark"] body.home-page .dropzone { background: #fff8f2; }
  :root:not([data-theme="light"]) body.home-page .tool-card { box-shadow: none; }
  :root:not([data-theme="light"]) body.home-page .tool-card::after { background: #fffefa; }
  :root:not([data-theme="light"]) body.home-page .reader-device { background: none; }
  :root:not([data-theme="light"]) body.home-page .reader-device .tool-settings {
    border: 0;
    background: #fffefa;
    box-shadow: none;
  }
  :root:not([data-theme="light"]) body.home-page .dropzone { background: #fff8f2; }
}

/* Keep the homepage's working content aligned around one shared desktop width. */
body.site-refresh { --content-max: calc(var(--container-max) - 48px); }
@media (min-width: 1101px) {
  body.home-page .converter-section > .c2e-container {
    width: min(100%, var(--container-max));
    max-width: var(--container-max);
    padding-inline: 24px;
  }
  body.home-page .tool-card { width: 100%; }
  body.home-page .reader-device { margin-left: 45.5%; }
  body.home-page .postit-heading { max-width: var(--content-max); }
  body.home-page .postit-grid { width: min(var(--content-max), calc(100vw - 48px)); }
  body.home-page .story-introduction > .c2e-container,
  body.home-page .story-introduction .comparison-showcase { max-width: var(--content-max); }
  body.home-page .pricing-grid,
  body.home-page .faq,
  body.home-page .more-grid { width: 100%; max-width: var(--content-max); }
  body.home-page .tool-settings .options { width: 104%; zoom: .9; }
}