/* ============================================================================
   Valutorio — /compare/ cluster (v1)
   Loaded AFTER main.css and depends on it entirely: every colour, both fonts,
   .wrap, .masthead, .mark, .wordmark, .site-foot, .skiplink and the base link
   and focus styles come from there. Nothing here redefines a token and nothing
   here adds a font.

   WHY A SECOND FILE: main.css is built around one long marketing page — a
   full-bleed hero stage, a two-column section grid, a marquee. A comparison
   page is the opposite object: a single column of prose at reading measure with
   a data table in it. Adding those rules to main.css would mean shipping the
   article layout to the homepage and the hero machinery to 54 article pages.

   Same guardrails as main.css (D-21): radius 0 except where a real object needs
   it, no cross-hue gradients, NO glassmorphism or blurred translucency, no
   gradient text. The one raised surface is --surface behind hairlines, which is
   how the datasheet is built on the homepage and how the table is built here.

   Zero JavaScript on these pages: no disclosure widgets, no tabs, no sticky
   table headers. Everything is open, printable and crawlable as delivered.
   ========================================================================== */

/* --- page frame ---------------------------------------------------------- */
/* The homepage masthead is absolutely positioned over its hero video. There is
   no hero here, so it returns to the flow as a bordered bar and stops
   overlapping the breadcrumb. */
.cmp-masthead {
  position: static;
  border-bottom: 1px solid var(--rule);
}
.cmp-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}
.cmp-brand .mark { width: 34px; height: 34px; }
.cmp-brand .wordmark { font-size: 1.1875rem; }
.cmp-brand:hover .wordmark { color: var(--accent-lift); }

.cmp-main { padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(3rem, 6vw, 5rem); }

/* One column, left-aligned, at reading measure. --measure is main.css's 58ch,
   which lands on ~67 real characters in Besley; the article gets a little more
   than that because the table needs the room and a table narrower than its
   prose reads as an inset panel rather than the page's data. */
.cmp-article {
  max-width: 46rem;
  margin-inline: 0;
}
.cmp-hub { max-width: 52rem; }

/* --- breadcrumbs --------------------------------------------------------- */
/* Mono, small, quiet: it is navigation furniture, not part of the argument.
   The trailing item is text with aria-current, never a link to itself. */
.cmp-crumbs {
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--ink-quiet);
}
.cmp-crumbs ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.55rem;
}
.cmp-crumbs li + li::before {
  content: "/";
  margin-right: 0.55rem;
  color: var(--rule-lift);
}
.cmp-crumbs a { color: var(--ink-quiet); text-decoration: none; border-bottom: 1px solid var(--rule); }
.cmp-crumbs a:hover { color: var(--accent-lift); border-bottom-color: var(--accent); }

/* --- headings ------------------------------------------------------------ */
/* main.css sizes h1 for a hero and h2 for a section header; both are too loud
   at article scale, where a heading interrupts prose every few hundred words. */
.cmp-article h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.875rem, 3.1vw, 2.75rem);
  line-height: 1.1;
}
.cmp-article h2 {
  margin: clamp(2.5rem, 4vw, 3.25rem) 0 0.9rem;
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  line-height: 1.2;
}
.cmp-article h3 {
  margin: 0 0 0.45rem;
  font-size: 1.0625rem;
}

/* --- byline and disclaimer ---------------------------------------------- */
/* The visible date must equal the schema dateModified and the sitemap lastmod;
   all three are emitted from one constant in generate_compare.py. */
.cmp-byline {
  margin: 0 0 clamp(1.75rem, 3vw, 2.25rem);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-quiet);
}
.cmp-disclaimer {
  margin: clamp(2.75rem, 4.5vw, 3.5rem) 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.85;
  color: var(--ink-quiet);
}
.cmp-disclaimer a { color: var(--ink-quiet); text-decoration: none; border-bottom: 1px solid var(--rule); }
.cmp-disclaimer a:hover { color: var(--accent-lift); border-bottom-color: var(--accent); }

/* --- prose --------------------------------------------------------------- */
.cmp-prose { max-width: var(--measure); }
.cmp-prose p { margin: 0 0 1.1rem; }
.cmp-prose p:last-child { margin-bottom: 0; }

/* The verdict answers the query in the first paragraph, so it is set one step
   larger than body copy and struck with a violet rule on its inside edge. */
.cmp-verdict {
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 2px solid var(--accent);
  font-size: clamp(1.0625rem, 0.45vw + 1rem, 1.1875rem);
  line-height: 1.6;
  color: var(--ink);
}

