/* A single source letter opens the comparison; two roomy detail views make the
   local summary and Pro interpretation readable without three miniature phones. */
.analysis-comparison {
  container-type: inline-size;
  container-name: analysis-comparison;
  --comparison-ink: var(--ink);
  --comparison-muted: var(--ink-soft);
  --comparison-lime: #bfd779;
  --comparison-teal: #166e75;
  margin-block: 40px 48px;
  color: var(--comparison-ink);
}
.analysis-comparison > header { max-width: 56ch; margin-block-end: 28px; }
.analysis-comparison > header h3 { margin: 0; font-size: clamp(25px, 3vw, 32px); line-height: 1.2; }
.analysis-comparison > header p { margin: 14px 0 0; font-size: 16px; line-height: 1.65; color: var(--comparison-muted); }
.analysis-comparison .analysis-comparison-stages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.analysis-comparison .analysis-comparison-stage {
  position: relative;
  align-self: start;
  min-width: 0;
  padding: 0;
  margin: 0;
  border-radius: 18px;
  background: var(--surface-soft);
}
.analysis-comparison .analysis-comparison-stage figure {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  margin: 0;
}
.analysis-comparison-copy { flex: 1; margin-block-end: 18px; }
.analysis-comparison-copy h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.analysis-comparison-number {
  display: grid;
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 50%;
  background: var(--comparison-lime);
  color: var(--comparison-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.analysis-comparison-copy p { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: var(--comparison-muted); }
.analysis-comparison .analysis-comparison-window {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 828 / 930;
  overflow: hidden;
  border-radius: 12px;
  background: #f2f3f2;
  cursor: zoom-in;
}
.analysis-comparison-window img {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  transform: translateY(-39.5%);
}
.analysis-comparison .analysis-comparison-zoom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding-block-start: 8px;
  color: var(--comparison-teal);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.35;
  text-decoration: none;
}
.analysis-comparison-zoom > span:last-child { font-size: 20px; }
.analysis-comparison .analysis-comparison-zoom:hover { text-decoration: underline; text-underline-offset: 3px; }
.analysis-comparison a:focus-visible { outline: 3px solid var(--comparison-teal); outline-offset: 4px; }
.analysis-comparison .analysis-comparison-original {
  grid-column: 1 / -1;
  background: var(--surface-soft);
}
.analysis-comparison .analysis-comparison-original figure {
  display: grid;
  grid-template-columns: minmax(150px, .72fr) minmax(0, 1.4fr);
  gap: 0 20px;
  align-items: center;
}
.analysis-comparison-original .analysis-comparison-copy { grid-row: 1 / 3; margin: 0; padding: 4px; }
.analysis-comparison-original .analysis-comparison-window { aspect-ratio: 828 / 660; }
.analysis-comparison-original .analysis-comparison-window img { transform: translateY(-19.5%); }
.analysis-comparison-original .analysis-comparison-zoom { grid-column: 2; }
.analysis-comparison-original::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 25%;
  width: 1px;
  height: 22px;
  background: #abbf98;
}
.analysis-comparison .analysis-comparison-pro { background: linear-gradient(150deg, #edf8f5, #e8f0d9); }
.analysis-comparison-pro .analysis-comparison-number { color: #fff; background: var(--comparison-teal); }
.analysis-comparison-pro .analysis-comparison-window { aspect-ratio: 828 / 1150; }
.analysis-comparison-pro .analysis-comparison-window img { transform: translateY(-16%); }
.analysis-comparison-pro::before {
  content: "→";
  position: absolute;
  inset-inline-start: -19px;
  inset-block-start: 26px;
  color: var(--comparison-teal);
  font-size: 18px;
  line-height: 1;
}
:dir(rtl) .analysis-comparison-pro::before { content: "←"; }
.analysis-comparison:lang(ar) h4 { letter-spacing: normal; }
.analysis-additional { margin-block-start: 40px; }
.analysis-additional > h4 { margin: 0 0 20px; font-size: 20px; line-height: 1.35; font-weight: 600; }
.analysis-case { border-block-start: 1px solid var(--line); }
.analysis-case:last-child { border-block-end: 1px solid var(--line); }
.analysis-case > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 80px;
  padding: 18px 4px;
  list-style: none;
  cursor: pointer;
}
.analysis-case > summary::-webkit-details-marker { display: none; }
.analysis-case > summary > span:first-child { min-width: 0; }
.analysis-case > summary strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.35; }
.analysis-case > summary > span > span { display: block; margin-block-start: 5px; font-size: 14px; line-height: 1.5; color: var(--comparison-muted); }
.analysis-case > summary:hover strong { color: var(--comparison-teal); }
.analysis-case > summary:focus-visible { outline: 3px solid var(--comparison-teal); outline-offset: 2px; border-radius: 4px; }
.analysis-case-indicator { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-soft); }
.analysis-case-indicator::before, .analysis-case-indicator::after { content: ""; position: absolute; inset: 13px 8px; height: 2px; background: var(--comparison-teal); }
.analysis-case-indicator::after { transform: rotate(90deg); }
.analysis-case[open] > summary .analysis-case-indicator::after { content: none; }
.analysis-case[open] > summary .analysis-case-indicator { background: var(--comparison-lime); }
.analysis-case-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 6px 4px 24px; }
.analysis-case-views-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.analysis-case-view { min-width: 0; margin: 0; }
.analysis-case-view > figcaption { margin-block-end: 12px; font-size: 13px; font-weight: 550; color: var(--comparison-teal); }
.analysis-case-document .analysis-comparison-window { aspect-ratio: 828 / 1172; background: #fff; }
.analysis-case-document .analysis-comparison-window img { position: static; transform: none; }
.analysis-case-reader .analysis-comparison-window img { position: absolute; transform: translateY(-13.6%); }
.analysis-case-local .analysis-comparison-window { aspect-ratio: 828 / 990; }
.analysis-case-local .analysis-comparison-window img { transform: translateY(-39.5%); }
.analysis-case-pro .analysis-comparison-window { aspect-ratio: 828 / 1800; }
.analysis-case-pro .analysis-comparison-window img { position: static; transform: none; }
.analysis-case-medical .analysis-case-pro .analysis-comparison-window { aspect-ratio: 828 / 1280; }
.analysis-case-medical .analysis-case-pro .analysis-comparison-window img { position: absolute; transform: translateY(-18%); }
.analysis-case-invoice .analysis-case-local .analysis-comparison-window { aspect-ratio: 828 / 438; }
.analysis-comparison:lang(de) .analysis-case-invoice .analysis-case-local .analysis-comparison-window { aspect-ratio: 828 / 621; }
.analysis-case-invoice .analysis-case-pro .analysis-comparison-window { aspect-ratio: 828 / 840; }
.analysis-case-invoice .analysis-case-pro .analysis-comparison-window img { position: absolute; transform: translateY(-41%); }
.analysis-case-travel .analysis-case-pro .analysis-comparison-window { aspect-ratio: 828 / 1220; }
.analysis-case-travel .analysis-case-pro .analysis-comparison-window img { position: absolute; transform: translateY(-26.4%); }
.analysis-comparison:lang(de) .analysis-case-invoice .analysis-case-pro .analysis-comparison-window { aspect-ratio: 828 / 1300; }
.analysis-comparison:lang(de) .analysis-case-invoice .analysis-case-pro .analysis-comparison-window img { position: absolute; transform: translateY(-15.55%); }
.analysis-comparison:lang(de) .analysis-case-travel .analysis-case-pro .analysis-comparison-window { aspect-ratio: 828 / 1420; }
.analysis-comparison:lang(de) .analysis-case-travel .analysis-case-pro .analysis-comparison-window img { position: absolute; transform: translateY(-13.8%); }
@container analysis-comparison (max-width: 850px) {
  .analysis-case-views-three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .analysis-case-views-three .analysis-case-document { grid-column: 1 / -1; width: 100%; max-width: 440px; justify-self: center; }
}
@container analysis-comparison (max-width: 600px) {
  .analysis-comparison .analysis-comparison-stages { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .analysis-comparison .analysis-comparison-original figure { display: flex; }
  .analysis-comparison-original .analysis-comparison-copy { margin-block-end: 18px; padding: 0; }
  .analysis-comparison .analysis-comparison-stage figure { padding: 16px; }
  .analysis-comparison-copy p { font-size: 15px; }
  .analysis-comparison-original::after { inset-inline-start: 30px; height: 20px; }
  .analysis-comparison-local::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 30px;
    width: 1px;
    height: 20px;
    background: #abbf98;
  }
  .analysis-comparison-pro::before { content: none; }
  :dir(rtl) .analysis-comparison-pro::before { content: none; }
  .analysis-case-views { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .analysis-case-local, .analysis-case-pro { padding-block-start: 16px; border-block-start: 1px solid var(--line); }
}