/* ==========================================================================
   Content pages
   Shared by /how-it-works, /pricing, /setup, /faq, /integrations/*,
   /compare/*, the 404, and the homepage's answer-first block.

   Kept separate from site.css, which styles a thirteen-act scroll story with
   WebGL scenes, a horizontal-scrolling comparison table and a phone mockup.
   None of that is wanted here, and loading it would cost every content page
   a full stylesheet's parse for selectors that match nothing. The result is
   that a reader who lands on /compare/one-sec from a search gets a fast,
   legible, single-column document instead of a second visit to the homepage.
   ========================================================================== */

/* --- The answer-first block -------------------------------------------
   Appears at the top of every content page and at the top of the homepage.

   The rule it exists to serve: an answer engine retrieves a passage, and a
   passage with pronouns in it is a passage it cannot use. So these pages open
   with three or four sentences where the subject is named in the first four
   words, the checkable facts come first, and nothing depends on what came
   before. Everything after this block is elaboration; this is the answer. */

.answer-first {
  padding-block: var(--sp-8) var(--sp-7);
  background: var(--indigo-tint);
  border-block: 1px solid rgba(101, 76, 244, 0.16);
}

.answer-first .wrap { max-width: 900px; }

.answer-first-title {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--indigo-deep);
  margin-bottom: var(--sp-4);
}

.answer-first-body p {
  font-size: var(--fs-lede);
  line-height: var(--lh-normal);
  color: var(--ink);
  max-width: 68ch;
}
.answer-first-body p + p { margin-top: var(--sp-4); }
.answer-first-body strong { font-weight: 700; }
.answer-first-body a {
  color: var(--indigo-deep);
  /* Same reason as .content-body a — see the note there. base.css strips
     underline globally, so the line has to be set explicitly. */
  text-decoration: underline;
  text-decoration-color: rgba(75, 58, 192, 0.4);
  text-underline-offset: 3px;
}
.answer-first-body a:hover { text-decoration-color: currentColor; }

/* The homepage's copy of the block sits above the hero, where a full-bleed
   tinted band would fight the header. It gets a top offset and no bottom
   border instead. */
.answer-first--first { padding-top: var(--sp-6); }

/* --- Page shell -------------------------------------------------------- */

.content-page {
  background: var(--bg-warm);
  min-height: 100svh;
}

.content-head {
  padding-top: calc(var(--header-total) + var(--sp-7));
  padding-bottom: var(--sp-7);
}

.content-head .wrap,
.content-body { max-width: 820px; margin-inline: auto; }

.content-title {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  font-weight: 800;
  text-wrap: balance;
  margin-bottom: var(--sp-4);
}

.content-lede {
  font-size: var(--fs-lede);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
  max-width: 62ch;
  text-wrap: pretty;
}

/* The one line that dates the whole page. A competitive claim without a date
   is a bet; a dated one is a statement. */
.content-updated {
  display: inline-block;
  margin-top: var(--sp-4);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.content-body { padding-bottom: var(--sp-9); }

.content-body > * + * { margin-top: var(--sp-5); }

.content-body h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  margin-top: var(--sp-8);
  text-wrap: balance;
  /* A heading that is the scroll target needs to clear the sticky header,
     otherwise arriving from a table of contents puts it underneath. */
  scroll-margin-top: calc(var(--header-total) + var(--sp-4));
}

.content-body h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: 700;
  margin-top: var(--sp-6);
  scroll-margin-top: calc(var(--header-total) + var(--sp-4));
}

.content-body p,
.content-body li {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--ink-soft);
  max-width: 68ch;
  text-wrap: pretty;
}

.content-body strong { color: var(--ink); font-weight: 700; }