/* --- persona quick verdict ---------------------------------------------- */
/* Three-part rows: who you are (prose), the pick (mono label + name), why (quiet).
   Hairline separators, no bullets, no cards — the same separation vocabulary the
   homepage uses. */
.cmp-personas {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.cmp-personas li {
  padding: 1rem 0 1.05rem;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0.35rem clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
}
.cmp-who { grid-column: 1; margin: 0; line-height: 1.5; }
.cmp-pick {
  grid-column: 1;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink);
}
.cmp-pick-label {
  color: var(--ink-quiet);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.625rem;
  margin-right: 0.4rem;
}
.cmp-pick strong { color: var(--accent-num); font-weight: 500; }
.cmp-why {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-quiet);
}

/* --- at-a-glance table --------------------------------------------------- */
/* Datasheet aesthetics, borrowed from the homepage ribbon: the one raised
   surface, hairline rules, mono for every value. Values are machine facts, so
   they are mono; the row labels are prose, so they are not.

   .cmp-tablewrap scrolls horizontally instead of letting a three-column table
   widen the page: two of the ten rows are long sentences (pricing, sync) and on
   a phone the table is genuinely wider than the viewport. overflow-x on a
   wrapper is the only way to contain that without truncating a fact. */
.cmp-tablewrap {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0.7rem;
  overflow-x: auto;
  border: 1px solid var(--rule);
  background: var(--surface);
  /* A scroll container is focusable-by-keyboard only if it can take focus, and
     without a tabindex the arrow keys never reach it. tabindex is on the element
     in markup; this just makes the focus ring land on the box edge. */
  scrollbar-color: var(--rule-lift) var(--surface);
}
.cmp-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.cmp-tablecap {
  /* Visible caption, left-aligned, styled as a folio: it names the object the
     way the homepage names its sections. */
  caption-side: top;
  padding: 0.85rem 1rem 0.7rem;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  border-bottom: 1px solid var(--rule);
}
.cmp-table th,
.cmp-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--rule);
}
.cmp-table thead th {
  border-top: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-bright);
  white-space: nowrap;
}
.cmp-table thead th.cmp-col-v { color: var(--accent-num); }
/* Row headers stay prose (they are English labels) and quiet, so the values
   carry the contrast. */
.cmp-table tbody th {
  font-weight: 400;
  color: var(--ink-quiet);
  white-space: nowrap;
  width: 8.5rem;
}
.cmp-table td {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink);
}
/* The Valutorio column is tinted, not highlighted: a filled column on a vendor
   comparison table reads as a sales device. A 3% violet wash and brighter ink
   is enough to track the column down ten rows. */
.cmp-table td.cmp-v {
  background: rgba(139, 92, 246, 0.05);
  color: var(--ink-bright);
}
.cmp-table td.cmp-yes { color: var(--accent-num); }
.cmp-table td.cmp-no { color: var(--ink-quiet); }
.cmp-table td.cmp-v.cmp-no { color: var(--ink-quiet); }

.cmp-tablenote {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.8;
  color: var(--ink-quiet);
}

/* --- themed sections ----------------------------------------------------- */
.cmp-theme { margin: 0; }

/* The winner line: a small violet chip plus the verdict sentence. Every themed
   section resolves to one, which is the pattern the ranking pages share. */
.cmp-winner {
  margin: 1.1rem 0 0;
  max-width: var(--measure);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.cmp-tag {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.18rem 0.5rem;
  border: 1px solid var(--accent);
  background: rgba(139, 92, 246, 0.1);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-num);
  vertical-align: 0.09em;
}
.cmp-winner strong {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-bright);
}
.cmp-winner-line { color: var(--ink-quiet); }
.cmp-winner-line::before { content: "· "; color: var(--rule-lift); }

/* --- the Valutorio angle panel (pair pages only) ------------------------- */
/* Distinct because it changes voice: the rest of the page is a neutral referee
   between two other apps, and this block is the publisher speaking about its own
   product. Marking that shift visually is the honest move — an unmarked block
   would be the bait-and-switch the research warns against.

   Built as a bordered surface with a violet-tinted wash. NOT glassmorphism: no
   backdrop-filter, no translucency over content, per the standing guardrail. */
