/* The seller's sale page (templates/acquire.html). Everything here builds on tokens.css and
   site.css: same ground, ink, type and hairlines. Only what that page needs and site.css lacks:
   the hero, the demo poster, numbered steps, the screenshot gallery, the asset and cost lists and
   the status board. Layouts are single-column first and widen with space, so nothing scrolls
   sideways on a phone. Motion is limited to hover feedback and is off under reduced motion. */

/* ---------- hero ---------- */
.aq-hero { padding-block: var(--space-7) var(--space-6); }
.aq-hero .eyebrow { margin-bottom: var(--space-5); }
.aq-mark { width: min(100%, 460px); margin: 0 0 var(--space-5); opacity: .95; }
.aq-mark img { display: block; width: 100%; height: auto; }
.aq-hero h1 { font-size: var(--step-5); max-width: 18ch; margin-bottom: var(--space-5); text-wrap: balance; }
.aq-hero .lead { max-width: 64ch; color: var(--text-secondary); }
.aq-hero .lead + .lead { color: var(--text-muted); }
.aq-hero .button-row { margin-block: var(--space-5) var(--space-3); }

.aq-glance {
  margin-top: var(--space-6);
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 70%);
}
.aq-glance-title { font-size: var(--step-1); font-weight: 600; margin: 0; }
.aq-asof {
  margin: 4px 0 var(--space-4);
  font: 400 .78rem/1.5 var(--font-mono);
  letter-spacing: .04em;
  color: var(--text-faint);
}
.aq-glance-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  counter-reset: glance;
}
.aq-glance-list li {
  counter-increment: glance;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  color: var(--text-secondary);
  font-size: .95rem;
  line-height: 1.55;
}
.aq-glance-list li::before {
  content: "0" counter(glance);
  display: block;
  margin-bottom: 8px;
  font: 500 .74rem/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--text-faint);
}
.aq-glance > :last-child { margin-bottom: 0; }
/* a link on a line of its own gets a full touch target */
.aq-glance > p > a:only-child { display: inline-flex; align-items: center; min-height: var(--touch); }

/* ---------- shared bits ---------- */
.aq-subhead { margin-top: var(--space-7); margin-bottom: var(--space-4); font-size: var(--step-1); }
.section h2 { max-width: 26ch; text-wrap: balance; }
.section .eyebrow { margin-bottom: var(--space-3); }
.aq-footer-note { margin: 0; max-width: 60ch; color: var(--text-faint); }

/* ---------- demo ---------- */
.aq-demo {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin-top: var(--space-5);
}
@media (min-width: 960px) {
  .aq-demo { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.aq-poster { margin: 0; }
.aq-poster img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.aq-poster-link { position: relative; display: block; border-radius: var(--radius-lg); text-decoration: none; }
.aq-poster-link:hover img, .aq-poster-link:focus-visible img { border-color: var(--ui-border-strong); }
.aq-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--button-bg);
  color: var(--button-fg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
}
.aq-play svg { width: 34px; height: 34px; fill: currentColor; margin-left: 4px; }
.aq-poster-link:hover .aq-play { box-shadow: 0 10px 44px var(--glow); }
.aq-poster figcaption, .aq-shots figcaption {
  margin-top: 10px;
  font-size: var(--step--1);
  color: var(--text-muted);
}
.aq-demo-side > :first-child { margin-top: 0; }
.aq-demo-side .notice { margin-bottom: 0; }
.aq-demo-side .notice ul { margin-bottom: var(--space-3); }

/* ---------- numbered steps and the process ---------- */
.aq-steps, .aq-process {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  /* five steps sit on one row at full width; six process steps make three by two */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  counter-reset: step;
}
.aq-process { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.aq-steps > li, .aq-process > li {
  counter-increment: step;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent);
}
.aq-steps > li::before, .aq-process > li::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: 12px;
  font: 500 .78rem/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--text-faint);
}
.aq-steps h3, .aq-process h3 { font-size: 1.08rem; margin-bottom: var(--space-2); }
.aq-steps p, .aq-process p { margin: 0; color: var(--text-muted); font-size: .95rem; }
.aq-process { margin-bottom: var(--space-5); }

.aq-columns {
  display: grid;
  gap: 10px 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  margin: 0;
  padding-left: 1.2em;
  color: var(--text-muted);
}

