/* Flow 2a: f2, loop, shape, data, console. Prefix ca- */

/* f2 opener */
.ca-f2 .row { grid-template-columns: 64px 1fr; padding: 25px 0; }
.ca-f2 .row h3 { font-size: 34px; }
.ca-f2 .row .n { font-size: 19px; }

/* loop */
.ca-loop { position: relative; width: 1408px; height: 420px; margin-top: 50px; }
.ca-loop > svg { position: absolute; inset: 0; }
.ca-loop > svg path { fill: none; stroke-width: 2; }
.ca-loop-k { stroke: #000; }
.ca-loop > svg .ca-loop-ka { fill: #000; }
.ca-loop-g { stroke: #8c8c8c; stroke-dasharray: 4 8; transition: opacity .3s; }
.ca-loop > svg .ca-loop-b { stroke: var(--blue); stroke-width: 3; stroke-dasharray: 1488; stroke-dashoffset: 1488; transition: stroke-dashoffset .5s ease-in-out; } /* 1488 = path length: 210 + 1068 + 210 */
.ca-loop > svg .ca-loop-ba { fill: var(--blue); opacity: 0; transition: opacity .2s; }
.ca-st { position: absolute; width: 340px; height: 140px; display: flex; align-items: center; gap: 20px; padding: 0 26px; background: #fff; border: 1px solid #000; font-size: 27px; font-weight: 600; line-height: 1.16; letter-spacing: -.025em; transition: border-color .3s, background .3s, color .3s; }
.ca-st svg { width: 48px; height: 48px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; transition: stroke .3s; }
.ca-st-b { border: 1px dashed #8c8c8c; color: #8c8c8c; }
.ca-loop-cap { width: 874px; margin: 30px 0 0 267px; font-size: 25px; }
.ca-closed .ca-loop-g { opacity: 0; }
.ca-closed .ca-loop > svg .ca-loop-b { stroke-dashoffset: 0; }
.ca-closed .ca-loop > svg .ca-loop-ba { opacity: 1; transition-delay: .4s; }
.ca-closed .ca-st-b { border: 1px solid var(--blue); outline: 1px solid var(--blue); background: var(--blue-tint); color: #000; transition-delay: .2s; }
.ca-closed .ca-st-b + .ca-st-b { transition-delay: .35s; }
.ca-closed .ca-st-b svg { stroke: var(--blue); transition-delay: inherit; }

/* shape: the top of each card is where the shape shows, so the cards stand in a rack, cut at the fields */
.ca-shapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 24px; }
.ca-shape-pass { height: 232px; overflow: hidden; border-bottom: 1px solid #000; margin-bottom: 18px; }
.ca-shape-pass .pass { width: 100%; box-shadow: none; border-radius: 14px 14px 0 0; }
.ca-shape h3 { font-size: 32px; }
.ca-shape .small { margin-top: 6px; font-size: 20px; }
.ca-rule { margin-top: 8px; font-size: 24px; line-height: 1.28; color: #000; }
.ca-three { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; padding: 16px 30px; margin-top: 20px; }
.ca-three .kicker { margin-bottom: 8px; }
.ca-three-n strong { display: block; font-size: 24px; line-height: 1.3; letter-spacing: -.02em; }

/* data */
.ca-data { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
.ca-lists { position: relative; align-self: center; display: grid; grid-template-columns: repeat(3, 448px); gap: 32px; padding-bottom: 124px; }
.ca-list { position: relative; }
.ca-list h3 { font-size: 34px; padding-bottom: 16px; border-bottom: 2px solid #000; }
.ca-list table { width: 448px; table-layout: fixed; border-collapse: collapse; }
.ca-list th { text-align: left; font-weight: 400; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); padding: 18px 0 14px 14px; white-space: nowrap; transition: background .3s, color .3s; }
.ca-list td { padding: 0 0 0 14px; height: 72px; border-top: 1px solid var(--line); font-size: 22px; color: var(--grey); white-space: nowrap; transition: background .3s, color .3s; }
.ca-list .ca-her td { color: #000; font-weight: 600; }
.ca-mono { font-family: var(--mono); letter-spacing: -.02em; }
.ca-list td.ca-mono { font-size: 19px; }
.ca-list::after { content: ""; position: absolute; left: var(--kx); top: 100%; width: 2px; height: 0; background: var(--blue); transition: height .3s; }
.ca-list-cap { position: absolute; left: 166px; top: calc(100% + 16px); width: 282px; }
.ca-bus { position: absolute; left: 372px; width: 666px; bottom: 62px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .35s .25s; }
.ca-bus span { position: absolute; left: 0; top: 16px; font-size: 25px; color: var(--blue); white-space: nowrap; opacity: 0; transition: opacity .3s .5s; }
.ca-tied .ca-list .ca-key { background: var(--blue-tint); color: var(--blue); }
.ca-tied .ca-list::after { height: 62px; }
.ca-tied .ca-bus { transform: none; }
.ca-tied .ca-bus span { opacity: 1; }

/* console */
.ca-con { display: grid; grid-template-columns: 1fr 330px; gap: 48px; height: 100%; }
.ca-con-r { display: grid; align-content: center; justify-items: center; gap: 10px; }
.ca-work { display: grid; grid-template-columns: 600px 1fr; gap: 6px 36px; margin-top: 26px; }

.ca-ui { border: 1px solid #000; background: #fff; font-size: 19px; }
.ca-ui-bar { display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 0 18px; background: #000; color: #fff; font-size: 19px; }
.ca-ui-bar strong { color: #fff; }
.ca-ui-bar span { opacity: .7; }
.ca-ui table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.ca-ui th { text-align: left; font-weight: 400; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); padding: 12px 0 10px 18px; }
.ca-ui td { height: 42px; padding: 0 0 0 18px; border-top: 1px solid var(--line); color: var(--grey); white-space: nowrap; }
.ca-ui td.ca-mono { font-size: 19px; }
.ca-ui .ca-sel td { background: var(--blue-tint); color: #000; font-weight: 600; }
.ca-ui .ca-sel td:first-child { box-shadow: inset 4px 0 0 var(--blue); }
.ca-n { display: inline-block; width: 78px; margin-right: 8px; font-variant-numeric: tabular-nums; }
.ca-pips { display: inline-flex; gap: 3px; vertical-align: -1px; }
.ca-pips i { width: 10px; height: 10px; border: 1px solid #b5b5b5; background: #fff; }
.ca-pips i.ca-on { background: #8c8c8c; border-color: #8c8c8c; }
.ca-sel .ca-pips i.ca-on { background: var(--blue); border-color: var(--blue); }
.ca-ui-act { padding: 12px 18px 14px; border-top: 1px solid #000; }
.ca-ui-lab { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); margin-bottom: 10px; }
.ca-ui-btns { display: flex; gap: 10px; }
.ca-ui .btn { min-height: 46px; padding: 0 20px; font-size: 19px; }
.ca-ui .btn[disabled] { filter: none; }
.ca-ui .btn.ca-live { opacity: 1; background: var(--blue-tint); border-color: var(--blue); color: var(--blue); }
.ca-ui-near { margin-top: 12px; font-size: 19px; line-height: 1.3; color: #000; white-space: nowrap; }
.ca-ui-near span { display: block; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); margin-bottom: 3px; }
.ca-ui-near b { font-weight: 400; }
#ca-phone .pass .row2 .v { font-size: 15px; }
.ca-ui .btn.ca-tap { animation: ca-tap .5s ease-out; }
@keyframes ca-tap { 0%, 30% { transform: scale(.94); box-shadow: 0 0 0 0 rgba(0, 111, 230, .6); } 100% { transform: none; box-shadow: 0 0 0 14px rgba(0, 111, 230, 0); } }
.ca-flash { animation: ca-flash .9s ease-out; }
@keyframes ca-flash { 0%, 30% { background: var(--blue); color: #fff; box-shadow: 0 0 0 3px var(--blue); } 100% { background: transparent; box-shadow: 0 0 0 3px transparent; } }

.ca-flow { display: flex; flex-direction: column; }
.ca-flow .kicker { margin-bottom: 0; line-height: 46px; }
.ca-flow ol { list-style: none; margin: 0; padding: 0; }
.ca-flow li { position: relative; padding: 9px 12px 11px 40px; color: #a0a0a0; font-size: 20px; line-height: 1.3; transition: background .25s, color .25s; }
.ca-flow li::before { content: ""; position: absolute; left: 17px; top: 0; bottom: 0; width: 2px; background: var(--line); transition: background .25s; }
.ca-flow li:first-child::before { top: 19px; }
.ca-flow li:last-child::before { bottom: auto; height: 19px; }
.ca-flow li::after { content: ""; position: absolute; left: 11px; top: 14px; width: 14px; height: 14px; background: #fff; border: 2px solid #c4c4c4; transition: background .25s, border-color .25s; }
.ca-who { display: block; font-size: 15px; letter-spacing: .13em; text-transform: uppercase; }
.ca-what { display: block; margin-top: 2px; }
.ca-flow li em { display: block; font-style: italic; color: var(--blue); }
.ca-flow li.ca-lit { color: #000; }
.ca-flow li.ca-lit .ca-who { color: var(--blue); }
.ca-flow li.ca-lit::before { background: var(--blue); }
.ca-flow li.ca-lit::after { background: var(--blue); border-color: var(--blue); }
.ca-flow li.ca-now { background: var(--blue-tint); }
.ca-flow li.ca-now::before { bottom: auto; height: 19px; }
.ca-flow li.ca-now:first-child::before { height: 0; }
.ca-flow-btns { display: flex; gap: 10px; margin-top: auto; }
.ca-flow-btns .btn { min-height: 46px; padding: 0 18px; font-size: 19px; }
.ca-try { margin-top: auto; }
body.guide .ca-flow-btns { margin-top: 10px; }