/* /for-field-service only. Tokens only (no colour literals); works in both themes. One hairline grid, one line weight, status colour only where it carries meaning. Motion is slow, opacity or growth only, and off under reduced motion. */
.fs-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.fs-fig { margin: 8px 0; display: flex; flex-direction: column; gap: 10px; }
.fs-fig figcaption, .fs-phonefig figcaption { font: 450 13px/19px var(--font-mono); color: var(--ink-muted); max-width: 52em; }
.prose a.btn1 { color: var(--on-volt); text-decoration: none; }
.fs-note { font: 450 13px/19px var(--font-mono); color: var(--ink-muted); }
.fs-ico svg, .fs-check svg, .fs-s i svg { width: 100%; height: 100%; display: block; }

/* ---- hero: the work order board ---- */
.fs-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lift); overflow: hidden; }
.fs-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 12px 16px; background: var(--surface-sunken); }
.fs-col + .fs-col { border-left: 1px solid var(--line); }
.fs-colhead { display: flex; align-items: center; gap: 8px; font: 600 13px/18px var(--font-text); color: var(--ink); padding: 0 2px 8px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.fs-colhead i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.fs-colhead b { margin-left: auto; font: 500 12px/16px var(--font-mono); color: var(--ink-muted); }
.fs-c-req { --c: var(--status-new); }
.fs-c-sch { --c: var(--status-waiting); }
.fs-c-site { --c: var(--status-active); }
.fs-c-done { --c: var(--status-resolved); }
.fs-card { display: flex; flex-direction: column; gap: 1px; padding: 10px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-raised); box-shadow: var(--shadow-card); position: relative; min-width: 0; }
.fs-card strong { display: block; font: 600 13px/18px var(--font-text); color: var(--ink); overflow-wrap: anywhere; }
.fs-card em { display: block; font: 450 12px/16px var(--font-text); font-style: normal; color: var(--ink-muted); }
.fs-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; font: 500 11px/16px var(--font-mono); color: var(--ink-muted); min-height: 16px; }
.fs-crew-t { padding-left: 8px; border-left: 1px solid var(--line-strong); }
.fs-dim { box-shadow: none; background: transparent; }
.fs-dim strong { color: var(--ink-muted); font-weight: 500; }
.fs-check { width: 16px; height: 16px; padding: 3px; box-sizing: border-box; border-radius: 50%; background: var(--c); color: var(--bg); flex: none; margin-left: auto; }
.fs-slot { border-radius: 9px; border: 1px dashed var(--line-strong); position: relative; min-height: 84px; }
.fs-slot .fs-card { height: 100%; box-sizing: border-box; border-color: color-mix(in srgb, var(--c) 60%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent), var(--shadow-lift); opacity: 0; }
/* Reduced motion (and no-animation) default: the one highlighted work order sits in On site. */
.fs-t3 .fs-card { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .fs-slot .fs-card { animation: fs-visit 16s ease-in-out infinite both; }
  .fs-t1 .fs-card { animation-delay: 0s; }
  .fs-t2 .fs-card { animation-delay: 4s; }
  .fs-t3 .fs-card { animation-delay: 8s; }
  .fs-t4 .fs-card { animation-delay: 12s; }
}
@keyframes fs-visit { 0% { opacity: 0; } 5%, 21% { opacity: 1; } 26%, 100% { opacity: 0; } }

