:root {
  --ar-ink: #17201b;
  --ar-forest: #16231b;
  --ar-leaf: #bdf35e;
  --ar-signal: #ff6e4a;
  --ar-cyan: #7dd8d2;
  --ar-paper: #f7f9f5;
  --ar-mist: #e7ebe5;
  --ar-line: #cbd2ca;
}

.ar-page { max-width: 100%; background: var(--ar-paper); color: var(--ar-ink); overflow-x: hidden; }

.ar-hero {
  position: relative;
  min-height: 86svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 118px clamp(22px, 7vw, 96px) 78px;
  background: var(--ar-forest) url("/assets/accounts-receivable-audit-sample.png") center right / cover no-repeat;
  color: #f9fbf7;
  isolation: isolate;
}

.ar-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(22, 35, 27, .98) 0%, rgba(22, 35, 27, .93) 46%, rgba(22, 35, 27, .45) 76%, rgba(22, 35, 27, .18) 100%),
    linear-gradient(0deg, rgba(22, 35, 27, .7), transparent 45%);
}

.ar-hero__content { width: min(760px, 100%); min-width: 0; }

.ar-hero h1 {
  max-width: 13ch;
  margin-bottom: 24px;
  font-size: 4.7rem;
  line-height: .94;
  letter-spacing: 0;
}

.ar-hero__copy {
  max-width: 42rem;
  margin-bottom: 28px;
  color: rgba(249, 251, 247, .87);
  font-size: 1.2rem;
  line-height: 1.58;
}

.ar-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.ar-hero__facts li {
  min-width: 148px;
  padding: 13px 16px;
  background: rgba(249, 251, 247, .1);
  color: rgba(249, 251, 247, .74);
  font-size: .82rem;
}

.ar-hero__facts strong { display: block; margin-bottom: 3px; color: var(--ar-leaf); font-size: 1rem; }

.ar-hero__boundary {
  max-width: 42rem;
  margin: 18px 0 0;
  color: rgba(249, 251, 247, .72);
  font-size: .87rem;
  line-height: 1.55;
}

.ar-hero__boundary strong { color: #f9fbf7; }

.ar-hero__sample {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid rgba(249, 251, 247, .36);
  border-radius: 6px;
  background: rgba(22, 35, 27, .74);
  color: #f9fbf7;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
  backdrop-filter: blur(10px);
}

.ar-hero__sample svg { width: 16px; height: 16px; }

.ar-answer,
.ar-data,
.ar-sources,
.ar-conversion {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 7vw, 110px);
  padding: 86px clamp(22px, 7vw, 96px);
}

