/* AppealIQ — pre-build page.

   The subject is a denied insurance claim, so the page is built to look
   like something a revenue-cycle manager would trust with one: cool white,
   one navy, one blue, and a single green reserved for money that came back.
   No gradient anywhere except the wash behind the hero panel. Structure is
   deliberately the same as the other product pages in this house so the
   two read as siblings. */

:root {
  --paper: #f6f8fc;
  --card: #ffffff;
  --line: #e2e8f2;
  --line-strong: #cdd7e6;
  --ink: #0c1726;
  --mid: #4a5a70;
  --soft: #7d8ca1;
  --navy: #14375e;
  --blue: #1552b8;
  --blue-tint: #e8f0fd;
  --rec: #0e8a5f;
  --rec-tint: #e3f5ec;
  --warn: #b4530c;
  --wrap: 68rem;
  --r: 16px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  /* the hero panel's wash sits on negative insets; without this it adds a
     few pixels of sideways scroll on a phone */
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  letter-spacing: -0.022em;
  line-height: 1.12;
  font-weight: 700;
}

p { margin: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  margin: 0;
  font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
}

/* ── header ───────────────────────────────────────────── */
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(246, 248, 252, 0.88);
  backdrop-filter: blur(10px);
}

.top .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
}

.mark {
  display: flex;
  align-items: center;
  gap: 10px;
  /* padding keeps the lockup a 44px-tall tap target on a phone */
  min-height: 44px;
  padding: 6px 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.badge {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--navy);
  color: #fff;
}

.badge svg { width: 17px; height: 17px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}

.pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

.top .pill { margin-left: auto; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--navy);
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn:hover { opacity: 0.9; }
.btn:active { transform: scale(0.985); }

.btn.ghost {
  border-color: var(--line-strong);
  background: var(--card);
  color: var(--ink);
}

/* ── hero ─────────────────────────────────────────────── */
.hero { padding: 84px 0 64px; }

.hero h1 {
  max-width: 19ch;
  margin-top: 18px;
  font-size: clamp(2.2rem, 5.6vw, 3.7rem);
}

.lede {
  max-width: 58ch;
  margin-top: 20px;
  font-size: clamp(1.02rem, 1.6vw, 1.19rem);
  color: var(--mid);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero-wrap {
  display: grid;
  gap: 44px;
  align-items: center;
}

@media (min-width: 940px) {
  .hero-wrap {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    gap: 56px;
  }
}

/* ── the hero panel ───────────────────────────────────
   Drawn, not screenshotted, and deliberately about the problem rather
   than about the product: there is no product yet, so a panel implying
   our own results would be a lie with a chart on it. */
.shot {
  position: relative;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 30px 70px -46px rgba(12, 23, 38, 0.55);
}

.shot::before {
  content: '';
  position: absolute;
  inset: -14% -10% -22%;
  z-index: -1;
  border-radius: 40px;
  background: radial-gradient(58% 52% at 64% 26%, rgba(21, 82, 184, 0.16), transparent 72%),
    radial-gradient(46% 46% at 18% 84%, rgba(14, 138, 95, 0.14), transparent 72%);
  filter: blur(6px);
}

.shot-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.shot-head b { font-size: 15px; }

.shot-head .tiny {
  margin-left: auto;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soft);
}

.figure {
  padding: 20px 0 6px;
}

.figure .big {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--warn);
}

.figure .cap {
  margin-top: 2px;
  font-size: 13px;
  color: var(--soft);
}

/* One stacked bar: what a month of denials actually gets done to it.
   The widths are set here so the shape is right before any script runs. */
.bar {
  display: flex;
  height: 15px;
  margin-top: 16px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line);
}

.bar i {
  display: block;
  height: 100%;
  width: 0;
  animation: grow 1.05s cubic-bezier(0.22, 0.68, 0.3, 1) forwards;
}

.bar .b1 { background: var(--rec); --w: 15%; animation-delay: 0.25s; }
.bar .b2 { background: #6aa8d8; --w: 21%; animation-delay: 0.38s; }
.bar .b3 { background: var(--line-strong); --w: 64%; animation-delay: 0.5s; }

@keyframes grow { to { width: var(--w); } }

.legend {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}

.legend i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: none;
}

.legend span {
  flex: 1;
  min-width: 0;
  color: var(--mid);
}

.legend b { font-variant-numeric: tabular-nums; }

.note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.55;
  color: var(--soft);
}

/* ── sections ─────────────────────────────────────────── */
section {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

.h2 {
  max-width: 24ch;
  margin-top: 14px;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
}

.sub {
  max-width: 60ch;
  margin-top: 14px;
  color: var(--mid);
}

/* three industry figures, stated with their sources underneath */
.stats {
  display: grid;
  gap: 16px;
  margin-top: 36px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.stat {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
}

.stat .n {
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

.stat p {
  margin-top: 6px;
  font-size: 14px;
  color: var(--mid);
}

.stat .src {
  margin-top: 10px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--soft);
}

.grid {
  display: grid;
  gap: 16px;
  margin-top: 36px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
}

.card h3 { font-size: 17px; }

.card p {
  margin-top: 9px;
  font-size: 14.5px;
  color: var(--mid);
}

.num {
  display: block;
  margin-bottom: 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--blue);
}

/* the commitments list — plain on purpose */
.promises {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.promises li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.promises b {
  flex: 0 0 clamp(9rem, 22vw, 14rem);
  font-size: 15px;
}

.promises span {
  flex: 1;
  min-width: 0;
  color: var(--mid);
  font-size: 14.5px;
}

/* ── the withheld panel ───────────────────────────────── */
.held {
  padding: 28px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  background: var(--card);
  margin-top: 30px;
}

.held ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.held li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}

.held li:last-child { border-bottom: 0; }

.held li b {
  flex: 0 0 clamp(10rem, 26vw, 15rem);
  font-weight: 600;
}

.redact {
  flex: 1;
  height: 11px;
  border-radius: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--ink) 0,
    var(--ink) 22px,
    transparent 22px,
    transparent 27px
  );
  opacity: 0.82;
}

/* ── where it actually is ─────────────────────────────── */
.state {
  margin-top: 30px;
  padding: 28px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  background: var(--card);
}

.checks {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.checks li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--mid);
}

.checks li:first-child { border-top: 0; }

.checks .box {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--paper);
}

.trigger {
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--blue-tint);
  font-size: 14px;
  color: var(--navy);
}

.trigger b { font-weight: 700; }

/* ── close ────────────────────────────────────────────── */
.close {
  padding: 72px 0 80px;
  text-align: center;
}

.close .h2, .close .sub { margin-inline: auto; }
.close .cta-row { justify-content: center; }

footer {
  padding: 24px 0 40px;
  border-top: 1px solid var(--line);
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 13px;
  color: var(--soft);
}

footer .wrap span:last-child { margin-left: auto; }

/* ── motion ───────────────────────────────────────────── */
.rise {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.6s cubic-bezier(0.22, 0.68, 0.3, 1) forwards;
}

@keyframes rise {
  to { opacity: 1; transform: none; }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.62s cubic-bezier(0.22, 0.68, 0.3, 1),
    transform 0.62s cubic-bezier(0.22, 0.68, 0.3, 1);
  will-change: opacity, transform;
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { animation: none; opacity: 1; transform: none; }
  .bar i { animation: none; width: var(--w); }
  * { transition: none !important; }
}