/* The annotated tour: numbered lines, matching pins on the form, a spotlight on the active feature, and the contractor's
   screens (email, inbox) taking over the phone. The base layout (phone left, lines right) is in sections.css. */
.ledger button { grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; overflow: hidden; }
.ledger button b, .ledger button span { grid-column: 2; }
.ledger__n { grid-row: span 2; align-self: start; margin-top: 2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 760 13px/1 var(--sc-font-display); font-style: normal; color: #8c877a; box-shadow: inset 0 0 0 1.5px #cfc8b6; transition: background-color .2s, color .2s, box-shadow .2s; }
.ledger button[aria-pressed="true"] .ledger__n { background: var(--green); color: #fff; box-shadow: none; }
.ledger button[aria-pressed="true"] { padding-left: 0; }
.ledger button::before { display: none; }
/* the tour's progress, under the active line */
.ledger button::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--green); transform-origin: left; transform: scaleX(0); }
.ledger button.is-running::after { animation: tour-run 4.6s linear forwards; }
@keyframes tour-run { to { transform: scaleX(1); } }

/* spotlight and pins, inside the phone screen */
.ph-spot { position: absolute; left: 0; top: 0; z-index: 4; width: 0; height: 0; border-radius: 14px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px var(--green), 0 0 0 999px rgba(14, 16, 22, .42);
  transition: transform .45s var(--ease), width .45s var(--ease), height .45s var(--ease), opacity .3s var(--ease); }
.phone.is-spot .ph-spot { opacity: 1; }
.ph-pin { position: absolute; left: 0; top: 0; z-index: 5; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font: 800 11.5px/1 'Geist', system-ui; color: #fff; background: #9a9486; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, .25);
  transition: translate .45s var(--ease), background-color .2s, scale .25s var(--spring), opacity .2s; }
.ph-pin.on { background: var(--green); scale: 1.18; }
.phone[data-demo="sent"] .ph-pin, .phone[data-demo="inbox"] .ph-pin { opacity: 0; }
.ph-lock { z-index: 7; }

/* the contractor's inbox, on their phone */
.ph-inbox { position: absolute; inset: 0; z-index: 7; padding: 0 14px; background: #f7f6f2; display: grid; align-content: start; gap: 2px;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.phone[data-demo="inbox"] .ph-inbox { opacity: 1; visibility: visible; transition-delay: 0s; }
.phone[data-demo="inbox"] .ph-url { opacity: 0; }
.ph-inbox .ph-lock-bar { color: #15161a; padding-inline: 14px 8px; }
.ph-inbox .ph-lock-bar svg { fill: #15161a; color: #15161a; }
.ph-in-head { display: flex; align-items: center; gap: 8px; padding: 8px 0 12px; border-bottom: 1px solid #e6e3da; }
.ph-in-app { font: 700 11px/1 'Geist', system-ui; color: #2f7a16; letter-spacing: .02em; }
.ph-in-head b { font: 720 20px/1 'Geist', system-ui; letter-spacing: -.02em; }
.ph-in-new { margin-left: auto; font: 650 11.5px/1 'Geist', system-ui; color: #a52a22; background: #fbe6e3; padding: 4px 8px; border-radius: 999px; }
.ph-in-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid #ecebe5;
  opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .35s var(--ease); }
.phone[data-demo="inbox"] .ph-in-row { opacity: 1; transform: none; }
.phone[data-demo="inbox"] .ph-in-row:nth-of-type(2) { transition-delay: .1s; } .phone[data-demo="inbox"] .ph-in-row:nth-of-type(3) { transition-delay: .2s; } .phone[data-demo="inbox"] .ph-in-row:nth-of-type(4) { transition-delay: .3s; }
.ph-in-row i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #bbb; }
.ph-in-row.is-new i { background: #2b7de9; box-shadow: none; }
.ph-in-row b { display: block; font: 650 14px/1.2 'Geist', system-ui; }
.ph-in-row small { font: 500 11.5px/1.3 'Geist', system-ui; color: #6d7079; }
.ph-in-row em { font: 700 14px/1 'Geist', system-ui; font-style: normal; font-variant-numeric: tabular-nums; }
.ph-in-row:not(.is-new) { color: #8a8d95; }
.ph-in-csv { justify-self: start; margin-top: 14px; padding: 9px 14px; border-radius: 10px; border: 1px solid #dad7ce; background: #fff; font: 600 13px/1 'Geist', system-ui; }

/* phones: the phone first, then six short numbered lines; only the active one opens */
@media (max-width: 860px) {
  .spec__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .spec__list { display: contents; }
  .spec__list .sec-head { order: 0; margin-bottom: 14px; }
  .spec__phone { order: 1; position: relative; top: 0; gap: 8px; margin-bottom: 12px; }
  .ledger { order: 2; }
}

/* the phone caption: only on phones */
.tour-cap { display: none; }
@media (max-width: 860px) {
  .spec__phone .phone { transform: scale(.68); transform-origin: top center; margin-bottom: -198px; }
  .spec__phone .swatches { display: none; }
  .tour-cap { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; row-gap: 3px; width: 100%; position: relative; overflow: hidden;
    padding: 13px 14px 15px; border-radius: 14px; background: var(--sheet); box-shadow: var(--e1); }
  .tour-cap i { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font: 760 13px/1 var(--sc-font-display); font-style: normal; }
  .tour-cap b { font: 720 1.12rem/1.2 var(--sc-font-display); letter-spacing: -.02em; color: var(--sc-ink); }
  .tour-cap span { font: 470 14.5px/1.45 var(--sc-font-text); color: var(--sc-ink-soft); min-height: 4.35em; }
  .tour-cap em { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--green); transform-origin: left; transform: scaleX(0); }
  .tour-cap.is-running em { animation: tour-run 4.6s linear forwards; }
  .ledger { display: flex; justify-content: space-between; border-top: 0; margin-top: 12px; }
  .ledger li { border-bottom: 0; }
  .ledger button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; overflow: visible; }
  .ledger button b, .ledger button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ledger__n { grid-row: auto; margin: 0; width: 34px; height: 34px; font-size: 14px; }
  .ledger button::after { display: none; }
}
@media (max-width: 860px) {
  .spec__phone, .ledger { width: 100%; max-width: 440px; justify-self: center; }
}
@media (min-width: 601px) and (max-width: 860px) {
  .spec__phone .phone { transform: scale(.84); margin-bottom: -99px; }
  .tour-cap span { min-height: 2.9em; }
}