/* ---- the year strip ---- */
.fs-year { padding: 20px 22px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.fs-yhead { display: flex; justify-content: space-between; gap: 12px; font: 500 12px/16px var(--font-mono); color: var(--ink-muted); margin-bottom: 14px; }
.fs-yhead span:first-child { color: var(--ink); font-weight: 600; }
.fs-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: end; height: 170px; border-bottom: 1px solid var(--line-strong); background-image: repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 25%); position: relative; }
.fs-m { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.fs-m .fs-bar { display: block; width: 100%; max-width: 34px; height: var(--h); border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--ink-muted) 38%, transparent); transform-origin: bottom; }
.fs-pk .fs-bar { background: var(--volt); box-shadow: inset 0 0 0 1px var(--volt-text); }
.fs-m small { position: absolute; top: calc(100% + 8px); font: 500 11px/14px var(--font-mono); color: var(--ink-muted); }
.fs-bands { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; margin-top: 30px; font: 500 12px/16px var(--font-mono); }
.fs-bands span { padding-top: 6px; border-top: 2px solid var(--volt-text); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-b1 { grid-column: 3 / 6; } .fs-b2 { grid-column: 9 / 12; }
@media (prefers-reduced-motion: no-preference) {
  .fs-bar { animation: fs-grow 800ms var(--ease-out) both; }
  .fs-m:nth-child(n+4) .fs-bar { animation-delay: 100ms; } .fs-m:nth-child(n+7) .fs-bar { animation-delay: 200ms; } .fs-m:nth-child(n+10) .fs-bar { animation-delay: 300ms; }
}
@keyframes fs-grow { from { transform: scaleY(0.2); opacity: 0.3; } to { transform: none; opacity: 1; } }

/* ---- real product screenshots, theme-aware like the rest of the site ---- */
.fs-shotfig { margin: 6px 0; }
.fs-shot { border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-pop); }
.fs-bar3 { display: flex; align-items: center; gap: 6px; padding: 0 14px; height: 34px; background: var(--surface-sunken); border-bottom: 1px solid var(--line); }
.fs-bar3 i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-strong); }
.fs-bar3 span { margin-left: 10px; font: 500 11px/16px var(--font-mono); color: var(--ink-muted); }
.fs-shot img { display: block; width: 100%; height: auto; }
.mk[data-theme="day"] .fs-dk, .mk:not([data-theme="day"]) .fs-lt { display: none; }

