/* Shared with css/pages/xfigura-vs-pelicad.css — same hand-authored comparison-post
   components (step cards, platform preview grid, comparison table, pricing/video slot).
   Kept as its own file per the "Hand Authored" post convention (see README.md), even though
   every rule here is generic/class-based, not gendo-vs-pelicad specific. */

.numbered-task-list {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 1.8rem auto 2.2rem;
  max-width: 720px;
  padding: 0;
}

.post-content .numbered-task-list li {
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(237, 245, 240, .72), #fff 68%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0;
  padding: 16px 18px;
}

.numbered-task-list__number,
.comparison-card__step {
  align-items: center;
  background: #aef7b7;
  border-radius: 10px;
  color: #000;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .76rem;
  font-weight: 700;
  height: 30px;
  justify-content: center;
  line-height: 1;
  width: 34px;
}

.post-content .numbered-task-list p {
  font-size: 1rem;
  line-height: 1.65;
  margin: 1px 0 0;
}

.platform-preview-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 2.2rem 50% 4rem;
  max-width: 1120px;
  transform: translateX(-50%);
  width: min(1120px, calc(100vw - 40px));
}

.platform-preview {
  background: #fff;
  border: 1px solid rgba(20, 36, 52, .1);
  border-radius: 22px;
  box-shadow: 0 18px 46px rgba(20, 36, 52, .12);
  margin: 0;
  overflow: hidden;
}

.platform-preview__media {
  /* Matches the actual gendo-vs-pelicad/platform-previews source images (1920x1200 = 8:5).
     xfigura's screenshots happened to be 2:1, this post's are not — a fixed 2:1 box paired
     with object-fit: cover cropped the top/bottom off every preview. Sizing the box to the
     real ratio and using contain (not cover) means nothing gets cropped even if a future
     image doesn't match exactly. */
  aspect-ratio: 8 / 5;
  background: #142434;
  overflow: hidden;
  position: relative;
}

.platform-preview__media img {
  border-radius: 0;
  height: 100%;
  margin: 0;
  object-fit: contain;
  width: 100%;
}

.platform-preview__label {
  background: #aef7b7;
  border: 1px solid rgba(20, 36, 52, .14);
  border-radius: 10px;
  color: #142434;
  font-size: .76rem;
  font-weight: 700;
  left: 16px;
  letter-spacing: .1em;
  padding: 8px 12px;
  position: absolute;
  text-transform: uppercase;
  top: 16px;
  z-index: 2;
}

.post-content .platform-preview figcaption {
  color: var(--text-mid);
  font-size: .84rem;
  font-style: italic;
  line-height: 1.55;
  padding: 14px 16px 16px;
  text-align: left;
}

.comparison-deck-intro {
  text-align: left;
}

.comparison-deck {
  margin: 2.5rem 50% 4.5rem;
  max-width: 1380px;
  position: relative;
  transform: translateX(-50%);
  width: min(1380px, calc(100vw - 40px));
}

.comparison-deck__stack {
  min-height: clamp(620px, calc(44vw + 150px), 780px);
  position: relative;
}

.comparison-card {
  background: #fff;
  border: 1px solid rgba(174, 247, 183, .22);
  border-radius: 24px;
  box-shadow: 0 26px 70px rgba(20, 36, 52, .2);
  cursor: pointer;
  inset: 0 0 auto;
  min-height: clamp(450px, 44vw, 610px);
  overflow: visible;
  position: absolute;
  transform-origin: top center;
  transition:
    transform .7s cubic-bezier(.22, 1, .36, 1),
    opacity .45s ease,
    filter .45s ease,
    box-shadow .45s ease;
  /* Default/inactive state: dimmed and slightly receded, hinting at the rest of the deck
     behind the active card. Stays clickable (cursor: pointer above) — js/blog-post-widgets.js
     brings a clicked inactive card to the front, same as the Next/Prev buttons. */
  opacity: .4;
  transform: scale(.96) translateY(16px);
  z-index: 1;
}

.comparison-card:focus-visible {
  outline: 3px solid #aef7b7;
  outline-offset: 5px;
}

.comparison-card.is-active {
  cursor: default;
  box-shadow: 0 34px 84px rgba(20, 36, 52, .27);
  opacity: 1;
  transform: scale(1) translateY(0);
  z-index: 2;
}

