/* fx-site — polish pass 2026-10-07 (interactive showcases). */
/* Industry playable tiles (lib/fx-site.mjs) */
.fx-range { display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
.fx-range b { color: var(--ink); }
.fx-range input { width: 100%; accent-color: #7c5cff; height: 28px; cursor: pointer; touch-action: pan-y; }
.fx-rc .rc-bar i, .fx-rc .rc-bar s { transition: width .15s ease; }
.fx-rc.is-clear .fx-rc-none { display: none; }
.fx-rc.is-clear .fx-rc-go { background: #eef0f4; color: var(--muted); box-shadow: none; }
.fx-units .fx-u-row { align-items: center; gap: 10px; }
.fx-u-name { display: grid; gap: 2px; min-width: 0; }
.fx-u-name small { color: var(--muted); font-size: 11.5px; }
.fx-step { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; background: #f1f2f6; }
.fx-step output { min-width: 26px; text-align: center; font: 700 14px/1 var(--font); font-variant-numeric: tabular-nums; }
.fx-step-b { width: 30px; height: 30px; border: 0; border-radius: 8px; background: #fff; color: var(--ink); font: 700 17px/1 var(--font); cursor: pointer; box-shadow: 0 1px 2px rgb(20 20 40 / .12); }
.fx-step-b:disabled { opacity: .35; cursor: default; }
.fx-step-b:focus-visible, .fx-seg button:focus-visible, .fx-range input:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.fx-units .inv-amt, .fx-u-total, .fx-f-rent, .fx-f-total, .fx-j-price, .fx-j-fee, .fx-j-margin { font-variant-numeric: tabular-nums; }
.fx-f-cal { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.fx-f-cal i { font: 600 10.5px/1 var(--font); font-style: normal; text-align: center; padding: 7px 0; border-radius: 7px; background: #f1f2f6; color: #9aa0a8; transition: background-color .15s ease, color .15s ease; }
.fx-f-cal i.on { background: #ede9ff; color: #5b3fd9; }
.fx-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 3px; border-radius: 11px; background: #f1f2f6; }
.fx-seg button { min-height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: 600 13px/1 var(--font); cursor: pointer; }
.fx-seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgb(20 20 40 / .14); }
.fx-rc .rc-big b { font: inherit; color: inherit; }
.fx-units .fx-u-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 84px; align-items: center; gap: 12px; }
.fx-units .fx-u-row .inv-amt { text-align: right; }
/* Hero card stages: a short card sits at the top instead of stretching into empty space. */
.stage-cards > div > .invoice { align-self: start; }
/* The job record's three money boxes fit a phone (they overflowed at 390px). */
.money .tile { min-width: 0; }
@container (max-width: 420px) { .money .tile-num { font-size: 17px; } }
@media (max-width: 480px) { .money { gap: 6px; } .money .tile { padding-inline: 10px; } .money .tile-num { font-size: 16px; letter-spacing: -.02em; } .money .tile-num-sm-wrap .tile-num { font-size: 16px; } }
.fx-seg button { white-space: nowrap; padding-inline: 4px; }
@media (max-width: 480px) { .fx-seg button { font-size: 12px; } }
.fx-seg button { white-space: nowrap; padding-inline: 4px; }
@media (max-width: 480px) { .fx-seg button { font-size: 11.5px; } }
/* Nav: an invisible bridge over the 10px gap so hovering down to the panel keeps it open. */
.nav-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }

/* ---------- Brokering, for haulers and brokers (lib/brokerfx.mjs) ---------- */
.bk-try { max-width: 980px; margin-inline: auto; }


.ft { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
.ft-list { display: grid; gap: 6px; }
.ft-tab { position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px 14px; border: 0; border-radius: 14px; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; overflow: hidden; transition: background-color .2s ease, box-shadow .2s ease; }
.ft-tab:hover { background: rgb(255 255 255 / .7); }
.ft-tab.is-on { background: #fff; box-shadow: 0 1px 2px rgb(20 20 40 / .06), 0 10px 24px -14px rgb(40 24 90 / .25); }
.ft-tab span { display: grid; gap: 3px; min-width: 0; }
.ft-tab b { font: 700 15.5px/1.25 var(--font); color: var(--ink); }
.ft-tab small { font-size: 13.5px; line-height: 1.4; color: var(--muted); display: none; }
.ft-tab.is-on small { display: block; }
.ft-tab:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.ft-bar { position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px; background: var(--grad-brand); transform: scaleX(0); transform-origin: left; opacity: 0; }
.ft.is-run .ft-tab.is-on .ft-bar { opacity: 1; animation: ft-bar var(--ft-ms, 5200ms) linear forwards; }
@keyframes ft-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ft-stage { display: grid; place-items: center; min-height: 520px; padding: clamp(18px, 3vw, 36px); border-radius: 24px; background: linear-gradient(135deg, #f3efff 0%, #fdf0f7 55%, #fff4ea 100%); box-shadow: inset 0 0 0 1px #ece6fb; }
.ft-panel { width: min(100%, 560px); animation: ft-in .35s cubic-bezier(.2, .9, .3, 1) both; }
.ft-panel.is-phone { width: 290px; }
.ft-panel .ui-card, .ft-panel .sees, .ft-panel .bm { box-shadow: 0 24px 50px -30px rgb(40 24 90 / .45); }
.ft-sees .sees, .ft-month .bm { background: #fff; border-radius: 18px; padding: 18px; }
@keyframes ft-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ft-panel { animation: none; } }
@media (max-width: 900px) {
  .ft { grid-template-columns: minmax(0, 1fr); }
  .ft-list { grid-auto-flow: column; grid-auto-columns: minmax(220px, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .ft-tab { scroll-snap-align: start; }
  .ft-tab small { display: block; }
  .ft-stage { min-height: 0; }
}
.aud .section > .container > .section-head { margin-bottom: clamp(28px, 4vw, 44px); }
.ft-stage { grid-template-columns: minmax(0, 1fr); }
.ft-panel { max-width: 100%; min-width: 0; justify-self: center; }
.ft-panel > div, .ft-panel > div > div { min-width: 0; max-width: 100%; }
@media (max-width: 600px) { .ft-stage { padding: 12px; border-radius: 18px; } }

/* No "Plays on its own / Try it yourself" bars (Charles, 2026-10-12: "you should be able to try it
   just by clicking on it"). Every demo hands over on its own controls; the only text left is the
   feedback a demo gives while the visitor is using it (Plan the day, drag the pin). */
.px-bar, .hx-try, .jr-live { display: none !important; }
.rt:not(.is-driven) .rt-try, .pl:not(.is-driven) .pl-try { display: none !important; }
.rt-try-btn, .pl-try-btn { display: none !important; }

/* Hauler link demo (lib/brokerfx.mjs, kind "hl"): reuses the driver demo layout (.px-drv). */
.px-hl[data-s="6"] .px-drv-go { background: #16a34a; }
.px-hl.is-live:not([data-s="6"]) .px-drv-go { animation: px-tap 2.2s ease-in-out infinite; }
.hl-powered { margin: 6px 0 0; text-align: center; font: 500 9.5px/1 var(--font); color: #a3a7b0; }
.hl-site { gap: 10px; }
.hl-empty { font-size: 13px; color: var(--muted); padding: 10px 12px; border-radius: 12px; background: #f4f4f8; }
.hl-sms { display: grid; gap: 4px; }
.hl-sms small { font-size: 11px; color: var(--muted); }
.hl-sms p { margin: 0; justify-self: start; max-width: 100%; padding: 9px 12px; border-radius: 16px 16px 16px 4px; background: #eef0f4; font-size: 13.5px; line-height: 1.35; color: var(--ink); }
.hl-sees { list-style: none; margin: 4px 0 0; padding: 10px 0 0; border-top: 1px solid #eef0f4; display: grid; gap: 8px; }
.hl-sees li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 12.5px; line-height: 1.35; color: var(--body, #3f434c); }
.hl-sees li .ic { width: 18px; height: 18px; padding: 3px; border-radius: 50%; stroke-width: 3; }
.hl-sees .y .ic { background: #dcfce7; color: #15803d; }
.hl-sees .n .ic { background: #fee2e2; color: #b91c1c; }
/* What you can broker */
.svc { max-width: 760px; margin-inline: auto; display: grid; gap: 14px; }
.svc-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: #ecebf3; }
.svc-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font: 600 14.5px/1.1 var(--font); cursor: pointer; }
.svc-seg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgb(20 20 40 / .14); }
.svc-seg button[aria-selected="true"] .ic { color: #7c5cff; }
.svc-seg button:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.svc-card { padding: 22px 24px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px #ecebf2, 0 18px 40px -28px rgb(40 24 90 / .35); animation: ft-in .3s ease both; }
.svc-card dl { margin: 0; display: grid; gap: 14px; }
.svc-card dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; }
.svc-card dt { font: 600 12px/1.6 var(--font); letter-spacing: .04em; text-transform: uppercase; color: #8a8e98; }
.svc-card dd { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.svc-who { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #eef0f4; }
.svc-who > span:not(.svc-tag) { display: grid; gap: 2px; min-width: 0; }
.svc-who b { font: 700 14.5px/1.2 var(--font); }
.svc-who small { font-size: 13px; color: var(--muted); }
.svc-tag { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: #efeaff; color: #5b3fd9; font: 600 12px/1 var(--font); }
@media (max-width: 600px) { .svc-seg button { flex-direction: column; gap: 4px; font-size: 12.5px; min-height: 56px; } .svc-card { padding: 18px; } .svc-card dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
@media (prefers-reduced-motion: reduce) { .svc-card { animation: none; } }

/* ---------- Hauler link, two phones (lib/brokerfx.mjs haulerLinkScene) ---------- */
.hx2 { display: flex; justify-content: center; align-items: center; gap: clamp(16px, 4vw, 56px); }
.hx2-col { margin: 0; display: grid; justify-items: center; gap: 14px; }
.hx2-col .phone { --pz: 1; }
.hx2-col figcaption { font: 600 13.5px/1 var(--font); color: var(--muted); }
.hx2-mid { display: grid; justify-items: center; gap: 8px; color: #7c5cff; }
.hx2-mid span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--grad-brand); color: #fff; box-shadow: 0 10px 24px -10px rgb(124 92 255 / .7); }
.hx2-mid small { font: 600 12px/1.2 var(--font); color: var(--muted); text-align: center; max-width: 90px; }
/* the hauler's link: the real island, quiet */
.hx2-top { display: flex; align-items: center; gap: 7px; margin: 4px 12px 0; font-size: 11.5px; }
.hx2-top b { font-weight: 700; color: #5b3fd9; }
.hx2-top small { margin-left: auto; color: #9aa0a8; font-size: 10.5px; }
.hx2-ctx { display: flex; align-items: center; gap: 6px; margin: 14px 12px 0; font-size: 11px; color: var(--muted); }
.hx2-head { margin: 6px 12px 0; font: 800 21px/1.15 var(--font); letter-spacing: -.02em; color: var(--ink); min-height: 50px; }
.hx2-place { position: relative; margin: 10px 12px 0; border-radius: 14px; overflow: hidden; background: #000; }
.hx2-place img { display: block; width: 100%; height: 132px; object-fit: cover; object-position: 30% 70%; }
.hx2-pin { position: absolute; left: 26%; top: 52%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--grad-brand); box-shadow: 0 0 0 4px rgb(255 255 255 / .9), 0 0 0 10px rgb(124 92 255 / .35); }
.hx2-place span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; background: linear-gradient(180deg, transparent, rgb(0 0 0 / .72)); color: #fff; font: 600 11px/1.3 var(--font); }
.hx2-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 12px 0; }
.hx2-soft { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border: 1.5px solid; border-radius: 999px; background: #fff; font: 700 12px/1 var(--font); cursor: default; }
.hx2-dir { color: #0d9488; border-color: rgb(13 148 136 / .35); }
.hx2-omw { color: #0a7cff; border-color: rgb(10 124 255 / .35); cursor: pointer; }
.hx2.is-sent .hx2-omw { background: #0a7cff; color: #fff; border-color: #0a7cff; }
.hx2.is-on:not(.is-sent) .hx2-omw { animation: hx2-nudge 1.8s ease-in-out infinite; }
.hx2-go { display: block; width: calc(100% - 24px); margin: auto 12px 0; height: 50px; border: 0; border-radius: 999px; background: var(--grad-brand); color: #fff; font: 800 15px/1 var(--font); box-shadow: 0 8px 18px -8px rgb(124 92 255 / .7); cursor: pointer; }
.hx2.is-here .hx2-go { background: linear-gradient(135deg, #059669, #10b981 55%, #34d399); box-shadow: 0 8px 18px -8px rgb(5 150 105 / .6); }
.hx2-col .ps { display: flex; flex-direction: column; padding-bottom: 14px; }
.hx2-powered { margin: 8px 0 0; text-align: center; font: 500 9px/1 var(--font); color: #b3b7c0; }
/* your customer's phone: a plain Messages thread */
.hx2-thread-h { display: grid; justify-items: center; gap: 4px; margin: 8px 12px 0; padding-bottom: 12px; border-bottom: 1px solid #eef0f4; text-align: center; }
.hx2-thread-h b { font: 700 13px/1.1 var(--font); }
.hx2-thread-h small { font-size: 10.5px; color: var(--muted); }
.hx2-thread { display: flex; flex-direction: column; gap: 8px; padding: 14px 10px; }
.hx2-thread p { margin: 0; max-width: 84%; padding: 9px 12px; border-radius: 18px; font-size: 12.5px; line-height: 1.35; }
.hx2-in { align-self: flex-start; background: #e9e9eb; color: #111; border-bottom-left-radius: 6px; }
.hx2-out { align-self: flex-end; background: #0a7cff; color: #fff; border-bottom-right-radius: 6px; }
.hx2-typing { align-self: flex-end; display: inline-flex; gap: 4px; background: #0a7cff; padding: 11px 13px !important; }
.hx2-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgb(255 255 255 / .85); animation: hx2-dot 1s infinite ease-in-out; }
.hx2-typing i:nth-child(2) { animation-delay: .15s; } .hx2-typing i:nth-child(3) { animation-delay: .3s; }
/* before the script runs (or without it), the finished picture shows */
.hx2.is-on .hx2-in, .hx2.is-on .hx2-out, .hx2.is-on .hx2-typing { display: none; }
.hx2.is-on.is-sent .hx2-in { display: block; animation: hx2-pop .35s cubic-bezier(.2, .9, .3, 1.2) both; }
.hx2.is-on.is-typing .hx2-typing { display: inline-flex; }
.hx2.is-on.is-replied .hx2-out { display: block; animation: hx2-pop .35s cubic-bezier(.2, .9, .3, 1.2) both; }
.hx2:not(.is-on) .hx2-typing { display: none; }
@keyframes hx2-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes hx2-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
@keyframes hx2-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgb(10 124 255 / 0); } 50% { box-shadow: 0 0 0 6px rgb(10 124 255 / .18); } }
@media (prefers-reduced-motion: reduce) { .hx2 * { animation: none !important; } }
@media (max-width: 760px) {
  .hx2 { flex-direction: column; gap: 14px; }
  .hx2-mid span { transform: rotate(90deg); }
}