/* Home page band: the dashboard on a laptop and the Live Tracker on an iPad, side by side. Everything inside a screen is sized in cqw of
   that screen, so each one scales as a whole. */
.pair { --ink: #16141f; --mute: #625f7a; --faint: #9a97b0; --line: #ebe8f5; --soft: #f4f1fb; --blue: #4299e1; --purple: #9f7aea; --pink: #ed64a6; --green: #48bb78; --orange: #ed8936; --teal: #38b2ac; --ok: #2f855a; position: relative; padding: clamp(40px, 6vw, 84px) 0 clamp(30px, 5vw, 64px); }
.pair-wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1.3fr) 1px minmax(0, 1fr); gap: clamp(22px, 3.4vw, 54px); align-items: stretch; }
.pair-line { align-self: stretch; background: linear-gradient(to bottom, transparent, #d6d0ec 14%, #d6d0ec 86%, transparent); }
.pair-col { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.pair-col > .lp, .pair-col > .ip { margin-top: auto; margin-bottom: auto; width: 100%; }
.pair-h { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 clamp(18px, 2.2vw, 30px); font: 800 clamp(23px, 2.3vw, 32px)/1 var(--font); letter-spacing: -.035em; color: var(--ink, #16141f); }
.pair-h svg { height: clamp(26px, 2.5vw, 34px); width: auto; flex: 0 0 auto; }

/* ---------- laptop ---------- */
.lp { position: relative; margin: 0 auto; max-width: 780px; }
.lp-lid { overflow: hidden; padding: 9px; border-radius: 16px; background: #15141b; box-shadow: 0 0 0 1px #3a3844, 0 40px 70px -44px rgba(70,50,140,.5); }
.lp-bar { display: flex; align-items: center; gap: .9cqw; height: 3.4cqw; padding: 0 1.6cqw; background: linear-gradient(#f7f5fc, #efecf8); border-bottom: 1px solid #e6e2f2; }
.lp-bar i { width: 1.15cqw; height: 1.15cqw; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.16); }
.lp-bar i:nth-child(2) { background: #febc2e; }
.lp-bar i:nth-child(3) { background: #28c840; }
.lp-screen { container-type: inline-size; position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #fbfaff; }

.dx { height: 100%; padding: 1.9cqw 2.3cqw 0; font-family: var(--font); color: var(--ink); background: radial-gradient(90cqw 40cqw at 100% -10%, #efe9fb, transparent 70%), #fbfaff; }
.dx-top { display: flex; align-items: center; gap: 1.5cqw; }
.dx-top svg.mk { width: 5.2cqw; height: 4.4cqw; flex: 0 0 auto; filter: drop-shadow(0 .3cqw .5cqw rgba(70,50,140,.2)); }
.dx-t b { display: block; font: 800 2.5cqw/1.05 var(--font); letter-spacing: -.035em; }
.dx-t small { display: block; margin-top: .3cqw; font: 500 1.1cqw/1.2 var(--font); color: var(--mute); white-space: nowrap; }
.dx-t small i { font-style: normal; color: var(--ok); font-weight: 600; }
.dx-chip { margin-left: auto; padding: .8cqw 1.5cqw; border-radius: 99px; background: #fdebeb; color: #c53030; font: 600 1.05cqw/1 var(--font); white-space: nowrap; }
.dx-ic { flex: 0 0 auto; display: grid; place-items: center; width: 3.1cqw; height: 3.1cqw; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(21,20,27,.05); }
.dx-ic i { display: block; width: 1.2cqw; height: .16cqw; border-radius: 2px; background: var(--ink); box-shadow: 0 -.4cqw 0 var(--ink), 0 .4cqw 0 var(--ink); }
.dx-tabs { display: flex; gap: .6cqw; margin-top: 1.5cqw; }
.dx-tab { display: inline-flex; align-items: center; gap: .6cqw; padding: .75cqw 1.6cqw; border-radius: 99px; font: 600 1.2cqw/1 var(--font); color: var(--mute); }
.dx-tab.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(21,20,27,.08), 0 .6cqw 1.2cqw -.6cqw rgba(70,50,140,.3); }
.dx-tab em { font: 600 .95cqw/1 var(--font); font-style: normal; padding: .3cqw .6cqw; border-radius: 99px; background: var(--soft); color: var(--mute); }
.dx-tab em.r { background: #fdebeb; color: #c53030; }

.dx-card { background: #fff; border: 1px solid var(--line); border-radius: 2cqw; box-shadow: 0 1px 2px rgba(21,20,27,.04), 0 1.6cqw 2.6cqw -2cqw rgba(70,50,140,.35); }
.dx-main { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: 0 2cqw; margin-top: 1.5cqw; padding: 1.7cqw 2cqw 0; }
.dx-k { display: block; font: 500 .95cqw/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.dx-big { position: relative; display: flex; align-items: baseline; gap: .2cqw; margin-top: 1.2cqw; font: 800 7.2cqw/1 var(--font); letter-spacing: -.045em; }
.dx-big small { margin-left: .8cqw; font: 500 1.3cqw/1 var(--font); letter-spacing: 0; color: var(--mute); }
.dx-ring { position: absolute; right: 0; top: -.6cqw; width: 8cqw; height: 8cqw; }
.dx-ring circle { fill: none; stroke-width: 12; } .dx-ring .t { stroke: #efe9fb; } .dx-ring .v { stroke: url(#px-rg); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dasharray .9s cubic-bezier(.2,.8,.2,1); }
.dx-ring text { font: 800 15px var(--font); fill: var(--ink); text-anchor: middle; } .dx-ring text.s { font: 500 8px var(--font); fill: var(--mute); }
.dx-seg { display: flex; height: 1cqw; margin-top: 1.5cqw; border-radius: 99px; background: #ebe8f5; overflow: hidden; box-shadow: inset 0 1px 1px rgba(21,20,27,.06); }
.dx-seg i { display: block; height: 100%; transition: width .9s cubic-bezier(.2,.8,.2,1); }
.dx-seg .a { background: linear-gradient(90deg, var(--blue), var(--purple), var(--pink)); } .dx-seg .b { background: #d6bcfa; }
.dx-leg { display: flex; flex-wrap: wrap; gap: .4cqw 1.6cqw; margin-top: 1cqw; font: 500 1.05cqw/1.2 var(--font); color: var(--mute); }
.dx-leg b { font-weight: 700; color: var(--ink); margin-right: .4cqw; }
.dx-chartw { position: relative; min-width: 0; }
.dx-tg { display: flex; justify-content: space-between; align-items: center; }
.dx-tg span.p { display: inline-flex; gap: .3cqw; padding: .3cqw; border-radius: 99px; background: var(--soft); }
.dx-tg span.p i { font: 600 .95cqw/1 var(--font); font-style: normal; padding: .5cqw 1cqw; border-radius: 99px; color: var(--mute); } .dx-tg span.p i.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(21,20,27,.1); }
.dx-chart { display: block; width: 100%; height: auto; aspect-ratio: 200 / 46; margin-top: .8cqw; overflow: visible; }
.dx-chart .gl { stroke: #ebe8f5; stroke-width: .8; }
.dx-chart .pl { fill: none; stroke: #c9c3e6; stroke-width: 1.4; stroke-dasharray: 4 4; }
.dx-chart .ln { fill: none; stroke: var(--purple); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.dx-chart .ar { fill: url(#px-ag); opacity: 0; transition: opacity .8s ease .6s; }
.dx-chart .dot { fill: #fff; stroke: var(--purple); stroke-width: 2.2; opacity: 0; transition: opacity .3s ease 1.3s; }
.dx.go .dx-chart .ln { animation: px-draw 1.7s cubic-bezier(.3,.1,.2,1) forwards; } .dx.go .dx-chart .ar, .dx.go .dx-chart .dot { opacity: 1; }
.dx-chart .dot.ping { animation: px-dot .9s ease-out; }
.dx-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4cqw; margin-top: 1.4cqw; padding: 1.2cqw 0 1.5cqw; border-top: 1px solid var(--soft); }
.dx-facts b { display: block; margin-top: .8cqw; font: 800 1.9cqw/1 var(--font); letter-spacing: -.03em; } .dx-facts b.bad { color: #c53030; }
.dx-facts small { display: block; margin-top: .5cqw; font: 500 .95cqw/1.2 var(--font); color: var(--mute); }
.dx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqw; margin-top: 1.4cqw; }
.dx-cards .dx-card { padding: 1.4cqw 1.5cqw; min-height: 17cqw; }
.dx-ch { display: flex; justify-content: space-between; align-items: center; font: 700 1.3cqw/1 var(--font); } .dx-ch small { font: 500 1cqw/1 var(--font); color: var(--mute); }
.dx-eq { margin-top: 1.1cqw; } .dx-eq div { margin-top: 1.1cqw; font: 600 1.1cqw/1 var(--font); display: grid; grid-template-columns: 1fr auto; gap: .5cqw; align-items: center; } .dx-eq em { font-style: normal; color: var(--mute); font-weight: 500; }
.dx-eq u { grid-column: 1 / -1; display: block; height: .8cqw; border-radius: 99px; background: var(--t); overflow: hidden; text-decoration: none; } .dx-eq u i { display: block; height: 100%; border-radius: 99px; background: var(--c); transition: width .9s cubic-bezier(.2,.8,.2,1); }
.dx-eq .g { --c: var(--green); --t: rgba(72,187,120,.2); } .dx-eq .o { --c: var(--orange); --t: rgba(237,137,54,.2); } .dx-eq .b { --c: var(--blue); --t: rgba(66,153,225,.2); }
.dx-at { margin-top: 1.1cqw; } .dx-at div { display: flex; align-items: center; gap: .8cqw; padding: .8cqw 0; border-top: 1px solid var(--soft); font: 500 1.1cqw/1.2 var(--font); white-space: nowrap; } .dx-at div:first-child { border-top: 0; }
.dx-at i { font: 700 .85cqw/1 var(--font); font-style: normal; padding: .4cqw .7cqw; border-radius: 99px; background: #fdebeb; color: #c53030; } .dx-at i.y { background: #fdf3d9; color: #92610a; } .dx-at i.n { background: var(--soft); color: var(--mute); }
.dx-at em { margin-left: auto; font-style: normal; font-size: .95cqw; color: var(--faint); }
.dx-fl { position: relative; height: 12.6cqw; margin-top: .6cqw; overflow: hidden; }
.dx-fr { display: flex; gap: .9cqw; align-items: baseline; height: 4.2cqw; padding: 1.2cqw 0 0; border-top: 1px solid var(--soft); font: 500 1.1cqw/1.2 var(--font); white-space: nowrap; } .dx-fr:first-child { border-top: 0; }
.dx-fr time { flex: 0 0 auto; font: 500 .9cqw/1 var(--mono); color: var(--faint); } .dx-fr span { overflow: hidden; text-overflow: ellipsis; } .dx-fr b { font-weight: 700; }
.dx-fr.new { animation: px-in .7s cubic-bezier(.2,.8,.2,1); background: linear-gradient(90deg, rgba(159,122,234,.14), transparent 70%); }
.dx-live i { display: inline-block; width: .8cqw; height: .8cqw; margin-right: .5cqw; border-radius: 50%; background: var(--green); animation: px-pulse 1.8s ease-out infinite; }
.dx-main.pop, .dx-card.pop { box-shadow: 0 0 0 2px rgba(159,122,234,.55), 0 1.6cqw 2.6cqw -1.6cqw rgba(70,50,140,.4); }
.dx-main, .dx-card { transition: box-shadow .4s ease; }

/* ---------- iPad, landscape ---------- */
.ip { position: relative; margin: 0 auto; max-width: 600px; padding: 11px; border-radius: 30px; background: #15141b; box-shadow: 0 0 0 1px #3a3844, 0 40px 70px -44px rgba(70,50,140,.5); }
.ip-screen { container-type: inline-size; position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #fff; }
.ip-screen::after { content: ""; position: absolute; left: 50%; top: 1.5cqw; width: 15cqw; height: 4cqw; transform: translateX(-50%); border-radius: 99px; background: #000; z-index: 3; }

.tq { height: 100%; padding: 5.9cqw 2.6cqw 0; font-family: var(--font); color: #111; background: #fff; }
.tq-top { display: flex; align-items: center; gap: 1.5cqw; }
.tq-btn { display: inline-flex; align-items: center; height: 4cqw; padding: 0 1.7cqw; border: 1px solid #d6d6dc; border-radius: 1.3cqw; background: #f8f8fa; font: 600 1.4cqw/1 var(--font); }
.tq-top b { font: 800 2.2cqw/1 var(--font); letter-spacing: -.02em; }
.tq-search { flex: 1; min-width: 0; height: 4cqw; display: flex; align-items: center; padding: 0 1.8cqw; border: 1px solid #d6d6dc; border-radius: 1.4cqw; background: #f8f8fa; font: 500 1.4cqw/1 var(--font); color: #8c8c96; }
.tq-sq { flex: 0 0 auto; width: 4cqw; height: 4cqw; border: 1px solid #d6d6dc; border-radius: 1.3cqw; background: #f8f8fa; display: grid; place-items: center; }
.tq-sq i { display: block; width: 1.6cqw; height: 1.6cqw; border: .3cqw solid #111; border-radius: 50%; }
.tq-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4cqw; margin-top: 1.8cqw; }
.tq-st { text-align: center; padding: 1.3cqw 0 1.2cqw; border: 1px solid #e0e0e6; border-radius: 1.8cqw; background: #fafafc; box-shadow: inset 0 -.25cqw 0 rgba(0,0,0,.03); }
.tq-st b { display: block; font: 800 3.5cqw/1 var(--font); letter-spacing: -.02em; } .tq-st span { display: block; margin-top: .8cqw; font: 600 1.05cqw/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: #6d6d78; }
.tq-st .g { color: #166534; } .tq-st .a { color: #8a5a00; } .tq-st .u { color: #0b5ec9; }
.tq-bar { height: 1.2cqw; margin-top: 1.6cqw; border-radius: 99px; background: #e4e4e8; overflow: hidden; } .tq-bar i { display: block; height: 100%; border-radius: 99px; background: #111; transition: width .9s cubic-bezier(.2,.8,.2,1); }
.tq-pills { display: flex; gap: 1.1cqw; margin-top: 1.4cqw; } .tq-pills span { padding: .95cqw 1.9cqw; border: 1px solid #d6d6dc; border-radius: 99px; font: 600 1.35cqw/1 var(--font); color: #55555f; } .tq-pills span.on { background: #111; border-color: #111; color: #fff; }
.tq-gl { display: flex; align-items: center; gap: 1.2cqw; margin-top: 1.9cqw; font: 800 1.1cqw/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #55555f; }
.tq-gl em { font-style: normal; padding: .6cqw 1.2cqw; border-radius: 99px; background: #eeeef2; font-size: .95cqw; letter-spacing: .1em; } .tq-gl::after { content: ""; flex: 1; height: 1px; background: #ececf0; }
.tq-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6cqw; margin-top: 1.2cqw; }
.ac { position: relative; border: 1px solid #e0e0e6; border-radius: 2.2cqw; background: #fafafa; overflow: hidden; box-shadow: 0 .8cqw 1.8cqw -1cqw rgba(0,0,0,.25); transition: background .4s ease, border-color .4s ease, transform .3s ease; }
.ac-h { padding: 1.3cqw 1.8cqw 1.1cqw; } .ac-h b { display: block; font: 800 2.3cqw/1 var(--font); letter-spacing: -.02em; } .ac-h span { display: block; margin-top: .8cqw; font: 600 1.2cqw/1 var(--font); color: #55555f; } .ac-h small { display: none; }
.ac-f { position: relative; padding: 1.2cqw 1.8cqw 1.6cqw; border-top: 1px solid #e0e0e6; background: #f0f0f2; font: 800 1.35cqw/1 var(--font); color: #8a5a00; transition: background .4s ease, color .4s ease, border-color .4s ease; }
.ac-f .n { display: inline-block; min-width: 1.6cqw; } .ac-f .ck { display: none; } .ac-f .pt { display: none; }
.ac-f::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .5cqw; background: #8a5a00; }
.ac-f i { position: absolute; left: 0; bottom: 0; z-index: 1; height: .5cqw; background: #111; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.ac.done { background: #def7e4; border-color: #1f8a4c; } .ac.done .ac-f { background: #cdeed7; border-color: #a7dcb8; color: #166534; } .ac.done .ac-f::after, .ac.done .ac-f i { background: #1f8a4c; } .ac.done .ac-f .st { display: none; } .ac.done .ac-f .ck { display: inline; }
.ac.idle .ac-f { color: #6d6d78; } .ac.idle .ac-f::after, .ac.idle .ac-f i { display: none; } .ac.idle .ac-f .st { display: none; } .ac.idle .ac-f .pt { display: inline; }
.ac.tap { transform: scale(.975); } .ac.tap::after { content: ""; position: absolute; left: 50%; top: 42%; width: 8cqw; height: 8cqw; margin: -4cqw 0 0 -4cqw; border-radius: 50%; border: .5cqw solid rgba(66,153,225,.8); animation: px-ring .8s ease-out forwards; pointer-events: none; z-index: 2; }

@keyframes px-draw { to { stroke-dashoffset: 0; } } @keyframes px-dot { 0% { r: 4.4; } 40% { r: 7.4; } 100% { r: 4.4; } }
@keyframes px-in { from { opacity: 0; transform: translateY(-14px); } }
@keyframes px-pulse { 70% { box-shadow: 0 0 0 .8cqw rgba(72,187,120,0); } 100% { box-shadow: 0 0 0 0 rgba(72,187,120,0); } }
@keyframes px-ring { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.motion-off .dx-live i, .motion-off .ac.tap::after { animation: none !important; }
.motion-off .dx .dx-chart .ln { stroke-dashoffset: 0; } .motion-off .dx .dx-chart .ar, .motion-off .dx .dx-chart .dot { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .dx-live i { animation: none; } .dx .dx-chart .ln { stroke-dashoffset: 0; animation: none; } .dx .dx-chart .ar, .dx .dx-chart .dot { opacity: 1; } .ac.tap::after { animation: none; opacity: 0; } }

@media (max-width: 900px) {
  .pair-wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pair-line { height: 1px; width: auto; background: linear-gradient(to right, transparent, #d6d0ec 14%, #d6d0ec 86%, transparent); }
}

/* the hero laptop and phone sit a little lower, level with the headline block */
/* the hero is text only now: the dashboard and tracker band below it is the picture */
.hero.solo .wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.hero.solo .wrap > div { max-width: 860px; }
.hero.solo .lede { margin-left: auto; margin-right: auto; max-width: 680px; }
.hero.solo .cta-row, .hero.solo .trust { justify-content: center; }
.hero.solo .glow { width: 100%; left: 0; right: auto; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
.pair-wrap > .motion-line { grid-column: 1 / -1; text-align: center; margin: 4px 0 0; }
.pair { padding-top: clamp(30px, 4.5vw, 60px); }
.hero.solo h1 { font-size: clamp(32px, 4.1vw, 58px); }
.hero.solo .trust { padding-top: 18px; }
.hero.solo .cta-note { margin-left: auto; margin-right: auto; max-width: 60ch; }

/* the iPad's second screen: one air handler's checklist, in the field tracker's own colours (amber wire pull, green terminate) */
.tu { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: 5.9cqw 2.6cqw 0; background: #f8f8fa; font-family: var(--font); color: #111; transform: translateX(102%); transition: transform .8s cubic-bezier(.22,.7,.2,1); }
.tu.on { transform: none; }
.tu::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .9cqw; background: #a07a00; transition: background .4s ease; }
.tu.complete::before { background: #1f8a4c; }
.tu-top { display: flex; align-items: center; justify-content: space-between; }
.tu-nav { font: 700 1.4cqw/1 var(--font); color: #6d6d78; }
.tu-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2cqw; margin-top: 1.6cqw; }
.tu-head b { display: block; font: 800 4.4cqw/1 var(--font); letter-spacing: -.03em; } .tu-head span { display: block; margin-top: .8cqw; font: 500 1.4cqw/1 var(--font); color: #55555f; }
.tu-chips { display: flex; gap: 1cqw; } .tu-chips i { font-style: normal; padding: .9cqw 1.6cqw; border-radius: 99px; background: #e9e9ee; font: 700 1.3cqw/1 var(--font); color: #2b2b33; }
.tu-prog { margin-top: 1.6cqw; } .tu-prog .tq-bar { margin-top: 0; } .tu-prog small { display: block; margin-top: .9cqw; text-align: right; font: 500 1.3cqw/1 var(--font); color: #55555f; }
.tu-tabs { display: flex; gap: 1.1cqw; margin-top: 1.5cqw; } .tu-tabs span { padding: 1.1cqw 2.1cqw; border: 1px solid #d6d6dc; border-radius: 99px; background: #fff; font: 700 1.5cqw/1 var(--font); color: #3a3a44; } .tu-tabs .on { background: #111; border-color: #111; color: #fff; }
.tu-rows { display: grid; gap: 1.1cqw; margin-top: 1.5cqw; }
.tu-r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1.2cqw; padding: 1.3cqw 1.8cqw; border: 1px solid #e0e0e6; border-left: .7cqw solid #e0e0e6; border-radius: 1.6cqw; background: #fff; transition: background .4s ease, border-color .4s ease; }
.tu-r.done { background: #d9f3df; border-color: #a7dcb8; border-left-color: #1f8a4c; }
.tu-n b { font: 800 1.9cqw/1.1 var(--font); } .tu-n > span { font: 600 1.7cqw/1.1 var(--font); color: #3a3a44; margin-left: .6cqw; }
.tu-r.done .tu-n b, .tu-r.done .tu-n > span { text-decoration: line-through; text-decoration-thickness: .15cqw; color: #4a5a50; }
.tu-n code { display: block; margin-top: .8cqw; font: 600 1.25cqw/1 var(--mono); color: #0b5ec9; }
.tu-b { position: relative; display: inline-flex; align-items: center; gap: .8cqw; padding: 1.3cqw 2.2cqw; border-radius: 99px; font: 800 1.55cqw/1 var(--font); border: .2cqw solid; transition: background .3s ease, color .3s ease, transform .2s ease; }
.tu-b svg { width: 1.9cqw; height: 1.9cqw; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tu-b.wp { color: #8a5200; border-color: #e6d3b3; background: #fff8ec; } .tu-b.wp.on { color: #fff; background: #8a5200; border-color: #8a5200; }
.tu-b.tr { color: #137a3a; border-color: #b9e0c5; background: #f1fbf4; } .tu-b.tr.on { color: #fff; background: #137a3a; border-color: #137a3a; }
.tu-b.press { transform: scale(.92); } .tu-b.press::after { content: ""; position: absolute; inset: -1cqw; border-radius: 99px; border: .4cqw solid rgba(66,153,225,.75); animation: px-ring .6s ease-out forwards; pointer-events: none; }
.motion-off .tu, .motion-off .tu-b.press::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .tu { transition: none; } .tu-b.press::after { animation: none; opacity: 0; } }

/* ---------- the tracker's own light theme (Q Site): lavender ground, white glass cards, its system colours ---------- */
.ip-screen { background: #efecff; }
.ip-screen::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70cqw 45cqw at 92% -8%, rgba(160,140,255,.55), transparent 70%), radial-gradient(60cqw 40cqw at 0% 105%, rgba(240,160,255,.40), transparent 70%), radial-gradient(50cqw 30cqw at 55% 40%, rgba(150,175,255,.35), transparent 70%); pointer-events: none; }
.tq { position: relative; color: #14102b; background: transparent; }
.tq-btn, .tq-search, .tq-sq { border-color: rgba(60,40,140,.2); background: rgba(255,255,255,.7); color: #14102b; }
.tq-search { color: #5c567f; } .tq-sq i { border-color: #14102b; }
.tq-st { border-color: rgba(60,40,140,.12); background: #fff; box-shadow: 0 .6cqw 1.6cqw -.8cqw rgba(50,30,140,.24); }
.tq-st b { color: #14102b; } .tq-st span { color: #5c567f; }
.tq-st .g { color: #065f46; } .tq-st .a { color: #6b4300; } .tq-st .u { color: #0b62c4; }
.tq-bar { background: rgba(90,59,216,.13); } .tq-bar i { background: linear-gradient(90deg, #5a3bd8, #b43fd0); }
.tq-pills span { border-color: rgba(60,40,140,.2); background: #fff; color: #5c567f; }
.tq-pills span.on { background: #5a3bd8; border-color: #5a3bd8; color: #fff; }
.tq-gl { color: #5c567f; } .tq-gl em { background: #fff; } .tq-gl::after { background: rgba(60,40,140,.12); }
.ac { border-color: rgba(60,40,140,.12); background: #fff; box-shadow: 0 .9cqw 2cqw -.8cqw rgba(50,30,140,.3); }
.ac:not(.done):not(.idle) { background: linear-gradient(160deg, rgba(229,165,10,.24), #fff 72%); }
.ac-h b { color: #14102b; } .ac-h span { color: #5c567f; }
.ac-f { border-top-color: rgba(229,165,10,.35); background: rgba(229,165,10,.14); color: #6b4300; }
.ac-f::after { background: #e5a50a; } .ac-f i { background: #14102b; }
.ac.done { background: linear-gradient(160deg, rgba(16,185,129,.30), #fff 80%); border-color: rgba(16,185,129,.55); }
.ac.done .ac-f { background: rgba(16,185,129,.16); border-top-color: rgba(16,185,129,.35); color: #065f46; } .ac.done .ac-f::after, .ac.done .ac-f i { background: #10b981; }
.ac.idle .ac-f { background: rgba(90,59,216,.06); border-top-color: rgba(60,40,140,.12); color: #5c567f; }

.tu { background: #f3f0ff; color: #14102b; }
.tu::before { background: #a17a00; } .tu.complete::before { background: #10b981; }
.tu-nav, .tu-head span, .tu-prog small { color: #5c567f; }
.tu-chips i { background: rgba(90,59,216,.1); color: #14102b; }
.tu-tabs span { border-color: rgba(60,40,140,.2); background: #fff; color: #5c567f; } .tu-tabs .on { background: #5a3bd8; border-color: #5a3bd8; color: #fff; }
.tu-r { border-color: rgba(60,40,140,.12); border-left-color: rgba(60,40,140,.12); background: #fff; }
.tu-r.done { background: linear-gradient(100deg, rgba(16,185,129,.28), #fff 72%); border-color: rgba(16,185,129,.4); border-left-color: #10b981; }
.tu-n > span { color: #5c567f; } .tu-r.done .tu-n b, .tu-r.done .tu-n > span { color: #065f46; }
.tu-n code { color: #0b62c4; }
.tu-b.wp { color: #8a5200; border-color: rgba(255,159,10,.35); background: rgba(255,159,10,.16); } .tu-b.wp.on { color: #fff; background: #8a5200; border-color: #8a5200; }
.tu-b.tr { color: #0f7a37; border-color: rgba(48,209,88,.35); background: rgba(48,209,88,.16); } .tu-b.tr.on { color: #fff; background: #0f7a37; border-color: #0f7a37; }

/* the tracker's home screen: four system cards in its colours; the loop starts here and taps Air handlers */
.th { position: absolute; inset: 0; z-index: 2; padding: 6cqw 2.8cqw 0; font-family: var(--font); color: #14102b; background: #efecff; transition: transform .8s cubic-bezier(.22,.7,.2,1), opacity .6s ease; }
.th::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70cqw 45cqw at 92% -8%, rgba(160,140,255,.55), transparent 70%), radial-gradient(60cqw 40cqw at 0% 105%, rgba(240,160,255,.40), transparent 70%); }
.th.off { transform: translateX(-30%); opacity: 0; pointer-events: none; }
.th-t { position: relative; text-align: center; font: 800 3cqw/1 var(--font); letter-spacing: -.02em; background: linear-gradient(90deg, #14102b, #5a3bd8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.th-g { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; margin-top: 3cqw; }
.th-c { --c: #1f6fb2; position: relative; padding: 2.4cqw 2.4cqw 2cqw; border: 1px solid rgba(60,40,140,.12); border-radius: 3.2cqw; background: linear-gradient(150deg, color-mix(in srgb, var(--c) 16%, #fff), #fff 70%); box-shadow: 0 1cqw 2.4cqw -1cqw rgba(50,30,140,.3); transition: transform .3s ease; }
.th-c.vav { --c: #6b46c1; } .th-c.ahu { --c: #227a52; } .th-c.mech { --c: #b5620a; }
.th-bg { position: absolute; top: 1.6cqw; right: 1.8cqw; padding: .6cqw 1.4cqw; border-radius: 99px; background: rgba(60,40,140,.08); color: var(--c); font: 800 1.2cqw/1 var(--font); }
.th-l { display: flex; align-items: center; gap: 1cqw; font: 800 1.2cqw/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #5c567f; }
.th-l i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: var(--c); }
.th-c b { display: block; margin-top: 2cqw; font: 900 7.4cqw/1 var(--font); letter-spacing: -.04em; color: #14102b; }
.th-c em { display: block; margin-top: 1cqw; font: 800 1.9cqw/1 var(--font); font-style: normal; }
.th-c small { display: block; margin-top: .9cqw; font: 500 1.3cqw/1 var(--font); color: #5c567f; }
.th-c.tap { transform: scale(.97); } .th-c.tap::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; border-radius: 50%; border: .5cqw solid rgba(90,59,216,.8); animation: px-ring .8s ease-out forwards; pointer-events: none; }
.motion-off .th { transition: none !important; } .motion-off .th-c.tap::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .th { transition: none; } .th-c.tap::after { animation: none; opacity: 0; } }
.th-g { gap: 2.4cqw; margin-top: 3.6cqw; } .th-c { padding: 3.2cqw 2.8cqw 2.8cqw; } .th-c b { margin-top: 2.6cqw; font-size: 9.4cqw; } .th-c em { font-size: 2.2cqw; } .th-c small { font-size: 1.45cqw; } .th-l, .th-bg { font-size: 1.35cqw; } .th-t { font-size: 3.3cqw; }
.lp-screen > .dx { height: calc(100% - 3.4cqw); }

/* the tracker is on the laptop and the dashboard on the iPad */
.pair-wrap { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); }
.lp, .ip { max-width: 660px; width: 100%; }
.lp-bar { position: relative; z-index: 3; }
.lp-screen { aspect-ratio: 4 / 3; background: #efecff; }
.lp-screen::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70cqw 45cqw at 92% -8%, rgba(160,140,255,.55), transparent 70%), radial-gradient(60cqw 40cqw at 0% 105%, rgba(240,160,255,.40), transparent 70%), radial-gradient(50cqw 30cqw at 55% 40%, rgba(150,175,255,.35), transparent 70%); pointer-events: none; }
.lp-screen > .tq { height: calc(100% - 3.4cqw); padding-top: 2.4cqw; }
.lp-screen > .th, .lp-screen > .tu { top: 3.4cqw; padding-top: 2.6cqw; }
.lp-screen > .th { padding-top: 3.6cqw; }
.ip-screen { aspect-ratio: 3 / 2; background: #fbfaff; }
.ip-screen::before { content: none; }
.ip-screen > .dx { height: 100%; padding-top: 5.8cqw; }

/* ---------- the devices' bodies: the iPad's aluminium frame and side buttons ---------- */
.ip { padding: 10px; box-shadow: 0 0 0 1px #3a3844, 0 0 0 3px #cfcdd9, 0 0 0 4px #a9a7b6, 0 30px 50px -40px rgba(70,50,140,.45); }
.ip::before { content: ""; position: absolute; right: -4px; top: 18%; width: 2px; height: 7%; border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, #b9b7c6, #d9d8e2); box-shadow: 0 0 0 1px #a9a7b6; }
.ip::after { content: ""; position: absolute; right: -4px; top: 29%; width: 2px; height: 4.5%; border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, #b9b7c6, #d9d8e2); box-shadow: 0 0 0 1px #a9a7b6; }
@media (max-width: 860px) { .ip::before, .ip::after { right: -3px; } }

/* ---------- the laptop: a thin body, and the Live Tracker as the field crews see it, in the dashboard's colours ---------- */
.lp { padding-bottom: 9px; }
.lp-lid { position: relative; z-index: 1; padding: 5px 5px 6px; border-radius: 12px 12px 0 0; background: #17161d; box-shadow: 0 0 0 1px #b3b1c1, 0 -1px 0 1px #e3e1ec; }
.lp-screen { border-radius: 7px; }
.lp::after { content: ""; position: absolute; z-index: 0; left: -3.5%; right: -3.5%; bottom: 0; height: 9px; border-radius: 0 0 14px 14px / 0 0 9px 9px; background: linear-gradient(#f3f2f8 0, #dcdae6 45%, #bdbbcb 100%); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #a5a3b4, 0 20px 26px -14px rgba(70,50,140,.5); }
.lp::before { content: ""; position: absolute; z-index: 1; left: 50%; bottom: 3px; width: 14%; height: 5px; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: linear-gradient(#a9a7b8, #c7c5d3); box-shadow: inset 0 1px 1px rgba(0,0,0,.18); }

.tq-sq { display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: 1.3cqw; color: #4a3fa8; }
.tq-sq svg, .tu-dwg svg { width: 1.9cqw; height: 1.9cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tq-name { padding: 0 1.5cqw; height: 3.6cqw; display: inline-flex; align-items: center; border-radius: 1.3cqw; border: 1px solid rgba(60,40,140,.2); background: rgba(255,255,255,.7); font: 700 1.3cqw/1 var(--font); color: #5c567f; }
.tq-sync { display: inline-flex; align-items: center; gap: .8cqw; padding: 0 1.5cqw; height: 3.6cqw; border-radius: 99px; background: rgba(72,187,120,.16); color: #227a52; font: 800 1.25cqw/1 var(--font); }
.tq-sync i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #48bb78; box-shadow: 0 0 0 .4cqw rgba(72,187,120,.25); }
.tq-top, .tu-top { gap: 1.1cqw; }
.tq-top .tq-name, .tu-top .tq-name { margin-left: auto; }
.tq-top .tq-btn, .tu-top .tq-btn { height: 3.6cqw; padding: 0 1.5cqw; font: 700 1.35cqw/1 var(--font); border-radius: 1.3cqw; }
.tq-top b, .tu-top b { font: 800 2cqw/1 var(--font); letter-spacing: -.02em; margin-left: .4cqw; }
.tq-find { display: flex; align-items: center; height: 3.8cqw; margin-top: 1.4cqw; padding: 0 1.8cqw; border-radius: 1.4cqw; border: 1px solid rgba(60,40,140,.14); background: rgba(255,255,255,.78); font: 500 1.4cqw/1 var(--font); color: #8a85a8; }

/* the list: four coloured figures, the aurora bar, the chips */
.lp-screen .tq-stats { margin-top: 1.4cqw; gap: 1.3cqw; }
.lp-screen .tq-st { position: relative; padding: 1.1cqw 0 1cqw; border-radius: 1.6cqw; overflow: hidden; }
.lp-screen .tq-st b { font-size: 3.1cqw; } .lp-screen .tq-st span { margin-top: .6cqw; font-size: 1.05cqw; }
.lp-screen .tq-st::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .5cqw; background: #4299e1; }
.lp-screen .tq-st:nth-child(2)::before { background: #48bb78; } .lp-screen .tq-st:nth-child(3)::before { background: #ed8936; } .lp-screen .tq-st:nth-child(4)::before { background: linear-gradient(90deg, #4299e1, #9f7aea, #ed64a6); }
.lp-screen .tq-st:nth-child(1) { background: linear-gradient(180deg, rgba(66,153,225,.12), #fff 70%); } .lp-screen .tq-st:nth-child(2) { background: linear-gradient(180deg, rgba(72,187,120,.14), #fff 70%); }
.lp-screen .tq-st:nth-child(3) { background: linear-gradient(180deg, rgba(237,137,54,.14), #fff 70%); } .lp-screen .tq-st:nth-child(4) { background: linear-gradient(180deg, rgba(159,122,234,.14), #fff 70%); }
.lp-screen .tq-st .g { color: #227a52; } .lp-screen .tq-st .a { color: #b5620a; } .lp-screen .tq-st .u { color: #6b46c1; } .lp-screen .tq-st:nth-child(1) b { color: #1f6fb2; }
.lp-screen .tq-bar { height: 1.3cqw; margin-top: 1.4cqw; background: rgba(66,153,225,.15); }
.lp-screen .tq-bar i { background: linear-gradient(90deg, #4299e1, #9f7aea 55%, #ed64a6); border-radius: 99px; }
.lp-screen .tq-pills { margin-top: 1.3cqw; gap: .9cqw; } .lp-screen .tq-pills span { padding: .85cqw 1.6cqw; font-size: 1.2cqw; }
.lp-screen .tq-pills span.on { background: linear-gradient(145deg, #4f8fc6, #2f5f8f); border-color: #2f5f8f; }
.lp-screen .tq-gl { margin-top: 1.6cqw; color: #14102b; }
.lp-screen .tq-row { gap: 1.4cqw; margin-top: 1cqw; }
.lp-screen .ac { border-radius: 1.8cqw; }
.lp-screen .ac-h { padding: 1.2cqw 1.6cqw 1cqw; } .lp-screen .ac-h b { font-size: 2.1cqw; color: #14102b; }
.lp-screen .ac-h small { display: block; margin-top: .55cqw; font: 500 1.05cqw/1 var(--font); color: #8a85a8; }
.lp-screen .ac:not(.done):not(.idle) { background: linear-gradient(160deg, rgba(237,137,54,.20), #fff 72%); }
.lp-screen .ac-f { padding: 1.1cqw 1.6cqw 1.5cqw; font-size: 1.25cqw; border-top-color: rgba(237,137,54,.3); background: rgba(237,137,54,.12); color: #b5620a; }
.lp-screen .ac-f::after { background: rgba(237,137,54,.3); } .lp-screen .ac-f i { background: linear-gradient(90deg, #ed8936, #48bb78); }
.lp-screen .ac.done { background: linear-gradient(160deg, rgba(72,187,120,.28), #fff 80%); border-color: rgba(72,187,120,.6); }
.lp-screen .ac.done .ac-f { background: rgba(72,187,120,.16); border-top-color: rgba(72,187,120,.35); color: #227a52; }
.lp-screen .ac.done .ac-f::after { background: rgba(72,187,120,.35); } .lp-screen .ac.done .ac-f i { background: linear-gradient(90deg, #48bb78, #38b2ac); }

/* the home screen: four systems, each with its ring, in the colours of the dashboard's equipment view */
.lp-screen > .th { padding: 2.6cqw 2.8cqw 0; }
.th-ics { position: relative; display: flex; justify-content: flex-end; gap: 1.1cqw; }
.th-ics .tq-sq, .tq-top .tq-sq, .tu-top .tq-sq { border: 1px solid rgba(60,40,140,.16); background: rgba(255,255,255,.78); box-shadow: 0 .4cqw 1cqw -.6cqw rgba(50,30,140,.25); }
.lp-screen .th-t { margin-top: -.6cqw; font-size: 3.1cqw; background: linear-gradient(90deg, #14102b, #4f8fc6 60%, #9f7aea); -webkit-background-clip: text; background-clip: text; }
.lp-screen .th-g { gap: 2.4cqw; margin-top: 3cqw; }
.lp-screen .th-c { --c: #4299e1; --d: #1f6fb2; display: flex; flex-direction: column; justify-content: space-between; padding: 3cqw 2.8cqw; border-radius: 3cqw; background: linear-gradient(150deg, color-mix(in srgb, var(--c) 16%, #fff), #fff 68%); box-shadow: 0 1.2cqw 2.6cqw -1.2cqw rgba(50,30,140,.32), inset 0 0 0 .15cqw color-mix(in srgb, var(--c) 22%, transparent); }
.lp-screen .th-c.vav { --c: #9f7aea; --d: #6b46c1; } .lp-screen .th-c.ahu { --c: #48bb78; --d: #227a52; } .lp-screen .th-c.mech { --c: #ed8936; --d: #b5620a; }
.lp-screen .th-l { color: var(--d); font-size: 1.2cqw; }
.lp-screen .th-l i { width: 1.4cqw; height: 1.4cqw; background: var(--c); box-shadow: 0 0 0 .5cqw color-mix(in srgb, var(--c) 25%, transparent); }
.th-m { display: flex; align-items: center; justify-content: space-between; gap: 1.2cqw; margin-top: 1.8cqw; }
.th-v { min-width: 0; }
.th-pc { display: block; font: 900 7.4cqw/1 var(--font); letter-spacing: -.045em; color: var(--d); }
.th-pc u { text-decoration: none; margin-left: .3cqw; font-size: 3cqw; font-weight: 800; letter-spacing: 0; opacity: .75; }
.th-cw { display: block; margin-top: .7cqw; font: 800 1.5cqw/1 var(--font); color: #14102b; }
.lp-screen .th-c small { margin-top: .7cqw; font-size: 1.2cqw; line-height: 1.15; }
.th-rw { position: relative; flex: 0 0 auto; width: 15.5cqw; height: 15.5cqw; }
.th-rw svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 4.4; }
.th-rw .t { stroke: color-mix(in srgb, var(--c) 20%, #fff); }
.th-rw .p { stroke: var(--c); stroke-linecap: round; filter: drop-shadow(0 .2cqw .5cqw color-mix(in srgb, var(--c) 55%, transparent)); }
.th:not(.off) .th-rw .p { animation: th-ring 1.5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes th-ring { from { stroke-dasharray: 0 100; } }
.th-rn { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.th-rn strong { font: 900 3.4cqw/1 var(--font); letter-spacing: -.03em; color: #14102b; }
.th-rn span { margin-top: .5cqw; font: 700 1cqw/1 var(--font); color: #5c567f; }

/* one air handler: the title card, the drawing link, the section with its all-at-once buttons, then the devices */
.lp-screen > .tu { padding: 2.6cqw 2.6cqw 0; background: #f3f0ff; }
.lp-screen > .tu::before { content: none; }
.tu-card { position: relative; margin-top: 1.2cqw; padding: 1.4cqw 1.9cqw 1.3cqw; border-radius: 2.2cqw; border: 1px solid rgba(60,40,140,.12); background: linear-gradient(150deg, rgba(72,187,120,.18), #fff 62%); box-shadow: 0 1cqw 2.2cqw -1cqw rgba(50,30,140,.3); overflow: hidden; }
.tu-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .8cqw; background: linear-gradient(#ed8936, #f6ad55); transition: background .5s ease; }
.tu.complete .tu-card::before { background: linear-gradient(#48bb78, #38b2ac); }
.tu-card .tu-head { margin-top: 0; align-items: center; } .tu-card .tu-head b { font-size: 3.6cqw; color: #14102b; } .tu-card .tu-head span { margin-top: .6cqw; font-size: 1.3cqw; }
.tu-chips i { padding: .8cqw 1.4cqw; font-size: 1.2cqw; background: rgba(72,187,120,.16); color: #227a52; font-weight: 700; }
.tu-card .tu-prog { margin-top: 1.3cqw; } .tu-card .tu-prog small { margin-top: .8cqw; font-size: 1.25cqw; font-weight: 600; }
.lp-screen .tu .tq-bar { height: 1.3cqw; background: rgba(66,153,225,.15); }
.lp-screen .tu .tq-bar i { background: linear-gradient(90deg, #4299e1, #9f7aea 55%, #ed64a6); }
.tu-nv { display: flex; align-items: center; gap: 1.2cqw; margin-top: 1.1cqw; font: 700 1.3cqw/1 var(--font); color: #5c567f; }
.tu-nv .pv, .tu-nv .nx { padding: .9cqw 1.6cqw; border-radius: 99px; border: 1px solid rgba(60,40,140,.16); background: #fff; }
.tu-nv em { font-style: normal; font-weight: 800; color: #14102b; }
.tu-dwg { margin-left: auto; display: inline-flex; align-items: center; gap: .8cqw; padding: .9cqw 1.6cqw; border-radius: 99px; background: linear-gradient(145deg, #4f8fc6, #2f5f8f); color: #fff; font-weight: 800; }
.tu-sec { display: flex; align-items: center; gap: 1cqw; margin-top: 1.2cqw; }
.tu-sh { flex: 1; min-width: 0; font: 800 1.2cqw/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #5c567f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tu-sh em { font-style: normal; margin-left: .6cqw; padding: .4cqw 1cqw; border-radius: 99px; background: rgba(72,187,120,.18); color: #227a52; letter-spacing: 0; }
.tu-all { padding: .9cqw 1.5cqw; font-size: 1.2cqw; }
.lp-screen .tu-rows { gap: .9cqw; margin-top: 1cqw; }
.lp-screen .tu-r { padding: .95cqw 1.6cqw; border-radius: 1.8cqw; box-shadow: 0 .8cqw 1.8cqw -1.1cqw rgba(50,30,140,.3); }
.lp-screen .tu-r.done { background: linear-gradient(100deg, rgba(72,187,120,.30), #fff 72%); border-color: rgba(72,187,120,.45); border-left-color: #48bb78; }
.lp-screen .tu-r.done .tu-n b, .lp-screen .tu-r.done .tu-n > span { color: #227a52; }
.lp-screen .tu-n b { font-size: 1.8cqw; } .lp-screen .tu-n > span { font-size: 1.5cqw; } .lp-screen .tu-n code { margin-top: .6cqw; font-size: 1.15cqw; color: #1f6fb2; }
.lp-screen .tu-b { padding: 1.1cqw 1.9cqw; font-size: 1.4cqw; }
.lp-screen .tu-b.wp { color: #b5620a; border-color: rgba(237,137,54,.4); background: rgba(237,137,54,.14); }
.lp-screen .tu-b.wp.on { color: #fff; border-color: #ed8936; background: linear-gradient(145deg, #f6ad55, #ed8936); }
.lp-screen .tu-b.tr { color: #227a52; border-color: rgba(72,187,120,.4); background: rgba(72,187,120,.14); }
.lp-screen .tu-b.tr.on { color: #fff; border-color: #38a169; background: linear-gradient(145deg, #68d391, #38a169); }
@media (prefers-reduced-motion: reduce) { .th:not(.off) .th-rw .p { animation: none; } }

/* the unit page scrolls inside the screen: the crew scrolls down to the last valve before pressing it */
.lp-screen .tu { overflow: hidden; }
.tu-scroll { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; }
.tu-flow { padding-bottom: 3cqw; transition: transform .9s cubic-bezier(.4,.1,.2,1); }
.tu.scrolled .tu-flow { transform: translateY(-17cqw); }
.tu-s.tu-r.done { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .tu-flow { transition: none; } }

/* The Live Tracker over the dashboard, one under the other, at every width. */
.pair-wrap { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.pair-line { height: 1px; width: auto; background: linear-gradient(to right, transparent, #d6d0ec 14%, #d6d0ec 86%, transparent); }

/* The band already ends with its own space; this keeps the gap to the next section in step with the rest. */
.pair + #what-is-cirkt { padding-top: clamp(24px, 3vw, 36px); }