.comparison-card__images {
  background: #fff;
  border-radius: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Row 1 (remarks) sizes to whichever of the two figures' remarks is taller; row 2 (image)
     takes what's left. Because both figures below opt into this same row track via subgrid,
     that makes their remarks bars — and therefore their images — the same height as each
     other automatically, regardless of how many remarks either side has.
     Row 2 is `minmax(0, 1fr)`, not bare `1fr`: a bare `1fr` track's minimum is "auto", which
     for a row containing an <img> is the image's own intrinsic-aspect-ratio-derived minimum
     height — Safari/WebKit in particular can size (or position) the row/image around that
     minimum instead of the space actually available, leaving blank space above the image and
     pushing it down. Chrome is more forgiving here, which is why this only showed up on
     iPhone. `minmax(0, 1fr)` makes the floor explicitly 0 so the track just fills what's left. */
  grid-template-rows: auto minmax(0, 1fr);
  min-height: clamp(450px, 44vw, 610px);
  overflow: hidden;
}

.comparison-card figure {
  background: #fff;
  display: grid;
  grid-row: 1 / span 2;
  /* Plain 2-row grid is the fallback for browsers without subgrid support (each figure
     sizes its own rows independently — remarks/images may then differ in height between
     the two sides, same as before this fix, but nothing breaks). Browsers that understand
     `subgrid` apply it instead, since it's declared second. Row 2 uses `minmax(0, 1fr)` for
     the same Safari/WebKit reason as `.comparison-card__images` above. */
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-rows: subgrid;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.comparison-card figure + figure {
  border-left: 2px solid rgba(20, 36, 52, .14);
}

.comparison-card img {
  align-self: stretch;
  border-radius: 0;
  display: block;
  height: 100%;
  justify-self: stretch;
  margin: 0;
  min-height: 0;
  min-width: 0;
  object-fit: contain;
  transition: transform 1s cubic-bezier(.22, 1, .36, 1);
  width: 100%;
}

.comparison-card.is-active img {
  transform: scale(1.012);
}

.comparison-card__product {
  background: #aef7b7;
  border: 1px solid rgba(20, 36, 52, .14);
  border-radius: 999px;
  color: #142434;
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 10px;
  padding: 7px 12px;
  text-transform: uppercase;
}

/* Always visible above the image (not a toggle — these remarks are important context for
   comparing the two tools' outputs at each step, so they no longer hide behind a click). */
.comparison-card__remarks {
  background: rgba(20, 36, 52, .95);
  color: #fff;
  max-height: 190px;
  overflow-y: auto;
  padding: 16px 18px;
}

.post-content .comparison-card__remarks ul {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-content .comparison-card__remarks li {
  align-items: flex-start;
  color: #fff;
  display: grid;
  font-size: clamp(.76rem, 1vw, .88rem);
  gap: 9px;
  grid-template-columns: auto minmax(0, 1fr);
  line-height: 1.45;
  margin: 0;
}

.comparison-card__remarks li::before {
  align-items: center;
  background: #aef7b7;
  border-radius: 50%;
  color: #142434;
  content: '+';
  display: inline-flex;
  font-size: .72rem;
  font-weight: 700;
  height: 19px;
  justify-content: center;
  margin-top: 1px;
  width: 19px;
}

.comparison-card__remarks li[data-tone="negative"]::before {
  background: #ff8b91;
  content: '\2212';
}

.comparison-card__overlay {
  align-items: flex-start;
  backdrop-filter: blur(18px);
  background: rgba(16, 31, 46, .9);
  border: 1px solid rgba(174, 247, 183, .34);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0,0,0,.24);
  color: #fff;
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr);
  left: 50%;
  max-width: 760px;
  padding: 18px 20px;
  position: absolute;
  top: calc(100% + 14px);
  transform: translate(-50%, -20%);
  transition: opacity .32s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
  width: calc(100% - 48px);
  z-index: 3;
}

.comparison-card:not(.is-active) .comparison-card__overlay {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-20% - 8px));
}

.comparison-card__step {
  height: 34px;
  width: 38px;
}

