/* MoveConsole — hub pages (Estimate Engine, Sales Desk, Move Day, Customer Portal, Payments, MovePilot)
   Builds on site.css: same type, buttons, eyebrows and product-UI stages. Each hub has its own accent. */

.hub-blue{ --accent: #186ff2; --accent-600: #0e5bd6; --accent-ink: #031a3f; --card: #eef5ff; --card-2: #dcebff; --pv1: #f4f8ff; --pv2: #dce9fc; }
.hub-violet{ --accent: #6b4de6; --accent-600: #5a3bd4; --accent-ink: #1b1240; --card: #f3f0ff; --card-2: #e4ddff; --pv1: #f8f6ff; --pv2: #e4defb; }
.hub-teal{ --accent: #0e8f74; --accent-600: #0b7a63; --accent-ink: #04291f; --card: #e9f6f1; --card-2: #cdebe0; --pv1: #f1fbf7; --pv2: #d2ece2; }
.hub-coral{ --accent: #e2552e; --accent-600: #c9441f; --accent-ink: #3a1206; --card: #fff1eb; --card-2: #ffdccd; --pv1: #fff7f3; --pv2: #fde0d3; }
.hub-gold{ --accent: #b06a00; --accent-600: #935800; --accent-ink: #2e1c00; --card: #fdf5e6; --card-2: #f6e2bb; --pv1: #fffaf0; --pv2: #f6e6c6; }
.hub .sec-head .h2, .hub .sec-head .h3{ color: var(--accent-ink); }
.sec-tight{ padding: 72px 0; }

/* shared check-mark list */
.ticks{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 500px; }
.ticks li{ position: relative; padding-left: 34px; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.ticks li b{ color: var(--ink); font-weight: 600; }
.ticks li::before{ content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 7px; background: var(--card-2); }
.ticks li::after{
  content: ""; position: absolute; left: 4px; top: 4px; width: 14px; height: 14px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- hero ---------- */
.hub-hero{ padding: calc(var(--hdr) + 16px) 0 0; }
.hh-box{
  position: relative; overflow: hidden; border-radius: var(--r-box); padding: clamp(48px, 6vw, 80px) clamp(16px, 3.4vw, 56px) clamp(20px, 3vw, 40px);
  background: radial-gradient(70% 50% at 50% 0%, #fff 0%, rgba(255, 255, 255, 0) 72%), var(--card);
}
.hh-box::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 20%, transparent) 1.1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 50% at 50% 30%, #000 10%, transparent 100%); mask-image: radial-gradient(60% 50% at 50% 30%, #000 10%, transparent 100%);
}
.hh-head{ position: relative; display: grid; justify-items: center; gap: 24px; text-align: center; max-width: 960px; margin: 0 auto; }
.hh-head .h1{ font-size: clamp(44px, 6.1vw, 90px); color: var(--accent-ink); }
.hh-head .lead{ max-width: 700px; color: var(--ink-2); }
.hh-ctas{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- anatomy of an estimate (hero stage) ---------- */
.anat{ position: relative; max-width: 1240px; margin: clamp(36px, 4.5vw, 56px) auto 0; }
.anat-win{ position: relative; aspect-ratio: 1560 / 860; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 40px 90px -40px rgba(6, 26, 63, .45), 0 0 0 1px rgba(6, 26, 63, .06); }
.anat-canvas{ position: absolute; left: 0; top: 0; width: 1560px; height: 860px; transform-origin: 0 0; }
.anat-ui{ position: absolute; inset: 0; }
.anat-svg{ position: absolute; left: 0; top: 0; width: 1560px; height: 860px; pointer-events: none; overflow: visible; }
.anat-veil{ fill: #061a3f; opacity: 0; transition: opacity .6s var(--ease); }
.anat.is-spot .anat-veil{ opacity: .4; }
.anat-rings rect{ fill: none; stroke: #fff; stroke-width: 3; opacity: 0; transition: opacity .4s var(--ease); }
.anat-rings rect.on{ opacity: 1; }
.anat-rings rect.out{ stroke: var(--accent); stroke-width: 4; }
.anat-links path{ fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .95; }
.anat-links circle{ fill: #fff; }
.anat-links .dot{ fill: var(--accent); stroke: #fff; stroke-width: 3; }
.anat-tag{
  position: absolute; z-index: 3; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 12px;
  background: #fff; color: var(--ink); font: 600 14px/1.2 var(--font); white-space: nowrap; pointer-events: none;
  box-shadow: 0 16px 34px -14px rgba(6, 26, 63, .55); opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .5s var(--ease);
}
.anat-tag.on{ opacity: 1; transform: none; }
.anat-tag b{ display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; }
.anat-steps{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.anat-steps li{ display: flex; }
.as-step{
  position: relative; flex: 1; display: flex; align-items: flex-start; gap: 11px; padding: 14px 14px 18px; border: 0; border-radius: 16px; overflow: hidden;
  background: rgba(255, 255, 255, .55); text-align: left; cursor: pointer; font: inherit; color: inherit; transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.as-step:hover{ background: rgba(255, 255, 255, .85); }
.as-step.is-on{ background: #fff; box-shadow: 0 16px 34px -20px rgba(6, 26, 63, .4); }
.as-step > b{ flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--card-2); color: var(--accent); font: 700 12.5px/1 var(--font); transition: background-color .3s, color .3s; }
.as-step.is-on > b{ background: var(--accent); color: #fff; }
.as-step strong{ display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.as-step small{ display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.as-bar{ position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.as-step.is-on .as-bar{ animation: pill-progress var(--dur, 5s) linear forwards; }
.anat.is-paused .as-step.is-on .as-bar{ animation-play-state: paused; }

/* ---------- text + visual ---------- */
.duo{ display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.duo.rev{ grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.duo.rev .duo-txt{ order: 2; }
.duo-txt{ display: grid; gap: 22px; justify-items: start; }
.duo-txt .h3{ max-width: 540px; color: var(--accent-ink); }
.duo-txt .sub{ max-width: 520px; }
.duo-vis .pv{ height: auto; min-height: 0; aspect-ratio: 640 / 620; border-radius: 32px; }
.duo-vis .pv-toast{ top: auto; bottom: 28px; }

/* ---------- formula builder + Live Test, drawn the way Settings → Pricing Engine draws them ---------- */
.fx-chain{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx-stage{ grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.fb{ position: relative; border: 1px solid #ececef; border-radius: 14px; overflow: hidden; background: #fff; font-family: Geist, var(--font-ui); color: #17171f; }
.fb-head{ display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #f4f4f6; }
.fb-ti{ flex: 1; min-width: 0; display: grid; gap: 2px; }
.fb-ti b{ font-size: 14.5px; font-weight: 600; }
.fb-ti small{ font-size: 12px; line-height: 1.4; color: #9a9aa8; }
.fb-lt{ flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid #d1e2fc; border-radius: 9px; background: #f1f6fe; color: var(--accent); font-size: 12.5px; font-weight: 600; transition: box-shadow .25s var(--ease-btn); }
.fb-lt svg{ width: 14px; height: 14px; }
.fb-lt.is-pressed{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.fb-save{ flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; }
.fb-pal{ padding: 12px 16px 14px; border-bottom: 1px solid #f4f4f6; background: #fafafb; }
.fb-k, .lt-k{ display: block; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #a3a3b0; }
.fb-k{ margin-bottom: 9px; }
.fb-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.fb-chip{ display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--c) 26%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--c) 7%, #fff); color: var(--c); font-size: 11.5px; font-weight: 600; white-space: nowrap; transition: opacity .2s var(--ease-btn); }
.fb-chip em{ font: 700 11.5px/1 var(--font-mono); font-style: normal; }
.fb-chip.taken{ border-color: #ececef; background: #fff; color: #c2c2cc; opacity: .45; }
.fb-chip.is-lifted{ opacity: .3; }
.fb-ghost{ position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; box-shadow: 0 16px 30px -12px rgba(6, 26, 63, .5); }
.fb-body{ padding: 10px 14px 12px; }
.fb-pipe{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }   /* a long label never widens the rows past the card */
.fb-row{ display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid #ececef; border-radius: 11px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 31, .03); transition: opacity .35s var(--ease), background-color .35s var(--ease); }
.fb-row.is-off{ opacity: .5; background: #fbfbfc; }
.fb-grip{ flex: none; display: grid; place-items: center; width: 14px; color: #c2c2cc; }
.fb-grip svg{ width: 8px; height: 13px; }
.fb-bar{ flex: none; width: 3px; height: 28px; border-radius: 3px; background: var(--c); }
.fb-n{ flex: none; width: 16px; text-align: center; font: 600 13px/1 var(--font-mono); color: #c8c8d0; }
.fb-t{ flex: 1; min-width: 0; display: grid; gap: 2px; }
.fb-t b{ display: flex; align-items: center; flex-wrap: wrap; gap: 2px 7px; font-size: 13px; font-weight: 600; }
.fb-t b em{ flex: none; height: 17px; padding: 0 6px; border-radius: 5px; background: color-mix(in srgb, var(--c) 9%, #fff); color: var(--c); font: 700 9px/17px var(--font); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.fb-t small{ font-size: 11.5px; color: #a3a3b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-cfg, .fb-x{ flex: none; display: grid; place-items: center; color: #b8b8c2; }
.fb-cfg svg{ width: 14px; height: 14px; }
.fb-x svg{ width: 12px; height: 12px; }
.fb-sw, .rc-sw{ flex: none; position: relative; width: 32px; height: 18px; border-radius: 9px; background: #e4e4e9; transition: background-color .25s var(--ease-btn); }
.fb-sw i, .rc-sw i{ position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .25s var(--ease); }
.fb-sw.on, .rc-sw.on{ background: var(--accent); }
.fb-sw.on i, .rc-sw.on i{ transform: translateX(14px); }
.fb-drop{ display: grid; place-items: center; height: 32px; margin-top: 6px; border: 2px dashed transparent; border-radius: 11px; color: #c4c4cc; font-size: 11px; transition: border-color .2s var(--ease-btn), background-color .2s var(--ease-btn), color .2s var(--ease-btn); }
.fb-drop.is-hot{ border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: #f1f6fe; color: var(--accent); }
.fb .pv-cursor, .rc .pv-cursor{ z-index: 6; }
/* the Live Test card fills its row; the breakdown takes what is left and scrolls inside it */
.fx-test{ align-content: stretch; grid-template-rows: auto minmax(0, 1fr); }
.lt{ display: flex; flex-direction: column; gap: 12px; font-family: Geist, var(--font-ui); color: #17171f; }
.lt-head{ display: flex; align-items: center; gap: 10px; }
.lt-ic{ flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #f1f6fe; color: var(--accent); }
.lt-ic svg{ width: 17px; height: 17px; }
.lt-head b{ display: block; font-size: 15px; font-weight: 600; }
.lt-head small{ display: block; font-size: 12px; color: #9a9aa8; }
.lt-in{ display: flex; flex-wrap: wrap; gap: 6px; }
.lt-in span{ display: grid; gap: 2px; padding: 6px 10px; border: 1px solid #ececef; border-radius: 9px; font-size: 12.5px; font-weight: 500; }
.lt-in small{ font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8b8b98; }
.lt-out{ flex: 1 1 0; min-height: 440px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid #ececef; border-radius: 12px; overflow: hidden; }
.lt-out .lt-k{ padding: 10px 14px; border-bottom: 1px solid #f4f4f6; background: #fafafb; }
.lt-steps{ display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; overflow-y: auto; scrollbar-width: none; }
.lt-steps::-webkit-scrollbar{ display: none; }
.lt-steps:empty::before{ content: "Press Live Test to run a sample move through the formula"; margin: auto; padding: 0 24px; text-align: center; font-size: 12.5px; color: #b0b0bb; }
.lt-step{ flex: none; display: flex; gap: 9px; padding: 9px 10px; border: 1px solid #f1f1f4; border-radius: 9px; }
.lt-step > i{ flex: none; width: 3px; border-radius: 3px; background: var(--c); }
.lt-step > div{ flex: 1; min-width: 0; display: grid; gap: 2px; }
.lt-h{ margin: 0 0 3px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lt-h b{ font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #3c3c48; }
.lt-h em{ flex: none; font: 800 12px/1 var(--font-mono); font-style: normal; color: var(--c); }
.lt-step code{ display: block; font: 400 10.5px/1.45 var(--font-mono); color: #6b6b78; overflow-wrap: anywhere; }
.lt-run{ margin: 5px 0 0; padding-top: 5px; display: flex; justify-content: space-between; border-top: 1px solid #f1f1f4; font-size: 10.5px; color: #a3a3b0; }
.lt-run b{ font: 700 11px/1 var(--font-mono); color: #3c3c48; }
.lt-total{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; background: #17171f; }
.lt-total > div{ min-width: 0; display: grid; gap: 3px; }
.lt-total span{ font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8b8b98; }
.lt-total small{ font-size: 11px; line-height: 1.35; color: #8b8b98; }
.lt-total b{ flex: none; font: 700 22px/1 var(--font-mono); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- tariffs: the rate list, the rate calendar and the booking form (Settings → Pricing) ---------- */
.tx-chain{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tx-row{ display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 12px; }
.tr, .rc, .bf{ font-family: Geist, var(--font-ui); color: #17171f; }
.tr{ display: grid; gap: 12px; }
.tr-head, .rc-head{ display: flex; align-items: flex-start; gap: 14px; }
.tr-head > div, .rc-head > div{ flex: 1; min-width: 0; display: grid; gap: 2px; }
.tr-head b, .rc-head b{ font-size: 14.5px; font-weight: 600; }
.tr-head small, .rc-head small{ font-size: 12px; line-height: 1.4; color: #9a9aa8; }
.tr-add{ flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; }
.tr-add svg{ width: 13px; height: 13px; }
.tr-list{ display: grid; gap: 8px; }
.tr-row{ display: flex; align-items: center; gap: 20px; min-height: 50px; padding: 7px 16px; border: 1px solid #ececef; border-radius: 12px; background: #fff; transition: box-shadow .35s var(--ease), border-color .35s var(--ease); }
.tr-row.is-default{ border-color: rgba(var(--rc), .25); background: rgba(var(--rc), .05); }
.tr-row.is-hot{ border-color: transparent; box-shadow: 0 0 0 2px rgb(var(--rc)), 0 14px 28px -16px rgba(var(--rc), .7); }
.tr-pill{ flex: none; display: inline-flex; align-items: center; gap: 7px; min-width: 112px; height: 28px; padding: 0 11px; border-radius: 8px; background: rgba(var(--rc), .08); color: rgb(var(--rc)); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tr-pill i{ width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--rc)); }
.tr-pill svg{ width: 12px; height: 12px; }
.tr-cols{ flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: #8b8b98; white-space: nowrap; }
.tr-cols b{ font: 600 12.5px/1 var(--font-mono); color: #17171f; }
.tr-act{ flex: none; display: flex; font-size: 12px; font-weight: 600; color: #5b5b68; }
.tr-act span{ padding: 6px 9px; }
.tr-act .def{ color: #9a9aa8; }
.tr-act .del{ color: #c0454b; }
.rc{ position: relative; display: grid; gap: 12px; }
.rc-colors{ flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: #5b5b68; white-space: nowrap; }
.rc-bar{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 10px 0; border-top: 1px solid #f4f4f6; border-bottom: 1px solid #f4f4f6; }
.rc-nav{ display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #e4e4e9; border-radius: 8px; color: #5b5b68; font-size: 15px; line-height: 1; }
.rc-bar > b{ min-width: 118px; text-align: center; font-size: 13.5px; font-weight: 600; }
.rc-today{ font-size: 12.5px; font-weight: 600; color: var(--accent); }
.rc-legend{ margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 11px; }
.rc-legend span{ display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: #6b6b78; white-space: nowrap; }
.rc-legend i{ width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--rc)); }
/* the rate picker opens under the toolbar once a day is selected; here it lies over the top of
   the months instead of pushing them down, so the page under the demo never jumps */
.rc-body{ position: relative; }
.rc-pick{
  position: absolute; z-index: 3; left: 0; right: 0; top: -4px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 9px 12px;
  border: 1px solid #d1e2fc; border-radius: 10px; background: #f1f6fe; box-shadow: 0 16px 30px -18px rgba(6, 26, 63, .4);
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .25s var(--ease-btn), transform .35s var(--ease);
}
.rc.picking .rc-pick{ opacity: 1; transform: none; }
.rc-pick > b{ font: 600 12.5px/1 var(--font-mono); color: var(--accent); }
.rc-btns{ display: flex; flex-wrap: wrap; gap: 6px; }
.rc-btn{ display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid rgba(var(--rc), .32); border-radius: 8px; background: rgba(var(--rc), .08); color: rgb(var(--rc)); font-size: 12px; font-weight: 600; white-space: nowrap; }
.rc-btn i{ width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--rc)); }
.rc-btn small{ font-size: 11px; opacity: .55; }
.rc-clear{ display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid #e4e4e9; border-radius: 8px; background: #fff; color: #5b5b68; font-size: 11.5px; }
.rc-desel{ margin-left: auto; font-size: 12px; font-weight: 600; color: #8b8b98; }
.rc-months{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rc-m > b{ display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.rc-dow, .rc-days{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.rc-dow{ margin-bottom: 4px; }
.rc-dow i{ font-style: normal; text-align: center; font-size: 10px; font-weight: 600; color: #b0b0bb; }
.rc-d{ position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 7px; font-size: 11.5px; font-weight: 500; color: #3c3c48; transition: background-color .3s var(--ease-btn), box-shadow .3s var(--ease-btn); }
.rc-d.has{ background: rgba(var(--rc), .1); }
.rc-d.has::after{ content: ""; position: absolute; bottom: 3px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgb(var(--rc)); }
.rc-d.past{ opacity: .45; }
.rc-d.today{ color: var(--accent); font-weight: 800; }
.rc-d.sel{ background: #e8f1fe; box-shadow: inset 0 0 0 2px var(--accent); }
/* the admin's success toast, over the top of the months where the picker was */
.rc-toast{
  position: absolute; left: 50%; top: 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 12px;
  background: #fff; box-shadow: 0 18px 40px -16px rgba(6, 26, 63, .45), 0 0 0 1px rgba(6, 26, 63, .06); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, -8px); transition: opacity .3s var(--ease-btn), transform .45s var(--ease);
}
.rc-toast.on{ opacity: 1; transform: translate(-50%, 0); }
.rc-toast-ic{ flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #e6f5ef; color: #1f7a5c; }
.rc-toast-ic svg{ width: 15px; height: 15px; }
.rc-toast b{ display: block; font-size: 13px; font-weight: 600; }
.rc-toast small{ display: block; font-size: 11.5px; color: #8b8b98; }
.rc-toast small:empty{ display: none; }
/* the customer's booking form, drawn the way booking.php draws its date picker: round days,
   a tint of the day's rate colour, the rate's name on hover and under the month once picked */
.bf{ position: relative; display: grid; gap: 10px; padding: 16px; border: 1px solid #ececef; border-radius: 14px; font-family: var(--font-ui); color: #1e293b; }
.bf-t{ display: flex; align-items: center; gap: 9px; margin-bottom: 2px; font-size: 13.5px; font-weight: 600; color: #334155; }
.bf-t i{ display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #e8f1fe; color: var(--accent); }
.bf-t .ico{ width: 15px; height: 15px; }
.bf-nav{ display: flex; align-items: center; justify-content: space-between; }
.bf-nav b{ font-size: 13.5px; font-weight: 600; }
.bf-nav span{ display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #475569; font-size: 17px; line-height: 1; }
.bf-dow, .bf-grid{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); justify-items: center; }
.bf-dow i{ padding: 2px 0; font-style: normal; font-size: 11px; font-weight: 500; color: #94a3b8; }
.bf-grid{ row-gap: 4px; }
.bf-d{ display: grid; place-items: center; width: 100%; max-width: 34px; aspect-ratio: 1; border-radius: 50%; font-size: 12.5px; transition: background-color .35s var(--ease-btn), color .35s var(--ease-btn); }
.bf-d.off{ color: #d1d5db; }
.bf.colored .bf-d.has:not(.sel){ background: rgba(var(--rc), .16); font-weight: 500; }
.bf-d.sel{ background: var(--accent); color: #fff; font-weight: 600; }
.bf-rate{ display: grid; place-items: center; height: 30px; margin-top: 2px; border-radius: 8px; font-size: 12px; font-weight: 700; opacity: 0; transition: opacity .3s var(--ease-btn); }
.bf-rate.on{ opacity: 1; background: rgba(var(--rc), .12); color: rgb(var(--rc)); }
.bf-tip{
  position: absolute; z-index: 5; left: 0; top: 0; padding: 4px 8px; border-radius: 6px; background: #1e293b; color: #fff;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, -100%); transition: opacity .2s var(--ease-btn);
}
.bf-tip.on{ opacity: 1; }
.bf .pv-cursor{ z-index: 6; }

/* ---------- playground ---------- */
.pg-box{ display: grid; gap: 24px; padding: clamp(18px, 3.4vw, 44px); border-radius: var(--r-box); background: var(--oat); }
.pg-eq{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; }
.eq-chip{ display: grid; gap: 4px; min-width: 96px; padding: 10px 14px 11px; border-radius: 14px; background: #fff; box-shadow: 0 1px 0 rgba(17, 19, 23, .04); }
.eq-chip small{ font: 600 10.5px/1 var(--font); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.eq-chip b{ font: 600 18px/1.1 var(--font-ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eq-total{ background: var(--accent); }
.eq-total small{ color: rgba(255, 255, 255, .75); }
.eq-total b{ color: #fff; font-size: 20px; }
.eq-op{ font: 500 20px/1 var(--font-ui); font-style: normal; color: var(--muted); }
.eq-chip.flash{ animation: eq-flash 1.1s var(--ease); }
@keyframes eq-flash{ 0%{ transform: translateY(-3px); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100%{ transform: none; box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); } }
.pg-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 404px); gap: 20px; align-items: start; }
.pg-ctrls{ display: grid; gap: 24px; padding: clamp(18px, 2.4vw, 28px); border-radius: 26px; background: #fff; }
.pg-field{ display: grid; gap: 11px; min-width: 0; }
.pg-two{ grid-template-columns: auto minmax(0, 1fr); gap: 28px; }
.pg-two > div{ display: grid; gap: 11px; align-content: start; }
.pg-k{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font: 600 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pg-k em{ font: 500 12.5px/1 var(--font-ui); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--accent-600); background: var(--card); padding: 5px 8px; border-radius: 7px; }
.pg-cal{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.pg-day{
  position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 0 9px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--day-bg, #f6f7f9); font-family: var(--font-ui); color: var(--ink); transition: box-shadow .25s var(--ease-btn), background-color .25s var(--ease-btn);
}
.pg-day small{ font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pg-day b{ font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pg-day i{ width: 6px; height: 6px; border-radius: 50%; background: var(--dot, #8b8b98); }
.pg-day:hover{ box-shadow: inset 0 0 0 1.5px rgba(17, 19, 23, .14); }
.pg-day.is-on{ box-shadow: inset 0 0 0 2px var(--accent); }
.pg-legend{ display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.pg-legend span{ display: inline-flex; align-items: center; gap: 6px; }
.pg-legend i{ width: 8px; height: 8px; border-radius: 50%; }
.segs{ display: flex; flex-wrap: wrap; gap: 6px; }
.seg{
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 10px; cursor: pointer; white-space: nowrap;
  background: var(--oat); color: var(--ink); font: 500 14px/1 var(--font); transition: background-color .25s var(--ease-btn), color .25s var(--ease-btn);
}
.seg small{ font: 500 11.5px/1 var(--font-mono); color: var(--muted); transition: color .25s var(--ease-btn); }
.seg:hover{ background: var(--oat-2); }
.seg.on{ background: var(--accent); color: #fff; }
.seg.on small{ color: rgba(255, 255, 255, .78); }
.segs-route .seg{ height: auto; padding: 9px 12px 10px; display: grid; gap: 4px; text-align: left; }
.stepper{ display: inline-flex; align-items: center; height: 40px; border-radius: 12px; background: var(--oat); }
.stepper button{ width: 40px; height: 40px; border: 0; border-radius: 12px; background: none; font: 500 20px/1 var(--font-ui); cursor: pointer; color: var(--ink); }
.stepper button:hover{ background: var(--oat-2); }
.stepper output{ min-width: 40px; text-align: center; font: 600 17px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.pg-out{ position: sticky; top: calc(var(--hdr) + 24px); display: grid; gap: 10px; }
.pg-panel{ position: relative; border-radius: 20px; overflow: hidden; background: #fbfbfc; box-shadow: 0 30px 60px -30px rgba(6, 26, 63, .4), 0 0 0 1px rgba(6, 26, 63, .06); }
.pg-note{ margin: 0; padding: 0 6px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* ---------- from inventory to hours ---------- */
.vol{ display: grid; gap: 14px; }
.vol-chain{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.vol-chain{ counter-reset: vstep; }
.vol-chain li{
  position: relative; display: grid; gap: 4px; padding: 14px 42px 15px 16px; border-radius: 18px; background: var(--oat);
  counter-increment: vstep;
  transition: background-color .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
}
/* the step number: the chain reads as a sequence even when part of it is off screen */
.vol-chain li::after{
  content: counter(vstep); position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(6, 26, 63, .07); color: var(--muted); font: 600 11.5px/1 var(--font);
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
.vol-chain li.is-done::after{ background: var(--accent); color: #fff; }
.vol-chain li.is-on::after{ background: #fff; color: var(--accent); }
.vol-chain li.vol-out.is-on::after, .vol-chain li.vol-out.is-done::after{ background: #fff; color: var(--navy); }
/* step lists that scroll sideways on narrow screens fade out on the right while more steps
   wait there (hub.js toggles .has-more and slides the playing step into view) */
.vol-chain.has-more, .anat-steps.has-more, .mf-steps.has-more, .ct-steps.has-more, .jr-steps.has-more{
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}
.vol-chain li b{ font: 600 21px/1.1 var(--font-ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vol-chain li span{ font-size: 13.5px; line-height: 1.3; color: var(--muted); transition: color .45s var(--ease); }
.vol-chain li.is-done{ background: var(--card); }
.vol-chain li.is-on{ background: var(--accent); color: #fff; transform: translateY(-2px); }
.vol-chain li.is-on span{ color: rgba(255, 255, 255, .8); }
.vol-chain li.vol-out.is-on, .vol-chain li.vol-out.is-done{ background: var(--navy); color: #fff; }
.vol-chain li.vol-out.is-on span, .vol-chain li.vol-out.is-done span{ color: rgba(255, 255, 255, .72); }
/* the stage under the chain: the job's item list, the volume it adds up to and the crew
   that calls for, how fast they work, the hours */
.vol-stage{ display: grid; gap: 12px; padding: clamp(12px, 2vw, 22px); border-radius: 30px; background: linear-gradient(180deg, var(--pv1), var(--pv2)); }
.vs-top{ display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 12px; }
.vs-row{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.vs-card{
  /* minmax(0, 1fr): a card never grows to fit a long strip of room cards or category chips */
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; padding: 20px 22px 22px; border-radius: 22px; background: #fff;
  box-shadow: 0 20px 40px -32px rgba(6, 26, 63, .45);
  transition: box-shadow .45s var(--ease), opacity .45s var(--ease);
}
.vs-card.is-on{ box-shadow: 0 0 0 2px var(--accent), 0 26px 50px -30px color-mix(in srgb, var(--accent) 60%, transparent); }
.vs-card.is-wait{ opacity: .45; }
.vs-k{ font: 600 11.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: color .3s var(--ease-btn); }
.vs-card.is-on .vs-k{ color: var(--accent); }
.vs-sub{ margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.vs-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.vs-head .vs-sub{ margin-top: 7px; }
.vs-total, .vs-big{ margin: 0; display: flex; align-items: baseline; gap: 6px; }
.vs-total b, .vs-big b{ font: 600 34px/1 var(--font-ui); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.vs-total small, .vs-big small{ font-size: 15px; color: var(--muted); }
/* the job's Items tab, drawn the way the admin draws it (items-picker.js): room cards with
   their counts, Pieces · Volume, the picker with categories, and catalog items with photos */
.vi{ position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; font-family: Geist, var(--font-ui); color: #17171f; }
.vi-top{ display: flex; align-items: center; gap: 14px; }
.vi-rooms{ flex: 1; min-width: 0; display: flex; gap: 8px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.vi-room{ flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 9px; border: 1px solid #ececef; border-radius: 10px; background: #fff; transition: border-color .25s var(--ease-btn), background-color .25s var(--ease-btn), transform .5s var(--ease); }
.vi-room i{ display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #f2f2f5; color: #8b8b98; transition: background-color .25s var(--ease-btn), color .25s var(--ease-btn); }
.vi-room svg{ width: 17px; height: 17px; }
.vi-room b{ display: block; font-size: 13px; font-weight: 600; color: #3a3a44; white-space: nowrap; }
.vi-room small{ display: block; margin-top: 1px; font-size: 11px; color: #9a9aa8; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vi-room.on{ border-color: #bcd5fb; background: #f1f6fe; }
.vi-room.on i{ background: var(--accent); color: #fff; }
.vi-room.on b{ color: #17171f; }
.vi-stats{ flex: none; display: flex; align-items: center; gap: 16px; }
.vi-stats span{ display: grid; justify-items: end; gap: 3px; }
.vi-stats b{ font: 700 15px/1 'Geist Mono', var(--font-mono); font-variant-numeric: tabular-nums; }
.vi-stats small{ font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #a3a3b0; }
.vi-stats i{ width: 1px; height: 24px; background: #ececef; }
.vi-picker{ border: 1px solid #dfdfe6; border-radius: 12px; overflow: hidden; background: #fff; }
.vi-bar{ display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid #f1f1f4; background: #fbfbfc; }
.vi-ric{ flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #e8f1fe; color: var(--accent); }
.vi-ric svg{ width: 16px; height: 16px; }
.vi-cur{ min-width: 0; display: grid; gap: 1px; }
.vi-cur b{ font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vi-cur small{ font-size: 11.5px; color: #9a9aa8; font-variant-numeric: tabular-nums; }
.vi-search{ flex: none; display: flex; align-items: center; gap: 9px; width: 210px; height: 34px; margin-left: auto; padding: 0 12px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #ececef; color: #a3a3b0; font-size: 13px; }
.vi-search svg{ width: 15px; height: 15px; }
.vi-plus{ flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #1f9d57; color: #fff; }
.vi-plus svg{ width: 16px; height: 16px; }
.vi-cats{ display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #f1f1f4; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
.vi-cats i{ flex: none; height: 26px; padding: 0 11px; border: 1px solid #e4e4e9; border-radius: 7px; color: #5b5b68; font: 500 12px/24px Geist, var(--font-ui); font-style: normal; white-space: nowrap; }
.vi-cats i.on{ border-color: var(--accent); background: #e8f1fe; color: var(--accent); }
.vi-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 56px; gap: 4px 14px; height: calc(5 * 56px + 4 * 4px + 20px); padding: 10px 12px; overflow: hidden; }
.vi-item{ display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 10px; border-radius: 10px; transition: background-color .3s var(--ease-btn); }
.vi-item.sel{ background: #f1f6fe; }
.vi-item img{ flex: none; width: 40px; height: 40px; border-radius: 9px; object-fit: contain; background: #f2f2f5; }
.vi-t{ min-width: 0; display: grid; gap: 2px; }
.vi-item b{ font-size: 13px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vi-item small{ font-size: 11.5px; color: #9a9aa8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vi-q{ flex: none; margin-left: auto; display: flex; align-items: center; gap: 2px; height: 30px; padding: 0 3px; border: 1px solid #d1e2fc; border-radius: 8px; color: var(--accent); }
.vi-q svg{ width: 14px; height: 14px; }
.vi-q u{ display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; text-decoration: none; }
.vi-q em{ min-width: 20px; text-align: center; font: 600 13px/1 'Geist Mono', var(--font-mono); font-style: normal; color: #17171f; }
.vi-q:not(.has){ width: 30px; padding: 0; justify-content: center; }
.vi-q:not(.has) em, .vi-q:not(.has) .vi-minus{ display: none; }
.vi-q.has{ background: #f1f6fe; }
.vi .pv-cursor{ z-index: 6; }
/* the load: rooms stacked into one volume, a scale to 3,000 ft³, and the crew for each band */
.vl{ display: grid; grid-template-columns: 38px minmax(0, 1fr) 76px; gap: 8px; height: 340px; }
.vl-scale{ position: relative; }
.vl-scale i{ position: absolute; right: 0; bottom: var(--y); transform: translateY(50%); font: 500 10.5px/1 var(--font-mono); font-style: normal; color: var(--muted); }
.vl-col{ position: relative; border-radius: 14px; background: var(--oat); overflow: hidden; }
.vl-layers{ position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column-reverse; }
.vl-layer{ flex: none; height: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; overflow: hidden; white-space: nowrap; background: var(--bg); color: #fff; font-size: 11.5px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); transition: height .45s var(--ease); }
.vl-layer.is-light{ color: var(--accent-ink); }
.vl-layer > *{ transition: opacity .25s var(--ease-btn); }
.vl-layer.is-thin > *{ opacity: 0; }
.vl-layer b{ font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.vl-layer em{ font: 500 10.5px/1 var(--font-mono); font-style: normal; opacity: .85; }
.vl-lines i{ position: absolute; left: 0; right: 0; bottom: var(--y); border-top: 1px dashed rgba(6, 26, 63, .2); }
.vl-ladder{ display: flex; flex-direction: column-reverse; border-radius: 12px; overflow: hidden; }
.vl-ladder span{ flex: none; height: var(--h); display: grid; place-items: center; border-top: 2px solid #fff; background: var(--oat); color: var(--muted); font: 600 12px/1 var(--font); transition: background-color .35s var(--ease-btn), color .35s var(--ease-btn); }
.vl-ladder span:last-child{ border-top: 0; }
.vl-ladder span.lit{ background: var(--card-2); color: var(--accent-ink); }
.vl-ladder span.on{ background: var(--accent); color: #fff; }
.vl-crew{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vl-note{ padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; }
/* the crew: one figure per mover */
.vs-movers{ display: grid; grid-template-columns: repeat(8, 28px); gap: 5px; }
.vs-movers i{ display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--oat); color: #c9c6bd; transition: background-color .35s var(--ease-btn), color .35s var(--ease-btn); }
.vs-movers i.on{ background: var(--accent); color: #fff; }
.vs-movers .ico{ width: 15px; height: 15px; stroke-width: 2; }
.vl-crew .vs-big b{ font-size: 30px; }
/* crew speed: the matrix row for eight movers, as bars */
.vs-bars{ list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.vs-bars li{ display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr) 34px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); transition: color .3s var(--ease-btn), opacity .3s var(--ease-btn); }
.vs-bars li span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-bars i{ position: relative; height: 8px; border-radius: 4px; background: var(--oat); overflow: hidden; }
.vs-bars i::after{
  content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); border-radius: 4px; background: color-mix(in srgb, var(--accent) 30%, #fff);
  transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease), background-color .3s var(--ease-btn);
}
.vs-bars li:nth-child(2) i::after{ transition-delay: .05s, 0s; }
.vs-bars li:nth-child(3) i::after{ transition-delay: .1s, 0s; }
.vs-bars li:nth-child(4) i::after{ transition-delay: .15s, 0s; }
.vs-bars li:nth-child(5) i::after{ transition-delay: .2s, 0s; }
.vs-bars li:nth-child(6) i::after{ transition-delay: .25s, 0s; }
.vs-bars li:nth-child(7) i::after{ transition-delay: .3s, 0s; }
.vs-bars.grown i::after{ transform: none; }
.vs-bars em{ font: 500 12px/1 var(--font-mono); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.vs-bars li.on{ color: var(--accent-ink); font-weight: 600; }
.vs-bars li.on i::after{ background: var(--accent); }
.vs-bars.picking li:not(.on){ opacity: .5; }
/* hours: the division, and where it lands on a day */
.vs-eq{ margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 500 13px/1 var(--font-mono); color: var(--ink-2); }
.vs-eq span{ padding: 7px 9px; border-radius: 8px; background: var(--oat); }
.vs-eq i{ font-style: normal; color: var(--muted); }
.vs-time{ position: relative; height: 14px; margin-top: 26px; border-radius: 7px; background: var(--oat); }
.vs-time-fill{ position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 7px; background: color-mix(in srgb, var(--accent) 28%, #fff); }
.vs-band{ position: absolute; left: 80%; width: 10%; top: -5px; bottom: -5px; border-radius: 6px; background: var(--accent); box-shadow: 0 8px 16px -8px var(--accent); opacity: 0; transform: scaleY(.6); transition: opacity .35s var(--ease), transform .5s var(--ease); }
.vs-band em{ position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); font: 600 12.5px/1 var(--font); font-style: normal; color: var(--accent); white-space: nowrap; }
.vs-hours.is-landed .vs-band{ opacity: 1; transform: none; }
.vs-hrs{ display: flex; justify-content: space-between; margin-top: 8px; font: 500 11px/1 var(--font-mono); color: var(--muted); }
.vs-hrs i{ font-style: normal; }

/* ---------- dark box (AI photo inventory) ---------- */
.darkbox{
  position: relative; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 4vw, 64px); align-items: center;
  padding: clamp(28px, 4.5vw, 64px); border-radius: var(--r-box); color: #fff; overflow: hidden;
  background: radial-gradient(55% 70% at 88% 8%, #15418f 0%, rgba(21, 65, 143, 0) 62%), var(--navy);
}
.dk-txt{ display: grid; gap: 22px; justify-items: start; }
.dk-txt .sub{ color: rgba(255, 255, 255, .78); }
.eyebrow-light b{ background: #fff; color: var(--navy); }
.eyebrow-light i{ background: #fff; }
.tone-light{ color: var(--sky); }
.ticks-light li{ color: rgba(255, 255, 255, .76); }
.ticks-light li b{ color: #fff; }
.ticks-light li::before{ background: rgba(255, 255, 255, .12); }
.ticks-light li::after{ background: var(--sky); }
/* the photo keeps its 4:3 (the boxes are drawn in its pixels) and sets the height;
   the panel stands beside it, exactly as tall */
.ai{ position: relative; padding-right: 262px; }
.ai-photo{ position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55); background: #2a2f3a; }
.ai-photo img{ width: 100%; height: 100%; object-fit: cover; }
.ai-boxes{ position: absolute; inset: 0; width: 100%; height: 100%; }
.ai-boxes rect{ fill: rgba(143, 195, 255, .1); stroke: #8fc3ff; stroke-width: 5; rx: 16; opacity: 0; transition: opacity .4s var(--ease); }
.ai-boxes rect.on{ opacity: 1; }
.ai-tag{
  position: absolute; z-index: 2; display: inline-flex; gap: 6px; padding: 5px 8px; border-radius: 7px 7px 7px 2px; white-space: nowrap; pointer-events: none;
  background: #8fc3ff; color: #061a3f; font: 600 11.5px/1 var(--font-ui); transform: translateY(calc(-100% - 4px)); opacity: 0; transition: opacity .35s var(--ease);
}
.ai-tag.on{ opacity: 1; }
.ai-tag.end{ border-radius: 7px 7px 2px 7px; }
.ai-tag.in-end{ border-radius: 7px 2px 7px 7px; transform: translate(-6px, 8px); }
/* on a phone-sized photo the labels would cover it: the boxes stay, the list below names them */
.ai-photo{ container-type: inline-size; }
@container (max-width: 400px){ .ai-tag{ display: none; } }
.ai-tag em{ font-style: normal; font-family: var(--font-mono); opacity: .75; }
.ai-scan{ position: absolute; left: 0; right: 0; top: 0; height: 34%; pointer-events: none; opacity: 0; border-bottom: 2px solid #8fc3ff; background: linear-gradient(180deg, rgba(143, 195, 255, 0), rgba(143, 195, 255, .28)); }
.ai-panel{
  position: absolute; top: 0; right: 0; bottom: 0; width: 248px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px;
  padding: 14px; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55);
}
.ai-head{ display: flex; align-items: center; gap: 10px; }
.ai-head b{ display: block; font-size: 15px; font-weight: 600; }
.ai-head small{ display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.ai-badge{ flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--blue); color: #fff; }
.ai-badge .ico{ width: 16px; height: 16px; }
/* one slot per item from the start, sized to the space the photo leaves: the list never grows */
.ai-list{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(var(--n, 8), minmax(20px, 30px)); gap: 3px; align-content: start; min-height: 0; overflow: hidden; }
.ai-list li{ display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 0; padding: 0 10px; border-radius: 8px; background: #f3f6fb; font-size: 13px; line-height: 1.2; white-space: nowrap; }
.ai-list li b{ font: 500 11.5px/1 var(--font-mono); color: var(--blue-600); }
.ai-list li.room{ background: #e6f6ec; color: #16794a; font-weight: 600; }
.ai-foot{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.ai-foot span{ font: 600 15px/1 var(--font-ui); }
.ai-approve{ height: 34px; padding: 6px 12px; font-size: 13px; pointer-events: none; }
.ai-approve.done{ background: #16a34a; }

/* ---------- two feature cards ---------- */
.cards2{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fcard{ display: grid; grid-template-rows: auto 1fr; gap: 26px; padding: clamp(22px, 3vw, 40px); border-radius: 36px; background: var(--oat); overflow: hidden; }
.fcard-blue{ background: var(--card); }
.fc-txt{ display: grid; gap: 12px; max-width: 540px; }
.fc-k{ display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.fc-k .ico{ width: 16px; height: 16px; }
.fc-title{ margin: 0; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; font-weight: 500; letter-spacing: -.03em; text-wrap: balance; color: var(--accent-ink); }
.fc-txt p{ margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.fc-vis{ position: relative; display: grid; align-content: center; gap: 14px; min-height: 340px; padding: 20px; border-radius: 24px; background: #fff; overflow: hidden; }

/* route */
.route-map{ width: 100%; height: auto; border-radius: 16px; background: #f2f5f9; }
.route-map .road{ fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; }
.route-map .road-s{ fill: none; stroke: #e3e8ef; stroke-width: 2; }
.route-map .lake{ fill: #d5e6fb; }
.route-map .leg{ fill: none; stroke: #8a96a8; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; }
.route-map .leg-move{ fill: none; stroke: var(--accent); stroke-width: 4.5; stroke-linecap: round; }
.route-map .pin circle{ stroke: #fff; stroke-width: 3; }
.route-map .pin text{ font: 700 11px var(--font-ui); fill: #fff; text-anchor: middle; dominant-baseline: central; }
.route-map .lbl{ font: 600 11.5px var(--font-ui); fill: #2a2e35; }
.route-map .lbl-s{ font: 500 10.5px var(--font-ui); fill: #6b6f78; }
.route-map .lbl-bg{ fill: #fff; }
.route-map .truck{ fill: var(--navy); }
.route-bill{ display: grid; gap: 6px; }
.rb-row{ display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font-size: 13.5px; }
.rb-row > span{ color: var(--muted); }
.rb-row b{ font: 500 13.5px/1.35 var(--font-ui); color: var(--ink-2); }
.rb-row em{ font-style: normal; }
.rb-row strong{ font: 600 15px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.rb-ruler{ position: relative; height: 20px; margin: 2px 0 6px 94px; border-radius: 6px; background: repeating-linear-gradient(90deg, #d9dfe8 0 1px, #f3f5f8 1px 12.5%); overflow: hidden; }
.rb-ruler i{ position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: color-mix(in srgb, var(--accent) 35%, transparent); transition: width 1.4s var(--ease), background-color .3s; }
.rb-ruler i.snap{ background: var(--accent); }

/* multi-day */
.days{ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; }
.day{ display: grid; gap: 8px; align-content: start; justify-items: start; padding: 16px; border-radius: 18px; background: #f5f6f8; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.day.on, .night.on, .days-total.on{ opacity: 1; transform: none; }
.day-k{ font: 600 10.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.day > b{ font: 600 18px/1.1 var(--font-ui); letter-spacing: -.01em; }
.day-line{ display: flex; justify-content: space-between; gap: 8px; width: 100%; font: 400 13.5px/1.3 var(--font-ui); color: var(--ink-2); }
.day-sum{ font: 600 24px/1 var(--font-ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.night{ display: grid; justify-items: center; align-content: center; gap: 6px; width: 104px; padding: 8px; text-align: center; font-size: 12.5px; line-height: 1.3; color: var(--muted); opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.night .ico{ width: 24px; height: 24px; color: var(--accent); }
.night strong{ font: 600 16px/1 var(--font-ui); color: var(--ink); }
.days-total{ grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-radius: 16px; background: var(--navy); color: #fff; font-size: 14px; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.days-total strong{ font: 600 24px/1 var(--font-ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.px-red{ background: #fdecec; color: #b42318; }
.px-violet{ background: #f1ecfe; color: #6d3fd9; }

/* customer phone */
.phone-vis{ place-items: center; background: linear-gradient(180deg, #fff 0%, #f5f9ff 100%); }
.phone{ position: relative; width: 268px; padding: 12px 14px 18px; border-radius: 36px; background: #fff; box-shadow: 0 0 0 8px #111317, 0 46px 70px -30px rgba(6, 26, 63, .55); }
/* the status bar as on an iPhone: the island in the middle, the time and the icons centred in the ears beside it */
.ph-top{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 0 12px; font: 600 12px/1 var(--font-ui); }
.ph-top span{ justify-self: center; }
.ph-top i{ width: 64px; height: 18px; border-radius: 10px; background: #111317; }
.ph-sig{ justify-self: center; display: flex; align-items: center; gap: 4px; color: var(--ink); }
.ph-sig svg{ display: block; }
.ph-body{ display: grid; gap: 8px; }
.ph-k{ margin-top: 6px; font: 600 10px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ph-total{ font: 600 27px/1.05 var(--font-ui); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ph-meta{ font-size: 12.5px; color: var(--ink-2); }
.ph-note{ margin: 4px 0 0; padding: 9px 10px; border-radius: 10px; background: var(--card); font-size: 11.5px; line-height: 1.4; color: var(--accent-ink); }
.ph-opt{ display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(17, 19, 23, .1); transition: box-shadow .3s var(--ease), background-color .3s var(--ease); }
.ph-opt i{ flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px #c9ced8; transition: box-shadow .3s var(--ease); }
.ph-opt span{ flex: 1; display: grid; gap: 1px; min-width: 0; }
.ph-opt b{ font-size: 13px; font-weight: 600; }
.ph-opt small{ font-size: 11px; color: var(--muted); }
.ph-opt em{ font: 600 12px/1 var(--font-ui); font-style: normal; white-space: nowrap; }
.ph-opt.is-on{ background: var(--card); box-shadow: inset 0 0 0 2px var(--accent); }
.ph-opt.is-on i{ box-shadow: inset 0 0 0 5px var(--accent); }
.phone .pv-tap{ z-index: 3; background: rgba(24, 111, 242, .18); box-shadow: 0 0 0 2px rgba(24, 111, 242, .55); }

/* estimate → final invoice */
.act-bills{ display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.bill{ display: grid; gap: 8px; padding: 16px; border-radius: 18px; background: #f5f6f8; font-family: var(--font-ui); }
.bill-k{ font: 600 10.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bill-row{ display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-2); }
.bill-row em{ font-style: normal; }
.bill-row b{ font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bill-tot{ display: flex; justify-content: space-between; gap: 8px; padding-top: 9px; border-top: 1px dashed #d3d8e0; font-size: 13.5px; font-weight: 600; }
.bill-tot b{ font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bill-final{ background: var(--card); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent); }
.act-timer{ display: grid; justify-items: center; gap: 4px; width: 78px; text-align: center; }
.act-timer .ico{ width: 22px; height: 22px; color: var(--accent); }
.act-timer b{ font: 600 17px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.act-timer small{ font-size: 11.5px; color: var(--muted); }
.act-range{ display: flex; align-items: center; gap: 10px; margin-top: 4px; font: 500 12.5px/1 var(--font-ui); color: var(--muted); }
.ar-track{ position: relative; flex: 1; height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--card-2), color-mix(in srgb, var(--accent) 40%, #fff)); }
.ar-track i{ position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px #fff, 0 4px 10px rgba(6, 26, 63, .3); transition: left 1.3s var(--ease); }

/* ---------- hero that hosts a home-page composite (portal demo) ---------- */
/* the customer-portal hero: the portal itself, bigger, with nothing behind it */
.hh-comp{ position: relative; max-width: 1240px; margin: clamp(36px, 4.5vw, 56px) auto 0; aspect-ratio: 1440 / 774; }
.hh-comp .comp-blob{ display: none; }
.hh-comp .comp-win{ left: 7%; width: 86%; }
.pv-tall{ aspect-ratio: 600 / 720 !important; }

/* ---------- inventory: rooms and items in the portal, the estimate in both views ----------
   A fixed canvas (1240×740, or 640×1384 when narrow), scaled to the stage by hub.js inventoryDemo().
   The portal's Inventory tab is drawn from client-portal.php #tabItems and js/portal.js (itemCardHtml,
   invRenderRooms); its indigo is the site's product blue. */
.ivs{
  position: relative; aspect-ratio: 1240 / 740; border-radius: 40px; overflow: hidden;
  --b: #186ff2; --b-soft: #e8f1fe; --b-tint: #f4f8ff; --b-line: #c9dcfb;
  background: radial-gradient(60% 55% at 20% 0%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, var(--pv1), var(--pv2));
}
.ivs::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 22%, transparent) 1.1px, transparent 1.4px); background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 45%, #000 30%, transparent 100%); mask-image: radial-gradient(75% 70% at 50% 45%, #000 30%, transparent 100%);
}
.ivs.narrow{ aspect-ratio: 640 / 1384; border-radius: 28px; }
.ivs-canvas{ position: absolute; left: 0; top: 0; width: 1240px; height: 740px; transform-origin: 0 0; font-family: var(--font-ui); color: #17171f; }
.ivs.narrow .ivs-canvas{ width: 640px; height: 1384px; }
.ivs .pv-step{ z-index: 6; }
.ivs .pv-cursor, .ivs .pv-ripple{ z-index: 7; }
.ivs svg{ display: block; }

/* the portal window */
.ivs-win{
  position: absolute; left: 24px; top: 78px; z-index: 2; width: 800px; height: 640px; display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 50px 90px -46px rgba(46, 18, 6, .45), 0 0 0 1px rgba(23, 23, 31, .07);
}
.ivs.narrow .ivs-win{ left: 20px; top: 70px; width: 600px; height: 684px; }
.ivs-chrome{ flex: none; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #f6f7f9; border-bottom: 1px solid #ececef; }
.ivs-chrome i{ width: 9px; height: 9px; border-radius: 50%; background: #dcdde3; }
.ivs-chrome span{ margin: 0 auto; padding: 4px 12px; border-radius: 7px; background: #fff; font: 500 10.5px/1 var(--font-ui); color: #8b8b98; box-shadow: inset 0 0 0 1px #ececef; }
/* the portal itself: its Items tab (assets/ui/portal-items), drawn 1000px wide and scaled to the window by hub.js */
.ivp-ui{ position: relative; flex: 1; min-height: 0; overflow: hidden; background: #f6f6f4; }
/* a fresh row or card settles in (the storage and long-distance stages use it too) */
@keyframes ivp-in{ from{ opacity: 0; transform: scale(.85); } }

/* the two estimates: the customer's Overview card, the office's system estimate */
.ivs-card{ position: absolute; z-index: 2; box-sizing: border-box; border-radius: 16px; background: #fff; box-shadow: 0 40px 80px -46px rgba(46, 18, 6, .45), 0 0 0 1px rgba(23, 23, 31, .07); }
.ivs-cust{ left: 852px; top: 78px; width: 364px; padding: 0; }
.ivs-office{ left: 852px; top: 446px; width: 364px; padding: 24px 16px 14px; }
.ivs.narrow .ivs-cust{ left: 140px; top: 834px; width: 360px; }
.ivs.narrow .ivs-office{ left: 20px; top: 1172px; width: 600px; }
.ivs-card::after{ content: ""; position: absolute; inset: -5px; border-radius: 21px; pointer-events: none; opacity: 0; }
.ivs-card.ping::after{ animation: ivs-ping 1s var(--ease); }
@keyframes ivs-ping{
  0%{ opacity: 1; box-shadow: 0 0 0 2px var(--accent), 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); }
  100%{ opacity: 0; box-shadow: 0 0 0 2px var(--accent), 0 0 0 22px color-mix(in srgb, var(--accent) 0%, transparent); }
}
/* over its card's edge — above the screen mounted in it (a scaled screen paints over earlier positioned siblings) */
.ivs-tag{
  position: absolute; z-index: 3; left: 16px; top: -14px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px;
  border-radius: 99px; background: var(--c); color: #fff; font: 600 12px/1 var(--font); white-space: nowrap;
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--c) 80%, transparent); transition: background-color .35s var(--ease);
}
.ivs-tag .ico{ width: 14px; height: 14px; }
.ivs-cust .ivs-tag{ --c: #6b4de6; }
.ivs-office .ivs-tag{ --c: #186ff2; }
.ivs-tag.synced{ background: #16a34a; }
.ivs-delta{
  position: absolute; z-index: 3; padding: 4px 8px; border-radius: 99px; background: var(--accent); color: #fff;
  font: 700 11px/1 var(--font-mono); font-style: normal; white-space: nowrap; opacity: 0; pointer-events: none;
}
.ivs-delta.on{ animation: ivs-delta 2.4s var(--ease) forwards; }
@keyframes ivs-delta{ 0%{ opacity: 0; transform: translateY(6px); } 14%, 78%{ opacity: 1; transform: none; } 100%{ opacity: 0; transform: translateY(-6px); } }
/* her quote card (assets/ui/portal-quote), scaled to the card */
.ivc-ui{ display: block; border-radius: 16px; overflow: hidden; }
.ivs-cust > .ivs-delta{ right: 18px; top: 34px; }
.ivo-head{ display: flex; align-items: center; margin-bottom: 11px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: #9a9aa8; }
.ivo-head em{ margin-left: auto; font-style: normal; font-size: 11.5px; letter-spacing: 0; color: #5b5b68; }
.ivo-labor{ margin-bottom: 10px; border-radius: 11px; overflow: hidden; }
.ivo-lh{ display: flex; align-items: center; gap: 7px; padding: 8px 11px; background: #f6ecd4; color: #8a6420; font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.ivo-lh i{ display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #e6cf9e; }
.ivo-lh svg{ width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.ivo-lh b, .ivo-lr b{ margin-left: auto; font: 600 12.5px/1 var(--font-mono); letter-spacing: 0; border-radius: 4px; }
.ivo-lr{ display: flex; align-items: center; padding: 9px 11px; background: #fdf8ec; font-size: 12px; color: #3c3c48; }
.ivo-total{ position: relative; display: flex; align-items: center; padding: 13px; border-radius: 11px; background: #eef4fe; }
.ivo-total > span{ font-size: 14px; font-weight: 600; }
.ivo-total b{ margin-left: auto; font: 700 18px/1.2 var(--font-mono); letter-spacing: -.02em; color: #186ff2; border-radius: 6px; }
.ivo-total .ivs-delta{ right: 10px; top: -12px; }
.ivo-meta{ margin-top: 9px; text-align: center; font-size: 11px; color: #9a9aa8; }

/* the move's volume, a note on the demo: each item's ft³ flies in from its card as it's added */
.ivs-vol{
  position: absolute; z-index: 6; right: 416px; top: 22px; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 6px;
  border-radius: 999px; background: #fff; box-shadow: 0 14px 30px -16px rgba(6, 26, 63, .35), 0 0 0 1px rgba(6, 26, 63, .05);
}
.ivs.narrow .ivs-vol{ right: auto; left: 50%; top: 768px; translate: -50% 0; }
.ivs-vol-ic{ flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; }
.ivs-vol-ic .ico{ width: 16px; height: 16px; }
.ivs-vol-t{ display: flex; align-items: center; gap: 10px; }
/* caps sit lower in their box than the mono digits do in theirs: lift them a pixel onto the digits' centre */
.ivs-vol-t small{ font: 600 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); translate: 0 -1px; }
.ivs-vol-t b{ display: inline-block; font: 700 18px/1 var(--font-mono); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ivs-vol-t b.bump{ animation: ivs-vol-bump .32s var(--ease); }
@keyframes ivs-vol-bump{ 40%{ color: var(--accent); transform: scale(1.08); } }
.ivs-fly{
  position: absolute; z-index: 8; left: 0; top: 0; padding: 5px 9px; border-radius: 99px; background: var(--accent); color: #fff;
  font: 700 12px/1 var(--font-mono); white-space: nowrap; pointer-events: none;
  box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--accent) 75%, transparent);
}

/* a save in flight: an arc from the volume to each estimate */
.ivs-beams{ position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ivs-beam{ fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 55%, transparent)); }
.ivs-beam-dot{ fill: #fff; stroke: var(--accent); stroke-width: 3; }
.ivs-beam-end{ fill: none; stroke: var(--accent); stroke-width: 2; }

/* ---------- messages: the job's chat, texts and automations reach the customer ----------
   A fixed canvas (1240×820, or 640×1504 when narrow), scaled to the stage by hub.js messagesDemo().
   Drawn from the job's Chat tab (one box sends by Chat or by SMS), the portal's Chat tab (client-portal.php
   #tabMessages, js/portal.js renderMessages) and Settings → Automations; the portal's indigo is our blue.
   Each screen's label sits above it, clear of the screen. Beams run in the lanes between the screens,
   so a message never crosses one on its way. */
.cx{
  position: relative; aspect-ratio: 1240 / 820; border-radius: 40px; overflow: hidden;
  background: radial-gradient(60% 55% at 20% 0%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, var(--pv1), var(--pv2));
}
.cx::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 22%, transparent) 1.1px, transparent 1.4px); background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 45%, #000 30%, transparent 100%); mask-image: radial-gradient(75% 70% at 50% 45%, #000 30%, transparent 100%);
}
.cx.narrow{ aspect-ratio: 640 / 1504; border-radius: 28px; }
.cx-canvas{ position: absolute; left: 0; top: 0; width: 1240px; height: 820px; transform-origin: 0 0; font-family: var(--font-ui); color: #17171f; }
.cx.narrow .cx-canvas{ width: 640px; height: 1504px; }
.cx .pv-step{ z-index: 6; left: 24px; top: 18px; }
.cx.narrow .pv-step{ left: 20px; top: 16px; }
.cx .pv-cursor, .cx .pv-ripple{ z-index: 7; }
.cx svg{ display: block; }
.cx + .minis{ margin-top: 14px; }

.cx-card{ position: absolute; z-index: 2; box-sizing: border-box; border-radius: 16px; background: #fff; box-shadow: 0 40px 80px -46px rgba(46, 18, 6, .45), 0 0 0 1px rgba(23, 23, 31, .07); }
.cx-in{ position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: inherit; overflow: hidden; }
.cx-office{ left: 24px; top: 108px; width: 430px; height: 400px; }
.cx-portal{ left: 478px; top: 108px; width: 430px; height: 400px; }
.cx-auto{ left: 24px; top: 566px; width: 884px; height: 232px; display: flex; gap: 18px; padding: 16px; }
.cx.narrow .cx-office{ left: 20px; top: 108px; width: 600px; height: 380px; }
.cx.narrow .cx-portal{ left: 20px; top: 568px; width: 334px; height: 534px; }
.cx.narrow .cx-auto{ left: 20px; top: 1182px; width: 600px; height: 300px; flex-direction: column; gap: 14px; }
.cx-card::after, .cx-phone::after{ content: ""; position: absolute; inset: -5px; border-radius: 21px; pointer-events: none; opacity: 0; }
.cx-phone::after{ border-radius: 51px; }
.cx-card.ping::after, .cx-phone.ping::after{ animation: ivs-ping 1s var(--ease); }
/* a screen's label: above it, 10px clear, never on it */
.cx-tag{
  position: absolute; z-index: 3; left: 0; top: -38px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px;
  border-radius: 99px; background: var(--c); color: #fff; font: 600 12px/1 var(--font); white-space: nowrap;
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--c) 80%, transparent); transition: background-color .35s var(--ease);
}
.cx-tag .ico{ width: 14px; height: 14px; }
.cx-office .cx-tag, .cx-auto .cx-tag{ --c: #186ff2; }
.cx-portal .cx-tag, .cx-phone .cx-tag{ --c: #6b4de6; }
.cx-tag.synced{ background: #16a34a; }

/* the office: the job's chat — its thread, then one box that sends by Chat or by SMS */
.cxo-head{ flex: none; display: flex; align-items: center; gap: 11px; height: 60px; padding: 4px 16px 0; border-bottom: 1px solid #f0f0f3; }
.cxo-av{ flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #e8edf6; color: #4d6ba0; font: 600 12px/1 var(--font-ui); font-style: normal; }
.cxo-who{ flex: 1; min-width: 0; }
.cxo-who b{ display: block; font-size: 14px; font-weight: 600; }
.cxo-who small{ display: block; margin-top: 3px; font-size: 11.5px; color: #9a9aa8; white-space: nowrap; }
.cxo-status{ flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 7px; background: #e8f1fe; color: #186ff2; font-size: 11.5px; font-weight: 600; }
.cxo-thread{ flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 11px; padding: 12px 16px 10px; overflow: hidden; }
.cx-msg{ flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; max-width: 86%; }
.cx-msg.me{ align-self: flex-end; align-items: flex-end; }
.cx-meta{ display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #b0b0bb; white-space: nowrap; }
.cx-meta b{ font-size: 11.5px; font-weight: 600; color: #4b4b58; }
.cx-badge{ display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: 5px; background: #eaf1fb; color: #2563a8; font-size: 9.5px; font-weight: 600; letter-spacing: .03em; }
.cx-badge.sms{ background: #fbf3e2; color: #976611; }
.cx-bub{ padding: 9px 12px; border-radius: 12px; background: #f2f2f5; font-size: 12.5px; line-height: 1.45; text-wrap: pretty; }
.cx-msg.me .cx-bub{ background: #186ff2; color: #fff; }
.cxo-comp{ flex: none; margin: 0 12px 12px; padding: 9px 10px 9px 11px; border: 1px solid #e4e4e9; border-radius: 12px; background: #fff; }
.cxo-input{ min-height: 37px; padding: 1px 2px 8px; font-size: 12.5px; line-height: 1.45; color: #17171f; }
.cxo-input .ph{ color: #a3a3b0; }
.cxo-input .caret{ display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; vertical-align: -2px; background: #186ff2; animation: cx-caret 1s steps(1) infinite; }
@keyframes cx-caret{ 50%{ opacity: 0; } }
.cxo-row{ display: flex; align-items: center; gap: 8px; }
.cxo-photo{ display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; box-sizing: border-box; border: 1px solid #e4e4e9; border-radius: 8px; color: #6b6b78; font-size: 12px; font-weight: 500; }
.cxo-via{ margin-left: auto; display: flex; align-items: center; gap: 2px; height: 30px; padding: 2px; box-sizing: border-box; border: 1px solid #e4e4e9; border-radius: 9px; background: #fbfbfc; }
.cxo-via small{ padding: 0 6px 0 4px; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: #b0b0bb; }
.cxo-via span{ display: flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px; color: #8b8b98; font-size: 11.5px; font-weight: 500; transition: background-color .25s, color .25s; }
.cxo-via span.on{ background: #e8f1fe; color: #186ff2; font-weight: 600; }
.cxo-send{ display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 9px; background: #186ff2; color: #fff; font-size: 12.5px; font-weight: 600; box-shadow: 0 1px 2px rgba(24, 111, 242, .25); }
.cxo-photo svg, .cxo-send svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* the customer: her move page's Chat tab */
/* her side: the portal's messenger (assets/ui/portal-messenger), fitted to the card by hub.js */
.cxp-msgr{ position: absolute; inset: 0; }

/* the office: rules in Settings → Automations, each with its trigger, channel and template */
.cxa-side{ flex: none; width: 196px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 10px 2px 0 4px; }
.cxa-ic{ display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--card); color: var(--accent); }
.cxa-ic .ico{ width: 18px; height: 18px; }
.cxa-side b{ margin-top: 4px; font: 600 17px/1.15 var(--font); letter-spacing: -.01em; }
.cxa-side p{ margin: 0; font-size: 12.5px; line-height: 1.45; color: #8b8b98; }
.cx.narrow .cxa-side{ width: auto; flex-direction: row; align-items: center; gap: 10px; padding: 6px 2px 0; }
.cx.narrow .cxa-side b{ margin: 0; }
.cxa-rules{ flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cxa-rule{ position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 12px 11px; box-sizing: border-box; border: 1px solid #ececef; border-radius: 13px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 31, .03); transition: border-color .4s var(--ease), background-color .4s var(--ease); }
.cxa-rule::after{ content: ""; position: absolute; inset: -5px; border-radius: 18px; pointer-events: none; opacity: 0; }
.cxa-rule.fire{ border-color: color-mix(in srgb, var(--accent) 40%, #ececef); background: #fffaf7; }
.cxa-rule.fire::after{ animation: ivs-ping 1s var(--ease); }
/* channel · steps · switch, as a row of the app's list; the trigger gets its own line below the name */
.cxa-top{ display: flex; align-items: center; gap: 8px; }
.cxa-top .cxa-kind{ margin-left: auto; }
.cxa-ch{ display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; }
.cxa-ch.mail{ background: #e8f1fe; color: #186ff2; }
.cxa-ch.sms{ background: #e6f5ef; color: #1f7a5c; }
.cxa-ch svg{ width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cxa-tog{ position: relative; width: 34px; height: 19px; border-radius: 10px; background: #1f7a5c; }
.cxa-tog::after{ content: ""; position: absolute; top: 2px; left: 17px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.cxa-name{ font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx.narrow .cxa-name{ font-size: 12px; }   /* "Reminder · the day before" whole in a 181px card */
.cxa-chips{ display: flex; gap: 5px; }
.cxa-trig, .cxa-kind{ flex: none; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; white-space: nowrap; }
.cxa-trig{ background: #fdeef0; color: #c0454b; font-weight: 600; }
.cxa-trig svg{ width: 9px; height: 9px; fill: currentColor; }
.cxa-kind{ background: #f4f4f6; color: #5b5b68; font-weight: 550; }
/* three lines at most — clamped on an inner span: a clamped flex item still paints its fourth line into its padding */
.cxa-tpl{ flex: none; margin: 0; padding: 7px 9px; border: 1px solid #f0f0f3; border-radius: 8px; background: #fbfbfc; font: 10.5px/1.5 var(--font-mono); color: #5b5b68; }
.cxa-tpl > span{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cxa-tpl em{ font-style: normal; color: #186ff2; }
.cxa-sent{ margin-top: auto; display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: #1f7a5c; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.cxa-sent.on{ opacity: 1; transform: none; }
.cxa-sent svg{ width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* the customer: her phone, locked — texts and emails arrive as notifications, newest on top */
.cx-phone{
  position: absolute; z-index: 2; left: 944px; top: 108px; width: 272px; height: 590px; box-sizing: border-box; padding: 8px; border-radius: 46px;
  background: #141519; box-shadow: 0 50px 90px -40px rgba(46, 18, 6, .6), 0 0 0 1px rgba(23, 23, 31, .12), inset 0 0 0 1.5px #34353b;
}
.cx.narrow .cx-phone{ left: 374px; top: 568px; width: 246px; height: 534px; padding: 7px; border-radius: 42px; }
.cx-phone .cx-tag{ left: 50%; translate: -50% 0; }   /* a device: its label centred over it */
.cxf-screen{
  position: relative; height: 100%; border-radius: 38px; overflow: hidden; color: #fff;
  background: radial-gradient(90% 55% at 15% 8%, rgba(255, 214, 190, .75), rgba(255, 214, 190, 0) 70%), radial-gradient(80% 50% at 100% 62%, rgba(255, 140, 96, .55), rgba(255, 140, 96, 0) 70%), linear-gradient(172deg, #ec9473 0%, #dd5f3d 34%, #b23a58 66%, #4a2462 100%);
}
.cx.narrow .cxf-screen{ border-radius: 35px; }
.cxf-island{ position: absolute; z-index: 2; left: 50%; top: 10px; width: 78px; height: 23px; margin-left: -39px; border-radius: 12px; background: #000; }
.cxf-status{ position: absolute; right: 22px; top: 16px; display: flex; align-items: center; gap: 5px; }
.cxf-status svg{ height: 10px; width: auto; fill: #fff; }
.cxf-lock{ position: absolute; left: 50%; top: 46px; width: 13px; height: 13px; margin-left: -6.5px; fill: #fff; }
.cxf-date, .cxf-clock{ position: absolute; left: 0; right: 0; text-align: center; text-shadow: 0 1px 12px rgba(80, 20, 40, .18); }
.cxf-date{ top: 68px; font: 600 13px/1 var(--font-ui); color: rgba(255, 255, 255, .92); }
.cxf-clock{ top: 86px; font: 600 72px/1 var(--font); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.cx.narrow .cxf-date{ top: 62px; font-size: 12px; }
.cx.narrow .cxf-clock{ top: 78px; font-size: 62px; }
.cxf-notes{ position: absolute; left: 9px; right: 9px; top: 182px; display: flex; flex-direction: column; gap: 7px; }
.cx.narrow .cxf-notes{ left: 8px; right: 8px; top: 158px; gap: 6px; }
.cxf-note{
  flex: none; display: flex; gap: 9px; padding: 10px 11px 10px 10px; border-radius: 18px; color: #17171f;
  background: rgba(255, 255, 255, .87); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 10px 24px -14px rgba(40, 10, 40, .45);
}
.cxf-app{ flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; }
.cxf-app.sms{ background: linear-gradient(180deg, #67e57a, #1fbf45); }
.cxf-app.mail{ background: linear-gradient(180deg, #52b4ff, #1270f0); }
.cxf-app svg{ width: 18px; height: 18px; }
.cxf-txt{ flex: 1; min-width: 0; }
.cxf-t{ display: flex; align-items: baseline; gap: 6px; }
.cxf-t b{ flex: 1; min-width: 0; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cxf-t em{ flex: none; font-size: 10.5px; font-style: normal; color: rgba(23, 23, 31, .5); }
.cxf-s{ margin-top: 2px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cxf-b{ margin-top: 2px; font-size: 11.5px; line-height: 1.38; color: rgba(23, 23, 31, .8); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cxf-note.mail .cxf-b{ -webkit-line-clamp: 2; }
.cxf-btns{ position: absolute; left: 24px; right: 24px; bottom: 26px; display: flex; justify-content: space-between; }
.cx.narrow .cxf-btns{ left: 20px; right: 20px; bottom: 22px; }
.cxf-btns span{ display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(30, 8, 30, .26); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cxf-btns svg{ width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cxf-home{ position: absolute; left: 50%; bottom: 8px; width: 96px; height: 4px; margin-left: -48px; border-radius: 4px; background: rgba(255, 255, 255, .85); }

/* a message on its way: a beam along the lanes, labelled with the channel it travels by */
.cx-beams{ position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cx-beam{ fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 55%, transparent)); }
.cx-beam-dot{ fill: #fff; stroke: var(--accent); stroke-width: 3; }
.cx-beam-end{ fill: none; stroke: var(--accent); stroke-width: 2; }
.cx-pill{
  position: absolute; z-index: 6; left: 0; top: 0; translate: -50% -50%; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 9px;
  border-radius: 99px; background: #fff; color: var(--accent-ink); font: 600 12.5px/1 var(--font); white-space: nowrap; pointer-events: none;
  box-shadow: 0 10px 22px -12px rgba(46, 18, 6, .5), 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent);
}
.cx-pill .ico{ width: 14px; height: 14px; color: var(--accent); }

/* ---------- the customer's journey (Settings → Emails) ---------- */
.jr{ display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.jr-steps{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jr-steps li{ display: grid; gap: 3px; padding: 11px 16px 12px; border-radius: 16px; background: var(--oat); transition: background-color .45s var(--ease), color .45s var(--ease), transform .45s var(--ease); }
.jr-steps li b{ font: 600 15px/1.15 var(--font); letter-spacing: -.01em; }
.jr-steps li span{ font-size: 12.5px; line-height: 1.3; color: var(--muted); transition: color .45s var(--ease); }
.jr-steps li.is-done{ background: var(--card); }
.jr-steps li.is-on{ background: var(--accent); color: #fff; transform: translateX(6px); }
.jr-steps li.is-on span{ color: rgba(255, 255, 255, .82); }
.jr-win{ position: relative; aspect-ratio: 920 / 880; border-radius: 30px; overflow: hidden; background: linear-gradient(180deg, var(--pv1), var(--pv2)); }
.jr-cam{ position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform 1.2s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.jr-page, .rv-page{ position: absolute; left: 0; top: 0; width: 1440px; }

/* ---------- sign-in: a code by text, or a link by email ----------
   The portal's sign-in card as client-portal.php #authGate draws it (js/portal.js renderAuthGate, pvMountOtp):
   the customer never types their phone or email — they pick one, and it goes to the one on the request. */
/* two classes: the phone rule for .fc-vis (padding, no min-height) must not shrink the room her move page opens into */
.fc-vis.sgn{ display: block; min-height: 448px; padding: 0; background: #f6f6f8; }
.sgn .pv-cursor{ z-index: 6; }
.sgn .pv-ripple{ z-index: 5; }
.sgn-ways{ position: absolute; z-index: 1; left: 0; right: 0; top: 16px; display: flex; justify-content: center; gap: 8px; padding: 0 12px; }
.sgn-ways span{
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 4px; border-radius: 99px; background: #fff; color: var(--muted);
  font: 600 12.5px/1 var(--font); white-space: nowrap; box-shadow: 0 0 0 1px rgba(23, 23, 31, .07); transition: color .35s var(--ease), box-shadow .35s var(--ease);
}
.sgn-ways b{ display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #ececf0; color: #8b8b98; font-size: 11px; transition: background-color .35s var(--ease), color .35s var(--ease); }
.sgn-ways span.on{ color: var(--accent-ink); box-shadow: 0 0 0 1.5px var(--accent), 0 8px 18px -10px color-mix(in srgb, var(--accent) 60%, transparent); }
.sgn-ways span.on b{ background: var(--accent); color: #fff; }
/* the card is the portal's own (assets/ui/portal-signin, drawn 420px wide and scaled to this width) */
.sgn-card{
  position: relative; box-sizing: border-box; width: min(344px, calc(100% - 32px)); margin: 70px auto 28px; border-radius: 16px;
  box-shadow: 0 30px 60px -36px rgba(46, 18, 6, .45); overflow: hidden;
}
.sgn-ui{ display: block; }
/* signed in: her move page itself — the real portal Overview at 1440px, scaled into a window that opens out of
   the card (a growing clip) and scrolls down her page */
.sgn-port{
  position: absolute; z-index: 3; left: 16px; right: 16px; top: 58px; bottom: 16px; display: flex; flex-direction: column; visibility: hidden;
  opacity: 0;   /* a screen's shadow host resets visibility (all: initial) — opacity hides the page inside too */
  border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -30px rgba(46, 18, 6, .45), 0 0 0 1px rgba(23, 23, 31, .07);
}
.sgn-port.on{ visibility: visible; opacity: 1; }
.sgn-port-bar{ flex: none; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #f6f7f9; border-bottom: 1px solid #ececef; }
.sgn-port-bar i{ width: 8px; height: 8px; border-radius: 50%; background: #dcdde3; }
.sgn-port-bar span{ margin: 0 auto; padding: 3px 12px; border-radius: 7px; background: #fff; font: 500 10px/1 var(--font-ui); color: #8b8b98; white-space: nowrap; box-shadow: inset 0 0 0 1px #ececef; }
.sgn-port-view{ position: relative; flex: 1; min-height: 0; overflow: hidden; background: #f6f6f8; }
.sgn-port-cam{ position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.sgn-port-page{ position: absolute; left: 0; top: 0; width: 1440px; }
/* her phone's banner: the code by text, or the email with the link (opened in place) */
.sgn-note{
  position: absolute; z-index: 4; left: 50%; top: 56px; width: min(360px, calc(100% - 24px)); translate: -50% 0;
  opacity: 0; transform: translateY(-14px) scale(.97); transition: opacity .35s var(--ease), transform .45s var(--ease); pointer-events: none;
}
.sgn-note.on{ opacity: 1; transform: none; }
.sgn-note .cxf-note{ background: rgba(255, 255, 255, .97); box-shadow: 0 22px 44px -18px rgba(30, 20, 40, .45), 0 0 0 1px rgba(23, 23, 31, .06); }
.sgn-mail{ padding: 14px 16px 16px; border-radius: 18px; background: #fff; box-shadow: 0 26px 50px -18px rgba(30, 20, 40, .5), 0 0 0 1px rgba(23, 23, 31, .06); font-family: var(--font-ui); color: #17171f; }
.sgn-mail-h{ display: flex; align-items: center; gap: 9px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #f0f0f3; }
.sgn-mail-h b{ display: block; font-size: 12.5px; font-weight: 600; }
.sgn-mail-h small{ display: block; margin-top: 1px; font-size: 11px; color: #9a9aa8; }
.sgn-mail > b{ display: block; font-size: 13.5px; font-weight: 600; }
.sgn-mail p{ margin: 6px 0 12px; font-size: 12.5px; line-height: 1.5; color: #5b5b68; }
.sgn-mail-go{ display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 10px; background: #186ff2; color: #fff; font-size: 13px; font-weight: 600; }

/* ---------- the office side: what the portal writes into the job ----------
   The job's tabs and its Activity History column (admin.tpl.php drawer, js/admin/drawer.js renderActivity: its icons
   and colours), filled with the entries the portal's own endpoints log. "by Customer" is drawn as a chip. */
.ofa{ display: grid; align-content: center; min-height: 448px; padding: 22px; background: #f6f6f8; }
.ofa-win{ position: relative; display: flex; flex-direction: column; height: 404px; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(46, 18, 6, .4), 0 0 0 1px rgba(23, 23, 31, .06); font-family: var(--font-ui); color: #17171f; }
.ofa-head{ flex: none; display: flex; align-items: center; gap: 11px; padding: 14px 16px 12px; }
.ofa-av{ flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #e8edf6; color: #4d6ba0; font: 600 12.5px/1 var(--font-ui); font-style: normal; }
.ofa-who{ flex: 1; min-width: 0; }
.ofa-who b{ display: block; font-size: 14.5px; font-weight: 600; }
.ofa-who small{ display: block; margin-top: 2px; font-size: 11.5px; color: #9a9aa8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ofa-st{ --sb: #e6f2f0; --sc: #1f7a5c; flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 7px; background: var(--sb); color: var(--sc); font-size: 11.5px; font-weight: 600; white-space: nowrap; transition: background-color .45s var(--ease), color .45s var(--ease); }
.ofa-st[data-st="info"]{ --sb: #fbeaf1; --sc: #9d3b6b; }
.ofa-st[data-st="conf"]{ --sb: #e8f1fe; --sc: #186ff2; }
.ofa-st.bump, .ofa-n.bump{ animation: ofa-bump .5s var(--ease); }
@keyframes ofa-bump{ 40%{ transform: scale(1.12); } }
.ofa-tabs{ flex: none; display: flex; gap: 18px; height: 38px; padding: 0 16px; border-bottom: 1px solid #ececef; overflow: hidden; }
.ofa-tabs > span{ position: relative; flex: none; display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: #8b8b98; transition: color .3s; }
.ofa-tabs > span.on{ color: #17171f; font-weight: 600; }
.ofa-tabs > span.on::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: #17171f; }
.ofa-tabs > span.hot{ color: #186ff2; }
.ofa-n{ display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 99px; background: #dbeafe; color: #2563eb; font: 700 10px/1 var(--font-ui); font-style: normal; }
.ofa-n.pay{ display: none; background: #fef3c7; color: #b45309; }
.ofa-n.pay.on{ display: inline-flex; }
.ofa-body{ flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 16px 16px 0; }
.ofa-k{ flex: none; margin-bottom: 14px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #a3a3b0; }
.ofa-list{ flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent); mask-image: linear-gradient(#000 calc(100% - 44px), transparent); }
.ofa-e{ display: flex; gap: 11px; }
.ofa-rail{ flex: none; display: flex; flex-direction: column; align-items: center; }
.ofa-rail::after{ content: ""; flex: 1; width: 1.5px; margin: 4px 0; background: #eeeef1; }
.ofa-ic{ display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--c); }
.ofa-ic svg{ width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ofa-tx{ min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 1px 0 14px; }
.ofa-a{ font-size: 13px; line-height: 1.35; }
.ofa-a b{ font-weight: 600; }
.ofa-a em{ display: inline-flex; align-items: center; height: 17px; margin-left: 6px; padding: 0 6px; border-radius: 5px; background: #f0f0f3; color: #6b6b78; font-size: 10px; font-weight: 600; font-style: normal; vertical-align: 1px; }
.ofa-a em.c{ background: #f1ecfe; color: #6d3fd9; }
.ofa-d{ font-size: 12.5px; line-height: 1.45; color: #6b6b78; }
.ofa-tm{ font-size: 11.5px; color: #b0b0bb; }

/* ---------- Move Day: the board in the hero ---------- */
.board-hero{ position: relative; max-width: 1240px; margin: clamp(36px, 4.5vw, 56px) auto 0; }
.bh-win{ position: relative; aspect-ratio: 1440 / 760; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 40px 90px -40px rgba(6, 26, 63, .45), 0 0 0 1px rgba(6, 26, 63, .06); }
.bh-cam{ position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform 1.15s cubic-bezier(.65, 0, .35, 1); }
.bh-page{ position: absolute; left: 0; top: 0; width: 1440px; height: 900px; }
.board-hero .bh-step{ left: 18px; top: -22px; z-index: 5; }
.board-hero .pv-toast{ top: auto; bottom: 22px; z-index: 5; }

/* ---------- Move Day: one day, three screens ---------- */
.day3{ display: grid; gap: 14px; }
.d3-board, .d3-card{ border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -36px rgba(6, 26, 63, .4), 0 0 0 1px rgba(6, 26, 63, .06); }
.d3-bar{ display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px; border-bottom: 1px solid #eef0f3; font: 600 14px/1 var(--font); }
.d3-bar em{ margin-left: auto; font: 500 12.5px/1 var(--font-ui); font-style: normal; color: var(--muted); }
.d3-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.d3-view{ position: relative; aspect-ratio: 1440 / 500; overflow: hidden; }
.d3-cam, .d3-crew-cam, .cb-board-cam{ position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.d3-page, .cb-board-page{ position: absolute; left: 0; top: 0; width: 1440px; height: 900px; }
.d3-now{ position: absolute; z-index: 6; top: 88px; left: 140px; width: 2px; height: 469px; background: #e5484d; pointer-events: none; }
.d3-now b{ position: absolute; top: 6px; left: 50%; transform: translateX(-50%); padding: 5px 8px; border-radius: 8px; background: #e5484d; color: #fff; font: 600 13px/1 var(--font-ui); white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(229, 72, 77, .6); }
.d3-row{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.d3-crew{ position: relative; aspect-ratio: 372 / 275; overflow: hidden; background: #f4f5f7; }
.d3-crew-page{ position: absolute; left: 0; top: 0; width: 452px; height: 924px; }
.d3-sms{ display: grid; align-content: end; gap: 8px; min-height: 100%; padding: 16px; background: #fbfbfc; }
.d3-card{ display: grid; grid-template-rows: auto 1fr; }
.cb{ justify-self: start; max-width: 92%; padding: 8px 11px; border-radius: 14px 14px 14px 4px; background: #f1f2f5; font-size: 13.5px; line-height: 1.35; color: var(--ink); }
.d3-sms .cb{ max-width: 88%; font-size: 14px; }
.d3-sms small{ justify-self: start; margin: -2px 0 0 4px; font: 500 11px/1 var(--font-ui); color: var(--muted); }
.d3-scrub{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 18px; border-radius: 18px; background: var(--oat); }
.d3-play{ position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; }
.d3-play .ico{ width: 16px; height: 16px; margin-left: 2px; }
.d3-play.is-playing .ico{ display: none; }
.d3-play.is-playing::before, .d3-play.is-playing::after{ content: ""; position: absolute; top: 14px; width: 4px; height: 14px; border-radius: 2px; background: #fff; }
.d3-play.is-playing::before{ left: 15px; }
.d3-play.is-playing::after{ right: 15px; }
.d3-track{ display: grid; gap: 6px; }
.d3-track input{ width: 100%; height: 22px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.d3-track input::-webkit-slider-runnable-track{ height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--accent) var(--p, 0%), #dcdfe5 var(--p, 0%)); }
.d3-track input::-moz-range-track{ height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--accent) var(--p, 0%), #dcdfe5 var(--p, 0%)); }
.d3-track input::-webkit-slider-thumb{ -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--accent), 0 4px 10px rgba(6, 26, 63, .25); }
.d3-track input::-moz-range-thumb{ width: 16px; height: 16px; border: 3px solid var(--accent); border-radius: 50%; background: #fff; }
.d3-ticks{ display: flex; justify-content: space-between; font: 500 11.5px/1 var(--font-ui); color: var(--muted); }
.d3-time{ min-width: 92px; text-align: right; font: 600 17px/1 var(--font-ui); font-variant-numeric: tabular-nums; }

/* ---------- Move Day: calendar → board, schedule ---------- */
.cb-cal{ position: absolute; left: 0; top: 0; width: 1440px; }
.cb-board{ position: absolute; inset: 0; z-index: 2; overflow: hidden; background: #fff; opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.cb-board.on{ opacity: 1; }
.sc-page{ position: absolute; left: 0; top: 0; width: 1560px; height: 860px; }
/* the Schedule tab's states, stacked; the newest fades in over the one under it */
.sc-page > div{ position: absolute; left: 0; top: 0; width: 1560px; height: 860px; opacity: 0; transition: opacity .4s var(--ease); }
.sc-page > div.on{ opacity: 1; }
.sc-page > div:first-child{ opacity: 1; }

/* ---------- Move Day: foreman tools + the job timer ---------- */
.fm{ align-content: center; gap: 8px; }
.fm-row{ display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: #f5f6f8; opacity: .35; transform: translateY(6px); transition: opacity .45s var(--ease), transform .55s var(--ease), background-color .45s var(--ease); }
.fm-row.on{ opacity: 1; transform: none; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.fm-ic{ flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--card); color: var(--accent); }
.fm-ic .ico{ width: 16px; height: 16px; }
.fm-row > span:nth-child(2){ flex: 1; display: grid; gap: 1px; min-width: 0; }
.fm-row b{ font-size: 14px; font-weight: 600; }
.fm-row small{ font-size: 12px; color: var(--muted); }
.fm-row em{ font: 600 14px/1 var(--font-ui); font-style: normal; white-space: nowrap; }
.fm-sign{ display: grid; gap: 4px; padding: 11px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.fm-k{ font: 600 10.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fm-sign svg{ width: 100%; height: 56px; }
.fm-path{ fill: none; stroke: #111317; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fm-done{ font-size: 12px; font-weight: 600; color: #16794a; opacity: 0; transition: opacity .4s var(--ease); }
.fm-sign.on .fm-done{ opacity: 1; }
.hrs{ align-content: center; gap: 12px; }
.hrs-axis{ display: flex; justify-content: space-between; font: 500 12px/1 var(--font-ui); color: var(--muted); }
.hrs-track{ position: relative; height: 46px; border-radius: 12px; background: repeating-linear-gradient(90deg, #e9ecf0 0 1px, transparent 1px 25%), #f7f8fa; }
.hrs-s{ position: absolute; top: 6px; bottom: 6px; left: var(--a); width: calc(var(--b) - var(--a)); border-radius: 9px; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease); }
.hrs-s b{ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #fff; font: 600 12px/1 var(--font-ui); white-space: nowrap; }
.hrs-p{ position: absolute; top: 15px; bottom: 15px; left: var(--a); width: calc(var(--b) - var(--a)); border-radius: 6px; background: repeating-linear-gradient(-45deg, #c9ced8 0 3px, transparent 3px 7px); opacity: 0; transition: opacity .4s var(--ease); }
.hrs.go .hrs-s{ transform: scaleX(1); }
.hrs.go .hrs-s:nth-child(3){ transition-delay: 1.3s; }
.hrs.go .hrs-p{ opacity: 1; transition-delay: 1s; }
.hrs-sum{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hrs-sum div{ display: grid; gap: 5px; padding: 12px; border-radius: 12px; background: #f5f6f8; }
.hrs-sum small{ font-size: 11.5px; color: var(--muted); }
.hrs-sum b{ font: 600 17px/1.1 var(--font-ui); font-variant-numeric: tabular-nums; }

/* ---------- Sales Desk: website form → pipeline (hero) ---------- */
.l2p{ position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 18px; max-width: 1240px; margin: clamp(36px, 4.5vw, 56px) auto 0; align-items: stretch; }
.l2p-site, .l2p-office{ position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 40px 90px -40px rgba(6, 26, 63, .45), 0 0 0 1px rgba(6, 26, 63, .06); }
.l2p-bar{ display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #f3f4f7; border-bottom: 1px solid #e6e8ee; font: 500 12px/1 var(--font-ui); color: var(--muted); flex: none; }
.l2p-bar i{ width: 10px; height: 10px; border-radius: 50%; background: #d8dbe2; }
.l2p-bar span{ display: flex; align-items: center; gap: 6px; margin-left: 8px; }
.l2p-bar .ico{ width: 12px; height: 12px; color: #16794a; }
.qf{ position: relative; display: grid; gap: 11px; padding: 20px 22px 22px; font-family: var(--font-ui); }
.qf-brand{ display: flex; align-items: center; gap: 8px; font: 700 15px/1 var(--font-ui); letter-spacing: -.01em; }
.qf-brand span{ display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #17171f; color: #fff; font-size: 13px; }
.qf-h{ margin: 2px 0; font: 600 21px/1.15 var(--font); letter-spacing: -.02em; }
.qf-row{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.qf-f{ display: grid; gap: 4px; min-height: 52px; padding: 8px 12px 9px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e3e5ea; transition: box-shadow .25s var(--ease); }
.qf-f.focus{ box-shadow: inset 0 0 0 2px var(--accent); }
.qf-f small{ font-size: 11.5px; color: var(--muted); }
.qf-f small em{ margin-left: 6px; font-style: normal; color: #1f7a5c; }
.qf-f b{ min-height: 18px; overflow: hidden; font-size: 14.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.qf-caret{ display: none; }
.qf-days{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.qf-day{ display: grid; justify-items: center; gap: 2px; padding: 5px 0 6px; border-radius: 9px; background: var(--day-bg); font: 600 13px/1.1 var(--font-ui); transition: box-shadow .25s var(--ease); }
.qf-day small{ font-size: 9px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.qf-day i{ width: 5px; height: 5px; border-radius: 50%; background: var(--dot); }
.qf-day.on{ box-shadow: inset 0 0 0 2px var(--accent); background: #fff; }
.qf-btn{ display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border: 0; border-radius: 12px; background: #17171f; color: #fff; font: 600 15px/1 var(--font); pointer-events: none; transition: background-color .3s, opacity .3s; }
.qf-btn .ico{ width: 16px; height: 16px; stroke-width: 2.2; }
.qf-btn.busy{ opacity: .65; }
.qf-result{ display: grid; gap: 3px; padding: 13px 16px; border-radius: 14px; background: var(--card); opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.qf-result.on{ opacity: 1; transform: none; }
.qf-result small{ font: 600 10.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.qf-result b{ font: 600 25px/1.15 var(--font-ui); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.qf-result span{ font-size: 13px; color: var(--ink-2); }
.qf-result p{ margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.l2p-site .pv-cursor{ z-index: 6; }
.l2p-view{ position: relative; flex: 1; min-height: 380px; overflow: hidden; background: #f7f7f9; }
.l2p-cam, .pipe-cam, .ct-cam{ position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform 1.15s cubic-bezier(.65, 0, .35, 1); }
.l2p-page, .pipe-page, .wg-page, .fu-page, .au-page{ position: absolute; left: 0; top: 0; width: 1440px; }
/* ---------- Sales Desk: the chat on the company's website ---------- */
.cs-site{ position: absolute; left: 20px; top: 70px; width: 600px; height: 530px; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -28px rgba(6, 26, 63, .42), 0 0 0 1px rgba(6, 26, 63, .07); }
.cs-page{ position: relative; flex: 1; padding: 18px 22px; background: linear-gradient(180deg, #f5f7fb, #fff 62%); }
.cs-nav{ display: flex; align-items: center; gap: 14px; font: 600 13px/1 var(--font-ui); color: var(--ink); }
.cs-logo{ display: flex; align-items: center; gap: 8px; }
.cs-logo i{ display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #186ff2; color: #fff; font: 600 10px/1 var(--font-ui); font-style: normal; }
.cs-links{ display: flex; gap: 10px; margin-left: auto; }
.cs-links i{ width: 44px; height: 7px; border-radius: 4px; background: #e2e6ed; }
.cs-cta{ padding: 8px 12px; border-radius: 9px; background: #17171f; color: #fff; font-size: 11.5px; }
.cs-hero{ display: grid; gap: 10px; max-width: 270px; margin-top: 46px; }
.cs-hero b{ font: 650 30px/1.05 var(--font); letter-spacing: -.03em; color: var(--ink); }
.cs-hero span{ font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.cs-btns{ display: flex; gap: 8px; margin-top: 4px; }
.cs-btns i{ width: 100px; height: 34px; border-radius: 10px; background: #186ff2; }
.cs-btns i + i{ background: #e6ebf3; }
.cs-tiles{ position: absolute; left: 22px; bottom: 22px; display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; }
.cs-tiles i{ height: 92px; border-radius: 12px; background: linear-gradient(135deg, #edf1f7, #e3e9f2); }
/* the chat in the page's bottom-right corner at 62% — the loader's own geometry: the window 384 × 640, 98px up */
.cs-chat{ position: absolute; right: 0; bottom: 0; width: 500px; height: 760px; transform: scale(.62); transform-origin: 100% 100%; }
.cs-closed{ position: absolute; right: 0; bottom: 0; width: 500px; height: 300px; }
.cs-panel{ position: absolute; right: 24px; bottom: 98px; width: 384px; height: 640px; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(6, 26, 63, .06), 0 30px 70px -28px rgba(6, 26, 63, .45); opacity: 0; transform: translateY(14px) scale(.96); transform-origin: calc(100% - 30px) calc(100% + 40px); transition: opacity .22s ease, transform .32s cubic-bezier(.165, .84, .44, 1); }
.cs-panel.on{ opacity: 1; transform: none; }
.cs-panel > div{ position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.cs-panel > div.on{ opacity: 1; }
/* the office's Messages over the website */
.cs-office{ left: 46px; top: 112px; width: 580px; height: 470px; z-index: 3; opacity: 0; transform: translateX(40px); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.cs-office.on{ opacity: 1; transform: none; }
.cs-office .pv-cam{ transition: transform 1.15s cubic-bezier(.65, 0, .35, 1); }
.cs-msgs, .cs-msgs2{ position: absolute; left: 0; top: 0; width: 1440px; }
.cs-msgs2{ opacity: 0; transition: opacity .45s ease; }
.cs-msgs2.on{ opacity: 1; }
.pv-cs .pv-cursor{ z-index: 6; }

/* a second screen of the same demo, over the first (the builder over the list), faded in */
.au-flow, .wg-builder{ position: absolute; left: 0; top: 0; width: 1440px; opacity: 0; transition: opacity .5s var(--ease); }
.au-flow.on, .wg-builder.on{ opacity: 1; }
.l2p-office .pv-toast{ top: auto; bottom: 18px; }

/* ---------- Sales Desk: pipeline, follow-ups, contracts ---------- */
.pipe{ position: relative; }
.pipe-view{ position: relative; aspect-ratio: 1440 / 700; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 40px 90px -40px rgba(6, 26, 63, .4), 0 0 0 1px rgba(6, 26, 63, .06); }
.pipe-note{
  position: absolute; z-index: 3; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); max-width: 340px; padding: 14px 16px 15px; border-radius: 16px;
  background: #fff; font-size: 15px; line-height: 1.4; box-shadow: 0 24px 50px -24px rgba(6, 26, 63, .5); opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .5s var(--ease);
}
.pipe-note.on{ opacity: 1; transform: none; }
.pipe-note b{ display: block; margin-bottom: 4px; font: 600 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.ct{ display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: center; }
.ct-view{ position: relative; aspect-ratio: 930 / 680; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 40px 90px -40px rgba(6, 26, 63, .4), 0 0 0 1px rgba(6, 26, 63, .06); }
.ct-page{ position: absolute; left: 0; top: 0; width: 1440px; }
.ct-steps{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: ct; }
.ct-steps li{ position: relative; display: grid; gap: 4px; padding: 16px 18px 17px 58px; border-radius: 18px; background: var(--oat); counter-increment: ct; transition: background-color .45s var(--ease), color .45s var(--ease); }
.ct-steps li::before{ content: counter(ct); position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--card-2); color: var(--accent); font: 700 13px/1 var(--font); }
.ct-steps li b{ font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.ct-steps li span{ font-size: 14px; line-height: 1.35; color: var(--ink-2); transition: color .45s var(--ease); }
.ct-steps li.is-done{ background: var(--card); }
.ct-steps li.is-on{ background: var(--accent); color: #fff; }
.ct-steps li.is-on span{ color: rgba(255, 255, 255, .82); }
.ct-steps li.is-on::before{ background: #fff; }

/* ---------- Payments: screens, the money flow, closeout, journal ---------- */
.ph-page{ position: absolute; left: 0; top: 0; width: 1560px; height: 860px; }
/* the Payments tab's states, stacked (billed on the time worked → paid → closed); the newest fades in over the last */
.ph-page > div{ position: absolute; left: 0; top: 0; width: 1560px; height: 860px; opacity: 0; transition: opacity .45s var(--ease); }
.ph-page > div.on, .ph-page > div:first-child{ opacity: 1; }
.db-page{ position: absolute; left: 0; top: 0; width: 1440px; }

/* storage, drawn: the month's revenue, the space in use, who owes, and every account's bill */
.sg{
  position: absolute; left: 20px; top: 84px; z-index: 1; width: 600px; height: 516px; box-sizing: border-box; padding: 20px 20px 18px;
  display: flex; flex-direction: column; gap: 14px; border-radius: 24px; background: #fff; color: var(--ink); font-family: var(--font);
  box-shadow: 0 30px 60px -30px rgba(46, 28, 0, .35), 0 0 0 1px rgba(46, 28, 0, .06);
}
.sg-head{ display: flex; align-items: center; gap: 12px; padding: 0 2px; }
.sg-head > div{ flex: 1; min-width: 0; }
.sg-head b{ display: block; font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
.sg-head small{ display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.sg-new{ flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 11px; border-radius: 10px; background: var(--accent); color: #fff; font: 600 12.5px/1 var(--font-ui); box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.sg-new svg{ width: 14px; height: 14px; }
.sg-kpis{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sg-kpi{ display: flex; flex-direction: column; gap: 5px; padding: 12px 13px; border-radius: 16px; background: var(--pv1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent); transition: box-shadow .4s var(--ease), background-color .4s var(--ease); }
.sg-kpi small{ font: 600 10px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sg-kpi b{ font: 700 22px/1 var(--font-mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sg-kpi em{ font-size: 11.5px; font-style: normal; color: var(--muted); }
.sg-kpi em.ok{ color: #1f7a5c; }
.sg-kpi em.bad{ color: #c2410c; }
.sg-kpi.hot{ background: #fff; box-shadow: inset 0 0 0 1.5px var(--accent); }
.sg-cells{ display: flex; gap: 3px; }
.sg-cells i{ flex: 1; height: 8px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 14%, #fff); }
.sg-cells i.f{ background: var(--accent); }
.sg-cells i.h{ background: linear-gradient(90deg, var(--accent) 10%, color-mix(in srgb, var(--accent) 14%, #fff) 10%); }
.sg-list{ display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.sg-row{ display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 12px 0 10px; border-radius: 15px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: background-color .4s var(--ease), box-shadow .4s var(--ease); }
.sg-row.hot{ background: var(--pv1); box-shadow: inset 0 0 0 1.5px var(--accent); }
.sg-av{ flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font: 700 11.5px/1 var(--font-ui); }
.sg-who{ flex: 1; min-width: 0; }
.sg-who b{ display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-who small{ display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.sg-tag{ padding: 2px 5px; border-radius: 5px; background: #e8f1fe; color: #186ff2; font: 700 9px/1.2 var(--font); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.sg-tag.lt{ background: #f1ecfd; color: #6d28d9; }
.sg-calc{ flex: none; width: 104px; padding: 5px 0; border-radius: 8px; text-align: center; font: 500 11px/1 var(--font-mono); color: var(--ink-2); background: #f4f5f7; transition: background-color .35s var(--ease), color .35s var(--ease); }
.sg-row.calc .sg-calc{ background: var(--accent); color: #fff; }
.sg-amt{ flex: none; width: 78px; text-align: right; font: 600 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.sg-amt small{ font: 500 10.5px/1 var(--font); color: var(--muted); }
.sg-st{ flex: none; width: 90px; padding: 6px 0; border-radius: 8px; text-align: center; font: 600 11px/1 var(--font); background: #f2f3f5; color: var(--muted); transition: background-color .4s var(--ease), color .4s var(--ease); }
.sg-st.ok{ background: #e3f5ec; color: #1f7a5c; }
.sg-st.bad{ background: #fdeaea; color: #c2410c; }
/* a past-due status turns into its own remind button, then into "sent" */
.sg-st.btn{ background: var(--ink); color: #fff; }
.sg-st.sent{ background: #1f7a5c; color: #fff; }

/* ways to pay: the deposit and every method with its fee or discount (Settings → Payments, drawn) */
.pw{
  position: absolute; left: 20px; top: 84px; z-index: 1; width: 600px; height: 516px; box-sizing: border-box; padding: 20px 20px 18px;
  display: flex; flex-direction: column; gap: 10px; border-radius: 24px; background: #fff; color: var(--ink); font-family: var(--font);
  box-shadow: 0 30px 60px -30px rgba(46, 28, 0, .35), 0 0 0 1px rgba(46, 28, 0, .06);
}
.pw-head{ display: flex; align-items: center; gap: 12px; padding: 0 2px; }
.pw-ic{ flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--card); color: var(--accent); }
.pw-ic svg{ width: 21px; height: 21px; }
.pw-head b{ display: block; font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
.pw-head small{ display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.pw-dep{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 15px; border-radius: 16px; background: var(--pv1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent); }
.pw-dep b{ display: block; font-size: 14px; font-weight: 600; }
.pw-dep small{ display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.pw-dep small b{ display: inline; font: 600 12px/1 var(--font-mono); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.pw-seg{ position: relative; flex: none; display: flex; padding: 3px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.pw-seg i{ position: relative; z-index: 1; width: 44px; padding: 7px 0; font: 600 12px/1 var(--font-ui); font-style: normal; text-align: center; color: var(--muted); transition: color .35s var(--ease); }
.pw-seg i.on{ color: #fff; }
.pw-seg u{ position: absolute; left: 3px; top: 3px; bottom: 3px; width: 44px; border-radius: 8px; background: var(--accent); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--accent) 70%, transparent); transition: transform .55s var(--ease); }
.pw-list{ display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }   /* six methods in the height five had */
.pw-row{ display: flex; align-items: center; gap: 13px; padding: 5px 14px 5px 5px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: background-color .4s var(--ease), box-shadow .4s var(--ease); }
.pw-row.hot{ background: var(--pv1); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pw-logo{ flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; }
.pw-logo svg{ width: 22px; height: 22px; }
.pw-t{ flex: 1; min-width: 0; }
.pw-t b{ display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.pw-t small{ display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.pw-adj{
  flex: none; min-width: 78px; padding: 7px 10px; border-radius: 10px; box-sizing: border-box; text-align: center;
  font: 600 12px/1 var(--font-mono); background: #f2f3f5; color: var(--muted); transition: background-color .4s var(--ease), color .4s var(--ease);
}
.pw-adj.up{ background: #fff0e0; color: #b45309; }
.pw-adj.down{ background: #e3f5ec; color: #1f7a5c; }
.pw-adj.pop{ animation: pw-pop .45s var(--ease); }
@keyframes pw-pop{ 40%{ transform: scale(1.12); } }
.pw-tg{ position: relative; flex: none; width: 36px; height: 21px; border-radius: 99px; background: var(--accent); }
.pw-tg::after{ content: ""; position: absolute; right: 2px; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
/* brand marks, drawn */
.lg-stripe{ background: #635bff; color: #fff; font: 700 12px/1 var(--font-ui); letter-spacing: -.03em; }
.lg-paypal{ display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: italic 800 11px/1 var(--font-ui); letter-spacing: -.02em; white-space: nowrap; }
.lg-paypal i{ font-style: inherit; color: #003087; }
.lg-paypal em{ font-style: inherit; color: #0079c1; }
.lg-cash{ background: #e3f5ec; color: #1f7a5c; }
.lg-check{ background: #fdf1db; color: #b45309; }
.lg-bank{ background: #efe9fd; color: #6d28d9; }
.bdg{ display: inline-flex; align-items: center; justify-content: center; gap: 1px; height: 18px; padding: 0 6px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 800 9px/1 var(--font-ui); font-style: normal; letter-spacing: .02em; color: var(--ink-2); }
.bdg svg{ height: 11px; width: auto; }
.bdg.visa{ color: #1a1f71; font-style: italic; letter-spacing: .04em; }
.bdg.mc{ padding: 0 4px; }
.bdg.mc svg{ height: 13px; }
.bdg.amex{ background: #2e77bb; box-shadow: none; color: #fff; }
.bdg.apay{ background: #000; box-shadow: none; color: #fff; font-weight: 600; letter-spacing: 0; }
.bdg.apay svg{ height: 10px; margin-top: -1px; }
.bdg.gpay{ color: #5f6368; font-weight: 600; letter-spacing: 0; }
.bdg.disc{ gap: 0; color: #231f20; letter-spacing: .02em; }
.bdg.disc b{ color: #f58220; }
.bdg.gpay b{
  font-weight: 800; color: #4285f4;
  background: conic-gradient(from -45deg, #ea4335 0 90deg, #fbbc05 0 180deg, #34a853 0 270deg, #4285f4 0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.mflow{ position: relative; padding: clamp(20px, 2.6vw, 36px); border-radius: 40px; background: linear-gradient(180deg, var(--pv1), var(--pv2)); }
.mf-track{ position: relative; height: 6px; margin: 14px calc(100% / 14) 30px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.mf-fill{ position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: var(--accent); transition: width .9s var(--ease); }
.mf-coin{ position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 0 0 5px #fff, 0 10px 22px -6px rgba(120, 72, 0, .55); transition: left .9s var(--ease); }
.mf-coin .ico{ width: 18px; height: 18px; stroke-width: 2.2; }
.mf-steps{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.mf-steps li{ display: grid; gap: 5px; align-content: start; padding: 14px 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .5); opacity: .55; transform: translateY(6px); transition: opacity .45s var(--ease), transform .55s var(--ease), background-color .45s var(--ease), box-shadow .45s var(--ease); }
.mf-steps li.is-done{ opacity: 1; transform: none; background: #fff; }
.mf-steps li.is-on{ opacity: 1; transform: none; background: #fff; box-shadow: 0 18px 36px -20px rgba(46, 28, 0, .35), inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.mf-steps small{ font: 600 10.5px/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mf-steps b{ font: 600 19px/1.15 var(--font-ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.mf-steps span{ font-size: 13px; line-height: 1.35; color: var(--ink-2); }
/* the app's month card on "Revenue this year" (components.css .dc-tip), in the dashboard's own pixels */
.db-tip{ position: absolute; z-index: 3; left: 0; top: 0; min-width: 200px; padding: 12px 14px; border-radius: 14px; background: #17171f; color: #fff;
  font: 500 12.5px/1.35 Geist, ui-sans-serif, system-ui, sans-serif; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .25s cubic-bezier(.165, .84, .44, 1); }
.db-tip.on{ opacity: 1; transform: none; }
.db-tip h4{ margin: 0 0 8px; font: 600 13.5px/1.2 Geist, ui-sans-serif, system-ui, sans-serif; color: #fff; }
.db-tip hr{ height: 1px; margin: 7px 0; border: 0; background: rgba(255, 255, 255, .14); }
.db-tip .r{ display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.db-tip .r i{ width: 8px; height: 8px; border-radius: 2.5px; background: var(--c); }
.db-tip .r.is-line i{ width: 12px; height: 2px; border-radius: 2px; background: #fff; }
.db-tip .r span{ flex: 1; color: rgba(255, 255, 255, .72); }
.db-tip .r b{ font: 600 12.5px/1 'Geist Mono', ui-monospace, monospace; }
.dash .pv-cursor{ z-index: 4; }
.co{ align-content: center; gap: 8px; }
.co-row{ display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #f5f6f8; font-size: 14.5px; transition: background-color .4s var(--ease), box-shadow .4s var(--ease); }
.co-row i{ flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px #c9ced8; transition: background-color .35s var(--ease), box-shadow .35s var(--ease); }
.co-row.on i{ box-shadow: none; background: #16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.co-row span{ flex: 1; }
.co-row b{ font: 600 14px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.co-row.on{ background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.co-btn{ position: relative; display: grid; place-items: center; height: 48px; margin-top: 6px; border-radius: 14px; overflow: hidden; background: #17171f; color: #fff; font: 600 15px/1 var(--font); }
.co-btn em{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-style: normal; background: var(--accent); transform: translateY(100%); transition: transform .5s var(--ease); }
.co-btn em .ico{ width: 16px; height: 16px; stroke-width: 2.2; }
.co-btn.on em{ transform: none; }
.jl{ align-content: center; gap: 6px; font-family: var(--font-ui); }
.jl-head, .jl-row{ display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.jl-head{ padding-bottom: 4px; font: 600 10.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.jl-row{ background: #fff; box-shadow: inset 0 0 0 1px var(--line); opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .55s var(--ease); }
.jl-row.on{ opacity: 1; transform: none; }
.jl-row span:first-child{ font-size: 13px; color: var(--muted); }
.jl-row b{ font-weight: 600; color: #16794a; font-variant-numeric: tabular-nums; }
.jl-row b.neg{ color: #b42318; }
.jl-foot{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 13.5px; }
.jl-ok{ display: inline-flex; align-items: center; gap: 6px; color: #16794a; font-weight: 600; opacity: 0; transition: opacity .4s var(--ease); }
.jl-ok.on{ opacity: 1; }
.jl-ok .ico{ width: 15px; height: 15px; stroke-width: 2.4; }
.jl-csv{ display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; }
.jl-csv .ico{ width: 15px; height: 15px; }

/* ---------- MovePilot: dark hero with the real assistant panel ---------- */
.hub-pilot{ --accent-ink: #061a3f; }
.hh-dark{
  color: #fff;
  background: radial-gradient(64% 46% at 50% 0%, #1b4fa8 0%, rgba(27, 79, 168, 0) 72%), radial-gradient(56% 34% at 50% 100%, rgba(24, 111, 242, .32) 0%, rgba(24, 111, 242, 0) 72%), var(--navy);
}
.hh-dark::before{ background-image: radial-gradient(rgba(143, 195, 255, .2) 1.1px, transparent 1.4px); }
.hh-dark .hh-head .h1{ color: #fff; }
.hh-dark .hh-head .lead{ color: rgba(255, 255, 255, .76); }
.mp-stage{ position: relative; max-width: 1120px; margin: clamp(36px, 4.5vw, 56px) auto 0; }
/* the product shot rises in with the hero instead of waiting for a scroll reveal (it starts below the fold) */
.js .mp-stage{ animation: mpRise 1s var(--ease) .35s both; }
@keyframes mpRise{ from{ opacity: 0; transform: translateY(28px); } }
@media (prefers-reduced-motion: reduce){ .js .mp-stage{ animation: none; } }
.mp-win{
  position: relative; aspect-ratio: 1060 / 720; border-radius: 20px; overflow: hidden; background: #fff;
  box-shadow: 0 50px 110px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .14);
}
.mp-canvas{ position: absolute; left: 0; top: 0; width: 1060px; height: 720px; transform-origin: 0 0; }
.mp-ui{ position: absolute; inset: 0; }
.mp-canvas .pv-cursor{ z-index: 6; }

/* ---------- MovePilot: it proposes, you approve (drawn flow) ---------- */
.flow4{
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px;
  padding: clamp(20px, 3vw, 40px); border-radius: var(--r-box); background: var(--card);
}
.f4{
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 16px; min-height: 300px; padding: 20px;
  border-radius: 24px; background: #fff; box-shadow: 0 20px 40px -32px rgba(6, 26, 63, .4);
  transition: box-shadow .45s var(--ease), transform .6s var(--ease);
}
.f4.is-on{ box-shadow: 0 0 0 2px var(--accent), 0 26px 50px -30px rgba(24, 111, 242, .6); transform: translateY(-3px); }
/* the connector into the next step fills once a step is done */
.f4:not(.f4-done)::after{
  content: ""; position: absolute; left: 100%; top: 50%; width: 40px; height: 2px; margin-top: -1px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) 50%, color-mix(in srgb, var(--accent) 22%, transparent) 50%) 100% 0 / 200% 100% no-repeat;
  transition: background-position .6s var(--ease);
}
.f4:not(.f4-done)::before{
  content: ""; position: absolute; left: calc(100% + 30px); top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 30%, #fff); transition: background-color .3s var(--ease-btn) .45s;
}
.f4.is-done::after{ background-position: 0 0; }
.f4.is-done::before{ background: var(--accent); }
.f4-k{ display: flex; align-items: center; gap: 9px; font: 600 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); transition: color .3s var(--ease-btn); }
.f4-k b{ display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--card); color: var(--accent); font-size: 12px; letter-spacing: 0; transition: background-color .3s var(--ease-btn), color .3s var(--ease-btn); }
.f4.is-on .f4-k, .f4.is-done .f4-k{ color: var(--accent-ink); }
.f4.is-on .f4-k b, .f4.is-done .f4-k b{ background: var(--accent); color: #fff; }
.f4-note{ font-size: 13px; line-height: 1.4; color: var(--muted); }

.f4-q{ align-self: start; justify-self: end; max-width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 16px 16px 4px 16px; background: var(--accent); color: #fff; font-size: 15.5px; line-height: 1.35; letter-spacing: -.01em; }
.f4-caret{ display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -2px; background: #fff; animation: caret 1s steps(1) infinite; }
.f4-q.typed .f4-caret{ display: none; }

.f4-tools{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; }
.f4-tools span{
  position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 9px; border-radius: 10px;
  background: var(--oat); color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden;
  transition: background-color .3s var(--ease-btn), color .3s var(--ease-btn);
}
.f4-tools .ico{ flex: none; width: 15px; height: 15px; }
.f4-tools span.on{ background: var(--card-2); color: var(--accent-600); }
.f4-tools span.on::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); animation: f4scan .9s linear infinite;
}
@keyframes f4scan{ from{ transform: translateX(-100%); } to{ transform: translateX(100%); } }
.f4-tools span.ok{ background: var(--card); color: var(--accent-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }

.f4-slot{ align-self: start; min-height: 150px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 22%, transparent); }
.f4-slot:has(.show){ box-shadow: none; }
.f4-card, .f4-log{ opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .4s var(--ease), transform .6s var(--ease); }
.f4-card.show, .f4-log.show{ opacity: 1; transform: none; }
.f4-card{ display: grid; gap: 7px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -18px rgba(6, 26, 63, .35); }
.f4-ck{ display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.f4-ck .ico{ width: 13px; height: 13px; }
.f4-card > b{ font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.f4-job{ display: flex; align-items: baseline; gap: 7px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.f4-job i{ font: 500 11.5px/1 var(--font-mono); font-style: normal; color: var(--accent-600); }
.f4-job em{ margin-left: auto; font-style: normal; font-size: 12.5px; color: var(--muted); }
.f4-btns{ display: flex; gap: 6px; margin-top: 4px; }
.f4-btns em{ display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; border-radius: 9px; background: var(--oat); color: var(--ink); font: 600 13px/1 var(--font); font-style: normal; transition: background-color .3s var(--ease-btn), color .3s var(--ease-btn); }
.f4-btns .f4-yes{ flex: 1; background: var(--accent); color: #fff; }
.f4-btns .f4-yes.ok{ background: #16a34a; }
.f4-log{ display: flex; align-items: center; gap: 11px; padding: 14px; border-radius: 16px; background: #e9f7ef; }
.f4-log b{ display: block; font-size: 15px; font-weight: 600; color: #11603a; }
.f4-log small{ display: block; margin-top: 3px; font: 500 12px/1.2 var(--font-mono); color: #2f7d55; }
.f4-ok{ flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #16a34a; color: #fff; }
.f4-ok .ico{ width: 17px; height: 17px; stroke-width: 2.6; }
.f4-trail{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.f4-trail li{ display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.f4-trail li.show{ opacity: 1; transform: none; }
.f4-trail .ico{ flex: none; width: 15px; height: 15px; color: #16a34a; }
.flow4 .pv-cursor{ z-index: 7; }

/* ---------- MovePilot: guardrail cards ---------- */
.runs{ align-content: center; gap: 12px; }
.runs-card{ display: grid; gap: 6px; padding: 16px; border-radius: 16px; background: var(--card); }
.runs-card b{ font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.runs-card small{ font-size: 13.5px; color: var(--ink-2); }
.runs-card small i{ font: 500 12.5px/1 var(--font-mono); font-style: normal; color: var(--accent-600); }
.runs-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.runs-list li{ display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.runs-list li:last-child{ border-bottom: 0; }
.runs-list b{ display: block; font-size: 15px; font-weight: 600; }
.runs-list small{ display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.runs-ok{ flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e9f7ef; color: #16a34a; }
.runs-ok .ico{ width: 14px; height: 14px; stroke-width: 2.6; }
.hist{ align-content: center; gap: 8px; }
.hist-row{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; background: var(--oat); }
.hist-ic{ display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; color: var(--accent); }
.hist-ic .ico{ width: 16px; height: 16px; }
.hist-row b{ display: block; font-size: 15px; font-weight: 600; }
.hist-row small{ display: block; margin-top: 2px; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-row em{ font: 500 12px/1 var(--font-mono); font-style: normal; color: var(--muted); }

/* ---------- small feature tiles ---------- */
.minis{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mini{ display: grid; gap: 10px; align-content: start; padding: 22px 22px 24px; border-radius: 24px; background: var(--oat); }
.mini-ic{ display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--accent); }
.mini-ic .ico{ width: 19px; height: 19px; }
.mini b{ font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.mini p{ margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }

/* ---------- FAQ ---------- */
.faq{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq-l{ position: sticky; top: calc(var(--hdr) + 32px); display: grid; gap: 20px; justify-items: start; }
.faq-l .h3{ color: var(--accent-ink); }
.faq-list{ border-bottom: 1px solid var(--line); }
.faq-list details{ border-top: 1px solid var(--line); }
.faq-list summary{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; list-style: none; cursor: pointer; font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.faq-list summary::-webkit-details-marker{ display: none; }
.faq-list summary::after{
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 10px; transition: transform .35s var(--ease), background-color .25s var(--ease-btn);
  background: var(--oat) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111317' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.faq-list details[open] summary::after{ transform: rotate(45deg); background-color: var(--card); }
.faq-a{ padding: 0 48px 24px 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* ---------- next hubs ---------- */
.next-head{ margin-bottom: 24px; }
.nexthubs{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.nh{ position: relative; display: grid; gap: 28px; align-content: space-between; min-height: 190px; padding: 22px; border-radius: 26px; background: color-mix(in srgb, var(--c) 8%, #fff); transition: transform .5s var(--ease), background-color .3s var(--ease-btn); }
.nh:hover{ transform: translateY(-3px); background: color-mix(in srgb, var(--c) 13%, #fff); }
.nh .hl-ic{ background: var(--c); color: #fff; }
.nh b{ display: block; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.nh small{ display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.nh-arrow{ position: absolute; right: 20px; top: 24px; color: var(--c); transition: transform .35s var(--ease); }
.nh:hover .nh-arrow{ transform: translateX(3px); }

/* ---------- responsive ---------- */
/* AI photo inventory: the photo must stay at least as tall as the panel (≈305px) beside it,
   so the demo gets the wider share of the dark box, then the whole row below the text */
@media (min-width: 1241px) and (max-width: 1440px){
  .darkbox{ grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }
}
@media (max-width: 1240px){
  .darkbox{ grid-template-columns: 1fr; }
  .ai{ width: 100%; max-width: 760px; }
}
@media (max-width: 800px){
  .ai{ display: grid; gap: 14px; padding-right: 0; }
  .ai-panel{ position: static; width: auto; }
}
@media (max-width: 1100px){
  .duo, .duo.rev{ grid-template-columns: 1fr; }
  .duo.rev .duo-txt{ order: 0; }
  .duo-vis{ max-width: 680px; width: 100%; justify-self: center; }
  .pg-grid{ grid-template-columns: 1fr; }
  .pg-out{ position: relative; top: auto; width: 100%; max-width: 420px; justify-self: center; }
  .cards2{ grid-template-columns: 1fr; }
  .nexthubs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq{ grid-template-columns: 1fr; }
  .faq-l{ position: static; }
  .vol-chain{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vs-top, .fx-stage, .tx-row{ grid-template-columns: minmax(0, 1fr); }
  .lt-out{ min-height: 400px; }
  .anat-steps{ grid-template-columns: repeat(5, minmax(200px, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .d3-row{ grid-template-columns: 1fr; }
  .mf-steps{ grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); overflow-x: auto; scrollbar-width: none; }
  .mf-track{ display: none; }
  .l2p{ grid-template-columns: 1fr; }
  .l2p-view{ min-height: 0; aspect-ratio: 664 / 620; flex: none; }
  .ct{ grid-template-columns: 1fr; }
  .ct-steps{ grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); overflow-x: auto; scrollbar-width: none; }
  .pipe-view{ aspect-ratio: 1440 / 900; }
  .jr{ grid-template-columns: 1fr; }
  .jr-steps{ grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; scrollbar-width: none; }
  .jr-steps li.is-on{ transform: translateY(-2px); }
  .jr-win{ aspect-ratio: 1 / 1; }
  .flow4{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .f4:not(.f4-done)::after, .f4:not(.f4-done)::before{ display: none; }
}
@media (max-width: 720px){
  .hh-box{ border-radius: 32px; }
  .anat-win{ border-radius: 12px; }
  .anat-tag{ display: none; }
  .anat-steps{ display: flex; margin-inline: -4px; padding: 0 4px; }
  .anat-steps li{ flex: none; width: 236px; }
  .pg-box{ border-radius: 32px; }
  .pg-two{ grid-template-columns: 1fr; gap: 20px; }
  .pg-cal{ gap: 4px; }
  .pg-day b{ font-size: 14.5px; }
  .eq-chip{ min-width: 0; padding: 8px 10px 9px; }
  .eq-chip b{ font-size: 15px; }
  .eq-total b{ font-size: 16px; }
  .vol-chain{ display: flex; overflow-x: auto; scrollbar-width: none; padding-top: 4px; margin-top: -4px; }
  .vol-chain li{ flex: none; width: 176px; }
  .vol-stage{ border-radius: 24px; }
  .vs-row{ grid-template-columns: minmax(0, 1fr); }
  .vs-card{ padding: 16px 16px 18px; }
  .vs-head{ flex-direction: column; gap: 10px; }
  .vs-total b, .vs-big b{ font-size: 30px; }
  .vi-top{ flex-direction: column; align-items: stretch; }
  .vi-stats{ justify-content: flex-end; }
  .vi-search{ display: none; }
  .vi-plus{ margin-left: auto; }   /* the search box held it right on wider screens */
  .fb-head{ flex-wrap: wrap; }
  .fb-save, .fb-cfg, .tr-act{ display: none; }
  .rc-head{ flex-direction: column; gap: 10px; }
  .rc-legend{ margin-left: 0; justify-content: flex-start; }
  .rc-months{ grid-template-columns: minmax(0, 1fr); }
  .rc-m:not(.is-main){ display: none; }   /* a phone shows the month being painted */
  .tr-row{ flex-wrap: wrap; gap: 8px 14px; padding: 10px 14px; }
  .tr-cols{ flex-basis: 100%; gap: 4px 14px; }
  .rc-desel{ display: none; }
  .lt-total{ padding: 12px 14px; }
  .lt-total b{ font-size: 16px; }
  .rc-toast{ width: calc(100% - 16px); white-space: normal; }
  .vi-grid{ grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .vs-movers{ grid-template-columns: repeat(8, 22px); gap: 4px; }
  .vs-movers i{ width: 22px; height: 22px; }
  .vs-movers .ico{ width: 12px; height: 12px; }
  .fcard{ border-radius: 28px; }
  .fc-vis{ padding: 14px; min-height: 0; }
  .days{ grid-template-columns: 1fr; }
  .night{ width: auto; grid-auto-flow: column; justify-content: center; }
  .act-bills{ grid-template-columns: 1fr; }
  .act-timer{ width: auto; grid-auto-flow: column; justify-content: center; align-items: center; gap: 8px; }
  .minis{ grid-template-columns: 1fr; }
  /* a phone stacks the portal and its one note in the flow, with no empty stage around them */
  .hh-comp{ aspect-ratio: auto; height: auto; }
  .hh-comp .comp{ position: relative; inset: auto; display: flex; flex-direction: column; }
  .hh-comp .comp-win{ position: relative; left: 0; width: 100%; }
  .hh-comp .float.f-r{ position: relative; right: auto; top: auto; bottom: auto; align-self: flex-end; margin: 12px 0 0; }
  .jr-win{ aspect-ratio: 4 / 3; border-radius: 22px; }
  .d3-scrub{ grid-template-columns: auto minmax(0, 1fr); padding: 10px 12px; }
  .d3-time{ grid-column: 1 / -1; text-align: center; }
  .hrs-sum{ grid-template-columns: 1fr 1fr; }
  .hrs-s b{ display: none; }
  .sgn-ways span{ padding-right: 10px; font-size: 11.5px; }
  .ofa{ padding: 12px; }
  .nexthubs{ grid-template-columns: 1fr; }
  .nh{ min-height: 0; }
  .faq-a{ padding-right: 0; }
  .mp-win{ aspect-ratio: 822 / 720; border-radius: 14px; }
  .flow4{ grid-template-columns: 1fr; padding: 12px; border-radius: 32px; }
  .f4{ min-height: 0; }
  .f4-slot{ min-height: 0; }
  .hist-row em{ display: none; }
}