/* ══════════════════════════════════════════════════════════════
   ZoneScout: the Accounts page (accounts.html) only.

   The homepage's blocks (home.css, hx-) plus these, namespaced ac-. The same restraint: one
   accent, greys, hairlines. The one picture is the real app, in a plain laptop frame; the
   features are a hairline grid of short cards, not a wall of copy.
   ══════════════════════════════════════════════════════════════ */

.ac { background: #fff }
.ac .hx-hero { border-bottom: 0 }
.ac .hx-sec { padding: 96px 0 }
@media (max-width: 760px) { .ac .hx-sec { padding: 64px 0 } }

/* ── Hero ── */
.ac-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; padding: 80px 24px 88px }
@media (max-width: 1000px) { .ac-hero { grid-template-columns: 1fr; gap: 44px; padding: 52px 24px 56px } }
.ac-hero .hx-sub { margin-bottom: 32px }
.ac-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px }
/* The dark button (.hx-btn) and the laptop (.hx-laptop) are shared with the homepage: home.css. */
.ac-signin { font-size: 15px; font-weight: 500; color: var(--ink3); text-decoration: none }
.ac-signin:hover { color: var(--accent) }
.ac-fine { margin-top: 18px; font-size: 14px; color: var(--ink4) }

/* ── What's inside: a hairline grid ── */
.ac-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 48px; border-top: 1px solid var(--border); border-left: 1px solid var(--border-light) }
@media (max-width: 960px) { .ac-grid { grid-template-columns: 1fr 1fr } }
@media (max-width: 560px) { .ac-grid { grid-template-columns: 1fr; border-left: 0 } }
.ac-feat { padding: 28px 28px 30px; border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); background: #fff; transition: background .2s }
.ac-feat:hover { background: var(--paper) }
.ac-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-light); color: var(--accent); margin-bottom: 20px }
.ac-feat h3 { font-size: 1.075rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 6px; display: flex; align-items: center; gap: 8px }
.ac-feat p { color: var(--ink3); font-size: 14.75px; line-height: 1.6 }
.ac-tag { font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--ink3); background: var(--surface-sunken); padding: 3px 7px; border-radius: 6px }

/* ── Free, private, yours ── */
.ac-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 44px }
@media (max-width: 800px) { .ac-points { grid-template-columns: 1fr; gap: 28px } }
.ac-point { border-top: 1.5px solid var(--ink); padding-top: 20px }
.ac-point h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px }
.ac-point p { color: var(--ink3); font-size: 15px; line-height: 1.65 }
.ac-point a { color: var(--accent) }

/* ── Where it works: the coverage table ── */
.ac-tablewrap { margin-top: 40px; overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; background: #fff }
.ac-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 760px }
.ac-table caption { text-align: left; padding: 16px 20px 0; font-size: 13.5px; color: var(--ink4) }
.ac-table th, .ac-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border-light); vertical-align: top; line-height: 1.45 }
.ac-table thead th { font-size: 12.5px; font-weight: 600; color: var(--ink3); background: var(--paper); border-bottom-color: var(--border) }
.ac-table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap }
.ac-table tbody th small { display: block; font-weight: 400; color: var(--ink4); font-size: 12.5px }
.ac-table td { color: var(--ink2) }
.ac-table tr:last-child > * { border-bottom: 0 }
.ac-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.ac-yes, .ac-part, .ac-no { display: inline-flex; align-items: baseline; gap: 7px }
.ac-yes::before, .ac-part::before, .ac-no::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; transform: translateY(-1px) }
.ac-yes::before { background: var(--accent) }
.ac-part::before { background: #d99a2b }
.ac-no { color: var(--ink3) }
.ac-no::before { background: var(--ink4) }
.ac-notes { margin-top: 16px; font-size: 13.5px; line-height: 1.6; color: var(--ink3); max-width: 90ch }
.ac-notes a { color: var(--accent) }

/* ── Questions ── */
.ac-faq { margin-top: 36px; border-top: 1px solid var(--border) }
.ac-faq details { border-bottom: 1px solid var(--border-light) }
.ac-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font-size: 1.075rem; font-weight: 600; letter-spacing: -.015em; color: var(--ink);
}
.ac-faq summary::-webkit-details-marker { display: none }
.ac-faq summary::after { content: "+"; flex: none; font-weight: 400; font-size: 1.4rem; line-height: 1; color: var(--ink4); transition: transform .2s }
.ac-faq details[open] summary::after { transform: rotate(45deg) }
.ac-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px }
.ac-faq .ac-a { padding: 0 0 24px; max-width: 70ch }
.ac-faq .ac-a p { color: var(--ink2); font-size: 15.5px; line-height: 1.7 }
.ac-faq .ac-a p + p { margin-top: 12px }
.ac-faq .ac-a a { color: var(--accent) }

@media (prefers-reduced-motion: reduce) {
  .ac-faq summary::after { transition: none }
}