/* ════════════════ APP SCREENS — the in-app screens the showcase phones show (share container units with the hero device) ════════════════ */
.app { position: absolute; inset: 0; padding: 15cqw 5.4cqw 0; }
.app .caps { font-size: 2.8cqw; letter-spacing: .1em; color: var(--ink-3); }
.av { width: 10cqw; height: 10cqw; border-radius: 50%; display: grid; place-items: center; font: 700 3.6cqw/1 var(--sans); box-shadow: inset 0 0 0 1.5px var(--mint); }
.ttabs { display: flex; gap: 5cqw; font: 600 3.7cqw/1 var(--sans); color: var(--ink-3); }
.ttabs b { color: #fff; position: relative; }
.ttabs b::after { content: ""; position: absolute; left: 50%; top: 5.4cqw; width: 1.2cqw; height: 1.2cqw; margin-left: -.6cqw; border-radius: 50%; background: #fff; }
.a-row { display: flex; align-items: center; justify-content: space-between; }
.big { font: 800 12.6cqw/1 var(--rounded); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.subtle { font-size: 3.4cqw; color: var(--ink-3); }
.subtle b { color: var(--ink-2); }
.orbitmini { position: absolute; width: 64cqw; height: 64cqw; right: -24cqw; top: 22cqw; transform: rotate(-18deg); }
.tl { position: relative; margin-top: 4cqw; }
.tl::before { content: ""; position: absolute; left: 1.4cqw; top: 4cqw; bottom: 4cqw; width: 1px; background: rgba(255,255,255,.15); }
.tl-row { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 3.2cqw 0 3.2cqw 7cqw; }
.tl-row::before { content: ""; position: absolute; left: 0; top: 50%; width: 2.8cqw; height: 2.8cqw; margin-top: -1.4cqw; border-radius: 50%; border: 1.5px solid var(--blue); background: var(--canvas); }
.tl-row.pd::before { border-color: var(--mint); background: var(--mint); }
.tl-row b { display: block; font-size: 3.9cqw; font-weight: 600; }
.tl-row small { font-size: 2.8cqw; color: var(--ink-3); letter-spacing: .04em; }
.tl-row .r { text-align: right; font-weight: 700; font-size: 3.9cqw; font-family: var(--rounded); }
.tl-row .r .status { display: flex; font-size: 2.4cqw; justify-content: flex-end; margin-top: 1cqw; letter-spacing: .04em; text-transform: none; font-family: var(--sans); }
.tl-row .r .status::before { width: 1.4cqw; height: 1.4cqw; }
.conduit { position: relative; margin-top: 5cqw; padding-left: 9cqw; }
.conduit::before { content: ""; position: absolute; left: 2.2cqw; top: 2cqw; bottom: 3cqw; width: 1.4cqw; border-radius: 99px; background: linear-gradient(180deg, rgba(255,255,255,.2), var(--amber) 55%, var(--money)); }
.cd { position: relative; padding: 1.6cqw 0 4.4cqw; }
.cd::before { content: ""; position: absolute; left: -8.6cqw; top: 2cqw; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; border: 2px solid #fff; background: var(--canvas); }
.cd .v { font: 800 5.4cqw/1.2 var(--rounded); }
.cd.dim { opacity: .35; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-top: 5cqw; gap: 1cqw; }
.week span { padding: 2cqw 0; border-radius: 3cqw; font: 600 2.5cqw/1.6 var(--sans); color: var(--ink-3); }
.week span b { display: block; font: 600 4.6cqw/1.1 var(--sans); color: #fff; }
.week span.sel { background: var(--mint); color: var(--canvas); }
.week span.sel b { color: var(--canvas); }
.week span.dt::after { content: ""; display: block; width: 1cqw; height: 1cqw; margin: .8cqw auto 0; border-radius: 50%; background: var(--amber); }
.huge { font: 800 20cqw/1 var(--rounded); letter-spacing: -.03em; }
.pillbtn { font: 600 3cqw/1 var(--sans); padding: 1.8cqw 3cqw; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--mint); color: var(--mint); }
.checkout { background: #fff; color: #111; padding-top: 15cqw; }
.co-bar { margin: 0 3cqw; padding: 2.6cqw 3.6cqw; border-radius: 99px; background: #EEEEF0; font: 600 3.1cqw/1 var(--sans); color: #333; text-align: center; }
.co-head { margin-top: 3cqw; height: 13cqw; background: linear-gradient(90deg, var(--forest), #2B7A56); display: grid; place-items: center; }
.co-head .bars { font-size: 6cqw; }
.co-body { padding: 4cqw 5cqw; }
.co-item { display: flex; justify-content: space-between; font: 600 3.4cqw/1.3 var(--sans); padding-bottom: 4cqw; border-bottom: 1px solid #E6E6E6; }
.co-item small { display: block; font-weight: 400; color: #777; font-size: 2.8cqw; }
.co-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4cqw; font: 700 4.4cqw/1 var(--sans); }
.co-total span { font-size: 3cqw; color: #777; font-weight: 600; }
.co-opt { display: flex; align-items: center; gap: 3cqw; margin-top: 3cqw; padding: 3.8cqw; border-radius: 2.4cqw; border: 1px solid #DADADA; font: 500 3.3cqw/1 var(--sans); }
.co-opt::before { content: ""; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; border: 1.5px solid #999; }
.co-opt.sel { border-color: var(--forest); box-shadow: 0 0 0 1px var(--forest); }
.co-opt.sel::before { border: 1.1cqw solid var(--forest); }
.co-opt em { margin-left: auto; font-style: normal; font-weight: 700; font-size: 2.8cqw; color: #555; }
.co-pay { margin-top: 5cqw; padding: 4cqw; border-radius: 3cqw; text-align: center; background: #000; color: #fff; font: 600 3.8cqw/1 var(--sans); }
/* Jobs — JobsView's Jobs lens: search row, lens pills, the site-tile grid (JobTileCard), LedgerDock */
.jobs .app { padding-top: 13cqw; }
.jb-search { display: flex; align-items: center; gap: 2.4cqw; min-height: 11.7cqw; border-bottom: 1px solid var(--hair); font: 400 4.1cqw/1 var(--sans); color: var(--ink-4); }
.jb-search > svg { flex-shrink: 0; width: 4.2cqw; height: 4.2cqw; color: var(--ink-3); }
.jb-search .ph { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-map { flex-shrink: 0; width: 8.8cqw; height: 8.8cqw; border-radius: 50%; display: grid; place-items: center; background: var(--card); box-shadow: inset 0 0 0 1px var(--hair); color: rgba(255,255,255,.92); }
.jb-map svg { width: 4.2cqw; height: 4.2cqw; }
.jb-lens { display: flex; gap: 2cqw; padding: 2.9cqw 0; }
.jb-lens span { padding: 2cqw 3.4cqw; border-radius: 99px; font: 600 3.2cqw/1 var(--sans); white-space: nowrap; color: rgba(255,255,255,.72); background: var(--card); box-shadow: inset 0 0 0 1px var(--hair); }
.jb-lens span.on { background: var(--mint); color: var(--canvas); box-shadow: none; }
.jb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.4cqw 2.9cqw; padding-top: 1cqw; }
.jt-site { position: relative; height: 37cqw; border-radius: 3.4cqw; overflow: hidden; background: var(--card); }
.jt-site > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.jt-site::before { /* the scrim: bottom 68%, same stops as JobTilePresentation.scrimStops */
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 68%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,.86) 82%, rgba(0,0,0,.9) 100%);
}
.jt-site::after { content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--hair-soft); pointer-events: none; }
.jt-site .pin { /* the Claro pin the snapshotter composites: near-black core, mint rim, 22% mint halo */
  position: absolute; left: 50%; top: 50%; width: 4.4cqw; height: 4.4cqw; margin: -2.2cqw 0 0 -2.2cqw; border-radius: 50%;
  background: #121212; box-shadow: inset 0 0 0 .49cqw var(--mint), 0 0 0 1.2cqw rgba(135,189,159,.22);
}
.jt-site b { position: absolute; z-index: 2; left: 2.9cqw; right: 2.9cqw; bottom: 2.4cqw; font: 600 3.66cqw/1.22 var(--sans); color: rgba(255,255,255,.96); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jt-site.recede > img, .jt-site.recede .pin { filter: saturate(.2) brightness(.88); opacity: .82; }
.jt-cap { display: flex; align-items: baseline; gap: 2cqw; padding: 2cqw .5cqw 0; }
.jt-cap span { flex: 1; min-width: 0; font-size: 2.9cqw; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jt-cap em { font: normal 700 2.7cqw/1 var(--sans); letter-spacing: .22cqw; white-space: nowrap; }
.jt-cap .ac { color: var(--blue); } .jt-cap .pe { color: var(--amber); } .jt-cap .dn { color: var(--money); } .jt-cap .cx { color: rgba(255,255,255,.38); }