.content-body a {
  color: var(--indigo-deep);
  /* An explicit `underline`, not just a colour. base.css sets
     `a { text-decoration: none }` globally, and the previous rule here set
     only `text-decoration-color` — which does nothing without a line to
     colour. So every inline link on these pages was distinguishable by hue
     alone, which fails WCAG 2.4.4 (1.4.1) and is invisible to a reader with
     any form of colour vision deficiency. */
  text-decoration: underline;
  text-decoration-color: rgba(75, 58, 192, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.content-body a:hover { text-decoration-color: currentColor; }

.content-body ul,
.content-body ol { padding-left: var(--sp-5); }
.content-body li + li { margin-top: var(--sp-2); }
.content-body li::marker { color: var(--indigo); }

/* A definition or fact list. Used for the permission pairs, the card types
   and the plan contents. */
.fact-list {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}
.fact-list > * { margin: 0; }
.fact-list > * + * { margin-top: 0; }
.fact-list dt {
  font-weight: 700;
  color: var(--ink);
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
}
.fact-list dd {
  margin: 2px 0 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: none;
}

/* --- Numbered steps ---------------------------------------------------- */

.steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.steps-list > li {
  position: relative;
  counter-increment: step;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) calc(var(--sp-8) + var(--sp-3));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}
.steps-list > li + li { margin-top: var(--sp-4); }

.steps-list > li::before {
  content: counter(step);
  position: absolute;
  left: var(--sp-5);
  top: var(--sp-5);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--indigo);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1;
}

.steps-list h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-h3); }
.steps-list p { margin: 0; max-width: none; }

/* --- Tables ------------------------------------------------------------
   The comparison matrix has to be readable at 320px and has to survive
   being extracted as a passage, so it is a real <table> with a real
   <caption> and th scope, inside a focusable scroll region. */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  /* A focusable scroll container needs a visible ring, or a keyboard user
     has no indication the region is scrollable at all. */
  overscroll-behavior-x: contain;
  /* Load-bearing, and easy to delete by accident.

     Every cell in this table carries a .visually-hidden "Yes"/"No" label,
     which is `position: absolute`. An absolutely positioned box resolves its
     containing block to the nearest positioned ancestor — and without this
     line that ancestor is the document, not the scroller. The labels then
     escaped the clip, sat at the table's natural (700px+) width, and widened
     the whole page by ~236px on a 390px phone. The overflow looked like a
     layout bug in a stylesheet nobody suspected. */
  position: relative;
}
.table-scroll:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  min-width: 720px;
}

.compare caption {
  caption-side: bottom;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  text-align: left;
  line-height: 1.5;
}

.compare th,
.compare td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.compare thead th {
  position: sticky;
  top: 0;
  background: var(--bg-warm);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  border-bottom: 1px solid var(--line-strong);
}

.compare thead th.compare-us { color: var(--indigo-deep); }

.compare tbody th {
  font-weight: 500;
  color: var(--ink);
  min-width: 210px;
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }

/* Row striping on a seven-column matrix: without it the eye loses the row
   somewhere in the middle and reads a mark against the wrong competitor. */
.compare tbody tr:nth-child(even) { background: rgba(245, 244, 240, 0.55); }

.compare td { text-align: center; }
.compare td.yes { color: var(--sage-strong); }
.compare td.no { color: var(--ink-faint); }
.compare td.partial { color: var(--amber-deep); }
.compare td svg { display: block; margin-inline: auto; }
.compare td[data-col="popcue"] { background: rgba(101, 76, 244, 0.05); }

.table-hint {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  margin-bottom: var(--sp-3);
}

/* --- The "what partly means" disclosure -------------------------------
   The table's partial cells carry a title attribute, which no one reads on
   a phone. This is the same information as a document the reader can open. */

.compare-notes-detail {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.compare-notes-detail > summary {
  cursor: pointer;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  transition: background var(--dur-fast) var(--ease-out);
}
.compare-notes-detail > summary::-webkit-details-marker { display: none; }
.compare-notes-detail > summary::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: rotate(-45deg);
  transition: transform var(--dur-base) var(--ease-out);
  flex: none;
}
.compare-notes-detail[open] > summary::before { transform: rotate(45deg); }
.compare-notes-detail > summary:hover { background: var(--bg); }

.compare-partials {
  margin: 0;
  padding: 0 var(--sp-5);
  border-top: 1px solid var(--line);
}
.compare-partials > div {
  padding-block: var(--sp-3);
}
.compare-partials > div + div { border-top: 1px solid var(--line); }
.compare-partials dt {
  font-size: var(--fs-small);
  color: var(--ink);
}
.compare-partials dd {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: none;
}

.compare-sources {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-micro);
  line-height: 1.7;
  color: var(--ink-faint);
  max-width: none;
}
.compare-sources a {
  color: var(--indigo-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* The 24px WCAG 2.5.8 floor, met with min-height rather than padding for
     the same reason as .act-note a: these links sit on a 1.7 line box, so an
     inline-block box of 24px straddles the descender without moving the line. */
  display: inline-block;
  min-height: 24px;
}

/* --- Cards ------------------------------------------------------------- */

.card-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top: var(--sp-5);
}

