/*
 * The blocks that ask for the install: the side-by-side grid, the
 * install manifest and the questions.
 */

/* --- Side by side -------------------------------------------------------
   A bordered grid rather than a list of rows: the column being argued for is
   tinted its full height so the eye lands there first. */
.grid-table {
  width: 100%;
  border: 1px solid var(--line-bright); border-radius: 10px;
  overflow: hidden; background: var(--surface);
}
.gt-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
}
.gt-row + .gt-row { border-top: 1px solid var(--line); }
.gt-row > div {
  padding: 16px 18px; display: flex; align-items: center; justify-content: center;
  text-align: center; min-height: 62px;
}
.gt-row > div + div { border-left: 1px solid var(--line); }

.gt-key {
  justify-content: flex-start !important; text-align: left !important;
  color: var(--text-dim); font-size: 14.6px;
}
/* The SONAR column reads as one continuous panel down the table. */
.gt-us { background: rgba(251,191,36,.055); }

.gt-head {
  background: rgba(255,255,255,.022);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint);
}
.gt-head > div { min-height: 54px; }
.gt-head .gt-us {
  color: var(--amber); background: rgba(251,191,36,.09);
  font-weight: 500;
}

/* Circular badges, so a yes and a no are different shapes and not just colours. */
.gt-row i {
  font-style: normal; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%; font-size: 13px;
}
.gt-row i.y { background: var(--amber); color: #0a0b0e; font-weight: 700; }
.gt-row i.n {
  border: 1px solid var(--line-bright); color: var(--text-faint); font-size: 11px;
}
.gt-txt { font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); }
.gt-txt.dim { color: var(--text-faint); }
.gt-txt.hot { color: var(--amber); font-size: 14px; }

.vs-note {
  margin-top: 24px; font-size: 13.5px; color: var(--text-faint);
  max-width: 62ch; margin-inline: auto; text-align: center;
}

@media (max-width: 800px) {
  .gt-row { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, .58fr)); }
  .gt-row > div { padding: 13px 10px; min-height: 56px; }
  .gt-key { font-size: 13.2px; }
  .gt-head { font-size: 9px; letter-spacing: .06em; }
  .gt-txt { font-size: 11px; }
  .gt-row i { width: 22px; height: 22px; }
}

/* --- Questions ----------------------------------------------------------
   Native details/summary, so the FAQ needs no script to open. */
/* Two columns. One narrow column of ten hairline rows left half the width
   empty and read as a list nobody had bothered to lay out. */
.faq {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 56px; align-items: start;
}
@media (max-width: 820px) { .faq { grid-template-columns: 1fr; gap: 0; } }
.faq details { border-top: 1px solid var(--line); transition: background .25s; }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 17px 36px 17px 0; font-size: 15.2px; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono); font-size: 19px; color: var(--amber); line-height: 1;
}
.faq summary:hover { color: var(--amber); }
.faq details[open] summary::after { content: "−"; }
/* An open row is marked, not merely expanded. */
.faq details[open] {
  background: linear-gradient(90deg, rgba(251,191,36,.045), transparent 46%);
  box-shadow: inset 2px 0 0 var(--amber);
  padding-left: 20px;
}
.faq details[open] summary { color: var(--text); }
.faq details p {
  padding: 0 36px 20px 0; margin-top: -4px;
  color: var(--text-dim); font-size: 14.4px;
}
.faq details p a { color: var(--amber); text-decoration: none; }

/* --- Install ------------------------------------------------------------
   The claim and the action on one row, the facts as a strip underneath.

   The previous version led with STORE / PRICE / SIZE, which are the labels on
   a software package rather than reasons to install anything, and they took
   the most space while persuading least. The facts still matter — they are
   what makes the claim credible — so they stay, moved to a strip that also
   fills the dead space that used to sit under the button.
*/
.install {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 30px 56px;
  align-items: center;
  border: 1px solid var(--line-bright); border-radius: 12px;
  padding: 38px 44px 30px;
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(251,191,36,.055), transparent 62%),
    var(--surface);
}

.install h3 {
  font-size: clamp(24px, 2.6vw, 33px);
  font-weight: 600; letter-spacing: -.028em; line-height: 1.12;
  margin: 15px 0 16px; max-width: 18ch;
}
.install-copy { color: var(--text-dim); font-size: 15.6px; max-width: 48ch; }

.install-act { display: grid; gap: 12px; justify-items: stretch; }
.install-act .btn { justify-content: center; padding: 17px 26px; font-size: 16.5px; }
.install-under {
  text-align: center; font-family: var(--mono);
  font-size: 11.5px; color: var(--text-faint); letter-spacing: .02em;
}
.install-alt {
  margin-top: 4px; text-align: center;
  font-size: 13.5px; color: var(--text-dim); text-decoration: none;
}
.install-alt:hover { color: var(--amber); }

/* Spans both columns: the facts belong to the whole card, not to the button. */
.install-facts {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px 32px;
  padding-top: 26px; border-top: 1px solid var(--line);
}
.install-facts dt {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px;
}
.install-facts dd { font-size: 14px; color: var(--text-dim); }

@media (max-width: 900px) {
  .install { grid-template-columns: 1fr; gap: 28px; padding: 30px 24px; }
  .install h3 { max-width: none; }
}