/* ---- workflow + phone ---- */
.fs-flow { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start; }
.fs-steps { list-style: none; padding: 0 !important; margin: 0; position: relative; gap: 0 !important; }
.fs-steps::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 1px; background: var(--line-strong); }
.fs-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; padding-bottom: 24px; max-width: none; position: relative; }
.fs-steps li:last-child { padding-bottom: 0; }
.fs-steps h3 { margin: 2px 0 4px; font-size: 18px; line-height: 24px; }
.fs-steps p { font-size: 15px; line-height: 24px; }
.fs-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--font-mono); color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); position: relative; z-index: 1; }
.fs-steps li:nth-child(4) .fs-n { border-color: var(--volt-text); color: var(--volt-text); }
.fs-phonefig { margin: 0; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 24px; }
.fs-phone { position: relative; border: 1px solid var(--line-strong); border-radius: 34px; padding: 7px; background: var(--surface-sunken); box-shadow: var(--shadow-pop); }
.fs-screen { padding: 22px 14px 16px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); border-radius: 27px; border: 1px solid var(--line); }
.fs-appbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 600 12px/16px var(--font-text); color: var(--ink); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.fs-appbar small { flex-basis: 100%; padding-left: 20px; font: 450 11px/14px var(--font-mono); color: var(--ink-muted); }
.fs-logo-dot { width: 12px; height: 12px; border-radius: 4px 50% 4px 50%; background: var(--volt); flex: none; }
.fs-wo small { font: 500 11px/14px var(--font-mono); color: var(--ink-muted); display: block; }
.fs-wo strong { font: 700 18px/23px var(--font-display); color: var(--ink); letter-spacing: -0.015em; }
.fs-track { display: flex; flex-direction: column; gap: 0; position: relative; }
.fs-s { display: flex; align-items: center; gap: 12px; font: 500 13px/18px var(--font-text); color: var(--ink-muted); padding: 5px 0; position: relative; }
.fs-s + .fs-s::before { content: ""; position: absolute; left: 8px; top: -9px; height: 18px; width: 1px; background: var(--line-strong); }
.fs-s i { width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--line-strong); box-sizing: border-box; flex: none; padding: 3px; background: var(--bg); position: relative; z-index: 1; }
.fs-s-done i { background: var(--ink-muted); border-color: var(--ink-muted); color: var(--bg); }
.fs-s-now { color: var(--ink); font-weight: 600; }
.fs-s-now i { border-color: var(--status-active); background: var(--status-active); box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-active) 22%, transparent); }
@media (prefers-reduced-motion: no-preference) { .fs-s-now i { animation: fs-pulse 3s ease-in-out infinite; } }
@keyframes fs-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--status-active) 6%, transparent); } }
.fs-file { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 8px 10px; border: 1px dashed var(--line-strong); border-radius: 8px; font: 500 12px/16px var(--font-text); color: var(--ink); }
.fs-file span { white-space: nowrap; }
.fs-file small { min-width: 0; font: 450 10.5px/14px var(--font-mono); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-msg { font: 400 12.5px/18px var(--font-text); color: var(--ink); padding: 8px 11px; border-radius: 12px 12px 12px 4px; background: var(--surface); border: 1px solid var(--line); max-width: 92%; }
.fs-msg small { display: block; font: 600 10.5px/14px var(--font-mono); color: var(--ink-muted); margin-bottom: 1px; }
.fs-client { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: var(--volt-soft); border-color: transparent; }

/* ---- capability cards ---- */
.fs-cards { list-style: none; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px !important; }
.fs-cards li { max-width: none; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.fs-cards li:first-child { grid-column: 1 / -1; background: linear-gradient(120deg, var(--volt-soft), var(--surface) 55%); }
.fs-cards h3 { margin: 2px 0 0; font-size: 18px; }
.fs-cards p { font-size: 15px; line-height: 24px; }
.fs-cards .fs-ico { display: block; width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 10px; color: var(--ink); background: var(--surface-sunken); border: 1px solid var(--line); }
.fs-cards li:first-child .fs-ico { color: var(--volt-text); }

/* ---- pricing ---- */
.fs-price { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fs-tier { padding: 16px 18px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 2px; }
.fs-tier b { font: 760 30px/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.fs-tier span { font: 450 14px/20px var(--font-text); color: var(--ink-muted); }
.prose .qa { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; border-left: 3px solid var(--line-strong); background: var(--surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.prose .qa h3 { margin: 0; font-size: 17px; }

/* ---- small screens ---- */
@media (max-width: 860px) {
  .fs-flow { grid-template-columns: minmax(0, 1fr); }
  .fs-phonefig { position: static; align-items: center; }
  .fs-phone { width: 292px; max-width: 100%; box-sizing: border-box; }
}
@media (max-width: 640px) {
  .fs-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-col:nth-child(3) { border-left: 0; }
  .fs-col:nth-child(n+3) { border-top: 1px solid var(--line); }
  .fs-cards, .fs-price { grid-template-columns: minmax(0, 1fr); }
  .fs-year { padding: 16px 12px 12px; }
  .fs-months, .fs-bands { gap: 3px; }
  .fs-m small { font-size: 9.5px; letter-spacing: -0.05em; }
  .fs-bands { font-size: 10.5px; }
  .fs-b1 { grid-column: 2 / 7; } .fs-b2 { grid-column: 8 / 13; }
  .fs-yhead span:last-child { display: none; }
  .fs-col { padding: 12px 8px 14px; }
  .fs-card { padding: 8px; }
}

/* screenshots: sideways-scrolling frame on phones */
.fs-scroll:focus-visible { outline: 2px solid var(--tide-text); outline-offset: -2px; }
@media (max-width: 760px) {
  .fs-scroll { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .fs-shot .fs-scroll img { width: 1000px; max-width: none; scroll-snap-align: start; }
}