/* ===========================================================================
   BASIS - SEARCH LANDING PAGES (pages.css)
   ---------------------------------------------------------------------------
   Loaded AFTER /legal/legal.css, which is the site's shared design system and
   already supplies the brand tokens, the @font-face rules, the floating header,
   the dark hero, the doc card and the four column footer. This file adds only
   what the pages under /compare, /guides and /devices need on top of it:
   breadcrumbs, the comparison and specification tables, the stat grid, the
   numbered steps, the FAQ list and the closing call to action.

   Lives at the repo root rather than under /assets on purpose: vercel.json sets
   Cache-Control immutable for a year on /assets/(.*), so a stylesheet there
   could never be corrected. Referenced as /pages.css?v=N; bump N in
   seo/build.py (CSS_V) when this file changes.
   =========================================================================== */

/* Screen reader only text. The comparison table renders ticks and dots as
   glyphs, which say nothing to a screen reader, so every cell carries a word. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Breadcrumbs ------------------------------------------------------- */
.crumbs { margin-bottom: 20px; }
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--faint);
}
.crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--faint);
}
.crumbs a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }

/* ---- Tables ------------------------------------------------------------
   Both tables scroll inside their own container rather than letting the page
   scroll sideways. The label column is sticky so a row stays identifiable once
   the value columns have scrolled past it on a phone.                       */
.cmp-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 8px 0 12px;
  border-radius: var(--r-tile);
  box-shadow: var(--sh-card);

  /* Scroll shadow. Four layers: two solid caps painted with background-attachment
     local so they travel with the content, and two gradients attached to the
     scroll port so they only show while there is more table in that direction.
     Without an affordance the right hand columns are easy to miss on a phone,
     which on a comparison page means missing the competitor entirely. */
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left,  var(--paper) 30%, rgba(255, 255, 255, 0)) right center,
    linear-gradient(to right, rgba(19, 21, 21, .13), rgba(19, 21, 21, 0)) left center,
    linear-gradient(to left,  rgba(19, 21, 21, .13), rgba(19, 21, 21, 0)) right center;
  background-repeat: no-repeat;
  background-color: var(--paper);
  background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%;
  background-attachment: local, local, scroll, scroll;
}
table.cmp, table.spec {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 560px;
  font-size: 15px;
}
table.spec { min-width: 680px; }

table.cmp th, table.cmp td,
table.spec th, table.spec td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--hair-soft);
}
table.cmp thead th, table.spec thead th {
  font: 500 14px/1.3 'Google Sans Flex', system-ui, sans-serif;
  color: var(--muted);
  background: var(--page);
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}
table.cmp thead th.us { color: var(--ink); }

table.cmp tbody th[scope="row"],
table.spec tbody th[scope="row"] {
  font-weight: 500;
  color: var(--ink);
  position: sticky;
  left: 0;
  background: var(--paper);
  z-index: 1;
  min-width: 220px;
}
.cmp-l { display: block; }
.cmp-s {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: var(--faint);
  max-width: 34ch;
}

/* The group header rows are the argument: ahead, level, behind, in that order.
   The third group is not optional. It is the only reason a reader believes the
   first one, and it is what stops somebody discovering the gap after paying. */
tr.cmp-group th {
  background: var(--page);
  font: 500 13px/1.3 'Google Sans Flex', system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 18px;
  padding-bottom: 10px;
  position: static;
}

td.cmp-yes, td.cmp-no, td.cmp-none, td.cmp-soon, td.cmp-txt { text-align: center; }
td.cmp-yes { color: var(--ok-ink); font-size: 17px; }
td.cmp-yes.us { color: var(--brand-deep); font-weight: 600; }
td.cmp-no { color: var(--faint); font-size: 20px; line-height: 1; }
/* Our own column's absence is stated, not implied. See render_matrix in build.py. */
td.cmp-none { color: var(--muted); font-size: 14px; font-weight: 500; }
td.cmp-soon { color: var(--muted); font-size: 13px; }
td.cmp-txt { color: var(--ink); font-size: 14px; font-weight: 500; }
table.spec td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }

.cmp-note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--faint);
  margin: 0 0 28px;
  max-width: 70ch;
}

