/*
 * /features/* pages. Everything on those pages reuses application.css and
 * landing.css; this file exists for the two shapes the landing page has no
 * equivalent of - the measured/not-measured columns, and the comparison
 * table.
 *
 * No new colors. The scope columns lean on the accent and --line that are
 * already declared, and the table is hairlines on the surface ladder.
 */

/* Measured / not measured ------------------------------------------- */
.scope-grid {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

/* The only visual difference between the two columns is a 3px edge. It is
   deliberately quiet: this section is a disclosure, not a feature comparison,
   and dressing the right-hand column as a warning would invite it being read
   as small print to skim past rather than as part of the offer. */
.scope-column {
  background: var(--bg);
  border-left: 3px solid var(--line);
}

.scope-measured {
  border-left-color: var(--accent);
}

.scope-column h3 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
}

.scope-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.scope-list li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.6rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  text-wrap: pretty;
}

.scope-list li:last-child {
  margin-bottom: 0;
}

.scope-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--line);
}

.scope-measured .scope-list li::before {
  background: var(--accent);
}

.scope-footnote {
  margin-top: 1.5rem;
  max-width: 44rem;
  font-size: 0.95rem;
}

/* Tier status tag ---------------------------------------------------- */

/* Sits above the tier's own heading, in the eyebrow's type. Live is quiet -
   it is the default state and does not need to shout. "In build" borrows the
   warning triad already used by .placeholder-banner and .draft-flag, which is
   the site's existing vocabulary for "this part is not finished", so it reads
   the same way here as it does everywhere else. */
.tier-status {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.tier-status-live {
  background: var(--bg-alt);
  color: var(--ink-soft);
}

.tier-status-in-build {
  background: #fff4d6;
  border: 1px solid #e0a800;
  color: #5c4600;
}

/* Comparison table --------------------------------------------------- */

/* Above 40rem the table is a table. Below it, the whole thing restacks into
   one block per row - see the media query at the end of this file. The scroll
   container is kept as a backstop for the awkward middle, where a long cell
   can still push the table wider than the wrap. */
.compare-scroll {
  margin-top: 2rem;
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

/* Shown only in the stacked layout, where a cell has no visible column header
   above it any more. */
.compare-col-label {
  display: none;
}

.compare-table th,
.compare-table td {
  text-align: left;
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.compare-table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
  border-bottom-width: 2px;
}

.compare-table tbody th {
  font-weight: 600;
  color: var(--ink);
  width: 30%;
}

.compare-table td {
  color: var(--ink-soft);
}

/* Our column is the one the reader is being asked to choose, so it gets the
   accent and the page's surface-ladder tint - the same Von Restorff move the
   featured pricing plan makes, and for the same reason. It is a tint and a
   text color, not a third shadow: only .estimator and .plan-featured are
   allowed to cast one. */
.compare-table .compare-ours {
  background: var(--bg-alt);
}

.compare-table thead .compare-ours {
  color: var(--accent);
}

.compare-table tbody td.compare-ours {
  color: var(--ink);
}

/* Stacked layout. The design target for this site is a 375px phone, not a
   desktop with a phone fallback, so this is the layout that has to work -
   and a sideways-scrolling table fails it in the specific way that matters:
   the "McQueen Roofing" column, which is the argument, starts off-screen
   behind a gesture nothing advertises.

   Each row becomes a small card: the row label as its heading, then both
   answers, each carrying its own column name. */
@media (max-width: 40rem) {
  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table tbody th,
  .compare-table td {
    display: block;
  }

  /* The header row's job is done by .compare-col-label once stacked. It stays
     in the DOM - the <th scope="col"> is what associates each cell with its
     column for a screen reader, and display:none would take that away. */
  .compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .compare-table tr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
  }

  .compare-table tbody th {
    width: auto;
    padding: 0 0 0.6rem;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
  }

  .compare-table td {
    padding: 0.6rem 0 0;
    border-bottom: 0;
  }

  /* The tint would read as a highlighted band across a card rather than as a
     column, so in this layout the accent moves onto the label instead. */
  .compare-table .compare-ours {
    background: none;
  }

  .compare-col-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 700;
    color: var(--ink-soft);
    margin-bottom: 0.15rem;
  }

  .compare-ours .compare-col-label {
    color: var(--accent);
  }
}