/*
 * 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; }
}

@media (max-width: 560px) {
  /* Four columns in 317px put the headings at 9px, which is below what a
     phone can actually read. The three verdict columns only ever hold a badge
     or two words, so the width comes out of the key column instead. */
  .gt-row { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, .62fr)); }
  .gt-row > div { padding: 11px 6px; }
  .gt-key { font-size: 12.6px; line-height: 1.35; }
  .gt-head { font-size: 10px; letter-spacing: .02em; line-height: 1.35; }
  .gt-txt { font-size: 10.5px; line-height: 1.4; }
  .gt-txt.hot { font-size: 11.5px; }
}

/* --- 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; }
}

/* --- Contract address ----------------------------------------------------
   Printed in full, never truncated: the middle of an address is precisely
   where an impersonator's differs, and a reader cannot compare what a
   shortened form hides. Wraps on narrow screens rather than scrolling, so
   the whole thing is always visible at once. */
.ca {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  width: 100%; padding: 18px 20px;
  border: 1px solid var(--line-bright); border-radius: 10px;
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(251,191,36,.05), transparent 60%),
    var(--surface);
}
.ca-value {
  flex: 1 1 340px; min-width: 0;
  font-family: var(--mono); font-size: 14.5px; color: var(--text);
  word-break: break-all; line-height: 1.5;
}
.ca-copy {
  flex: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 9px 18px; border-radius: 6px;
  border: 0; background: var(--amber); color: #0a0b0e;
  transition: background .2s;
}
.ca-copy:hover { background: #fdd34f; }
.ca-copy.done { background: var(--safe); }
.ca-explorer {
  flex: none; font-size: 13.5px; color: var(--text-dim); text-decoration: none;
  border-bottom: 1px dotted var(--line-bright); padding-bottom: 1px;
}
.ca-explorer:hover { color: var(--amber); }

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

@media (max-width: 560px) {
  .ca { gap: 14px; }
  .ca-copy { flex: 1 1 auto; }
}

/* Before launch: the slot is there, visibly empty, and says so. Muted rather
   than styled like a value, so it can never be mistaken for one. */
.pending .ca { background: var(--surface); border-style: dashed; }
.pending .ca-value {
  font-family: var(--sans); color: var(--text-faint);
  font-size: 14.5px; word-break: normal;
}