.comparison-card__eyebrow {
  color: rgba(255,255,255,.64);
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.post-content .comparison-card__overlay h3 {
  color: #fff;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.25;
  margin: 0 0 5px;
}

.post-content .comparison-card__overlay p {
  color: rgba(255,255,255,.76);
  font-size: .88rem;
  line-height: 1.5;
  margin: 0;
  max-width: none;
}

.comparison-deck__controls {
  height: clamp(450px, 44vw, 610px);
  inset: 0 0 auto;
  pointer-events: none;
  position: absolute;
  z-index: 12;
}

.comparison-deck__button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--blue);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  gap: 9px;
  left: 18px;
  padding: 11px 17px;
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.comparison-deck__button--next {
  left: auto;
  right: 18px;
}

.comparison-deck__button:hover,
.comparison-deck__button:focus-visible {
  background: var(--green-light);
  border-color: var(--green-mid);
  transform: translateY(calc(-50% - 2px));
}

.comparison-deck__button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.comparison-deck__progress {
  align-items: baseline;
  color: var(--text-light);
  display: flex;
  font-size: .78rem;
  gap: 5px;
  justify-content: center;
  margin: 24px auto 0;
}

.comparison-deck__progress strong {
  color: var(--blue);
  font-size: 1.15rem;
}

.platform-comparison {
  border: 1px solid rgba(20, 36, 52, .12);
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(20, 36, 52, .1);
  margin: 2.2rem 50% 4.5rem;
  max-width: 1120px;
  overflow: clip;
  transform: translateX(-50%);
  width: min(1120px, calc(100vw - 40px));
}

.platform-comparison__columns,
.platform-comparison__details {
  display: grid;
  grid-template-columns: 230px repeat(2, minmax(0, 1fr));
}

.platform-comparison__columns {
  background: #fff;
  gap: 10px;
  padding: 12px;
  position: sticky;
  top: 72px;
  z-index: 4;
}

.platform-comparison__column-title {
  align-items: center;
  background: #aef7b7;
  border: 1px solid rgba(20, 36, 52, .12);
  border-radius: 12px;
  color: #142434;
  display: flex;
  font-size: .78rem;
  font-weight: 700;
  justify-content: center;
  letter-spacing: .1em;
  min-height: 44px;
  padding: 9px 12px;
  text-transform: uppercase;
}

.platform-comparison__column-title--category {
  justify-content: flex-start;
}

.platform-comparison__logo {
  display: block;
  max-height: 30px;
  max-width: 116px;
  object-fit: contain;
  width: auto;
}

.platform-comparison__logo--pelicad {
  max-height: 25px;
}

.platform-comparison__item {
  border-top: 1px solid rgba(20, 36, 52, .1);
  margin: 0;
}

.post-content .platform-comparison__category {
  margin: 0;
}

.platform-comparison__category button {
  align-items: center;
  background: #fff;
  border: 0;
  color: #142434;
  cursor: pointer;
  display: grid;
  font: inherit;
  font-size: .98rem;
  font-weight: 700;
  gap: 13px;
  grid-template-columns: auto 1fr auto;
  padding: 15px 18px;
  text-align: left;
  transition: background .2s ease;
  width: 100%;
}

.platform-comparison__category button:hover,
.platform-comparison__category button:focus-visible,
.platform-comparison__item.is-open .platform-comparison__category button {
  background: rgba(174, 247, 183, .24);
}

.platform-comparison__category button:focus-visible {
  outline: 3px solid #aef7b7;
  outline-offset: -3px;
}

.platform-comparison__icon {
  align-items: center;
  background: #aef7b7;
  border-radius: 10px;
  color: #142434;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  width: 40px;
}

.platform-comparison__icon svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 20px;
}

.platform-comparison__chevron {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  height: 9px;
  margin-right: 5px;
  transform: rotate(45deg);
  transition: transform .2s ease;
  width: 9px;
}

.platform-comparison__item.is-open .platform-comparison__chevron {
  transform: rotate(225deg);
}

.platform-comparison__details {
  background: #fff;
  border-top: 1px solid rgba(20, 36, 52, .08);
}

.platform-comparison__details[hidden] {
  display: none;
}

.platform-comparison__spacer {
  background: rgba(174, 247, 183, .12);
}

.platform-comparison__cell {
  border-left: 1px solid rgba(20, 36, 52, .1);
  padding: 20px;
}

