/* Odyssey.MarketingSite/public/landing-artifacts/why-odyssey-images/odyssey-styles.css
   ============================================================================
   Reflows the existing product composition into the comparison's 7:4 canvas.
   Local overrides leave the main hero and shared fitting adapter unchanged.
   ============================================================================ */
@import url("../product-hero/square-styles.css");

.hero-capture {
  --fit-inset: 0px;
  --fit-scale: calc(100vw / 1400px);
  border-radius: 32px;
  height: 800px;
  overflow: hidden;
  width: 1400px;
}

@media (min-aspect-ratio: 7 / 4) {
  .hero-capture { --fit-scale: calc(100vh / 800px); }
}

/* The comparison is a flat screenshot, including controls and floating tools. */
.hero-capture *,
.hero-capture *::before,
.hero-capture *::after { box-shadow: none !important; text-shadow: none !important; }

.glass-frame,
.app-shell {
  border: 0;
  border-radius: 32px;
  height: 800px;
  left: 0;
  top: 0;
  width: 1120px;
}

.glass-frame { background: #f8faf9; width: 1400px; }
.glass-frame::before,
.glass-frame::after { display: none; }
.sidebar { padding-top: 24px; }
.project-row { margin-top: 28px; }
.chapter-list { gap: 6px; margin-top: 24px; }
.editor-area { padding-top: 24px; }
.manuscript { height: 608px; }
.manuscript p { font-size: 17px; line-height: 1.6; margin-bottom: 16px; }

/* Landscape puts notes beside the editor instead of cropping a taller overlay beneath comments. */
.tools-drawer {
  border-left: 1px solid var(--line);
  border-radius: 0;
  height: 800px;
  left: 1120px;
  padding: 54px 17px 20px;
  top: 0;
  width: 280px;
}
.tabs { gap: 19px; height: 30px; }
.note-input { height: 32px; margin-block: 8px; }
.note-input button { height: 26px; width: 26px; }
.note-card { margin-top: 12px; padding: 12px; }
.note-card p { font-size: 14px; line-height: 1.4; margin-top: 8px; }
.tools-drawer .note-card { display: block; }
.tools-drawer .note-card:nth-of-type(n + 4) { display: block; }
.replacement { display: block; }
.momentum-card { left: 280px; top: 650px; }
/* The progress overlay already conveys writing progress; avoid a second count beneath it. */
.wordcount { display: none; }