/* AI visibility check. Tokens, buttons, fields and the 42% axis come from ../style.css; this file adds only the tool. */

.check-hero {
  display: grid;
  grid-template-columns: var(--axis) minmax(0, 1fr);
  column-gap: 0;
  row-gap: 48px;
  padding: 140px var(--m) 140px;
}
.check-hero h1 {
  grid-column: 1 / -1;
  font-size: clamp(2.4rem, 1.2rem + 5.2vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
  max-width: 17ch;
}
.check-lead {
  grid-column: 1;
  font-size: var(--step-body);
  max-width: 30ch;
  padding-inline-end: 32px;
  margin: 0;
}
.check-form { grid-column: 2; min-width: 0; }
.check-form label { display: block; font-size: var(--step-small); color: var(--muted); margin-block-end: 12px; }
.check-row { display: flex; gap: 12px; align-items: stretch; max-width: 60ch; }
.check-row input {
  flex: 1 1 auto;
  min-width: 0;
  font: 500 var(--step-lead) var(--font);
  color: var(--ink);
  background: var(--surface);
  border: 0;
  border-radius: 0;
  padding: 16px 18px;
  min-height: 60px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.check-row input::placeholder { color: #5f5f5f; }
.check-row input:hover { background: var(--surface-2); }
.check-row input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.check-row .btn { flex: 0 0 auto; min-height: 60px; font-size: 1.125rem; }
.btn:disabled { background: var(--surface-2); color: var(--muted); cursor: progress; transform: none; }
.check-form .note { max-width: 60ch; margin-block-start: 18px; }

/* the result: a section like the others, hidden until a check runs */
.check-result[hidden] { display: none; }
.check-result { outline: none; }
.check-result .big { margin-block-end: 8px; }
.check-result .note { margin-block-start: 0; }
.check-result .lead { max-width: 40ch; margin-block: 24px 0; }
.check-list { display: grid; gap: 8px; max-width: 64ch; margin-block: 48px 0; }
.check-item { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); background: var(--surface); }
.check-status { margin: 0; padding: 16px 16px; font-size: var(--step-small); font-weight: 600; max-width: none; }
.check-body { padding: 16px 22px 20px; min-width: 0; }
.check-body h3 { font-size: var(--step-body); font-weight: 600; letter-spacing: -0.01em; margin-block-end: 6px; overflow-wrap: anywhere; }
.check-body p { margin: 0 0 6px; max-width: 60ch; overflow-wrap: anywhere; }
.check-body .check-fix { color: var(--ink); margin-block-start: 8px; }
.s-pass .check-status { background: var(--field); color: var(--field-ink); }
.s-warn .check-status { background: var(--surface-2); color: var(--ink); }
.s-fail .check-status { background: var(--accent); color: var(--accent-ink); }
.s-info .check-status { background: var(--bg); color: var(--muted); }
.s-info { background: transparent; }
.check-disclaimer { margin-block: 32px 0; max-width: 64ch; }

.check-cta { margin-block-start: 72px; background: var(--surface); padding: 40px 40px 44px; max-width: 64ch; }
.check-cta h3 { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; margin-block-end: 14px; }
.check-cta p { max-width: none; }
.check-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-block: 28px 0; }
.check-link { font-size: var(--step-small); color: var(--ink); text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.check-link:hover { color: var(--accent); }

.band video { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; display: block; }
.plain { display: grid; gap: 14px; max-width: 64ch; margin-block: 0 40px; }
.plain li { max-width: none; }
.field .check-link { color: var(--field-ink); }

@media (max-width: 900px) {
  .check-hero { grid-template-columns: 1fr; row-gap: 32px; padding-block: 96px 100px; }
  .check-hero h1 { font-size: clamp(2.4rem, 9.6vw, 4.6rem); }
  .check-lead { grid-column: 1; padding-inline-end: 0; }
  .check-form { grid-column: 1; }
  .check-cta { padding: 30px 24px 34px; }
}

@media (max-width: 560px) {
  .check-hero h1 { font-size: 10.2vw; }
  .check-row { flex-direction: column; }
  .check-row .btn { width: 100%; min-height: 56px; }
  .check-row input { min-height: 56px; }
  .check-item { grid-template-columns: 1fr; }
  .check-status { padding: 10px 16px; }
  .check-body { padding: 14px 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .check-result { scroll-behavior: auto; }
}