/* Accumo — motion layer
   WebGL hero field, scroll reveals, the Try Accu demo, waitlist.
   Loads after styles.css and only extends it. */

/* ============================================================ WebGL field */
#field {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: 0.9;
}
.hero::before { z-index: 1; }
.hero-grid { position: relative; z-index: 2; }
.field-note {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  z-index: 2; font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); opacity: 0.8; pointer-events: none; text-align: center;
}
.field-note b { color: var(--gold); font-weight: 650; }

/* =========================================================== Scroll reveal */
/* Content is visible by default. It is only hidden once JS has confirmed it can
   reveal it again — so a failed observer can never leave the page blank. */
.js-on .rv {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.js-on .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-on .rv { opacity: 1; transform: none; transition: none; }
}

/* ============================================================== Accu demo */
.accu-demo {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden;
}
.ad-bar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--bg-soft);
}
.ad-tab {
  border: 1px solid transparent; background: transparent; cursor: pointer;
  padding: .38rem .8rem; border-radius: 999px; color: var(--muted);
  font-size: .82rem; font-weight: 600; transition: background .18s, color .18s;
}
.ad-tab:hover { color: var(--ink); }
.ad-tab.is-on { background: var(--accent); color: #fff; }
.ad-spacer { flex: 1 1 auto; }
.ad-run {
  border: 0; cursor: pointer; background: var(--ink); color: #fff;
  padding: .5rem 1rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
  transition: opacity .2s, transform .12s;
}
.ad-run:hover:not(:disabled) { transform: translateY(-1px); }
.ad-run:disabled { opacity: .5; cursor: default; }

.ad-stage { padding: 1.25rem 1.1rem; min-height: 320px; }
.ad-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 720px) { .ad-split { grid-template-columns: 1fr; } }
.ad-pane-h {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 650; margin-bottom: .6rem;
}