/* ---- Stat grid --------------------------------------------------------- */
.statgrid {
  display: grid;
  /* 260px keeps this at three across in the 1100px column, so the four stat page
     wraps rather than squeezing four labels into 236px each. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 22px 0 28px;
}
.stat {
  background: var(--page);
  border-radius: var(--r-tile);
  padding: 22px 22px 20px;
}
.stat-n {
  font-family: 'Stack Sans Headline', 'Google Sans Flex', sans-serif;
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-l {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.stat-l strong { color: var(--ink); font-weight: 500; }

/* ---- Numbered steps ---------------------------------------------------- */
ol.steps {
  list-style: none;
  counter-reset: step;
  margin: 8px 0 28px;
  padding: 0;
}
ol.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 22px 54px;
  margin: 0;
}
ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-dark);
  font: 500 16px/36px 'Google Sans Flex', system-ui, sans-serif;
  text-align: center;
}
/* The rule joining one step to the next. Hidden on the last, which has nothing
   to join to. */
ol.steps li::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 44px;
  bottom: 6px;
  width: 2px;
  background: var(--hair);
}
ol.steps li:last-child { padding-bottom: 0; }
ol.steps li:last-child::after { display: none; }
ol.steps h3 { margin: 6px 0 8px; font-size: 19px; }
ol.steps p { margin: 0; }

/* ---- FAQ --------------------------------------------------------------- */
.faq { margin: 8px 0 8px; }
.faq details {
  border-bottom: 1px solid var(--hair);
}
.faq details:first-of-type { border-top: 1px solid var(--hair); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 44px 18px 0;
  position: relative;
  font-weight: 500;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.45;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 26px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 30px; }
.faq summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
.faq-a { padding: 0 0 18px; }
.faq-a p { margin: 0; }

/* ---- Hero support line -------------------------------------------------
   "Basis is a player, not a provider" is the whole positioning of these pages
   against a search result full of people selling channels, so it sits above the
   fold and has to survive a busy photographic hero. A pill rather than faint
   text: over hero-bg.png, low opacity body copy was unreadable.              */
.hero-byos {
  display: inline-block;
  color: var(--on-dark);
  background: rgba(8, 12, 24, .42);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-pill);
  padding: 9px 20px;
  font-size: 14px;
  line-height: 1.45;
  margin: 24px auto 0;
  max-width: 52ch;
  backdrop-filter: blur(6px);
}

/* ---- Closing call to action -------------------------------------------- */
.cta-band {
  margin-top: 28px;
  background: var(--inverse);
  color: var(--on-dark);
  border-radius: var(--r-card);
  padding: clamp(28px, 4.5vw, 52px);
  text-align: center;
}
.cta-band h2 { color: var(--on-dark); max-width: 22ch; margin: 0 auto 14px; }
.cta-band p { color: var(--on-dark-2); max-width: 56ch; margin-inline: auto; }
.cta-band a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 26px 0 18px;
}
.cta-actions a { text-decoration: none; }
.btn-ghost {
  background: transparent;
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, .28);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .08); }
.cta-band .btn-ink {
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
}
.cta-fine {
  font-size: 13px;
  line-height: 1.55;
  color: var(--on-dark-2);
  opacity: .8;
  max-width: 62ch;
  margin: 0 auto;
}

/* ---- Article rhythm ----------------------------------------------------
   legal.css styles .doc-card-v2 for legal documents, which run denser than a
   landing page. These override only the spacing.                           */
.doc-card-v2 .statgrid + p,
.doc-card-v2 .cmp-scroll + p { margin-top: 4px; }
.doc-card-v2 h2 + p { margin-top: 0; }

/* legal.css pads section.band for a document that opens with a meta bar. These
   pages open with breadcrumbs, so the same padding under the hero's cloud break
   left an obvious dead band. */
main > section.band { padding-top: clamp(16px, 2vw, 28px); }

@media (max-width: 640px) {
  table.cmp, table.spec { font-size: 14px; }
  table.cmp tbody th[scope="row"],
  table.spec tbody th[scope="row"] { min-width: 168px; }
  .cmp-s { max-width: 24ch; }
  ol.steps li { padding-left: 44px; }
  ol.steps li::before { width: 30px; height: 30px; line-height: 30px; font-size: 15px; }
  ol.steps li::after { left: 14px; top: 38px; }
}