/* =========================================================
   Zoie — compare page (content from zoie.ai/compare). Builds on
   styles.css + pricing.css: the dark .p-hero header, pills and the
   .p-compare / .compare table are shared with the pricing page.
   ========================================================= */

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Header: the dark background sits behind the header text only ---------- */
.cmp-hero { padding-bottom: 104px; }
.cmp-hero .p-hero-bg { height: auto; bottom: 0; }
.cmp-sub { max-width: 620px; margin-inline: auto; }

/* ---------- The alternatives: text and a picture side by side, alternating ---------- */
.cmp-list { padding: 128px 0 16px; }
.cmp-row {
  width: 1180px; max-width: calc(100% - 64px); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center;
}
.cmp-row + .cmp-row { margin-top: 140px; }
.cmp-row--flip .cmp-media { order: -1; }   /* picture on the left every other row */
.cmp-row-title { font-size: 36px; line-height: 44px; font-weight: 700; letter-spacing: -.02em; color: #0b0c0e; }
.cmp-row-text { margin-top: 22px; font-size: 17px; line-height: 27px; color: #4a5054; }
.btn--read { width: auto; min-width: 168px; margin-top: 34px; padding: 0 6px 0 22px; gap: 28px; justify-content: space-between; }

.cmp-media {
  aspect-ratio: 576 / 452; border-radius: 24px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(70% 80% at 50% 0%, #fff, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #eef0f3, #e3e6ea);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
/* compare page: the logo panels are black, with soft light slowly drifting across them */
.cmp-row .cmp-media {
  position: relative; isolation: isolate;
  background: linear-gradient(160deg, #15171b 0%, #08090c 55%, #030406 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.cmp-row .cmp-media::before {
  content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(28% 32% at 32% 30%, rgba(255, 255, 255, .13), transparent 70%),
    radial-gradient(30% 30% at 70% 62%, rgba(142, 160, 255, .14), transparent 70%),
    radial-gradient(36% 30% at 48% 88%, rgba(160, 170, 190, .09), transparent 70%);
}
.motion .cmp-row .cmp-media::before { animation: cmp-drift 14s ease-in-out infinite alternate; }
.motion .cmp-row:nth-child(even) .cmp-media::before { animation-duration: 17s; animation-direction: alternate-reverse; }   /* neighbours don't move in step */
@keyframes cmp-drift {
  0%   { transform: translate(-8%, -5%) rotate(0deg); }
  50%  { transform: translate(6%, 4%) rotate(10deg); }
  100% { transform: translate(-2%, 8%) rotate(-8deg); }
}
.cmp-row .cmp-vs { color: rgba(255, 255, 255, .5); }
.cmp-row .cmp-chip { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9); }
.cmp-match { display: flex; align-items: center; gap: 22px; }
.cmp-chip {
  display: grid; place-items: center; height: 76px; min-width: 76px; padding: 0 18px; border-radius: 20px;
  background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 14px 30px -16px rgba(20, 24, 32, .35);
}
.cmp-chip img { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; }   /* contain: a logo never stretches, whatever box it gets */
.cmp-chip--zoie { padding: 0 26px; }
.cmp-chip--zoie img { width: 98px; height: auto; border-radius: 0; }
.cmp-vs { font-size: 13px; line-height: 16px; color: #8a9097; }

/* ---------- Zoie vs a generic chatbot (the pricing page's compare table) ---------- */
.cmp-lead { color: rgba(226, 230, 240, .7); }
.cmp-compare .c-col-label { width: 30%; }
.cmp-compare th, .cmp-compare td { text-align: left; padding-left: 24px; }
.cmp-compare tbody th, .cmp-compare .c-corner { padding-left: 28px; }
.cmp-compare .c-plans th, .cmp-compare .c-corner { height: 76px; }
.cmp-colhead { font-size: 13px; line-height: 16px; color: var(--c-muted); }
.cmp-zoie { width: 70px; height: auto; }
.cmp-other { font-size: 17px; line-height: 22px; color: rgba(255, 255, 255, .7); }
.cmp-compare .c-feat th, .cmp-compare .c-feat td { height: 70px; }
.cmp-cell { position: relative; display: flex; align-items: flex-start; gap: 12px; font-weight: 500; }   /* relative: keeps the hidden .vh labels inside the scrolling table */
.cmp-cell .c-ico { flex: none; margin-top: 1px; }
.cmp-compare td:not(.is-hl) .cmp-cell { font-weight: 400; color: rgba(226, 230, 240, .62); }
.cmp-cell.is-no .c-ico { color: #4d535c; }


/* =========================================================
   DETAIL PAGES (zoie-vs-*.html) — same header, rows and table
   ========================================================= */
.cmp-hero-match { display: flex; justify-content: center; margin-bottom: 30px; }   /* the logo match-up above the title */
.cmp-hero-match .cmp-vs { color: rgba(255, 255, 255, .5); }
.cmp-hero-match .cmp-chip { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9); }
.cmp-detail-title { max-width: 1140px; margin-inline: auto; padding-inline: 20px; }   /* each page's gradient half of the title fits on one line */

/* quick verdict: one wide text column */
.cmp-verdict { width: 1000px; max-width: calc(100% - 64px); margin: 0 auto; padding-top: 120px; }
.cmp-verdict .p-eyebrow { font-size: 14px; line-height: 18px; letter-spacing: 1.6px; color: #5866d8; }
.cmp-verdict-lead { margin-top: 20px; font-size: 30px; line-height: 42px; font-weight: 500; letter-spacing: -.015em; color: #0b0c0e; }
.cmp-verdict .cmp-row-text { margin-top: 26px; font-size: 20px; line-height: 33px; }
.cmp-bottom { padding-top: 110px; text-align: center; }   /* after the channels band, before the footer */
.cmp-bottom .cmp-verdict-lead { max-width: 900px; margin-inline: auto; }
.cmp-verdict-lead.is-scrub .sw { color: rgba(11, 12, 14, .16); transition: color .3s ease; }   /* main.js section 20 lights the words as you scroll */
.cmp-verdict-lead.is-scrub .sw.is-lit { color: #0b0c0e; }

/* side-by-side: the rival's column carries long notes, so it gets the room */
.cmp-table--bare { padding-top: 120px; }   /* just the table: no heading above it */
.cmp-table--bare .compare-scroll { margin-top: 0; }
.cmp-compare--detail .c-col-label { width: 25%; }
.cmp-compare--detail col.is-hl { width: 30%; }
.cmp-compare--detail .c-feat th, .cmp-compare--detail .c-feat td { height: auto; padding-top: 22px; padding-bottom: 22px; }
.cmp-rival { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; line-height: 22px; font-weight: 600; color: rgba(255, 255, 255, .78); }
.cmp-rival img { border-radius: 5px; }
.cmp-cell.is-yes .c-ico { color: var(--c-accent); }

/* what Zoie does instead */
.cmp-instead, .cmp-others { width: 1180px; max-width: calc(100% - 64px); margin: 0 auto; }
.cmp-instead { padding-top: 120px; }
.cmp-section-title { font-size: 38px; line-height: 46px; font-weight: 700; letter-spacing: -.02em; color: #0b0c0e; }
.cmp-section-lead { margin-top: 12px; font-size: 17px; line-height: 26px; color: #4a5054; }
.cmp-instead > .cmp-section-title, .cmp-instead > .cmp-section-lead { text-align: center; }
.cmp-instead > .cmp-section-lead { max-width: 760px; margin-inline: auto; }
/* scroll story: texts on the left, a pinned picture on the right that swaps with them */
.cmp-story { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; margin-top: 40px; }
.cmp-step { min-height: max(540px, 64vh); display: flex; flex-direction: column; justify-content: center; }
.cmp-step-media { display: none; }   /* phones/tablets only; on desktop the pinned panel shows the picture */
.cmp-story.is-live .cmp-step { opacity: .22; transition: opacity .5s var(--ease-out); }
.cmp-story.is-live .cmp-step.is-active { opacity: 1; }
.cmp-story-pin { position: sticky; top: max(96px, calc(50vh - 270px)); aspect-ratio: 1 / 1; }   /* square, so the bigger phones show more */
.cmp-story-panel { position: absolute; inset: 0; aspect-ratio: auto; opacity: 0; }
.cmp-story-panel.is-active { opacity: 1; }
.motion .cmp-story-panel { transition: opacity .7s var(--ease-out); }
.motion .cmp-story-panel img { transform: translateY(48px) scale(.97); transition: transform .9s var(--ease-out); }
.motion .cmp-story-panel.is-active img { transform: none; }
/* phone screenshot on a tinted panel, cut off by the panel's bottom edge */
.cmp-media--phone { align-items: flex-start; padding-top: 44px; }
.cmp-media--phone img { width: 62%; max-width: 340px; height: auto; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .3)); }
.cmp-media--voice  { background: radial-gradient(70% 70% at 50% 0%, rgba(255, 255, 255, .14), transparent 70%), linear-gradient(180deg, #2a2d31, #121416); }
.cmp-media--msg    { background: radial-gradient(70% 70% at 50% 0%, rgba(255, 255, 255, .3), transparent 70%), linear-gradient(180deg, #3ddc84, #1faa59); }
.cmp-media--web    { background: radial-gradient(70% 70% at 50% 0%, rgba(255, 255, 255, .35), transparent 70%), linear-gradient(180deg, #c3cbff, #8ea0ff); }


/* channels band: the home page's integrations conveyor (.int-hero in styles.css), titled, with the details below */
.cmp-channels { margin-top: 110px; padding: 100px 0 96px; overflow: hidden; border-radius: 24px; background: var(--glow), var(--charcoal); color: #fff; text-align: center; }
.cmp-channels-title { padding-inline: 24px; font-size: 38px; line-height: 46px; font-weight: 700; letter-spacing: -.02em; }
/* the hub: lines converging on Zoie, app icons gliding in along them. Drawn in a 1200 x 560
   scene and scaled to the band by --k (main.js section 11); never below half size, so phones crop the sides */
.hub { --k: 1; position: relative; height: calc(560px * var(--k)); margin-top: 8px; overflow: hidden; }
.hub-scene { position: absolute; left: 50%; top: 0; width: 1200px; height: 560px; margin-left: -600px; transform: scale(var(--k)); transform-origin: 600px 0; }
.hub-lines { position: absolute; inset: 0; }
.hub-icon { position: absolute; left: 0; top: 0; z-index: 1; width: 84px; height: 84px; border-radius: 20px; transform-origin: 50% 50%; will-change: transform, opacity; }
.hub-core {
  position: absolute; left: 548px; top: 228px; z-index: 2; width: 104px; height: 104px; border-radius: 28px;
  display: grid; place-items: center; background: linear-gradient(160deg, #fff, #e4e8f4);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 0 70px 6px rgba(160, 178, 255, .32), 0 24px 50px -20px rgba(0, 0, 0, .8);
}
.cmp-channels-text { width: 780px; max-width: calc(100% - 64px); margin: 56px auto 0; }   /* "What Zoie is built for", centred under the line */
.cmp-channels-sub { font-size: 30px; line-height: 38px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.cmp-channels-text p { margin-top: 16px; font-size: 17px; line-height: 28px; color: rgba(226, 230, 240, .72); }

/* other comparisons */
.cmp-others { padding-bottom: 120px; }
.cmp-others-title { font-size: 30px; line-height: 38px; }
.cmp-others-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; }
.cmp-other-card { display: block; overflow: hidden; border-radius: 20px; background: #f6f7f9; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); transition: transform .35s var(--ease-out), box-shadow .3s; }
.cmp-other-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 22px 40px -28px rgba(20, 24, 32, .5); }
.cmp-other-card .cmp-media { aspect-ratio: auto; height: 150px; border-radius: 0; box-shadow: none; }
.cmp-other-card .cmp-match { gap: 12px; }
.cmp-other-card .cmp-chip { height: 46px; min-width: 46px; padding: 0 11px; border-radius: 12px; }
.cmp-other-card .cmp-chip img { width: 24px; height: 24px; border-radius: 5px; }
.cmp-other-card .cmp-chip--zoie { padding: 0 15px; }
.cmp-other-card .cmp-chip--zoie img { width: 58px; height: auto; border-radius: 0; }
.cmp-other-name { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 18px; font-size: 15px; line-height: 20px; font-weight: 600; color: #0b0c0e; }
.cmp-other-name svg { color: #8a9097; transition: transform .3s var(--ease-out), color .2s; }
.cmp-other-card:hover .cmp-other-name svg { color: #0b0c0e; transform: translateX(3px); }

/* =========================================================
   CLOSING CALL TO ACTION (all compare pages): a light card, the
   copy on the left, the dashboard bleeding off the right and bottom
   ========================================================= */
.cmp-final { padding: 120px 0 110px; }
.cmp-final-card {
  position: relative; overflow: hidden; width: 1180px; max-width: calc(100% - 64px); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; min-height: 560px;
  border-radius: 32px; background: #f1f2f4; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.cmp-final-copy { padding: 72px 0 72px 64px; }
.cmp-final-title { font-size: 46px; line-height: 52px; font-weight: 700; letter-spacing: -.025em; color: #0b0c0e; }
.cmp-final-points { margin-top: 30px; display: grid; gap: 16px; }
.cmp-final-points li { display: flex; align-items: center; gap: 14px; font-size: 17px; line-height: 24px; color: #2b2f33; }
.cmp-final-tick { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; }
.cmp-final-btn { width: auto; margin-top: 36px; padding: 0 26px; gap: 14px; }
.cmp-final-note { margin-top: 20px; font-size: 14px; line-height: 20px; color: #6b7280; }
.cmp-final-note a { color: #0b0c0e; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.cmp-final-shot { position: absolute; left: 53%; bottom: -60px; }   /* runs off the card's right and bottom edges, whatever the card's height */
.cmp-final-shot img {
  display: block; width: 880px; max-width: none; height: auto;
  border-radius: 16px 0 0 0; border: 8px solid #fff; border-right: 0; border-bottom: 0;
  box-shadow: 0 30px 60px -30px rgba(20, 24, 32, .35), 0 0 0 1px rgba(0, 0, 0, .06);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1219px) {
  .cmp-row { width: calc(min(760px, 100%) - 64px); max-width: none; grid-template-columns: 1fr; gap: 36px; }   /* stacked: picture, then text */
  .cmp-row + .cmp-row { margin-top: 96px; }
  .cmp-row .cmp-media { order: -1; }
  .cmp-list { padding-top: 96px; }
  .cmp-compare { min-width: 0; }
  .cmp-table .compare-hint { display: none; }
  .cmp-table--bare { padding-top: 96px; }
  .cmp-instead, .cmp-others { width: calc(min(760px, 100%) - 64px); max-width: none; }
  .cmp-final-card { grid-template-columns: minmax(0, 1fr); gap: 0; }   /* stacked: copy, then the dashboard (minmax(0): the wide image must not widen the text column) */
  .cmp-final-copy { padding: 56px 48px 0; text-align: center; }
  .cmp-final-text { margin-inline: auto; }
  .cmp-final-points { width: fit-content; margin-inline: auto; text-align: start; }   /* the checklist stays a tidy block, centred */
  .cmp-final-card { min-height: 0; }
  .cmp-final-shot { position: relative; left: auto; bottom: auto; margin: 48px 48px -60px; }   /* stacked: centred, cut at the bottom */
  .cmp-final-shot img { width: 100%; border: 8px solid #fff; border-bottom: 0; border-radius: 16px 16px 0 0; }
  .cmp-instead { padding-top: 96px; }
  .cmp-story { display: block; margin-top: 48px; }   /* stacked: each text gets its own picture */
  .cmp-story-stage { display: none; }
  .cmp-step { min-height: 0; }
  .cmp-step + .cmp-step { margin-top: 80px; }
  .cmp-step-media { display: flex; margin-bottom: 30px; aspect-ratio: 4 / 3; }
  .cmp-story.is-live .cmp-step { opacity: 1; }
  /* stacked: title, then the picture, then the text (and button) */
  .cmp-row .cmp-text { display: contents; }
  .cmp-row .cmp-row-title { order: 1; }
  .cmp-row .cmp-media { order: 2; aspect-ratio: 2 / 1; }   /* shorter logo panels */
  .cmp-row .cmp-row-text { order: 3; margin-top: 0; }
  .cmp-row .btn--read { order: 4; margin-top: 0; justify-self: start; }
  .cmp-step { text-align: center; }   /* stacked: title and text centred over / under the picture */
  .cmp-step .cmp-row-title { order: 1; }
  .cmp-step .cmp-step-media { order: 2; margin: 26px 0; }
  .cmp-step .cmp-row-text { order: 3; margin-top: 0; }
  /* pinned like the home page's channels (main.js section 9 sets the scroll length): one step on screen at a time */
  /* the top padding clears the fixed menu bar once pinned; the negative margin keeps the gap under the intro small before that */
  .cmp-story.is-pinned { margin-top: -36px; }
  .cmp-story.is-pinned .cmp-story-steps {
    position: sticky; top: 0; height: 100vh; height: 100svh; padding: 76px 0 24px;
    display: grid; grid-template-rows: minmax(0, 1fr);
  }
  .cmp-story.is-live.is-pinned .cmp-step {
    grid-row: 1; grid-column: 1; display: flex; flex-direction: column; min-height: 0; margin: 0;
    opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .45s var(--ease-out), transform .6s var(--ease-out);
  }
  .cmp-story.is-live.is-pinned .cmp-step.is-active { opacity: 1; transform: none; pointer-events: auto; }
  .cmp-story.is-pinned .cmp-step .cmp-step-media { flex: 1 1 auto; min-height: 120px; aspect-ratio: auto; }
  .cmp-story.is-pinned .cmp-step .cmp-step-media img { transform: translateY(36px); transition: transform .8s var(--ease-out); }
  .cmp-story.is-pinned .cmp-step.is-active .cmp-step-media img { transform: none; }
  .cmp-others-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .cmp-hero { padding-bottom: 72px; }
  .cmp-list { padding-top: 64px; }
  .cmp-row { width: calc(100% - 32px); gap: 20px; }
  .cmp-row .cmp-media { aspect-ratio: 16 / 9; }
  /* the channel hub: on phones only its middle band (scene y 100-460), where the lines and icons are; less empty black */
  .hub { height: calc(360px * var(--k)); }
  .hub-scene { top: calc(-100px * var(--k)); }
  .cmp-row + .cmp-row { margin-top: 72px; }
  .cmp-row-title { font-size: 26px; line-height: 33px; }
  .cmp-row-text { margin-top: 16px; font-size: 16px; line-height: 25px; }
  .btn--read { margin-top: 26px; }
  .cmp-media { border-radius: 20px; }
  .cmp-match { gap: 16px; }
  .cmp-chip { height: 58px; min-width: 58px; padding: 0 14px; border-radius: 15px; }
  .cmp-chip img { width: 30px; height: 30px; border-radius: 6px; }
  .cmp-chip--zoie { padding: 0 20px; }
  .cmp-chip--zoie img { width: 74px; height: auto; }   /* keep the wordmark's own proportions (the rule above sets a square box) */
  /* the comparison tables in one view, like the pricing table: feature, Zoie and the other side by side,
     compact, with the header row pinned while the table scrolls (no sideways swiping) */
  .cmp-compare, .cmp-compare--detail { min-width: 0; }
  .cmp-table .compare-hint { display: none; }
  .cmp-table .compare-scroll { width: calc(100% - 24px); overflow: visible; }
  .cmp-compare col, .cmp-compare--detail col.is-hl { width: 36%; }   /* Zoie and the other get equal columns */
  .cmp-compare col.c-col-label, .cmp-compare--detail col.c-col-label { width: 28%; }
  .cmp-compare th, .cmp-compare td { padding-left: 8px; padding-right: 8px; }
  .cmp-compare tbody th, .cmp-compare .c-corner { padding-left: 12px; }
  .cmp-compare tbody th { position: static; box-shadow: none; background: none; font-size: 12.5px; line-height: 16px; }
  .cmp-compare thead th, .cmp-compare .c-plans .c-corner { position: sticky; top: 68px; left: auto; right: auto; z-index: 3; background: var(--c-bg); box-shadow: 0 1px 0 var(--c-line); }
  .cmp-compare thead .is-hl { background: var(--c-hl); }
  .cmp-compare thead td:first-child { border-start-start-radius: 19px; }
  .cmp-compare thead th:last-child { border-start-end-radius: 19px; }
  .cmp-compare .c-plans th, .cmp-compare .c-corner { height: auto; padding-top: 14px; padding-bottom: 12px; }
  .cmp-colhead { font-size: 12px; line-height: 15px; }
  .cmp-compare thead .cmp-zoie { width: 58px; }
  .cmp-compare .cmp-rival, .cmp-compare .cmp-other { gap: 6px; font-size: 13px; line-height: 16px; }
  .cmp-compare .cmp-rival img { width: 18px; height: 18px; }
  .cmp-compare .c-feat th, .cmp-compare .c-feat td { height: auto; padding-top: 12px; padding-bottom: 12px; }
  .cmp-cell { gap: 6px; font-size: 12.5px; line-height: 16px; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  .cmp-cell .c-ico { width: 14px; height: 14px; }
  [dir="rtl"] .cmp-compare th, [dir="rtl"] .cmp-compare td { padding-left: 8px; padding-right: 8px; }
  [dir="rtl"] .cmp-compare tbody th, [dir="rtl"] .cmp-compare .c-corner { padding-right: 12px; }
  .cmp-table--bare { padding-top: 28px; }
  .cmp-verdict { width: calc(100% - 32px); max-width: none; padding-top: 64px; }
  .cmp-verdict .p-eyebrow { font-size: 12.5px; }
  .cmp-verdict-lead { margin-top: 14px; font-size: 22px; line-height: 32px; }
  .cmp-verdict .cmp-row-text { margin-top: 18px; font-size: 17.5px; line-height: 28px; }
  .cmp-instead, .cmp-others { width: calc(100% - 32px); }
  .cmp-final { padding: 72px 0 80px; }
  .cmp-final-card { max-width: calc(100% - 32px); border-radius: 22px; }
  .cmp-final-copy { padding: 36px 22px 0; }
  .cmp-final-title { font-size: 30px; line-height: 36px; }
  .cmp-final-points { margin-top: 22px; gap: 12px; }
  .cmp-final-points li { font-size: 15px; line-height: 21px; gap: 12px; }
  .cmp-final-tick { width: 22px; height: 22px; }
  .cmp-final-btn { max-width: 100%; height: auto; min-height: 50px; margin-top: 28px; padding: 12px 20px; font-size: 14.5px; white-space: normal; text-align: center; }   /* longer translations wrap */
  .cmp-final-shot { margin: 32px 16px -40px; }
  .cmp-final-shot img { width: 100%; border-width: 5px; border-bottom-width: 0; border-radius: 12px 12px 0 0; }
  .cmp-instead { padding-top: 72px; }
  .cmp-section-title { font-size: 30px; line-height: 38px; }   /* phones: headlines 30px like the rest of the site */
  .cmp-section-lead { font-size: 16px; line-height: 24px; }
  .cmp-story { margin-top: 36px; }
  .cmp-step + .cmp-step { margin-top: 64px; }
  .cmp-step-media { margin-bottom: 24px; aspect-ratio: 1 / 1; }
  .cmp-step .cmp-step-media { margin: 20px 0; }
  .cmp-media--phone { padding-top: 28px; }
  .cmp-channels { margin-top: 72px; padding: 64px 0 60px; border-radius: 20px; }
  .cmp-channels-title { font-size: 30px; line-height: 38px; }
  .cmp-final-note { font-size: 16px; line-height: 22px; }
  .cmp-channels-text { width: calc(100% - 48px); margin-top: 36px; }
  .cmp-channels-sub { font-size: 24px; line-height: 31px; }
  .cmp-channels-text p { margin-top: 12px; font-size: 16px; line-height: 26px; }
  .cmp-others { padding-bottom: 84px; }
  .cmp-others-title { font-size: 24px; line-height: 31px; }
  .cmp-others-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
  .cmp-other-card .cmp-media { height: 110px; }
  .cmp-other-card .cmp-match { gap: 7px; }
  .cmp-other-card .cmp-chip { height: 36px; min-width: 36px; padding: 0 8px; border-radius: 10px; }
  .cmp-other-card .cmp-chip img { width: 20px; height: 20px; }
  .cmp-other-card .cmp-chip--zoie { padding: 0 9px; }
  .cmp-other-card .cmp-chip--zoie img { width: 42px; height: auto; }
  .cmp-other-card .cmp-vs { font-size: 11px; }
  .cmp-other-name { padding: 12px 14px 14px; font-size: 13.5px; }
}

/* =========================================================
   RIGHT-TO-LEFT (Arabic): the closing card's copy moves to the
   right, so the dashboard bleeds off the left edge instead
   ========================================================= */
[dir="rtl"] .cmp-compare th, [dir="rtl"] .cmp-compare td { text-align: right; padding-left: 0; padding-right: 24px; }
[dir="rtl"] .cmp-final-copy { padding: 72px 64px 72px 0; }
[dir="rtl"] .cmp-final-shot { left: auto; right: 53%; }
[dir="rtl"] .cmp-final-shot img { border-radius: 0 16px 0 0; border-right: 8px solid #fff; border-left: 0; }
@media (max-width: 1219px) {
  [dir="rtl"] .cmp-final-copy { padding: 56px 48px 0; }
  [dir="rtl"] .cmp-final-shot { right: auto; }
  [dir="rtl"] .cmp-final-shot img { border: 8px solid #fff; border-bottom: 0; border-radius: 16px 16px 0 0; }
}
@media (max-width: 640px) {
  [dir="rtl"] .cmp-final-copy { padding: 36px 22px 0; }
  [dir="rtl"] .cmp-final-shot img { border-width: 5px; border-bottom-width: 0; border-radius: 12px 12px 0 0; }
}

/* =========================================================
   The alternatives as cards (user's request, 2026-11-02: "box out each article, make it look better"): each comparison
   in a white card like the blog's and the testimonials', the whole card one link (the "Read more" link stretched over it),
   smaller words; stacked screens put the picture on top as a short banner, phones keep three lines of the summary
   ========================================================= */
.cmp-list { padding-top: 96px; }
.cmp-list .cmp-row {
  position: relative; gap: 48px; padding: 24px; border-radius: 24px; background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 22px 40px -22px rgba(30, 41, 59, .32), inset 0 0 0 1px #e9edef;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.cmp-list .cmp-row + .cmp-row { margin-top: 28px; }
.cmp-list .cmp-row:hover { transform: translateY(-3px); box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 30px 50px -24px rgba(30, 41, 59, .4), inset 0 0 0 1px #dfe3ea; }
.cmp-list .cmp-text { padding: 8px 16px; }
.cmp-list .cmp-row-title { font-size: 28px; line-height: 35px; }
.cmp-list .cmp-row-text { margin-top: 14px; font-size: 16px; line-height: 25px; }
.cmp-list .btn--read { margin-top: 24px; }
.cmp-list .btn--read::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 24px; }   /* the whole card opens the comparison */
.cmp-list .btn--read, .cmp-list .btn--read:hover { transform: none; }   /* a moving link would carry the stretched area with it */
.cmp-list .cmp-row:hover .btn--read { box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); }
.cmp-list .cmp-row:hover .btn-dot { transform: translateX(2px); }
.cmp-list .cmp-row .cmp-media { aspect-ratio: 16 / 10; border-radius: 16px; }
@media (max-width: 1219px) {
  .cmp-list .cmp-row { gap: 18px; padding: 16px 16px 24px; }
  .cmp-list .cmp-row + .cmp-row { margin-top: 24px; }
  .cmp-list .cmp-row .cmp-media { order: 0; aspect-ratio: 2.4 / 1; border-radius: 14px; }   /* picture first, as a short banner */
  .cmp-list .cmp-row .cmp-row-title { order: 1; padding-inline: 8px; }
  .cmp-list .cmp-row .cmp-row-text { order: 2; margin-top: -6px; padding-inline: 8px; }
  .cmp-list .cmp-row .btn--read { order: 3; margin: 2px 8px 0; }
}
@media (max-width: 640px) {
  .cmp-list { padding-top: 56px; }
  .cmp-list .cmp-row { gap: 14px; padding: 12px 12px 20px; border-radius: 20px; }
  .cmp-list .btn--read::after { border-radius: 20px; }
  .cmp-list .cmp-row + .cmp-row { margin-top: 16px; }
  .cmp-list .cmp-row .cmp-media { aspect-ratio: 2.3 / 1; border-radius: 12px; }
  .cmp-list .cmp-row-title { font-size: 19px; line-height: 25px; }
  .cmp-list .cmp-row .cmp-row-text {
    margin-top: -4px; font-size: 14.5px; line-height: 22px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;   /* the rest is on the comparison itself */
  }
  .cmp-list .btn--read { height: 40px; min-width: 140px; font-size: 13.5px; }
  .cmp-list .btn--read .btn-dot { width: 30px; height: 30px; }
  .cmp-list .cmp-match { gap: 14px; }
  .cmp-list .cmp-chip { height: 52px; min-width: 52px; padding: 0 12px; border-radius: 14px; }
  .cmp-list .cmp-chip img { width: 28px; height: 28px; border-radius: 6px; }
  .cmp-list .cmp-chip--zoie { padding: 0 16px; }
  .cmp-list .cmp-chip--zoie img { width: 70px; height: auto; border-radius: 0; }
}
@media (min-width: 375px) and (max-width: 640px) {   /* the short English table cells (2026-11-02) wrap whole words, no "hu-man", "sug-gests"; the narrowest phones keep hyphens for "Conversational" */
  .cmp-cell:lang(en) { -webkit-hyphens: manual; hyphens: manual; }
}
@media (max-width: 640px) {   /* phones: a long row label ("Conversational…", German "Terminbuchung") hyphenates, or breaks as a last resort, rather than run past its column */
  .cmp-compare tbody th { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  .cmp-compare--detail .cmp-cell > span { overflow-wrap: anywhere; }   /* a word longer than its column ("Conversation" in the Arabic font) breaks rather than spill over */
}
/* "What Zoie does instead" on phones and tablets: the phones larger, like the home page's (user's request, 2026-11-02;
   they were 62% of the panel): nearly the panel's width, the mockups' empty top band tucked under its top edge (the
   frame starts 25.4% of the image's width down; the website chat keeps more, for its "Need Help?" bubble) */
@media (max-width: 1219px) {
  .cmp-step .cmp-media--phone { padding-top: 20px; }
  .cmp-step .cmp-media--phone img { --w: min(96%, 420px); width: var(--w); max-width: none; margin-top: calc(var(--w) * -.19); }
  .cmp-step .cmp-media--web img { margin-top: calc(var(--w) * -.07); }
}
/* the same on desktop (user's request, 2026-11-02: "bigger so less space at the top"): the pinned panel's phones at 86% of
   the panel (were 62%), the empty band above the frame tucked under the panel's top edge */
@media (min-width: 1220px) {
  .cmp-story-panel.cmp-media--phone { padding-top: 30px; }
  .cmp-story-panel.cmp-media--phone img { --w: min(86%, 480px); width: var(--w); max-width: none; margin-top: calc(var(--w) * -.19); }
  .cmp-story-panel.cmp-media--web img { margin-top: calc(var(--w) * -.07); }
}