.card {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}
.card > * { margin: 0; }
.card > * + * { margin-top: var(--sp-2); }
.card h3 { margin: 0; font-size: var(--fs-body); font-weight: 700; }
.card p { font-size: var(--fs-small); line-height: 1.65; max-width: none; }
.card--accent { border-color: rgba(101, 76, 244, 0.3); background: var(--indigo-tint); }

/* --- Callouts ---------------------------------------------------------- */

.callout {
  padding: var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--indigo);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--indigo-tint);
}
.callout > * { margin: 0; max-width: none; }
.callout > * + * { margin-top: var(--sp-2); }
.callout p { color: var(--ink); line-height: 1.65; }

.callout--honest {
  border-left-color: var(--sage-strong);
  background: var(--sage-tint);
}

.callout--warn {
  border-left-color: var(--amber-deep);
  background: #FCF3D6;
}

/* --- FAQ ---------------------------------------------------------------
   Native <details>, so keyboard operation, the open/closed state and the
   find-in-page behaviour are the platform's job rather than ours. */

.faq-list { display: grid; gap: var(--sp-3); }

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.faq-item > summary {
  cursor: pointer;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  line-height: 1.4;
  transition: background var(--dur-fast) var(--ease-out);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: var(--bg); }
.faq-item > summary::after {
  content: "";
  flex: none;
  width: 0.65rem;
  height: 0.65rem;
  margin-top: 0.35em;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: rotate(-45deg);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item[open] > summary { border-bottom: 1px solid var(--line); }

.faq-answer {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}
.faq-answer > * { margin: 0; max-width: none; }
.faq-answer > * + * { margin-top: var(--sp-3); }
.faq-answer p { line-height: var(--lh-loose); }

/* --- Breadcrumbs -------------------------------------------------------
   Visible, because on /compare/one-sec the reader arrived from a search and
   has no other idea where they are. Also emitted as BreadcrumbList JSON-LD;
   this is the human-readable half of the same fact. */

.breadcrumbs {
  padding-top: calc(var(--header-total) + var(--sp-5));
  font-size: var(--fs-micro);
}
.breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.breadcrumbs li { display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumbs li + li::before {
  content: "/";
  color: var(--line-strong);
}
.breadcrumbs a { color: var(--ink-faint); }
.breadcrumbs a:hover { color: var(--indigo-deep); }
.breadcrumbs [aria-current="page"] { color: var(--ink-soft); font-weight: 600; }

/* --- Cross-links between pages ---------------------------------------- */

.page-links {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.page-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.page-link:hover {
  border-color: rgba(101, 76, 244, 0.35);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.page-link > * { margin: 0; }
.page-link-title {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
}
.page-link-note {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: none;
  line-height: 1.5;
  margin-top: 2px;
}
.page-link-arrow {
  flex: none;
  color: var(--indigo);
  font-size: 1.1rem;
  line-height: 1;
}

/* --- 404 --------------------------------------------------------------- */

.error-page {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: calc(var(--header-total) + var(--sp-8)) var(--gutter) var(--sp-8);
  text-align: center;
}

.error-code {
  font-size: clamp(4rem, 2rem + 12vw, 8rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  color: var(--indigo-tint);
  /* The tint is a background colour, not a text colour: on --bg-warm it is
     decorative, and the real title below carries the accessible name. */
  -webkit-text-stroke: 1.5px rgba(101, 76, 244, 0.28);
}

.error-title {
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
  margin-top: var(--sp-3);
  text-wrap: balance;
}

.error-lede {
  margin-top: var(--sp-3);
  font-size: var(--fs-lede);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
  max-width: 46ch;
  margin-inline: auto;
  text-wrap: pretty;
}

.error-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-6);
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 860px) {
  /* The scroll hint only means something once the table is actually wider
     than its container. */
  .table-hint { display: flex; }
  .content-body { padding-bottom: var(--sp-8); }
}

@media (prefers-reduced-motion: reduce) {
  .page-link,
  .faq-item > summary::after,
  .compare-notes-detail > summary::before {
    transition: none;
  }
  .page-link:hover { transform: none; }
}