.post-content .platform-comparison__cell p {
  font-size: .9rem;
  line-height: 1.65;
  margin: 0;
}

.platform-comparison__mobile-label {
  display: none;
}

.workflow-videos {
  margin: 3.5rem 50% 4.5rem;
  max-width: 1120px;
  transform: translateX(-50%);
  width: min(1120px, calc(100vw - 40px));
}

.post-content .workflow-videos > h2,
.post-content .workflow-videos__intro {
  margin-left: auto;
  margin-right: auto;
  max-width: 820px;
  text-align: center;
}

.post-content .workflow-videos__intro {
  color: var(--text-mid);
  margin-bottom: 1.8rem;
}

.workflow-videos__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workflow-video {
  background: #fff;
  border: 1px solid rgba(20, 36, 52, .1);
  border-radius: 22px;
  box-shadow: 0 18px 46px rgba(20, 36, 52, .14);
  margin: 0;
  overflow: hidden;
}

.workflow-video__media {
  /* Both gendo-workflow.mp4 and pelicad-workflow.mp4 are actually 1152x720 (8:5), not 16:9 —
     the mismatched box plus object-fit: cover below zoomed into both the poster stills and
     the playing video. Sized to the real ratio, with contain instead of cover so playback
     never crops even if a future clip's ratio differs slightly. */
  aspect-ratio: 8 / 5;
  background: #142434;
  overflow: hidden;
  position: relative;
}

.workflow-video video {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.workflow-video__label {
  background: #aef7b7;
  border: 1px solid rgba(20, 36, 52, .14);
  border-radius: 10px;
  color: #142434;
  font-size: .76rem;
  font-weight: 700;
  left: 16px;
  letter-spacing: .1em;
  padding: 8px 12px;
  position: absolute;
  text-transform: uppercase;
  top: 16px;
  z-index: 2;
}

.workflow-video__sound-tip {
  align-items: center;
  backdrop-filter: blur(10px);
  background: rgba(20, 36, 52, .84);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 9px;
  bottom: 14px;
  color: #fff;
  display: inline-flex;
  font-size: .7rem;
  font-weight: 600;
  gap: 7px;
  left: 14px;
  line-height: 1.35;
  max-width: calc(100% - 28px);
  padding: 7px 10px;
  position: absolute;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 2;
}

.workflow-video.is-loaded .workflow-video__sound-tip {
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
}

.inline-floating-cta {
  animation: inlineCtaFloat 4.6s ease-in-out infinite;
  background: linear-gradient(145deg, rgba(174, 247, 183, .48), rgba(255, 255, 255, .96));
  border: 1px solid rgba(20, 36, 52, .12);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(20, 36, 52, .13);
  clear: right;
  float: right;
  margin: .4rem 0 1.6rem 2rem;
  padding: 18px;
  width: min(285px, 42%);
}

.post-content .inline-floating-cta p {
  color: var(--text-mid);
  font-size: .86rem;
  line-height: 1.5;
  margin: 0 0 13px;
}

.post-content .inline-floating-cta .inline-floating-cta__title {
  color: #142434;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 7px;
}

.inline-floating-cta .btn {
  background: #aef7b7;
  border-color: #aef7b7;
  color: #142434;
  font-size: .75rem;
  min-height: 38px;
  padding: 9px 13px;
}

.inline-floating-cta .btn:hover,
.inline-floating-cta .btn:focus-visible {
  background: #142434;
  border-color: #142434;
  color: #fff;
}

.numbered-task-list,
.blog-checklist {
  clear: both;
}

@keyframes inlineCtaFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.workflow-video__play {
  align-items: center;
  backdrop-filter: blur(12px);
  background: rgba(20, 36, 52, .88);
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  height: 68px;
  justify-content: center;
  left: 50%;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background .2s ease, transform .2s ease;
  width: 68px;
  z-index: 2;
}

.workflow-video__play:hover,
.workflow-video__play:focus-visible {
  background: #142434;
  transform: translate(-50%, -50%) scale(1.06);
}

.workflow-video__play:focus-visible {
  outline: 3px solid #aef7b7;
  outline-offset: 3px;
}

.workflow-video__play svg {
  fill: currentColor;
  height: 28px;
  margin-left: 3px;
  width: 28px;
}

.workflow-video.is-loaded .workflow-video__play {
  display: none;
}

.post-content > hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 3.5rem auto 2rem;
  max-width: 720px;
}