/* Vouch — schedule + evidence */
.ad-sheet, .ad-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ad-sr {
  display: grid; grid-template-columns: 3rem 1fr auto; gap: .6rem;
  padding: .5rem .7rem; font-size: .8rem; border-bottom: 1px solid var(--line);
  transition: background .35s, box-shadow .35s;
}
.ad-sr:last-child { border-bottom: 0; }
.ad-sr-head {
  background: var(--bg-soft); font-weight: 650; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.ad-sr.is-hit { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }

.ad-docs { display: flex; flex-direction: column; gap: .35rem; }
.ad-doc {
  display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem;
  border: 1px solid var(--line); border-radius: 8px; font-size: .78rem;
  transition: background .25s, border-color .25s, transform .25s;
}
.ad-doc i { width: 14px; height: 17px; border-radius: 2px; background: var(--line-2); flex: none; }
.ad-doc.is-scan { background: var(--bg-soft); transform: translateX(3px); }
.ad-doc.is-hit { border-color: var(--accent); background: var(--accent-soft); }
.ad-doc.is-hit i { background: var(--accent); }

/* Payments */
.ad-pr {
  display: grid; grid-template-columns: 5.2rem 1fr 6.2rem 8.5rem; gap: .5rem;
  padding: .45rem .7rem; font-size: .78rem; border-bottom: 1px solid var(--line);
  transition: background .3s, box-shadow .3s;
}
.ad-pr:last-child { border-bottom: 0; }
.ad-pr-head {
  background: var(--bg-soft); font-weight: 650; font-size: .66rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.ad-pr.is-scan { background: var(--bg-soft); }
.ad-pr.is-flag { background: var(--gold-soft); box-shadow: inset 3px 0 0 var(--gold); }
.ad-pr.is-flag-soft { background: rgba(234,90,40,.09); }
.ad-flag { font-size: .67rem; font-weight: 650; color: var(--gold); }
@media (max-width: 620px) {
  .ad-pr { grid-template-columns: 4.4rem 1fr 5.4rem; }
  .ad-pr .ad-flag { grid-column: 1 / -1; }
}

/* Branch */
.ad-checks { display: flex; flex-direction: column; gap: .3rem; }
.ad-check {
  display: flex; justify-content: space-between; gap: .6rem;
  padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px;
  font-size: .78rem; transition: background .3s, border-color .3s;
}
.ad-check b { font-variant-numeric: tabular-nums; color: var(--muted); }
.ad-check.is-ok { border-color: rgba(21,122,91,.35); }
.ad-check.is-ok b { color: var(--ok); }
.ad-check.is-bad { border-color: rgba(194,46,82,.35); background: rgba(194,46,82,.05); }
.ad-check.is-bad b { color: var(--danger); }
.ad-score { margin-top: .7rem; font-size: .8rem; color: var(--muted); }
.ad-score strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.ad-matrix { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ad-matrix i {
  aspect-ratio: 1; border-radius: 4px; background: var(--bg-soft);
  border: 1px solid var(--line); transition: background .45s, box-shadow .45s, border-color .45s;
}
.ad-matrix i.is-on {
  background: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(234,90,40,.18);
}
.ad-axis {
  display: flex; justify-content: space-between; margin-top: .5rem;
  font-size: .65rem; color: var(--muted); letter-spacing: .04em;
}

/* Results + human gate */
.ad-result {
  margin-top: 1.1rem; opacity: 0; transform: translateY(8px);
  transition: opacity .45s, transform .45s;
}
.ad-result.is-on { opacity: 1; transform: none; }
.ad-link { font-size: .82rem; line-height: 1.6; }
.ad-link em { display: block; color: var(--muted); font-style: normal; font-size: .76rem; margin-top: .2rem; }
.ad-chip {
  display: inline-block; font-size: .65rem; font-weight: 700; letter-spacing: .05em;
  padding: .18rem .5rem; border-radius: 999px; margin-right: .45rem; text-transform: uppercase;
}
.ad-chip-ok { background: var(--accent-soft); color: var(--accent); }
.ad-chip-warn { background: var(--gold-soft); color: #A33C12; }
.ad-total { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .7rem; }
.ad-total span {
  font-size: .69rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); font-weight: 650;
}
.ad-total strong {
  font-family: var(--serif); font-size: 1.9rem; color: var(--danger);
  font-variant-numeric: tabular-nums; font-weight: 400;
}
.ad-findings { display: flex; flex-direction: column; gap: .45rem; }
.ad-findings li { font-size: .79rem; line-height: 1.55; color: var(--ink-2); }

.ad-foot {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .8rem 1.1rem; border-top: 1px solid var(--line);
  background: var(--bg-soft); min-height: 46px;
}
.ad-status { font-size: .76rem; color: var(--muted); opacity: 0; transition: opacity .3s; }
.ad-status.is-on { opacity: 1; }
.ad-gate {
  margin-left: auto; font-size: .78rem; color: var(--accent);
  opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s;
}
.ad-gate.is-on { opacity: 1; transform: none; }
@media (max-width: 620px) { .ad-gate { margin-left: 0; } }

/* ================================================================ Waitlist */
.waitlist {
  background: var(--accent); color: #fff; border-radius: var(--r-lg);
  padding: 2.9rem 2.1rem; position: relative; overflow: hidden;
}
.waitlist h2 {
  font-family: var(--serif); font-size: clamp(1.75rem, 3.4vw, 2.35rem);
  font-weight: 400; letter-spacing: -.02em; margin-bottom: .6rem; color: #fff;
}
.waitlist p { color: rgba(255,255,255,.72); max-width: 46ch; margin-bottom: 1.6rem; }
.wl-form { display: flex; gap: .6rem; flex-wrap: wrap; max-width: 34rem; }
.wl-form input {
  flex: 1 1 15rem; padding: .8rem 1.05rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08);
  color: #fff; font-size: .92rem;
}
.wl-form input::placeholder { color: rgba(255,255,255,.5); }
.wl-form input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.wl-form button {
  padding: .8rem 1.5rem; border-radius: 999px; border: 0;
  background: #fff; color: var(--accent); font-weight: 650; cursor: pointer; font-size: .92rem;
}
.wl-note { margin-top: .95rem; font-size: .73rem; color: rgba(255,255,255,.5); max-width: 46ch; }
.wl-done { display: none; }
.wl-done.is-on { display: block; }
.wl-ref {
  font-family: var(--serif); font-size: 2.5rem; color: var(--gold);
  letter-spacing: .01em; line-height: 1.1;
}