/*
 * Namequota page. Loads after the Last Table tokens and components and uses only their variables.
 * The one primary action is the Score button; the checkout button stays hidden until the plan says it is open.
 */

.lt-page .as-faqs h2 {
  margin: 0;
  font: 560 var(--lt-step-3) / var(--lt-leading-tight) var(--lt-font-display);
  color: var(--lt-text-1);
}
.lt-page .lt-section:last-child { padding-bottom: var(--lt-space-8); }

.as-facts { display: flex; flex-wrap: wrap; gap: var(--lt-space-2) var(--lt-space-5); margin: var(--lt-space-5) 0 0; font-size: var(--lt-step--1); color: var(--lt-text-2); }
.as-big { margin: 0; font: 560 var(--lt-step-2) / var(--lt-leading-tight) var(--lt-font-display); color: var(--lt-text-1); }

/* The share table scrolls inside its own box on a phone. */
.as-table-wrap { margin-top: var(--lt-space-5); overflow-x: auto; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-control); background: var(--lt-surface-2); }
.as-table { width: 100%; border-collapse: collapse; font-size: var(--lt-step--1); }
.as-table th, .as-table td { padding: var(--lt-space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--lt-line); }
.as-table thead th { color: var(--lt-text-2); font-weight: 600; white-space: nowrap; }
.as-table tbody tr:last-child th, .as-table tbody tr:last-child td { border-bottom: 0; }
.as-table td.as-big { font-size: var(--lt-step-1); white-space: nowrap; }
.as-table td.lt-muted { min-width: 16rem; color: var(--lt-text-3); }

.as-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lt-space-4); margin-top: var(--lt-space-5); }
.as-card { display: grid; gap: var(--lt-space-2); align-content: start; }
.as-card p { margin: 0; }
.as-list { margin: 0; padding-left: var(--lt-space-5); display: grid; gap: var(--lt-space-2); }
.as-list .lt-muted { display: block; font-size: var(--lt-step--1); color: var(--lt-text-3); }
.as-list:empty { display: none; }
.lt-page #as-agents ~ .as-card { margin-top: var(--lt-space-5); }

/* The form and the answer sit side by side on a desktop and stack on a phone. */
.as-try { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--lt-space-5); align-items: start; }
.as-try .as-result { margin-top: 0; max-width: none; }
.as-form { display: grid; gap: var(--lt-space-4); }
.as-form h2 { margin: 0; }
.as-form label { display: grid; gap: var(--lt-space-1); font-size: var(--lt-step--1); color: var(--lt-text-2); }
.as-form textarea { width: 100%; resize: vertical; font: var(--lt-step--1) / 1.6 var(--lt-font-ui); }
.as-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lt-space-3); }
.as-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lt-space-3); margin: 0; }
.as-actions .lt-prompt-hint { margin: 0; flex: 1 1 12rem; }
/* Last Table buttons set their own display, so a hidden checkout needs this to stay hidden. */
#as-checkout[hidden] { display: none; }
#as-status[data-tone="error"] { color: var(--lt-danger); }
#as-result .as-list { margin-top: var(--lt-space-4); }

@media (max-width: 900px) {
  .as-try, .as-pair { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .as-fields { grid-template-columns: 1fr; }
}

/* Each install block gets room above its client name. */
.lt-page #as-agents ~ .lt-h3 { margin: var(--lt-space-5) 0 var(--lt-space-2); }