/* ---------- screenshots ---------- */
.aq-shots {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  margin-top: var(--space-5);
}
.aq-shots figure { margin: 0; }
.aq-shots a { display: block; border-radius: var(--radius); }
.aq-shots img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-surface);
}
.aq-shots a:hover img { border-color: var(--ui-border-strong); }

/* ---------- who it could suit ---------- */
.aq-cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.aq-cards .panel { margin: 0; }
.aq-cards .panel h3 { margin-top: 0; }
.aq-cards .panel p { color: var(--text-muted); }

/* ---------- what is included ---------- */
.aq-split {
  display: grid;
  gap: var(--space-7) var(--space-7);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-5);
}
@media (min-width: 960px) {
  .aq-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.aq-split h3 { margin-bottom: var(--space-4); }
.aq-assets { margin: 0; border-top: 1px solid var(--line); }
.aq-assets > div { padding-block: 14px; border-bottom: 1px solid var(--line); }
.aq-assets dt { font: 600 1rem/1.4 var(--font-display); letter-spacing: .01em; color: var(--text-primary); }
.aq-assets dd { margin: 4px 0 0; color: var(--text-muted); font-size: .95rem; }
.aq-excluded { list-style: none; margin: 0 0 var(--space-5); padding: 0; border-top: 1px solid var(--line); }
.aq-excluded li { padding-block: 12px; border-bottom: 1px solid var(--line); color: var(--text-muted); font-size: .95rem; }

/* ---------- technical overview ---------- */
.aq-tech { margin: var(--space-5) 0 0; border-top: 1px solid var(--line); }
.aq-tech > div {
  display: grid;
  gap: 6px var(--space-6);
  grid-template-columns: minmax(0, 1fr);
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 820px) {
  .aq-tech > div { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
}
.aq-tech dt { font: 600 1rem/1.45 var(--font-display); letter-spacing: .01em; color: var(--text-primary); }
.aq-tech dd { margin: 0; max-width: 72ch; color: var(--text-muted); }

/* ---------- verification status ---------- */
.aq-status {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  margin-block: var(--space-5);
}
.aq-status-group {
  border: 1px solid var(--line);
  border-top: 3px solid var(--ui-border-strong);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 20px 22px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 60%);
}
.aq-status-verified { border-top-color: var(--text-success); }
.aq-status-buyer { border-top-color: var(--text-primary); }
.aq-status-outstanding { border-top-color: var(--text-warning); }
.aq-status-group h3 { margin-bottom: 4px; }
.aq-status-group ul { margin: var(--space-3) 0 0; padding-left: 1.2em; color: var(--text-secondary); font-size: .95rem; }
.aq-status-group li { margin-block: 7px; }

/* ---------- costs ---------- */
.aq-costs { list-style: none; margin: 0 0 var(--space-4); padding: 0; border-top: 1px solid var(--line); }
.aq-costs li {
  display: grid;
  gap: 4px var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 820px) {
  .aq-costs li { grid-template-columns: minmax(0, 15rem) minmax(0, 13rem) minmax(0, 1fr); }
}
.aq-cost-item { font: 600 1rem/1.45 var(--font-display); letter-spacing: .01em; color: var(--text-primary); }
.aq-cost-amount { font: 500 .95rem/1.55 var(--font-mono); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.aq-cost-note { color: var(--text-muted); font-size: .95rem; }
.aq-cost-source { color: var(--text-faint); }

/* ---------- price ---------- */
.aq-price { max-width: 46rem; }
.aq-price-label {
  margin: 0 0 6px;
  font: 600 .74rem/1.5 var(--font-display);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.aq-price-value { margin: 0 0 var(--space-4); font: 700 var(--step-3)/1.2 var(--font-display); letter-spacing: .01em; color: var(--text-primary); }

/* ---------- contact ---------- */
.aq-contact .lead { color: var(--text-secondary); }
.aq-contact ul { color: var(--text-muted); }

@media (prefers-reduced-motion: no-preference) {
  .aq-poster img, .aq-shots img { transition: border-color .2s ease; }
  .aq-play { transition: box-shadow .2s ease, transform .2s ease; }
  .aq-poster-link:hover .aq-play { transform: scale(1.04); }
}

@media (forced-colors: active) {
  .aq-play { border: 2px solid ButtonText; }
  .aq-status-group { border-top-width: 3px; }
}

@media print {
  .aq-play { display: none; }
  .faq details > * { display: block; }
}