/* Compare page: an editorial, table-first layout built for reading and citing. */
.cmp { max-width: 1080px; margin: 0 auto; padding: 96px var(--gutter) 0; }
.crumbs { font-size: 13px; color: var(--mute); margin-bottom: 40px; }
.crumbs a { text-decoration: none; color: var(--mute); }
.crumbs a:hover { color: var(--ivory); }
.cmp__head h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1; letter-spacing: -0.045em; max-width: 14ch; }
.cmp__answer { margin-top: 30px; font-size: clamp(19px, 1.9vw, 23px); line-height: 1.5; color: rgba(245, 241, 234, 0.82); max-width: 62ch; }
.cmp__answer strong { color: var(--ivory); font-weight: 600; }
.cmp__answer em { font-size: 1.05em; }
.cmp h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; letter-spacing: -0.035em; }
.cmp section { padding-top: clamp(64px, 9vh, 110px); }

.tldr ul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 1px; background: var(--line); border-radius: 18px; overflow: hidden; }
.tldr li { background: var(--ink-2); padding: 18px 22px; color: rgba(245, 241, 234, 0.78); }
.tldr li b { color: var(--ivory); }
.tldr li:first-child { background: linear-gradient(90deg, rgba(237, 179, 65, 0.12), transparent 70%), var(--ink-2); }
.tldr li:first-child b { color: var(--amber); }

.matrix__note { margin: 16px 0 24px; color: var(--mute); font-size: 14px; }
.matrix__scroll { overflow-x: auto; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.matrix table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 860px; }
.matrix th, .matrix td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.matrix thead th { position: sticky; top: 0; background: var(--ink-3); font-weight: 600; font-size: 13px; color: var(--ivory); }
.matrix tbody th { font-weight: 500; color: rgba(245, 241, 234, 0.86); width: 22%; }
.matrix td { color: rgba(245, 241, 234, 0.75); }
.matrix td i { color: var(--mute); font-style: normal; font-size: 13px; }
.matrix td small { color: var(--mute); font-size: 12px; }
.matrix .us { background: rgba(237, 179, 65, 0.07); color: var(--ivory); }
.matrix thead .us { color: var(--amber); }
.matrix tr.loss th { color: var(--ivory); }
.matrix tr.loss .us { background: rgba(229, 72, 77, 0.08); }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 0; }

.vs > p { margin-top: 20px; color: rgba(245, 241, 234, 0.8); font-size: 18px; max-width: 70ch; }
.vs__grid { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs__grid > div { padding: 22px 24px; border-radius: 16px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.vs__grid .us { background: radial-gradient(120% 100% at 100% 0%, rgba(237, 179, 65, 0.12), transparent 60%), var(--ink-2); box-shadow: inset 0 0 0 1px rgba(237, 179, 65, 0.3); }
.vs__grid h3 { font-size: 18px; letter-spacing: -0.01em; }
.vs__grid .us h3 { color: var(--amber); }
.vs__grid p { margin-top: 8px; color: var(--mute); }
.vs__grid--3 { grid-template-columns: repeat(3, 1fr); }
.src { margin-top: 18px; font-size: 13px; color: var(--mute-2); }
.src a { color: var(--mute); }
.gaps p { margin-top: 18px; font-size: 19px; color: rgba(245, 241, 234, 0.8); max-width: 66ch; }
.cmp .faq { padding-left: 0; padding-right: 0; }
.finale--compact { padding-top: clamp(100px, 16vh, 180px); }
@media (max-width: 760px) { .vs__grid, .vs__grid--3 { grid-template-columns: 1fr; } }

/* Subpages (compare/obs, compare/ecamm, compare/camtasia, teleprompter-for-mac, virtual-camera-for-zoom) */
.cmp__shot { margin: 48px 0 0; border-radius: 18px; overflow: hidden; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line), 0 30px 80px -30px rgba(0, 0, 0, 0.7); }
.cmp__shot img { display: block; width: 100%; height: auto; }
.cmp__shot figcaption { padding: 12px 18px; font-size: 13px; color: var(--mute); }
.cmp__answer code, .maplist code { font-family: var(--mono); font-size: 0.85em; color: var(--amber); }
.matrix--fit table { min-width: 560px; }
.matrix--fit tbody th { width: 30%; }
.matrix--fit .matrix__scroll { margin-top: 24px; }
.maplist { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 1px; background: var(--line); border-radius: 16px; overflow: hidden; max-width: 76ch; }
.maplist li { background: var(--ink-2); padding: 14px 20px; color: rgba(245, 241, 234, 0.78); }
.maplist b { color: var(--ivory); }
.vs h2 a { color: inherit; text-decoration: none; }
.vs h2 a::after { content: " →"; color: var(--amber); font-size: 0.6em; vertical-align: middle; }
.vs h2 a:hover { color: var(--amber); }
@media (max-width: 560px) { .cmp__head h1 { overflow-wrap: anywhere; } }
.cmp section > p { max-width: 70ch; }
.nv { font-style: normal; color: var(--mute-2); font-weight: 600; }

/* Phone: the matrix scrolls sideways; fade the right edge so it looks scrollable. */
@media (max-width: 760px) { .matrix__scroll, .matrix .table-wrap { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } }

/* Round 24: use the width — a two-column head on desktop, wider reading columns, a readable table;
   on phone the feature column stays put while the apps swipe past. */
.cmp { max-width: 1180px; }
@media (min-width: 1000px) {
  .cmp__head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 64px; align-items: end; }
  .cmp__head .cue { grid-column: 1 / -1; }
  .cmp__head h1 { max-width: none; }
  .cmp__answer { margin-top: 0; max-width: none; }
}
.cmp section > p, .vs > p, .gaps p { max-width: 78ch; }
.matrix table { font-size: 15.5px; }
.matrix th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--ink, #000); }
@media (max-width: 760px) {
  .matrix__note::after { content: "Swipe the table to see all seven apps →"; display: block; margin-top: 10px; color: var(--tungsten); font-weight: 600; }
  .matrix th[scope="row"] { min-width: 132px; max-width: 132px; box-shadow: 1px 0 0 var(--line); }
}
@media (min-width: 1000px) { .cmp__head h1 { font-size: clamp(44px, 4.4vw, 64px); } }