/* The comparison ("X alternative") pages. Loaded only by *-alternative.html, so nothing here
   reaches an app. Rob's picks, 27 Oct 2026:
   - Laptop and iPad: option C of outputs/comparison-page-mocks-2026-10-27/round2/. A soft lilac
     band across the top, the words left and the app's real picture right, so neither half of the
     first screen is empty. Four apps show as a 2 x 2 of pictures with name tags; one app as its
     picture alone.
   - Phone: Phone 1 of the first round. Title, answer, then the apps two by two (or one card)
     above the first scroll.
   Below the band: the verdict pair, the side-by-side table, question-headed sections, FAQ, try it. */
:root { --ink:#191510; --paper:#FBF6EC; --yellow:#FFCE45; --green:#6FD060; --muted:#5f584c; --mono:#8a7f6d; --line:#e6dfcf; --lilac:#F3EDFF; --band:#F1EBFA; --beta:#7B4FD6; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 17px; line-height: 1.55; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.cp-mono { font-family: 'Space Mono', monospace; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--mono); }

/* Header */
.cp-hd { background: #fff; border-bottom: 2px solid var(--ink); height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 22px; }
.cp-hd img { height: 34px; width: auto; }
.cp-wm { font-weight: 700; font-size: 1.3rem; letter-spacing: -.01em; text-decoration: none; }
.cp-wm span { font-weight: 500; }
.cp-hd .cp-sp { flex: 1; }
.cp-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap; transition: transform .08s; }
.cp-pill:hover { transform: translate(-2px, -2px); }

.cp-wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.05; letter-spacing: -.025em; margin: 12px 0 .8rem; }
h2 { font-size: 1.55rem; letter-spacing: -.015em; line-height: 1.15; margin: 0 0 .7rem; }
h3 { font-size: 1.08rem; margin: 1.2rem 0 .35rem; }
p { margin: 0 0 .9rem; }
.cp-answer { font-size: 1.15rem; font-weight: 500; }
.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 3px solid var(--ink); border-radius: 14px; background: var(--yellow); font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap; transition: transform .08s; }
.cp-btn:hover { transform: translate(-2px, -2px); }
.cp-btn.cp-w { background: #fff; }

/* The band: words left, the app picture right. */
.cp-band { background: var(--band); border-bottom: 2px solid var(--ink); }
.cp-band-in { max-width: 1160px; margin: 0 auto; padding: 44px 32px 46px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.cp-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding: 4px 0; }
.cp-by { margin-top: 12px; }

/* The Sage apps. In the band they are pictures with a name tag; on a phone, small cards. */
.cp-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px; margin: -4px; }
.cp-apps.cp-one { grid-template-columns: 1fr; }
/* Two apps: the main one big, the second overlapping its lower right corner. */
.cp-apps.cp-two { display: block; position: relative; padding-bottom: 16%; }
.cp-two .cp-app:first-child { width: 80%; }
.cp-two .cp-app:nth-child(2) { position: absolute; right: 4px; bottom: 4px; width: 48%; }
.cp-app { position: relative; display: flex; flex-direction: column; background: #fff; border: 2.5px solid var(--ink); border-radius: 18px; overflow: hidden; text-decoration: none; transition: transform .08s; }
.cp-app:hover { transform: translate(-2px, -2px); }
.cp-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.cp-art > svg, .cp-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-bd { position: absolute; left: 8px; bottom: 8px; padding: 2px 11px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; }
.cp-bd b { font-size: .85rem; line-height: 1.5; white-space: nowrap; }
.cp-l, .cp-go, .cp-beta, .cp-one-btn { display: none; }
.cp-apps.cp-one .cp-bd { display: none; }
.cp-beta { align-items: center; height: 20px; padding: 0 7px; border: 1.5px solid var(--beta); color: var(--beta); border-radius: 999px; font-size: .66rem; font-weight: 700; margin-left: 6px; vertical-align: 2px; }
.cp-beta-note { margin-top: 10px; }

/* Verdict pair */
.cp-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.cp-pick { background: #fff; border: 2.5px solid var(--ink); border-radius: 16px; padding: 16px 18px; }
.cp-pick b { display: block; font-size: 1.02rem; margin-bottom: 4px; }
.cp-pick.cp-us { background: var(--lilac); }

/* Sections */
.cp-sec { padding: 44px 0 4px; }
.cp-sec > p { max-width: 70ch; }
.cp-lead { font-weight: 700; }
.cp-cols { display: grid; grid-template-columns: repeat(var(--cp-n, 2), minmax(0, 1fr)); gap: 4px 32px; }
.cp-cols h3 { margin-top: 0; }
.cp-cols p { font-size: .97rem; }

/* Side-by-side table: a table on a laptop, one card per row on a phone (labels from data-label). */
table.cp-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 2.5px solid var(--ink); border-radius: 16px; overflow: hidden; font-size: .95rem; }
.cp-table th, .cp-table td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1.5px solid var(--line); }
.cp-table th { background: var(--ink); color: var(--paper); font-family: 'Space Mono', monospace; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; }
.cp-table tr:last-child td { border-bottom: 0; }
.cp-table td:first-child { font-weight: 700; width: 22%; }
.cp-table td.cp-us { background: #FBF8FF; }

.cp-faq h3 { margin-top: 1.1rem; }
.cp-try { background: #FFF6D6; border: 2.5px solid var(--ink); border-radius: 16px; padding: 22px; }
.cp-try .cp-row { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px 0; }
.cp-more { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }

/* Footer */
.cp-ft { background: var(--ink); color: var(--paper); margin-top: 56px; padding: 30px 22px; }
.cp-ft .cp-in { max-width: 1096px; margin: 0 auto; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.cp-note { background: var(--paper); color: var(--ink); border-radius: 14px; padding: 14px 18px; max-width: 360px; font-size: .9rem; }
.cp-ft a { color: var(--yellow); font-weight: 700; text-decoration: none; }

/* A narrow iPad or a small window: words on top, the four pictures in one row underneath. */
@media (max-width: 700px) {
  .cp-band-in { grid-template-columns: 1fr; gap: 24px; padding: 30px 24px 32px; }
  .cp-apps { grid-template-columns: repeat(var(--cp-n, 4), minmax(0, 1fr)); }
  .cp-apps.cp-one { max-width: 460px; }
  .cp-apps.cp-two { display: grid; padding-bottom: 4px; }
  .cp-two .cp-app:first-child, .cp-two .cp-app:nth-child(2) { position: relative; width: auto; right: auto; bottom: auto; }
  .cp-cols { grid-template-columns: 1fr; }
}
/* A phone: no band; the apps sit straight under the answer as cards with an Open line. */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .cp-hd { height: 56px; padding: 0 14px; gap: 8px; }
  .cp-hd img { height: 30px; }
  .cp-wm { font-size: 1.12rem; }
  .cp-wm span { display: none; }
  .cp-pill.cp-hd-btn { min-height: 34px; padding: 0 13px; font-size: .82rem; }
  .cp-wrap { padding: 0 16px; }
  .cp-band { background: none; border-bottom: 0; }
  .cp-band-in { padding: 18px 16px 0; gap: 4px; }
  .cp-ctas { display: none; }
  h1 { font-size: 2.05rem; margin: 8px 0 .55rem; }
  .cp-answer { font-size: 1.02rem; }
  h2 { font-size: 1.3rem; }
  .cp-sec { padding-top: 34px; }
  .cp-apps { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cp-apps.cp-one { grid-template-columns: 1fr; max-width: none; }
  .cp-app { border-radius: 16px; }
  .cp-art { border-bottom: 2.5px solid var(--ink); }
  .cp-bd, .cp-apps.cp-one .cp-bd { position: static; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; border: 0; border-radius: 0; background: #fff; flex: 1; }
  .cp-bd b { font-size: .95rem; white-space: normal; }
  .cp-go { display: block; margin-top: auto; padding-top: 4px; font-weight: 700; font-size: .9rem; }
  .cp-apps.cp-one .cp-bd { padding: 12px 14px 14px; }
  .cp-apps.cp-one .cp-bd b { font-size: 1.2rem; }
  .cp-apps.cp-one .cp-l { display: block; font-size: .92rem; color: var(--muted); line-height: 1.4; }
  .cp-apps.cp-one .cp-go { display: none; }
  .cp-apps.cp-one .cp-one-btn { display: flex; margin-top: 8px; }
  .cp-verdict { grid-template-columns: 1fr; margin-top: 18px; }
  table.cp-table, .cp-table tbody, .cp-table tr, .cp-table td { display: block; width: 100%; }
  table.cp-table { background: none; border: 0; border-radius: 0; overflow: visible; }
  .cp-table tr:first-child { display: none; }
  .cp-table tr { background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; }
  .cp-table td { border: 0; padding: 2px 0; width: auto !important; }
  .cp-table td:first-child { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--mono); margin-bottom: 4px; }
  .cp-table td[data-label] { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; }
  .cp-table td[data-label]::before { content: attr(data-label); font-weight: 700; }
  .cp-table td.cp-us { background: none; margin-top: 4px; }
  .cp-table td.cp-us::before { background: var(--lilac); border-radius: 6px; padding: 0 4px; margin-left: -4px; justify-self: start; }
  .cp-try .cp-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .cp-app, .cp-pill, .cp-btn { transition: none; } .cp-app:hover, .cp-pill:hover, .cp-btn:hover { transform: none; } }