/* /acceso/ — the access list, and the two other rungs the funnel was missing.
   Colour, type and spacing come from site.css tokens; nothing here invents a
   value. The form card is the page's subject, so it is the only raised surface
   on the screen and the copy beside it stays flat. */

.acc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: var(--space-16);
  align-items: start;
  padding: var(--space-20) 0 var(--space-18);
  max-width: var(--wrap, 1120px);
  margin: 0 auto;
  padding-inline: var(--space-6);
}

.acc-hero h1 {
  font-size: var(--display-lg);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: var(--space-4) 0 var(--space-5);
  text-wrap: balance;
}

.acc-lede {
  font-size: var(--text-xl);
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 var(--space-9);
  max-width: 46ch;
}

.acc-promises {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  max-width: 46ch;
}

.acc-promises li {
  border-top: 1px solid var(--line-soft);
  padding-top: var(--space-4);
}

.acc-promises strong {
  display: block;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-1);
}

.acc-promises p {
  margin: 0;
  font-size: var(--text-base);
  color: var(--muted);
  line-height: 1.55;
}

/* ---------- the card ---------- */

.acc-form-card {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: var(--space-8);
  position: sticky;
  top: var(--space-20);
}

.acc-form-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-6);
}

.acc-field { margin-bottom: var(--space-5); }

.acc-field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.acc-field input,
.acc-field select {
  width: 100%;
  font: inherit;
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 11px 13px;
}

.acc-field select {
  /* Every dropdown on this site is styled; a native select would be the one
     control that looks like the operating system instead of the product. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.acc-field input:focus-visible,
.acc-field select:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: transparent;
}

.acc-field input[aria-invalid="true"] { border-color: var(--error-ink); }

.acc-error {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--error-ink);
}

.acc-message {
  margin: var(--space-4) 0 0;
  padding: 10px 13px;
  border-radius: 9px;
  background: var(--error-bg);
  color: var(--error-ink);
  font-size: var(--text-sm);
}

.acc-submit {
  width: 100%;
  margin-top: var(--space-5);
  justify-content: center;
}

.acc-fine {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--muted);
}

.acc-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#access-turnstile:not(:empty) { margin-top: var(--space-5); }

/* ---------- success ---------- */

.acc-success { text-align: left; }
.acc-success > span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--ink);
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}
.acc-success h2 {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}
.acc-success p { margin: 0 0 var(--space-6); color: var(--text); font-size: var(--text-base); }

.acc-success-links,
.success-links {
  display: grid;
  gap: var(--space-1);
}

.acc-success-links a,
.success-links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.acc-success-links a:hover,
.success-links a:hover { color: var(--link, #4338ca); }
.acc-success-links i,
.success-links i { font-style: normal; color: var(--muted); }

/* ---------- FAQ ---------- */

.acc-faq {
  max-width: var(--wrap, 1120px);
  margin: 0 auto;
  padding: var(--space-16) var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: var(--space-14);
  border-top: 1px solid var(--line-soft);
}

.acc-section-heading p {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-3);
}

.acc-section-heading h2 {
  font-size: var(--display-xs);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0;
}

/* ---------- level 3: the demo success panel ---------- */

.success-next {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--line-soft);
  text-align: left;
}

.success-next-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-4);
}

.success-next-label + .success-links { margin-bottom: var(--space-7); }

.success-steps {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.success-steps li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.success-steps span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 700;
}

.success-steps strong {
  display: block;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.success-steps p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- level 1: the guide takeaway ---------- */

.takeaway {
  max-width: var(--wrap, 1120px);
  margin: 0 auto;
  padding: var(--space-14) var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: var(--space-14);
  align-items: start;
  border-top: 1px solid var(--line-soft);
}

.takeaway-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-3);
}

.takeaway h2 {
  font-size: var(--display-xs);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 var(--space-4);
  max-width: 20ch;
}

.takeaway-main > p {
  margin: 0 0 var(--space-7);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--text);
  max-width: 52ch;
}

.takeaway-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.takeaway-side p {
  margin: 0;
  padding: var(--space-6);
  background: var(--surface-sunken);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- print: the takeaway IS the page ---------- */

@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .takeaway,
  .cta-band,
  .analytics-consent,
  .decision-paths,
  .res-related { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  main { max-width: none; }
  a[href^="/"]::after { content: " (agentticcrm.com" attr(href) ")"; font-size: 8.5pt; color: #555; }
  h1, h2, h3 { break-after: avoid; }
  li, p { break-inside: avoid; }
}

@media (max-width: 900px) {
  .acc-hero,
  .acc-faq,
  .takeaway { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .acc-form-card { position: static; }
}

/* ---------- V-2: proof of existence, where the decision is made ---------- */

.exists {
  max-width: var(--wrap, 1120px);
  margin: 0 auto;
  padding: var(--space-14) var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: var(--space-14);
  align-items: start;
  border-top: 1px solid var(--line-soft);
}

.exists-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-3);
}

.exists h2 { font-size: var(--display-xs); letter-spacing: -0.025em; line-height: 1.12; margin: 0 0 var(--space-5); }
.exists-copy > p { margin: 0 0 var(--space-5); font-size: var(--text-lg); line-height: 1.65; color: var(--text); max-width: 56ch; }
.exists-link { margin: 0; font-size: var(--text-base); }
.exists-link a { font-weight: 600; color: var(--ink); text-decoration: none; }
.exists-link a:hover { text-decoration: underline; }
.exists-link i { font-style: normal; color: var(--muted); }

.exists-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.exists-facts strong {
  display: block;
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.exists-facts span { font-size: var(--text-sm); line-height: 1.45; color: var(--muted); }

@media (max-width: 900px) {
  .exists { grid-template-columns: minmax(0, 1fr); gap: var(--space-9); }
}