/* The click-through demo of the Accountant (/demo). click-demo.js changes data-step on .cdemo.
   An element with data-on="2 3" shows only in steps 2 and 3. An element that ends its part fades out
   completely: it does not stay on the screen as a dim copy. */
.cdemo-section {
  padding-block:8px 96px;
}
.cdemo {
  --cd-green:#0E6B4C;
  --cd-green-pressed:#0A5239;
  --cd-wash:#E4F0EA;
  --cd-ink:#16211C;
  --cd-body:#4A554F;
  --cd-muted:#5F6A63;
  --cd-line:#E3E1DB;
  --cd-ease:cubic-bezier(.22,1,.36,1);
  position:relative;
  display:grid;
  grid-template-columns:minmax(280px,380px) minmax(0,1fr);
  gap:48px;
  align-items:center;
  padding:56px;
  border:1px solid var(--cd-line);
  border-radius:32px;
  background:linear-gradient(160deg,#FFFFFF 0%,#F7F9F7 100%);
  box-shadow:0 1px 2px rgba(22,33,28,.04),0 30px 80px -40px rgba(22,33,28,.22);
  /* clip, not hidden: hidden makes a scroll box, and then the sticky caption panel on a phone does not stick. */
  overflow:hidden;
  overflow:clip;
  isolation:isolate;
}
.cdemo:focus {
  outline:none;
}
/* Soft light forms behind the glass. They are decoration only. */
.cdemo-light {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
.cdemo-light span {
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
}
.cdemo-light span:nth-child(1) {
  width:460px;
  height:460px;
  top:-160px;
  left:-120px;
  background:rgba(170,214,192,.55);
}
.cdemo-light span:nth-child(2) {
  width:420px;
  height:420px;
  bottom:-200px;
  right:8%;
  background:rgba(214,232,206,.6);
}
.cdemo-light span:nth-child(3) {
  width:340px;
  height:340px;
  top:22%;
  right:-140px;
  background:rgba(200,224,232,.55);
}

/* Show and hide. Four steps, so four selectors. */
.cdemo[data-step="1"] [data-on]:not([data-on~="1"]),
.cdemo[data-step="2"] [data-on]:not([data-on~="2"]),
.cdemo[data-step="3"] [data-on]:not([data-on~="3"]),
.cdemo[data-step="4"] [data-on]:not([data-on~="4"]) {
  display:none;
  opacity:0;
  transform:translateY(8px);
}
.cdemo [data-on] {
  opacity:1;
  transform:none;
  transition:opacity .45s var(--cd-ease),transform .45s var(--cd-ease),display .45s allow-discrete;
}
@starting-style {
  .cdemo [data-on] {
    opacity:0;
    transform:translateY(8px);
  }
}
.cdemo-captions {
  display:grid;
}
.cdemo-caption {
  grid-area:1/1;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s var(--cd-ease),visibility 0s linear .35s;
}
.cdemo[data-step="1"] [data-caption="1"],
.cdemo[data-step="2"] [data-caption="2"],
.cdemo[data-step="3"] [data-caption="3"],
.cdemo[data-step="4"] [data-caption="4"] {
  opacity:1;
  visibility:visible;
  transition:opacity .45s var(--cd-ease) .1s,visibility 0s;
}

/* The caption panel: frosted glass. */
.cdemo-panel {
  padding:32px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:24px;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 1px 2px rgba(22,33,28,.04),0 18px 40px -24px rgba(22,33,28,.18);
}
.brand-v2 .cdemo-count {
  font-size:13px;
  font-weight:600;
  color:var(--cd-muted);
}
.cdemo-dots {
  display:flex;
  gap:6px;
  margin:10px 0 22px;
  padding:0;
  list-style:none;
}
.cdemo-dots li {
  width:32px;
  height:4px;
  border-radius:2px;
  background:var(--cd-line);
  transition:background .3s ease;
}
.cdemo[data-step="1"] .cdemo-dots li:nth-child(-n+1),
.cdemo[data-step="2"] .cdemo-dots li:nth-child(-n+2),
.cdemo[data-step="3"] .cdemo-dots li:nth-child(-n+3),
.cdemo[data-step="4"] .cdemo-dots li:nth-child(-n+4) {
  background:var(--cd-green);
}
.brand-v2 .cdemo-caption {
  font-size:21px;
  line-height:1.45;
  letter-spacing:-.01em;
  color:var(--cd-ink);
}
.cdemo-caption strong {
  font-weight:650;
  color:var(--cd-green);
}
.cdemo-wrap {
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid var(--cd-line);
}
.brand-v2 .cdemo-wrap h3 {
  font-size:17px;
  font-weight:650;
  letter-spacing:-.01em;
}
.cdemo-wrap h3:focus {
  outline:none;
}
.cdemo-wrap h3:focus-visible {
  outline:2px solid var(--cd-green);
  outline-offset:4px;
  border-radius:4px;
}
.cdemo-wrap ol {
  margin:12px 0 0;
  padding-left:20px;
  color:var(--cd-body);
  font-size:15px;
  line-height:1.55;
}
.cdemo-wrap li + li {
  margin-top:4px;
}
.cdemo-wrap-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}
.cdemo-wrap-actions .button {
  min-height:46px;
  padding:0 22px;
  cursor:pointer;
}
.cdemo-nav {
  display:flex;
  gap:10px;
  margin-top:28px;
}
.cdemo-nav[hidden] {
  display:none;
}
.cdemo-navbtn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 18px;
  border:1px solid var(--cd-line);
  border-radius:999px;
  background:rgba(255,255,255,.8);
  color:var(--cd-ink);
  font-size:15px;
  font-weight:550;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.cdemo-navbtn:hover:not(:disabled) {
  background:#fff;
  border-color:#C9CEC8;
}
.cdemo-navbtn:disabled {
  color:#8A938D;
  cursor:default;
}
.cdemo-navbtn svg {
  width:16px;
  height:16px;
}
.cdemo button:focus-visible,
.cdemo a:focus-visible {
  outline:2px solid var(--cd-green);
  outline-offset:3px;
}
.brand-v2 .cdemo-noscript {
  margin-top:20px;
  font-size:15px;
}
.cdemo-noscript a {
  color:var(--cd-green);
  text-decoration:underline;
}

/* The stage holds one scene at a time. The scenes sit in one grid cell, so a change does not move the page. */
.cdemo-stage {
  display:grid;
  place-items:center;
  min-height:660px;
}
.cdemo-scene {
  grid-area:1/1;
  width:100%;
  display:flex;
  justify-content:center;
}

/* The action of the step. The ring pulses. The caption also names the button, so the ring is not the only cue. */
.cdemo-action {
  position:relative;
  cursor:pointer;
}
.cdemo-action::after {
  content:"";
  position:absolute;
  inset:-6px;
  border:2px solid rgba(14,107,76,.6);
  border-radius:inherit;
  pointer-events:none;
  animation:cdemo-pulse 1.8s var(--cd-ease) infinite;
}
@keyframes cdemo-pulse {
  0% { opacity:.95; transform:scale(.97); }
  70%,100% { opacity:0; transform:scale(1.14); }
}

/* The phone. A plain CSS frame, not a photo of a device. */
.cdemo-phone {
  width:316px;
  height:640px;
  padding:11px;
  border-radius:54px;
  background:linear-gradient(145deg,#2A322E 0%,#101513 55%,#1C2320 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12),0 2px 4px rgba(22,33,28,.12),0 50px 90px -40px rgba(22,33,28,.55);
}
.cdemo-screen {
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  border-radius:43px;
  background:#EFEAE2;
  overflow:hidden;
}
.cdemo-island {
  position:absolute;
  top:11px;
  left:50%;
  width:94px;
  height:27px;
  margin-left:-47px;
  border-radius:20px;
  background:#0B0F0D;
  z-index:2;
}
.cdemo-chat-head {
  display:flex;
  align-items:center;
  gap:10px;
  padding:50px 16px 10px;
  background:rgba(247,246,243,.96);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.cdemo-chat-head strong {
  display:block;
  font-size:15px;
  font-weight:650;
  color:var(--cd-ink);
  line-height:1.2;
}
.cdemo-chat-head small {
  display:block;
  font-size:12px;
  color:var(--cd-muted);
}
.cdemo-avatar {
  display:grid;
  place-items:center;
  flex:0 0 36px;
  height:36px;
  border-radius:50%;
  background:var(--cd-green);
  color:#fff;
}
.cdemo-avatar svg {
  width:19px;
  height:19px;
}
.cdemo-chat {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  padding:12px 12px 10px;
  overflow:hidden;
  font-size:13.5px;
  line-height:1.4;
}
.cdemo-bubble {
  max-width:88%;
  padding:8px 10px 5px;
  border-radius:12px;
  color:var(--cd-ink);
  box-shadow:0 1px .5px rgba(11,20,26,.13);
}
.brand-v2 .cdemo-bubble,
.brand-v2 .cdemo-bubble p {
  color:var(--cd-ink);
}
.cdemo-bubble time {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:3px;
  margin-top:2px;
  font-size:11px;
  color:#667781;
}
.cdemo-bubble time svg {
  width:15px;
  height:15px;
  color:#53BDEB;
}
.cdemo-in {
  align-self:flex-start;
  background:#fff;
  border-top-left-radius:4px;
}
.cdemo-out {
  align-self:flex-end;
  background:#D9FDD3;
  border-top-right-radius:4px;
}
.cdemo-receipt-bubble {
  padding:5px 5px 4px;
}
.cdemo-receipt {
  width:208px;
  padding:14px 14px 12px;
  border-radius:8px;
  background:#fff;
  font-size:11.5px;
  font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.brand-v2 .cdemo-receipt p {
  color:var(--cd-body);
}
.brand-v2 .cdemo-receipt .cdemo-receipt-name {
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--cd-ink);
  text-align:center;
}
.cdemo-receipt-meta {
  text-align:center;
  margin-bottom:10px !important;
  padding-bottom:8px;
  border-bottom:1px dashed #CBD0CB;
}
.cdemo-receipt-line,
.cdemo-receipt-total {
  display:flex;
  justify-content:space-between;
  gap:8px;
}
.cdemo-receipt-line + .cdemo-receipt-line {
  margin-top:4px !important;
}
.brand-v2 .cdemo-receipt .cdemo-receipt-total {
  margin-top:10px;
  padding-top:8px;
  border-top:1px dashed #CBD0CB;
  font-size:13px;
  font-weight:700;
  color:var(--cd-ink);
}
.cdemo-typing {
  align-self:flex-start;
  display:flex;
  gap:4px;
  padding:12px 14px;
  border-radius:12px;
  border-top-left-radius:4px;
  background:#fff;
  box-shadow:0 1px .5px rgba(11,20,26,.13);
  overflow:hidden;
  animation:cdemo-typing-out .85s ease forwards;
}
.cdemo-typing i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#9AA39D;
  animation:cdemo-dot 1s ease-in-out infinite;
}
.cdemo-typing i:nth-child(2) { animation-delay:.15s; }
.cdemo-typing i:nth-child(3) { animation-delay:.3s; }
@keyframes cdemo-dot {
  0%,100% { opacity:.35; transform:none; }
  50% { opacity:1; transform:translateY(-2px); }
}
@keyframes cdemo-typing-out {
  0%,75% { opacity:1; max-height:40px; }
  100% { opacity:0; max-height:0; padding-block:0; margin-top:-8px; }
}
.cdemo-reply {
  animation:cdemo-reply-in .4s var(--cd-ease) .7s both;
}
@keyframes cdemo-reply-in {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:none; }
}
.cdemo-reply strong {
  font-weight:650;
}
.cdemo-kv {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:3px 12px;
  margin:6px 0 0;
}
.cdemo-kv div {
  display:contents;
}
.cdemo-kv dt {
  color:#667781;
}
.cdemo-kv dd {
  margin:0;
  font-weight:600;
  text-align:right;
}
.cdemo-chat-btn {
  display:block;
  width:100%;
  margin-top:9px;
  padding:9px 8px;
  border:0;
  border-radius:8px;
  background:#F0F5F2;
  color:var(--cd-green);
  font-size:14px;
  font-weight:650;
}
.cdemo-chat-btn:hover {
  background:var(--cd-wash);
}
.cdemo-compose {
  display:grid;
  padding:8px 10px 22px;
  background:rgba(247,246,243,.96);
}
.cdemo-compose > * {
  grid-area:1/1;
}
.cdemo-attach {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 1px 3px rgba(22,33,28,.08);
}
.cdemo-thumb {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  flex:0 0 34px;
  height:42px;
  padding:0 6px;
  border-radius:5px;
  background:#F7F6F3;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.cdemo-thumb i {
  height:2px;
  border-radius:1px;
  background:#C4CAC5;
}
.cdemo-thumb i:last-child {
  width:60%;
  margin-left:auto;
  background:var(--cd-ink);
}
.cdemo-attach-text {
  min-width:0;
  line-height:1.25;
}
.cdemo-attach-text strong {
  display:block;
  font-size:13px;
  font-weight:650;
  color:var(--cd-ink);
}
.cdemo-attach-text small {
  font-size:11.5px;
  color:var(--cd-muted);
}
.cdemo-send {
  margin-left:auto;
  flex-shrink:0;
  min-height:36px;
  padding:0 14px;
  border:0;
  border-radius:999px;
  background:var(--cd-green);
  color:#fff;
  font-size:13px;
  font-weight:650;
}
.cdemo-send:hover {
  background:var(--cd-green-pressed);
}
.cdemo-input {
  align-self:center;
  padding:11px 16px;
  border-radius:22px;
  background:#fff;
  color:#8A938D;
  font-size:14px;
}

/* The console Review card. Frosted glass over the light forms. */
.cdemo-console {
  width:min(580px,100%);
  border:1px solid rgba(255,255,255,.95);
  border-radius:24px;
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:0 0 0 1px rgba(22,33,28,.05),0 2px 4px rgba(22,33,28,.04),0 40px 90px -40px rgba(22,33,28,.4);
  overflow:hidden;
}
.cdemo-console-bar {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 12px;
  padding:13px 20px;
  border-bottom:1px solid var(--cd-line);
  font-size:13px;
  font-weight:600;
  color:var(--cd-muted);
}
.cdemo-dot-row {
  display:flex;
  gap:6px;
}
.cdemo-dot-row i {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#DAD8D2;
}
.cdemo-tab {
  margin-left:auto;
  padding:4px 10px;
  border-radius:999px;
  background:#F1EFEA;
  color:var(--cd-ink);
  font-weight:550;
}
.cdemo-card {
  padding:26px 28px 28px;
}
.cdemo-card-head {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 14px;
}
.cdemo-card-head > div {
  flex:1 1 180px;
  min-width:0;
}
.brand-v2 .cdemo-card-head h3 {
  font-size:21px;
  font-weight:650;
  letter-spacing:-.015em;
}
.brand-v2 .cdemo-card-head p {
  margin-top:2px;
  font-size:14px;
  color:var(--cd-muted);
}
.cdemo-tile {
  display:grid;
  place-items:center;
  flex:0 0 46px;
  height:46px;
  border-radius:12px;
  background:#F1EFEA;
  color:var(--cd-ink);
  font-size:15px;
  font-weight:650;
}
.cdemo-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border-radius:999px;
  font-size:13px;
  font-weight:650;
}
.cdemo-pill svg {
  width:15px;
  height:15px;
}
.cdemo-pill-wait {
  background:#F7EFDD;
  color:#8A6314;
}
.cdemo-pill-done {
  background:var(--cd-wash);
  color:var(--cd-green-pressed);
}
.cdemo-fields {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 28px;
  margin:24px 0 20px;
  padding:20px 0;
  border-block:1px solid var(--cd-line);
}
.cdemo-fields dt {
  font-size:12.5px;
  color:var(--cd-muted);
}
.cdemo-fields dd {
  margin:2px 0 0;
  font-size:16px;
  font-weight:550;
  color:var(--cd-ink);
  font-variant-numeric:tabular-nums;
}
.cdemo-fields dd.cdemo-amount {
  font-size:24px;
  font-weight:650;
  letter-spacing:-.015em;
}
.cdemo-checks {
  display:grid;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
.cdemo-checks li {
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  border-radius:12px;
  background:rgba(228,240,234,.6);
  color:var(--cd-ink);
  font-size:14.5px;
}
.cdemo-checks svg {
  flex:0 0 18px;
  height:18px;
  color:var(--cd-green);
}
.cdemo-decide {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 18px;
  margin-top:24px;
}
.cdemo-approve {
  min-height:48px;
  padding:0 30px;
  border:0;
  border-radius:12px;
  background:var(--cd-green);
  color:#fff;
  font-size:16px;
  font-weight:650;
}
.cdemo-approve:hover {
  background:var(--cd-green-pressed);
}
.brand-v2 .cdemo-decide p {
  font-size:14px;
  color:var(--cd-muted);
}
.cdemo-posted {
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:24px;
  padding:16px 18px;
  border-radius:16px;
  background:var(--cd-wash);
}
.cdemo-posted-icon {
  display:grid;
  place-items:center;
  flex:0 0 42px;
  height:42px;
  border-radius:50%;
  background:var(--cd-green);
  color:#fff;
}
.cdemo-posted-icon svg {
  width:22px;
  height:22px;
}
.brand-v2 .cdemo-posted .cdemo-posted-title {
  font-size:17px;
  font-weight:650;
  color:var(--cd-ink);
}
.brand-v2 .cdemo-posted p {
  font-size:14px;
  overflow-wrap:anywhere;
}

@media(max-width:980px) {
  .cdemo {
    grid-template-columns:1fr;
    gap:28px;
    padding:28px;
  }
  .cdemo-stage {
    min-height:0;
  }
}
/* A phone: the stage comes first, and the caption panel sticks to the bottom of the screen while the demo
   is in view. Thus the caption and the button that it names show together. click-demo.js scrolls the button
   into view above the panel (scroll-margin-bottom). The phone frame takes the height of its chat. */
@media(max-width:560px) {
  .cdemo-section {
    width:calc(100% - 32px);
    padding-bottom:64px;
  }
  .cdemo {
    padding:16px;
    border-radius:24px;
    gap:16px;
  }
  .cdemo-stage {
    order:1;
  }
  .cdemo-panel {
    order:2;
    position:sticky;
    bottom:12px;
    z-index:3;
    padding:16px 18px;
    background:rgba(255,255,255,.86);
    box-shadow:0 1px 2px rgba(22,33,28,.06),0 18px 44px -12px rgba(22,33,28,.28);
  }
  .cdemo[data-step="4"] .cdemo-panel {
    position:relative;
    bottom:auto;
  }
  .cdemo-dots {
    margin:8px 0 12px;
  }
  .brand-v2 .cdemo-caption {
    font-size:17px;
    line-height:1.4;
  }
  .cdemo-nav {
    margin-top:14px;
  }
  .cdemo-navbtn {
    min-height:42px;
  }
  .cdemo-action {
    scroll-margin-top:96px;
    scroll-margin-bottom:250px;
  }
  .cdemo-phone {
    width:min(300px,100%);
    height:auto;
    border-radius:50px;
  }
  .cdemo-screen {
    height:auto;
    min-height:400px;
    border-radius:40px;
  }
  .cdemo-card {
    padding:20px 18px 22px;
  }
  .cdemo-console-bar {
    padding:12px 16px;
  }
  .cdemo-tab {
    margin-left:0;
  }
  .cdemo-fields {
    gap:14px 18px;
  }
  .cdemo-fields dd.cdemo-amount {
    font-size:21px;
  }
}

/* Reduced motion: no pulse, no slide, no typing beat. A step change is instant. */
@media(prefers-reduced-motion:reduce) {
  .cdemo *,
  .cdemo *::after {
    animation:none !important;
    transition:none !important;
  }
  .cdemo [data-on] {
    transform:none !important;
  }
  .cdemo .cdemo-typing {
    display:none;
  }
}
@media(prefers-reduced-transparency:reduce) {
  .cdemo-panel,
  .cdemo-console {
    background:#fff;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}