.ar-answer { border-bottom: 1px solid var(--ar-line); background: #fff; }
.ar-answer h2, .ar-section-head h2, .ar-boundary h2, .ar-data h2, .ar-sources h2, .ar-conversion h2 { font-size: 3.25rem; letter-spacing: 0; }
.ar-answer__copy p { color: #566159; font-size: 1.08rem; line-height: 1.72; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ar-ink);
  font-weight: 850;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.text-link svg { width: 17px; height: 17px; }

.ar-output { padding: 92px clamp(22px, 7vw, 96px); background: var(--ar-paper); }
.ar-section-head { max-width: 900px; margin-bottom: 48px; }
.ar-output__rows { border-top: 1px solid var(--ar-line); }
.ar-output__rows article { display: grid; grid-template-columns: 70px minmax(0, 1fr) 42px; gap: 22px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--ar-line); }
.ar-output__rows article > span { color: var(--ar-signal); font-weight: 850; }
.ar-output__rows h3 { margin-bottom: 7px; font-size: 1.4rem; }
.ar-output__rows p { max-width: 56rem; margin-bottom: 0; color: #5d685f; line-height: 1.58; }
.ar-output__rows svg { width: 28px; height: 28px; color: #49745b; }

.ar-proof { padding: 88px clamp(22px, 7vw, 96px); background: #dfe6df; }
.ar-proof__image { position: relative; display: block; max-width: 1280px; overflow: hidden; border: 1px solid #aeb9af; border-radius: 6px; box-shadow: 0 24px 64px rgba(23, 32, 27, .18); }
.ar-proof__image img { display: block; width: 100%; height: auto; }
.ar-proof__image span { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 6px; background: var(--ar-forest); color: #fff; font-size: .8rem; font-weight: 800; }
.ar-proof__image svg { width: 16px; height: 16px; }
.ar-proof__caption { margin: 16px 0 0; color: #5a675e; font-size: .84rem; }

.ar-boundary { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(42px, 8vw, 120px); padding: 96px clamp(22px, 7vw, 96px); background: var(--ar-forest); color: #f9fbf7; }
.ar-boundary__lead p:last-child { margin-top: 24px; color: #b8c5ba; line-height: 1.65; }
.ar-boundary__columns { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(249, 251, 247, .2); }
.ar-boundary__columns > div { padding: 30px; }
.ar-boundary__columns > div + div { border-left: 1px solid rgba(249, 251, 247, .2); }
.ar-boundary__columns h3 { font-size: 1rem; color: var(--ar-leaf); text-transform: uppercase; }
.ar-boundary__columns ul { margin: 0; padding-left: 18px; color: #d7dfd8; }
.ar-boundary__columns li { margin: 11px 0; line-height: 1.5; }

.ar-data { background: var(--ar-cyan); }
.ar-data__steps { border-top: 1px solid rgba(23, 32, 27, .28); }
.ar-data__steps p { display: grid; grid-template-columns: 40px 1fr; gap: 10px; margin: 0; padding: 16px 0; border-bottom: 1px solid rgba(23, 32, 27, .28); line-height: 1.55; }
.ar-data__steps span { font-weight: 850; }
.ar-data .text-link { grid-column: 2; }

.ar-process { padding: 94px clamp(22px, 7vw, 96px); background: #fff; }
.ar-process ol { margin: 0; padding: 0; border-top: 1px solid var(--ar-line); list-style: none; }
.ar-process li { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--ar-line); }
.ar-process li > span { color: var(--ar-signal); font-weight: 850; }
.ar-process strong { display: block; margin-bottom: 7px; font-size: 1.18rem; }
.ar-process p { margin: 0; color: #5e685f; line-height: 1.58; }

.ar-sources { background: #fff4dd; }
.ar-sources > p { color: #4e584f; line-height: 1.72; }
.ar-sources a { text-underline-offset: 4px; }

.ar-conversion { background: var(--ar-signal); }
.ar-conversion__action { align-self: end; }
.ar-conversion__action .button--primary { background: var(--ar-forest); color: #fff; }
.ar-conversion__action .button--plain { border-color: rgba(23, 32, 27, .4); }
.ar-conversion__action > p { max-width: 44rem; margin: 20px 0 0; font-size: .82rem; line-height: 1.5; }

@media (max-width: 940px) {
  .ar-hero h1 { font-size: 3.45rem; }
  .ar-answer, .ar-data, .ar-sources, .ar-conversion, .ar-boundary { grid-template-columns: 1fr; }
  .ar-answer h2, .ar-section-head h2, .ar-boundary h2, .ar-data h2, .ar-sources h2, .ar-conversion h2 { font-size: 2.55rem; }
  .ar-data .text-link { grid-column: 1; }
}

@media (max-width: 680px) {
  .ar-hero { min-height: 82svh; align-items: flex-start; padding-top: 104px; padding-bottom: 76px; background-position: 64% center; }
  .ar-hero__veil { background: linear-gradient(90deg, rgba(22, 35, 27, .98), rgba(22, 35, 27, .84)), linear-gradient(0deg, rgba(22, 35, 27, .82), transparent); }
  .ar-hero h1 { font-size: 2.55rem; line-height: 1; }
  .ar-hero__copy { font-size: 1.02rem; }
  .ar-hero .hero__actions { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); }
  .ar-hero .button { width: 100%; min-width: 0; padding-inline: 12px; white-space: normal; text-align: center; }
  .ar-hero .button span { min-width: 0; overflow-wrap: anywhere; }
  .ar-hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .ar-hero__facts li { min-width: 0; padding: 10px; font-size: .72rem; }
  .ar-hero__sample { right: 18px; bottom: 18px; width: 40px; height: 40px; justify-content: center; padding: 0; }
  .ar-hero__sample span { display: none; }
  .ar-answer, .ar-data, .ar-sources, .ar-conversion, .ar-boundary, .ar-output, .ar-proof, .ar-process { padding-top: 68px; padding-bottom: 68px; }
  .ar-answer h2, .ar-section-head h2, .ar-boundary h2, .ar-data h2, .ar-sources h2, .ar-conversion h2 { font-size: 2.15rem; }
  .ar-output__rows article { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .ar-output__rows article > svg { display: none; }
  .ar-boundary__columns { grid-template-columns: 1fr; }
  .ar-boundary__columns > div + div { border-top: 1px solid rgba(249, 251, 247, .2); border-left: 0; }
  .ar-process li { grid-template-columns: 44px 1fr; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; }
}