.post-sources {
  color: var(--text-light);
  font-size: .84rem;
  line-height: 1.7;
  max-width: 820px;
}

.post-sources a {
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .comparison-deck {
    width: min(100%, calc(100vw - 28px));
  }

  .comparison-card,
  .comparison-card__images {
    min-height: 680px;
  }

  .comparison-deck__stack {
    min-height: 840px;
  }

  .comparison-deck__controls {
    height: 680px;
  }

  .comparison-card__images {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  /* Pelicad/xFigura stack vertically here instead of sitting side by side, so there's no
     longer a shared row to match remarks height against — each figure's own row from the
     parent grid (redefined just above) is for that ONE figure, not one row per remarks/image
     pair shared across both. Go back to each figure sizing its own remarks/image normally. */
  .comparison-card figure {
    grid-row: auto;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .comparison-card figure + figure {
    border-left: 0;
    border-top: 2px solid rgba(20, 36, 52, .14);
  }

  .comparison-card__overlay {
    top: calc(100% + 12px);
    transform: translate(-50%, -20%);
    width: calc(100% - 32px);
  }
}

@media (max-width: 760px) {
  .inline-floating-cta {
    clear: both;
    float: none;
    margin: 1.5rem auto 2rem;
    width: 100%;
  }

  .platform-preview-grid {
    grid-template-columns: 1fr;
    width: calc(100vw - 24px);
  }

  .platform-comparison {
    border-radius: 18px;
    width: calc(100vw - 24px);
  }

  .platform-comparison__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    top: 62px;
  }

  .platform-comparison__column-title--category {
    display: none;
  }

  .platform-comparison__details {
    grid-template-columns: 1fr;
  }

  .platform-comparison__spacer {
    display: none;
  }

  .platform-comparison__cell {
    border-left: 0;
    border-top: 1px solid rgba(20, 36, 52, .08);
    padding: 17px;
  }

  .platform-comparison__mobile-label {
    background: #aef7b7;
    border-radius: 8px;
    color: #142434;
    display: inline-flex;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    margin-bottom: 10px;
    padding: 6px 9px;
    text-transform: uppercase;
  }

  .workflow-videos {
    margin-bottom: 3.5rem;
    width: calc(100vw - 24px);
  }

  .workflow-videos__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .post-content .numbered-task-list li {
    padding: 14px;
  }

  .comparison-deck {
    margin-bottom: 3.5rem;
    width: calc(100vw - 20px);
  }

  .comparison-card,
  .comparison-card__images {
    min-height: 650px;
  }

  .comparison-deck__stack {
    min-height: 820px;
  }

  .comparison-deck__controls {
    height: 650px;
  }

  .comparison-card {
    border-radius: 18px;
  }

  .comparison-card__images {
    border-radius: 18px;
  }

  .comparison-card__remarks {
    max-height: 150px;
    padding: 14px;
  }

  .post-content .comparison-card__remarks ul {
    gap: 9px;
  }

  .post-content .comparison-card__remarks li {
    font-size: .75rem;
  }

  .comparison-card__overlay {
    border-radius: 14px;
    gap: 11px;
    padding: 14px;
    top: calc(100% + 10px);
    transform: translate(-50%, -20%);
    width: calc(100% - 22px);
  }

  .comparison-card__step {
    height: 30px;
    width: 34px;
  }

  .post-content .comparison-card__overlay h3 {
    font-size: 1rem;
  }

  .post-content .comparison-card__overlay p {
    font-size: .78rem;
  }

  .comparison-deck__button {
    font-size: 0;
    height: 42px;
    justify-content: center;
    padding: 0;
    width: 42px;
  }

  .comparison-deck__button {
    left: 10px;
  }

  .comparison-deck__button--next {
    left: auto;
    right: 10px;
  }

  .comparison-deck__button span {
    font-size: 1rem;
  }

  .workflow-video {
    border-radius: 16px;
  }

  .workflow-video__label {
    left: 12px;
    top: 12px;
  }

  .workflow-video__play {
    height: 58px;
    width: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .comparison-card,
  .comparison-card img,
  .comparison-deck__button {
    transition: none;
  }

  .inline-floating-cta {
    animation: none;
  }
}