.cmp-angle {
  margin: clamp(2.5rem, 4vw, 3.25rem) 0 0;
  padding: clamp(1.35rem, 2.5vw, 1.9rem);
  border: 1px solid rgba(139, 92, 246, 0.42);
  background:
    linear-gradient(to bottom, rgba(139, 92, 246, 0.07), rgba(139, 92, 246, 0.03)),
    var(--surface);
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 0 clamp(0.9rem, 2vw, 1.25rem);
}
.cmp-angle-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  margin-top: 0.2rem;
}
.cmp-angle-body { min-width: 0; }
.cmp-angle-kicker {
  margin: 0 0 0.3rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-lift);
}
/* Overrides the article h2 top margin: the panel's own padding is the spacing. */
.cmp-angle h2 {
  margin: 0 0 0.8rem;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
}
.cmp-angle-more {
  margin: 1rem 0 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
}

/* --- choose columns ------------------------------------------------------ */
.cmp-choose {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: 1.35rem;
}
.cmp-choose-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmp-choose-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cmp-choose-col { min-width: 0; padding-top: 0.9rem; border-top: 1px solid var(--rule-lift); }
.cmp-choose-col h3 { margin: 0 0 0.7rem; font-size: 1rem; }
.cmp-choose-col ul { margin: 0; padding-left: 1.05rem; }
.cmp-choose-col li {
  margin-bottom: 0.55rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
}
.cmp-choose-col li::marker { color: var(--accent); }
.cmp-choose-col li:last-child { margin-bottom: 0; }

/* --- FAQ ----------------------------------------------------------------- */
/* Open <h3> + <p>, no <details>: an answer collapsed behind a summary is an
   answer a reader has to hunt for, and there is no JavaScript here to animate
   it anyway. FAQPage schema is deliberately absent — Google retired FAQ rich
   results in May 2026 (see research/compare-seo-research.md Q4). */
.cmp-faq { margin-top: 1.35rem; }
.cmp-qa {
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
}
.cmp-qa:last-child { border-bottom: 1px solid var(--rule); }
.cmp-qa .cmp-prose p { font-size: 0.9375rem; line-height: 1.65; color: var(--ink-quiet); }

/* --- related links ------------------------------------------------------- */
/* A curated row of 2-4, not a link block of all 54: a sitewide dump of the whole
   cluster on every page is the template-link pattern that reads as spam. */
.cmp-related {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.1rem clamp(1.25rem, 2.5vw, 2rem);
}
.cmp-related li {
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
  min-width: 0;
}
.cmp-related a {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  text-decoration: none;
  color: var(--accent-lift);
}
.cmp-related a:hover { color: var(--ink-bright); }
.cmp-rel-note {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink-quiet);
}

/* --- hub listings -------------------------------------------------------- */
.cmp-hub-list {
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.cmp-hub-list li {
  padding: 0.95rem 0 1rem;
  border-bottom: 1px solid var(--rule);
}
.cmp-hub-list a {
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  color: var(--accent-lift);
}
.cmp-hub-list a:hover { color: var(--ink-bright); }
.cmp-hub-note {
  margin: 0.28rem 0 0;
  max-width: 54ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-quiet);
}

/* --- responsive --------------------------------------------------------- */
/* 46rem: below this the persona grid's second column is too narrow for a clause
   and the three choose-columns are too narrow for a sentence, so both stack. */
@media (max-width: 46rem) {
  .cmp-personas li { grid-template-columns: minmax(0, 1fr); }
  .cmp-why { grid-column: 1; grid-row: auto; }
  .cmp-choose-2, .cmp-choose-3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 34rem) {
  .cmp-angle {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem 0;
  }
  .cmp-table tbody th { width: auto; white-space: normal; }
}

/* --- print -------------------------------------------------------------- */
/* Comparison pages get printed and saved as PDFs by people deciding between two
   paid apps. Ink-on-white, tables unclipped, navigation furniture dropped. */
@media print {
  .cmp-masthead, .site-foot, .skiplink, .cmp-crumbs { display: none; }
  html, body { background: #fff; color: #000; }
  .cmp-article, .cmp-hub { max-width: none; }
  .cmp-tablewrap { overflow: visible; background: none; border-color: #999; }
  .cmp-table { min-width: 0; }
  .cmp-table td, .cmp-table th { border-color: #ccc; color: #000; }
  .cmp-table td.cmp-v { background: none; }
  .cmp-verdict { border-left-color: #666; }
  .cmp-angle { background: none; border-color: #999; }
  .cmp-tag { border-color: #666; color: #000; background: none; }
  a { color: #000; }
}